:root{--case: #23262b;--case-edge: #14161a;--ink: #e7e9ee;--gold: #f0c25a;--blue: #6ea8ff;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;background:radial-gradient(120% 120% at 50% 0%,#2c3038,#0c0d10 70%);padding:24px;touch-action:manipulation}#faceplate{--seg-row-h: 64px;width:min(980px,100%);background:linear-gradient(180deg,var(--case),var(--case-edge));border:1px solid #000;border-radius:18px;padding:18px;box-shadow:0 24px 60px #0000008c,inset 0 1px #ffffff0f;display:flex;flex-direction:column;gap:14px}.bar{display:flex;align-items:center;gap:16px;color:var(--ink)}.brand{display:flex;align-items:baseline;gap:8px;letter-spacing:.14em}.brand b{font-size:18px}.brand span{color:var(--gold);font-weight:700}.switch{display:flex;gap:6px}.switch button{background:#2f333a;color:var(--ink);border:1px solid #000;border-radius:8px;padding:5px 12px;cursor:pointer;font-size:13px}.switch button.active{background:var(--gold);color:#201a08;font-weight:700}.annun{margin-left:auto;display:flex;gap:10px;font-weight:700}.annun span{opacity:.18;transition:opacity .08s;padding:2px 8px;border-radius:6px}.annun span:first-child{color:var(--gold)}.annun span:last-child{color:var(--blue)}.annun span.on{opacity:1;box-shadow:0 0 12px currentcolor}.skin-select{background:#2f333a;color:var(--ink);border:1px solid #000;border-radius:8px;padding:5px 8px;font-size:13px}.help-btn{width:28px;height:28px;border-radius:50%;background:#2f333a;color:var(--ink);border:1px solid #000;cursor:pointer;font-weight:700}.screen{background:var(--screen-bg);border-radius:12px;padding:14px 16px;border:1px solid #000;box-shadow:inset 0 3px 16px #000000b3}.display{display:flex;flex-direction:column;gap:6px}.seg-row{display:block;height:var(--seg-row-h)}.matrix canvas{display:block;width:100%;height:auto;image-rendering:auto}#faceplate[data-module=seg] .matrix,#faceplate[data-module=matrix] .display{display:none}#faceplate[data-module=matrix] .screen{background:#05070a}.seg{fill:var(--seg-off)}.seg.on{fill:var(--seg-on);filter:drop-shadow(0 0 var(--glow) var(--seg-on))}.oled{margin-top:calc(var(--seg-row-h) * .55)}.oled canvas{display:block;height:max(24px,calc(var(--seg-row-h) * .81));width:auto;border-radius:2px}.status{color:var(--ink);opacity:.75;font-family:ui-monospace,Menlo,monospace;font-size:13px;min-height:1.2em;padding:0 4px;cursor:copy;display:flex;align-items:baseline;gap:.6em;overflow:hidden}.status-val{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-meta{flex:none;opacity:.7}.status.copied{color:#5fe08a;opacity:1}.keypad{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(5,auto);gap:7px}.key{position:relative;aspect-ratio:1 / 1.15;background:linear-gradient(180deg,#34383f,#23262b);border:1px solid #000;border-radius:8px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px;min-width:0;overflow:hidden;box-shadow:0 2px #0c0d10,inset 0 1px #ffffff12;transition:transform .04s,box-shadow .04s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}.key:active{transform:translateY(2px);box-shadow:0 0 #0c0d10}.key.blank{visibility:hidden}.key.is-shift-f{background:linear-gradient(180deg,var(--gold),#c99a30)}.key.is-shift-f .face{color:#201a08}.key.is-shift-g{background:linear-gradient(180deg,var(--blue),#3d6fb5)}.key.is-shift-g .face{color:#06142c}.face{font-size:clamp(9px,1.5vw,14px);font-weight:700;line-height:1;text-align:center}.leg{font-size:clamp(6px,1vw,9px);line-height:1;min-height:1em;text-align:center}.leg-f{color:var(--gold)}.leg-g{color:var(--blue)}.leg:empty{min-height:.6em}.keypad[data-shift=f] .leg-g,.keypad[data-shift=g] .leg-f{opacity:.25}.keypad[data-shift=f] .leg-f{text-shadow:0 0 8px var(--gold)}.keypad[data-shift=g] .leg-g{text-shadow:0 0 8px var(--blue)}.keypad[data-shift=f] .face,.keypad[data-shift=g] .face{opacity:.6}#faceplate[data-skin=led-red]{--screen-bg: #1a0605;--seg-on: #ff3b30;--seg-off: rgb(255,59,48,.07);--glow: 6px}#faceplate[data-skin=led-green]{--screen-bg: #04140a;--seg-on: #3dff72;--seg-off: rgb(61,255,114,.07);--glow: 6px}#faceplate[data-skin=led-amber]{--screen-bg: #150d02;--seg-on: #ffb020;--seg-off: rgb(255,176,32,.07);--glow: 6px}#faceplate[data-skin=vfd-cyan]{--screen-bg: #02110f;--seg-on: #74f4ff;--seg-off: rgb(116,244,255,.1);--glow: 10px}#faceplate[data-skin=lcd]{--screen-bg: #b3bba4;--seg-on: #1b2015;--seg-off: rgb(27,32,21,.12);--glow: 0px}#faceplate[data-module=matrix][data-skin]{--screen-bg: #05070a}.overlay{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:10}.overlay[hidden]{display:none}.overlay-card{background:var(--case);color:var(--ink);border:1px solid #000;border-radius:14px;padding:22px 26px;max-width:460px;box-shadow:0 24px 60px #0009}.overlay-card h2{margin:0 0 12px;font-size:16px;letter-spacing:.06em}.overlay-card ul{margin:0;padding-left:18px;line-height:1.9;font-size:14px}.overlay-card b{color:var(--gold)}.overlay-card p{color:#aab;font-size:12.5px;margin:14px 0 0}.overlay-card p.build{margin-top:16px;padding-top:12px;border-top:1px solid rgb(255,255,255,.1);font-size:11.5px;color:#889}.overlay-card p.build code{font-family:ui-monospace,Menlo,monospace;color:var(--gold);background:#0000004d;padding:1px 5px;border-radius:4px}.overlay-card p.build a{color:inherit;text-decoration:none}.overlay-card p.build a:hover code{background:#f0c25a2e}.overlay-card p.build.legal{margin-top:6px;padding-top:0;border-top:0}.overlay-card p.build.legal a{color:var(--blue);text-decoration:underline}.colophon{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;font-size:12px;color:#7d838e}.colophon a{color:#9fb4d6;text-decoration:none}.colophon a:hover{color:var(--gold);text-decoration:underline}@media(max-width:640px){body{padding:6px}#faceplate{--seg-row-h: 34px;padding:10px;border-radius:12px;gap:8px}.bar{flex-wrap:wrap;gap:6px 8px}.brand{width:100%}.brand b{font-size:16px}.annun{margin-left:auto}.switch button{padding:4px 9px;font-size:12px}.skin-select,.help-btn{font-size:12px}.screen{padding:10px 12px}.keypad{gap:3px}.key{padding:2px 1px;border-radius:6px;gap:1px}.face{font-size:clamp(7px,2.2vw,12px);letter-spacing:-.02em}.leg{font-size:clamp(5px,1.6vw,8px)}.status{font-size:12px}}@media(max-width:360px){.leg{display:none}.keypad[data-shift] .face{opacity:1}}@media(max-height:500px)and (orientation:landscape){body{padding:4px;min-height:0}#faceplate{--seg-row-h: 24px;padding:6px 10px;gap:5px;border-radius:10px}.bar{gap:4px 8px}.brand b{font-size:14px}.switch button{padding:3px 8px;font-size:11px}.skin-select{font-size:11px;padding:3px 6px}.help-btn{width:22px;height:22px}.annun span{padding:1px 6px}.screen{padding:6px 10px}.oled{display:none}.status{font-size:11px;min-height:1em}.keypad{gap:3px}.key{aspect-ratio:auto;height:34px;padding:1px;border-radius:5px;gap:0}.face{font-size:11px;letter-spacing:0}.leg{font-size:6.5px}.colophon{margin-top:4px;font-size:10px;gap:4px 10px}}.key--2u{aspect-ratio:auto;height:auto;background:linear-gradient(180deg,#3f454f,#2b2f37)}