/* DC2 demo page: the intro card, three stages, eight report styles and the guide layer.
   Loaded after styles.css. The demo frame has its own tokens (day/night, four color themes). */
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400 500;font-display:swap}
:root{--fg:var(--ink);--card:#ffffff;--serif:"Source Serif 4",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.demo-top .wrap{padding-block:calc(var(--navh) + 32px) 20px}
.demo-top h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(42px,6.4vw,88px);line-height:.93;margin:.12em 0 .2em}
.demo-top p.lede2{margin:0;max-width:62ch;color:#3a373c}
.demo-wrap{max-width:1360px;margin:0 auto;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));padding-bottom:48px}
.frame input,.frame select,.frame textarea{font-size:15px}
.frame .slicers select{min-height:38px;border-color:var(--r-line);color:var(--r-fg);background:var(--r-card)}
.calc input[type=range]{border:0;min-height:0;padding:0;background:none}
.frame form{gap:12px}
.frame h3{text-wrap:balance}
.drawer .msg.err{color:#b3261e}
.frame[data-mode="night"] .drawer .msg.err{color:#ff8a80}
/* ---------- the demo frame (its own world: day/night + brand colors) ---------- */
.frame{
  --r-bg:#ffffff; --r-fg:#121014; --r-muted:#5f5a63; --r-line:#e3dfe6; --r-soft:#f6f3f7; --r-card:#ffffff; --r-ink2:#2b2830;
  --c1:#e8590c; --c1t:#b8430a; --c1s:#f6b48a; --c1l:#fde8da; --c3:#8a8590;
  position:relative;border:1px solid var(--line);background:var(--r-bg);color:var(--r-fg);overflow:clip;
}
.frame[data-pal="harbor"]{--c1:#1f63c6;--c1t:#1a55aa;--c1s:#8fb4ea;--c1l:#e1ebfa}
.frame[data-pal="forest"]{--c1:#2f7a56;--c1t:#276548;--c1s:#8cc5a6;--c1l:#e0f0e7}
.frame[data-pal="plum"]{--c1:#8a3f9b;--c1t:#7a3589;--c1s:#cfa1d9;--c1l:#f3e5f6}
.frame[data-mode="night"]{--r-bg:#0f1014;--r-fg:#eeedf2;--r-muted:#a3a0ab;--r-line:#2a2b33;--r-soft:#171820;--r-card:#15161d;--r-ink2:#d8d6de;--c3:#6f6c78;color-scheme:dark}
.frame[data-mode="night"]{--c1t:var(--c1s)}
.frame[data-mode="night"][data-pal="ember"]{--c1:#f0702a}
.frame[data-mode="night"] .r-pdf .paper{filter:brightness(.92)}
.shell{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 14px;background:#0d0d0d;color:#fff;font-family:var(--label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.shell .brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.shell .brand svg{height:20px;width:34px;fill:#fff;flex:0 0 auto}
.shell .brand span{color:#b9b4bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stages{display:flex;border:1px solid #3b383e}
.stages button{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;background:none;border:0;border-right:1px solid #3b383e;color:#cfcbd3;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.stages button:last-child{border-right:0}
.stages button i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid currentColor;font-size:11px}
.stages button[aria-pressed="true"]{background:#fff;color:#0d0d0d}
.stages button:hover:not([aria-pressed="true"]){color:#fff;background:#222}
.tools{display:flex;align-items:center;gap:8px}
.tbtn{min-height:40px;padding:6px 12px;border:1px solid #3b383e;background:none;color:#fff;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;align-items:center;gap:6px}
.tbtn[aria-pressed="true"]{border-color:var(--c1);box-shadow:inset 0 -3px 0 var(--c1)}
.tbtn:hover{background:#222}
.cta-btn{min-height:40px;padding:6px 14px;border:1px solid var(--c1);background:var(--c1);color:#0d0d0d;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.frame:not([data-pal="ember"]) .cta-btn{color:#fff}
.cta-btn:hover{background:#fff;border-color:#fff;color:#0d0d0d}
.subbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 14px;border-bottom:1px solid var(--r-line);background:var(--r-soft);font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--r-muted)}
.subbar[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;overflow-x:auto;scrollbar-width:thin;max-width:100%;padding-bottom:2px}
.chips button{flex:0 0 auto;min-height:36px;padding:4px 12px;border:1px solid var(--r-line);background:var(--r-card);color:var(--r-fg);cursor:pointer;font:inherit;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;gap:6px;align-items:center}
.chips button small{font-size:11px;color:var(--r-muted);letter-spacing:.04em}
.chips button[aria-pressed="true"]{border-color:var(--r-fg);background:var(--r-fg);color:var(--r-bg)}
.chips button[aria-pressed="true"] small{color:inherit;opacity:.75}
.sw{display:flex;gap:6px;align-items:center}
.sw button{width:28px;height:28px;border:2px solid var(--r-card);outline:1px solid var(--r-line);cursor:pointer;padding:0}
.sw button[aria-pressed="true"]{outline:2px solid var(--r-fg)}
.body{position:relative;min-height:620px}
/* Full screen: the frame fills the screen and the report scrolls inside it. */
.frame:fullscreen,.frame.immersive{width:100vw;height:100vh;height:100dvh;border:0;display:flex;flex-direction:column}
.frame.immersive{position:fixed;inset:0;z-index:100;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.frame:fullscreen .body,.frame.immersive .body{flex:1 1 auto;min-height:0;overflow:auto}
.frame:fullscreen .sticky,.frame.immersive .sticky{top:12px}
.frame:fullscreen .s-st .sticky,.frame.immersive .s-st .sticky{top:0}
.frame:fullscreen .view,.frame.immersive .view{max-width:1400px;margin:0 auto}
html.lock{overflow:hidden}
/* Compact dropdowns for style and colors */
.subbar{flex-wrap:wrap;gap:8px 10px}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 12px;border:1px solid var(--r-line);background:var(--r-card);color:var(--r-fg);cursor:pointer;font-family:var(--label);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.dd-btn small{font-size:11px;letter-spacing:.14em;color:var(--r-muted)}
.dd-btn i{font-style:normal;font-size:11px;transition:transform .2s}
.dd.open .dd-btn{border-color:var(--r-fg)}.dd.open .dd-btn i{transform:rotate(180deg)}
.dd-btn:hover{border-color:var(--r-fg)}
.dot{display:inline-block;width:14px;height:14px;background:var(--c1);flex:0 0 auto}
.dd-list{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:min(340px,calc(100vw - 32px));background:var(--r-card);border:1px solid var(--r-fg);box-shadow:0 18px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.dd-list.narrow{width:220px}
.dd.open .dd-list{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.dd-list button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:44px;padding:6px 14px;border:0;background:none;color:var(--r-fg);cursor:pointer;text-align:left;font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.dd-list button small{font-size:11px;letter-spacing:.1em;color:var(--r-muted)}
.dd-list button .n{font-family:var(--display);font-weight:400;font-size:18px;color:var(--c1t);width:18px}
.dd-list button .d{grid-column:2/4;font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:0;text-transform:none;color:var(--r-muted);margin-top:-2px}
.dd-list button:hover,.dd-list button:focus-visible{background:var(--r-soft)}
.dd-list button[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--c1);background:var(--r-soft)}
.dd-list .grp{padding:8px 14px 2px;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--r-muted)}
.sb-hint{font-size:12px;letter-spacing:.12em;margin-right:auto}
.fs-btn{margin-left:auto}
@media (prefers-reduced-motion:reduce){.dd-list,.dd-btn i{transition:none}}
@media (max-width:640px){.sb-hint{display:none}.fs-l{display:none}.dd-btn{padding:4px 10px}}
.view{padding:clamp(16px,3vw,36px);animation:viewin .5s cubic-bezier(.2,.7,.2,1)}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.guide-list{position:sticky;margin:0 12px 12px auto;bottom:12px;z-index:6;width:min(290px,calc(100% - 24px));max-height:min(46vh,340px);overflow:auto;background:var(--r-card);border:1px solid var(--r-fg);box-shadow:0 18px 40px rgba(0,0,0,.18);font-size:14px}
.guide-list[hidden]{display:none}
.guide-list.min{width:max-content;overflow:visible}.guide-list.min ol{display:none}
.guide-list .gl-t{border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;min-height:32px;padding:0}
.guide-list .gl-t:hover{color:var(--r-fg)}
.guide-list header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 6px 12px;font-family:var(--label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--r-muted)}
.guide-list header button{border:0;background:none;color:var(--r-fg);cursor:pointer;min-width:32px;min-height:32px;font-size:16px}
.guide-list ol{list-style:none;margin:0;padding:0 0 6px}
.guide-list li button{display:grid;grid-template-columns:24px 1fr;gap:8px;width:100%;text-align:left;padding:7px 12px;border:0;background:none;cursor:pointer;color:var(--r-fg);line-height:1.35}
.guide-list li button:hover,.guide-list li button:focus-visible{background:var(--r-soft)}
.guide-list b{font-family:var(--label);letter-spacing:.06em;text-transform:uppercase;font-size:13px;display:block}
.gm,.guide-list li i{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--c1);color:#0d0d0d;font:700 12px/1 var(--label);font-style:normal}
.frame:not([data-pal="ember"]) .gm,.frame:not([data-pal="ember"]) .guide-list li i{color:#fff}
.gm{position:absolute;z-index:5;border:0;cursor:help;box-shadow:0 0 0 3px var(--r-bg);animation:gpop .4s cubic-bezier(.2,.9,.3,1.4) both}
.gm::after{content:"";position:absolute;inset:-5px;border:1px solid var(--c1);animation:ping 2.2s ease-out infinite}
@keyframes gpop{from{transform:scale(0)}to{transform:none}}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.hl{outline:2px solid var(--c1)!important;outline-offset:4px;transition:outline-color .3s}
#tip{position:fixed;z-index:50;max-width:280px;pointer-events:none;background:#0d0d0d;color:#fff;padding:8px 10px;font-size:13px;line-height:1.4;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;box-shadow:0 10px 30px rgba(0,0,0,.25)}
#tip.on{opacity:1;transform:none}
#tip b{display:block;font-family:var(--label);letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:#f6b48a;margin-bottom:2px}
[data-src]{cursor:help}
.srcdot{border-bottom:1px dotted currentColor}

/* ---------- intro card (overlay) ---------- */
.intro{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;padding:clamp(10px,3vw,36px);background:rgba(13,13,13,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .6s,visibility 0s .6s}
.intro.gone{opacity:0;visibility:hidden}
.icard{width:min(980px,100%);max-height:100%;background:#fff;color:#0d0d0d;border:1px solid #0d0d0d;box-shadow:0 30px 80px rgba(0,0,0,.35);display:flex;flex-direction:column}
.icard header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #e3dfe6;font-family:var(--label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:#5f5a63}
.icard header .ctrl{display:flex;gap:6px}
.icard header button{min-height:34px;padding:4px 10px;border:1px solid #cfcbd3;background:#fff;color:#0d0d0d;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.icard header button:hover{border-color:#0d0d0d}
.stage-svg{display:block;width:100%;height:100%;max-height:100%;background:#fbfafc}
.icap{position:relative;min-height:64px;padding:12px 16px 14px;border-top:1px solid #e3dfe6}
.icap p{position:absolute;inset:12px 16px auto;margin:0;font-size:clamp(16px,1.8vw,20px);opacity:0}
.icap p b{font-family:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:#b8430a;display:block}
.ibar{height:3px;background:#efecf1}.ibar i{display:block;height:100%;background:#e8590c;transform-origin:0 50%;transform:scaleX(0)}
.istart{position:absolute;left:50%;bottom:22%;transform:translate(-50%,10px);opacity:0;pointer-events:none;min-height:48px;padding:10px 22px;border:1px solid #0d0d0d;background:#e8590c;color:#0d0d0d;font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:opacity .5s,transform .5s}
.istart.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.svgwrap{position:relative;flex:1 1 auto;min-height:0;background:#fbfafc}
/* scene animations: they only run while the card has .play */
.intro svg .a,.intro svg .a2{transform-box:fill-box;transform-origin:50% 50%}
.play .a{animation:var(--an) var(--du,.6s) cubic-bezier(.2,.7,.2,1) var(--de,0s) both}
.play .a2{animation:var(--an) var(--du,.6s) cubic-bezier(.2,.7,.2,1) var(--de,0s) both,fadeout .5s ease var(--out) forwards}
.play .icap p{animation:cap var(--du) ease var(--de) both}
.play .ibar i{animation:barfill 28s linear both}
.paused *, .paused .ibar i{animation-play-state:paused!important}
.a,.a2{opacity:0}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-40px) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeout{to{opacity:0}}
@keyframes scan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1;transform:translateY(196px)}100%{opacity:0;transform:translateY(196px)}}
@keyframes chip{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.35)}to{opacity:1;transform:none}}
@keyframes draw{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes rise{from{opacity:1;transform:scaleY(0)}to{opacity:1;transform:none}}
@keyframes pdfmove{from{opacity:1;transform:none}to{opacity:1;transform:translate(-262px,30px) scale(.62)}}
@keyframes cap{0%{opacity:0;transform:translateY(6px)}10%{opacity:1;transform:none}88%{opacity:1}100%{opacity:0}}
@keyframes barfill{to{transform:scaleX(1)}}
@keyframes segin2{from{opacity:1;stroke-dasharray:0 100}to{opacity:1}}
.intro .rise{transform-origin:50% 100%}
.intro .draw{stroke-dasharray:1;stroke-dashoffset:1}
@media (prefers-reduced-motion:reduce){.play .a,.play .a2,.play .icap p,.play .ibar i{animation:none}.a,.a2{opacity:1}.a2.final-hide{opacity:0}.intro .draw{stroke-dashoffset:0}.icap p{position:static;opacity:1;margin-bottom:6px}.icap p.rm-hide{display:none}.istart{opacity:1;pointer-events:auto;transform:translate(-50%,0)}.view{animation:none}.grow,.rise2,.seg,.ln,.cu,.found li,.sitemap .node,.sitemap .edge,.hexes g,.gm,.gm::after{animation:none!important}.found li,.sitemap .node{opacity:1}.sitemap .edge{stroke-dashoffset:0}}

/* ---------- shared report pieces ---------- */
.r{font-family:var(--body);color:var(--r-fg)}
.r h3{font-family:var(--label);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--r-muted);margin:0 0 10px}
.r .note{font-size:13px;color:var(--r-muted)}
.r .k{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1;color:var(--r-fg)}
.r .k.acc{color:var(--c1t)}
.r .kl{font-size:15px;color:var(--r-muted);margin-top:4px}
.sample{display:inline-flex;align-items:center;gap:6px;font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--r-muted);border:1px dashed var(--r-line);padding:3px 8px}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart text{fill:var(--r-fg);font-family:var(--body);font-size:13px}
.chart .lab{fill:var(--r-muted)}
.chart .val{font-family:var(--label);font-weight:700;font-size:14px;letter-spacing:.04em}
.chart .axis{stroke:var(--r-line);stroke-width:1}
.chart .gridl{stroke:var(--r-line);stroke-width:1;stroke-dasharray:2 4}
.chart [tabindex]:focus{outline:none}.chart [tabindex]:focus-visible rect,.chart g:hover>rect{filter:brightness(1.12)}
.grow{transform-box:fill-box;transform-origin:0 50%;animation:growx .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*70ms) both}
.rise2{transform-box:fill-box;transform-origin:50% 100%;animation:growy .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*70ms) both}
@keyframes growx{from{transform:scaleX(0)}to{transform:none}}
@keyframes growy{from{transform:scaleY(0)}to{transform:none}}
.ln{stroke-dasharray:1;animation:lndraw 1.4s cubic-bezier(.4,0,.2,1) .15s both}
@keyframes lndraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.seg{animation:segin .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*120ms) both}
@keyframes segin{from{stroke-dasharray:0 100}}
.tblbtn{min-height:34px;padding:4px 10px;border:1px solid var(--r-line);background:var(--r-card);color:var(--r-fg);cursor:pointer;font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.tblbtn:hover{border-color:var(--r-fg)}
table.dt{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.dt th,table.dt td{padding:7px 8px;border-bottom:1px solid var(--r-line);text-align:left}
table.dt td.n,table.dt th.n{text-align:right}
table.dt thead th{font-family:var(--label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--r-muted);border-bottom:2px solid var(--r-fg)}
.cta-band{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;padding:20px;border:1px solid var(--r-fg);background:var(--c1l)}
.frame[data-mode="night"] .cta-band{background:var(--r-soft)}
.cta-band p{margin:0;max-width:52ch}
.cta-band b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;line-height:1.05;margin-bottom:4px}
.rbtn{min-height:44px;padding:8px 18px;border:1px solid var(--r-fg);background:var(--r-fg);color:var(--r-bg);cursor:pointer;font-family:var(--label);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.rbtn:hover{background:var(--c1);border-color:var(--c1);color:#0d0d0d}
.grid{display:grid;gap:16px}
.panel{background:var(--r-card);border:1px solid var(--r-line);padding:16px;min-width:0}

/* Stage 1: the PDF */
.r-pdf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
.r-pdf .paper{display:block;width:100%;height:auto;box-shadow:0 20px 50px rgba(0,0,0,.15)}
.r-pdf ul{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.big-say{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.6vw,46px);line-height:1;margin:6px 0 10px}
/* Stage 2: breakdown */
.r-bd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px}
.found{list-style:none;margin:0;padding:0;font-size:14px}
.found li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--r-line);opacity:0;animation:viewin .45s ease calc(var(--i)*160ms + .2s) both}
.found li .ok{width:18px;height:18px;display:grid;place-items:center;background:var(--c1);color:#0d0d0d;font-size:11px;font-weight:700}
.found li .flag{background:#f2c200}
.found code{font-family:var(--mono);font-size:12px;color:var(--r-muted)}
.sitemap text{font-family:var(--label);font-weight:700;letter-spacing:.06em;font-size:13px;fill:var(--r-fg);text-transform:uppercase}
.sitemap .node rect{fill:var(--r-card);stroke:var(--r-fg)}
.sitemap .node.root rect{fill:var(--c1);stroke:var(--c1)}
.sitemap .node.root text{fill:#0d0d0d}
.sitemap .node{opacity:0;animation:pop2 .5s cubic-bezier(.2,.9,.3,1.3) calc(var(--i)*140ms + 1.2s) both;transform-box:fill-box;transform-origin:50% 50%}
.sitemap .edge{fill:none;stroke:var(--r-muted);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:lndraw .6s ease calc(var(--i)*140ms + 1.3s) both}
.sitemap .sub{font-family:var(--body);font-weight:400;letter-spacing:0;text-transform:none;font-size:11px;fill:var(--r-muted)}
@keyframes pop2{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* ---------- styles ---------- */
/* 1 Minimal */
.s-min{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:30px}
.s-min .lead{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.25;margin:0;max-width:30ch}
.s-min .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:2px solid var(--r-fg);padding-top:18px}
.s-min .row .k{font-size:clamp(36px,4.6vw,60px)}
.s-min .spark{border-top:1px solid var(--r-line);padding-top:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;align-items:center}
/* 2 Slides */
.s-sl{display:flex;flex-direction:column;gap:12px;align-items:center}
.deck{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:var(--r-card);border:1px solid var(--r-line);box-shadow:0 18px 40px rgba(0,0,0,.08);overflow:hidden}
.slide{position:absolute;inset:0;padding:clamp(16px,4%,44px);display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transform:translateX(30px);transition:opacity .45s,transform .45s,visibility 0s .45s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s}
.slide h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,3.6vw,44px);line-height:1;margin:0}
.slide .sn{font-family:var(--label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--c1t)}
.slide.cover{background:var(--c1);color:#0d0d0d}
.slide.cover h4{font-size:clamp(28px,5.6vw,72px)}
.slide.cover .sn{color:#0d0d0d}
.frame:not([data-pal="ember"]) .slide.cover{color:#fff}.frame:not([data-pal="ember"]) .slide.cover .sn{color:#fff}
.slide .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px;align-items:center;flex:1;min-height:0}
.slide .two>*{min-width:0}
.slide .chart{max-height:100%}
.deckbar{display:flex;align-items:center;gap:12px;font-family:var(--label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.deckbar button{min-width:44px;min-height:40px;border:1px solid var(--r-fg);background:var(--r-card);cursor:pointer;color:var(--r-fg)}
.deckbar button:hover{background:var(--r-fg);color:var(--r-bg)}
.dots{display:flex;gap:6px}.dots i{width:22px;height:4px;background:var(--r-line)}.dots i.on{background:var(--c1)}
/* 3 Dashboard */
.s-db{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.slicers{display:flex;flex-direction:column;gap:14px}
.slicers .panel{padding:12px}
.slicers label{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--r-muted);display:block;margin-bottom:6px}
.slicers select{width:100%;min-height:38px;border:1px solid var(--r-line);background:var(--r-card);padding:4px 8px}
.slist{display:flex;flex-direction:column;gap:4px}
.slist button{display:flex;justify-content:space-between;gap:6px;min-height:34px;padding:4px 8px;border:1px solid var(--r-line);background:var(--r-card);color:var(--r-fg);cursor:pointer;text-align:left;font-size:14px}
.slist button[aria-pressed="true"]{border-color:var(--c1);background:var(--c1l)}
.frame[data-mode="night"] .slist button[aria-pressed="true"]{background:var(--r-soft)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{border-top:3px solid var(--c1)}
.kpi .k{font-size:clamp(26px,2.8vw,38px)}
.kpi .delta{font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--c1t)}
.db-charts{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;margin-top:12px}
.db-charts .wide{grid-column:1/-1}
.ph{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* 4 Story */
.s-st{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;position:relative}
.steps{display:flex;flex-direction:column;gap:30vh;padding:2vh 0 26vh}
.step{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);line-height:1.3;opacity:.25;transition:opacity .4s}
.step.on{opacity:1}
.step em{font-style:normal;color:var(--c1t);font-weight:600}
.step .sn{display:block;font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--r-muted);margin-bottom:6px}
.sticky{position:sticky;top:calc(var(--navh) + 16px);align-self:start;min-height:360px;display:flex;flex-direction:column;justify-content:center}
.sticky .k{font-size:clamp(48px,7vw,96px)}
.sticky-box{animation:viewin .5s ease}
/* 5 Finance */
.s-fi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.s-fi .ratios{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.s-fi .ratio .k{font-size:clamp(26px,2.8vw,36px)}
.s-fi table.dt td,.s-fi table.dt th{font-family:var(--mono);font-size:13px}
.s-fi table.dt thead th{font-family:var(--label)}
.s-fi table.dt tr.tot td{font-weight:500;border-top:2px solid var(--r-fg);border-bottom:2px solid var(--r-fg)}
.s-fi table.dt tr.sub td:first-child{padding-left:20px}
.s-fi table.dt tr.hd td{font-family:var(--label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--r-muted)}
.seg2{display:inline-flex;border:1px solid var(--r-line)}
.seg2 button{min-height:32px;padding:2px 10px;border:0;background:var(--r-card);color:var(--r-fg);cursor:pointer;font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.1em}
.seg2 button[aria-pressed="true"]{background:var(--r-fg);color:var(--r-bg)}
/* 6 Map */
.s-map{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px}
.hexes text{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.04em;fill:var(--r-fg);text-anchor:middle;pointer-events:none}
.hexes .cnt{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:0}
.hexes polygon{stroke:var(--r-bg);stroke-width:3;cursor:pointer;transition:fill .4s,transform .3s;transform-box:fill-box;transform-origin:50% 50%}
.hexes g:hover polygon,.hexes g:focus polygon,.hexes g.sel polygon{transform:scale(1.06);stroke:var(--r-fg)}
.hexes g{outline:none;animation:pop2 .5s cubic-bezier(.2,.9,.3,1.3) calc(var(--i)*90ms) both;transform-box:fill-box;transform-origin:50% 50%}
.legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--r-muted)}
.legend i{width:90px;height:10px;background:linear-gradient(90deg,var(--c1l),var(--c1))}
.nb-detail{border-left:3px solid var(--c1);padding-left:14px;min-height:120px}
/* 7 Fundraising */
.s-fu{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px}
.ring text{font-family:var(--display);fill:var(--r-fg)}
.calc input[type=range]{width:100%;accent-color:var(--c1)}
.calc output{font-family:var(--display);font-size:clamp(30px,3.4vw,44px);line-height:1;display:block}
.calc .eq{font-family:var(--serif);font-size:20px;margin:8px 0 0}
/* 8 Full story */
.s-fs{display:flex;flex-direction:column;gap:34px}
.fs-hero{position:relative;min-height:360px;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#111}
.fs-hero svg.photo{position:absolute;inset:0;width:100%;height:100%}
.fs-hero .in{position:relative;padding:clamp(18px,4vw,40px);max-width:700px}
.fs-hero h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,5.4vw,72px);line-height:.95;margin:6px 0 0}
.fs-hero .eb{font-family:var(--label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:#ffd9c2}
.ph-tag{position:absolute;right:10px;top:10px;font-family:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px;background:rgba(0,0,0,.55);color:#fff;padding:4px 8px}
.fs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fs-progs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fs-prog{background:var(--r-card);border:1px solid var(--r-line);overflow:hidden;transition:transform .35s,box-shadow .35s}
.fs-prog:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.fs-prog .pimg{position:relative;aspect-ratio:4/3}
.fs-prog .pimg svg{width:100%;height:100%;display:block}
.fs-prog .pt{padding:12px}
.fs-prog b{font-family:var(--label);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,32px);line-height:1.3;border-left:4px solid var(--c1);padding-left:18px;margin:0;max-width:40ch}
.quote cite{display:block;font-style:normal;font-family:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--r-muted);margin-top:10px}
.fs-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.cu{font-variant-numeric:tabular-nums}

/* proposal drawer */
.drawer{position:absolute;inset:0 0 0 auto;z-index:15;width:min(420px,100%);background:var(--r-card);color:var(--r-fg);border-left:1px solid var(--r-fg);box-shadow:-20px 0 50px rgba(0,0,0,.2);padding:20px;overflow:auto;transform:translateX(105%);transition:transform .4s cubic-bezier(.2,.7,.2,1);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:30px;line-height:1;margin:0 0 6px}
.drawer form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.drawer label{font-family:var(--label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;display:flex;flex-direction:column;gap:4px}
.drawer input,.drawer select,.drawer textarea{min-height:42px;border:1px solid var(--r-fg);background:var(--r-bg);padding:8px 10px;font-size:15px;font-family:var(--body);letter-spacing:0;text-transform:none;font-weight:400}
.drawer .x{position:absolute;right:10px;top:10px;min-width:40px;min-height:40px;border:1px solid var(--r-line);background:var(--r-card);cursor:pointer;font-size:18px}
.drawer .msg{min-height:1.4em;font-size:14px;color:var(--c1t);margin:0}

@media (max-width:1060px){.sheet{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .s-db{grid-template-columns:1fr}.slicers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis,.s-fi .ratios,.fs-stats,.fs-progs,.s-min .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-charts,.s-fi,.s-map,.s-fu,.fs-two,.r-pdf,.r-bd,.qs,.preview-box{grid-template-columns:1fr}
  .s-st{grid-template-columns:1fr}.sticky{order:-1;position:sticky;top:var(--navh);background:var(--r-bg);z-index:2;min-height:0;padding:8px 0;border-bottom:1px solid var(--r-line)}
  .steps{gap:34vh;padding-top:6vh}
  .slide .two{grid-template-columns:1fr}
  .s-min .spark{grid-template-columns:1fr}
}
@media (max-width:640px){
  .chips{flex-wrap:nowrap}
  .icard header{flex-wrap:wrap}.icard header>span:first-child{width:100%}
  .sheet{grid-template-columns:1fr}
  .shell .brand span{display:none}
  .stages button span{display:none}
  .tbtn span{display:none}
  .deck{aspect-ratio:auto;min-height:520px}
  .slide{padding:16px}
}