/* Everyday America® — site styles. Two voices (amber / teal), one common ground (ink). */
:root{
  color-scheme: light dark;
  --bg:#F7F3EA; --bg2:#EFE8DA; --surface:#FFFFFF; --ink:#12161A; --ink2:#4B545D; --ink3:#6E767E; --line:#DDD5C5;
  --a:#E8A200; --a-ink:#6B4300; --a-bg:#FFF0C9; --a-line:#F0CF7E;
  --b:#0E8C88; --b-ink:#0A4F4D; --b-bg:#D6F0EE; --b-line:#8CCFCB;
  --c:#6A4CD0; --c-ink:#3F2E96; --c-bg:#E8E2FB; --c-line:#B9A9F0;
  --p0:#E8A200;--p1:#0E8C88;--p2:#6A4CD0;--p3:#C2549B;
  --ok:#2B7A3E; --ok-bg:#DDF1E2; --warn:#8A4B00; --warn-bg:#FDEBD0; --bad:#9B2A2A; --bad-bg:#F8DCDC;
  --shadow:0 1px 2px rgba(18,22,26,.06),0 10px 28px rgba(18,22,26,.08);
  --r:18px; --r-sm:12px;
  --f-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0F1317;--bg2:#161B21;--surface:#1A2027;--ink:#F1ECE2;--ink2:#B7BEC6;--ink3:#8B939B;--line:#2B333C;--a:#F5B82E;--a-ink:#FFE2A0;--a-bg:#2E2510;--a-line:#6B5518;--b:#3FC1BB;--b-ink:#A8EDE9;--b-bg:#0F2B2A;--b-line:#1F6B67;--c:#A28CFF;--c-ink:#D8CEFF;--c-bg:#221C3F;--c-line:#4C3FA0;--ok:#7BD38F;--ok-bg:#12301A;--warn:#F3B565;--warn-bg:#33230F;--p0:#F5B82E;--p1:#3FC1BB;--p2:#A28CFF;--p3:#F08ACB;--bad:#F29A9A;--bad-bg:#371818;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35); }
}
:root[data-theme="dark"]{ --bg:#0F1317;--bg2:#161B21;--surface:#1A2027;--ink:#F1ECE2;--ink2:#B7BEC6;--ink3:#8B939B;--line:#2B333C;--a:#F5B82E;--a-ink:#FFE2A0;--a-bg:#2E2510;--a-line:#6B5518;--b:#3FC1BB;--b-ink:#A8EDE9;--b-bg:#0F2B2A;--b-line:#1F6B67;--c:#A28CFF;--c-ink:#D8CEFF;--c-bg:#221C3F;--c-line:#4C3FA0;--ok:#7BD38F;--ok-bg:#12301A;--warn:#F3B565;--warn-bg:#33230F;--p0:#F5B82E;--p1:#3FC1BB;--p2:#A28CFF;--p3:#F08ACB;--bad:#F29A9A;--bad-bg:#371818;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35); }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em;font-weight:700}
h1{font-size:clamp(2.5rem,7vw,5rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;letter-spacing:-.02em}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
h4{font-size:1.1rem}
p{margin:0 0 1em}
ol,ul{margin:0 0 1em;padding-left:1.3em}
li{margin:.25em 0}
.r{font-size:.55em;vertical-align:super;font-weight:600;margin-left:.04em;line-height:0}
em.hl{font-style:italic;background:linear-gradient(transparent 62%, color-mix(in srgb,var(--a) 45%,transparent) 62%)}
:focus-visible{outline:3px solid var(--c);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.section{padding:clamp(56px,9vw,112px) 0}
.section.tight{padding:clamp(36px,6vw,64px) 0}
.section.alt{background:var(--bg2)}
.section.dark{background:#10151A;color:#F1ECE2;--line:#2B333C;--ink2:#B7BEC6;--surface:#1A2027}
.section.dark .eyebrow{color:#F5B82E}
.eyebrow{font:700 .78rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;opacity:.6}
.lede{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--ink2);max-width:60ch}
.section.dark .lede{color:#B7BEC6}
.center{text-align:center}.center .lede{margin-inline:auto}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card h3{margin-bottom:.4em}
.num{font:800 .9rem var(--f-ui);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--bg);margin-bottom:14px}
.muted{color:var(--ink2)}.small{font-size:.9rem}.tiny{font-size:.8rem}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand svg{width:44px;height:28px}
.brand-name{font:800 1.25rem var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.nav{display:flex;gap:2px}
.nav a{text-decoration:none;font-weight:600;font-size:.93rem;padding:9px 13px;border-radius:99px;color:var(--ink2)}
.nav a:hover{background:var(--bg2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.05rem}
.icon-btn.menu{display:none}
@media (max-width:900px){
  .icon-btn.menu{display:inline-grid;place-items:center}
  .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 20px 18px;display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 14px;font-size:1.05rem}
  .brand-name{font-size:1.1rem}
}

/* buttons & small parts */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 .98rem var(--f-ui);padding:14px 22px;border-radius:99px;border:2px solid var(--ink);background:var(--ink);color:var(--bg);text-decoration:none;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{padding:9px 16px;font-size:.88rem}
.section.dark .btn{background:#F1ECE2;color:#10151A;border-color:#F1ECE2}
.section.dark .btn.ghost{background:transparent;color:#F1ECE2}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tag{font:800 .68rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:6px;border:1.5px solid currentColor;white-space:nowrap}
.tag.news{color:var(--ok)}.tag.interp{color:var(--c-ink)}.tag.opinion{color:var(--a-ink)}.tag.theory{color:var(--b-ink)}.tag.decide{color:var(--ink)}
:root[data-theme="dark"] .tag.interp{color:var(--c-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 .85rem var(--f-ui);padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;color:var(--ink);font:700 .82rem var(--f-ui);padding:9px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.ab{display:inline-grid;place-items:center;width:30px;height:30px;font:800 .9rem var(--f-display);flex:none}
.side.a .ab,.pill-a .ab{background:var(--a);color:#241600;border-radius:6px}
.side.b .ab,.pill-b .ab{background:var(--b);color:#fff;border-radius:50%}
.sample-banner{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--warn);border:1px dashed currentColor;border-radius:var(--r-sm);padding:10px 14px;font-size:.88rem;margin:0 0 22px}
.sample-banner b{white-space:nowrap}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important;scroll-behavior:auto!important}}

/* footer */
.site-footer{background:#10151A;color:#C9CED4;padding:56px 0 36px;font-size:.92rem}
.site-footer a{color:#F1ECE2}
.foot{display:grid;gap:28px;grid-template-columns:2fr 1fr 1fr}
@media (max-width:760px){.foot{grid-template-columns:1fr}}
.foot h4{color:#F1ECE2;font-family:var(--f-ui);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.foot ul{list-style:none;padding:0}
.legal{border-top:1px solid #2B333C;margin-top:32px;padding-top:20px;font-size:.82rem;color:#8B939B}

/* ===== HERO ===== */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(48px,8vw,96px);overflow:hidden;position:relative}
.hero-grid{display:grid;gap:44px;grid-template-columns:1.15fr .85fr;align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:italic;font-weight:700}
.venn{position:absolute;right:-120px;top:-60px;width:620px;height:420px;opacity:.9;pointer-events:none;z-index:0}
.venn .ca,.venn .cb{mix-blend-mode:multiply}
.hero .wrap{position:relative;z-index:1}
.xcard{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.xcard-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font:700 .78rem var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.xcard-t{font:700 1.3rem/1.2 var(--f-display);padding:18px 18px 8px}
.xcard-pair{display:grid;grid-template-columns:1fr 1fr}
.xcard-pair>div{padding:16px 18px}
.xcard-pair .a{background:var(--a-bg);color:var(--a-ink)}
.xcard-pair .b{background:var(--b-bg);color:var(--b-ink)}
.xcard-pair p{font-size:.95rem;margin:.5em 0 0;line-height:1.45}
.xcard-pair strong{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.xcard-cg{padding:14px 18px 18px;font-size:.95rem;border-top:3px double var(--ink)}
.xcard-cg b{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}
.xcard-dots{display:flex;gap:6px;padding:0 18px 16px}
.xcard-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.xcard-dots i.on{background:var(--ink)}
.fade{transition:opacity .35s}.fade.out{opacity:0}

/* barbell */
.barbell{width:100%;max-width:900px;margin:30px auto 0}
.barbell text{font-family:var(--f-ui);font-weight:700;fill:var(--ink)}

/* stage strip */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:30px}
@media (max-width:860px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip button{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:14px;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:.15s}
.strip button b{display:block;font:800 .72rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.strip button span{font:700 1.02rem var(--f-display)}
.strip button small{display:block;color:var(--ink2);margin-top:4px}
.strip button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.strip button[aria-pressed="true"] b,.strip button[aria-pressed="true"] small{color:inherit;opacity:.8}
.strip-detail{margin-top:14px;padding:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}

/* rules (dark) */
.rules{counter-reset:r;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));padding:0;list-style:none;margin-top:34px}
.rules li{counter-increment:r;position:relative;padding:22px 22px 22px 70px;border:1px solid var(--line);border-radius:var(--r);background:#161B21;margin:0}
.rules li::before{content:counter(r);position:absolute;left:20px;top:20px;width:34px;height:34px;border-radius:50%;background:#F5B82E;color:#10151A;font:800 .95rem var(--f-ui);display:grid;place-items:center}
.rules b{display:block;font-family:var(--f-display);font-size:1.12rem;margin-bottom:4px;color:#F1ECE2}
.rules span{color:#B7BEC6;font-size:.96rem}

/* roadmap */
.road{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:34px;counter-reset:ph}
.phase{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;position:relative;border-top:6px solid var(--ink)}
.phase:nth-child(1){border-top-color:var(--a)}.phase:nth-child(2){border-top-color:var(--b)}.phase:nth-child(3){border-top-color:var(--c)}.phase:nth-child(4){border-top-color:var(--ink)}
.phase .when{font:800 .72rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.phase h3{margin:.3em 0 .5em;font-size:1.3rem}
.phase ol{font-size:.95rem;padding-left:1.2em}
.phase .win{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:.88rem;color:var(--ink2)}

.lockup{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:30px}
@media (max-width:760px){.lockup{grid-template-columns:1fr}}
.mark{border-radius:var(--r);padding:28px;border:1px solid var(--line);background:var(--surface)}
.mark .big{font:800 clamp(1.8rem,4vw,2.6rem)/1.05 var(--f-display);letter-spacing:-.02em}
.mark.sbs .big{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mark.sbs .big .dot{width:.9em;height:.9em;border-radius:3px;background:var(--a);display:inline-block}
.mark.sbs .big .dot.b{background:var(--b);border-radius:50%}

/* ===== DEMO SHELL ===== */
.demo-shell{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.demo-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
.demo-bar .t{font:800 .75rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.demo-stage{padding:clamp(14px,3vw,28px);background:var(--bg)}
.demo{container:demo / inline-size}
.phone-bar{display:none}
.demo-shell.is-phone .demo-stage{background:radial-gradient(circle at 50% 0,var(--bg2),var(--bg));padding:26px 12px}
.demo-shell.is-phone .demo{width:394px;max-width:100%;margin:0 auto;border:11px solid #14181C;border-radius:46px;background:var(--bg);height:min(760px,80vh);overflow-y:auto;overflow-x:hidden;box-shadow:0 20px 50px rgba(0,0,0,.28);position:relative;padding:0 14px 28px}
.demo-shell.is-phone .phone-bar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5;background:var(--bg);margin:0 -14px 12px;padding:12px 22px 8px;font:700 .78rem var(--f-ui);color:var(--ink)}
.phone-bar::after{content:"";position:absolute;left:50%;top:6px;width:84px;height:18px;border-radius:12px;background:#14181C;transform:translateX(-50%)}

/* ===== EXCHANGE ===== */
.ex-top{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.ex-top .kicker{font:800 .72rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.ex-top h3{margin:.2em 0 0;font-size:clamp(1.3rem,3vw,1.9rem)}
.ex-prog{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;margin:14px 0 20px}
.ex-prog i{height:6px;border-radius:4px;background:var(--line)}
.ex-prog i.on{background:var(--ink)}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:14px;animation:rise .45s ease}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.st-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.st-head h4{margin:0;font-size:1.15rem}
.st-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font:800 .8rem var(--f-ui)}
.st-note{margin-left:auto;font-size:.8rem;color:var(--ink2)}
.st-sub{font-size:.88rem;color:var(--ink2);margin:0 0 12px}
.brief{font-size:1.05rem;margin:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@container demo (max-width:640px){.pair{grid-template-columns:1fr}.st-note{margin-left:0;width:100%}}
.side{border-radius:14px;padding:16px 16px 14px;border:1.5px solid}
.side.a{background:var(--a-bg);border-color:var(--a-line);color:var(--a-ink)}
.side.b{background:var(--b-bg);border-color:var(--b-line);color:var(--b-ink)}
.side p{margin:.6em 0 0;font-size:1rem;color:inherit}
.side .who{display:flex;gap:10px;align-items:center}
.side .who strong{display:block;font:700 1rem var(--f-display);line-height:1.2}
.side .who small{display:block;opacity:.85;font-size:.78rem}
.side .lbl{display:block;font:800 .68rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;margin-top:12px;opacity:.85}
.side .lbl+p{margin-top:.2em}
.cite{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-left:2px;border-radius:9px;background:var(--ink);color:var(--bg);font:700 .66rem var(--f-ui);cursor:help;vertical-align:super;line-height:1}
.rating{margin-top:12px;font-size:.78rem}
.rating .bar{height:7px;border-radius:5px;background:rgba(0,0,0,.14);overflow:hidden;margin-top:4px}
.rating .bar i{display:block;height:100%;background:currentColor;opacity:.75}
.cg{background:linear-gradient(90deg,var(--a-bg),var(--surface) 30%,var(--surface) 70%,var(--b-bg));border:1.5px solid var(--ink);text-align:center}
.cg .st-head{justify-content:center}.cg p{max-width:62ch;margin-inline:auto}
.qs{margin:0;padding-left:1.3em}
.ex-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 6px}
.learn{border:2px dashed var(--ink);border-radius:var(--r);padding:20px;margin-top:10px;background:var(--surface)}
.learn h4{margin-bottom:10px}
.srclist{font-size:.82rem;color:var(--ink2);margin-top:18px}
.srclist ol{padding-left:1.3em}
.skim .more{margin-top:14px}
.skim .pair{margin:14px 0}
.gist{font:600 1.08rem/1.35 var(--f-display)!important}

/* ===== EVIDENCE BOARD ===== */
.eb-ctl{display:grid;gap:10px;margin:8px 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.eb-ctl input[type=range]{width:100%;accent-color:var(--ink)}
.eb-ticks{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink2);gap:6px}
.eb-ticks span{flex:1;text-align:center}.eb-ticks span:first-child{text-align:left}.eb-ticks span:last-child{text-align:right}
.eb-note{font-size:.92rem;margin:0}
.corr{border-left:5px solid var(--bad);background:var(--bad-bg);color:var(--bad);padding:10px 14px;border-radius:10px;font-size:.9rem;margin-bottom:8px}
.corr b{text-transform:uppercase;font-size:.7rem;letter-spacing:.1em}
.corr.upd{border-color:var(--c);background:var(--c-bg);color:var(--c-ink)}
.eb-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
@container demo (max-width:760px){.eb-cols{grid-template-columns:1fr}}
.eb-col{border-radius:var(--r);padding:12px;border:1.5px solid var(--line);background:var(--surface)}
.eb-col h4{font:800 .76rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase;margin:2px 4px 10px;display:flex;justify-content:space-between}
.eb-col.c0{border-color:var(--ok)}.eb-col.c0 h4{color:var(--ok)}
.eb-col.c1{border-color:var(--warn)}.eb-col.c1 h4{color:var(--warn)}
.eb-col.c2{border-color:var(--ink3)}.eb-col.c2 h4{color:var(--ink2)}
.eb-item{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;background:var(--bg);font-size:.93rem;transition:box-shadow .2s,transform .2s}
.eb-item.hot{box-shadow:0 0 0 3px var(--c);transform:scale(1.015)}
.eb-item .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:.75rem;color:var(--ink2);align-items:center}
.st{font:800 .64rem var(--f-ui);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:5px}
.st.confirmed{background:var(--ok-bg);color:var(--ok)}.st.claimed{background:var(--warn-bg);color:var(--warn)}.st.disputed{background:var(--bad-bg);color:var(--bad)}.st.unknown{background:var(--bg2);color:var(--ink2)}
.moved{font-size:.72rem;font-weight:700;color:var(--c-ink);background:var(--c-bg);padding:3px 6px;border-radius:5px}
.cited{font:800 .65rem var(--f-ui);padding:2px 6px;border-radius:5px}
.cited.a{background:var(--a);color:#241600}.cited.b{background:var(--b);color:#fff}
.eb-empty{font-size:.85rem;color:var(--ink2);padding:6px}
.xref{display:inline-flex;font:700 .72rem var(--f-ui);padding:3px 8px;border-radius:99px;border:1.5px solid currentColor;margin:4px 4px 0 0;cursor:pointer;background:transparent;color:inherit}
.stamp{font-size:.74rem;opacity:.85;margin-top:10px}
.addendum{margin-top:10px;padding-top:10px;border-top:1px dashed currentColor;font-size:.92rem}

/* ===== THIRD CHAIR ===== */
.tc{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:start}
@container demo (max-width:820px){.tc{grid-template-columns:1fr}.tc .chair{order:3}}
.tc .col h4{display:flex;gap:10px;align-items:center;font-size:1.02rem;margin-bottom:10px}
.tc-case{font-size:.95rem;margin-bottom:12px}
.claimbtn{display:block;width:100%;text-align:left;border:1.5px solid;border-radius:12px;padding:11px 13px;margin-bottom:8px;font:inherit;font-size:.92rem;cursor:pointer;background:transparent;color:inherit}
.side.a .claimbtn{border-color:var(--a-line)}.side.b .claimbtn{border-color:var(--b-line)}
.claimbtn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chair{background:var(--c-bg);color:var(--c-ink);border:1.5px solid var(--c-line);border-radius:var(--r);padding:18px}
.chair h4{display:flex;align-items:center;gap:10px}
.chair .seat{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--c);color:#fff;font:800 .9rem var(--f-display);transform:rotate(45deg)}
.chair .seat span{transform:rotate(-45deg)}
.meter{display:flex;gap:4px;margin:8px 0}
.meter i{flex:1;height:10px;border-radius:5px;background:rgba(0,0,0,.14)}
.meter i.on{background:var(--c)}
.chair .nowin{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.chair h5{margin:14px 0 4px;font:800 .72rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.chair ul{padding-left:1.1em;font-size:.93rem}
.rate-list{list-style:none;padding:0;margin:0;font-size:.88rem}
.rate-list li{display:flex;gap:8px;align-items:center;margin:6px 0}
.rate-list b{flex:none;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:5px;background:var(--c);color:#fff;min-width:64px;text-align:center}

/* ===== STEELMAN ===== */
.sm-steps{display:flex;gap:6px;margin-bottom:16px}
.sm-steps i{flex:1;height:6px;border-radius:4px;background:var(--line)}.sm-steps i.on{background:var(--ink)}
.slider-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.slider-box input[type=range]{width:100%;height:12px;accent-color:var(--ink);margin:16px 0 6px}
.axis{display:flex;justify-content:space-between;gap:10px;font:700 .85rem var(--f-ui)}
.axis span:first-child{color:var(--a-ink);border-bottom:3px solid var(--a)}
.axis span:last-child{color:var(--b-ink);border-bottom:3px solid var(--b);text-align:right}
.swap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
@container demo (max-width:640px){.swap{grid-template-columns:1fr}}
.grade{margin-top:12px;padding-top:10px;border-top:1px dashed currentColor;font-size:.88rem}
.stars{font-size:1.1rem;letter-spacing:.1em}
.opt{display:block;width:100%;text-align:left;font:inherit;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);margin-bottom:8px;cursor:pointer}
.opt:hover{border-color:var(--ink)}
.opt.ok{border-color:var(--ok);background:var(--ok-bg)}.opt.no{border-color:var(--bad);background:var(--bad-bg)}
.opt-why{font-size:.88rem;color:var(--ink2);margin:2px 4px 10px}
.result{font:700 1.15rem var(--f-display);padding:16px;border-radius:14px;background:var(--c-bg);color:var(--c-ink);margin-top:14px}

/* ===== DUEL ===== */
.duel-text{font:500 clamp(1.15rem,2.4vw,1.45rem)/1.7 var(--f-display);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.claim{cursor:pointer;border:0;background:none;font:inherit;color:inherit;padding:0 2px;border-radius:4px;transition:.15s;text-decoration-thickness:3px;text-underline-offset:5px}
.claim.agree{text-decoration:underline solid var(--ink)}
.claim.split{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--a)}
.claim.depends{text-decoration:underline dotted var(--c)}
.claim:hover,.claim[aria-pressed="true"]{background:var(--c-bg)}
.claim.dim{opacity:.28}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--ink2);margin:12px 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend u{text-decoration-thickness:3px;text-underline-offset:4px}
.legend .l1{text-decoration:underline solid var(--ink)}.legend .l2{text-decoration:underline wavy var(--a)}.legend .l3{text-decoration:underline dotted var(--c)}
.dpanel{margin-top:14px;animation:rise .35s ease}
.dpanel .ev{margin-top:12px;padding:14px;border-radius:12px;background:var(--c-bg);color:var(--c-ink);font-size:.93rem}
.dpanel .ev b{font:800 .68rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:3px}
.agree-tag{font:800 .68rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;margin-left:6px}

/* ===== TABS / FORMAT PAGE ===== */
.ftabs{position:sticky;top:68px;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.ftabs .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.ftabs a{flex:none;text-decoration:none;font-weight:700;font-size:.9rem;padding:9px 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);white-space:nowrap}
.ftabs a:hover,.ftabs a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fmt{scroll-margin-top:140px;padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--line)}
.fmt-head{display:grid;gap:26px;grid-template-columns:1fr 1fr;margin-bottom:26px}
@media (max-width:860px){.fmt-head{grid-template-columns:1fr}}
.fmt-id{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.fmt-letter{font:800 1.2rem var(--f-display);width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:var(--bg)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.facts li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0;font-size:.92rem}
.facts b{display:block;font:800 .68rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:2px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp th,.cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp th{background:var(--bg2);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.cmp tr:last-child td{border-bottom:0}
.tscroll{overflow-x:auto;border-radius:var(--r)}
.tscroll .cmp{min-width:760px}

/* ===== PUBLICATION ===== */
.mast{border-bottom:4px double var(--ink);padding:26px 0 14px;text-align:center}
.mast .nm{font:800 clamp(2.4rem,8vw,5.4rem)/1 var(--f-display);letter-spacing:-.03em}
.mast .sub{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font:700 .78rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:12px;padding-top:10px;border-top:1px solid var(--ink)}
.pub-ctl{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0}
.pub-grid{display:grid;gap:22px;grid-template-columns:2fr 1fr}
@media (max-width:980px){.pub-grid{grid-template-columns:1fr}}
.story{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;transition:.15s}
.story:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.story h3{margin:0;font-size:1.3rem}
.story .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--ink2)}
.story .vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.88rem}
.story .vs div{border-radius:10px;padding:10px;line-height:1.35}
.story .vs .a{background:var(--a-bg);color:var(--a-ink)}.story .vs .b{background:var(--b-bg);color:var(--b-ink)}
.story .vs b{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.story button.open{margin-top:auto;align-self:flex-start}
.story[hidden]{display:none}
.lead{border:2px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--surface)}
.lead-in{padding:clamp(16px,3vw,28px);container:demo / inline-size}
.stories{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-top:16px}
.side-col .card{margin-bottom:16px}
.side-col h4{font-size:1rem}
.three{counter-reset:t;list-style:none;padding:0}
.three li{counter-increment:t;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);margin:0;font-size:.95rem}
.three li::before{content:counter(t);font:800 1.4rem var(--f-display);color:var(--ink3)}
.bal{display:flex;gap:6px;margin:10px 0}
.bal i{flex:1;height:10px;border-radius:5px;background:var(--line)}
.bal i.on{background:linear-gradient(90deg,var(--a),var(--b))}
dialog{border:0;border-radius:24px;padding:0;max-width:min(980px,96vw);width:100%;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(10,14,18,.6);backdrop-filter:blur(4px)}
.dlg-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:3}
.dlg-body{padding:clamp(14px,3vw,26px);container:demo / inline-size}
.acc details{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;background:var(--bg)}
.acc summary{cursor:pointer;font-weight:700}
.ledger{font-size:.88rem}
.ledger li{margin:.5em 0}
input[type=email],input[type=text],select,textarea{font:inherit;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
label{font:700 .8rem var(--f-ui);display:block;margin-bottom:6px;letter-spacing:.03em}

/* ===== NETWORK ===== */
.cfg{display:grid;gap:24px;grid-template-columns:340px 1fr}
@media (max-width:960px){.cfg{grid-template-columns:1fr}}
.cfg-form{display:grid;gap:16px;align-content:start}
.swatches{display:flex;gap:10px}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid var(--surface);outline:2px solid var(--line);cursor:pointer}
.sw[aria-pressed="true"]{outline:3px solid var(--ink)}
.embed{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;overflow:hidden;max-width:620px;margin:0 auto;box-shadow:var(--shadow)}
.embed-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--acc,#12161A);color:var(--acc-ink,#fff);gap:10px}
.embed-h b{font:800 1.05rem var(--f-display)}
.embed-h small{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.66rem;opacity:.9}
.embed-b{padding:16px}
.embed-b h4{margin-bottom:10px}
.embed-f{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink2)}
.code{font:500 .8rem/1.5 ui-monospace,Menlo,Consolas,monospace;background:#10151A;color:#C9F2EE;padding:14px;border-radius:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.fly{position:relative;max-width:560px;margin:30px auto 0}
.who-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));margin-top:26px}
.who-grid .chip{justify-content:center;padding:14px}
.split2{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.split2{grid-template-columns:1fr}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pane[hidden]{display:none}
.stat-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:16px}
.stat{background:var(--bg2);border-radius:14px;padding:14px}
.stat b{display:block;font:800 1.15rem var(--f-display)}
.stat span{font-size:.82rem;color:var(--ink2)}
.lanes{counter-reset:ln}
.lane{counter-increment:ln}
.lane .num::before{content:counter(ln)}
.lane .num{font-size:0}.lane .num::before{font-size:.9rem}

/* ===== NETWORKS DESK ===== */
.outlets{display:flex;flex-wrap:wrap;gap:8px}
.ochip{font:800 .9rem var(--f-ui);padding:10px 16px;border-radius:10px;border:2px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink)}
.ochip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ocols{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin:18px 0}
.ocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;animation:rise .4s ease;border-top:6px solid var(--oc,var(--ink))}
.ocard .nm{font:800 1.05rem var(--f-ui);display:flex;justify-content:space-between;align-items:center}
.ocard h4{font-size:1.2rem;margin:0}
.ocard dl{margin:0;font-size:.88rem}
.ocard dt{font:800 .66rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:8px}
.ocard dd{margin:2px 0 0}
.lw{background:none;color:inherit;border-radius:4px;padding:0 2px}
.show-lw .lw{background:color-mix(in srgb,var(--a) 55%,transparent);box-shadow:0 0 0 1px var(--a)}
.spec{position:relative;height:92px;margin:26px 8px 8px}
.spec .track{position:absolute;left:0;right:0;top:44px;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--a),var(--line) 50%,var(--b))}
.spec .mid{position:absolute;left:50%;top:30px;height:38px;border-left:2px dashed var(--ink)}
.spec .pt{position:absolute;top:0;transform:translateX(-50%);text-align:center;font:800 .72rem var(--f-ui);white-space:nowrap;transition:left .5s}
.spec .pt::after{content:"";display:block;width:2px;height:40px;background:var(--ink);margin:2px auto 0}
.spec .ends{position:absolute;left:0;right:0;top:66px;display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink2);font-weight:700}
.shared{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.shared{grid-template-columns:1fr}}
.pipe{counter-reset:p;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));list-style:none;padding:0}
.pipe li{counter-increment:p;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0;font-size:.92rem;position:relative}
.pipe li::before{content:counter(p);display:block;font:800 1.8rem var(--f-display);color:var(--ink3);line-height:1;margin-bottom:6px}
.pipe b{display:block;font-family:var(--f-display);font-size:1.05rem}
.mode{border-top:6px solid var(--ink)}
.mode:nth-child(2){border-top-color:var(--b)}.mode:nth-child(3){border-top-color:var(--c)}.mode:nth-child(1){border-top-color:var(--a)}


/* ================= v2: minimal + brand-first ================= */
.nav a.ask{border:1.5px solid var(--ink)}
.brandword{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:.95}
.brandword .r{font-size:.28em;vertical-align:top;position:relative;top:.55em}
.hero2{padding:clamp(44px,8vw,110px) 0 clamp(40px,6vw,80px);position:relative;overflow:hidden}
.hero2 .bw{font-size:clamp(2.6rem,12.2vw,9.6rem);margin:0 0 .2em;white-space:nowrap}
.tag-line{font:600 clamp(1.3rem,3.4vw,2.2rem)/1.2 var(--f-display);color:var(--ink);margin:0 0 .3em;min-height:2.5em;transition:opacity .3s}
.tag-line.out{opacity:0}
.tl-pick{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.tl-pick button{font:600 .76rem var(--f-ui);border:1.5px solid var(--line);background:transparent;color:var(--ink2);border-radius:99px;padding:6px 12px;cursor:pointer}
.tl-pick button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hero2-grid{display:grid;gap:40px;grid-template-columns:1.2fr .8fr;align-items:center}
@media (max-width:900px){.hero2-grid{grid-template-columns:1fr}}

/* paint chips: two near-identical blues; they only differ once they touch */
.chips2{position:relative;height:290px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.chip2{width:150px;height:260px;border-radius:14px;background:var(--cc);position:relative;box-shadow:0 10px 30px rgba(18,22,26,.18);transition:transform .9s cubic-bezier(.2,.8,.2,1);display:flex;align-items:flex-end;padding:14px;border:6px solid #fff}
.chip2 span{font:800 .72rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#12161A;background:#fff;padding:6px 8px;border-radius:6px;margin:-14px -14px -14px;width:calc(100% + 28px);text-align:center;border-radius:0 0 8px 8px}
.chip2.l{--cc:#2E6CB4;transform:translateX(-120px) rotate(-6deg)}
.chip2.r{--cc:#3672BB;transform:translateX(120px) rotate(6deg)}
.chips2.together .chip2.l{transform:none}
.chips2.together .chip2.r{transform:none}
.chip2.l{border-right-width:0;border-radius:14px 0 0 14px}.chip2.r{border-left-width:0;border-radius:0 14px 14px 0}
.chips2.together .chip2{transform-origin:center}
.chips2 .tap{position:absolute;bottom:-6px;left:0;right:0;text-align:center;font:700 .76rem var(--f-ui);color:var(--ink3);letter-spacing:.08em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.chip2{transition:none}}

.words3{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-top:8px}
@media (max-width:760px){.words3{grid-template-columns:1fr}}
.words3 div{padding:8px 0}
.words3 b{display:block;font:800 clamp(2.4rem,6.5vw,4.6rem)/1 var(--f-display);letter-spacing:-.03em}
.words3 span{color:var(--ink2);font-size:1.02rem}
.words3 div:nth-child(1) b{color:var(--p0)}.words3 div:nth-child(2) b{color:var(--p1)}.words3 div:nth-child(3) b{color:var(--ink)}
.miniask{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.miniask input{flex:1 1 280px;font-size:1.05rem;padding:16px 20px;border-radius:99px}
details.more{border-top:1px solid var(--line);padding:6px 0}
details.more:last-of-type{border-bottom:1px solid var(--line)}
details.more>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 clamp(1.15rem,2.4vw,1.5rem) var(--f-display);padding:16px 0}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";font:500 1.6rem var(--f-ui);color:var(--ink3);transition:transform .2s}
details.more[open]>summary::after{content:"\2212"}
details.more .mb{padding:4px 0 22px;max-width:70ch}
details.more.inline{border:0;padding:0;margin-top:10px}
details.more.inline>summary{font:700 .86rem var(--f-ui);padding:6px 0;color:var(--ink2)}
details.more.inline>summary::after{font-size:1.1rem}
.doors{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border-top:2px solid var(--ink)}
.doors a{display:block;padding:26px 22px 26px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.doors b{display:block;font:800 1.6rem var(--f-display)}
.doors span{color:var(--ink2);font-size:.96rem}
.doors a:hover b{text-decoration:underline;text-underline-offset:5px}

/* ============ Key Points ============ */
.kp{container:demo / inline-size}
.kp-top{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.kp-top .kicker{font:800 .72rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.kp-top h3{margin:.25em 0 0;font-size:clamp(1.4rem,3.4vw,2.2rem);max-width:30ch}
.kp-hint{font-size:.82rem;color:var(--ink3);margin:12px 2px 0}
.kp-head{display:none}
.kp-matrix{display:grid;gap:14px}
.kp-row{border-top:2px solid var(--ink);padding-top:10px}
.kp-rt{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;color:var(--ink);font:800 .78rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:6px 0 12px}
.kp-rt i{font:500 1.4rem var(--f-ui);font-style:normal;color:var(--ink3)}
.kp-cells{display:grid;gap:10px;align-items:start}
.kp-cell{background:color-mix(in srgb,var(--pc) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--pc) 35%,var(--line));border-left:6px solid var(--pc);border-radius:14px;padding:14px 16px}
.kp-who{display:block;font:800 .66rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.kp-title{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);font:800 clamp(1.25rem,2.6vw,1.6rem)/1.1 var(--f-display);letter-spacing:-.015em;cursor:pointer;padding:2px 0}
.kp-title::after{content:" \25BE";font-size:.6em;color:var(--ink3)}
.kp-cell.on .kp-title::after{content:" \25B4"}
.kp-x{margin:.5em 0 0;font-size:1rem;font-weight:600;line-height:1.4;animation:rise .3s ease}
.kp-s{margin:.7em 0 0;font-size:.93rem;color:var(--ink2);line-height:1.55;border-top:1px dashed var(--line);padding-top:.7em;animation:rise .3s ease}
@container demo (min-width:721px){
  .kp-matrix{grid-template-columns:1fr}
  .kp-head{display:grid;grid-template-columns:150px repeat(var(--n),1fr);gap:10px;align-items:end}
  .kp-ph{border-bottom:5px solid var(--pc);padding-bottom:8px}
  .kp-ph b{font:800 1rem var(--f-display);display:block}
  .kp-ph small{display:block;font-size:.76rem;color:var(--ink2);line-height:1.3;margin-top:2px}
  .kp-row{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:start}
  .kp-rt{flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding-top:14px}
  .kp-cells{grid-template-columns:repeat(var(--n),1fr)}
  .kp-who{display:none}
}
.kp-record{margin-top:26px;border-top:1px solid var(--line);padding-top:10px}
.kp-record>summary{cursor:pointer;font:700 .9rem var(--f-ui);color:var(--ink2)}
.kp-record ol{font-size:.92rem;margin-top:12px}

/* spectrum */
.kp-spec{padding:6px 0 4px}
.kp-topic{display:flex;flex-direction:column;align-items:center}
.kp-circle{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;border:3px solid var(--ink);font:800 1.15rem/1.1 var(--f-display);text-align:center;padding:10px;background:var(--surface)}
.kp-stem{width:3px;height:30px;background:var(--ink)}
.kp-axis{position:relative;height:150px;margin:0 6px}
.kp-line{position:absolute;left:0;right:0;top:72px;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--ink),var(--line) 42%,var(--line) 58%,var(--ink))}
.kp-mid{position:absolute;left:50%;top:54px;height:48px;border-left:2px dashed var(--ink3)}
.kp-node{position:absolute;top:0;height:150px;margin-left:-15px;background:none;border:0;cursor:pointer;color:var(--ink);padding:0;width:30px;overflow:visible}
.kp-node i{position:absolute;left:0;top:63px;width:30px;height:30px;border-radius:50%;background:var(--pc);border:4px solid var(--surface);box-shadow:0 0 0 3px var(--pc);transition:transform .2s}
.kp-node:hover i,.kp-node.on i{transform:scale(1.3)}
.kp-node span{position:absolute;left:15px;transform:translateX(-50%);white-space:nowrap;font:800 .86rem var(--f-ui);background:var(--surface);border:1.5px solid var(--pc);border-radius:99px;padding:5px 11px}
.kp-node.up span{top:14px}.kp-node.down span{top:108px}
.kp-node.on span{background:var(--pc);color:#fff}
.kp-ends{display:flex;justify-content:space-between;font:700 .82rem var(--f-ui);color:var(--ink2);padding:0 6px}
.kp-bridge{color:var(--ink3);font-weight:600;font-style:italic}
.kp-detail{margin-top:16px;background:color-mix(in srgb,var(--pc) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--pc) 35%,var(--line));border-left:6px solid var(--pc);border-radius:14px;padding:16px 18px;animation:rise .3s ease}
.kp-dh{display:flex;gap:10px;align-items:center;justify-content:space-between}
.kp-dh b{font:800 1.25rem var(--f-display)}
.kp-dl{margin:0;padding-left:1.2em;font-size:.95rem}
.kp-dl b{font-weight:800}
@container demo (max-width:560px){.kp-node span{font-size:.74rem;padding:4px 8px}.kp-circle{width:110px;height:110px;font-size:1rem}}

/* overlap */
.kp-ov{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center}
@container demo (max-width:700px){.kp-ov{grid-template-columns:1fr}}
.kp-venn{width:100%;max-width:560px;margin:0 auto}
.kp-vc{cursor:pointer}.kp-vc circle{transition:fill-opacity .2s}.kp-vc:hover circle,.kp-vc.on circle{fill-opacity:.5}
.kp-vt{font:800 14px var(--f-ui);fill:var(--ink);pointer-events:none}
.kp-vs{font-size:15px;font-family:var(--f-display)}
.kp-ovl h4{font:800 .74rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.kp-ovl ol{font-size:1rem}

/* ask page */
.askbox{display:grid;gap:12px}
.askrow{display:flex;gap:10px;flex-wrap:wrap}
.askrow input[type=text]{flex:1 1 320px;font-size:1.1rem;padding:18px 22px;border-radius:99px}
.askrow select{width:auto;border-radius:99px;padding:16px 20px;font-weight:600}
.exs{display:flex;flex-wrap:wrap;gap:8px}
.mode-pill{display:inline-flex;gap:8px;align-items:center;font:800 .72rem var(--f-ui);letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:99px;background:var(--warn-bg);color:var(--warn)}
.mode-pill.live{background:var(--ok-bg);color:var(--ok)}
.loadbox{padding:34px;text-align:center;border:2px dashed var(--line);border-radius:var(--r);font:600 1.15rem var(--f-display)}
.dots::after{content:"";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
pre.prompt{white-space:pre-wrap;font:500 .8rem/1.55 ui-monospace,Menlo,Consolas,monospace;background:#10151A;color:#D7DDE3;padding:18px;border-radius:12px;max-height:420px;overflow:auto}
.flow{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));counter-reset:f;list-style:none;padding:0}
.flow li{counter-increment:f;border-top:3px solid var(--ink);padding-top:12px;margin:0;font-size:.95rem}
.flow li::before{content:counter(f);display:block;font:800 1.8rem var(--f-display);color:var(--ink3);line-height:1}
.flow b{display:block;font-family:var(--f-display);font-size:1.1rem}