:root {
  --ink:#1b1e26;
  --ink-soft:#4a5060;
  --ink-faint:#878d9c;
  --canvas:#f4f5f8;
  --card:#ffffff;
  --line:#e6e8ef;
  --focus:#404a8c;
  --err:#c0392b;
  --ok:#2e7d32;
  --break:#b71c1c;
  --r:12px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0;background:var(--canvas);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.5}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.small{font-size:12px}
.dim{color:var(--ink-faint)}
.err{color:var(--err);margin:6px 0 0}
h1{font-size:22px;font-weight:600;letter-spacing:-0.01em;margin:0 0 12px}
h2{font-size:14px;font-weight:600;margin:14px 0 6px}

/* screens: each screen is a centered column at the top of the page */
.screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:32px 20px 60px;
}

/* card container used by landing, tutorial, done */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 30px;
  box-shadow:0 1px 3px rgba(20,24,40,.06);
  max-width:820px;
  width:100%;
}
.lede{font-size:15px;margin:0 0 8px}
.landing-section{margin-top:14px}
.landing-section p{margin:4px 0 0}
.tight{margin:6px 0 0;padding-left:18px}
.tight li{margin-bottom:3px}
.actions{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

button.primary{background:var(--ink);color:#fff;border:none;border-radius:9px;padding:10px 20px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
button.primary:hover:not(:disabled){background:#000}
button.primary:disabled{background:#a0a4b6;cursor:not-allowed}
button.primary.big{padding:12px 26px;font-size:15px}
button.secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:9px;padding:10px 18px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
button.secondary:hover{border-color:#c9cdda;background:#fcfcfe}

/* tutorial */
.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:var(--ink-faint);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:4px;
}
.tut-title{font-size:20px;font-weight:600;margin:6px 0 4px}
.badgeRow{margin-bottom:14px}
.badge{
  display:inline-block;padding:3px 10px;border-radius:5px;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.04em;
}
.badge.break{background:var(--break)}
.badge.ok{background:var(--ok)}
.explanation{
  background:#f7f8fb;
  border-left:3px solid var(--focus);
  padding:12px 14px;
  border-radius:6px;
  margin-top:14px;
  font-size:14px;
  line-height:1.55;
}

/* main annotation column */
main#app{padding:0}
main#app .topbar{
  position:sticky;top:0;background:var(--canvas);border-bottom:1px solid var(--line);z-index:5;
  width:100%;padding:10px 30px;
}
.progressWrap{display:flex;align-items:center;gap:12px;max-width:820px;margin:0 auto}
.progressLabel{color:var(--ink-faint);font-weight:600;letter-spacing:.04em}
.progressBar{flex:1;height:6px;background:var(--line);border-radius:4px;overflow:hidden;max-width:400px}
.progressBar.mini{max-width:120px;height:4px;flex:none}
#progressFill,#tutProgressFill{height:100%;background:var(--focus);width:0;transition:.3s}
main#app .content{max-width:820px;width:100%;margin:0 auto;padding:24px 20px 60px}

.clip-meta{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.savedTag{margin-left:auto;color:var(--ok);font-weight:600;font-size:12px}

/* video container: shared by tutorial + main */
.video-wrap{
  background:#000;
  border-radius:var(--r);
  overflow:hidden;
  width:100%;
  max-width:820px;
  margin:0 auto;
}
.video-wrap video{width:100%;display:block;max-height:520px;background:#000}
.hint-inline{margin:8px 0 18px;text-align:center}

/* form column: same 820 max width */
.form{max-width:820px;width:100%;margin:0 auto}
.qblock{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:12px}
.q{margin:0 0 4px;font-size:14.5px;font-weight:600;line-height:1.35}
.qnum{color:var(--ink-faint);font-weight:600;margin-right:6px}
.qhelp{margin:0 0 10px}

.opts{display:flex;gap:8px}
.opts.row{flex-wrap:wrap}
.opts.multi{flex-wrap:wrap}
.moment-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{background:#fff;border:1.5px solid var(--line);color:var(--ink);border-radius:9px;padding:9px 14px;font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.opt:hover{border-color:#c9cdda;background:#fcfcfe}
.opt.sel{border-color:var(--focus);background:#f2f4fd;color:var(--focus);font-weight:600}

textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;font:inherit;font-size:13.5px;resize:vertical;background:#fff}
textarea:focus{outline:none;border-color:var(--focus)}

.submitbar{display:flex;align-items:center;gap:14px;margin-top:6px;padding:12px 0}
.submitbar #formError{flex:1}

@media (max-width:640px){
  .moment-grid{grid-template-columns:1fr}
  .card{padding:20px 18px}
}