:root{
  --ink:#0D0D0D;--fog:#5F5F5F;--fog-2:#8A8A8A;
  --panel:#F4F4F2;--panel-2:#F8F7F5;--line:rgba(13,13,13,.08);--line-2:rgba(13,13,13,.15);
  --green:#155E3B;--green-600:#0F4A2E;--green-tint:#E7F0EA;
  --dark:#14231B;--amber:#8A5A00;--amber-tint:#FBF1DC;
  --pos:#0B7A41;--pos-tint:#E3F3EA;--neg:#C93A3F;--neg-tint:#FBE9EA;
  --sans:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --gut:clamp(16px,4vw,40px);--max:1120px;
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--panel-2);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}

nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;display:flex;align-items:center;gap:20px;padding:10px var(--gut)}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;margin-right:auto}
.brand svg{width:22px;height:22px}
.nav-in a.l{font-size:14px;color:var(--fog);padding:6px 2px;border-bottom:2px solid transparent}
.nav-in a.l.on{color:var(--ink);border-bottom-color:var(--green)}
@media(max-width:520px){.nav-in{gap:12px}.nav-in a.l{font-size:13px}.nav-in a.spec{display:none}}

main{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:18px var(--gut) 28px;display:grid;gap:12px}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:6px 2px 2px}
.intro h1{font-size:clamp(26px,3.6vw,38px);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.intro h1 b{font-weight:500;color:var(--green)}
.intro p{color:var(--fog);font-size:15px;max-width:520px}

/* a scene: number + short title on the left, auto-playing visual on the right */
.scene{background:#fff;border:1px solid var(--line);border-radius:16px;display:grid;grid-template-columns:170px minmax(0,1fr);overflow:hidden}
.scene>header{padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.scene>header .n{font-family:var(--mono);font-size:12px;color:var(--fog)}
.scene>header h2{font-size:19px;font-weight:500;line-height:1.2}
.scene>header p{font-size:13px;color:var(--fog)}
.scene .viz{padding:16px;min-width:0}
@media(max-width:760px){.scene{grid-template-columns:minmax(0,1fr)}.scene>header{border-right:0;border-bottom:1px solid var(--line);padding:12px 14px;flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}.scene>header p{flex-basis:100%}.scene .viz{padding:12px}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}

.cap{font-family:var(--mono);font-size:12px;color:var(--fog);margin-top:8px;min-height:18px;transition:opacity .3s}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;padding:3px 8px;border-radius:100px;background:var(--panel);color:var(--fog);white-space:nowrap}
.chip.g{background:var(--pos-tint);color:var(--pos)}.chip.r{background:var(--neg-tint);color:var(--neg)}.chip.a{background:var(--amber-tint);color:var(--amber)}.chip.d{background:var(--ink);color:#fff}
.pop{opacity:0;transform:translateY(4px) scale(.98);transition:opacity .35s,transform .35s}
.pop.in{opacity:1;transform:none}
.bar{height:8px;border-radius:4px;background:var(--panel);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green);border-radius:4px;transition:width .6s ease}
.num{font-variant-numeric:tabular-nums}
svg text{font-family:var(--mono)}

.next{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.next{grid-template-columns:1fr}}
.next a{background:var(--dark);color:#fff;border-radius:16px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;font-weight:500}
.next a span{font-size:13px;font-weight:400;opacity:.7;display:block}
.next a:last-child{background:var(--green)}
footer{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut) 24px;font-family:var(--mono);font-size:11.5px;color:var(--fog);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer a{text-decoration:underline}

/* payoff chart */
.po{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:14px;align-items:center}
@media(max-width:640px){.po{grid-template-columns:minmax(0,1fr)}}
.two .po{grid-template-columns:minmax(0,1fr)}.two .po-side{display:flex;flex-wrap:wrap;gap:4px}.two .po-it{display:flex;gap:7px;white-space:nowrap}.two .po-it i{width:14px}

.po-ch svg{width:100%;height:auto;display:block}
.po-side{display:grid;gap:6px}
.po-it{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;font-size:13px;padding:7px 9px;border-radius:9px;border:1px solid transparent;transition:all .3s;opacity:.55}
.po-it.on{border-color:var(--line-2);background:var(--panel-2);opacity:1}
.po-it i{border-top:3px solid;display:block}
.po-it b{font-weight:500}
.po-it span{font-family:var(--mono);font-size:12.5px}

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

/* key terms + info */
u.t{text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--green);text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:help}
u.t:hover,u.t:focus{color:var(--green);outline:none}
.tipbox{position:fixed;z-index:300;display:none;background:var(--ink);color:#fff;font-size:13px;line-height:1.45;padding:10px 12px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.tipbox b{font-weight:600;margin-right:4px}
.info{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:4px;border:1px solid var(--line-2);background:#fff;border-radius:100px;padding:4px 10px 4px 5px;font:500 12px var(--sans);color:var(--ink);cursor:pointer}
.info span{width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:600 10.5px var(--mono)}
.info.on{background:var(--green-tint);border-color:var(--green)}
.infobox{background:var(--green-tint);border-left:3px solid var(--green);border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:14px;line-height:1.55}
.infobox p+p{margin-top:6px}
.infobox ul{margin:4px 0 0 18px}
@media(max-width:760px){.info{margin-top:0;margin-left:auto}}
.two .info{margin-left:auto;margin-top:0}
.brand{white-space:nowrap}
@media(max-width:420px){.brand{font-size:14px;gap:6px}.brand svg{width:18px;height:18px}.nav-in{gap:10px}.nav-in a.l{font-size:12.5px}}
/* thor-im-v1: photo frame with box overlay */
.frame{position:relative;border-radius:12px;overflow:hidden;background:var(--panel)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame svg{position:absolute;inset:0;width:100%;height:100%}
.frame .stamp{position:absolute;left:8px;bottom:8px}
.credit{font-family:var(--mono);font-size:10.5px;color:var(--fog-2);margin-top:6px}
.credit a{text-decoration:underline}