:root{
  --ink:#0f1311; --ink2:#161b18; --ink3:#1e2521; --line:#2b332e;
  --paper:#ece7da; --paper2:#e2dccb; --mute:#8f978f; --soft:#c3c7bd;
  --hi:#ef9a5f; --hi2:#ef9a5f; --cool:#8fb7c9; --good:#b9dc8a; --bad:#e2675a;
  --display:'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --body:'Satoshi', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#0b0e0d;color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:700}

/* ---------- top chrome ---------- */
.top{display:flex;align-items:center;gap:24px;padding:14px 28px;border-bottom:1px solid #1d2420;position:sticky;top:0;z-index:20;background:rgba(11,14,13,.92);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.mark{width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--hi) 0 50%, #3a443e 50% 100%)}
.parts{display:flex;gap:8px;flex:1;min-width:0}
.part{font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid #2a322d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part.this{background:var(--ink3);border-color:#39433d}
.part.this b{color:var(--hi);margin-right:6px}
.part.other{color:var(--soft);text-decoration:none;transition:.2s}
.part.other:hover{border-color:var(--soft);color:var(--paper)}
.part.other span{color:var(--mute)}
.actions{display:flex;align-items:center;gap:8px}
.lang{display:flex;border:1px solid #2a322d;border-radius:999px;padding:3px}
.lang button{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;color:var(--mute)}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.ghost{padding:8px 14px;border:1px solid #2a322d;border-radius:999px;font-size:13px;color:var(--soft)}
.ghost:hover{border-color:var(--soft);color:var(--paper)}
.solid{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;background:var(--hi);color:#1a120c}
.link{font-size:13px;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--paper)}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:1fr;gap:0;padding:22px 28px 60px;max-width:1500px;margin:0 auto}
.stage-wrap{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 205px);border-radius:18px;overflow:hidden;background:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px #222a26;cursor:pointer;user-select:none;margin:0 auto}
.frame{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:50% 50%}
.transport{display:flex;align-items:center;gap:20px;padding:14px 4px}
.counter{font-size:13px;color:var(--mute);white-space:nowrap;min-width:150px}
.counter b{color:var(--paper)}
.stepc{color:var(--hi)}
.progress{flex:1;display:flex;gap:3px;align-items:center}
.progress button{flex:1;height:4px;border-radius:2px;background:#2a322d;transition:.25s}
.progress button.is-ch{height:10px}
.progress button.done{background:#56625a}
.progress button.cur{background:var(--hi)}
.progress button:hover{background:var(--soft)}
.arrows{display:flex;gap:8px}
.arrows button{width:44px;height:44px;border-radius:50%;border:1px solid #2a322d;font-size:18px}
.arrows .solid{border:0}
.arrows .exit{width:auto;display:none}
.below{display:flex;justify-content:space-between;gap:20px;color:#a3aca5;font-size:12.5px;line-height:1.5;padding:2px 4px 24px}
.below div{display:flex;gap:18px}

/* notes */
.notes{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;border-top:1px solid #1f2622;padding-top:26px}
body.notes-closed .notes{display:none}
.n-main h2{font-family:var(--display);font-size:26px;letter-spacing:-.02em;margin:8px 0 14px;font-weight:700}
.n-text p{font-size:17px;line-height:1.65;color:#d9dcd3;margin-bottom:12px;max-width:72ch}
.n-bridge{margin-top:18px;border-left:2px solid var(--hi);padding:4px 0 4px 16px}
.n-bridge p{margin-top:6px;font-size:16px;color:var(--paper);font-style:normal}
.n-side{background:var(--ink2);border:1px solid #1f2622;border-radius:14px;padding:20px;align-self:start}
.n-side p{font-size:14px;line-height:1.6;color:var(--soft);margin:8px 0 20px}
.n-src{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.n-src a{font-size:13px;color:var(--paper);text-underline-offset:3px}
.n-src small{display:block;font-size:12px;color:var(--mute);margin-top:2px;line-height:1.45}

/* presenter view */
.pv{display:none}
body[data-mode="presenter"] .layout{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);grid-template-rows:auto 1fr;max-width:none;column-gap:26px}
body[data-mode="presenter"] .stage-col{grid-column:1;grid-row:1 / span 2}
body[data-mode="presenter"] .pv{display:flex;flex-direction:column;gap:22px;grid-column:2;grid-row:1;background:var(--ink2);border:1px solid #1f2622;border-radius:14px;padding:20px}
body[data-mode="presenter"] .notes{grid-column:2;grid-row:2;grid-template-columns:1fr;border:0;padding-top:18px;display:grid}
body[data-mode="presenter"] .n-text p{font-size:19px}
body[data-mode="presenter"] .n-side{display:none}
body[data-mode="presenter"] .below{display:none}
.pv-row{display:flex;justify-content:space-between;align-items:flex-end}
.pv-timer{font-family:var(--display);font-size:54px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pv-next{font-size:17px;margin-top:6px;color:var(--paper);line-height:1.4}
.pv-beats{display:flex;flex-direction:column;gap:6px}
.pb{font-size:14px;color:var(--mute);line-height:1.4}
.pb.done{color:#6b756e;text-decoration:line-through}
.pb.cur{color:var(--hi)}

/* present (immersive) */
body[data-mode="present"]{overflow:hidden}
body[data-mode="present"] .top, body[data-mode="present"] .below, body[data-mode="present"] .notes{display:none}
body[data-mode="present"] .layout{padding:0;max-width:none;height:100vh;display:flex;flex-direction:column}
body[data-mode="present"] .stage-col{flex:1;display:flex;flex-direction:column;min-height:0}
body[data-mode="present"] .stage-wrap{flex:1;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none;background:#000}
body[data-mode="present"] .transport{position:fixed;bottom:0;left:0;right:0;padding:10px 18px;opacity:0;transition:.3s;background:linear-gradient(transparent,rgba(0,0,0,.75))}
body[data-mode="present"] .transport:hover{opacity:1}
body[data-mode="present"] .arrows .exit{display:inline-block}
@media (hover:none){ body[data-mode="present"] .transport{opacity:1} }

/* overview */
.overview{margin:auto;width:min(1200px,94vw);max-height:88vh;background:var(--ink2);color:var(--paper);border:1px solid #2a322d;border-radius:18px;padding:34px;overflow:auto}
.overview::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.ov-close{position:sticky;top:0;float:right;font-size:28px;color:var(--mute)}
.ov-body h2{font-family:var(--display);font-size:34px;letter-spacing:-.02em;margin-bottom:20px}
.ov-body h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--hi);margin:22px 0 10px}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ov-grid button{text-align:left;padding:14px;border:1px solid #2a322d;border-radius:12px;background:var(--ink);min-height:96px;display:flex;flex-direction:column;gap:8px;transition:.2s}
.ov-grid button:hover,.ov-grid button.cur{border-color:var(--hi)}
.ov-grid span{font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.ov-grid b{font-family:var(--display);font-size:17px;line-height:1.15;letter-spacing:-.01em}
.flash{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--paper);color:var(--ink);padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.3s}
.flash.on{opacity:1}

/* ======================= SLIDE (1600×900 canvas) ======================= */
.slide{position:absolute;inset:0;overflow:hidden;background:var(--ink);color:var(--paper)}
.slide.tone-paper{background:var(--paper);color:#151a17}
.slide .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 600px at 82% 40%, color-mix(in srgb, var(--hi) 13%, transparent), transparent 70%)}
.slide.tone-paper .glow{background:radial-gradient(900px 600px at 82% 40%, color-mix(in srgb, var(--hi) 22%, transparent), transparent 70%)}
.slide::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.slide .bg{position:absolute;inset:0;overflow:hidden}
.slide .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.slide .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--ink) 0%, rgba(15,19,17,.94) 34%, rgba(15,19,17,.55) 62%, rgba(15,19,17,.25) 100%), linear-gradient(0deg, rgba(15,19,17,.85), transparent 30%)}
.slide .copy{position:absolute;left:110px;top:118px;width:690px;z-index:3}
.layout-center .copy{left:200px;right:200px;width:auto;top:50%;transform:translateY(-50%);text-align:center}
.layout-wide .copy{width:1100px}
.eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.slide .eyebrow{font-size:16px;letter-spacing:.2em;color:#9aa39a}
.slide.tone-paper .eyebrow{color:#5f665f}
.kind{font-size:13px;font-weight:700;letter-spacing:.16em;padding:6px 12px;border-radius:999px;border:1.5px solid currentColor;color:var(--hi)}
.kind-research{color:var(--cool)} .kind-myth{color:var(--bad)} .kind-story{color:var(--hi)} .kind-example{color:var(--good)} .kind-framework{color:#d6c48e} .kind-exercise{color:#e7a8d1} .kind-bridge{color:var(--paper)}
.tone-paper .kind-research{color:#2f6c84} .tone-paper .kind-story{color:#b4532a} .tone-paper .kind-example{color:#4c7a25} .tone-paper .kind-framework{color:#8a6a1c} .tone-paper .kind-myth{color:#b03a2e}
.slide h1{font-family:var(--display);font-weight:800;font-size:92px;line-height:.96;letter-spacing:-.04em}
.slide h1 em{font-style:normal;color:var(--hi)}
.slide.tone-paper h1 em{color:color-mix(in srgb, var(--hi) 70%, #3a1a08)}
.slide .sub{margin-top:30px;font-size:27px;line-height:1.45;color:#c5cabf;max-width:640px}
.slide.tone-paper .sub{color:#3d443f}
.slide .sub b{color:var(--paper);font-weight:700}
.slide.tone-paper .sub b{color:#111}
.beats{margin-top:40px;max-width:650px}
.beat-rail{display:flex;gap:8px;margin-bottom:16px}
.beat-rail i{width:34px;height:4px;border-radius:2px;background:#323b35;transition:.4s}
.tone-paper .beat-rail i{background:#cfc8b6}
.beat-rail i.on{background:var(--hi)}
.beat{font-size:29px;line-height:1.38;color:var(--paper);min-height:2.8em;font-weight:500}
.tone-paper .beat{color:#151a17}
.beat b{color:var(--hi)}
.scene{position:absolute;right:70px;top:90px;width:720px;height:700px;z-index:2}
.layout-wide .scene, .layout-full .scene{left:0;right:0;top:0;width:1600px;height:900px}
.layout-chapter .copy{top:auto;bottom:150px;left:110px;width:1100px}
.layout-chapter h1{font-size:128px}
.chapter-num{position:absolute;right:80px;top:20px;font-family:var(--display);font-weight:800;font-size:640px;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px color-mix(in srgb, var(--hi) 55%, transparent);z-index:1}
.slide-foot{position:absolute;left:110px;right:70px;bottom:44px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;z-index:4;font-size:15px;color:#7d867e}
.tone-paper .slide-foot{color:#6c726b}
.refs{display:flex;flex-wrap:wrap;gap:8px;max-width:1050px}
.refs a{text-decoration:underline;text-underline-offset:3px;color:inherit}
.refs a:hover{color:var(--hi)}
.pg{white-space:nowrap}
.pg b{color:var(--paper)} .tone-paper .pg b{color:#151a17}
.chap{margin-left:14px;letter-spacing:.14em;text-transform:uppercase;font-size:12px}

/* SVG primitives */
.scene svg{width:100%;height:100%;overflow:visible}
.scene text{font-family:var(--body);fill:currentColor}
.t-xs{font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;fill:#8f978f}
.tone-paper .t-xs{fill:#6c726b}
.t-s{font-size:20px;font-weight:500}
.t-m{font-size:28px;font-weight:700}
.t-l{font-family:var(--display);font-size:56px;font-weight:800;letter-spacing:-.03em}
.t-xl{font-family:var(--display);font-size:120px;font-weight:800;letter-spacing:-.04em}
.t-xxl{font-family:var(--display);font-size:200px;font-weight:800;letter-spacing:-.05em}
.hi{fill:var(--hi);color:var(--hi)}
.st-hi{stroke:var(--hi)}
.dim{opacity:.35}
.card{fill:var(--ink3);stroke:#38423c;stroke-width:1.5}
.tone-paper .card{fill:#f6f2e8;stroke:#cfc8b6}
.html-layer{position:absolute;inset:0}
.chip{position:absolute;padding:14px 20px;border-radius:14px;background:var(--ink3);border:1.5px solid #3a443e;font-size:22px;font-weight:600;white-space:nowrap}
.tone-paper .chip{background:#f7f3e9;border-color:#cdc6b3}

@media (max-width: 900px){
  .top{flex-wrap:wrap;padding:12px 16px;gap:10px}
  .parts{order:3;flex-basis:100%;overflow-x:auto}
  .actions{margin-left:auto}
  #btn-presenter{display:none}
  .layout{padding:14px 12px 40px}
  .stage-wrap{border-radius:12px}
  .notes{grid-template-columns:1fr}
  .counter{min-width:auto}
  .below{flex-direction:column}
  .n-text p{font-size:16px}
}
@media (max-width:520px){
  .brand #series-title{display:none}
  .ghost{padding:7px 10px;font-size:12px}
  .arrows button{width:40px;height:40px}
  .transport{gap:10px}
}

/* ======================= scene components (HTML layer, canvas px) ======================= */
.html-layer > div{position:absolute}
.tone-paper .html-layer{color:#151a17}
.cc{display:flex;gap:22px;align-items:center;padding:20px 26px;border-radius:18px;background:var(--ink3);border:1.5px solid #343d38}
.tone-paper .cc{background:#f7f3e9;border-color:#d4cdb9}
.cc-n{font-family:var(--display);font-weight:800;font-size:34px;color:var(--hi);min-width:46px}
.cc-a{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.05}
.cc-b{font-size:19px;color:#aab1a7;margin-top:6px;line-height:1.35}
.tone-paper .cc-b{color:#525a53}
.cc-c{margin-left:auto;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:right;max-width:200px}
.rw-noun{font-family:var(--display);font-weight:800;font-size:110px;letter-spacing:-.04em;line-height:1;padding:10px 0}
.rw-noun span{position:relative}
.rw-noun i{position:absolute;left:-10px;right:-10px;top:56%;height:12px;background:var(--bad);border-radius:6px;transform:scaleX(0);transform-origin:left;display:block}
.rw-noun{display:inline-block}
.rw-noun{position:absolute}
.rw-q{padding:10px 18px;border-radius:999px;border:1.5px dashed #6a746c;color:#aab1a7;font-size:22px}
.rw-act{display:flex;gap:18px;align-items:center;width:700px;padding:20px 26px;border-radius:18px;background:var(--ink3);border:1.5px solid color-mix(in srgb,var(--good) 50%,transparent)}
.tone-paper .rw-act{background:#f7f3e9}
.rw-act b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--good);color:#132010;font-size:22px;flex:none}
.rw-t{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.015em;line-height:1.1}
.rw-m{font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.tab{padding:8px 14px;border-radius:10px 10px 4px 4px;background:#26302b;border:1px solid #3c4740;font-size:16px;color:#cfd3c9;white-space:nowrap;box-shadow:0 10px 20px -10px #000}
.ram,.inbox{padding:22px 24px;border-radius:18px;background:var(--ink3);border:1.5px solid #3c4740;width:320px}
.ram-l{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;font-weight:700}
.ram-s{display:flex;gap:10px}.ram-s i{flex:1;height:58px;border-radius:10px;background:#2c3530;display:block}
.ib{font-size:19px;padding:5px 0;color:#d9dcd3}.ib.more{color:var(--mute)}
.pl{display:flex;gap:22px;align-items:center;width:600px;padding:18px 24px;border-radius:18px;background:var(--ink3);border:1.5px solid #343d38}
.pl-n{width:52px;height:52px;border-radius:50%;border:2px solid var(--hi);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:24px;color:var(--hi);flex:none}
.pl-a{font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:-.02em}
.pl-b{font-size:18px;color:#aab1a7;margin-top:4px}
.note-chip{padding:14px 20px;border-radius:14px;background:rgba(20,26,23,.88);border:1.5px solid #3c4740;font-size:21px;line-height:1.35;max-width:680px;backdrop-filter:blur(6px)}
.note-chip.big{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.02em;border-color:var(--hi);color:var(--paper)}
.note-chip.warn{border-color:var(--bad)}
.tone-paper .note-chip{background:#f7f3e9;border-color:#cfc8b6;color:#151a17}
.paper{width:430px;padding:30px 34px 34px;background:#efe6d2;color:#2a2017;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);transform:rotate(-2deg);font-family:'Satoshi',serif}
.paper-h{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:#7a6650;margin-bottom:16px;font-weight:700}
.pl6{font-size:22px;padding:7px 0;border-bottom:1px solid #d6c9ad;font-style:italic}
.pl6 b{font-style:normal;color:#9b4b22;margin-right:6px}
.cheque{width:440px;padding:22px 26px;background:linear-gradient(135deg,#dfe9d6,#c9d8bd);color:#1f2a1b;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);transform:rotate(3deg)}
.cq-a{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#4b5d41}
.cq-b{font-family:var(--display);font-weight:800;font-size:58px;letter-spacing:-.02em;margin:6px 0}
.cq-c{font-size:16px;color:#4b5d41}
.stamp{padding:12px 20px;border:4px solid var(--bad);color:var(--bad);font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.06em;text-transform:uppercase;border-radius:10px;transform:rotate(-12deg);background:rgba(15,19,17,.6);max-width:300px;text-align:center;line-height:1.1}
.stamp.big{font-size:40px;border-color:var(--hi);color:var(--hi);max-width:420px}
.l6{display:flex;align-items:center;gap:22px;width:700px;height:86px;padding:0 26px;border-radius:16px;background:var(--ink3);border:1.5px solid #343d38}
.l6-n{font-family:var(--display);font-weight:800;font-size:34px;color:var(--hi);width:34px}
.l6-t{font-size:26px;font-weight:600;flex:1}
.l6-c{width:44px;height:44px;border-radius:50%;background:var(--good);color:#132010;display:grid;place-items:center;font-weight:800;font-size:22px;opacity:0;transform:scale(.3)}
.srt{display:flex;align-items:center;gap:14px;width:700px;height:56px;padding:0 20px;border-radius:12px;background:var(--ink3);border:1.5px solid #343d38;font-size:21px}
.srt-t{flex:1;font-weight:600}
.srt-s{font-size:16px;color:var(--hi);letter-spacing:.06em;opacity:0;font-weight:700;width:150px}
.srt-tag{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);opacity:0;width:110px;text-align:right}
.srt-h{display:flex;gap:14px;width:700px;padding:0 20px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.srt-h span:first-child{flex:1}.srt-h span:nth-child(2){width:150px}.srt-h span:nth-child(3){width:110px;text-align:right}
.tier{padding:18px 22px;border-radius:18px;background:var(--ink3);border:1.5px solid #343d38}
.tone-paper .tier{background:#f7f3e9;border-color:#d4cdb9}
.tier-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.tier-h b{font-family:var(--display);font-size:30px;letter-spacing:-.02em}
.tier-h span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tier-s{display:flex;gap:10px}.tier-s i{flex:1;height:38px;border-radius:10px;background:#2c3530;display:block}
.tone-paper .tier-s i{background:#e1dac7}
.refl{width:230px;padding:14px 16px;border-radius:14px;border:1.5px dashed var(--hi);font-size:18px;line-height:1.35}
.win{display:flex;gap:16px;align-items:center;width:350px;padding:18px 20px;border-radius:16px;background:var(--ink3);border:1.5px solid var(--good)}
.win b{width:42px;height:42px;border-radius:50%;background:var(--good);color:#132010;display:grid;place-items:center;font-size:20px;flex:none}
.win-a{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.1}
.win-b{font-size:15px;color:var(--mute);margin-top:4px;letter-spacing:.06em}
.bcol{width:330px;height:580px;border-radius:22px;border:1.5px solid #3c4740;background:rgba(30,37,33,.6);padding:24px}
.bcol.auto{border-color:color-mix(in srgb,var(--hi) 55%,transparent)}
.bcol-h{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em}
.bcol-h span{display:block;font-family:var(--body);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:6px;font-weight:700}
.batt{position:absolute;right:24px;top:28px;width:34px;height:64px;border:3px solid var(--paper);border-radius:8px;display:flex;align-items:flex-end;padding:3px}
.batt i{display:block;width:100%;height:90%;background:var(--bad);border-radius:3px}
.gauge{position:absolute;right:24px;top:20px;font-family:var(--display);font-size:60px;color:var(--hi);line-height:1}
.bchip{width:290px;padding:14px 18px;border-radius:12px;background:var(--ink3);border:1.5px solid #3c4740;font-size:20px;font-weight:600}
.bq{width:720px;font-size:22px;line-height:1.4;color:var(--soft);border-left:3px solid var(--hi);padding-left:18px}
.mrow{display:flex;align-items:center;gap:24px;width:700px;height:104px;padding:0 28px;border-radius:18px;background:rgba(30,37,33,.75);border:1.5px solid #3c4740;backdrop-filter:blur(6px)}
.mrow-n{font-family:var(--display);font-weight:800;font-size:46px;color:var(--hi);width:40px}
.mrow-t{font-size:30px;font-weight:600}
.dchip{padding:16px 22px;border-radius:14px;background:rgba(30,37,33,.85);border:1.5px solid #3c4740;font-size:22px;font-weight:600;backdrop-filter:blur(6px)}
.dkeep{width:700px;font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.02em;color:var(--paper)}
.cal{width:360px;border-radius:18px;background:var(--ink3);border:1.5px solid #343d38;overflow:hidden}
.cal-r{display:flex;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #2c3530;font-size:21px}
.cal-r b{color:var(--hi);font-weight:700}
.reps{width:320px;text-align:center}
.reps-n{font-family:var(--display);font-weight:800;font-size:220px;line-height:1;letter-spacing:-.05em}
.reps-d{display:flex;gap:12px;justify-content:center;margin:14px 0}.reps-d i{width:30px;height:30px;border-radius:50%;background:#2c3530;display:block}
.reps-l{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.rule{width:720px;padding:22px 26px;border-radius:18px;border:1.5px solid var(--hi);font-size:26px;line-height:1.35;font-weight:600}
.tone-paper .rule{color:#151a17}
.blk{width:560px;padding:22px 26px;border-radius:18px;background:var(--ink3);border:1.5px solid color-mix(in srgb,var(--hi) 60%,transparent)}
.tone-paper .blk{background:#f7f3e9}
.blk.anchor{border-color:#5d6a62;border-style:dashed}
.blk-a{font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:-.02em}
.blk-b{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:6px;font-weight:700}
.cgrid{display:grid;grid-template-columns:repeat(7,90px);gap:12px}
.cgrid i{position:relative;height:66px;border-radius:12px;background:#28302b;display:block;overflow:hidden}
.tone-paper .cgrid i{background:#ddd6c3}
.cgrid i b{position:absolute;inset:0;background:var(--hi);opacity:0;transform:scale(.6);border-radius:12px}
.cgrid i.miss b{background:transparent;border:2.5px dashed var(--bad)}
.cgrid i span{position:absolute;left:10px;top:8px;font-size:14px;color:#8f978f;z-index:1}
.score{width:700px}
.sc-l,.lt-h{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.sc-n{font-family:var(--display);font-weight:800;font-size:230px;line-height:.95;letter-spacing:-.05em}
.years{display:flex;flex-direction:column;gap:10px}
.years span{font-size:22px;padding:8px 16px;border-left:3px solid var(--hi);background:rgba(30,37,33,.6)}
.letter{width:380px;padding:26px 30px;background:#efe6d2;color:#2a2017;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.letter .lt-h{color:#7a6650}
.lt-n{font-family:var(--display);font-weight:800;font-size:120px;line-height:1;letter-spacing:-.04em;color:#9b2c1f;margin:6px 0}
.lt-f{font-size:16px;color:#5b4a38;line-height:1.4}
.fog{width:3000px;height:1300px;background:radial-gradient(closest-side,rgba(180,210,215,.25),rgba(120,150,160,.75));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.strokes{width:340px;text-align:right}
.st-l{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);font-weight:700}
.st-n{font-family:var(--display);font-weight:800;font-size:230px;line-height:1;letter-spacing:-.05em;color:var(--hi)}
.rcp{display:flex;flex-direction:column;gap:10px;width:720px;padding:22px 28px;border-radius:18px;background:var(--ink3);border:1.5px solid #3c4740}
.rcp-a{font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.rcp-b{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--paper)}
.next-part{position:absolute;right:0;bottom:-10px;padding:20px 30px;border-radius:999px;background:var(--hi);color:#1a120c;font-weight:800;font-size:24px;text-decoration:none;z-index:5;box-shadow:0 20px 50px -20px var(--hi)}
.next-part span{margin-left:8px}

.n-rh{margin-top:22px;border:1px dashed color-mix(in srgb,var(--hi) 55%,transparent);border-radius:14px;padding:16px 18px;background:color-mix(in srgb,var(--hi) 6%,transparent)}
.n-rh[hidden]{display:none}
.n-rh ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.n-rh li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:14px;font-size:14px;line-height:1.55;color:var(--soft)}
.n-rh li b{color:var(--hi);font-weight:700}
@media (max-width:700px){.n-rh li{grid-template-columns:1fr;gap:2px}}