/* ZIDOM / SIGNAL TRACE
 * An interface language derived from a reactive graph rather than a design trend.
 * Default: pale drafting paper. Active bindings: signal blue. Events: ember.
 * This file comes LAST so it can protect the existing functional TSX/docs/blocks
 * while replacing the site's presentation, layout and editorial rhythm.
 */
:root,:root[data-theme="light"]{
 color-scheme:light;
 --bg:#F1F1ED;--bg2:#E5E7E2;--surface:#FCFCF8;--surface-alt:#E8EAE6;
 --surface-code:#151B25;--ink:#202831;--muted:#52616B;--subtle:#4E5C66;
 --line:#BFC9C8;--line-soft:#D6DDDA;
 --mint:#1948E8;--mint-bold:#123BC6;--mint-ink:#FFFFFF;
 --violet:#954126;--violet-strong:#82371F;
 --glow-mint:rgba(25,72,232,.06);--glow-violet:rgba(190,86,59,.03);
 --shadow:none;--radius:2px;--header-h:72px;
 --signal-blue:#1948E8;--signal-orange:#EA5F39;
 --signal-display:Arial,Helvetica,ui-sans-serif,system-ui,sans-serif;
 --signal-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
 color-scheme:dark;
 --bg:#101925;--bg2:#192536;--surface:#202E3F;--surface-alt:#2A3B4D;
 --surface-code:#111B2A;--ink:#F0F4F4;--muted:#BAC6CC;--subtle:#8CA3B2;
 --line:#506075;--line-soft:#35465A;
 --mint:#89AAFF;--mint-bold:#BED0FF;--mint-ink:#111A2A;
 --violet:#FFAD88;--violet-strong:#FFD2B8;
 --glow-mint:rgba(137,170,255,.06);--glow-violet:rgba(255,173,136,.03);
 --signal-blue:#89AAFF;--signal-orange:#FFAD88;
}
html{scroll-padding-top:calc(var(--header-h) + 20px);}
body{font-family:var(--signal-display);font-size:15px;line-height:1.68;background:var(--bg);color:var(--ink);font-feature-settings:"ss01" on;}
::selection{background:var(--mint);color:var(--mint-ink);}
h1,h2,h3{font-family:var(--signal-display);text-wrap:balance;}
a,button{transition:background-color .17s,border-color .17s,color .17s;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:0;}
.overline,.doc-eyebrow,.blocks-section-kicker,.blocks-detail-eyebrow{font:650 10px/1.5 var(--signal-mono);letter-spacing:.09em;color:var(--mint);text-transform:uppercase;}
/* Masthead retains the recognisable outlined Zidom letterforms, now one color. */
.site-header{background:var(--bg);border-color:var(--line);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.nav-wrap{max-width:1520px;padding:0 clamp(18px,3.9vw,64px);}
.brand-lockup{filter:grayscale(1) brightness(0);width:182px;height:36px;min-width:182px;}
:root[data-theme="dark"] .brand-lockup{filter:grayscale(1) brightness(0) invert(1);}
.top-nav{gap:clamp(16px,2.2vw,36px);}
.top-nav a{font-size:12px;font-weight:600;letter-spacing:.005em;color:var(--muted);}
.top-nav a:after{height:2px;border-radius:0;background:var(--mint);}
.top-nav a[data-active="true"]{font-weight:600;color:var(--ink);} /* Do not change nav width on route changes. */
.search-trigger{border-radius:2px;border:1px solid var(--line);background:transparent;box-shadow:none;transform:none;}
.search-trigger:hover{transform:none;border-color:var(--mint);background:var(--surface-alt);}
.search-trigger kbd{border-radius:2px;background:var(--bg2);}
.nav-actions .icon-button,.nav-actions .github-link{border-radius:2px;}
.nav-actions .icon-button:hover,.nav-actions .github-link:hover{background:var(--surface-alt);color:var(--mint);}
.reading-progress span{background:var(--mint);}
.release-banner{border:0;border-bottom:1px solid var(--line);background:var(--bg2);min-height:38px;color:var(--muted);font:500 11px var(--signal-mono);letter-spacing:0;gap:12px;}
.release-banner strong{color:var(--ink);}
.release-banner a{color:var(--mint);}
.release-pulse,.preview-live-dot,.status-mark{background:var(--mint)!important;box-shadow:none!important;}
/* Home: asymmetric technical folio instead of a dashboard hero. */
.signal-home{overflow:clip;}
.signal-home .signal-hero{max-width:1500px;min-height:660px;margin:auto;padding:0 clamp(22px,5vw,80px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(35px,5vw,88px);align-items:center;overflow:visible;position:relative;}
.signal-hero:before,.signal-hero:after,.hero-glow,.hero-demo-glow{display:none!important;}
.hero-content{position:relative;min-width:0;padding:clamp(62px,8vw,125px) 0 clamp(50px,7vw,105px);}
.signal-kicker{display:flex;align-items:center;gap:13px;color:var(--muted);font:600 11px var(--signal-mono);letter-spacing:.03em;}
.signal-kicker span{display:block;width:25px;height:2px;background:var(--signal-orange);}
.signal-home .hero h1{margin:28px 0 32px;max-width:730px;font-size:clamp(69px,7.1vw,116px);font-weight:650;line-height:.94;letter-spacing:-.085em;}
.signal-home .hero h1 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:var(--signal-blue);background:none;-webkit-text-fill-color:var(--signal-blue);letter-spacing:-.085em;}
.signal-home .hero-content>p{font-size:clamp(16px,1.5vw,19px);font-weight:400;line-height:1.72;color:var(--muted);max-width:500px;}
.signal-home .hero-content>p strong{color:var(--ink);}
.hero-cta{margin-top:35px;gap:18px;align-items:center;}
.button-primary,.button-secondary,.blocks-cta{border-radius:2px!important;box-shadow:none!important;transform:none!important;font-size:13px;font-weight:700;}
.button-primary{background:var(--mint)!important;border:1px solid var(--mint)!important;color:var(--mint-ink)!important;}
.button-primary:hover{background:var(--mint-bold)!important;border-color:var(--mint-bold)!important;}
.button-secondary{border:0!important;border-bottom:1px solid var(--ink)!important;color:var(--ink)!important;background:none!important;padding-left:0!important;padding-right:0!important;border-radius:0!important;}
.button-secondary:hover{color:var(--mint)!important;border-bottom-color:var(--mint)!important;}
.hero-cli-note{margin-top:27px;color:var(--subtle);font:500 11px/1.7 var(--signal-mono);gap:6px;}
.hero-cli-link{color:var(--mint);font-weight:600;}
.hero-subnote{margin-top:32px;padding-top:20px;border-top:1px solid var(--line-soft);font:500 11px var(--signal-mono);color:var(--subtle);}
.signal-hero-visual{position:relative;min-width:0;margin-top:24px;}
.signal-hero-visual:before{content:"EXPERIMENT 01  /  LIVE SIGNAL GRAPH";display:block;position:absolute;top:-25px;left:0;font:550 10px var(--signal-mono);letter-spacing:.08em;color:var(--subtle);}
#hero-play-root{position:relative;max-width:none;width:100%;}
.hero-console,.hero-console:hover,.hero-console:focus-within{border:1px solid #637080;border-radius:2px;background:#151E2D;color:#EDF3FA;box-shadow:18px 18px 0 color-mix(in srgb,var(--signal-blue) 12%,var(--bg));transform:none!important;overflow:hidden;}
.trace-stage-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #3D4D65;background:#111928;padding:12px 18px;color:#B7C9DC;font:550 10px var(--signal-mono);}
.trace-stage-head .trace-status{color:#FFC08A;}
.trace-stage-body{padding:clamp(20px,2.8vw,34px);position:relative;}
.trace-stage-body:before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:linear-gradient(#5A6B83 1px,transparent 1px),linear-gradient(90deg,#5A6B83 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(120deg,transparent 25%,#000 100%);}
.trace-stage-body>*{position:relative;z-index:1;}
.trace-board-title{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-bottom:18px;margin-bottom:23px;border-bottom:1px solid #4C5D73;}
.trace-board-title h2{font:600 clamp(20px,2.35vw,28px)/1.15 var(--signal-display);letter-spacing:-.045em;margin:0;color:#F4F6F9;}
.trace-board-title>span{font:500 10px var(--signal-mono);color:#FFB993;}
.trace-line{font:500 12px/1.6 var(--signal-mono);color:#D7E1ED;white-space:nowrap;overflow:auto;padding:15px 0;}
.trace-line b{color:#F4B896;font-weight:600;}.trace-line em{color:#9BB4FF;font-style:normal;}.trace-line span{color:#FFC08A;}
.trace-board{border-top:1px solid #4C5D73;border-bottom:1px solid #4C5D73;}
.trace-map{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1.15fr);align-items:center;gap:10px;margin:28px 0 26px;min-width:0;}
.trace-source,.trace-target{min-width:0;border:1px solid #4E627B;background:#1E2D40;padding:16px;min-height:128px;}
.trace-step{display:block;margin-bottom:13px;color:#AEC0D1;font:550 9px var(--signal-mono);letter-spacing:.06em;}
.trace-source strong{display:block;color:#F6F7F7;font:600 clamp(28px,3vw,42px)/1 var(--signal-mono);}
.trace-source small{display:block;color:#B4C5D6;font:500 10px var(--signal-mono);margin-top:8px;}
.trace-link{position:relative;display:flex;align-items:center;justify-content:center;height:1px;background:#9CB7FC;}
.trace-link:after{content:"";position:absolute;right:-1px;width:7px;height:7px;border-top:1px solid #9CB7FC;border-right:1px solid #9CB7FC;transform:rotate(45deg);}
.trace-target{border-color:#A2B9FF;background:#1D3561;}
.trace-target .trace-step{color:#CCD9FF;}
.trace-target .console-output{background:none;border:0;display:block;padding:0;margin:0;min-height:0;box-shadow:none;}
.trace-target .console-output small{font:500 9px var(--signal-mono);color:#CCD9FF;letter-spacing:0;text-transform:none;}
.trace-target .console-output strong{display:block;font:600 clamp(36px,4.5vw,64px)/1 var(--signal-mono);letter-spacing:-.07em;color:#F9FCFF;}
.trace-audit{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #43566D;}
.trace-audit>div{padding:14px 15px 14px 0;}
.trace-audit>div+div{border-left:1px solid #43566D;padding-left:15px;}
.trace-audit small{display:block;font:500 9px var(--signal-mono);color:#AFC1D1;margin-bottom:6px;}
.trace-audit b{font:600 18px var(--signal-mono);color:#D8E5FF;}
.trace-audit .static-value{color:#FFBB96;}
.trace-stage .console-controls{margin-top:23px;gap:9px;}
.trace-stage .console-controls button{border:1px solid #687D9A;border-radius:2px;min-width:50px;min-height:42px;color:#EFF3F8;background:#23364E;transform:none!important;box-shadow:none!important;}
.trace-stage .console-controls button:hover{background:#344A65;}
.trace-stage .console-controls .console-increment{background:#D2DFFF;border-color:#D2DFFF;color:#14223A;font:700 12px var(--signal-mono);}
.trace-stage .console-controls .console-increment:hover{background:#F3F7FF;}
.trace-stage .console-note{color:#B9C9D8;font:500 10px/1.6 var(--signal-mono);margin-top:16px;}
.trace-stage .console-note b{color:#FFC18C;}
/* Product-proof ticker and a large typographic thesis. */
.signal-home .intro-strip{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:30px;background:var(--ink);padding:24px clamp(22px,5vw,80px);color:var(--bg);border:0;}
.signal-home .intro-strip>div{color:var(--signal-orange);font:650 11px var(--signal-mono);}
.signal-home .intro-strip p{color:var(--bg);font-size:clamp(16px,2vw,25px);letter-spacing:-.03em;line-height:1.35;font-weight:510;margin:0;}
.signal-home .intro-strip a{color:var(--bg);font:600 12px var(--signal-mono);white-space:nowrap;text-decoration:underline;text-underline-offset:4px;}
.section-wrap{max-width:1450px;padding:105px clamp(22px,5vw,80px);margin:0 auto;}
.section-heading h2,.perf-heading h2,.workbench-heading h2,.code-explain h2,.path-section h2{font-size:clamp(42px,5vw,72px);font-weight:610;letter-spacing:-.07em;line-height:1.06;}
.section-heading h2 em,.perf-heading h2 em,.code-explain h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--signal-blue);background:none;-webkit-text-fill-color:var(--signal-blue);}
.section-heading p,.perf-heading p,.workbench-heading p,.code-explain p{color:var(--muted);line-height:1.75;font-size:15px;}
/* Show the evidence plainly; avoid cards masquerading as benchmarks. */
.perf-section{border-bottom:1px solid var(--line);}
.perf-evidence{background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:none;}
.perf-evidence-label{font:600 10px var(--signal-mono);color:var(--subtle);}
.perf-metrics{border-top:1px solid var(--line);}
.perf-metric,.perf-metric.featured{border-radius:0;background:none;box-shadow:none;}
.perf-metric strong{font-family:var(--signal-mono);letter-spacing:-.065em;color:var(--ink);}
.perf-metric.featured strong{color:var(--mint);}
.perf-pillars{gap:0;border-top:1px solid var(--line);margin-top:48px;}
.perf-pillars>div{background:none;border:0;border-right:1px solid var(--line);border-radius:0;padding:25px 24px 4px 0;}
.perf-pillars>div+div{padding-left:26px;}
.perf-pillars>div:last-child{border:0;}
.perf-pillar-index{font:550 10px var(--signal-mono);color:var(--subtle);}
.feature-grid{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.feature-card{position:relative;border:0!important;border-right:1px solid var(--line)!important;border-radius:0!important;min-height:250px;background:transparent!important;box-shadow:none!important;transform:none!important;padding:25px!important;}
.feature-card:first-child{padding-left:0!important;}
.feature-card:last-child{border-right:0!important;}
.feature-card:after{display:none!important;}
.feature-card:hover{background:var(--surface-alt)!important;}
.feature-index{font:550 11px var(--signal-mono);color:var(--signal-orange);}
:root[data-theme="light"] .feature-index{color:#954126;}
:root[data-theme="light"] .path-grid a span{color:#954126;} /* Section number captions meet 4.5:1 contrast */ /* 5.8+:1 on paper; preserve the orange hue without illegible small text */
.feature-card h3{font-size:20px;letter-spacing:-.04em;}
.feature-card p{font-size:13px;line-height:1.7;}
.blocks-home-callout{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:54px;}
.blocks-home-callout h2{font-size:clamp(30px,3.8vw,47px);font-weight:600;letter-spacing:-.06em;}
.workbench-frame{border-radius:2px;border:1px solid var(--line);box-shadow:none;background:var(--surface);}
.workbench-top,.workbench-foot{background:var(--bg2);border-color:var(--line);}
.workbench-tab{border-radius:2px;font:600 12px var(--signal-mono);}
.workbench-tab[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink);}
.workbench-run:before{box-shadow:none;background:var(--mint);}
.workbench-preview{background:var(--bg2);border-color:var(--line);}
.workbench-preview-label:before{box-shadow:none;background:var(--mint);}
.workbench-preview .example-card{border-radius:2px;background:var(--surface);box-shadow:none;}
.workbench-foot a,.workbench-more,.text-link{color:var(--mint);}
.code-shell{background:#172332;color:#F1F5F9;border:1px solid #40576D;border-radius:2px;box-shadow:none;}
.code-shell .code-head{background:#202E3F;border-color:#40576D;}
.code-file-dot{background:#9CB7FF;box-shadow:none;}
.code-shell .code-ready{color:#BBCFFF;}
.code-shell .copy-btn{border-radius:2px;background:#293D56;border-color:#607992;}
.showcase-code .code-shell:hover{transform:none;}
.code-showcase{border-bottom:1px solid var(--line);border-top:1px solid var(--line);}
.code-warning{border-radius:2px;}
.path-grid{gap:0;border-top:1px solid var(--line);}
.path-grid>a{border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;transform:none!important;}
.path-grid>a:hover{background:var(--surface-alt);}
.path-grid>a:last-child{border-right:0;}
.story-cta{border-top:1px solid var(--line);background:var(--bg2);}
.story-pattern{font-family:Georgia,serif;color:var(--mint);}
.story-copy h2{font-weight:610;letter-spacing:-.07em;}
.story-copy a{color:var(--mint);}
/* Docs: a quiet manual for reading, not an unrelated dashboard. */
.docs-frame{max-width:1540px;grid-template-columns:250px minmax(0,790px) 185px;gap:clamp(24px,3vw,48px);padding:0 clamp(18px,3.5vw,55px);}
.docs-sidebar{border-right:1px solid var(--line-soft);background:none;}
.docs-sidebar a{border-radius:2px!important;font-size:13px;}
.docs-sidebar a[aria-current="page"]{background:var(--surface-alt)!important;border-radius:0!important;box-shadow:inset 2px 0 var(--mint)!important;color:var(--ink);}
.sidebar-group h2,.sidebar-label{font:600 10px var(--signal-mono);letter-spacing:.06em;color:var(--subtle);}
.docs-main{padding-top:50px;}
.breadcrumb{color:var(--subtle);font:550 11px var(--signal-mono);}
.doc-title{padding-bottom:32px;margin-bottom:36px;border-bottom:1px solid var(--line);}
.doc-title h1{font-size:clamp(44px,5.3vw,74px);font-weight:630;line-height:1.08;letter-spacing:-.07em;}
.doc-title p{max-width:610px;color:var(--muted);font-size:16px;line-height:1.75;}
.prose{font-size:15px;line-height:1.9;}
.prose h2{font-size:clamp(27px,3vw,39px);font-weight:650;letter-spacing:-.045em;}
.prose h3{font-size:21px;font-weight:660;letter-spacing:-.035em;}
.prose .notice,.doc-source{border-radius:2px;border-color:var(--line);background:var(--bg2);}
.prose a:not(.heading-anchor){color:var(--mint);}
.doc-neighbors a{border-radius:2px;}
.toc{font:500 12px var(--signal-display);}
.toc a.is-active{color:var(--mint);}
.search-dialog{background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:0 25px 100px rgba(0,0,0,.32);}
.search-result:hover{background:var(--surface-alt);}
/* Gallery / live components: designed as product workspaces. */
.examples-hero{max-width:1400px;padding-top:90px;padding-bottom:50px;}
.examples-hero h1,.playground-intro h1{font-size:clamp(48px,6vw,86px);letter-spacing:-.075em;font-weight:620;line-height:1.05;}
.examples-hero p,.playground-intro p{font-size:15px;line-height:1.8;}
.example-filter-tabs button,.filter-search{border-radius:2px;}
.example-filter-tabs button[aria-pressed="true"]{background:var(--mint);color:var(--mint-ink);}
.example-tile{border-radius:2px;background:var(--surface);box-shadow:none!important;transform:none!important;}
.example-tile:after{color:var(--mint);}
.example-tile:hover{background:var(--bg2);border-color:var(--mint);}
.example-detail h1{letter-spacing:-.065em;font-weight:630;}
.example-live,.example-section-title{background:var(--bg2);}
.example-live .example-card{border-radius:2px;}
.source-label{border-radius:2px;}
.editor-window{border-radius:2px;}
/* Component gallery preserves live preview and actual source while gaining a distinct layout. */
.blocks-page,.blocks-detail{max-width:1450px;padding:0 clamp(20px,4vw,64px) 100px;}
.blocks-hero{grid-template-columns:minmax(0,1.03fr) minmax(300px,.97fr);gap:clamp(30px,5vw,78px);padding:96px 0 88px;border-bottom:1px solid var(--line);}
.blocks-hero h1{font-size:clamp(53px,6.6vw,98px);letter-spacing:-.072em;font-weight:610;line-height:1.0;}
.blocks-hero h1 em{background:none;color:var(--mint);-webkit-text-fill-color:var(--mint);font:italic 400 1em/1 Georgia,serif;}
.blocks-hero p{font-size:16px;line-height:1.75;max-width:610px;}
.blocks-hero-art{min-width:0;}
.blocks-art-window{background:var(--surface);border:1px solid var(--line);border-radius:2px;transform:none;box-shadow:16px 16px 0 var(--bg2);}
.blocks-art-window:hover{transform:none;}
.blocks-art-toolbar{background:var(--bg2);border-color:var(--line);}
.blocks-art-submit{background:var(--mint);color:var(--mint-ink);border-radius:2px;}
.blocks-art-floating{background:var(--surface);border-radius:2px;color:var(--mint);box-shadow:none;transform:rotate(-2deg);}
.blocks-library{padding-top:58px;}
.blocks-library-head h2{font-size:clamp(36px,4.2vw,61px);font-weight:620;letter-spacing:-.06em;}
.blocks-total{border-radius:2px;}
.blocks-catalog-layout{grid-template-columns:222px minmax(0,1fr);gap:30px;}
.blocks-catalog-sidebar{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;padding:0 18px 0 0;box-shadow:none;}
.blocks-sidebar-help,.blocks-search input,.blocks-categories button{border-radius:2px;}
.blocks-categories button[aria-pressed="true"]{background:var(--surface-alt);color:var(--ink);box-shadow:inset 2px 0 0 var(--mint);}
.blocks-grid{gap:12px;}
.blocks-card{border:1px solid var(--line);border-radius:2px;background:var(--surface);padding:14px;box-shadow:none!important;transform:none!important;}
.blocks-card:hover{background:var(--bg2);border-color:var(--mint);}
.blocks-card-preview{border-radius:1px;min-height:155px;background:var(--bg2);border-color:var(--line-soft);}
.blocks-card strong{font-size:16px;letter-spacing:-.035em;}
.blocks-card p{font-size:12px;line-height:1.65;}
.blocks-file-tag{border-radius:2px;}
.blocks-next{border-radius:2px;background:var(--bg2);border:1px solid var(--line);box-shadow:none;}
.blocks-next h2{font-weight:620;letter-spacing:-.06em;}
.blocks-detail-title h1{font-weight:630;letter-spacing:-.065em;}
.blocks-source-status,.blocks-studio-shell,.blocks-stage,.blocks-editor,.blocks-setup{border-radius:2px;box-shadow:none;}
.blocks-workspace .blocks-stage-surface{background:var(--bg2);background-image:radial-gradient(var(--line) .6px,transparent .6px);background-size:22px 22px;}
.blocks-code-tabs button{border-radius:2px;}
.blocks-detail-guide .blocks-setup{border-radius:2px;}
/* Footer is a colophon: a place for provenance. */
.footer{background:var(--bg2);border-top:1px solid var(--line);}
.footer-inner{max-width:1450px;}
.footer-links a:hover{color:var(--mint);}
.footer-bottom{border-color:var(--line);color:var(--subtle);font:500 11px var(--signal-mono);}
/* Editor and documentation code are light in light mode as intended. */
:root[data-theme="light"] .code-shell{background:#fff;border-color:#c8d0d8;color:#243047;}
:root[data-theme="light"] .code-shell .code-head{background:#f2f5f7;border-bottom-color:#d3dce2;}
:root[data-theme="light"] .code-shell .code-lang{color:#344050;}
:root[data-theme="light"] .code-shell .code-ready{color:#2851ab;}
:root[data-theme="light"] .code-shell pre code{color:#243047;}
:root[data-theme="light"] .editor-window .code-shell{background:#fff;}
:root[data-theme="light"] .tok-keyword{color:#7048A2!important;}
:root[data-theme="light"] .tok-tag{color:#0A529F!important;}
:root[data-theme="light"] .tok-function{color:#8A4B17!important;}
/* At 1024, 768, 390: keep both a real site and an accessible lab. */
@media(max-width:1160px){
 .signal-home .signal-hero{gap:34px;grid-template-columns:1fr 1fr;}
 .signal-home .hero h1{font-size:clamp(63px,7.7vw,92px);}
 .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 .feature-card:nth-child(2){border-right:0!important;}
 .feature-card:nth-child(-n+2){border-bottom:1px solid var(--line)!important;}
 .feature-card:nth-child(3){padding-left:0!important;}
 .blocks-hero{gap:30px;}
}
@media(max-width:980px){
 .signal-home .signal-hero{grid-template-columns:1fr;gap:16px;min-height:0;padding-top:36px;padding-bottom:70px;}
 .signal-home .hero h1{font-size:clamp(70px,11vw,110px);}
 .hero-content{padding:20px 0 28px;}
 .signal-hero-visual{margin-top:25px;max-width:750px;}
 .signal-home .intro-strip{grid-template-columns:100px 1fr;gap:14px 25px;}
 .signal-home .intro-strip a{grid-column:2;}
 .docs-frame{grid-template-columns:225px minmax(0,1fr);gap:24px;}
 .blocks-hero{grid-template-columns:1fr;padding:65px 0;}
 .blocks-hero-art{max-width:560px;}
 .blocks-catalog-layout{grid-template-columns:1fr;}
 .blocks-catalog-sidebar{border-right:0;border-bottom:1px solid var(--line);padding:0 0 20px;position:static;}
}
@media(max-width:700px){
 :root,:root[data-theme="light"],:root[data-theme="dark"]{--header-h:66px;}
 .nav-wrap{padding:0 16px;}
 .brand-lockup{width:158px;min-width:158px;height:32px;}
 .signal-home .signal-hero{padding:27px 20px 55px;}
 .signal-home .hero h1{font-size:clamp(54px,12.7vw,84px);letter-spacing:-.075em;margin:23px 0;}
 .hero-content>p{font-size:16px;}
 .hero-cta{gap:18px;align-items:stretch;}
 .hero-cta a{justify-content:center;}
 .signal-hero-visual{width:100%;}
 .trace-stage-body{padding:17px;}
 .trace-board-title h2{font-size:22px;}
 .trace-map{grid-template-columns:minmax(0,1fr) 24px minmax(0,1.12fr);gap:5px;margin:23px 0;}
 .trace-source,.trace-target{padding:12px;min-height:105px;}
 .trace-source strong{font-size:28px;}
 .trace-target .console-output strong{font-size:42px;}
 .trace-audit>div{padding:12px 6px 12px 0;}
 .trace-audit>div+div{padding-left:10px;}
 .signal-home .intro-strip{grid-template-columns:1fr;padding:25px 20px;gap:11px;}
 .signal-home .intro-strip a{grid-column:auto;}
 .section-wrap{padding:75px 20px;}
 .perf-pillars{display:block;}
 .perf-pillars>div,.perf-pillars>div+div{padding:22px 0;border-right:0;border-bottom:1px solid var(--line);}
 .feature-grid{grid-template-columns:1fr;}
 .feature-card,.feature-card:first-child,.feature-card:nth-child(3){padding:25px 0!important;min-height:0;border-right:0!important;border-bottom:1px solid var(--line)!important;}
 .feature-card:last-child{border:0!important;}
 .path-grid{display:block;}
 .path-grid>a{border-right:0;border-bottom:1px solid var(--line);}
 .docs-frame{display:block;padding-inline:18px;}
 .docs-main{padding-top:38px;}
 .blocks-page,.blocks-detail{padding-inline:18px;}
 .blocks-hero{padding:55px 0;}
 .blocks-hero h1{font-size:clamp(43px,11vw,67px);}
 .blocks-art-floating{display:none;}
 .blocks-library{padding-top:38px;}
 .blocks-grid{grid-template-columns:1fr;}
 .blocks-workspace{display:flex;flex-direction:column;height:auto;}
 .blocks-workspace .blocks-stage{height:315px;}
 .blocks-code-column{height:440px;}
}
@media(max-width:385px){
 .trace-stage-head{padding:11px;font-size:9px;}
 .trace-stage-body{padding:12px;}
 .trace-source strong{font-size:26px;}
 .trace-target .console-output strong{font-size:38px;}
 .trace-audit b{font-size:16px;}
 .hero-cta{gap:12px;}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto;}
 .hero-console,.feature-card,.blocks-card,.example-tile{transition:none!important;transform:none!important;}
 .console-pulse{animation:none!important;}
}


/*
 * LIGHT MODE SURFACE AUDIT — native-paper instruments, not a dark inset UI.
 * All hero traces and documentation/editor surfaces use the same light context.
 * Night mode keeps the original high-contrast technical palette.
 */
:root[data-theme="light"] .hero-console,
:root[data-theme="light"] .hero-console:hover,
:root[data-theme="light"] .hero-console:focus-within{
  background:#FFFFFF;color:#202831;border-color:#B4C2D2;
  box-shadow:12px 12px 0 #DDE5F0;
}
:root[data-theme="light"] .trace-stage-head{
  background:#F3F6F9;color:#475B70;border-bottom-color:#CCD6E0;
}
:root[data-theme="light"] .trace-stage-head .trace-status{color:#9B432C;}
:root[data-theme="light"] .trace-stage-body{background:#FFFFFF;color:#202831;}
:root[data-theme="light"] .trace-stage-body:before{
  background-image:linear-gradient(#A8B9CF 1px,transparent 1px),linear-gradient(90deg,#A8B9CF 1px,transparent 1px);
  opacity:.12;
}
:root[data-theme="light"] .trace-board-title{border-bottom-color:#CBD5DF;}
:root[data-theme="light"] .trace-board-title h2{color:#202831;}
:root[data-theme="light"] .trace-board-title>span{color:#985037;}
:root[data-theme="light"] .trace-board{border-top-color:#CBD5DF;border-bottom-color:#CBD5DF;}
:root[data-theme="light"] .trace-line{color:#334556;}
:root[data-theme="light"] .trace-line b{color:#93452C;}
:root[data-theme="light"] .trace-line em{color:#1948E8;}
:root[data-theme="light"] .trace-line span{color:#93452C;}
:root[data-theme="light"] .trace-source{
  background:#F6F8FB;border-color:#C7D3E0;color:#202831;
}
:root[data-theme="light"] .trace-source strong{color:#202831;}
:root[data-theme="light"] .trace-source small{color:#435B70;}
:root[data-theme="light"] .trace-step{color:#526A7C;}
:root[data-theme="light"] .trace-link{background:#1948E8;}
:root[data-theme="light"] .trace-link:after{border-color:#1948E8;}
:root[data-theme="light"] .trace-target{
  background:#E4ECFF;border-color:#9FB4F1;color:#183D97;
}
:root[data-theme="light"] .trace-target .trace-step,
:root[data-theme="light"] .trace-target .console-output small{color:#31518D;}
:root[data-theme="light"] .trace-target .console-output strong{color:#1948E8;}
:root[data-theme="light"] .trace-audit{border-top-color:#CBD5DF;}
:root[data-theme="light"] .trace-audit>div+div{border-left-color:#CBD5DF;}
:root[data-theme="light"] .trace-audit small{color:#526A7C;}
:root[data-theme="light"] .trace-audit b{color:#202831;}
:root[data-theme="light"] .trace-audit .static-value{color:#985037;}
:root[data-theme="light"] .trace-stage .console-controls button{
  background:#F4F6FA;border-color:#B9C7D8;color:#273A52;
}
:root[data-theme="light"] .trace-stage .console-controls button:hover{background:#E3EBF6;}
:root[data-theme="light"] .trace-stage .console-controls .console-increment{
  background:#1948E8;border-color:#1948E8;color:#FFFFFF;
}
:root[data-theme="light"] .trace-stage .console-controls .console-increment:hover{
  background:#123BC6;border-color:#123BC6;color:#FFFFFF;
}
:root[data-theme="light"] .trace-stage .console-note{color:#52616B;}
:root[data-theme="light"] .trace-stage .console-note b{color:#985037;}
/* Even the large editorial interlude stays in light mode. */
:root[data-theme="light"] .signal-home .intro-strip{
  background:#E4EAF3;color:#202831;
  border-top:1px solid #CAD5E1;border-bottom:1px solid #CAD5E1;
}
:root[data-theme="light"] .signal-home .intro-strip>div{color:#985037;}
:root[data-theme="light"] .signal-home .intro-strip p,
:root[data-theme="light"] .signal-home .intro-strip a{color:#202831;}
/* One continuous light code/workbench treatment, including tabs and chrome. */
:root[data-theme="light"] .code-shell,
:root[data-theme="light"] .editor-window .code-shell{
  background:#FFFFFF;color:#243047;border-color:#CCD5DF;box-shadow:none;
}
:root[data-theme="light"] .code-shell .code-head,
:root[data-theme="light"] .editor-window .code-shell .code-head{
  background:#F3F6FA;border-bottom-color:#D7E0E8;
}
:root[data-theme="light"] .code-shell .code-lang{color:#34485F;}
:root[data-theme="light"] .code-shell .copy-btn{
  background:#F6F8FC;color:#253E5C;border-color:#BACADB;
}
:root[data-theme="light"] .code-shell .copy-btn:hover{background:#E8EFFA;border-color:#7E9DCB;}
:root[data-theme="light"] .workbench-panel>.workbench-code.editor-window,
:root[data-theme="light"] .example-workspace .editor-window{
  background:#FFFFFF;color:#243047;border-color:#CCD5DF;
}
:root[data-theme="light"] .editor-topbar{
  background:#EFF3F8;color:#465B70;border-bottom-color:#D7E0E8;
}
:root[data-theme="light"] .editor-window .source-tabbar{background:#EFF3F8;border-bottom-color:#D5DDE6;}
:root[data-theme="light"] .editor-window .code-shell pre{background:#FFFFFF!important;color:#243047;}
:root[data-theme="light"] .workbench-code .playground-file-tab{
  background:#FFFFFF;color:#253C5E;border-top-color:#1948E8;border-right-color:#D5DDE6;
}
:root[data-theme="light"] .editor-statusbar{
  background:#E7EFF9;color:#2B4D76;border-top-color:#CBD8EA;
}
:root[data-theme="light"] .workbench-preview,
:root[data-theme="light"] .workbench-panel>.workbench-preview,
:root[data-theme="light"] .example-workspace .example-live,
:root[data-theme="light"] .blocks-workspace .blocks-stage-surface{
  background-color:var(--bg2);
  background-image:none;
}
:root[data-theme="light"] .blocks-editor,
:root[data-theme="light"] .blocks-workspace .blocks-stage,
:root[data-theme="light"] .blocks-studio-shell{
  background:var(--surface);color:var(--ink);
}


/* The mobile header activates at 1050px; documentation navigation must
   use the same breakpoint rather than staying focusable at 871–1050px. */
@media (min-width:871px) and (max-width:1050px) {
  .docs-frame{grid-template-columns:minmax(0,1fr);gap:0;}
  .docs-sidebar{
    position:fixed;top:var(--header-h);left:0;bottom:0;
    width:min(330px,88vw);height:calc(100dvh - var(--header-h));
    padding:28px;z-index:110;overflow:auto;
    background:var(--surface);border-right:1px solid var(--line);
    transform:translateX(-105%);visibility:hidden;pointer-events:none;
    box-shadow:12px 22px 30px rgba(0,0,0,.12);
  }
  .docs-sidebar.is-open{transform:translateX(0);visibility:visible;pointer-events:auto;}
  .docs-main{width:min(100%,850px);margin-inline:auto;min-width:0;}
}


/* Dark-theme contrast fixes discovered by the full 64-page WCAG sweep.
   The light-theme editorial strip intentionally uses a pale canvas;
   its dark-theme counterpart must not put pale event ink on pale paper. */
:root[data-theme="dark"] .signal-home .intro-strip{
  background:#162130;color:var(--ink);border-color:var(--line);
}
:root[data-theme="dark"] .signal-home .intro-strip>div{color:var(--signal-orange);}
:root[data-theme="dark"] .signal-home .intro-strip p,
:root[data-theme="dark"] .signal-home .intro-strip a{color:var(--ink);}
:root[data-theme="dark"] .thumb-badges span:first-child{color:var(--mint-bold);}
:root[data-theme="dark"] .demo-list li span{color:var(--ink);}

:root[data-theme="dark"] .docs-main .prose li{color:var(--ink);}