@font-face{font-family:Syne;src:url('/brand/fonts/syne-latin-wght.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Manrope;src:url('/brand/fonts/manrope-latin-wght.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{--ink:#07111d;--blue:#597ca4;--paper:#f3f0ea;--sand:#c9aa88;--ice:#d9e8f7;--line:#314355;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:#040b13;color:var(--paper);font-family:Manrope,sans-serif}button,a,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--sand);outline-offset:5px}::selection{background:var(--sand);color:var(--ink)}
.preview-header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #192738;gap:20px}.studio{font:700 23px Syne,sans-serif;color:var(--paper);text-decoration:none}.studio span{color:var(--blue)}.preview-header>span{color:#a8bfd2;font-size:12px}.preview-header>button{background:none;border:0;color:var(--ice);font-size:12px;padding:12px;border-bottom:1px solid var(--blue)}
main{max-width:1320px;margin:38px auto;padding:0 42px 32px}.postcard{aspect-ratio:148/105;position:relative;isolation:isolate;background:var(--ink);overflow:hidden;box-shadow:0 24px 70px #0007;container-type:inline-size}.cartography{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.cartography #contours{fill:none;stroke:#597ca4;stroke-width:1.05;opacity:.32}.trail{fill:none;stroke:var(--sand);stroke-width:1.4;stroke-dasharray:4 7;opacity:.43}#signal{fill:var(--sand)}
.card-brand{position:absolute;left:4.3%;top:5.2%;font:700 3.2cqw/1 Syne,sans-serif;letter-spacing:-.03em}.card-brand span{color:var(--blue)}.card-brand i{display:block;width:2.8cqw;height:2px;background:var(--sand);margin-top:2.1cqw}h1{position:absolute;left:4.1%;top:18.5%;margin:0;z-index:2;font:800 12.8cqw/.91 Syne,sans-serif;letter-spacing:-.035em;pointer-events:none}h1>span{display:block}h1 .blue{color:var(--blue)}
.scene{position:absolute;left:39%;top:12%;width:58%;height:79%;z-index:1}.scene canvas{width:100%;height:100%;display:block}.loading{position:absolute;inset:35% 15%;font-size:14px;color:var(--ice);text-align:center;line-height:1.7}.beacon{position:absolute;display:flex;align-items:center;gap:1.4cqw;font:600 .9cqw Manrope,sans-serif;letter-spacing:.2em;z-index:3}.beacon i{width:.65cqw;height:.65cqw;background:var(--sand);border-radius:50%;position:relative}.beacon i:before{content:'';position:absolute;inset:-1.1cqw;border:1px solid #c9aa8866;border-radius:50%}.beacon i:after{content:'';position:absolute;inset:-.55cqw;border:1px solid #c9aa882b;border-radius:50%}.beacon.active i{background:var(--paper)}.beacon.active i:before{border-color:var(--sand)}.beacon-idea{left:42%;top:13%}.beacon-design{right:5.4%;top:11%}.beacon-code{left:44%;bottom:13%}.compass{position:absolute;right:3%;bottom:24%;width:8%;opacity:.7;z-index:0}.compass svg{width:100%;fill:none;stroke:var(--blue);stroke-width:.7}.compass .needle{fill:var(--sand);stroke:none}.compass>span{position:absolute;left:-15%;top:44%;font-size:.75cqw;color:var(--sand)}
.card-footer{position:absolute;bottom:5%;left:4.3%;right:4.3%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.82cqw;letter-spacing:.23em;line-height:1.5}.card-footer span:before{content:'';display:block;width:2.8cqw;height:2px;background:var(--sand);margin-bottom:1.8cqw}.card-footer span:last-child{text-align:right}.card-footer span:last-child:before{margin-left:auto}
.controls{display:flex;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid #243548}.transport{display:flex;gap:6px}.controls button{display:grid;place-items:center;background:none;border:0;color:var(--ice);width:42px;height:42px}.controls button:hover{color:var(--sand);background:#162435}.controls svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.scrubber{flex:1;display:flex}.scrubber input{width:100%;accent-color:var(--sand);cursor:pointer;height:24px}.controls output{color:var(--ice);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}.caption{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-top:22px}.caption p{margin:0}.caption p:first-child{font:500 25px Syne,sans-serif}.caption p:last-child{font-size:11px;line-height:1.7;color:#a8bfd2;text-align:right}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.error{padding:20px;color:var(--paper);border:1px solid var(--sand)}
body.focus .preview-header,body.focus .controls,body.focus .caption{display:none}body.focus main{max-width:none;margin:0;padding:0;min-height:100svh;display:grid;place-items:center}body.focus .postcard{width:min(100vw,140.95svh)}.postcard:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}.postcard:fullscreen .scene{height:79%}
@media(max-width:700px){.preview-header{height:68px;padding:0 20px}.preview-header>span{display:none}main{padding:0 12px 24px;margin-top:28px}.controls{gap:7px;padding:12px 0}.controls button{width:36px;height:40px}.controls output{font-size:9px}.caption{gap:14px}.caption p:first-child{font-size:18px}.caption p:last-child{font-size:9px}.card-footer{font-size:1cqw;letter-spacing:.16em}.beacon{font-size:1.15cqw;letter-spacing:.09em}.loading{font-size:10px;inset:25% 10%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1{top:24%;font-size:9.5cqw;line-height:1.08;transform:scaleX(.68);transform-origin:left center}
.scene{left:44%;width:53%}
#exit-focus{display:none;position:fixed;top:18px;right:18px;z-index:10;border:1px solid var(--blue);background:var(--ink);color:var(--paper);padding:12px 16px;font-size:12px}
body.focus #exit-focus{display:block}