@font-face{font-family:Departure Mono;src:url(/fonts/DepartureMono-Regular.woff2)format("woff2");font-display:swap}:root{--accent:#00dbb6;--text:#e8e8e8;--dim:#8a8f99;--faint:#4a5160;--px:"Departure Mono", ui-monospace, monospace;--gutter:clamp(1rem, 3vw, 2rem)}*{box-sizing:border-box}body{color:var(--text);font:15px/1.5 var(--px);background:#000;margin:0}a{color:inherit}.frame{height:100svh;padding:var(--gutter) var(--gutter) 0;flex-direction:column;display:flex;position:relative}header p{margin:0}.prompt{color:var(--dim)}h1{font:400 15px/1.5 var(--px);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin:0}.line{color:var(--accent)}.cursor{vertical-align:-.12em;background:var(--accent);width:.6em;height:1em;margin-left:.15em;display:inline-block}@media (prefers-reduced-motion:no-preference){.cursor{animation:1.06s step-end infinite blink}}@keyframes blink{50%{opacity:0}}.hint{color:var(--dim);margin:.75rem 0!important}.stage{flex:1;min-height:0;position:relative}canvas{background:#000;width:100%;height:100%;display:block}.tip{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);pointer-events:none;white-space:nowrap;background:#000;margin:0;padding:2px 8px;position:absolute}.keys{margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter) 4px;border-top:1px solid #1c2029;flex-wrap:wrap;flex:none;justify-content:center;gap:4px 6px;display:flex}button{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:3px 8px 3px 3px;font-size:13px;transition:background-color .12s ease-out;display:inline-flex}.keys button:before{content:attr(data-key);text-align:center;background:var(--accent);color:#000;min-width:1.4em;padding:0 3px}@media (hover:hover){button:not(:disabled):hover,a:hover{color:var(--accent)}button:not(:disabled):hover{background:#12171d}}button:active{background:#1a2028}button:disabled{color:var(--faint);cursor:default}.keys button:disabled:before{background:var(--faint)}button:focus-visible,a:focus-visible{outline:2px dotted var(--accent);outline-offset:2px}@media (hover:none){.keys button:before{display:none}.keys button{padding:4px 8px;box-shadow:inset 0 0 0 1px #2a303b}}@media (prefers-reduced-motion:reduce){button{transition:none}}.status{text-align:center;min-height:1.5em;color:var(--accent);flex:none;margin:0 0 6px;font-size:13px}footer{top:var(--gutter);right:var(--gutter);color:var(--dim);font-size:13px;position:absolute}@media (width>=900px) and (aspect-ratio>=4/3){.frame{column-gap:var(--gutter);padding-bottom:var(--gutter);grid-template-rows:auto auto 1fr;grid-template-columns:minmax(250px,21rem) 1fr;display:grid}header{grid-column:1}.stage{grid-area:1/2/4}.keys{border-top:1px solid #1c2029;flex-direction:column;grid-column:1;align-items:stretch;gap:2px;margin:.5rem 0 0;padding:.75rem 0 0}.keys button{justify-content:flex-start;padding-block:4px}.status{text-align:left;grid-column:1;min-height:4.5em;margin:.75rem 0 0}}@media (width<=640px){.keys{grid-template-columns:1fr 1fr;gap:5px;padding-top:8px;display:grid}.keys button{justify-content:center;padding:5px 4px;font-size:12px}}@media (width<=380px){.keys button{font-size:11px}}.gate{z-index:20;padding:var(--gutter);cursor:pointer;text-align:center;background:#000000e6;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;display:flex;position:fixed;inset:0}.gate .prompt{margin:0}.gate .enter{color:var(--accent);padding:4px 10px;font-size:18px}.gate .enter:focus-visible{outline-offset:6px}.gate .touch{display:none}@media (hover:none){.gate .keyboard{display:none}.gate .touch{display:inline}.gate .enter{box-shadow:none}}.gate-note{color:var(--dim);margin:0;font-size:13px}.gate .quiet{color:var(--dim);text-underline-offset:3px;padding:0;font-size:13px;text-decoration:underline}@media (hover:none){.gate .quiet{box-shadow:none;padding:0}}@media (width<=640px){body{font-size:13px}.frame{height:auto;padding:1rem 6px 0}header{padding-inline:6px}.hint{font-size:12px}canvas{aspect-ratio:1/1.04;height:auto}footer{text-align:center;padding:.25rem 0 1rem;position:static}button{font-size:12px}}