/* JetBrains Mono — self-hosted for reliable box-drawing */
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#171421;
  --cream:#ffffd7;
  --cream-dim:#b0a878;
  --chalk:#e8dfb8;
  --red:#c88282;
  --green:#82be82;
  --yellow:#ffeb80;
  --blue:#6487aa;
  --cyan:#8cb4c8;
  --magenta:#b496af;
  --grey:#8a8a8a;
  --coral:#c88282;
  --white:#e0dcd0;
  --border:#2a2535;
  --bar-bg:#1a1628;
  --bar-btn:#252035;
  --bar-active:#3a3450;
  --bar-border:#3a3450
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--cream);font-family:'JetBrains Mono',ui-monospace,'Courier New',monospace;min-height:100vh;min-height:100dvh;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
#app{display:flex;flex-direction:column;width:100%;max-width:100dvw;height:100vh;height:100dvh;margin:0 auto;overflow:hidden}
#terminal-wrap{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding:6px 4px 0}
#terminal{white-space:pre;user-select:none;-webkit-user-select:none;cursor:default;font-family:'JetBrains Mono',ui-monospace,'Courier New',monospace;font-variant-ligatures:none;line-height:1.35;font-size:12px;letter-spacing:0em;color:var(--chalk)}
.e{display:inline-block;width:2ch;height:1.1em;text-align:center;vertical-align:middle;overflow:hidden}
.e img{width:1em;height:1em;vertical-align:-0.1em;pointer-events:none}
.c-red{color:var(--red)}.c-green{color:var(--green)}.c-yellow{color:var(--yellow)}.c-blue{color:var(--blue)}.c-cyan{color:var(--cyan)}.c-magenta{color:var(--magenta)}.c-grey{color:var(--grey)}.c-coral{color:var(--coral)}.c-cream{color:var(--cream)}.c-dim{color:var(--cream-dim)}.c-chalk{color:var(--chalk)}.c-white{color:var(--white)}.bold{font-weight:700}
.blink{animation:blink 1.2s steps(2,start) infinite}@keyframes blink{to{visibility:hidden}}
.fade-in{animation:fadeIn .2s ease-out}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#numbar{flex-shrink:0;display:flex;width:100%;max-width:100%;gap:4px;padding:8px 6px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:var(--bar-bg);border-top:1px solid var(--border)}
.num-btn{flex:1;min-width:0;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bar-btn);border:1px solid var(--bar-border);border-radius:6px;color:var(--cyan);font-family:inherit;font-size:18px;font-weight:700;cursor:pointer;transition:background .08s,transform .08s;-webkit-tap-highlight-color:transparent;padding:0}
.num-btn:active{background:var(--bar-active);transform:scale(.93)}
.num-btn.dim{opacity:.25;pointer-events:none}
.num-btn.accent{color:var(--yellow);border-color:rgba(255,235,128,.3)}
.num-btn.danger{color:var(--red);border-color:rgba(200,130,130,.3)}
.num-btn.snd{flex:0 0 42px;font-size:14px}
.num-btn.snd.on{color:var(--yellow);opacity:1}
.num-btn.snd.off{opacity:.25}
.branding{flex-shrink:0;text-align:center;color:var(--cream-dim);font-family:'IBM Plex Mono',ui-monospace,'Courier New',monospace;font-size:11px;letter-spacing:.08em;padding:4px 8px 6px;background:var(--bar-bg)}
.branding a{color:var(--yellow);text-decoration:none}