:root{--body:#ebe6dc;--edge:#d4cdbf;--ink:#1b1b1b;--mute:#8a8478;--orange:#ff5a1f;--lcd:#1e1a12;--amber:#ffb23e;--amber-dim:#8a6a30}html,body{min-height:100%;margin:0}body{color:var(--ink);-webkit-tap-highlight-color:transparent;background:#d9d3c7;font-family:Space Mono,ui-monospace,monospace}*,:before,:after{box-sizing:border-box}.wrap{place-items:center;min-height:100dvh;padding:24px 16px;display:grid}.dev{background:var(--body);border-radius:18px;width:min(420px,100%);min-width:0;padding:18px;transition:transform 80ms;box-shadow:inset 0 2px #fff8,inset 0 -3px #0001,0 1px #fff,0 30px 60px -20px #0005,0 0 0 1px #0000000f}.dev.shake{animation:.45s shake}@keyframes shake{20%{transform:translate(-4px,2px)rotate(-.6deg)}40%{transform:translate(4px,-2px)rotate(.6deg)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}.top{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px;display:flex}.logo{letter-spacing:-1.5px;font:700 28px/1 Space Grotesk,sans-serif}.logo b{color:var(--orange)}.model{color:var(--mute);letter-spacing:2px;white-space:nowrap;align-items:center;gap:8px;font-size:10px;display:flex}.pwr{background:var(--orange);width:7px;height:7px;box-shadow:0 0 8px var(--orange);border-radius:50%}.pwr.off{box-shadow:none;background:#6a645a}.lcd{background:var(--lcd);color:var(--amber);border-radius:8px;min-height:150px;padding:10px 12px;font-family:VT323,monospace;font-size:20px;line-height:1.05;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #000c,0 0 0 4px #c9c1b2,0 0 0 5px #b3ab9c}.lcd.tap{cursor:pointer}.lcd:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0003 2px 3px);position:absolute;inset:0}.lcd .row{white-space:nowrap;justify-content:space-between;gap:8px;display:flex}.lcd .dim{color:var(--amber-dim)}.lcd canvas{width:100%;height:54px;margin:6px 0 4px;display:block}.lcd .msg{white-space:nowrap;text-overflow:ellipsis;min-height:22px;overflow:hidden}.lcd .msg.bad{color:#ff6b4a}.lcd .reveal{white-space:normal;align-items:center;gap:10px;display:flex}.lcd .reveal>div{text-overflow:ellipsis;min-width:0;overflow:hidden}.lcd .reveal img{width:64px;height:64px;image-rendering:pixelated;filter:sepia()saturate(3)hue-rotate(-10deg)contrast(1.2);border-radius:2px;flex:none}.lcd .wrong{color:#ff6b4a;margin:4px 0 0;padding:0;font-size:17px;list-style:none}.lcd .wrong li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ladder{grid-template-columns:repeat(5,1fr);gap:6px;margin:18px 4px 6px;display:grid}.led{color:var(--mute);flex-direction:column;align-items:center;gap:6px;font-size:11px;display:flex}.led i{background:#c8c1b4;border-radius:50%;width:14px;height:14px;transition:all .15s;box-shadow:inset 0 1px 2px #0004}.led.on i{background:var(--orange);box-shadow:0 0 10px var(--orange), inset 0 -1px 2px #0003}.led.cur i{animation:1s infinite blink}.led.cur{color:var(--ink);font-weight:700}.led.used i{background:#6a645a;box-shadow:inset 0 1px 2px #0006}@keyframes blink{50%{opacity:.35}}.timer{background:#d3ccbf;border-radius:2px;height:4px;margin:2px 4px 16px;overflow:hidden}.timer div{background:var(--ink);height:100%;transition:width .1s linear}.keys{grid-template-columns:minmax(0,1fr) 96px;align-items:stretch;gap:12px;display:grid}.key{all:unset;cursor:pointer;text-align:center;letter-spacing:1px;-webkit-user-select:none;user-select:none;background:#f6f2ea;border-radius:12px;place-items:center;font-weight:700;transition:transform 50ms,box-shadow 50ms;display:grid;box-shadow:0 5px #bdb5a6,0 6px 12px #0002,inset 0 1px #fff}.key:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.key:active,.key.down{transform:translateY(4px);box-shadow:0 1px #bdb5a6,0 2px 4px #0002,inset 0 1px #fff}.key.play{background:var(--orange);color:#fff;height:84px;font-size:15px;box-shadow:0 5px #c23e0d,0 6px 14px #ff5a1f55,inset 0 1px #fff6}.key.play:active,.key.play.down{box-shadow:0 1px #c23e0d,0 2px 4px #0002}.key.play .tri{font-size:26px;line-height:1}.key small{opacity:.75;margin-top:2px;font-size:10px;font-weight:400;display:block}.key.skip{color:var(--ink);font-size:13px}.key[disabled]{opacity:.45;pointer-events:none}.search{margin-top:16px;position:relative}.search input{all:unset;box-sizing:border-box;background:#f6f2ea;border-radius:10px;width:100%;padding:12px 14px;font:16px Space Mono,monospace;box-shadow:inset 0 2px 4px #0002,0 1px #fff}.search input:disabled{opacity:.6}.search input::placeholder{color:var(--mute)}.results{gap:4px;margin-top:6px;display:grid}.res{all:unset;cursor:pointer;border-radius:8px;align-items:center;gap:10px;min-width:0;padding:6px 8px;font-size:13px;display:flex}.res:hover,.res:focus-visible{background:#fff8}.res img,.res .noimg{background:#cfc8bb;border-radius:4px;flex:none;width:30px;height:30px}.res>div{min-width:0}.res b,.res span{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.res b{font-weight:700}.res span{color:var(--mute);font-size:12px}.channels{border-top:1px dashed #c9c1b2;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;padding-top:14px;display:grid}.ch{flex-direction:column;align-items:center;gap:5px;min-width:0;font-size:11px;display:flex}.ch .dot{color:#fff;border-radius:50%;place-items:center;width:26px;height:26px;font-size:11px;font-weight:700;display:grid;box-shadow:inset 0 -2px #0003}.ch .pips{gap:2px;display:flex}.ch .pips i{background:#cfc8bb;border-radius:1px;width:6px;height:6px}.ch .pips i.u{background:#6a645a}.ch .pips i.s{background:var(--orange);box-shadow:0 0 6px var(--orange)}.ch .st{color:var(--mute);height:12px;font-size:10px}.ch .st.ok{color:var(--orange);font-weight:700}.pads{justify-content:center;gap:8px;margin-top:14px;display:flex}.pad{all:unset;cursor:pointer;background:#2a2a2a;border-radius:8px;place-items:center;width:38px;height:30px;font-size:16px;transition:transform 50ms;display:grid;box-shadow:0 3px #000,inset 0 1px #fff2}.pad:active{transform:translateY(3px);box-shadow:0 0 #000}.grille{grid-template-columns:repeat(18,1fr);gap:6px;margin:18px 8px 0;display:grid}.grille i{aspect-ratio:1;background:#3a3631;border-radius:50%;transition:transform 50ms}.fly{pointer-events:none;z-index:50;font-size:30px;animation:1.4s ease-out forwards fly;position:fixed}@keyframes fly{to{opacity:0;transform:translateY(-160px)scale(1.4)}}@media (width<=380px){.wrap{padding:12px 8px}.dev{padding:14px}.keys{grid-template-columns:minmax(0,1fr) 84px}.grille{gap:4px}}.room-form{gap:8px;margin-top:16px;display:grid}.room-form>form,.room-settings{gap:8px;min-width:0;display:flex}.room-form input{all:unset;box-sizing:border-box;background:#f6f2ea;border-radius:10px;flex:1;min-width:0;padding:12px 14px;font:16px Space Mono,monospace}.room-settings input[type=number]{flex:none;width:72px}.room-btn{all:unset;cursor:pointer;background:var(--ink);color:#fff;letter-spacing:1px;white-space:nowrap;border-radius:10px;place-items:center;padding:0 14px;font-size:12px;font-weight:700;display:grid}.room-btn[disabled]{opacity:.45;pointer-events:none}.room-code{letter-spacing:10px;text-align:center;font:700 40px/1 Space Grotesk,sans-serif}.room-link{all:unset;cursor:pointer;text-align:center;color:var(--mute);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.room-settings.ro{color:var(--mute);letter-spacing:1px;justify-content:center;font-size:12px}.home-item{all:unset;cursor:pointer;box-sizing:border-box;background:var(--lcd);color:var(--amber);letter-spacing:1px;border-radius:10px;justify-content:space-between;align-items:center;padding:12px 14px;font:20px/1 VT323,monospace;display:flex}.home-item small{color:var(--amber-dim);font-size:16px}.home-item.hot{background:var(--orange);color:#fff;box-shadow:0 3px #c23e0d}.home-item.hot small{color:#fff;opacity:.8}.home-item:active{transform:translateY(2px)}.home-item:focus-visible,.chip:focus-visible,.home-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.home-chips{flex-wrap:wrap;gap:6px;display:flex}.chip{all:unset;cursor:pointer;background:#f6f2ea;border-radius:8px;padding:6px 10px;font-size:12px}.chip.on{background:var(--ink);color:#fff}.home-back{all:unset;cursor:pointer;color:var(--mute);letter-spacing:1px;font-size:12px}.home-err{color:#c23e0d;letter-spacing:1px;font:20px VT323,monospace}
