
:root { --done-bg:rgba(74,146,72,.92); --done-brd:#84cc7d; --done-ink:#fff; }

.app { height:100vh; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:1; }
.player-bar { position:sticky; top:0; z-index:40;
  background:var(--o-1);
  border-bottom:1px solid rgba(255,255,255,.16); }
.player-bar-in { display:flex; align-items:center; gap:1rem; height:var(--bar-h); padding:0 1.1rem; }
.player-bar .brand { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  height:var(--bar-h); flex:none; position:relative; z-index:2; }
.player-bar .brand img { height:55px; width:auto; display:block; transform:translateY(-6px); }
@media (min-width:881px){
  .player-bar .brand { width:calc(340px - 2.2rem); justify-content:center; }
}
.player-bar .spacer { flex:1; }
.bar-btn { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-display); font-weight:700;
  font-size:.82rem; color:#fff; background:rgba(255,255,255,.1); border:1px solid var(--glass-brd);
  border-radius:999px; padding:.5em 1em; cursor:pointer; transition:background .15s ease; text-decoration:none; }
.bar-btn:hover { background:rgba(255,255,255,.18); }
.bar-btn svg { width:14px; height:14px; }
.bar-btn.on { background:#fff; color:#9C5008; border-color:#fff; }
.toc-btn { display:none; }
.toc-btn .tb-n { font-family:var(--font-ui); font-weight:700; opacity:.85; font-variant-numeric:tabular-nums; }
.toc-btn .tb-n:not(:empty)::before { content:"\00B7"; margin:0 .4em; }

.body { display:grid; grid-template-columns:340px 1fr; flex:1; min-height:0; align-items:start; gap:0; }

.rail { padding:20px 18px 44px; align-self:stretch; height:100%; overflow-y:auto; overscroll-behavior:contain;
  border-right:1px solid rgba(255,255,255,.12);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; }
.rail::-webkit-scrollbar, .main::-webkit-scrollbar { width:9px; }
.rail::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:9px; }
.rail::-webkit-scrollbar-thumb:hover, .main::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.32); }

.rail-head { padding:4px 6px 16px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.14); }
.rh-title { font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:#fff; letter-spacing:-.01em; line-height:1.05; }
.rh-sub { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em; font-size:.62rem; font-weight:700; color:var(--muted); margin-top:6px; }
.rail-head .backlink { margin:0 0 .9rem; text-decoration:none; }
.stmt-export { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:1.1rem; }
.rh-prog { margin-top:14px; }
.rh-bar { height:6px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden; }
.rh-bar span { display:block; height:100%; border-radius:999px; background:#79c072;
  box-shadow:0 0 8px rgba(121,192,114,.55); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.rh-meta { display:flex; justify-content:space-between; gap:.6rem; margin-top:7px;
  font-family:var(--font-display); font-weight:700; font-size:.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }

.layer { margin-bottom:1.3rem; display:flex; flex-direction:column; gap:6px; }
.ms-head { display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem; padding:0 .5rem .1rem; }
.ms-name { font-family:var(--font-display); font-weight:800; font-size:.98rem; color:#fff; line-height:1.12; text-wrap:balance; }
.ms-count { flex:none; font-family:var(--font-display); font-weight:700; font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.layer-rule { height:2px; border-radius:2px; margin:0 .5rem .15rem; background:rgba(255,255,255,.5); }

.row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; color:var(--ink);
  background:transparent; border:1px solid transparent; border-radius:13px; padding:11px 12px; cursor:pointer;
  font-family:var(--font-text); transition:.14s; }
.row:hover { background:rgba(255,255,255,.09); }
.row.current { background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.07)); border-color:rgba(255,255,255,.42); }
.row.locked { color:rgba(255,255,255,.55); cursor:not-allowed; }
.row .num { flex:none; font-family:var(--font-display); font-weight:800; font-size:.86rem; color:#fff; width:1.3em; text-align:center; }
.row .tt { flex:1; min-width:0; font-family:var(--font-display); font-weight:800; font-size:1.02rem; line-height:1.22; color:#fff; }
.row .sub { font-size:.72rem; color:var(--muted); font-weight:600; font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.row .caret { flex:none; width:15px; height:15px; opacity:.7; transition:transform .2s; }
.row.open .caret { transform:rotate(90deg); }

.dot { flex:none; width:22px; height:22px; border-radius:999px; display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.5); background:rgba(255,255,255,.1); transition:.18s; }
.dot svg { width:12px; height:12px; stroke:var(--done-ink); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.dot.done { background:var(--done-bg); border-color:var(--done-brd); }
.dot.partial { border-color:var(--done-brd);
  background:conic-gradient(var(--done-bg) var(--pct,0%), rgba(255,255,255,.1) 0); }
.dot.lock, .oi-dot.lock { border:0; background:transparent; }
.dot.lock svg, .oi-dot.lock svg { width:19px; height:19px; }

.subtoc { list-style:none; margin:2px 0 6px 22px; padding:0 0 0 16px; display:flex; flex-direction:column; gap:3px;
  border-left:1px solid rgba(255,255,255,.16); }
.subtoc[hidden] { display:none; }
.subtoc .row { padding:9px 11px; }
.subtoc .row .tt { font-weight:700; font-size:.92rem; color:rgba(255,255,255,.9); }
.subtoc .row.current .tt, .subtoc .row:hover .tt { color:#fff; }
.subtoc .dot { width:19px; height:19px; }
.subtoc .dot svg { width:10px; height:10px; }
.subtoc .dot.lock svg { width:16px; height:16px; }
.subtoc .abc { flex:none; font-family:var(--font-ui); font-size:.74rem; font-weight:700; color:rgba(255,255,255,.82); width:1.9em; letter-spacing:.03em; }

.main { align-self:stretch; height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; }
.main-inner { max-width:820px; margin:0 auto; padding:1.6rem 1.6rem 5rem; }
.view { display:none; } .view.active { display:block; animation:fade .28s ease; }
@keyframes fade { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

.sec-head { margin-bottom:1.4rem; }
.sec-head, .trailband { overflow-wrap:anywhere; }
.trailband .addr { font-size:.76em; font-weight:700; letter-spacing:-.005em; }
.sec-head .eyebrow { display:block; margin-bottom:.5rem; color:rgba(255,255,255,.85); }
.sec-head h2 { font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:800; }
.sec-head .kicker { font-family:var(--font-text); font-style:italic; color:var(--muted); font-size:1.06rem; margin-top:.4rem; }

.backlink { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:600;
  font-size:.82rem; color:var(--muted); background:transparent; border:0; padding:0; margin:0 0 1rem; cursor:pointer; }
.backlink:hover { color:#fff; }
.backlink svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; }

.trailband { --cap:64px;
  padding-top:var(--cap);
  padding-bottom:calc(1.1rem + var(--cap));
  margin-bottom:1.5rem; }
.trailband::before {
  padding:var(--cap) 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M16%20160%20C16%20100%2022%2066%2062%2054%20C180%2020%20320%2088%20500%2054%20C680%2020%20820%2088%20938%2054%20C978%2066%20984%20100%20984%20160%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M16%200%20C16%2060%2022%2094%2062%20106%20C180%20140%20320%2072%20500%20106%20C680%20140%20820%2072%20938%20106%20C978%2094%20984%2060%20984%200%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20260%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M16%200%20C16%2040%200%2070%2016%20130%20C32%20190%2016%20220%2016%20260%20L984%20260%20C984%20220%20968%20190%20984%20130%20C1000%2070%20984%2040%20984%200%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M16%20160%20C16%20100%2022%2066%2062%2054%20C180%2020%20320%2088%20500%2054%20C680%2020%20820%2088%20938%2054%20C978%2066%20984%20100%20984%20160%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M16%200%20C16%2060%2022%2094%2062%20106%20C180%20140%20320%2072%20500%20106%20C680%20140%20820%2072%20938%20106%20C978%2094%20984%2060%20984%200%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20260%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M16%200%20C16%2040%200%2070%2016%20130%20C32%20190%2016%20220%2016%20260%20L984%20260%20C984%20220%20968%20190%20984%20130%20C1000%2070%20984%2040%20984%200%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% var(--cap), 100% var(--cap), 100% 260px;
          mask-size: 100% var(--cap), 100% var(--cap), 100% 260px;
  -webkit-mask-position: top center, bottom center, center top;
          mask-position: top center, bottom center, center top;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat round;
          mask-repeat: no-repeat, no-repeat, no-repeat round;
  -webkit-mask-origin: border-box, border-box, content-box;
          mask-origin: border-box, border-box, content-box;
  -webkit-mask-clip: border-box, border-box, content-box;
          mask-clip: border-box, border-box, content-box;
  -webkit-mask-composite: source-over, source-over, source-over;
          mask-composite: add, add, add;
  opacity:.88; }
.trailband::before { left:-4rem; right:-4rem; }

.reading h3 { font-family:var(--font-display); font-weight:800; font-size:1.24rem; margin:2rem 0 .6rem; color:#fff; }
.reading h4 { font-family:var(--font-display); font-weight:800; font-size:1.05rem; margin:1.6rem 0 .5rem; color:rgba(255,255,255,.92); }
.trailband > .reading:first-child > :first-child { margin-top:0; }
.reading p { color:var(--muted); font-size:1.04rem; line-height:1.78; margin:0 0 1.15rem; }
.reading ul, .reading ol { color:var(--muted); font-size:1.02rem; line-height:1.7; margin:0 0 1.2rem; padding-left:1.2rem; }
.reading li { margin-bottom:.45rem; }
.reading blockquote { margin:2rem 0; padding:0;   
  font-family:var(--font-text); font-style:italic; font-size:1.18rem; line-height:1.7; color:#fff; }
.reading strong { color:#fff; }
.reading a { color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45); text-underline-offset:3px; }
.reading a:hover { text-decoration-color:#fff; }

.tv-tbl { width:100%; border-collapse:collapse; margin:2.6rem 0 2.8rem;
  border:1px solid rgba(255,255,255,.3); }
.tv .tv-tbl { margin:.6rem 0 0; }
.tv-tbl th, .tv-tbl td { padding:.72rem .95rem; text-align:left; vertical-align:top;
  font-size:1rem; line-height:1.55; border-bottom:1px solid rgba(255,255,255,.15); }
.tv-tbl tbody tr:last-child td { border-bottom:0; }
.tv-tbl th { font-family:var(--font-ui); font-weight:700; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(255,255,255,.72); background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.3); }
.tv-tbl td { font-family:var(--font-ui); color:var(--muted); }
.tv-tbl td.k { font-family:var(--font-display); font-weight:800; color:#fff; width:15rem; }
.tv-tbl th:first-child, .tv-tbl td.k { border-right:1px solid rgba(255,255,255,.15); }
@media (max-width:640px) {
  .tv-tbl thead { display:none; }
  .tv-tbl, .tv-tbl tbody, .tv-tbl tr, .tv-tbl td { display:block; width:auto; }
  .tv-tbl tr { border-bottom:1px solid rgba(255,255,255,.15); }
  .tv-tbl tbody tr:last-child { border-bottom:0; }
  .tv-tbl td { border-bottom:0; }
  .tv-tbl td.k { border-right:0; padding-bottom:.1rem; }
  .tv-tbl.keep { display:table; width:100%; }
  .tv-tbl.keep thead { display:table-header-group; }
  .tv-tbl.keep tbody { display:table-row-group; }
  .tv-tbl.keep tr { display:table-row; border-bottom:0; }
  .tv-tbl.keep th, .tv-tbl.keep td { display:table-cell; padding:.6rem .55rem; font-size:.92rem;
    border-bottom:1px solid rgba(255,255,255,.15); }
  .tv-tbl.keep th { font-size:.66rem; letter-spacing:.08em; }
  .tv-tbl.keep tbody tr:last-child td { border-bottom:0; }
  .tv-tbl.keep td.k { width:auto; border-right:1px solid rgba(255,255,255,.15); padding-bottom:.6rem; }
}
@media (max-width:380px){
  .tv-tbl.keep th, .tv-tbl.keep td { padding:.55rem .3rem; font-size:.86rem; }
}
.tv-tbl.keep td { font-variant-numeric:tabular-nums; }

.reading h3.ghead, .reading h4.ghead { margin-bottom:1.25rem; }   
.reading p.gdef { margin:0 0 1rem; }
.reading .gterm { font-family:var(--font-display); font-weight:800; color:#fff; }
.reading .gterm .u { font-weight:500; color:var(--muted); font-size:.86em; margin-left:.25rem; }
.reading p.lede::first-letter { font-family:var(--font-display); font-weight:800; font-size:3rem; float:left; line-height:.8;
  padding:.08rem .5rem 0 0; color:#fff; text-shadow:0 0 24px rgba(255,236,200,.6); }

.reflect { margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.18); }
.reflect-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; flex-wrap:wrap; }
.reflect-head h3 { font-family:var(--font-display); font-weight:800; font-size:1.18rem; }
.privacy { margin-left:auto; font-size:.88rem; color:rgba(255,255,255,.7); }
.reflect-intro { font-size:1.04rem; line-height:1.78; color:var(--muted); margin:0 0 1.4rem; }
.prompt { padding:0 0 2.2rem; margin-bottom:2.2rem; border-bottom:1px solid rgba(255,255,255,.15); }
.prompt:last-child { border-bottom:0; padding-bottom:0; margin-bottom:.5rem; }
.q-row { display:flex; gap:.7rem; align-items:flex-start; }
.q-num { font-family:var(--font-display); font-weight:800; font-size:.78rem; letter-spacing:.18em; color:rgba(255,255,255,.55); padding:0; margin-right:.1rem; margin-top:.15rem; font-weight:700; flex:none; white-space:nowrap; }
.q { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; line-height:1.35; }
.prompt .hint { font-size:1.04rem; line-height:1.78; color:var(--muted); margin:.5rem 0 1rem; padding-left:0; }
textarea { width:100%; min-height:7rem; resize:vertical; color:#fff; padding:1.4rem 2.2rem; border-radius:999px;
  border:1px solid var(--glass-brd); background:rgba(255,255,255,.1); line-height:1.55; font-size:.95rem; font-family:var(--font-text); }
textarea::placeholder { color:rgba(255,255,255,.5); }
textarea:focus { outline:none; border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.16); }
.save-state { font-size:.72rem; color:rgba(255,255,255,.85); margin-top:.45rem; height:1rem; display:flex; align-items:center; gap:.35rem; opacity:0; transition:opacity .2s; }
.save-state.show { opacity:1; }

.endcap { margin-top:2.4rem; }
.gatehint { display:flex; align-items:center; gap:.55rem; font-size:.84rem; color:var(--muted); margin-bottom:.9rem; transition:opacity .2s, height .2s; }
.gatehint svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.gatehint.hide { opacity:0; height:0; margin:0; overflow:hidden; }
.donecap { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; }
.donebadge { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:800; font-size:.98rem; line-height:1.55;
  color:var(--done-ink); background:var(--done-bg); border:1px solid var(--done-brd); padding:.72em 1.4em; border-radius:999px; }
.donecap .nextbtn { line-height:1.55; }
.donebadge svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.6; }
.undo { font-family:var(--font-display); font-weight:600; font-size:.82rem; color:var(--muted); background:transparent; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }
.undo:hover { color:#fff; }
.nextbtn { color:#fff; background:rgba(255,255,255,.12); border:1px solid var(--glass-brd); margin-left:auto; }
.nextbtn:hover { background:rgba(255,255,255,.2); }
.cta-note { font-size:.78rem; color:rgba(255,255,255,.7); }

.previewcap { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem;
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.18); }
.previewcap .cta-note { flex:1 1 14rem; }

.savenote { margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.18); }
.savenote p { margin:0; }
.savenote .sn-q { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; line-height:1.35; }
.savenote .sn-t { color:var(--muted); font-size:1.04rem; line-height:1.78; margin-top:.4rem; }
.savenote .sn-links { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.8rem; }
.savenote .sn-links .undo { padding:0; color:#fff; font-weight:800; text-decoration:none; }
.savenote .sn-links .undo:hover, .rh-save a:hover { opacity:.8; }
.savenote .sn-links span { color:rgba(255,255,255,.55); }
.rh-save { margin:.9rem 0 0; font-size:.88rem; line-height:1.55; color:var(--muted); }
.rh-save a { color:#fff; font-weight:700; text-decoration:none; }

.ov-lead { color:var(--muted); font-size:1.04rem; line-height:1.78; margin:0 0 1.8rem; }
.ov-outline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  border-top:1px solid rgba(255,255,255,.15); }
.oi { display:flex; align-items:center; gap:.9rem; padding:1.05rem .2rem; border-bottom:1px solid rgba(255,255,255,.15); }
.oi-n { flex:none; font-family:var(--font-display); font-weight:800; font-size:.78rem;
  letter-spacing:.18em; color:rgba(255,255,255,.55); width:3.2em; }
.oi-dot { flex:none; width:20px; height:20px; border-radius:50%; border:1.8px solid rgba(255,255,255,.4);
  background:transparent; display:grid; place-items:center; }
.oi-dot svg { width:11px; height:11px; stroke:var(--done-ink); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.oi-dot.done { background:var(--done-bg); border-color:var(--done-brd); }

.oi-t { flex:1; min-width:0; font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:#fff; line-height:1.3; }
.oi.locked .oi-t { color:rgba(255,255,255,.55); }
.oi-s { flex:none; font-size:.88rem; color:var(--muted); }

.callout-note { display:flex; gap:.7rem; align-items:flex-start; padding:0 0 1.2rem; margin-bottom:1.8rem;
  border-bottom:1px solid rgba(255,255,255,.15); }
.callout-note p { margin:0; font-size:1.04rem; color:var(--muted); line-height:1.78; }
.callout-note b { color:#fff; }
.finish-wrap { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; background:rgba(0,32,28,.72); animation:finishIn .18s ease-out; }
.finish-panel { position:relative; width:min(520px,100%); min-height:390px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel) 0 0 / 100% 100% no-repeat; animation:finishUp .22s ease-out; }
.finish-in { padding:4.6rem 2.6rem; text-align:center; }
.finish-x { position:absolute; top:34px; right:34px; width:38px; height:38px; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; transition:background .15s ease; }
.finish-x:hover, .finish-x:focus-visible { background:rgba(255,255,255,.24); }
.finish-x:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.finish-x svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.finish-in h2 { font-family:var(--font-display); font-weight:800; font-size:1.5rem; margin:0 0 .6rem; color:#fff; }
.finish-in p { margin:0 0 2.4rem; font-size:1.04rem; line-height:1.78; color:var(--muted); }
.finish-in p.finish-lead { margin-bottom:.5rem; }
.finish-check { display:block; width:56px; height:56px; margin:0 auto 1rem; background:var(--check-on-green) center / contain no-repeat; }
.finish-in p.finish-stamp { color:#fff; font-weight:700; }
@keyframes finishIn { from { opacity:0; } }
@keyframes finishUp { from { opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion:reduce) { .finish-wrap, .finish-panel { animation:none; } }
@media (max-width:560px) { .finish-panel { min-height:340px; } .finish-in { padding:5.4rem 1.6rem 4rem; } }

.fb-done { padding:0 0 1.2rem; margin-bottom:1.8rem; border-bottom:1px solid rgba(255,255,255,.15); }
.fb-done h3 { font-family:var(--font-display); font-weight:800; font-size:1.24rem; margin:0 0 .5rem; color:#fff; }
.fb-done p { margin:0; font-size:1.04rem; line-height:1.78; color:var(--muted); }
.callout { margin:1.8rem 0; padding:0; font-size:1.04rem; line-height:1.78; color:var(--muted); }
.callout strong { color:#fff; }
.notice-body p { color:var(--muted); font-size:1.04rem; line-height:1.78; margin:0 0 1.15rem; }
.notice-body p:first-child { color:rgba(255,255,255,.92); }
.notice-body p:last-child { margin-bottom:0; }

.quiz-intro { color:var(--muted); font-size:1.04rem; line-height:1.78; margin:0 0 1.8rem; }
.quiz-stage { max-width:44rem; }

.qintro { padding:0; margin-bottom:1.9rem; }
.qintro .qi-k { display:block; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:.9rem; }
.qintro .qi-lede { margin:0; color:rgba(255,255,255,.92); font-size:1rem; line-height:1.7; }
.qintro .qi-meta { margin-top:1.1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem; line-height:1.7; color:var(--muted); }
.qbtn { width:100%; justify-content:center; }

.qprog { display:flex; align-items:center; gap:.9rem; margin-bottom:1.5rem; }
.qbar { flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; }
.qbar span { display:block; height:100%; border-radius:999px; background:#fff; transition:width .35s ease; }
.qcount { font-family:var(--font-ui); font-variant-numeric:tabular-nums; font-size:.72rem; letter-spacing:.1em; color:rgba(255,255,255,.75); flex:none; }

.qtext { font-family:var(--font-display); font-weight:800; font-size:1.45rem; line-height:1.35; letter-spacing:-.01em;
  color:#fff; margin-bottom:1.4rem; text-wrap:pretty; }
.qopts { display:flex; flex-direction:column; }
.qopt { display:flex; align-items:flex-start; gap:1.1rem; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.15);
  padding:15px 2px; font:inherit; font-size:1.02rem; line-height:1.5; color:rgba(255,255,255,.88);
  transition:color .14s ease, border-color .14s ease; }
.qopt:last-child { border-bottom:1px solid rgba(255,255,255,.15); }
.qopt:hover { color:#fff; }
.qopt:hover .qdot { color:rgba(255,255,255,.85); }
.qopt .qdot { flex:none; width:1.9em; font-family:var(--font-display); font-weight:800;
  font-size:.8rem; letter-spacing:.18em; line-height:1.9; color:rgba(255,255,255,.55);
  transition:color .14s ease; }
.qopt.selected { color:#fff; border-bottom-color:#fff; }
.qopt.selected .qlabel { font-weight:700; }
.qopt.selected .qdot { color:#fff; }
.qnav { display:flex; gap:.7rem; margin-top:1.5rem; }
.qnav .btn { flex:1; justify-content:center; }

.qres { padding:0; margin-bottom:2rem; text-align:center; }
.qring { position:relative; width:128px; height:128px; margin:0 auto 1rem; }
.qring svg { width:128px; height:128px; display:block; }
.qring-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.qring-c .qscore { font-family:var(--font-display); font-weight:800; font-size:2.7rem; line-height:1; color:#fff; }
.qring-c .qof { font-size:.78rem; color:var(--muted); margin-top:.2rem; }
.qres .qtier { font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#fff; }
.qres .qdesc { margin:.5rem auto 0; max-width:44ch; color:var(--muted); font-size:.95rem; line-height:1.65; }

.qreview { padding:0; margin-bottom:1rem; }
.qreview .qr-h { font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:.4rem; }
.qr-item { padding:1rem 0; border-top:1px solid rgba(255,255,255,.14); }
.qr-item:first-of-type { border-top:none; }
.qr-q { font-weight:700; font-size:.95rem; line-height:1.45; color:#fff; margin-bottom:.6rem; }
.qr-a { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; line-height:1.5; margin-top:.3rem; color:var(--muted); }
.qr-a .mk { flex:none; font-weight:800; }
.qr-a.ok { color:#fff; }
.qr-a.ok .mk { color:#84cc7d; }
.qr-a.no .mk { color:#ff8c8c; }

.privacy > svg, .donebadge > svg {
  flex:none; width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; }
.weeks { display:flex; flex-direction:column; margin-bottom:2.2rem;
  border-top:1px solid rgba(255,255,255,.15); }
.week { border-bottom:1px solid rgba(255,255,255,.15); }
.week.open { border-bottom-color:rgba(255,255,255,.55); }
.week.locked { opacity:.45; }
.week-h { display:flex; align-items:center; gap:.9rem; width:100%; text-align:left; padding:1.05rem .2rem;
  background:transparent; border:0; color:var(--ink); cursor:pointer; font-family:var(--font-display); }
.week-h:hover .wn { color:#fff; }
.week.locked .week-h { cursor:not-allowed; }
.week-h .wn { font-family:var(--font-display); font-weight:800; font-size:1.02rem; color:#fff; flex:1; }
.week-h .wmeta { font-family:var(--font-display); font-weight:700; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.week-h .caret { width:15px; height:15px; opacity:.7; transition:transform .2s; stroke:currentColor; fill:none; stroke-width:2.4; }
.week.open .week-h .caret { transform:rotate(90deg); }
.week.open .wn { color:#fff; }
.week-b { padding:.2rem .2rem 1.8rem 2.5rem; }
.wscores { margin:1.2rem 0 0; }
.wscores .ep-item { align-items:center; gap:16px; }
.wscores .ep-item h3 { font-size:1rem; margin:0; }
.wscores .ep-item p { font-size:.85rem; margin:.15rem 0 0; }
.wscores .ep-mark { min-width:1.8em; }
.seg.wscore { flex:none; padding:3px; }
.seg.wscore button { padding:.42em .78em; font-variant-numeric:tabular-nums; }

@media (max-width:680px){
  .wscores .ep-item { flex-wrap:wrap; }
  .seg.wscore { margin-top:.6rem; margin-left:calc(1.8em + 16px); }
}
.wscores.mirror { margin-top:.4rem; }
.wscores.mirror .ep-item p { font-size:1rem; line-height:1.55; color:rgba(255,255,255,.92); margin:0; }
.mirror-go { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1.1rem; margin:1.8rem 0 .4rem; }
.mirror-go .cta-note { margin:0; font-variant-numeric:tabular-nums; }
.mirror-go .btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.mirror-res .reading h3.mr-head { margin-top:2.4rem; }
.mirror-res .mr-after { margin-top:2.4rem; }
@media (max-width:680px){
  .wscores.mirror .ep-item { align-items:baseline; row-gap:12px; }
  .wscores.mirror .ep-body { flex:1 1 calc(100% - 1.8 * .78rem - 16px); order:0; }
  .wscores.mirror .seg.wscore { order:3; margin:0 0 0 calc(1.8 * .78rem + 16px); }
}
.field { margin-bottom:.9rem; }
.field label { display:block; font-family:var(--font-display); font-weight:700; font-size:.88rem; color:#fff; margin-bottom:.25rem; }
.field .fh { display:block; font-size:.78rem; color:rgba(255,255,255,.66); margin-bottom:.45rem; line-height:1.5; }
.field textarea { min-height:64px; padding:.95rem 1.7rem; }

.field select, .field input[type=text] { width:100%; color:#fff; padding:.6em 1.1em; border-radius:999px; font-family:var(--font-text);
  border:1px solid var(--glass-brd); background:rgba(255,255,255,.1); font-size:.95rem; }
.field select option { color:#20130a; }
.scorerow { display:flex; align-items:center; gap:.9rem; }
.scorerow input[type=range] { flex:1; accent-color:#fff; }
.scorerow .val { font-family:var(--font-ui); font-size:1rem; color:#fff; width:2.4em; text-align:right; font-variant-numeric:tabular-nums; }

.summary { padding:1.6rem 0 0; margin-top:.6rem; border-top:1px solid rgba(255,255,255,.18); }
.summary h3 { font-family:var(--font-display); font-weight:800; font-size:1.1rem; margin-bottom:.2rem; }
.summary .sub { font-size:.84rem; color:var(--muted); margin-bottom:1.1rem; }
.legend .k { display:inline-flex; align-items:center; gap:.35rem; }
.legend .sw { width:11px; height:11px; border-radius:3px; display:inline-block; }
canvas { width:100%; height:200px; display:block; }

.example { font-size:1.04rem; line-height:1.78; color:rgba(255,255,255,.7); font-style:italic;
  margin:.6rem 0 1rem; padding-left:0; }
.example b { color:rgba(255,255,255,.9); font-style:normal; }

.fb-set { margin-top:.4rem; }
.fb-q { padding:0 0 2.4rem; margin-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.15); }
.fb-q:last-child { border-bottom:0; margin-bottom:1rem; }
.fb-q .fq { display:block; font-family:var(--font-display); font-weight:700; font-size:1.06rem;
  color:#fff; line-height:1.4; margin-bottom:1.1rem; }
.fb-q textarea { width:100%; min-height:7.5rem; resize:vertical; font:inherit; font-size:1rem;
  line-height:1.7; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:1.5rem 2.4rem; }
.fb-q textarea::placeholder { color:rgba(255,255,255,.45); }
.fb-q textarea:focus { outline:none; background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.5); }
.fb-sent { margin-top:1.6rem; color:var(--muted); font-size:1.04rem; line-height:1.78; }
.fb-sent strong { color:#fff; }
.fb-scale { display:flex; flex-wrap:wrap; gap:.55rem; }
.fb-scale label { font-size:.9rem; color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06);
  border-radius:999px; padding:.5em 1em; cursor:pointer; display:inline-flex; align-items:center; gap:.55rem;
  transition:background .14s ease, border-color .14s ease, color .14s ease; }
.fb-scale label:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5); color:#fff; }
.fb-scale input { appearance:none; -webkit-appearance:none; margin:0; flex:none;
  width:15px; height:15px; border-radius:50%; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.55); background:transparent;
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.fb-scale label:hover input { border-color:#fff; }
.fb-scale input:checked { border-color:#fff; background:#fff; box-shadow:inset 0 0 0 3.5px var(--g-2); }
.fb-scale label:has(input:checked) { background:#fff; border-color:#fff; color:var(--g-2); font-weight:700; }
.fb-scale label:has(input:checked) input { border-color:var(--g-2); background:var(--g-2); box-shadow:inset 0 0 0 3.5px #fff; }
.fb-scale input:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.scrim { position:fixed; inset:0; background:rgba(20,13,2,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:44; }
.scrim.open { opacity:1; pointer-events:auto; }

@media (max-width:880px){
  .main-inner { padding-left:1rem; padding-right:1rem; }
  .sec-head, .trailband { padding-left:2rem; padding-right:2rem; }
  .view > .backlink { margin-left:2rem; }
  .trailband::before { left:0; right:0; opacity:1;
    background:linear-gradient(158deg, var(--g-0) 0%, var(--g-1) 42%, var(--g-2) 100%);
    -webkit-mask-size: 100% var(--cap), 100% var(--cap), 100% 100%;
            mask-size: 100% var(--cap), 100% var(--cap), 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .trailband.drawn::before { background:var(--panel) 0 0 / 100% 100% no-repeat;
    -webkit-mask-image:none; mask-image:none; }
  .app { height:auto; overflow:visible; }
  .main { height:auto; overflow:visible; }
  .body { grid-template-columns:1fr; }
  .toc-btn { display:inline-flex; }
  .player-bar-in { gap:.55rem; padding:0 1rem; }
  .player-bar .brand img { height:44px; transform:translateY(-5px); }
  .bar-btn { font-size:.8rem; padding:.55em 1em; }
  .rail { position:fixed; top:var(--bar-h); left:0; bottom:0; width:min(92vw,340px); z-index:45; border-right:0; border-radius:0 18px 18px 0;
    overflow-y:auto; transform:translateX(-104%); transition:transform .24s ease;
    background:linear-gradient(168deg, rgba(158,82,17,.99), rgba(116,54,8,.99));
    box-shadow:24px 0 60px rgba(40,18,2,.5); }
  .rail.show { transform:none; }
  .rail-head { padding-bottom:28px; margin-bottom:24px; }
  .donecap { flex-direction:column; align-items:flex-start; gap:1rem; }
  .donecap .donebadge { order:1; }
  .donecap .nextbtn { order:2; margin-left:0; max-width:100%; }
  .donecap .undo { order:3; padding:0; }
}
@media (max-width:360px){
  .player-bar .brand img { height:38px; transform:translateY(-4px); }
  .player-bar-in { gap:.4rem; padding:0 .75rem; }
  .sec-head, .trailband { padding-left:1.6rem; padding-right:1.6rem; }
  .view > .backlink { margin-left:1.6rem; }
}

.mr-list { list-style:none; margin:.6rem 0 0; padding:0; border-top:1px solid rgba(255,255,255,.2); }
.mr-row { padding:20px 0 18px; border-bottom:1px solid rgba(255,255,255,.2); }
.mr-top { display:flex; align-items:baseline; gap:14px; }
.mr-rank { flex:none; width:2rem; font-family:var(--font-ui); font-weight:800; font-size:.85rem; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; }
.mr-name { flex:1; min-width:0; font-family:var(--font-ui); font-weight:800; font-size:1.2rem; line-height:1.3; color:#fff; }
.mr-score { margin-left:.6rem; color:var(--o-hi); font-variant-numeric:tabular-nums; }
.mr-practice { display:block; font-weight:600; font-size:.95rem; color:rgba(255,255,255,.72); }
.mr-q { margin:24px 0 0 calc(2rem + 14px); }
.mr-q p { margin:0 0 8px; font-size:1.02rem; line-height:1.55; color:rgba(255,255,255,.88); }
.mr-avoid { display:block; margin-bottom:3px; font-family:var(--font-ui); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.mr-rated { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mr-rated-label { font-family:var(--font-ui); font-weight:700; font-size:.88rem; color:rgba(255,255,255,.72); }
.seg.mr-scale { padding:3px; gap:2px; }
.seg.mr-scale span { font-family:var(--font-ui); font-weight:700; font-size:.82rem; line-height:1; padding:.42em .7em; border-radius:999px; color:rgba(255,255,255,.45); font-variant-numeric:tabular-nums; }
.seg.mr-scale span.on { color:var(--g-2); background:#fff; }
.mr-revisit { display:inline-block; margin:16px 0 0 calc(2rem + 14px); font-family:var(--font-ui); font-weight:800; font-size:.98rem;
  color:var(--o-hi); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.mr-revisit:hover { color:#fff; }
.mr-revisit:focus-visible { outline:2px solid var(--o-hi); outline-offset:3px; border-radius:2px; }
.reading p.mr-key { font-size:.95rem; color:rgba(255,255,255,.75); margin:0 0 .7rem; }
.reading h4 + p.mr-key { margin-top:-.2rem; }
@media (max-width:520px) {
  .mr-top { gap:10px; }
  .mr-rank { width:auto; min-width:1.6rem; }
  .mr-q, .mr-revisit { margin-left:0; }
  .mr-row { padding:28px 0 26px; }
  .mr-q { margin-top:22px; }
  .mr-q p { margin-bottom:12px; line-height:1.6; }
  .mr-avoid { margin-bottom:6px; }
  .mr-revisit { margin-top:24px; }
  .mr-list { margin-top:1.2rem; }
  .reading p.mr-key { line-height:1.65; margin-bottom:.9rem; }
}

.app { font-size: 1rem; }
:where(.app) h2 { font-size: clamp(1.5rem, 3.3vw, 2.3rem); font-weight: 800; }
:where(.app) h3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
:where(.app) .eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .2em;
  font-variation-settings: "opsz" 14, "SOFT" 20, "WONK" 0; }
:where(.app) .btn { font-size: .98rem; }
:where(.app) .btn-sm { font-size: .86rem; }
:where(.app) .seg button { font-size: .86rem; }
:where(.app) .field label { font-weight: 600; font-size: .82rem; }
:where(.app) .form-status { font-size: .92rem; }
:where(.app) .hint { font-size: .78rem; }
:where(.app) .charcount { font-size: .8rem; }
:where(.app) .ep-item h3 { font-weight: 800; font-size: 1.14rem; letter-spacing: -.005em; }
:where(.app) .ep-item p { font-size: .99rem; }
:where(.app) .ep-mark { font-weight: 800; font-size: .78rem; letter-spacing: .18em; }


@media (min-width:601px) and (max-width:880px){
  .main-inner { padding-left:2.4rem; padding-right:2.4rem; }
  .sec-head, .trailband { padding-left:3rem; padding-right:3rem; }
  .view > .backlink { margin-left:3rem; }
}
@media (min-width:881px) and (max-width:1279px){
  .main-inner { padding-left:3.5rem; padding-right:3.5rem; }
  .trailband::before { left:-2.5rem; right:-2.5rem; }
}

.nextbtn { border:0; border-radius:0; padding:calc(.72em + 1px) 1.4em calc(.72em + 1px) calc(1.4em + 2px);
  background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 46" preserveAspectRatio="none"%3E%3Cpath d="M1 1 L11 23 L1 45 H240 L259 23 L240 1 Z" fill="%23fff" fill-opacity=".12" stroke="%23fff" stroke-opacity=".28" stroke-width="1" stroke-linejoin="round" vector-effect="non-scaling-stroke"/%3E%3C/svg%3E') center / 100% 100% no-repeat; }
.nextbtn:hover { background-color:transparent; background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 46" preserveAspectRatio="none"%3E%3Cpath d="M1 1 L11 23 L1 45 H240 L259 23 L240 1 Z" fill="%23fff" fill-opacity=".2" stroke="%23fff" stroke-opacity=".28" stroke-width="1" stroke-linejoin="round" vector-effect="non-scaling-stroke"/%3E%3C/svg%3E'); }
.mtoggle { display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:rgba(0,0,0,.14); border:1px solid rgba(255,255,255,.16); }
.mtoggle button { display:inline-flex; align-items:center; gap:.45em; font:inherit; font-family:var(--font-ui);
  font-weight:700; font-size:.86rem; line-height:1.2; cursor:pointer; color:rgba(255,255,255,.8);
  background:transparent; border:1px solid transparent; border-radius:999px; padding:.55em 1.15em;
  transition:background .18s ease, color .18s ease; }
.mtoggle button:not(.on):hover { color:#fff; background:rgba(255,255,255,.08); }
.mtoggle .mt-off.on { color:var(--g-2); background:#fff; box-shadow:0 4px 12px rgba(0,32,28,.3); cursor:default; }
.mtoggle .mt-on.on { color:var(--done-ink); background:var(--done-bg); border-color:var(--done-brd); cursor:default; }
.mtoggle .mt-on svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; }
.mtoggle button:disabled { opacity:.45; cursor:not-allowed; }
.mtoggle button:disabled:hover { background:transparent; color:rgba(255,255,255,.8); }
.mtoggle button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
