:root{
  --ink:#14110E; --ink-2:#1C1814; --ink-3:#272119;
  --paper:#EDE6DA; --paper-dim:#A79C8B; --paper-faint:#6F6656;
  --gold:#E8C87A; --gold-dim:#8A7442;
  --got:#7FB069; --partial:#D9A441; --missed:#C4655B;
  --rule:#2E271E;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --player-h:132px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--serif); font-size:17px; line-height:1.62;
  padding:0 0 calc(var(--player-h) + var(--safe-b)) 0;
  -webkit-font-smoothing:antialiased;
}

/* masthead ------------------------------------------------------------- */
.masthead{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:calc(env(safe-area-inset-top,0px) + 26px) 20px 20px;
  border-bottom:1px solid var(--rule);
}
.brand{font-size:30px; color:var(--gold); letter-spacing:-2px; line-height:1}
.masthead h1{margin:0; font-size:27px; line-height:1.15; letter-spacing:-.01em}
.masthead p{margin:5px 0 0; color:var(--paper-dim); font-size:15px; font-style:italic}
.masthead-meta{grid-column:1/-1; color:var(--paper-faint); font-family:var(--sans);
  font-size:12px; letter-spacing:.09em; text-transform:uppercase}

/* transcript ----------------------------------------------------------- */
.transcript{padding:0 20px}
.act{
  margin:34px 0 4px; padding-top:16px; border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim);
}
.seg{
  padding:16px 0 18px; border-bottom:1px solid var(--rule);
  scroll-margin-top:20px; transition:opacity .25s;
}
.seg-head{display:flex; align-items:baseline; gap:10px; cursor:pointer}
.seg-n{font-family:var(--sans); font-size:12px; color:var(--paper-faint);
  min-width:22px; font-variant-numeric:tabular-nums}
.seg-title{margin:0; font-size:20px; line-height:1.25; flex:1}
.seg-at{font-family:var(--sans); font-size:12px; color:var(--paper-faint);
  font-variant-numeric:tabular-nums}
.seg-script{margin:10px 0 0; color:#D6CDBE}
.seg.is-current{opacity:1}
.seg.is-current .seg-title{color:var(--gold)}
.transcript.playing .seg:not(.is-current){opacity:.5}

q.verbatim{
  quotes:"«" "»"; color:var(--paper); font-style:normal;
  box-shadow:inset 0 -1px 0 var(--gold-dim);
}
q.verbatim::before,q.verbatim::after{color:var(--gold-dim)}

.seg-key{margin:12px 0 0; padding:0 0 0 18px; color:var(--paper-dim); font-size:15.5px}
.seg-key li{margin:3px 0}
.seg-src{margin:11px 0 0; font-family:var(--sans); font-size:12.5px; line-height:1.55}
.seg-src div{margin:3px 0; color:var(--paper-faint)}
.seg-src a{color:var(--paper-dim)}
.tier{
  display:inline-block; padding:1px 6px; margin-right:7px; border-radius:3px;
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
}
.tier-primary{background:#24341F; color:#9CCB86}
.tier-secondhand{background:#33290F; color:var(--partial)}
.tier-unverified{background:#341E1C; color:#D98980}

.b-examine{
  margin-top:13px; padding:8px 15px; background:transparent; color:var(--gold);
  border:1px solid var(--gold-dim); border-radius:999px;
  font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer;
}
.b-examine:active{background:var(--ink-3)}
.b-examine[data-mastery="got"]{border-color:var(--got); color:var(--got)}
.b-examine[data-mastery="partial"]{border-color:var(--partial); color:var(--partial)}

/* legend --------------------------------------------------------------- */
.legend{padding:22px 20px 34px; color:var(--paper-faint);
  font-family:var(--sans); font-size:12px; line-height:1.7}
.legend p{margin:0 0 7px}
.legend .tiers .tier{margin-right:4px}

/* player --------------------------------------------------------------- */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:11px 16px calc(11px + var(--safe-b));
  background:rgba(20,17,14,.93); backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--rule);
}
.player-now{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.player-seg{font-size:14.5px; color:var(--gold); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.player-time{font-family:var(--sans); font-size:11.5px; color:var(--paper-faint);
  font-variant-numeric:tabular-nums; flex:none}
.scrub{
  -webkit-appearance:none; appearance:none; width:100%; height:24px;
  margin:2px 0 0; background:transparent;
}
.scrub::-webkit-slider-runnable-track{height:3px; border-radius:2px; background:var(--ink-3)}
.scrub::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; margin-top:-6px;
  border-radius:50%; background:var(--gold);
}
.player-controls{display:flex; justify-content:center; align-items:center; gap:10px; margin-top:1px}
.ctl{
  min-width:54px; height:40px; background:transparent; color:var(--paper);
  border:1px solid var(--rule); border-radius:9px;
  font-family:var(--sans); font-size:14px; cursor:pointer;
}
.ctl:active{background:var(--ink-3)}
.ctl-play{min-width:74px; background:var(--gold); color:var(--ink);
  border-color:var(--gold); font-size:17px}

/* exam ----------------------------------------------------------------- */
.exam{
  position:fixed; inset:auto 0 0 0; z-index:30; max-height:88vh; overflow-y:auto;
  padding:18px 20px calc(20px + var(--safe-b));
  background:var(--ink-2); border-top:1px solid var(--gold-dim);
  border-radius:16px 16px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.55);
}
.exam-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.exam-kicker{font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim)}
.exam-head h2{margin:2px 0 0; font-size:20px; line-height:1.25}
.exam-close{background:none; border:none; color:var(--paper-dim); font-size:19px; cursor:pointer}
.exam-levels{display:flex; gap:7px; margin:13px 0 0}
.exam-levels span{
  flex:1; text-align:center; padding:5px 0; border:1px solid var(--rule); border-radius:6px;
  font-family:var(--sans); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--paper-faint);
}
.exam-levels span.on{border-color:var(--gold); color:var(--gold)}
.exam-levels span.done{border-color:var(--got); color:var(--got)}
.exam-question{margin:15px 0 0; font-size:19px; line-height:1.45}
.exam-verdict{margin:13px 0 0; padding:12px 14px; border-radius:9px;
  background:var(--ink-3); font-size:16px; line-height:1.5}
.exam-verdict .v-label{font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; display:block; margin-bottom:5px}
.exam-verdict.got .v-label{color:var(--got)}
.exam-verdict.partial .v-label{color:var(--partial)}
.exam-verdict.missed .v-label{color:var(--missed)}
.exam-verdict q{display:block; margin-top:9px; padding-left:11px;
  border-left:2px solid var(--gold-dim); color:var(--paper-dim); font-size:15px}
.exam-controls{margin-top:15px}
.mic{
  width:100%; height:58px; border-radius:11px; border:1px solid var(--gold-dim);
  background:var(--ink-3); color:var(--gold);
  font-family:var(--sans); font-size:16px; font-weight:600;
  cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none;
}
.mic.recording{background:var(--missed); color:#fff; border-color:var(--missed)}
.mic:disabled{opacity:.45}
.exam-text{display:flex; gap:8px; margin-top:10px}
.exam-text input{
  flex:1; padding:12px 13px; border-radius:9px; border:1px solid var(--rule);
  background:var(--ink); color:var(--paper); font-family:var(--serif); font-size:16px;
}
.send{width:52px; border-radius:9px; border:1px solid var(--rule);
  background:var(--ink-3); color:var(--gold); font-size:18px; cursor:pointer}
.exam-status{margin:11px 0 0; min-height:18px; color:var(--paper-faint);
  font-family:var(--sans); font-size:12.5px}
.exam-status.err{color:var(--missed)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}