/* Graphs + Jev showcase. Black, white and Accenture purple carry the identity;
   blue, green, amber and red carry meaning (evidence, answer, review, reject) and
   always appear with a text label. */
:root{
  color-scheme:light;
  --black:#000;--white:#fff;--paper:#f6f4ef;--ink:#0a0a0a;--muted:#4a4a4a;--line:#d6d3cc;--rule:#0a0a0a;
  --purple:#A100FF;--purple-deep:#460073;--purple-mid:#7500C0;--purple-wash:#f3e6ff;
  --evidence:#0067a5;--evidence-wash:#e3f1fa;
  --answer:#0b7a3b;--answer-wash:#e2f4e8;
  --review:#8f4c00;--review-wash:#fbefdc;
  --reject:#b4141b;--reject-wash:#fbe4e4;
  /* Lab chart categories, read by the technical-guide scripts */
  --native:var(--purple);--over:var(--purple-mid);--doc:var(--black);--embed:var(--purple-deep);--warn:var(--reject);
  --bg:var(--white);--code:#f4f2ed;
  --display:clamp(2.6rem,7.2vw,6rem);--h2:clamp(1.9rem,4.2vw,3.2rem);--h3:clamp(1.2rem,2vw,1.5rem);
  --body:clamp(1.02rem,1.1vw,1.12rem);--small:.9rem;--tiny:.78rem;
  --wide:1240px;--measure:66ch;--gutter:clamp(18px,4vw,48px);
  --r-sm:2px;--r-md:4px;
  --header-offset:84px;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--body)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--purple-mid);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--purple-deep)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.02}
h1{font-size:var(--display);letter-spacing:-.04em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);letter-spacing:-.015em;line-height:1.15}
p{margin:0 0 1em;max-width:var(--measure)}
ul,ol{max-width:var(--measure)}
code,pre,textarea,kbd{font-family:var(--mono);font-size:.86em}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Skip link and site header */
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--black);color:var(--white);padding:10px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:var(--white)}
.site-header{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:1px solid var(--rule)}
.site-header .in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:28px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:1.1rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand::before{content:"";width:12px;height:12px;background:var(--purple)}
.brand:hover{color:var(--ink)}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.site-nav a{padding:10px 12px;color:var(--ink);text-decoration:none;font-size:.95rem;white-space:nowrap;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.site-nav a[aria-current="page"],.site-nav a[aria-current="true"]{border-bottom-color:var(--purple);font-weight:600}
.site-nav .cta{margin-left:10px;background:var(--black);color:var(--white);border:0;padding:11px 18px;font-weight:600}
.site-nav .cta:hover{background:var(--purple-deep);color:var(--white)}
@media (max-width:820px){:root{--header-offset:132px}}
@media (max-width:820px){
  .site-header .in{position:relative;flex-wrap:wrap;gap:0;padding-top:10px}
  .brand{min-height:44px;margin-bottom:8px}
  .site-nav{margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter);width:calc(100% + var(--gutter)*2);border-top:1px solid var(--line)}
  .site-nav a{padding:12px 10px;min-height:44px}
  .site-nav .cta{position:absolute;top:10px;right:var(--gutter);margin:0;padding:0 16px;display:flex;align-items:center}
}

/* Page frame */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
section{scroll-margin-top:var(--header-offset)}
.band{padding:clamp(64px,10vw,128px) 0}
.band + .band{border-top:1px solid var(--line)}
.band--paper{background:var(--paper)}
.band--black{background:var(--black);color:var(--white)}
.band--black a{color:#d9a6ff}
.band--black .eyebrow{color:#d9a6ff}
.band--black .lede,.band--black p{color:#e8e8e8}
.band--tight{padding:clamp(40px,6vw,72px) 0}
.eyebrow{display:block;font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple-mid);margin:0 0 18px}
.lede{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.45;color:var(--ink);max-width:40ch}
.section-head{display:grid;gap:20px;margin-bottom:clamp(36px,6vw,64px);max-width:900px}
.section-head p{font-size:1.15rem;margin:0}
.annotation{font-size:var(--small);color:var(--muted);max-width:var(--measure)}
.note{font-size:var(--small);color:var(--muted)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* Hero */
.hero{padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,96px);border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;gap:clamp(32px,5vw,64px);align-items:end}
@media (min-width:960px){.hero .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.hero h1{max-width:12ch}
.hero h1 em{font-style:normal;color:var(--purple)}
.hero .lede{margin:28px 0 36px}
.hero-art{border-left:1px solid var(--rule);padding-left:clamp(0px,3vw,32px)}
@media (max-width:959px){.hero-art{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:24px}}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Buttons and form controls */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border:2px solid var(--black);border-radius:var(--r-sm);background:var(--black);color:var(--white);font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--purple-deep);border-color:var(--purple-deep);color:var(--white)}
.btn--purple{background:var(--purple);border-color:var(--purple)}
.btn--purple:hover{background:var(--purple-deep);border-color:var(--purple-deep)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.band--black .btn--ghost{color:var(--white);border-color:var(--white)}
.band--black .btn--ghost:hover{background:var(--white);color:var(--black)}
.btn[disabled],button[disabled]{opacity:.55;cursor:progress}
.btn::after{content:"→";font-weight:400}
.btn--plain::after{content:none}
button,select,input,textarea{font:inherit;color:var(--ink)}
button{cursor:pointer}
.field{display:grid;gap:8px;margin:0 0 20px}
.field label,.field .label{font-weight:600;font-size:.95rem}
.field .hint{font-size:var(--small);color:var(--muted);margin:0}
.field textarea,.field input{width:100%;padding:14px 16px;border:1.5px solid var(--black);border-radius:var(--r-sm);background:var(--white);font:inherit;font-size:1.05rem;line-height:1.45;resize:vertical}
.field textarea{min-height:96px}
.field textarea:focus,.field input:focus{outline:3px solid var(--purple);outline-offset:0}

/* Numbered narrative */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{border-top:2px solid var(--rule);padding:28px 28px 8px 0;counter-increment:step}
@media (min-width:900px){.steps li + li{padding-left:28px;border-left:1px solid var(--line)}}
.steps li::before{content:"0" counter(step);display:block;font:700 clamp(3rem,6vw,4.6rem)/1 var(--sans);letter-spacing:-.05em;color:var(--purple);margin-bottom:18px}
.steps h3{margin-bottom:12px}
.steps .q{font-weight:600;margin-bottom:10px}
.band--black .steps li{border-top-color:var(--white)}
.band--black .steps li + li{border-left-color:#333}

/* Split and definitions */
.split{display:grid;gap:clamp(28px,5vw,72px)}
@media (min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.split--even{grid-template-columns:1fr 1fr}}
.defs{display:grid;gap:0;margin:0;max-width:none}
.defs div{display:grid;gap:4px 24px;padding:18px 0;border-top:1px solid var(--line)}
@media (min-width:700px){.defs div{grid-template-columns:180px 1fr}}
.defs dt{font-weight:700}
.defs dd{margin:0}

/* Guided example */
.guided{display:grid;gap:clamp(24px,4vw,48px);align-items:start}
@media (min-width:980px){.guided{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.scenarios{display:grid;gap:0;margin:0 0 24px;padding:0;border:0}
.scenarios legend{font-weight:700;margin-bottom:12px;padding:0}
.scenario{display:block;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);padding:16px 14px 16px 18px;position:relative;border-left:4px solid transparent}
.scenario:last-of-type{border-bottom:1px solid var(--line)}
.scenario strong{display:block;font-size:1.05rem;margin-bottom:4px}
.scenario span{display:block;font-size:var(--small);color:var(--muted)}
.scenario:hover{background:var(--paper)}
.scenario[aria-pressed="true"]{border-left-color:var(--purple);background:var(--purple-wash)}
.graph-stage{background:var(--white);border:1px solid var(--rule);padding:clamp(12px,2vw,24px)}
.graph-stage svg{width:100%}
.hops{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;font-size:var(--small)}
.hops button{min-width:44px;min-height:40px;border:1.5px solid var(--black);background:var(--white);border-radius:var(--r-sm);font-weight:600}
.hops button[aria-pressed="true"]{background:var(--black);color:var(--white)}
.node circle{stroke:var(--white);stroke-width:2;cursor:pointer}
.node text{font-size:10px;fill:var(--ink);pointer-events:none}
.node:focus-visible{outline:none}
.node:focus-visible circle{stroke:var(--purple);stroke-width:4}
.node.dim{opacity:.18}.edge.dim{opacity:.1}
.edge line{stroke:#7a7a7a;stroke-width:1.2}
.edge.path line{stroke:var(--evidence);stroke-width:3}
.edge text{font-size:7.5px;fill:var(--muted)}
.edge.path text{fill:var(--evidence);font-weight:700}
.hopbadge{font-size:9px;font-weight:700;fill:#fff;pointer-events:none}

/* Decision results */
.result{border-top:4px solid var(--outcome,var(--black));background:var(--outcome-wash,var(--paper));padding:clamp(18px,3vw,28px);margin-top:24px}
.result[data-outcome="answer"]{--outcome:var(--answer);--outcome-wash:var(--answer-wash)}
.result[data-outcome="clarify"],.result[data-outcome="review"]{--outcome:var(--review);--outcome-wash:var(--review-wash)}
.result[data-outcome="reject"],.result[data-outcome="error"]{--outcome:var(--reject);--outcome-wash:var(--reject-wash)}
.result[data-outcome="no_data"]{--outcome:var(--muted);--outcome-wash:var(--paper)}
.outcome{display:inline-flex;align-items:center;gap:10px;font:700 var(--tiny)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--outcome,var(--black));margin:0 0 12px}
.outcome::before{content:"";width:12px;height:12px;background:var(--outcome,var(--black))}
.result[data-outcome="reject"] .outcome::before,.result[data-outcome="error"] .outcome::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.result[data-outcome="clarify"] .outcome::before,.result[data-outcome="review"] .outcome::before{transform:rotate(45deg) scale(.85)}
.result[data-outcome="answer"] .outcome::before{border-radius:50%}
.result .answer{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.4;font-weight:600;margin:0 0 16px;max-width:52ch}
.result h3{font-size:1rem;letter-spacing:0;margin:22px 0 8px;font-weight:700}
.result ul,.result ol{margin:0;padding-left:1.2em}
.result li{margin:4px 0}
.result .empty{color:var(--muted);font-style:italic}
.evidence-path{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;max-width:none}
.evidence-path li{display:flex;align-items:center;margin:0}
.evidence-path .n{background:var(--white);border:1.5px solid var(--evidence);color:var(--ink);padding:5px 10px;font-weight:600;font-size:.95rem}
.evidence-path .e{color:var(--evidence);font:600 var(--tiny)/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:0 8px}
.evidence-path .e::before{content:"— "}.evidence-path .e::after{content:" →"}
.paths{display:grid;gap:10px}

/* Demo status */
.demo{border-top:2px solid var(--rule);padding-top:clamp(24px,4vw,40px)}
.demo-status{display:flex;align-items:center;gap:10px;font-size:var(--small);color:var(--muted);margin:16px 0 0;min-height:1.6em}
.demo-status::before{content:"";width:8px;height:8px;background:var(--muted);flex:none}
.demo-status[data-state="working"]::before{background:var(--purple);animation:pulse 1s ease-in-out infinite}
.demo-status[data-state="done"]::before{background:var(--answer)}
.demo-status[data-state="error"]{color:var(--reject);font-weight:600}
.demo-status[data-state="error"]::before{background:var(--reject)}
@keyframes pulse{50%{opacity:.25}}
.scenario-row{display:grid;gap:0;margin:8px 0 24px;max-width:none}
@media (min-width:760px){.scenario-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.scenario-row .scenario{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:760px){.scenario-row .scenario + .scenario{border-left:1px solid var(--line)}}

/* Use-case feature rows */
.feature{display:grid;gap:clamp(24px,4vw,56px);padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--rule);align-items:center}
@media (min-width:900px){.feature{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}.feature:nth-of-type(even) .feature-art{order:2}}
.feature:last-child{border-bottom:1px solid var(--rule)}
.feature-art{background:var(--paper);aspect-ratio:16/10;overflow:hidden}
.feature-art img{width:100%;height:100%;object-fit:cover}
.feature .label{display:block;font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple-mid);margin-bottom:12px}
.feature h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:20px}
.facts{margin:0 0 24px;display:grid;gap:0;max-width:none}
.facts div{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:2px 20px}
@media (min-width:640px){.facts div{grid-template-columns:150px 1fr}}
.facts dt{font-weight:700;font-size:var(--small)}
.facts dd{margin:0}

/* Use-case pages */
.crumb{font-size:var(--small);margin:0 0 28px}
.crumb a{color:var(--ink)}
.page-hero{padding:clamp(48px,8vw,104px) 0 clamp(40px,6vw,72px)}
.page-hero .wrap{display:grid;gap:clamp(28px,5vw,64px);align-items:end}
@media (min-width:960px){.page-hero .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.8rem);max-width:14ch}
.page-hero .lede{margin:24px 0 0}
.page-hero .boundary{margin-top:28px}
.page-art{background:var(--paper);border:1px solid var(--rule)}
.brief{display:grid;gap:0;margin:0;max-width:none}
@media (min-width:860px){.brief{grid-template-columns:repeat(4,minmax(0,1fr))}}
.brief div{border-top:2px solid var(--rule);padding:20px 24px 8px 0}
@media (min-width:860px){.brief div + div{padding-left:24px;border-left:1px solid var(--line)}}
.brief dt{font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--purple-mid);margin-bottom:10px}
.brief dd{margin:0;font-size:1.05rem}
.boundary{border-left:4px solid var(--reject);background:var(--reject-wash);padding:18px 22px;max-width:var(--measure);margin:0}
.boundary strong{display:block;margin-bottom:4px}
.boundary--scope{border-left-color:var(--evidence);background:var(--evidence-wash)}
.demo-grid{display:grid;gap:clamp(28px,5vw,64px)}
@media (min-width:980px){.demo-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* Small-world reach */
.reach{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
.reach li{display:grid;gap:8px 24px;padding:22px 14px;border-top:1px solid var(--line);align-items:center}
@media (min-width:760px){.reach li{grid-template-columns:120px minmax(0,1fr) 220px}}
.reach .hop{font:700 1.6rem/1 var(--sans);letter-spacing:-.03em}
.reach .meter{height:18px;background:var(--paper);position:relative}
.reach .meter span{position:absolute;inset:0 auto 0 0;background:var(--c,var(--purple))}
.reach .what{font-size:var(--small)}
.reach li[aria-current="true"]{background:var(--purple-wash);border-top-color:var(--purple)}

/* Technical disclosures */
details.tech{border-top:1px solid var(--rule);padding:0;margin:0}
details.tech:last-of-type{border-bottom:1px solid var(--rule)}
details.tech > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:700;font-size:var(--h3);letter-spacing:-.015em}
details.tech > summary::-webkit-details-marker{display:none}
details.tech > summary::after{content:"+";font:400 2rem/1 var(--sans);color:var(--purple)}
details.tech[open] > summary::after{content:"−"}
details.tech > summary small{display:block;font:400 var(--small)/1.4 var(--sans);color:var(--muted);letter-spacing:0;margin-top:4px}
details.tech > .body{padding:0 0 36px}
details.inline{margin:18px 0 0}
details.inline > summary{cursor:pointer;font-weight:600;color:var(--purple-mid)}
details.inline pre{margin-top:10px}

/* Proof list */
.proof{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
@media (min-width:860px){.proof{grid-template-columns:1fr 1fr}}
.proof li{padding:24px 24px 20px 0;border-top:1px solid #333}
@media (min-width:860px){.proof li:nth-child(even){padding-left:24px;border-left:1px solid #333}}
.proof strong{display:block;font-size:1.2rem;margin-bottom:6px;color:var(--white)}

/* Spanner Graph event spotlight: Google blue marks the feature, never a score */
.spotlight{--gblue:#1a73e8;--gblue-ink:#1558b0;--gblue-wash:#e8f0fe;border-top:4px solid var(--gblue);padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,56px);margin:0 0 clamp(36px,5vw,56px)}
.spotlight-main{display:grid;gap:clamp(28px,5vw,64px);align-items:start}
@media (min-width:960px){.spotlight-main{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.spotlight .eyebrow{color:var(--gblue-ink)}
.spotlight-product{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.05rem;margin:0 0 14px}
.spotlight-product img{width:32px;height:32px;object-fit:contain;flex:none}
.spotlight h3{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;line-height:1.04;max-width:16ch;margin:0 0 22px}
.spotlight-lede{font-size:1.15rem}
.spotlight-claims{margin:0 0 20px;padding:0;list-style:none}
.spotlight-claims li{padding:10px 0 10px 18px;border-top:1px solid var(--line);position:relative}
.spotlight-claims li::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:8px;background:var(--gblue)}
.spotlight-links{display:flex;flex-wrap:wrap;gap:0 22px;margin:12px 0 0;padding:0;list-style:none;font-size:var(--small)}
.spotlight-links a{display:inline-block;padding:6px 0;color:var(--gblue-ink);font-weight:600}
.spotlight-links a:hover{color:var(--ink)}
.spotlight-art{margin:0;background:var(--white);border-left:1px solid var(--rule);padding-left:clamp(0px,3vw,32px)}
@media (max-width:959px){.spotlight-art{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:24px;max-width:520px}}
.spotlight-fit{display:grid;gap:0;margin-top:clamp(32px,5vw,56px)}
@media (min-width:860px){.spotlight-fit{grid-template-columns:1fr 1fr}.spotlight-fit section + section{padding-left:32px;border-left:1px solid var(--line)}}
.spotlight-fit section{border-top:2px solid var(--rule);padding:20px 24px 0 0}
.spotlight-fit h4{font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.spotlight-fit section:first-child h4{color:var(--answer)}
.spotlight-fit section:last-child h4{color:var(--review)}
.spotlight-fit ul{margin:0;padding-left:1.1em}
.spotlight-fit li{margin:0 0 8px}

/* Technical guide: labs, charts, tables, snippets */
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:clamp(14px,2vw,22px);min-width:0}
.lab{margin-top:28px}
.lab h3{margin-bottom:10px}
.lab .params{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin:12px 0}
.lab label{font-size:var(--small);color:var(--muted)}
.lab input[type=text],.lab input:not([type]),.lab select,.lab input[type=number]{border:1px solid var(--black);border-radius:var(--r-sm);padding:8px 10px;background:var(--white);font:inherit;font-size:.95rem}
.lab button,.controls button,.tabs button{border:1.5px solid var(--black);background:var(--white);border-radius:var(--r-sm);padding:8px 14px;font-size:.92rem;font-weight:600}
.lab button.primary,.controls button.primary{background:var(--purple);border-color:var(--purple);color:var(--white)}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 0}
.lab button[aria-pressed="true"],.controls button[aria-pressed="true"],.tabs button[aria-pressed="true"]{background:var(--black);color:var(--white);border-color:var(--black)}
input[type=range]{width:180px;accent-color:var(--purple)}
.lab textarea{width:100%;min-height:220px;background:var(--code);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;line-height:1.45;tab-size:2}
.lab details{margin:12px 0}
.lab summary{cursor:pointer;color:var(--purple-mid);font-weight:600}
.out{background:var(--code);border-left:3px solid var(--purple);padding:14px;margin-top:12px;font-size:.92rem;overflow-x:auto}
.out .path{font-family:var(--mono);font-size:.8rem;display:block;margin:3px 0}
.err{color:var(--reject);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:var(--small);color:var(--muted);margin:12px 0 14px}
.legend span::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;background:var(--c)}
.chart{margin-top:8px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700;border-bottom-color:var(--black)}
td.num{text-align:center;font-weight:700}
.pill{display:inline-block;white-space:nowrap;font-size:.78rem;padding:2px 8px;border-radius:var(--r-sm);color:#fff;background:var(--c)}
.bars{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:8px 12px;align-items:center;font-size:.92rem}
.bars .blab{padding:3px 0}
@media (max-width:640px){.bars{grid-template-columns:minmax(0,1fr);gap:2px}.bars .track{margin-bottom:12px}}
/* Engine labels: verified marks get a fixed slot; unverified marks leave that slot blank */
.elabel{position:relative;display:inline-flex;align-items:center;gap:10px;min-width:0;vertical-align:middle}
.emark{position:relative;flex:none;width:60px;height:22px;display:flex;align-items:center}
.emark::before{content:attr(data-initials);display:none;place-items:center;width:30px;height:22px;border:1px solid var(--ink);background:var(--white);color:var(--ink);font:700 .66rem/1 var(--mono);letter-spacing:.04em}
.emark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;background:var(--white)}
.etext{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:24ch;line-height:1.25}
.elabel--text .emark{opacity:0}
.heat .etext{max-width:none}
.bars .track{position:relative;min-height:24px;display:flex;align-items:center;gap:8px}
.bars .bar{height:20px;background:var(--c);flex:none}
.bars .rng{height:20px;background:var(--c);opacity:.35;flex:none;margin-left:-8px}
.bars .val{font-weight:700;white-space:nowrap;font-size:.86rem}
.bars .val.soft{font-weight:400;font-style:italic;color:var(--muted);white-space:normal}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
pre{background:var(--code);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;overflow-x:auto;margin:0;line-height:1.45;max-width:100%}
.snip{position:relative;min-width:0}
.copy{position:absolute;top:8px;right:8px;font-size:.8rem;padding:4px 10px;border:1px solid var(--black);background:var(--white);border-radius:var(--r-sm)}
.runlist{display:grid;gap:18px}
.runlist > *{min-width:0}

/* Context story (DCCEEW): teal is RAG, raspberry is MCP, blue is the graph, purple is Jev */
.ctx{--rag:#00737a;--rag-wash:#e0f2f1;--mcp:#a3165a;--mcp-wash:#fbe7f0;--graph:var(--evidence);--jev:var(--purple-mid)}
.layers{display:grid;gap:0;margin:0;padding:0;list-style:none;max-width:none;counter-reset:layer}
@media (min-width:860px){.layers{grid-template-columns:repeat(4,minmax(0,1fr))}}
.layers li{border-top:4px solid var(--c);padding:18px 24px 8px 0;counter-increment:layer}
@media (min-width:860px){.layers li + li{padding-left:24px;border-left:1px solid var(--line)}}
.layers b{display:block;font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.layers b::before{content:"0" counter(layer) " · "}
.layers span{display:block;font-size:1.05rem}
.layers a{color:inherit;text-decoration:none}
.layers a:hover span{text-decoration:underline}
.ask{border-left:4px solid var(--black);background:var(--paper);padding:18px 22px;margin:0 0 28px;font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:600;max-width:40ch}
.ask small{display:block;font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ctx .split > .section-head{align-content:start}
.needs th[scope="row"],.fitgrid tbody th{border-bottom-color:var(--line)}
.needs th[scope="row"]{font-weight:600;width:44%}
.needs td:nth-child(2){white-space:nowrap}
.shape{display:inline-block;font:600 var(--tiny)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border:1.5px solid currentColor;border-radius:var(--r-sm)}
@media (max-width:700px){
  .needs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .needs,.needs tbody,.needs tr,.needs th,.needs td{display:block;width:auto!important}
  .needs tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .needs th,.needs td{border:0;padding:3px 0}
}
.routes{display:grid;gap:0;max-width:none}
@media (min-width:900px){.routes{grid-template-columns:1fr 1fr}.routes > div + div{padding-left:32px;border-left:1px solid var(--line)}}
.routes > div{border-top:4px solid var(--c);padding:22px 32px 8px 0}
.routes h3{color:var(--c);margin-bottom:6px}
.routes .kind{font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.routes dl{margin:16px 0 0}
.routes dt{font-weight:700;font-size:var(--small);margin-top:12px}
.routes dd{margin:2px 0 0}
.joint{border-left:4px solid var(--ink);padding:14px 20px;margin:28px 0 0;background:var(--white);max-width:var(--measure)}
.fit-title{margin:clamp(40px,6vw,64px) 0 14px}
.fitgrid th,.fitgrid td{padding:14px 12px;vertical-align:top}
.fitgrid thead th:nth-child(1){color:var(--rag)}
.fitgrid thead th:nth-child(3){color:var(--mcp)}
.fitgrid tbody th{font-weight:700;width:18%}
.fitgrid tbody th small{display:block;font-weight:400;color:var(--muted);font-size:var(--tiny)}
.fit{display:inline-block;font:700 var(--tiny)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;margin:0 0 6px;border:1.5px solid var(--c);color:var(--c);border-radius:var(--r-sm)}
.fit--strong{background:var(--c);color:var(--white)}
.fit--weak{border-style:dashed}
.fitgrid td.r{--c:var(--rag)} .fitgrid td.m{--c:var(--mcp)}
@media (max-width:700px){
  .fitgrid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .fitgrid,.fitgrid tbody,.fitgrid tr,.fitgrid th,.fitgrid td{display:block;width:auto!important}
  .fitgrid tr{display:grid;padding:14px 0;border-bottom:1px solid var(--line)}
  .fitgrid tbody th{order:-1;font-size:1.1rem}
  .fitgrid th,.fitgrid td{border:0;padding:4px 0}
  .fitgrid td::before{content:attr(data-k) " · ";font-weight:700;color:var(--c)}
}
.limits{display:grid;gap:0;margin:clamp(28px,4vw,40px) 0 0;max-width:none;list-style:none;padding:0}
@media (min-width:860px){.limits{grid-template-columns:repeat(4,minmax(0,1fr))}.limits li + li{padding-left:20px;border-left:1px solid var(--line)}}
.limits li{border-top:2px solid var(--mcp);padding:16px 20px 4px 0;font-size:var(--small)}
.limits strong{display:block;font-size:1rem;margin-bottom:4px}
.handoff{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:600;line-height:1.35;max-width:46ch;margin:clamp(40px,6vw,64px) 0 0;padding-top:24px;border-top:2px solid var(--rule)}
.handoff em{font-style:normal;color:var(--graph)}
.tag{display:inline-block;font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--review);border:1.5px solid var(--review);padding:5px 9px;margin:0 0 18px}
.flow{display:grid;gap:12px;align-items:stretch;margin-top:8px}
@media (min-width:980px){.flow{grid-template-columns:minmax(0,1fr) 28px minmax(0,1.25fr) 28px minmax(0,1.35fr);align-items:center}}
.flow .arrow{display:grid;place-items:center;font-size:1.5rem;color:var(--muted)}
@media (max-width:979px){.flow .arrow{transform:rotate(90deg)}}
.node-box{border:1.5px solid var(--c,var(--rule));background:var(--white);padding:16px 18px}
.node-box b{display:block;font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--muted));margin-bottom:6px}
.node-box strong{display:block;font-size:1.1rem;margin-bottom:4px}
.node-box p,.node-box ul{font-size:var(--small);margin:6px 0 0;color:var(--muted)}
.node-box ul{padding-left:1.1em}
.node-box--jev{border-width:3px}
.node-box--review{border-style:dashed}
.outlets{display:grid;gap:8px}
.outlets .node-box{padding:12px 16px}
.outlets .node-box strong{font-size:1rem;margin:0}
.trio{display:grid;gap:0;max-width:none}
@media (min-width:900px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}.trio > div + div{padding-left:24px;border-left:1px solid var(--line)}}
.trio > div{border-top:4px solid var(--c);padding:18px 24px 8px 0}
.trio b{display:block;font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:10px}
.trio q{display:block;font-family:var(--mono);font-size:.86rem;background:var(--white);border:1px solid var(--line);padding:10px 12px;quotes:none}
.trio p{font-size:var(--small);margin:10px 0 0}
.chain-wrap{background:var(--white);border:1px solid var(--rule);padding:clamp(18px,3vw,28px);margin-top:clamp(28px,4vw,40px)}
.chain-wrap h3{font-size:1rem;letter-spacing:0;margin:0 0 14px}
.asks{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
.asks li{display:grid;gap:4px 28px;padding:18px 0;border-top:1px solid #333}
@media (min-width:760px){.asks li{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.asks strong{color:var(--white);font-size:1.1rem}
.asks span{font-family:var(--mono);font-size:.86rem;color:#d9a6ff}
.outcomes{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none;max-width:none}
.outcomes li{border:1.5px solid #666;padding:8px 14px;font-weight:600;color:var(--white)}
.trail{counter-reset:stage}
.trail li .n small{display:block;font:600 .66rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.trail li[data-layer="show"] .n{border-color:var(--ink)}
.trail li[data-layer="graph"] .n{border-color:var(--graph)}
.trail li[data-layer="jev"] .n{border-color:var(--purple-mid)}
.trail li[data-layer="graph"] .n small{color:var(--graph)}
.trail li[data-layer="jev"] .n small{color:var(--purple-mid)}
.trail .e::before{content:none}.trail .e{padding:0 6px}.trail .e::after{content:"→"}
.now-next{display:grid;gap:0;max-width:none}
@media (min-width:860px){.now-next{grid-template-columns:1fr 1fr}.now-next > section + section{padding-left:32px;border-left:1px solid var(--line)}}
.now-next > section{border-top:2px solid var(--rule);padding:20px 32px 0 0}
.now-next h3{font:600 var(--tiny)/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.now-next section:first-child h3{color:var(--answer)}
.now-next section:last-child h3{color:var(--review)}
.now-next ul{margin:0;padding-left:1.1em}
.now-next li{margin:0 0 8px}
.cites{font-size:var(--small);color:var(--muted)}
.cites li{margin:0 0 6px}

/* Footer */
.site-footer{background:var(--black);color:#cfcfcf;padding:48px 0;font-size:var(--small)}
.site-footer a{color:#d9a6ff}
.site-footer p{max-width:90ch}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}