@font-face{font-family:Alpes;src:url(../fonts/Alpes_Variable.ttf)format("truetype");font-weight:100 900}@font-face{font-family:Alpes Mono;src:url(../fonts/Alpes_Mono_Variable.ttf)format("truetype");font-weight:100 900}:root{--navy:#0d1735;--forest:#0d1d06;--mint:#8df5cd;--mint-pale:#d3e7da;--pink:#ffd5ff;--pink-pale:#f2e1ec;--white:#fff;--bg:var(--forest);--ink:var(--mint);--muted:#4f8a70;--gutter:clamp(16px, 4vw, 72px)}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0;font-family:Alpes,system-ui,sans-serif;overflow:hidden}button,input{font:inherit;color:inherit}#stage{position:fixed;inset:0}#stage canvas{display:block}.mono,header nav,footer,.tools,.wordmark{text-transform:uppercase;letter-spacing:.14em;font-family:Alpes Mono,ui-monospace,monospace}.frame{pointer-events:none;position:fixed;inset:0}.frame i{background:var(--ink);width:6px;height:6px;position:absolute}.frame b{background:var(--ink);width:22px;height:6px;position:absolute;right:0}header{padding:6.5vh calc(var(--gutter) + 60px) 0 calc(var(--gutter) + 9vw);pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:fixed;top:0;left:0;right:0}header nav{pointer-events:auto;flex-wrap:wrap;gap:0 4.2vw;display:flex}header nav button{letter-spacing:.22em;color:var(--muted);cursor:pointer;text-align:left;background:0 0;border:0;padding:4px 0;font-size:13px}header nav button small{letter-spacing:.2em;opacity:.8;margin-top:2px;font-size:9px;display:block}header nav button[aria-pressed=true],header nav button:hover{color:var(--ink)}.mark{width:92px;height:auto;color:var(--ink);flex:none;margin-top:-6px}.title{left:calc(var(--gutter) * .6);pointer-events:none;max-width:60vw;position:fixed;top:15vh}.title h1{letter-spacing:-.035em;margin:0;font-size:clamp(56px,10vw,170px);font-weight:500;line-height:.9}.title p{max-width:34ch;margin:2.4vh 0 0 9vw;font-size:clamp(16px,1.55vw,26px);line-height:1.22}.title .w{vertical-align:top;margin-bottom:-.1em;padding-bottom:.1em;display:inline-block;overflow:hidden}.title .ch{display:inline-block;transform:translateY(110%)}.title p{opacity:0;transform:translateY(8px)}.title.in .ch{transition:transform .8s cubic-bezier(.2, .75, .1, 1) calc(var(--i) * 26ms);transform:none}.title.in p{opacity:1;transition:opacity .6s .45s,transform .8s cubic-bezier(.2,.75,.1,1) .45s;transform:none}.title.out .ch{transition:transform .55s cubic-bezier(.6, 0, .8, .3) calc(var(--i) * 16ms);transform:translateY(-110%)}.title.out p{opacity:0;transition:opacity .35s,transform .4s;transform:translateY(-6px)}@media (prefers-reduced-motion:reduce){.title .ch,.title p{transition-duration:10ms!important;transition-delay:0s!important}}footer{left:calc(var(--gutter) + 9vw);font-size:10.5px;line-height:1.55;position:fixed;bottom:5vh;right:260px}.facts{white-space:pre-line;color:var(--ink);margin-bottom:18px}#layouts{flex-wrap:wrap;gap:6px 22px;display:flex}#layouts button,#options button{letter-spacing:.18em;color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:1px solid #0000;padding:3px 0;font-size:11px}#layouts button[aria-pressed=true],#options button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}#layouts button:hover,#options button:hover{color:var(--ink)}#options{align-items:baseline;gap:18px;margin-top:12px;display:flex}#options span{color:var(--muted)}.tools{right:calc(var(--gutter) * .6 + 26px);flex-direction:column;align-items:flex-end;gap:12px;font-size:10px;display:flex;position:fixed;top:30vh}.seg{gap:2px;display:flex}.seg button{border:1px solid var(--muted);cursor:pointer;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:0 0;padding:5px 8px;font-size:10px}.seg button[aria-pressed=true],.seg button:hover{color:var(--bg);background:var(--ink);border-color:var(--ink)}.seg .sw{border-radius:0;width:22px;height:22px;padding:0}.seg .sw[aria-pressed=true]{outline:1px solid var(--ink);outline-offset:2px}.chk{cursor:pointer;color:var(--muted);align-items:center;gap:6px;display:flex}.chk input{accent-color:var(--mint)}#status{color:var(--muted);text-align:right;max-width:200px;min-height:1.4em}.wordmark{right:calc(var(--gutter) * .6 + 26px);letter-spacing:-.02em;text-transform:uppercase;text-align:left;font-family:Alpes,sans-serif;font-size:26px;font-weight:800;line-height:.9;position:fixed;bottom:5vh}@media (width<=760px){header{padding:20px 16px 0}header nav{gap:2px 14px}.title{top:110px;left:16px}.title p{margin-left:0}footer{bottom:16px;left:16px;right:16px}.tools{top:auto;bottom:160px;right:16px}.wordmark,.mark{display:none}}