.progress-track{display:flex;gap:6px;margin:0 0 28px}
.pip{flex:1;height:4px;background:var(--bone);border-radius:2px}
.pip.done{background:var(--amber)}
.pip.current{background:var(--ink)}

.story{font-size:18px;line-height:1.7;margin:24px 0}
.story p{margin:0 0 16px}
.story .scene-break{text-align:center;color:var(--amber);letter-spacing:.5em;margin:22px 0 14px;font-size:14px}

.blank{display:inline-block;font-family:'Commit Mono',ui-monospace,monospace;font-size:.9em;min-width:90px;text-align:center;padding:2px 10px;margin:0 2px;border:2px solid var(--amber);border-radius:6px;background:transparent;color:var(--amber);cursor:pointer;transition:background .15s,color .15s,transform .1s;vertical-align:baseline}
.blank:hover:not(.correct){background:rgba(169,100,0,.08)}
.blank.selected{box-shadow:0 0 0 3px rgba(232,168,76,.45);outline:none}
.blank.filled{background:var(--amber);color:#fff}
.blank.correct{background:#2D7A4F;border-color:#2D7A4F;color:#fff;cursor:default}
.blank.long{min-width:160px}
.blank.wrong{animation:shake .4s;border-color:#9B3030;background:rgba(155,48,48,.1);color:#9B3030}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.aside-box{background:#fff;border-left:3px solid var(--amber);border-radius:0 8px 8px 0;padding:16px 18px;margin:28px 0}
.aside-label{font:11px 'Commit Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--amber-dark);margin:0 0 6px}
.aside-box p{margin:0;font-size:15px;color:var(--ink-mid);line-height:1.55}
.aside-box code{background:rgba(169,100,0,.1);padding:1px 6px;border-radius:4px;color:var(--amber-dark)}

.tray-label{font:11px 'Commit Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--mid);margin:24px 0 10px}
.word-tray{display:flex;flex-wrap:wrap;gap:8px;background:#fff;border:1px solid var(--bone);border-radius:8px;padding:14px}
.word-chip{font-family:'Commit Mono',ui-monospace,monospace;font-size:14px;background:var(--bone);border:1px solid transparent;border-radius:6px;padding:7px 12px;cursor:grab;color:var(--ink);transition:transform .12s,border-color .12s,background .12s;user-select:none}
.word-chip:hover:not(.used){transform:translateY(-1px);border-color:var(--amber);background:#fff}
.word-chip.used{opacity:.35;cursor:default;text-decoration:line-through}
.word-chip.nudge{animation:shake .3s}

.code-panel{background:var(--night);border-radius:8px;padding:20px 22px;margin:22px 0;font-family:'Commit Mono',ui-monospace,monospace;font-size:14px;line-height:1.7;overflow-x:auto}
.code-line{color:var(--bone);white-space:pre-wrap}
.code-line.locked{opacity:.4;transition:opacity .3s}
.code-line.active{opacity:1}
.code-panel .verb{color:var(--amber-light)}
.code-panel .connective{color:#7A9EBF}
.code-panel .name{color:var(--bone)}
.code-panel .number{color:#D4A0E0}
.code-panel .string{color:#E8DFD0}
.code-panel .placeholder{color:var(--amber-light);border-bottom:1px dashed var(--amber-light)}

.run-bar{display:flex;align-items:center;gap:14px;margin:18px 0;flex-wrap:wrap}
.btn-run{font:600 14px Figtree,sans-serif;border:0;border-radius:999px;padding:11px 22px;cursor:pointer;transition:background .15s,transform .12s}
.btn-run.disabled{background:var(--bone);color:var(--ink);opacity:.4;cursor:not-allowed}
.btn-run.ready{background:var(--amber);color:#fff}
.btn-run.ready:hover{transform:translateY(-1px);background:var(--amber-dark)}
.btn-run.done{background:#2D7A4F;color:#fff;cursor:default}
.run-hint{font:12px 'Commit Mono',monospace;color:var(--mid)}

.output-panel{background:var(--night);border-radius:8px;padding:0 22px;margin:18px 0;font-family:'Commit Mono',ui-monospace,monospace;font-size:14px;line-height:1.8;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .3s,padding .3s}
.output-panel.visible{max-height:600px;opacity:1;padding:20px 22px}
.output-line{color:rgba(232,223,208,.7);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.output-line.show{opacity:1;transform:none}
.output-line .val{color:var(--amber-light)}

.next-page{text-align:center;margin:40px 0 8px}
.next-link{font-family:Recursive,system-ui,sans-serif;font-variation-settings:'CASL' .45;font-style:italic;font-size:18px;color:var(--mid);text-decoration:none;opacity:.35;pointer-events:none;transition:opacity .4s,color .4s;display:inline-flex;align-items:center;gap:10px}
.next-link.unlocked{opacity:1;color:var(--amber);pointer-events:auto}
.next-link.unlocked:hover{color:var(--amber-dark)}
.next-link .lock-icon{font-size:14px}

#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}

@media(max-width:720px){
  .story{font-size:16px;line-height:1.65}
  .blank{min-width:70px;font-size:.88em;padding:2px 8px}
  .blank.long{min-width:130px}
  .progress-track{gap:4px}
  .code-panel,.output-panel.visible{padding:14px 16px;font-size:13px;line-height:1.65}
  .word-tray{padding:10px;gap:6px}
  .word-chip{font-size:13px;padding:6px 10px}
  .btn-run{padding:10px 18px;min-height:44px}
  .aside-box{padding:14px}
  .next-link{font-size:16px;text-align:center}
}
@media(max-width:390px){
  .blank{min-width:60px;font-size:.86em}
  .code-panel,.output-panel.visible{padding:12px;font-size:12px}
  .progress-track .pip{height:3px}
}