:root{
  --bg:#0a0d0f;
  --panel:#12181b;
  --panel-line:#1f2b2e;
  --signal:#ffb400;
  --signal-dim:#8a641c;
  --cyan:#59d6c4;
  --paper:#eae6da;
  --muted:#66767a;
  --danger:#e0563f;

  /* system font stacks — no external font files, no Google Fonts */
  --font-mono: 'JetBrains Mono','DejaVu Sans Mono','Liberation Mono','Cascadia Code', ui-monospace, monospace;
  --font-sans: -apple-system,'Segoe UI','Noto Sans',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse at 50% -10%, #16201f 0%, var(--bg) 55%);
  color:var(--paper);
  font-family:var(--font-sans);
  min-height:100vh;
  padding:32px 20px 60px;
  display:flex;
  justify-content:center;
}
.wrap{width:100%;max-width:920px;}

header{margin-bottom:28px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 8px var(--signal);
}
h1{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(28px,4vw,40px);
  letter-spacing:-0.01em;
  margin:0 0 8px;
  color:var(--paper);
}
header p{
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
  margin:0;
  max-width:560px;
}
header p .hl{color:var(--paper);}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:10px;
  padding:22px;
  margin-bottom:20px;
}

/* --- Key + tape --- */
.key-row{
  display:flex;
  gap:22px;
  align-items:stretch;
  flex-wrap:wrap;
}
#key{
  flex:0 0 180px;
  height:180px;
  border-radius:10px;
  border:1px solid var(--panel-line);
  background:#0d1315;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  transition:background .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
#key.pressed{
  background:#1a1000;
  box-shadow:inset 0 0 0 1px var(--signal), 0 0 26px -4px var(--signal);
}
#key .lever{
  width:64px;height:64px;border-radius:50%;
  border:2px solid var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .08s ease, transform .05s ease;
}
#key.pressed .lever{
  border-color:var(--signal);
  transform:scale(0.94);
}
#key .lever-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--muted);
  transition:background .08s ease, box-shadow .08s ease;
}
#key.pressed .lever-dot{
  background:var(--signal);
  box-shadow:0 0 10px var(--signal);
}
#key .hint{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
}

.tape-col{
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tape{
  flex:1;
  background:#080b0c;
  border:1px solid var(--panel-line);
  border-radius:8px;
  padding:14px 16px;
  font-family:var(--font-mono);
  font-size:22px;
  letter-spacing:3px;
  color:var(--signal);
  overflow-x:auto;
  white-space:nowrap;
  display:flex;
  align-items:center;
  min-height:56px;
}
.tape .ghost{color:var(--muted);}
.meter-row{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.meter{
  flex:1;
  height:6px;
  background:#0d1315;
  border-radius:3px;
  overflow:hidden;
  position:relative;
}
.meter-fill{
  position:absolute;left:0;top:0;bottom:0;
  width:0%;
  background:var(--signal);
  transition:width .03s linear;
}
.meter-fill.dash{background:var(--cyan);}

/* --- Decoded output --- */
.output-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
#output{
  font-family:var(--font-mono);
  font-size:20px;
  line-height:1.6;
  color:var(--paper);
  min-height:32px;
  word-wrap:break-word;
}
#output .cursor{
  display:inline-block;
  width:10px;height:20px;
  background:var(--signal);
  vertical-align:middle;
  margin-left:2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}

/* --- Tree --- */
.tree-wrap{overflow-x:auto;}
svg#tree{display:block;margin:0 auto;width:100%;height:auto;}
.edge{stroke:#3a4a4e;stroke-linecap:round;transition:stroke .15s ease, stroke-width .15s ease;}
.edge-dot{stroke-width:2;}
.edge-dash{stroke-width:9;}
.edge.active{stroke:var(--signal);filter:drop-shadow(0 0 5px var(--signal));}
.node circle{fill:#0d1315;stroke:#3a4a4e;stroke-width:1.4;transition:stroke .15s ease, fill .15s ease;}
.node.active circle{stroke:var(--signal);fill:#221704;}
.node.leaf circle{fill:#0d1315;stroke:#4a5a5e;}
.node.leaf.active circle{stroke:var(--signal);fill:#221704;filter:drop-shadow(0 0 6px var(--signal));}
.node.start circle{fill:#0d1315;stroke:var(--cyan);stroke-width:2;}
.node.start.active circle{stroke:var(--signal);}
.node text{
  font-family:var(--font-mono);
  font-size:13px;
  fill:var(--muted);
  text-anchor:middle;
  dominant-baseline:central;
  pointer-events:none;
}
.node.leaf text{fill:var(--paper);font-weight:600;font-size:25px;}
.node.leaf.active text{fill:var(--signal);}
.root-label{
  font-family:var(--font-mono);
  font-size:11px;
  fill:var(--muted);
  text-anchor:middle;
}

/* --- Controls --- */
.controls{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.slider-group{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.sound-label{
  display:flex;align-items:center;gap:6px;cursor:pointer;
}
input[type="range"]{accent-color:var(--signal);width:140px;}
input[type="checkbox"]{accent-color:var(--signal);}
button.reset{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--panel-line);
  border-radius:6px;
  padding:8px 14px;
  cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}
button.reset:hover{border-color:var(--signal);color:var(--signal);}
.legend{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}

footer{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
  text-align:center;
}