:root{
  --ink:#10171f; --panel:#161f29; --line:#2a3744;
  --paper:#eef1f4; --soft:#9fb0bf;
  --teal:#1f9d9d; --oxblood:#c0463f; --gold:#caa45a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--paper);
  font-family:'Source Serif 4',Georgia,serif;line-height:1.6;
  -webkit-font-smoothing:antialiased}
#app{max-width:680px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:0 20px}

.bar{display:flex;justify-content:space-between;align-items:baseline;
  padding:26px 0 22px;border-bottom:1px solid var(--line)}
.mark{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.26em;font-size:14px}
.case{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal);letter-spacing:.12em}

main{flex:1;padding:46px 0}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--teal);margin-bottom:18px}
h1{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;line-height:1.15;
  letter-spacing:-.01em;margin-bottom:10px}
.prompt{font-size:19px;margin:20px 0 26px;color:var(--paper)}
.sub{color:var(--soft);font-size:15px;margin-bottom:24px}

textarea{width:100%;min-height:120px;background:var(--panel);color:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:14px 16px;font:inherit;font-size:16px;resize:vertical}
textarea:focus{outline:none;border-color:var(--teal)}

button.primary{margin-top:18px;background:var(--oxblood);color:#fff;border:0;border-radius:8px;
  font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.06em;
  padding:15px 26px;font-size:15px;cursor:pointer;text-transform:uppercase}
button.primary:hover{filter:brightness(1.08)}
button.primary:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;color:var(--soft);font:inherit;font-size:13px;
  text-decoration:underline;cursor:pointer}

.note{margin-top:22px;padding:16px 18px;border-radius:8px;font-size:15px;border:1px solid var(--line)}
.note.miss{border-color:var(--gold);background:rgba(202,164,90,.08)}
.note.hit{border-color:var(--teal);background:rgba(31,157,157,.10)}
.note .h{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;font-size:12px;margin-bottom:6px}
.note.miss .h{color:var(--gold)} .note.hit .h{color:var(--teal)}

.progress{display:flex;gap:8px;margin-bottom:34px}
.pip{flex:1;height:4px;border-radius:2px;background:var(--line)}
.pip.done{background:var(--teal)} .pip.now{background:var(--oxblood)}

.unlock{text-align:center;padding:30px 0}
.unlock .big{font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;color:var(--teal);
  letter-spacing:.04em;margin:14px 0}
.seal{font-family:'IBM Plex Mono',monospace;color:var(--gold);letter-spacing:.2em;font-size:13px}

.reveal h1{font-size:34px}
.reveal .doc{font-size:18px;margin:22px 0;color:var(--paper)}
.reveal .epilogue{border-left:3px solid var(--oxblood);padding:6px 0 6px 20px;
  color:var(--soft);font-style:italic;margin:26px 0}
.reveal .closed{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.3em;
  color:var(--gold);text-align:center;font-size:18px;margin:30px 0}
.cta{display:inline-block;margin-top:10px;color:var(--teal);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:14px;border-bottom:1px solid var(--teal)}
video,.videoFrame{width:100%;border-radius:10px;border:1px solid var(--line);margin:18px 0;background:#000}

.foot{display:flex;justify-content:space-between;align-items:center;
  padding:20px 0 28px;border-top:1px solid var(--line);color:var(--soft)}
.tiny{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em}
@media(max-width:520px){h1{font-size:24px}.prompt{font-size:17px}main{padding:32px 0}}