:root {
  --bg: #0d0f14;
  --surface: #151923;
  --surface-2: #1c2130;
  --line: #262c3d;
  --text: #e7e9ee;
  --muted: #8a91a5;
  --rh: #f5b544;
  --rh-glow: rgba(245, 181, 68, 0.55);
  --lh: #4fd1c5;
  --lh-glow: rgba(79, 209, 197, 0.5);
  --raw: #8b7cf6;
  --accent: #f5b544;
  --white-key: #f4f1ea;
  --black-key: #1a1c22;
  --radius: 10px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 Inter, system-ui, sans-serif; }
.muted { color: var(--muted); }
h1 { font-size: 17px; margin: 0; font-weight: 600; letter-spacing: 0.01em; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
h2 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.brand p { margin: 0; font-size: 12px; }
.logo { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, var(--rh), #e0793c); color: #1a1206; }

.controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; flex: 1; }
.controls label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.controls output { color: var(--text); font-family: var(--mono); text-transform: none; margin-left: 4px; }
.controls input[type=range] { width: 130px; accent-color: var(--accent); }
select { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; }
.play { background: var(--accent); color: #1a1206; border: 0; border-radius: 8px; padding: 9px 18px; font: 600 14px Inter, sans-serif; cursor: pointer; }
.play.stop { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.play:disabled { opacity: 0.4; cursor: wait; }

.meters { display: flex; gap: 18px; }
.meters div { display: flex; flex-direction: column; }
.meters .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.meters .v { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }

main { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 16px; max-width: 1500px; margin: 0 auto; }

.stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
#roll { display: block; width: 100%; height: 330px; background: #0a0c11; border-radius: 6px 6px 0 0; }
#probs { display: block; width: 100%; height: 56px; background: #0a0c11; border-top: 1px solid var(--line); }

.keyboard { position: relative; height: 120px; user-select: none; }
.key { position: absolute; top: 0; border-radius: 0 0 5px 5px; transition: background 60ms, box-shadow 60ms; }
.key.white { height: 100%; background: var(--white-key); border: 1px solid #b9b5ab; border-top: 0; z-index: 1; }
.key.black { height: 62%; background: var(--black-key); z-index: 2; border: 1px solid #000; border-top: 0; }
.key .lbl { position: absolute; bottom: 5px; width: 100%; text-align: center; font: 9px var(--mono); color: #8d897f; }
.key.white.on-rh { background: var(--rh); box-shadow: 0 0 18px var(--rh-glow) inset; }
.key.black.on-rh { background: #c98a1f; box-shadow: 0 0 14px var(--rh-glow); }
.key.white.on-lh { background: var(--lh); box-shadow: 0 0 18px var(--lh-glow) inset; }
.key.black.on-lh { background: #2a9d93; box-shadow: 0 0 14px var(--lh-glow); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; margin-top: 10px; align-items: center; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sw.rh { background: var(--rh); } .sw.lh { background: var(--lh); }
.sw.raw { background: transparent; border: 2px solid var(--raw); } .sw.fin { background: var(--text); }

.panels { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }

.decision { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.q { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.q .qh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.q .qid { font-weight: 600; }
.q .qtype { font: 10px var(--mono); color: var(--muted); }
.q .ins { font-size: 11px; color: var(--muted); margin: 2px 0 8px; }
.q .chosen { font: 500 13px var(--mono); color: var(--accent); }
.opt { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 8px; font: 11px var(--mono); padding: 1px 0; }
.opt .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.opt.sel .lab { color: var(--text); font-weight: 500; }
.bar { position: relative; height: 10px; background: #0f121a; border-radius: 3px; overflow: hidden; }
.bar .fin { position: absolute; inset: 0 auto 0 0; background: #5b6275; border-radius: 3px; }
.opt.sel .bar .fin { background: var(--accent); }
.bar .raw { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--raw); box-shadow: 0 0 4px var(--raw); }
.opt .pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.context { font: 12px/1.55 var(--mono); white-space: pre-wrap; background: #0a0c11; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 0 0 16px; min-height: 90px; }
.log { list-style: none; margin: 0; padding: 0; font: 12px var(--mono); max-height: 260px; overflow: auto; }
.log li { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.log .s { color: var(--muted); }
.log .n { color: var(--rh); }
.log .c { color: var(--lh); }

@media (max-width: 900px) {
  .panels { grid-template-columns: 1fr; }
  .topbar { padding: 12px 16px; }
  main { padding: 12px 16px 24px; }
  #roll { height: 240px; }
  .key .lbl { display: none; }
}

/* accounts */
.account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 24px 6px; padding: 8px 14px; border: 1px solid #2a3443; border-radius: 8px; background: #121824; font-size: 12px; }
.account-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; }
.account-pitch { color: var(--muted); }
.account input { padding: 6px 10px; border: 1px solid #2a3443; border-radius: 6px; background: #0c111a; color: var(--text); font: inherit; min-width: 220px; }
.account-button { padding: 6px 12px; font-size: 12px; }
.account-link { background: none; border: none; color: #79cfc5; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.account-email { color: var(--text); }
.account-user { display: inline-flex; align-items: center; min-height: 28px; }
.account-plan { padding: 2px 7px; border-radius: 4px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; background: #1d2431; color: var(--muted); }
.account-plan.pro { background: #4fd1c5; color: #041b19; }
.account-plan.unlimited { background: #f5b544; color: #1a1206; }
.account-minutes { font: 12px var(--mono); color: #f5b544; }

.footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.footer a { color: var(--lh); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .muted a { color: var(--text); }