/* Project pages: black surfaces, white type, cyan for emphasis and state. */
#contact-section[hidden],.workspace-heading[hidden]{display:none}
#site-footer.compact-footer{padding:28px 6%;background:#000}
#site-footer.compact-footer .footer-bottom{margin:0;padding:0;border:0}
#work.work-page{display:block;padding:0 6%;background:#000;min-height:70dvh;--project-rule:#00ffff40}
#work :is(.project-switcher,.project-masthead,.project-workspace,.project-next){max-width:1440px;margin-inline:auto}
#work .project-switcher{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:78px;border-bottom:1px solid var(--project-rule)}
#work #btnBack{display:inline-flex;padding:20px 0;font-size:12px;letter-spacing:1px;white-space:nowrap;color:#fff}
#work #rail{display:flex;align-items:center;gap:16px;overflow:visible}
#work #rail label{font-size:12px;color:#00ffff}
#project-select{font:14px var(--mono);color:#fff;background:#000;border:1px solid var(--project-rule);border-radius:0;min-height:44px;max-width:100%;padding:10px 34px 10px 14px;cursor:pointer}
.project-masthead{padding:64px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:32px 9%;align-items:end}
.project-masthead .case-introduction{grid-column:1}
.project-masthead .eyebrow{font-size:12px;letter-spacing:1px;color:#00ffff;margin:0 0 22px}
.project-masthead .eyebrow span{padding:0 9px}
.project-masthead h1{font-size:clamp(38px,4.4vw,68px);letter-spacing:-3px;line-height:1.08;font-weight:400;color:#fff;margin:0}
.project-masthead .case-lede{font-size:16px;line-height:1.85;max-width:66ch;margin:26px 0 0;color:#fff}
.case-context{border-left:2px solid #00ffff;padding:0 0 0 26px;align-self:end}
.case-context .eyebrow{font-size:12px;margin:0 0 10px}
.case-context>p:not(.eyebrow){font-size:14px;line-height:1.8;color:#fff}
.case-context .tools-label{margin-top:24px}
.case-tools{display:flex;gap:6px 16px;flex-wrap:wrap}
.case-tools>span{font-size:12px;line-height:1.9;color:#fff}
.case-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--project-rule);margin:16px 0 0}
.case-metrics>div{min-width:0;padding:24px 28px;border-right:1px solid var(--project-rule)}
.case-metrics>div:last-child{border:0}
.metric-label{font-size:12px;line-height:1.6;color:#fff;margin:0 0 12px}
.metric-value{font-size:clamp(24px,2.8vw,40px);font-weight:400;color:#00ffff;letter-spacing:-1.5px;line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:normal}
.metric-value>span{display:inline-block;font-size:14px;letter-spacing:0;color:#fff;margin-left:10px}
.project-masthead.compact{display:block;padding:30px 0}
.project-masthead.compact .eyebrow{margin-bottom:10px}
.project-masthead.compact h1{font-size:26px;letter-spacing:-1px;line-height:1.3}
.project-masthead.compact :is(.case-lede,.case-context,.case-metrics){display:none}
.project-workspace{padding:0}
.workspace-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--project-rule);margin-top:28px;background:#000;min-width:0}
.project-masthead.compact+.project-workspace .workspace-nav{margin-top:0}
#work #tabs{display:flex;align-items:stretch;flex-wrap:nowrap;gap:8px;overflow-x:auto;min-width:0;min-height:60px;max-width:100%;border:0}
#work #tabs a{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:14px;color:#fff;padding:16px 18px;border:0;border-bottom:3px solid transparent;background:#000;white-space:nowrap;letter-spacing:0}
#work #tabs a>span{display:none}
#work #tabs a[aria-current],#work #tabs a[aria-current]:hover{color:#00ffff;background:#000;border-bottom-color:#00ffff}
#work #tabs a:hover{color:#00ffff}
#work #tabs .document-tab{font-size:12px}
#work #transport{display:flex;gap:7px;flex-shrink:0;min-height:0;padding:0}
#work #transport:empty{display:none}
#work #transport button{font-size:12px;padding:10px 14px;min-height:42px;border:1px solid var(--project-rule);background:#000;color:#fff;letter-spacing:0}
#work #transport #btnRun{background:#00ffff;color:#000;border-color:#00ffff;min-width:88px}
#work #transport button:hover{border-color:#00ffff}
.workspace-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:36px 0 26px}
.workspace-heading .eyebrow{font-size:12px;color:#00ffff;letter-spacing:.25px;margin:0 0 12px}
#work #viewerTitle{font-size:clamp(25px,2.4vw,36px);font-weight:400;color:#fff;letter-spacing:-1px;line-height:1.3;margin:0}
#work #runLed{color:#00ffff;background:none;font-size:12px;letter-spacing:1px;white-space:nowrap;width:auto;height:auto}
#work #viewport{min-height:0;width:100%;max-width:100%;overflow:visible;padding:0;animation:none}
#work #viewport>div:not(.beam-host){margin:0;max-width:none}
#work #viewport p{font-size:14px;line-height:1.8}
#work #viewport p.leading-relaxed{font-size:16px;line-height:1.85}
#work #viewport :is(h2,h3){font-weight:400;color:#fff}
#work #viewport h2{font-size:clamp(28px,2.7vw,40px);letter-spacing:-1.5px;line-height:1.2;margin:0 0 22px;max-width:none}
#work #viewport .eyebrow{color:#00ffff;font-size:12px;line-height:1.7;letter-spacing:.8px;margin:0 0 20px}
/* Overview leads with actual evidence, followed by three design decisions. */
.case-evidence{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:7%;align-items:center;padding:48px 0;margin:0;border-bottom:1px solid var(--project-rule)}
#work #viewport .evidence-caption>p:not(.eyebrow){font-size:16px;line-height:1.85;max-width:52ch;color:#fff}
.evidence-link{display:inline-flex;padding:10px 0;border-bottom:1px solid #00ffff;color:#00ffff;font-size:14px;margin-top:20px}
#work a.evidence-link:hover{color:#fff}
.evidence-image{display:block;border:1px solid var(--project-rule);background:#000}
.evidence-image img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:contain}
.benchmark-bars{min-width:0;padding:28px;border:1px solid var(--project-rule)}
.benchmark-bars>div{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin-bottom:20px;font-size:14px}
.benchmark-bars strong{color:#00ffff;font-weight:400;font-variant-numeric:tabular-nums}
.bar-track{grid-column:1/-1;height:5px;background:#00ffff1c}
.bar-track i{display:block;height:100%;background:#00ffff}
#work #viewport .chart-scale{display:flex;justify-content:space-between;margin-top:28px;font-size:12px}
.system-evidence{border:1px solid var(--project-rule);padding:28px;min-width:0}
.system-flow{display:flex;align-items:center;gap:12px;justify-content:space-between}
.system-flow>div{min-width:0;display:flex;flex-direction:column;gap:12px}
.system-flow span{font-size:12px;color:#00ffff}
.system-flow strong{font-size:19px;font-weight:400;white-space:nowrap}
.system-flow small{font-size:12px;line-height:1.5}
.system-flow>b{font-size:20px;color:#00ffff;font-weight:400}
.dma-evidence{margin-top:34px;border-top:1px solid var(--project-rule);padding-top:24px;display:flex;flex-direction:column;gap:12px}
.dma-evidence>span{color:#00ffff;font-size:12px}
.dma-evidence strong{font-size:16px;font-weight:400;line-height:1.8}
#work #viewport .dma-evidence p{font-size:12px}
#work #viewport .playable-titles{margin-top:26px;padding-top:22px;border-top:1px solid var(--project-rule);font-size:12px;line-height:1.8;color:#00ffff}
.playable-titles span{display:block;color:#fff;margin-top:8px}
.design-section{padding:38px 0 10px}
.design-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.design-note{min-width:0;padding-top:20px;border-top:1px solid #fff}
.note-number{display:block;color:#00ffff;font-size:12px;margin-bottom:24px}
#work #viewport .design-note h3{font-size:20px;letter-spacing:-.5px;line-height:1.4;margin:0 0 16px}
#work #viewport .design-note p{font-size:16px;line-height:1.85;color:#fff}
/* Each instrument owns its main surface. Descriptions sit below the diagram. */
#work #viewport .instrument-body{display:flex;flex-direction:column;gap:28px}
#work #viewport .instrument-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
#work #viewport .instrument-grid>div:first-child,#work #viewport .instrument-grid>figure{min-width:0;background:#000;border:1px solid var(--project-rule);overflow:auto;margin:0}
#work #viewport .instrument-grid>div:first-child>div:first-child,#work #viewport .instrument-grid>figure>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:#fff;color:#000;border:0}
#work #viewport .instrument-grid>div:first-child>div:first-child p,#work #viewport .instrument-grid>figure>div:first-child :is(p,a){color:#000;font-size:14px}
#work #viewport .instrument-grid svg{display:block;width:100%;min-width:700px;max-width:1150px;max-height:none!important;height:auto;margin:auto;padding:24px}
#work #viewport .instrument-grid>.space-y-5{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;min-width:0}
#work #viewport .instrument-grid>.space-y-5>div{margin:0;padding:24px;border:1px solid var(--project-rule);background:#000;min-width:0}
#work #viewport .instrument-grid>.space-y-5>div>p:first-child{color:#00ffff;font-size:16px;margin-bottom:12px}
#work #viewport .instrument-grid>.space-y-5>div>div{padding:14px 0}
#work #viewport .instrument-grid>.space-y-5 button{font-size:14px;min-height:44px}
#work #viewport .instrument-grid figcaption{padding:18px 24px;font-size:12px;line-height:1.8}
#work #viewport .instrument-grid img{height:auto;width:100%;display:block}
#work #viewport [data-mode]{padding:9px 14px;font-size:12px;min-height:40px}
#work #viewport [data-mode][aria-pressed=false]{background:#fff;color:#000}
#work #viewport [data-mode][aria-pressed=true]{background:#000;color:#00ffff}
#work #viewport [data-ch][aria-pressed=true],#work #viewport [data-layer][aria-pressed=true]{border-left:2px solid #00ffff}
#work #viewport [data-hit]:hover rect{stroke:#00ffff}
/* Explicit stat-cell layout, independent of diagnostic definition lists. */
#work #viewport dl.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:22px 0 0;gap:0;border-top:1px solid var(--project-rule);border-left:1px solid var(--project-rule)}
#work #viewport .stat-grid>div{display:block;min-width:0;padding:18px 16px;border-right:1px solid var(--project-rule);border-bottom:1px solid var(--project-rule);line-height:1.5}
#work #viewport .stat-grid dt{display:block;min-width:0;white-space:normal;font-size:12px;color:#fff;line-height:1.5;margin:0 0 12px}
#work #viewport .stat-grid dd{display:block;margin:0;padding:0;font-size:18px;color:#00ffff;line-height:1.5;font-variant-numeric:tabular-nums;overflow-wrap:normal;word-break:normal}
#work #viewport .stat-grid dd .stat-unit{display:block;font-size:12px;color:#fff;margin-top:5px}
#work #viewport .pipeline-stages{display:grid;grid-template-columns:repeat(7,minmax(140px,1fr));overflow:auto;border:1px solid var(--project-rule);background:#000}
#work #viewport .pipeline-stages>div{min-width:0;border-color:var(--project-rule)}
#work #viewport .pipeline-stages>div>div:first-child{background:#fff;padding:14px 12px;color:#000;border:0}
#work #viewport .pipeline-stages>div>div:first-child p{font-size:12px;color:#000}
#work #viewport .pipeline-stages>div>div:nth-child(2){min-height:190px;padding:10px}
#work #viewport .chip{padding:12px 9px;margin-bottom:8px;border-color:var(--project-rule);background:#000}
#work #viewport .chip p:first-child{font-size:12px;letter-spacing:-.4px;white-space:normal;overflow-wrap:anywhere}
#work #viewport .chip p:nth-child(2){font-size:12px;line-height:1.6}
#work #pipeCycle{font-size:44px!important;letter-spacing:-2px;color:#00ffff;line-height:1}
#work #viewport #asmPanel pre{padding:24px;font-size:14px;line-height:1.85;overflow:auto}
#work #viewport .instrument-body>.border{background:#000;border-color:var(--project-rule)}
#work #viewport .instrument-body>.border>div:first-child{padding:18px 22px}
#work #viewport .instrument-body>.grid{gap:24px}
#work #viewport .instrument-body>.grid.gap-px{gap:1px}
#work #viewport .instrument-body>.grid.gap-px>div{padding:24px}
#work #viewport table{font-size:14px;line-height:1.7}
#work #viewport :is(td,th){font-size:14px;padding:16px 20px}
#work #viewport thead th{font-size:12px;color:#00ffff}
#work #viewport table tbody tr:hover{background:#00ffff0d}
#work #viewport .cnt{font-size:clamp(20px,2.6vw,34px);font-weight:400;line-height:1.3;letter-spacing:-1px;color:#00ffff}
#work #viewport [data-view]{min-width:0}
#work #viewport[data-view=timeline] .instrument-body>.border{overflow-x:auto}
#work #viewport[data-view=timeline] .instrument-body>.border>div{min-width:720px}
#work #viewport[data-view=timing] .instrument-body>.border{overflow-x:auto}
#work #viewport[data-view=timing] svg{min-width:950px}
#work #viewport .beam-host{display:none}
#work #readout{display:flex;flex-wrap:wrap;gap:18px 38px;padding:24px 0;margin-top:28px;background:#000;border:0;border-top:1px solid var(--project-rule)}
#work #readout:empty{display:none}
#work #readout>div{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;line-height:1.8}
#work #readout span{color:#fff}#work #readout strong{font-weight:400;color:#00ffff}
.project-next{padding:30px 0 50px;margin-top:45px;border-top:1px solid var(--project-rule)}
.project-next>.eyebrow{display:block;font-size:12px;letter-spacing:1px;color:#00ffff;margin-bottom:20px}
.project-next>div{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.project-next a{display:grid;grid-template-columns:1fr auto;gap:14px;padding:18px 0;color:#fff}
.project-next a>span{grid-column:1/-1;font-size:12px;line-height:1.5}
.project-next strong{font-size:24px;letter-spacing:-.7px;font-weight:400}
.project-next b{font-size:24px;font-weight:400;color:#00ffff}
#work .project-next a:hover strong{color:#00ffff}
@media(min-width:1100px){
#work #viewport[data-view=datapath] .instrument-grid{grid-template-columns:minmax(0,1fr) 320px}
#work #viewport[data-view=datapath] .instrument-grid>.space-y-5{display:flex;flex-direction:column}
#work #viewport[data-view=datapath] .instrument-grid svg{min-width:610px}
}
@media(max-width:1200px){
#work.work-page{padding-inline:4%}.workspace-nav{flex-wrap:wrap;gap:0}#work #transport{padding:10px 0 15px}
.project-masthead{gap:32px 5%}.case-evidence{gap:5%}.system-evidence{padding:20px}.system-flow{gap:8px}.system-flow strong{font-size:16px}
#work #viewport dl.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
#work.work-page{padding-inline:6%}#work .project-switcher{gap:12px;min-height:72px}#work #btnBack{font-size:12px;letter-spacing:0}#work #rail label{display:none}#project-select{font-size:12px;max-width:185px;padding-left:10px}
.project-masthead{grid-template-columns:1fr;padding-top:38px;gap:28px}.project-masthead h1{font-size:clamp(34px,7.7vw,52px);letter-spacing:-1.8px}.project-masthead .eyebrow{font-size:12px;letter-spacing:0}.project-masthead .eyebrow span{padding:0 4px}.project-masthead .case-lede{margin-top:22px}.case-context{padding-left:18px}.case-context .tools-label{margin-top:16px}
.case-metrics{margin:0}.case-metrics>div{padding:18px 12px}.metric-label{font-size:12px;min-height:38px;line-height:1.6}.metric-value{font-size:clamp(16px,4.6vw,28px);letter-spacing:-.7px}.metric-value>span{display:block;font-size:12px;margin:6px 0 0}.project-masthead.compact{padding:24px 0}.project-masthead.compact h1{font-size:23px}
.workspace-nav{margin-top:20px}#work #tabs{flex-basis:100%;gap:0;min-height:58px}#work #tabs a{padding:15px 13px;font-size:14px}.workspace-heading{padding:28px 0 22px;align-items:start}#work #viewerTitle{font-size:26px}.workspace-heading .eyebrow{font-size:12px}.workspace-heading #runLed{font-size:12px;margin-top:4px}
.case-evidence{grid-template-columns:1fr;gap:30px;padding:34px 0}.benchmark-bars,.system-evidence{padding:22px}.system-flow{gap:10px}.system-flow strong{font-size:16px}.system-flow small{font-size:12px}.design-notes{grid-template-columns:1fr;gap:28px}.design-note{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 14px}.note-number{grid-row:1/3;margin-top:4px}.design-note>p{grid-column:2}
#work #viewport .instrument-grid>.space-y-5{grid-template-columns:1fr}#work #viewport .instrument-grid>.space-y-5>div{padding:22px}#work #viewport .instrument-grid>div:first-child>div:first-child,#work #viewport .instrument-grid>figure>div:first-child{flex-wrap:wrap;padding:16px}
#work #viewport .instrument-grid svg{padding:16px;min-width:720px}#work #viewport dl.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#work #viewport .stat-grid>div{padding:16px 14px}
#work #viewport .instrument-body{gap:22px}#work #viewport .instrument-body>.grid{gap:18px}#work #viewport :is(td,th){font-size:13px;padding:14px}
#work #readout{gap:16px 24px}.project-next>div{grid-template-columns:1fr;gap:10px}.project-next{margin-top:30px;padding-bottom:30px}.project-next strong{font-size:22px}
}
@media(max-width:380px){#work .project-switcher{align-items:stretch;flex-direction:column;gap:0;padding-bottom:16px}#work #btnBack{padding-block:16px}#project-select{max-width:100%;width:100%}#work #rail{display:block}.case-metrics{grid-template-columns:1fr}.case-metrics>div{border-right:0;border-bottom:1px solid var(--project-rule)}.metric-label{min-height:0}.metric-value{font-size:27px}.system-flow{flex-wrap:wrap}.system-flow strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){#work *{animation:none!important;transition:none!important}}
/* Baseline comparison: outlined reference bars and cyan measured ratios. */
.comparison-chart{padding:26px;border:1px solid var(--project-rule);min-width:0}
.comparison-legend{display:flex;flex-wrap:wrap;gap:14px 24px;font-size:12px;line-height:1.5;margin-bottom:26px}
.comparison-legend>span{display:inline-flex;align-items:center;gap:8px}
.comparison-legend i{display:inline-block;width:20px;height:6px;background:#00ffff}
.comparison-legend .baseline-swatch{background:transparent;border:1px solid #fff}
.comparison-row{margin-bottom:19px}
.comparison-row>div:first-child{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:1.5;margin-bottom:9px}
.comparison-row strong{font-weight:400;color:#00ffff;font-variant-numeric:tabular-nums}
.comparison-track{display:flex;flex-direction:column;gap:4px;position:relative}
.comparison-track i{display:block;height:6px}
.comparison-track .baseline-bar{border:1px solid #fff;background:transparent}
.comparison-track .our-bar{background:#00ffff}
.comparison-scale{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.7;margin-top:24px}
.comparison-scale>span:nth-child(2){text-align:center}
.comparison-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--project-rule)}
.comparison-summary>div{padding:24px;border-right:1px solid var(--project-rule);min-width:0}
.comparison-summary>div:last-child{border-right:0}
#work #viewport .comparison-summary p{font-size:12px;line-height:1.7;margin:0 0 16px}
.comparison-summary strong{font-size:clamp(24px,3vw,42px);font-weight:400;line-height:1.25;color:#00ffff;letter-spacing:-1px}
.comparison-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:24px;flex-wrap:wrap}
.comparison-toolbar>div{display:flex;border:1px solid var(--project-rule)}
#work #viewport .comparison-toolbar button{background:#000;color:#fff;border:0;border-right:1px solid var(--project-rule);padding:12px 20px;min-height:44px;font-size:14px}
#work #viewport .comparison-toolbar button:last-child{border:0}
#work #viewport .comparison-toolbar button[aria-pressed=true]{background:#00ffff;color:#000}
#work #viewport .comparison-toolbar p{font-size:14px;max-width:60ch}
.comparison-detail{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;align-items:start}
.comparison-table{overflow-x:auto;border:1px solid var(--project-rule)}
#work #viewport .comparison-table table{width:100%;min-width:490px}
#work #viewport .comparison-table :is(td,th){padding:16px 14px;text-align:right;white-space:nowrap;font-size:14px;border-bottom:1px solid var(--project-rule);font-weight:400}
#work #viewport .comparison-table th:first-child{text-align:left}
#work #viewport .comparison-table td:last-child{color:#00ffff}
#work #viewport .comparison-table caption{caption-side:top;text-align:left;padding:18px 14px;color:#fff;font-size:12px;border-bottom:1px solid var(--project-rule)}
#work #viewport .comparison-source{font-size:12px;line-height:1.9;max-width:110ch}
.raw-results{border:1px solid var(--project-rule);min-width:0}
.raw-results summary{padding:20px 24px;font-size:14px;line-height:1.8;cursor:pointer;color:#00ffff}
.raw-results summary span{display:block;font-size:12px;color:#fff;margin-top:6px}
.raw-results>div{border:0;border-top:1px solid var(--project-rule)}
.raw-results>div>div:first-child{display:none}
@media(max-width:1100px){.comparison-detail{grid-template-columns:1fr}.comparison-summary>div{padding:20px}}
@media(max-width:760px){.comparison-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.comparison-summary>div{padding:20px;border-bottom:1px solid var(--project-rule)}.comparison-summary>div:nth-child(2){border-right:0}.comparison-summary>div:nth-child(n+3){border-bottom:0}.comparison-chart{padding:22px}.comparison-toolbar{gap:18px}.comparison-toolbar>div{width:100%}#work #viewport .comparison-toolbar button{padding:12px 14px;flex:1}.comparison-row>div:first-child{font-size:13px}.comparison-legend{gap:12px;font-size:12px}.comparison-scale{font-size:12px}.raw-results summary{padding:18px}}