:root { --bg:#111418; --panel:#1c2128; --line:#2d333b; --fg:#e6edf3; --muted:#8b949e; --accent:#3b82f6; --danger:#ef4444; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg);
  font-family: system-ui, "Segoe UI", "Yu Gothic UI", sans-serif; font-size:14px; }
button, select, input { font:inherit; color:var(--fg); background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:4px 8px; }
button { cursor:pointer; } button:hover { border-color:var(--accent); }
#login { display:flex; height:100%; align-items:center; justify-content:center; }
#login form { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px;
  width:min(340px, calc(100% - 32px)); display:flex; flex-direction:column; gap:12px; }
#login h1 { margin:0 0 4px; font-size:20px; }
#login input { padding:10px; } #login button { padding:10px; background:var(--accent); border:none; }
#err { color:var(--danger); min-height:1.2em; }
#app { display:none; flex-direction:column; height:100%; }
#bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 8px; background:var(--panel);
  border-bottom:1px solid var(--line); }
#bar label { color:var(--muted); display:flex; align-items:center; gap:4px; }
#bar .sep { width:1px; height:22px; background:var(--line); }
#status { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
#kbd.on { background:var(--accent); border-color:var(--accent); }
#stage { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; position:relative; }
#stage.actual { align-items:flex-start; justify-content:flex-start; }
canvas { display:block; outline:none; cursor:default; touch-action:none; }
#textbox { display:none; position:absolute; right:12px; bottom:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:10px; gap:6px; flex-direction:column; width:min(360px, calc(100% - 24px)); }
#textbox textarea { width:100%; height:80px; resize:vertical; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; }
#overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); color:var(--fg); font-size:16px; }
.row-end { display:flex; gap:6px; justify-content:flex-end; }
.primary { background:var(--accent); border:none; }
#code { letter-spacing:.3em; }
.hint { color:var(--muted); font-size:12px; margin:0; }