/* ===== COGI.CO — site.css =====
   Base rules (the published prototype received these from its host; a standalone site needs them here). */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}

/* Layout concept: a position statement set wide and quiet — Jost Light headlines on a cream editorial ground,
   blue only where the brand speaks (.CO, the mandorla, the eyebrows). The product areas (Proof, Agora, Dialogue)
   switch to the cold-white "interface" environment of the identity sheet. */
:root{
  --bg:#F4EFE6; --bg-2:#FBF8F2; --bg-3:#EDE6DA;
  --ink:#141418; --ink-2:#55555E; --ink-3:#8A8A94;
  --line:#D9D2C5; --line-2:#E8E2D6;
  --blue:#1B37E8; --blue-deep:#0F1F8C; --blue-tint:#E6EAFC; --blue-tint-2:#F1F3FD; --on-blue:#FFFFFF;
  --ui-bg:#F6F8FF; --ui-bg-2:#FFFFFF; --ui-line:#D5DBF5; --ui-ink:#10163A; --ui-ink-2:#4B5280;
  --ok:#1E7A4C; --ok-tint:#E3F3EA; --warn:#8A5A00; --warn-tint:#F8EFD9; --bad:#B23A3A;
  --shadow:0 18px 50px rgba(20,20,24,.08);
  --font-display:"Jost","Avenir Next","Futura","Helvetica Neue",Arial,sans-serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --radius:4px; --max:1180px; --gutter:clamp(16px,4vw,48px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141418; --bg-2:#1B1B21; --bg-3:#101014;
    --ink:#F1ECE2; --ink-2:#B9B5AC; --ink-3:#7F7D86;
    --line:#2C2C34; --line-2:#222229;
    --blue:#5C74FF; --blue-deep:#9AA8FF; --blue-tint:#1A2150; --blue-tint-2:#161B3C; --on-blue:#0B0F2E;
    --ui-bg:#0F1226; --ui-bg-2:#151937; --ui-line:#2A3160; --ui-ink:#E9ECFF; --ui-ink-2:#A9B1E6;
    --ok:#6CCB94; --ok-tint:#15301F; --warn:#E0B55A; --warn-tint:#3A2E12; --bad:#F08A8A;
    --shadow:0 18px 50px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141418; --bg-2:#1B1B21; --bg-3:#101014;
  --ink:#F1ECE2; --ink-2:#B9B5AC; --ink-3:#7F7D86;
  --line:#2C2C34; --line-2:#222229;
  --blue:#5C74FF; --blue-deep:#9AA8FF; --blue-tint:#1A2150; --blue-tint-2:#161B3C; --on-blue:#0B0F2E;
  --ui-bg:#0F1226; --ui-bg-2:#151937; --ui-line:#2A3160; --ui-ink:#E9ECFF; --ui-ink-2:#A9B1E6;
  --ok:#6CCB94; --ok-tint:#15301F; --warn:#E0B55A; --warn-tint:#3A2E12; --bad:#F08A8A;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.section + .section{border-top:1px solid var(--line-2)}
.eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:1.1rem}
.title{font-size:clamp(1.9rem,3.8vw,3.1rem);max-width:22ch}
.title.wide{max-width:30ch}
.lead{font-size:1.15rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.prose{max-width:66ch;color:var(--ink-2)}
.prose p + p{margin-top:1rem}
.measure{max-width:66ch}
.stack{display:grid;gap:1.25rem;align-content:start}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.mono{font-family:var(--font-mono);font-size:.82rem}
.small{font-size:.92rem;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.co{color:var(--blue)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pull{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.2;color:var(--ink);border-left:2px solid var(--blue);padding-left:1.25rem;max-width:26ch}
.rule{height:1px;background:var(--line);border:0;margin:0}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .6rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--bg-2);white-space:nowrap}
.chip.blue{color:var(--blue);border-color:var(--blue-tint);background:var(--blue-tint-2)}
.chip.ok{color:var(--ok);background:var(--ok-tint);border-color:transparent}
.chip.warn{color:var(--warn);background:var(--warn-tint);border-color:transparent}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.25rem;border-radius:var(--radius);border:1px solid var(--blue);background:var(--blue);color:var(--on-blue);font-family:var(--font-display);font-weight:400;font-size:1rem;letter-spacing:.03em;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px);background:var(--blue-deep);border-color:var(--blue-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.small{padding:.5rem .85rem;font-size:.9rem}
.btn[disabled]{opacity:.5;cursor:default;transform:none}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.head-row{display:flex;align-items:center;gap:1.25rem;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.brand .glyph{width:28px;height:28px;flex:none}
.wordmark{font-family:var(--font-display);font-weight:400;font-size:1.12rem;letter-spacing:.2em;line-height:1}
.wordmark .co{color:var(--blue)}
.nav{display:flex;gap:1.1rem;margin-left:auto;align-items:center}
.nav a{font-family:var(--font-display);font-weight:400;font-size:.9rem;letter-spacing:.02em;text-decoration:none;color:var(--ink-2);padding:.3rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.active{color:var(--ink);border-bottom-color:var(--blue)}
.head-tools{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav + .head-tools{margin-left:1.25rem}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--bg-2)}
.lang button,.lang a{text-decoration:none;border:0;background:transparent;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;padding:.35rem .45rem;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.lang button[aria-pressed="true"],.lang a[aria-current="true"]{background:var(--ink);color:var(--bg)}
.icon-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.menu-btn{display:none}
.head-cta{white-space:nowrap}
@media (max-width:1500px){.head-cta{display:none}}
@media (max-width:1180px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .head-cta{display:none}
}
@media (max-width:480px){.head-row{gap:.6rem}.head-tools{gap:.4rem}.lang button,.lang a{padding:.3rem .36rem;font-size:.64rem;letter-spacing:.04em}.icon-btn{width:34px;height:34px}.wordmark{font-size:1rem;letter-spacing:.16em}}
.mobile-nav{display:none;border-top:1px solid var(--line-2);background:var(--bg)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:.9rem 0;border-bottom:1px solid var(--line-2);text-decoration:none;font-family:var(--font-display);font-size:1.1rem}
.mobile-nav .btn{margin-block:1rem}

/* ---------- glyph ---------- */
.glyph .ring{fill:none;stroke:currentColor;stroke-width:6}
.glyph .mand{fill:var(--blue);transform-origin:50% 50%}
.glyph.mono .mand{fill:none;stroke:currentColor;stroke-width:6}
.glyph.animate .mand{animation:mandOpen 900ms cubic-bezier(.2,.7,.2,1) both}
.glyph.animate .ring{animation:ringIn 600ms ease both}
@keyframes mandOpen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ringIn{from{opacity:0}to{opacity:1}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.5rem,8vw,7rem) clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,5rem);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.motto{font-family:var(--font-display);font-weight:300;font-size:clamp(2.35rem,7.2vw,5.6rem);letter-spacing:.06em;line-height:1.02;margin-top:.5rem}
.motto .co{color:var(--blue)}
.market-line{font-family:var(--font-display);font-weight:400;font-size:clamp(1.25rem,2.4vw,1.75rem);margin-top:1.2rem;color:var(--ink)}
.hero .lead{margin-top:1.5rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-visual{display:grid;justify-items:center;gap:1.75rem}
.hero-visual .glyph{width:min(240px,55vw);height:auto;color:var(--ink)}
.device{text-align:center;min-height:5.4rem}
.device .word{font-family:var(--font-display);font-size:clamp(1.3rem,2.8vw,1.9rem);letter-spacing:.14em;line-height:1.1;white-space:nowrap}
.device .word .fixed{font-weight:400}
.device .word .co{color:var(--blue);font-weight:400}
.device .word .tail{font-weight:300;display:inline-block;transition:opacity .45s ease,transform .45s ease}
.device .word .tail.out{opacity:0;transform:translateY(.35em)}
.device .caption{margin-top:.55rem;font-size:.95rem;color:var(--ink-2);transition:opacity .45s ease}
.device .caption.out{opacity:0}
.questions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1.25rem;border-top:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem}
.questions .q{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.55rem);font-weight:300}
.questions .q b{display:block;font-family:var(--font-mono);font-weight:400;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:.4rem}

/* ---------- manifesto ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trio > div{padding:1.6rem 1.4rem 1.6rem 0;border-right:1px solid var(--line-2)}
.trio > div:last-child{border-right:0}
.trio > div + div{padding-left:1.4rem}
@media (max-width:760px){.trio{grid-template-columns:1fr}.trio > div{border-right:0;border-bottom:1px solid var(--line-2);padding-left:0}.trio > div:last-child{border-bottom:0}}
.trio .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.trio h3{font-size:1.5rem;margin:.5rem 0 .6rem}
.trio p{color:var(--ink-2)}
.link{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-tint);font-weight:500}
.link:hover{border-bottom-color:var(--blue)}

/* ---------- what ---------- */
.leaves{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1rem 2rem}
.leaves div{border-top:1px solid var(--line);padding-top:.9rem}
.leaves h4{font-size:1.15rem;font-weight:400;margin-bottom:.35rem}
.leaves p{color:var(--ink-2);font-size:.98rem}

/* ---------- selftwin ---------- */
.mirror{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2)}
.mirror .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr);gap:0;border-top:1px solid var(--line-2)}
.mirror .row:first-child{border-top:0;background:var(--bg-3)}
.mirror .row > div{padding:.9rem 1rem;min-width:0}
.mirror .row > div + div{border-left:1px solid var(--line-2)}
.mirror .row:first-child > div{font-family:var(--font-display);font-size:1.15rem}
.mirror .row:first-child .sel{color:var(--blue)}
.mirror .row:first-child .q{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem}
.mirror .prop{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:1.05rem}
.mirror .sel{font-weight:500}
@media (max-width:640px){.mirror .row{grid-template-columns:1fr}.mirror .row > div + div{border-left:0;border-top:1px dashed var(--line-2)}.mirror .prop{padding-top:.9rem}}
.constraints{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.constraints span{font-family:var(--font-display);font-size:1.1rem;padding:.5rem .9rem;border:1px solid var(--ink);border-radius:999px}
.constraints span.hi{background:var(--ink);color:var(--bg)}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1.25rem 2rem;list-style:none;margin:0;padding:0}
.steps li{border-top:1px solid var(--line);padding-top:.9rem}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--blue)}
.steps h4{font-size:1.12rem;font-weight:400;margin:.35rem 0 .35rem}
.steps p{color:var(--ink-2);font-size:.97rem}

/* ---------- thyra ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1.25rem}
.caps div{padding:1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
.caps h4{font-family:var(--font-display);font-size:1.7rem;font-weight:300;margin-bottom:.5rem}
.caps h4 b{font-family:var(--font-mono);font-weight:400;font-size:.7rem;letter-spacing:.14em;color:var(--blue);display:block;margin-bottom:.4rem}
.caps p{color:var(--ink-2);font-size:.97rem}
.scale{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:1.25rem}
.scale .lbl{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:.4rem}
.scale span.s{font-family:var(--font-display);padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--bg-2)}
.scale span.s:nth-child(2){border-color:var(--blue);color:var(--blue)}
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line)}
.ladder li{padding:1rem .9rem 1rem 0;border-right:1px solid var(--line-2);min-width:0}
.ladder li + li{padding-left:.9rem}
.ladder li:last-child{border-right:0}
.ladder .m{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--blue)}
.ladder h4{font-size:1.15rem;font-weight:400;margin:.3rem 0 .35rem}
.ladder p{font-size:.9rem;color:var(--ink-2)}
.ladder li:nth-child(3) h4{color:var(--blue)}
@media (max-width:1000px){.ladder{grid-template-columns:repeat(3,1fr)}.ladder li:nth-child(3){border-right:0}.ladder li:nth-child(4){padding-left:0;border-top:1px solid var(--line-2)}.ladder li:nth-child(n+5){border-top:1px solid var(--line-2)}}
@media (max-width:620px){.ladder{grid-template-columns:1fr}.ladder li{border-right:0;padding-left:0;border-top:1px solid var(--line-2)}.ladder li:first-child{border-top:0}}
.flow-card{border:1px solid var(--ink);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);background:var(--bg-2)}
.flow-card h3{font-size:1.8rem;margin-bottom:1rem}
.flow-card ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.flow-card li{padding-left:1.2rem;position:relative;color:var(--ink-2)}
.flow-card li::before{content:"";position:absolute;left:0;top:.72em;width:.5rem;height:1px;background:var(--blue)}
.flow-card .promise{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line);font-family:var(--font-display);font-size:1.2rem}

/* ---------- value+ ---------- */
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:640px){.triptych{grid-template-columns:1fr}}
.triptych div{border-top:2px solid var(--ink);padding-top:1rem}
.triptych div:nth-child(2){border-top-color:var(--blue)}
.triptych .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.triptych h4{font-family:var(--font-display);font-size:1.6rem;font-weight:300;margin:.3rem 0 .4rem}
.triptych p{color:var(--ink-2);font-size:.98rem}
.cycle{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:2.25rem;position:relative}
.cycle::before{content:"";position:absolute;left:0;right:0;top:.55rem;height:1px;background:var(--line)}
.cycle div{padding:1.4rem .9rem 0 0;position:relative;min-width:0}
.cycle div::before{content:"";position:absolute;top:0;left:0;width:1.1rem;height:1.1rem;border-radius:999px;background:var(--bg);border:1px solid var(--ink)}
.cycle div:nth-child(2)::before,.cycle div:nth-child(3)::before{background:var(--blue);border-color:var(--blue)}
.cycle h4{font-size:1.15rem;font-weight:400}
.cycle p{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);margin-top:.3rem;letter-spacing:.02em}
@media (max-width:760px){.cycle{grid-template-columns:1fr;gap:.2rem}.cycle::before{top:0;bottom:0;left:.55rem;right:auto;width:1px;height:auto}.cycle div{padding:0 0 1.2rem 2rem}.cycle div::before{top:.2rem}}

/* ---------- nine axes ---------- */
.axes-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media (max-width:860px){.axes-wrap{grid-template-columns:1fr}}
.axes-svg{width:100%;max-width:560px;margin-inline:auto;display:block}
.axes-svg .edge{stroke:var(--blue);stroke-opacity:.28;stroke-width:1}
.axes-svg .edge.hi{stroke-opacity:.9;stroke-width:1.6}
.axes-svg .node ellipse{fill:var(--bg);stroke:var(--blue);stroke-width:2.2;cursor:pointer;transition:fill .2s}
.axes-svg .node.human ellipse{stroke:var(--ink)}
.axes-svg .node.active ellipse{fill:var(--blue)}
.axes-svg .node.human.active ellipse{fill:var(--ink)}
.axes-svg .node text{font-family:var(--font-body);font-size:12.5px;font-weight:600;fill:var(--blue);text-anchor:middle;pointer-events:none}
.axes-svg .node.human text{fill:var(--ink)}
.axes-svg .node.active text{fill:var(--bg)}
.axes-svg .center{font-family:var(--font-display);font-size:14px;fill:var(--ink-3);text-anchor:middle;font-style:italic}
.axis-panel{border-left:2px solid var(--blue);padding-left:1.25rem;min-height:9rem}
.axis-panel .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.axis-panel h3{font-size:2rem;margin:.3rem 0 .6rem}
.axis-panel p{color:var(--ink-2);font-size:1.05rem}
.axis-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem}
.axis-tabs button{border:1px solid var(--line);background:var(--bg-2);border-radius:999px;padding:.3rem .7rem;font-size:.85rem;cursor:pointer}
.axis-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- offer ---------- */
.offer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
@media (max-width:1000px){.offer{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.offer{grid-template-columns:1fr}}
.offer article{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:var(--bg-2);display:grid;gap:.7rem;align-content:start}
.offer article.hi{border-color:var(--blue)}
.offer h3{font-size:1.45rem}
.offer p{color:var(--ink-2);font-size:.97rem}
.offer .tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

/* ---------- interface environment (proof, agora, dialogue) ---------- */
.ui{background:var(--ui-bg);color:var(--ui-ink)}
.ui .eyebrow{color:var(--blue)}
.ui .lead,.ui .prose,.ui .small{color:var(--ui-ink-2)}
.ui .section + .section{border-top-color:var(--ui-line)}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--ui-line);margin-top:2rem;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:.8rem 1rem;font-family:var(--font-display);font-size:1.05rem;cursor:pointer;color:var(--ui-ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ui-ink);border-bottom-color:var(--blue)}
.panel{padding-top:2rem}
.dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1000px){.dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dl{grid-template-columns:1fr}}
.dl article{background:var(--ui-bg-2);border:1px solid var(--ui-line);border-radius:var(--radius);padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.dl .meta{display:flex;flex-wrap:wrap;gap:.4rem}
.dl h4{font-size:1.2rem;font-weight:400;font-family:var(--font-display)}
.dl p{font-size:.94rem;color:var(--ui-ink-2)}
.dl .foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:auto;padding-top:.6rem}
.ui .chip{background:var(--ui-bg);border-color:var(--ui-line);color:var(--ui-ink-2)}
.ui .chip.blue{color:var(--blue);background:var(--blue-tint-2);border-color:var(--blue-tint)}
.ui .chip.ok{color:var(--ok);background:var(--ok-tint);border-color:transparent}
.ui .chip.warn{color:var(--warn);background:var(--warn-tint);border-color:transparent}
.ui .btn.ghost{color:var(--ui-ink);border-color:var(--ui-ink)}
.ui .btn.ghost:hover{background:var(--ui-ink);color:var(--ui-bg)}
.upload{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem}
@media (max-width:860px){.upload{grid-template-columns:1fr}}
.kinds{display:grid;gap:.5rem}
.kinds label{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .9rem;border:1px solid var(--ui-line);border-radius:var(--radius);background:var(--ui-bg-2);cursor:pointer}
.kinds label:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.kinds input{margin-top:.3rem;accent-color:var(--blue)}
.drop{border:1.5px dashed var(--ui-line);border-radius:var(--radius);padding:2rem 1.25rem;text-align:center;background:var(--ui-bg-2);transition:border-color .15s,background .15s}
.drop.over{border-color:var(--blue);background:var(--blue-tint-2)}
.drop p{color:var(--ui-ink-2)}
.files{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.files li{background:var(--ui-bg-2);border:1px solid var(--ui-line);border-radius:var(--radius);padding:.8rem .9rem;display:grid;gap:.3rem}
.files .name{font-weight:500;overflow-wrap:anywhere}
.files .hash{font-family:var(--font-mono);font-size:.74rem;color:var(--ui-ink-2);overflow-wrap:anywhere}
.receipt{margin-top:1rem;border-left:2px solid var(--ok);background:var(--ui-bg-2);padding:1rem 1.1rem;border-radius:0 var(--radius) var(--radius) 0;display:none}
.receipt.show{display:block}
.gates{display:grid;gap:.4rem}
.gate{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;padding:.65rem .9rem;background:var(--ui-bg-2);border:1px solid var(--ui-line);border-radius:var(--radius)}
.gate .id{font-family:var(--font-mono);font-size:.78rem;color:var(--blue);padding-top:.15rem;min-width:3.4rem}
.gate .a{font-size:.95rem}
.gate .ev{font-family:var(--font-mono);font-size:.72rem;color:var(--ui-ink-2);margin-top:.2rem;overflow-wrap:anywhere}
@media (max-width:600px){.gate{grid-template-columns:auto 1fr}.gate .chip{grid-column:1 / -1;justify-self:start}}
.collaudo-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;margin-bottom:1.5rem}
.bignum{font-family:var(--font-display);font-size:3rem;font-weight:300;line-height:1}
.bignum small{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:.3rem;color:var(--ui-ink-2)}
.radar-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--ui-line)}
@media (max-width:860px){.radar-wrap{grid-template-columns:1fr}}
.radar{width:100%;max-width:520px;display:block;margin-inline:auto}
.radar .grid-line{fill:none;stroke:var(--ui-line)}
.radar .axis{stroke:var(--ui-line)}
.radar .lbl{font-family:var(--font-body);font-size:11px;fill:var(--ui-ink-2)}
.radar .s8{fill:none;stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:3 3}
.radar .s10{fill:var(--blue);fill-opacity:.12;stroke:var(--blue);stroke-width:1.4}
.radar .s11{fill:none;stroke:var(--ui-ink);stroke-width:1.6}
.legend{display:grid;gap:.5rem;font-size:.95rem}
.legend span{display:inline-block;width:1.6rem;height:0;border-top:2px solid;vertical-align:middle;margin-right:.5rem}
.affidi{margin-top:2.5rem;border:1px solid var(--ui-line);background:var(--ui-bg-2);border-radius:var(--radius);padding:1.4rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center}
@media (max-width:640px){.affidi{grid-template-columns:1fr}}
.affidi h4{font-family:var(--font-display);font-size:1.4rem;font-weight:300}
.affidi p{color:var(--ui-ink-2);font-size:.95rem;margin-top:.3rem}

/* agora */
.agora{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:1.5rem;margin-top:2rem}
@media (max-width:860px){.agora{grid-template-columns:1fr}}
.cats{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.cats button{width:100%;text-align:left;border:1px solid transparent;background:transparent;padding:.6rem .8rem;border-radius:var(--radius);cursor:pointer;display:flex;justify-content:space-between;gap:.5rem;color:var(--ui-ink)}
.cats button[aria-pressed="true"]{background:var(--ui-bg-2);border-color:var(--ui-line)}
.cats .n{font-family:var(--font-mono);font-size:.72rem;color:var(--ui-ink-2)}
.threads{display:grid;gap:.75rem}
.thread{background:var(--ui-bg-2);border:1px solid var(--ui-line);border-radius:var(--radius);padding:1rem 1.1rem;display:grid;gap:.45rem}
.thread h4{font-size:1.15rem;font-weight:500;font-family:var(--font-body)}
.thread .by{font-size:.85rem;color:var(--ui-ink-2);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.thread p{font-size:.95rem;color:var(--ui-ink-2)}
.thread .src{font-family:var(--font-mono);font-size:.72rem;color:var(--blue)}
.composer{background:var(--ui-bg-2);border:1px solid var(--ui-line);border-radius:var(--radius);padding:1.1rem;display:grid;gap:.7rem;margin-top:1rem}
.composer h4{font-family:var(--font-display);font-size:1.3rem;font-weight:300}
.field{display:grid;gap:.3rem}
.field label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-ink-2)}
.field input,.field textarea,.field select{font:inherit;padding:.65rem .75rem;border:1px solid var(--ui-line);border-radius:var(--radius);background:var(--ui-bg);color:var(--ui-ink);width:100%;min-width:0}
.field textarea{min-height:5.5rem;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media (max-width:600px){.row2{grid-template-columns:1fr}}

/* dialogue */
.chat{background:var(--ui-bg-2);border:1px solid var(--ui-line);border-radius:var(--radius);display:grid;grid-template-rows:auto 1fr auto;height:min(620px,78vh);margin-top:2rem;overflow:hidden;min-width:0;width:100%}
.chat > *{min-width:0}
.chat-head .chip{white-space:normal;line-height:1.35}
.chat-head{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding:.9rem 1.1rem;border-bottom:1px solid var(--ui-line)}
.chat-head .who{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.1rem}
.chat-head .glyph{width:22px;height:22px;color:var(--ui-ink)}
.msgs{overflow-y:auto;padding:1.1rem;display:grid;gap:.9rem;align-content:start}
.msg{max-width:min(80%,46rem);display:grid;gap:.35rem}
.msg.me{justify-self:end}
.msg .b{padding:.75rem .95rem;border-radius:12px;line-height:1.5;font-size:.98rem}
.msg.bot .b{background:var(--ui-bg);border:1px solid var(--ui-line);border-bottom-left-radius:3px}
.msg.me .b{background:var(--blue);color:var(--on-blue);border-bottom-right-radius:3px}
.msg .src{font-family:var(--font-mono);font-size:.7rem;color:var(--ui-ink-2);padding-left:.3rem}
.msg .src b{color:var(--blue);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .6rem}
.chips button{border:1px solid var(--ui-line);background:var(--ui-bg);border-radius:999px;padding:.35rem .75rem;font-size:.85rem;cursor:pointer;color:var(--ui-ink)}
.chips button:hover{border-color:var(--blue);color:var(--blue)}
.chat-input{display:flex;gap:.6rem;padding:.8rem 1.1rem;border-top:1px solid var(--ui-line)}
.chat-input input{flex:1;min-width:0;font:inherit;padding:.7rem .85rem;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-bg);color:var(--ui-ink)}
.chat-input .btn{flex:none;white-space:nowrap}
.typing{font-family:var(--font-mono);font-size:.72rem;color:var(--ui-ink-2)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.email{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.4rem}
.email code{font-family:var(--font-display);font-size:1.6rem;font-weight:300;letter-spacing:.02em}
.form{display:grid;gap:.8rem;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:var(--bg-2)}
.form .field input,.form .field textarea,.form .field select{background:var(--bg);border-color:var(--line);color:var(--ink)}
.form .field label{color:var(--ink-2)}
.form .done{display:none;border-left:2px solid var(--ok);padding:.7rem 1rem;background:var(--bg-3)}
.form.sent .done{display:block}
.origins{margin-top:2rem;color:var(--ink-2);max-width:60ch}

/* ---------- glossary & footer ---------- */
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:.5rem 2rem;margin-top:1.5rem}
.gloss div{border-top:1px solid var(--line-2);padding:.75rem 0}
.gloss dt{font-weight:500}
.gloss dd{margin:.2rem 0 0;color:var(--ink-2);font-size:.95rem}
.foot{border-top:1px solid var(--line);padding-block:2.5rem calc(2.5rem + env(safe-area-inset-bottom,0px));color:var(--ink-2);font-size:.92rem}
.foot-row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.foot .brand .wordmark{font-size:1rem}
.foot nav{display:flex;flex-wrap:wrap;gap:1rem}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--blue)}
.foot .motto-line{margin-top:1.5rem;font-family:var(--font-display);font-size:1.05rem;letter-spacing:.08em}

/* ---------- hero rotation ---------- */
.rot{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);border-left:2px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;background:var(--bg-2);padding:1.4rem 1.5rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:center}
@media (max-width:700px){.rot{grid-template-columns:1fr}}
.rot-title{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:.5rem;max-width:34ch}
.rot-text{color:var(--ink-2);max-width:70ch}
.rot-links{margin-top:.8rem;font-size:.95rem}
.rot-nav{display:flex;align-items:center;gap:.7rem}
.rot-sector{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);min-width:7ch;text-align:center}
.rot.swap .rot-main{animation:rotIn .45s ease both}
@keyframes rotIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- hypotheses ---------- */
.hyp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:1.25rem;margin-top:2.5rem}
.hyp article{border-top:2px solid var(--ink);padding-top:1rem;display:grid;gap:.6rem;align-content:start}
.hyp article:nth-child(3n+2){border-top-color:var(--blue)}
.hyp .sec{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.hyp h3{font-size:1.45rem}
.hyp .sit{color:var(--ink-2)}
.hyp .more{display:none;gap:.7rem}
.hyp article.open .more{display:grid}
.hyp .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.2rem}
.hyp .more p{color:var(--ink-2);font-size:.97rem}
.hyp .measure{border-left:2px solid var(--blue);padding-left:.8rem}
.hyp button.tgl{justify-self:start;border:0;background:transparent;color:var(--blue);font-weight:500;padding:.2rem 0;cursor:pointer;border-bottom:1px solid var(--blue-tint)}
.composer2{margin-top:clamp(3rem,6vw,5rem);border:1px solid var(--ink);border-radius:var(--radius);background:var(--bg-2);padding:clamp(1.4rem,3vw,2.4rem);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3rem)}
@media (max-width:900px){.composer2{grid-template-columns:1fr}}
.composer2-form{display:grid;gap:.8rem}
.composer2 .field textarea{background:var(--bg);border-color:var(--line);color:var(--ink);min-height:8rem}
.composer2 .field input,.composer2 .field select{background:var(--bg);border-color:var(--line);color:var(--ink)}
.composer2 .field label{color:var(--ink-2)}
.composer2-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.composer2-actions .small{flex-basis:100%}
#speakBtn.listening{border-color:var(--blue);color:var(--blue)}
.hyp-out{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:1.5rem;display:grid;gap:1rem}
.hyp-out .moves{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1rem 1.5rem}
.hyp-out .move{border-top:1px solid var(--line);padding-top:.8rem}
.hyp-out .move h4{font-size:1.1rem;font-weight:400;margin-bottom:.3rem}
.hyp-out .move h4::before{content:attr(data-n);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--blue);display:block;margin-bottom:.25rem}
.hyp-out .move p,.hyp-out .move li{color:var(--ink-2);font-size:.95rem}
.hyp-out ul{margin:.2rem 0 0;padding-left:1.1rem}
.hyp-out .out-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* ---------- sandbox ---------- */
.sandbox{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--ui-line);align-items:start}
@media (max-width:900px){.sandbox{grid-template-columns:1fr}}
.sb-h{font-family:var(--font-display);font-weight:400;font-size:1.25rem;margin:1.4rem 0 .4rem}
.ui .sb-h{color:var(--ui-ink)}
.box-wrap{position:sticky;top:calc(80px + env(safe-area-inset-top,0px))}
.box{background:var(--ui-bg-2);border:1px solid var(--ui-line);border-radius:var(--radius);padding:1.4rem;display:grid;gap:1rem;justify-items:center;text-align:center}
.box-svg{width:min(320px,80%);height:auto}
.box-svg .lid{fill:var(--ui-bg);stroke:var(--ui-ink);stroke-width:1.5;transform-origin:60px 92px;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.box-svg .body-l{fill:var(--blue-tint-2);stroke:var(--ui-ink);stroke-width:1.5}
.box-svg .body-r{fill:var(--blue-tint);stroke:var(--ui-ink);stroke-width:1.5}
.box-svg .inner{opacity:0;transition:opacity .6s ease .5s;color:var(--ui-ink)}
.box-svg .inner .ring{fill:none;stroke:currentColor;stroke-width:6}
.box-svg .inner .mand{fill:var(--blue)}
.box.open .box-svg .lid{transform:rotate(-38deg) translate(-10px,-30px)}
.box.open .box-svg .inner{opacity:1}
.box-state .super{font-family:var(--font-display);font-size:1.5rem;font-weight:300}
.box-state .sep{margin:0 .6rem;color:var(--blue)}
.box:not(.open) .box-state .super span:not(.sep){animation:flicker 2.4s ease-in-out infinite}
.box:not(.open) .box-state .super span:nth-child(3){animation-delay:1.2s}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:.25}}
.box.open .box-state{display:none}
.box-open{width:100%;text-align:left;display:grid;gap:.8rem}
.box-open h4{font-family:var(--font-display);font-weight:300;font-size:1.3rem}
.measures{width:100%;border-collapse:collapse;font-size:.92rem}
.measures th,.measures td{padding:.45rem .4rem;border-bottom:1px solid var(--ui-line);text-align:left}
.measures th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-ink-2);font-weight:400}
.measures td.n{font-family:var(--font-mono);text-align:right;white-space:nowrap}
.measures td.after{color:var(--blue);font-weight:500}
.inside{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1rem;margin-top:1rem}
.inside article{background:var(--ui-bg-2);border:1px solid var(--ui-line);border-radius:var(--radius);padding:1rem 1.1rem;display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.inside .fig{width:56px;height:56px;border:1px dashed var(--ui-line);border-radius:var(--radius);display:grid;place-items:center;color:var(--blue)}
.inside .fig svg{width:30px;height:30px}
.inside h4{font-family:var(--font-display);font-weight:400;font-size:1.1rem}
.inside p{font-size:.92rem;color:var(--ui-ink-2);margin-top:.25rem}
.inside .cap{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-ink-2);margin-top:.5rem}


/* ---------- simulation ---------- */
.sim-top{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.sim-scen{display:flex;flex-wrap:wrap;gap:.4rem}
.sim-scen button{border:1px solid var(--line);background:var(--bg-2);border-radius:999px;padding:.4rem .85rem;font-size:.9rem;cursor:pointer;color:var(--ink-2)}
.sim-scen button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sim-ctl{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.sim{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:2rem;align-items:start}
@media (max-width:900px){.sim{grid-template-columns:1fr}}
.sim-h{font-family:var(--font-display);font-weight:400;font-size:1.25rem;margin-bottom:.8rem}
.sim-h.small-h{font-size:.74rem;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:1.4rem 0 .6rem}
.sim-wafer{position:sticky;top:calc(80px + env(safe-area-inset-top,0px))}
@media (max-width:900px){.sim-wafer{position:static}}
.wafer{width:100%;max-width:420px;display:block}
.wafer .slab{fill:var(--bg-2);stroke:var(--line);stroke-width:1.2;transition:fill .3s,stroke .3s;cursor:pointer}
.wafer .side{fill:var(--bg-3);stroke:var(--line);stroke-width:1.2;transition:fill .3s}
.wafer .layer.active .slab{fill:var(--blue-tint);stroke:var(--blue);stroke-width:1.8}
.wafer .layer.active .side{fill:var(--blue-tint-2);stroke:var(--blue)}
.wafer .layer.top .slab{stroke:var(--ink)}
.wafer .layer.top.active .slab{fill:var(--ink);stroke:var(--ink)}
.wafer .layer.top.active .lbl{fill:var(--bg)}
.wafer .lbl{font-family:var(--font-body);font-size:12.5px;font-weight:600;fill:var(--ink);pointer-events:none}
.wafer .layer.active .lbl{fill:var(--blue-deep)}
.wafer .layer.top.active .lbl{fill:var(--bg)}
.wafer .idx{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink-3);letter-spacing:.08em}
.layer-info{border-left:2px solid var(--blue);padding-left:1rem;margin-top:1rem;min-height:5.5rem}
.layer-info .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.layer-info h4{font-family:var(--font-display);font-weight:400;font-size:1.3rem;margin:.2rem 0 .3rem}
.layer-info .mods{font-family:var(--font-mono);font-size:.74rem;color:var(--blue);margin-bottom:.35rem;overflow-wrap:anywhere}
.layer-info p{color:var(--ink-2);font-size:.95rem}
.legend-ha{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;font-size:.85rem;color:var(--ink-2)}
.legend-ha span{display:inline-flex;align-items:center;gap:.4rem}
.legend-ha i{display:inline-block;width:.75rem;height:.75rem;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink)}
.legend-ha i.s{background:var(--blue);border-color:var(--blue)}
.legend-ha i.g{background:transparent;border-style:dashed;border-color:var(--ink-3)}
.legend-ha i.a{background:var(--ok);border-color:var(--ok)}
.legend-ha i.o{background:var(--bg-3);border-color:var(--ink-3)}
.room{display:flex;flex-wrap:wrap;gap:.45rem}
.room .p{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border-radius:999px;border:1.5px solid var(--line);background:var(--bg-2);font-size:.86rem;color:var(--ink-2);transition:box-shadow .25s,border-color .25s,color .25s}
.room .p i{width:.6rem;height:.6rem;border-radius:999px;background:var(--ink);flex:none}
.room .p.s i{background:var(--blue)} .room .p.g i{background:transparent;border:1.5px dashed var(--ink-3)} .room .p.a i{background:var(--ok)} .room .p.o i{background:var(--bg-3);border:1.5px solid var(--ink-3)}
.room .p.on{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 3px var(--blue-tint)}
.room .p.s.on{border-color:var(--blue)} .room .p.a.on{border-color:var(--ok)}
.delta{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem}
.delta .lbl{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.delta .bar{flex:1;height:.55rem;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);overflow:hidden;min-width:0}
.delta .fill{height:100%;width:0;background:var(--blue);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.delta .num{min-width:3.2ch;text-align:right;font-size:.95rem}
.transcript{display:grid;gap:.6rem;max-height:420px;overflow-y:auto;padding-right:.3rem}
.transcript .e{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.75rem .9rem;border:1px solid var(--line);border-left-width:3px;border-radius:0 var(--radius) var(--radius) 0;background:var(--bg-2);animation:rotIn .4s ease both}
.transcript .e.h{border-left-color:var(--ink)} .transcript .e.s{border-left-color:var(--blue)} .transcript .e.g{border-left-color:var(--ink-3);border-left-style:dashed} .transcript .e.a{border-left-color:var(--ok)} .transcript .e.o{border-left-color:var(--line)}
.transcript .n{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);padding-top:.2rem;min-width:2.2rem}
.transcript .w{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.2rem}
.transcript .e.s .w{color:var(--blue)} .transcript .e.a .w{color:var(--ok)} .transcript .e.h .w{color:var(--ink)}
.transcript p{font-size:.95rem;color:var(--ink-2)}
.registry{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-2)}
.registry li{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;padding:.35rem .5rem;border-bottom:1px dashed var(--line);animation:rotIn .4s ease both}
.registry li .id{color:var(--blue)} .registry li .h{color:var(--ink-3)}
@media (max-width:600px){.registry li{grid-template-columns:auto 1fr}.registry li .h{grid-column:2}}
.registry .empty{color:var(--ink-3);border:0}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:.8rem 1.1rem;border-radius:var(--radius);font-size:.95rem;max-width:min(92vw,40rem);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:80;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- produzione: modulo contatti, WIP, link legali ---------- */
.form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.form .consent input{margin-top:.2rem;flex:none;width:1rem;height:1rem;accent-color:var(--blue)}
.form .error{border-left:2px solid var(--warn);padding:.7rem 1rem;background:var(--warn-tint);color:var(--ink)}
.form .error[hidden]{display:none}
.form.sent .row2,.form.sent .field,.form.sent .consent,.form.sent button{display:none}
.form button[disabled]{opacity:.6;cursor:progress}
.wip-off{opacity:.45;pointer-events:none;filter:grayscale(.3)}
fieldset.wip-off{border:0;padding:0;margin:0;min-width:0;display:grid;gap:inherit}
.wip-note{border-left:2px solid var(--warn);padding:.5rem .8rem;margin:.6rem 0}
.legal-links a{color:inherit;text-decoration:underline;text-underline-offset:2px;margin-left:.5rem}
.legal-links a::before{content:"·";display:inline-block;margin-right:.5rem;text-decoration:none}
.chat.wip{position:relative}
.chat.wip > :not(.wip-overlay){filter:blur(5px);opacity:.55;user-select:none;pointer-events:none}
.chat .wip-overlay{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:.8rem;padding:1.5rem;text-align:center}
.chat .wip-overlay p{max-width:38ch;font-family:var(--font-display);font-size:1.25rem;font-weight:300;line-height:1.35;color:var(--ui-ink)}