/* Utkaarsh Gupta · portfolio. Light paper, ink title blocks, real Cadence captures as dark "screens". */
:root {
  --bg: #f3f2ee; --surface: #ffffff; --soft: #faf9f6; --ink: #111110; --ink-2: #55534d; --ink-3: #8d8a82; --rule: #dddad1;
  --accent: #e2461f; --accent-tint: rgba(226,70,31,.08); --screen: #0b0b0d;
  --m1: #3a63c9; --poly: #d9473a; --diff: #2f9558; --via: #d9a21b; --nwell: #9a968c;
  --ch1: #e2461f; --ch2: #2b5c9c; --ch3: #b0770e; --ch4: #3b7b4b; --warn: #d0331f;
  --scr: #ffffff; --scr-grid: rgba(17,17,16,.06); --scr-dim: #8d8a82; --scr-ink: rgba(17,17,16,.65); --scr-ref: rgba(226,70,31,.4);
  --sans: "Schibsted Grotesk", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --max: 1280px; --pad: 40px; --r: 8px;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }

.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600; font-size: 15px; border: 1.5px solid var(--ink); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.eyebrow { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.fine { font: 400 12px/1.6 var(--mono); color: var(--ink-3); margin: 12px 0 0; }
.zoom { all: unset; display: block; width: 100%; box-sizing: border-box; cursor: zoom-in; border-radius: 6px; }
.zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad); background: rgba(243,242,238,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 15px; }
.mark span { display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: var(--bg); font: 600 12px var(--mono); border-radius: 4px; }
.nav nav { display: flex; gap: 4px; }
.nav nav a { text-decoration: none; font-size: 14px; color: var(--ink-2); padding: 8px 10px; border-radius: 6px; }
.nav nav a:hover { color: var(--ink); background: rgba(17,17,16,.05); }

/* ---------------------------------------------------------------- hero */
.hero { max-width: var(--max); margin: 0 auto; padding: 56px var(--pad) 72px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(64px, 7.4vw, 112px); line-height: .86; letter-spacing: -0.045em; font-weight: 800; margin: 0 0 26px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 36ch; margin: 0 0 32px; }
.counts { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--ink); }
.counts li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); }
.counts li:nth-child(odd) { border-right: 1px solid var(--rule); }
.counts li:nth-child(even) { padding-left: 16px; }
.counts b { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.counts span { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }

.wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 8px; }
.tile { all: unset; position: relative; overflow: hidden; border-radius: 6px; background: var(--screen); cursor: zoom-in; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .3s; opacity: .92; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); opacity: 1; }
.tile span { position: absolute; left: 8px; bottom: 8px; font: 500 10.5px var(--mono); color: #fff; background: rgba(0,0,0,.62); padding: 3px 7px; border-radius: 3px; letter-spacing: .02em; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-a { grid-column: 1 / 5; grid-row: 1 / 4; } .t-b { grid-column: 5 / 7; grid-row: 1 / 4; }
.t-c { grid-column: 1 / 3; grid-row: 4 / 6; } .t-d { grid-column: 3 / 5; grid-row: 4 / 6; } .t-e { grid-column: 5 / 7; grid-row: 4 / 6; }
.t-f { grid-column: 1 / 3; grid-row: 6 / 8; } .t-g { grid-column: 3 / 5; grid-row: 6 / 8; } .t-h { grid-column: 5 / 7; grid-row: 6 / 8; }
.t-h img { object-fit: contain; }

/* ---------------------------------------------------------------- index */
.index, .more { max-width: var(--max); margin: 0 auto; padding: 56px var(--pad) 40px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-bottom: 1.5px solid var(--ink); padding-bottom: 14px; }
.sec-head h2 { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin: 0; }
.sec-head p { color: var(--ink-2); max-width: 46ch; margin: 0; text-align: right; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows a { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) 220px 70px; align-items: baseline; gap: 16px; padding: 22px 8px; border-bottom: 1px solid var(--rule); text-decoration: none; transition: background .2s, padding .25s; }
.rows .n { font: 500 13px var(--mono); color: var(--ink-3); }
.rows .t { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.rows .k { font-size: 14px; color: var(--ink-2); }
.rows .y { font: 400 13px var(--mono); color: var(--ink-3); text-align: right; }
.rows img { position: absolute; right: 110px; top: 50%; width: 220px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--screen); transform: translateY(-50%) rotate(-2deg) scale(.92); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1); box-shadow: 0 18px 40px -16px rgba(0,0,0,.35); z-index: 2; }
.rows a:hover { background: var(--surface); padding-left: 18px; }
.rows a:hover .n { color: var(--accent); }
.rows a:hover img { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1); }

/* ---------------------------------------------------------------- project frame */
.project { max-width: var(--max); margin: 0 auto; padding: 120px var(--pad) 24px; }
.tb { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border: 1.5px solid var(--ink); background: var(--surface); border-radius: 2px; }
.tb-main { padding: 30px 32px 32px; }
.tb-n { display: inline-block; font: 600 12px var(--mono); color: var(--accent); border: 1.5px solid var(--accent); padding: 2px 8px; border-radius: 3px; margin-bottom: 18px; }
.tb h2 { font-size: clamp(38px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.035em; line-height: .98; margin: 0 0 16px; }
.tb-main p { font-size: 17px; color: var(--ink-2); margin: 0; max-width: 54ch; }
.tb-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-left: 1.5px solid var(--ink); }
.tb-grid > div { padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.tb-grid > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.tb-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.tb-grid dt { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 4px; }
.tb-grid dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }

.kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.kpis li { padding: 22px 16px 20px 0; display: grid; gap: 2px; }
.kpis li + li { padding-left: 16px; border-left: 1px solid var(--rule); }
.kpis b { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.kpis span { font-size: 13px; color: var(--ink-2); }

.block { margin-top: 72px; }
.block-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: baseline; margin-bottom: 20px; }
.block-head h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.block-head p { color: var(--ink-2); margin: 0; max-width: 66ch; }

/* ---------------------------------------------------------------- schematic (shared) */
.sch { width: 100%; height: auto; display: block; font-family: var(--mono);
  --s-ink: var(--ink); --s-ink2: var(--ink-3); --s-bg: var(--surface); --s-flow: var(--accent); --s-dim: .18; }
.sch .part :is(line, path, rect, circle) { stroke: var(--s-ink); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.sch .part .body, .sch .part .bubble { fill: var(--s-bg); }
.sch .part .dot { fill: var(--s-ink); }
.sch .part .term { fill: var(--s-bg); stroke-width: 1.6; }
.sch .part .glyph { stroke: var(--s-flow); }
.sch text { fill: var(--s-ink); stroke: none; font-size: 11px; }
.sch .lbl { fill: var(--s-ink2); font-size: 10.5px; }
.sch .lbl-strong { font-weight: 500; font-size: 12px; }
.sch .pin { font-size: 13px; }
.sch .arrowhead { fill: var(--s-ink); }
.sch .part { transition: opacity .45s; }
.sch.focusing .part:not(.hot) { opacity: var(--s-dim); }
.sch .flow { fill: none; stroke: var(--s-flow); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 9; opacity: 0; transition: opacity .45s; }
.sch .flow.on { opacity: .6; animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }
.sch .x-mark { display: none; }
.sch .x-mark line { stroke: var(--warn) !important; stroke-width: 3 !important; }
.sch .f-shoot { stroke: var(--warn); stroke-width: 6; stroke-dasharray: none; }
.sch .cut, .sch .probes { display: none; }

/* ---------------------------------------------------------------- bench */
.inst { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.inst-sch { padding: 16px; border-right: 1px solid var(--rule); display: flex; align-items: center; }
.inst-sch > div { width: 100%; }
.inst-scope { display: flex; flex-direction: column; background: var(--scr); }
#scope { width: 100%; flex: 1; min-height: 460px; display: block; }
.meas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); font: 400 10.5px var(--sans); min-height: 54px; background: var(--surface); }
.meas > div { padding: 7px 10px; border-right: 1px solid var(--rule); display: grid; gap: 1px; }
.meas > div:last-child { border-right: 0; }
.meas span { color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.meas b { font: 500 14.5px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.meas .warn b { color: var(--warn); }
/* experiments: numbered steps above the instrument */
.exps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; counter-reset: x; }
.exps button { all: unset; box-sizing: border-box; width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 11px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.exps button:hover { border-color: var(--ink-2); }
.exps button:active { transform: scale(.98); }
.exps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exp-n { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); border: 1.5px solid var(--ink-3); color: var(--ink-2); align-self: center; }
.exp-t { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.exp-h { font: 400 11.5px var(--mono); color: var(--ink-3); }
.exps button.done .exp-n { background: var(--ink-3); border-color: var(--ink-3); color: #fff; }
.exps button[aria-current="step"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.exps button[aria-current="step"] .exp-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.exps button[aria-current="step"] .exp-h { color: rgba(255,255,255,.6); }
.inst-sch { flex-direction: column; justify-content: space-between; gap: 10px; padding: 0; }
.inst-sch > #benchSch { padding: 16px 16px 0; }
.inst > * { min-width: 0; }
.inst-tip { margin: 0; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.tip-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.3px dashed var(--ink-3); vertical-align: -1px; }
.tip-dash { display: inline-block; width: 16px; height: 10px; border: 1.3px dashed var(--ink-3); border-radius: 2px; vertical-align: -1px; }
.now { align-self: stretch; padding: 16px 20px 16px; border-top: 1px solid var(--rule); background: var(--soft); min-height: 176px; }
.now-k { margin: 0 0 4px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.now h4 { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.now p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.now .look { color: var(--ink); }
.now .look b { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--ink); border-radius: 3px; padding: 2px 6px; margin-right: 6px; vertical-align: 1px; }
.now-next { all: unset; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.now-next:hover { text-decoration: underline; }
.now-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.scope-wrap { flex: 1; display: flex; }
.console { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.console-k { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-right: 4px; }
.chans { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chans > div { display: flex; flex-wrap: wrap; gap: 6px; }
.chan { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; font: 500 12px var(--mono); color: var(--ink-2); border: 1px dashed var(--rule); background: transparent; }
.chan:hover { border-color: var(--ink-2); color: var(--ink); }
.chan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chan.on { border: 1px solid var(--c); background: var(--surface); color: var(--ink); }
.chan.on i { font-style: normal; color: #fff; background: var(--c); border-radius: 999px; padding: 1px 6px; font-size: 10.5px; margin-left: -4px; }
.chan.on span { color: var(--ink-3); }
.transport { display: flex; gap: 6px; }
.keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; align-items: center; }
.key { font: 500 13.5px var(--sans); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 15px; min-height: 38px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.key:hover { border-color: var(--ink-2); }
.key:active { transform: scale(.97); }
.key[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.key.brk[aria-pressed="true"] { background: var(--warn); border-color: var(--warn); color: #fff; }
.sep { width: 1px; height: 22px; background: var(--rule); margin: 0 4px; }
.story { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 16px 0 0; min-height: 3em; max-width: 72ch; padding-left: 14px; border-left: 2px solid var(--accent); }

.bench-sch { --s-dim: .2; }
.bench-sch .cut, .bench-sch .probes { display: inline; }
.bench-sch [data-part="t3"], .bench-sch [data-part="dt"], .bench-sch .cut, .bench-sch .clickable, .bench-sch .probe { cursor: pointer; }
.bench-sch g:focus { outline: none; }
.bench-sch .t3box, .bench-sch .dtbox { stroke: var(--ink-2) !important; stroke-dasharray: 4 3; }
.bench-sch [data-part="t3"]:hover .t3box, .bench-sch [data-part="dt"]:hover .dtbox,
.bench-sch [data-part="t3"]:focus-visible .t3box, .bench-sch [data-part="dt"]:focus-visible .dtbox { fill: var(--accent-tint); stroke: var(--accent) !important; }
.bench-sch.br-t3 [data-part="t3"] .x-mark, .bench-sch.br-dt [data-part="dt"] .x-mark { display: inline; }
.bench-sch.br-t3 .t3box, .bench-sch.br-dt .dtbox { stroke: var(--warn) !important; stroke-dasharray: none; }
.bench-sch.br-dt .f-shoot { opacity: .8; animation: blink .5s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.bench-sch .clickable:hover :is(line, path, circle), .bench-sch .clickable:focus-visible :is(line, path, circle) { stroke: var(--ch2); }
.bench-sch.sc-load [data-part="load"] :is(line, path) { stroke: var(--ch2); stroke-width: 2.4; }
.bench-sch.sc-load [data-part="load"] text, .bench-sch.sc-vin [data-part="vin"] text { fill: var(--ch2); }
.bench-sch.sc-vin [data-part="vin"] :is(line, circle) { stroke: var(--ch2); }
.cut-hit { fill: transparent; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.cut:hover .cut-hit, .cut:focus-visible .cut-hit { fill: var(--accent-tint); stroke: var(--accent); }
.cut-gap { display: none; }
.cut-gap line { stroke: var(--warn); stroke-width: 2.5; }
.br-open .cut-hit { fill: var(--s-bg); stroke: var(--warn); stroke-dasharray: none; }
.br-open .cut-gap { display: inline; }
.probe-hit { fill: transparent; }
.probe-ring { fill: var(--s-bg); stroke: var(--ink-3); stroke-width: 1.3; stroke-dasharray: 2.5 2; }
.probe-tag { display: none; font-size: 10px !important; font-weight: 500; fill: var(--s-ink) !important; paint-order: stroke; stroke: var(--s-bg) !important; stroke-width: 4px; }
.probe:hover .probe-tag, .probe:focus-visible .probe-tag, .probe.active .probe-tag { display: inline; }
.probe:hover .probe-ring { stroke: var(--ink); stroke-dasharray: none; }
.probe:focus-visible .probe-ring { stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: none; }
.probe.ch1 { --c: var(--ch1); } .probe.ch2 { --c: var(--ch2); } .probe.ch3 { --c: var(--ch3); } .probe.ch4 { --c: var(--ch4); }
.probe.active .probe-ring { fill: var(--c); stroke: var(--surface); stroke-dasharray: none; stroke-width: 2; }
.probe.active .probe-tag { fill: var(--c) !important; }

/* ---------------------------------------------------------------- library manager */
.counts li > a { display: contents; color: inherit; text-decoration: none; }
.counts li:has(a):hover b { color: var(--accent); }
.library { max-width: var(--max); margin: 0 auto; padding: 56px var(--pad) 0; }
.lm { color: var(--ink); margin-top: 24px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 60px -36px rgba(17,17,16,.35); }
.lm-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--rule); background: var(--soft); font: 500 12px var(--mono); }
.lm-bar b { font-weight: 600; }
.lm-dots { display: flex; gap: 6px; }
.lm-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.lm-path { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-body { display: grid; grid-template-columns: 170px 230px 150px minmax(0, 1fr); height: 520px; }
.lm-col { border-right: 1px solid var(--rule); overflow-y: auto; overscroll-behavior: contain; }
.lm-h { position: sticky; top: 0; z-index: 1; margin: 0; padding: 10px 12px 8px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); background: var(--surface); border-bottom: 1px solid var(--rule); }
.lm ul { list-style: none; margin: 0; padding: 4px; }
.lm li button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 5px; font: 400 12.5px var(--mono); color: var(--ink); cursor: pointer; }
.lm li button:hover { background: rgba(17,17,16,.05); }
.lm li button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.lm li button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lm li button small { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }
.lm li button[aria-pressed="true"] small { color: rgba(255,255,255,.6); }
.lm-th { width: 26px; height: 26px; flex: none; border-radius: 3px; background: #000; object-fit: cover; }
.lm-fin { font: 600 9.5px var(--mono); color: var(--accent); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.lm li button[aria-pressed="true"] .lm-fin { color: #ff9a7e; }
.lm-sep { margin: 8px 8px 4px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.lm-pre { position: relative; background: #000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #e9e7e1; min-width: 0; }
.lm-ed { display: flex; align-items: baseline; gap: 10px; padding: 9px 14px; background: #1b1b1d; border-bottom: 1px solid #2c2c30; font: 400 11.5px var(--mono); color: #8f8c85; white-space: nowrap; overflow: hidden; }
.lm-ed b { color: #e9e7e1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.lm-ed em { margin-left: auto; font-style: normal; color: #6f6c66; }
/* Virtuoso's canvas: black with a sparse dot grid */
.lm-stage { display: grid; place-items: center; padding: 22px; min-height: 0; background-color: #000; background-image: radial-gradient(rgba(255,255,255,.22) .8px, transparent 1.1px); background-size: 16px 16px; }
.lm-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.lm-stage img.pv { width: min(100%, 384px); aspect-ratio: 1; }
.lm-stage.has-cap { padding: 12px; }
.lm-stage img.cap { width: 100%; height: 100%; cursor: crosshair; }
.lm-stage img.cap.light { background: #fff; border-radius: 4px; padding: 6px; }
.lm-none { font: 400 12.5px var(--mono); color: #9b988f; text-align: center; max-width: 30ch; line-height: 1.6; background: #000; padding: 10px; }
.lm-none b { display: block; color: #e9e7e1; font-weight: 500; margin-bottom: 6px; }
/* saved ADE state, drawn as the ADE L window it came from */
.lm-stage.has-ade { padding: 14px; overflow: auto; place-items: start stretch; }
.ade { width: 100%; max-width: 640px; justify-self: center; background: #ecebe8; color: #1d1d1f; border: 1px solid #8d8b86; border-radius: 4px; font: 400 12px/1.45 var(--mono); box-shadow: 0 8px 28px rgba(0,0,0,.45); overflow: hidden; }
.ade-h { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 7px 10px; background: linear-gradient(#f7f6f3, #dedcd7); border-bottom: 1px solid #a9a6a0; }
.ade-h b { font-weight: 600; }
.ade-h span { color: #55534e; }
.ade-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; padding: 8px; }
.ade section { background: #fff; border: 1px solid #b7b4ae; min-width: 0; }
.ade h4 { margin: 0; padding: 3px 7px; font: 600 11px var(--mono); background: #e2e0db; border-bottom: 1px solid #b7b4ae; }
.ade table { width: 100%; border-collapse: collapse; }
.ade th { text-align: left; font-weight: 500; color: #6a6862; padding: 3px 7px; border-bottom: 1px solid #e3e1dc; }
.ade td { padding: 3px 7px; border-bottom: 1px solid #f0efeb; vertical-align: top; }
.ade td:nth-child(2) { color: #1f7a3a; }
.ade-f { margin: 0; padding: 2px 8px 8px; display: grid; gap: 2px; }
.ade-f div { display: grid; grid-template-columns: 128px 1fr; gap: 8px; }
.ade-f dt { color: #6a6862; }
.ade-f dd { margin: 0; }
@media (max-width: 720px) { .ade-grid { grid-template-columns: 1fr; } .ade-f div { grid-template-columns: 1fr; gap: 0; } }
.lm-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1); font: 400 12px var(--mono); color: #9b988f; }
.lm-meta b { color: #fff; font-weight: 500; }
.lm-open { all: unset; cursor: zoom-in; margin-left: auto; font: 500 12px var(--mono); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; padding: 5px 10px; }
.lm-open:hover { background: rgba(255,255,255,.1); }
.lm-open:focus-visible { outline: 2px solid var(--accent); }
.lm-status { padding: 8px 14px; border-top: 1px solid var(--rule); background: var(--soft); font: 400 11.5px var(--mono); color: var(--ink-3); }

/* ---------------------------------------------------------------- loupe */
.loupe { position: fixed; z-index: 40; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 18px 40px -10px rgba(0,0,0,.55); background-color: #000; background-repeat: no-repeat; opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; }
.loupe.on { opacity: 1; transform: none; }
.loupe::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: linear-gradient(#fff,#fff) center/1px 100% no-repeat, linear-gradient(#fff,#fff) center/100% 1px no-repeat; opacity: .55; }
.has-loupe { cursor: crosshair; }
.loupe-hint { font: 400 11.5px var(--mono); color: var(--ink-3); }

/* ---------------------------------------------------------------- tabs, explorer */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { all: unset; cursor: pointer; font: 500 13.5px var(--sans); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); transition: background .15s, color .15s, border-color .15s; }
.tabs button:hover { border-color: var(--ink-2); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.explorer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "sch text" "proof proof"; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.ex-sch { grid-area: sch; padding: 18px; display: grid; place-items: center; }
.ex-text { grid-area: text; padding: 22px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.ex-text h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; }
.ex-text p { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); }
.ex-text .facts { font: 400 12.5px var(--mono); color: var(--ink); margin: 0; }
.ex-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font: 400 11.5px var(--mono); color: var(--ink-3); }
.ex-nav button { all: unset; cursor: pointer; font: 600 13px var(--sans); color: var(--ink); padding: 6px 0; }
.ex-nav button:hover:not(:disabled) { color: var(--accent); }
.ex-nav button:disabled { color: var(--ink-3); opacity: .45; cursor: default; }
.ex-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.ex-text .facts span { color: var(--ink-3); margin-right: 6px; }
.mini { position: relative; height: 170px; border: 1px solid var(--rule); border-radius: 6px; background: var(--scr); overflow: hidden; margin-top: auto; }
.mini canvas { width: 100%; height: 100%; display: block; }
.mini-tb { position: absolute; right: 8px; bottom: 6px; font: 400 10.5px var(--mono); color: var(--ink-3); }
.ex-proof { grid-area: proof; padding: 18px; border-top: 1px solid var(--rule); background: var(--soft); }
.label { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 12px; }
.proofs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.proofs figure { margin: 0; }
.proofs .zoom img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--screen); border-radius: 6px; }
.proofs .zoom.light img { background: #fff; border: 1px solid var(--rule); }
.proofs figcaption { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }

/* ---------------------------------------------------------------- results, lineage, timeline */
.results { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
.spec { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.spec tr { border-bottom: 1px solid var(--rule); }
.spec th { text-align: left; font-weight: 400; font-size: 15px; padding: 10px 12px 10px 0; color: var(--ink-2); }
.spec td { text-align: right; font: 500 14px var(--mono); padding: 10px 0; white-space: nowrap; }
.spec td small { display: block; font: 400 11.5px var(--sans); color: var(--ink-3); white-space: normal; }
.spec sub { font-size: .75em; }
.res-figs { display: grid; gap: 18px; }
.res-figs figure { margin: 0; }
.res-figs img { width: 100%; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.res-figs figcaption, .cellview figcaption, .op-grid figcaption { font-size: 13px; color: var(--ink-2); margin-top: 8px; }

.lineage { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px 22px; margin-bottom: 28px; }
.lane { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 14px; }
.lane-k { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.lane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center; }
.lane li { font: 500 12.5px var(--mono); padding: 5px 9px; border: 1px solid var(--rule); border-radius: 4px; background: var(--soft); }
.lane li:not(:last-child) { margin-right: 22px; position: relative; }
.lane li:not(:last-child)::after { content: ""; position: absolute; right: -17px; top: 50%; width: 12px; height: 1.5px; background: var(--ink-3); }
.lane li.fin { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.timeline li { border-top: 2px solid var(--ink); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.timeline time { font: 600 12px var(--mono); color: var(--accent); }
.timeline b { font-size: 15px; font-weight: 600; }
.timeline span { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.mini-img { margin-top: 8px; }
.mini-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 4px; border: 1px solid var(--rule); background: #fff; }

/* ---------------------------------------------------------------- cells */
.cellbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cellbar .tabs { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; background: var(--surface); }
.seg button { all: unset; cursor: pointer; font: 500 13px var(--sans); padding: 6px 13px; border-radius: 999px; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:focus-visible { outline: 2px solid var(--accent); }
.cellview { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cellview.one { grid-template-columns: 1fr; }
.cellview figure { margin: 0; }
.cellview .zoom img { width: 100%; height: 400px; padding: 14px; box-sizing: border-box; object-fit: contain; background: var(--screen); border-radius: var(--r); }
.cellview.one .zoom img { height: 560px; }
.cellview figcaption b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.chk { display: inline-block; font: 500 11px var(--mono); color: var(--diff); border: 1px solid var(--diff); border-radius: 3px; padding: 0 6px; margin-left: 6px; }

.build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 28px; }
#inv { height: 470px; width: 100%; }
#inv text { font-family: var(--mono); }
#inv [data-k] { opacity: 0; transform: translateY(-10px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
#inv [data-k].in { opacity: 1; transform: none; }
.L-bound { fill: none; stroke: var(--ink-3); stroke-dasharray: 4 4; }
.L-nwell { fill: rgba(154,150,140,.08); stroke: var(--nwell); stroke-width: 1.3; stroke-dasharray: 7 4; }
.L-diff { fill: url(#iDiff); stroke: var(--diff); stroke-width: 1.4; }
.L-poly { fill: var(--poly); opacity: .85; }
.L-ct { fill: var(--via); stroke: rgba(0,0,0,.35); stroke-width: .6; }
.L-m1 { fill: url(#iM1); stroke: var(--m1); stroke-width: 1.4; }
.L-t { fill: var(--ink-3); font-size: 12px; }
.L-pin { fill: var(--ink); font-size: 14px; font-weight: 500; text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.L-ok { fill: none; stroke: var(--diff); stroke-width: 2.5; }
.L-scan { fill: var(--diff); opacity: 0; }
#inv [data-k="5"].in .L-scan { animation: scan 1.2s ease-in-out both; }
@keyframes scan { 0% { transform: translateY(0); opacity: .5; } 100% { transform: translateY(514px); opacity: 0; } }
.L-badge rect { fill: var(--surface); stroke: var(--diff); stroke-width: 1.3; }
.L-badge text { fill: var(--diff); font-size: 15px; font-weight: 500; text-anchor: middle; }
.layers { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--rule); }
.layers button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; padding: 10px 4px; border-bottom: 1px solid var(--rule); align-items: baseline; transition: opacity .25s; }
.layers button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.layers .sw { width: 14px; height: 14px; border-radius: 3px; align-self: center; }
.layers b { font-size: 15px; font-weight: 600; }
.layers span:not(.sw) { grid-column: 2; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.layers button.later { opacity: .35; }
.layers button.cur b { color: var(--accent); }

/* ---------------------------------------------------------------- op-amp */
.op-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.op-grid figure { margin: 0; }
.op-grid img { width: 100%; height: 360px; object-fit: contain; background: var(--screen); border-radius: var(--r); }
.op-lay { grid-row: span 2; }
.op-lay img { height: 734px; object-fit: cover; object-position: 30% center; }
.op-sym img { background: #fff; border: 1px solid var(--rule); }

/* ---------------------------------------------------------------- more */
.more { padding-top: 120px; }
.cards { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
#paper { grid-row: span 2; }
#paper h3 { font-size: 26px; max-width: 22ch; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; }
.card .tb-n { align-self: flex-start; margin-bottom: 14px; }
.card .kind { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 10px; }
.card h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 12px; }
.card p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; }
.card p b { color: var(--ink); }
.card .meta { font: 400 12.5px var(--mono); color: var(--ink-3); margin-top: auto; padding-top: 8px; }

/* ---------------------------------------------------------------- contact */
.contact { width: min(calc(100% - 2 * var(--pad)), calc(var(--max) - 2 * var(--pad))); margin: 120px auto 0; padding: 56px 0 40px; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
.contact h2 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin: 0 0 18px; }
.con-main p { color: var(--ink-2); font-size: 17px; max-width: 52ch; margin: 0 0 26px; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; }
.links a:hover { background: var(--ink); color: var(--bg); }
.tools { margin: 0; border-top: 1px solid var(--rule); align-self: start; }
.tools > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tools dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding-top: 3px; }
.tools dd { margin: 0; font-size: 15px; }
.foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font: 400 12px var(--mono); color: var(--ink-3); padding-top: 24px; border-top: 1px solid var(--rule); margin-top: 24px; }

/* ---------------------------------------------------------------- lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
.lb::backdrop { background: rgba(12,12,12,.88); backdrop-filter: blur(4px); }
.lb img { max-width: 92vw; max-height: 84vh; border-radius: 6px; background: #000; }
.lb p { color: #e9e7e1; font: 400 13px var(--mono); margin: 12px 0 0; text-align: center; }
.lb-x { position: fixed; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lb-x:hover { background: rgba(255,255,255,.24); }

/* quiet reveal */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */
/* ---------------------------------------------------------------- bands: each section on its own sheet */
.band { position: relative; }
.band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 40px) top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px) top / 100% 4px no-repeat;
  border-top: 1px solid var(--tick); }
.b-hero, .b-paper { --tick: rgba(17,17,16,.22); background-color: var(--bg); background-image: radial-gradient(rgba(17,17,16,.11) 1px, transparent 1.3px); background-size: 22px 22px; }
.b-hero { background-image: radial-gradient(rgba(17,17,16,.13) 1px, transparent 1.3px), linear-gradient(180deg, transparent 70%, rgba(243,242,238,1)); background-size: 22px 22px, 100% 100%; }
.b-hero::before { display: none; }
.b-white { --tick: rgba(17,17,16,.2); background: #fdfdfb; }
.b-tint { --tick: rgba(17,17,16,.22); background: #e7e3d8; }
.b-ink { --tick: rgba(255,255,255,.28); background-color: #131314; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px); background-size: 22px 22px; color: #f1efe9; }
.band > section { padding-top: 104px; padding-bottom: 104px; }
.band > .hero { padding-top: 56px; padding-bottom: 88px; }
.band > .index { padding-top: 88px; }
.b-ink .sec-head { border-color: #f1efe9; }
.b-ink .sec-head p { color: #a9a59c; }
.b-ink .lm { border-color: #2c2c2e; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
/* sheet labels on the white bands (engineering drawing feel): the project title blocks sit on paper-white */
.b-white .kpis, .b-white .block .inst, .b-white .explorer { box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.b-white .tb { background: #fff; }
.b-paper .tb { background: #fff; }

/* hero identity */
.who { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.ava { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--rule); }
.who .eyebrow { margin: 0; line-height: 1.6; }
.who .eyebrow span { color: var(--ink-3); letter-spacing: .06em; }

/* résumé */
.cv { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.cv-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; margin-top: 28px; align-items: start; }
.cv-page { display: block; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 30px 60px -30px rgba(17,17,16,.45); overflow: hidden; transform: rotate(-.6deg); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.cv-page:hover { transform: rotate(0) translateY(-4px); }
.cv-page:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cv-page img { width: 100%; height: auto; display: block; }
.cv-side { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; position: sticky; top: 96px; }
.cv-facts { width: 100%; margin: 20px 0 0; border-top: 1.5px solid var(--ink); }
.cv-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(17,17,16,.14); }
.cv-facts dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding-top: 3px; }
.cv-facts dd { margin: 0; font-size: 15px; }

/* contact on the dark sheet */
.band > .contact { width: auto; max-width: var(--max); margin: 0 auto; padding: 104px var(--pad) 40px; border-top: 0; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.con-photo { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: #2a2a2b; }
.con-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-ink .contact h2 { color: #fff; }
.b-ink .con-main p { color: #b9b5ab; }
.b-ink .btn { background: #fff; color: #131314; border-color: #fff; }
.b-ink .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.b-ink .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.b-ink .btn.ghost:hover { background: #fff; color: #131314; border-color: #fff; }
.b-ink .tools { margin-top: 36px; border-color: rgba(255,255,255,.18); }
.b-ink .tools > div { border-color: rgba(255,255,255,.12); }
.b-ink .tools dt { color: #8d8a82; }
.b-ink .foot { border-color: rgba(255,255,255,.14); color: #8d8a82; }
.links a.btn { border: 1.5px solid; }

@media (max-width: 1100px) {
  :root { --pad: 28px; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .tb { grid-template-columns: 1fr; }
  .tb-grid { border-left: 0; border-top: 1.5px solid var(--ink); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis li:nth-child(4) { border-left: 0; padding-left: 0; }
  .kpis li:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .inst, .results { grid-template-columns: 1fr; }
  .exps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lm-body { grid-template-columns: 160px minmax(0, 1fr) 170px; grid-template-rows: 250px minmax(420px, auto); height: auto; }
  .lm-views { border-right: 0; }
  .lm-pre { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
  .lm-ed em { display: none; }
  .inst-sch { border-right: 0; border-bottom: 1px solid var(--rule); }
  .explorer { grid-template-columns: 1fr; grid-template-areas: "sch" "text" "proof"; }
  .ex-sch { border-bottom: 1px solid var(--rule); }
  .ex-text { border-left: 0; }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .contact, .band > .contact { grid-template-columns: 1fr; }
  .con-photo { max-width: 320px; }
  .cv-grid { grid-template-columns: 1fr; }
  .cv-side { position: static; }
  .cards { grid-template-columns: 1fr 1fr; }
  #paper { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 720px) {
  :root { --pad: 16px; }
  body { font-size: 15.5px; }
  .nav { flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 0; }
  .nav .mark { padding: 12px var(--pad) 4px; }
  .nav nav { overflow-x: auto; scrollbar-width: none; padding: 0 calc(var(--pad) - 10px) 6px; }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav a { white-space: nowrap; font-size: 13.5px; }
  .lm-body { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .lm-col { border-right: 0; border-bottom: 1px solid var(--rule); }
  .lm-libs ul, .lm-views ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .lm-libs li button, .lm-views li button { width: auto; }
  .lm-cells { max-height: 240px; }
  .lm-pre { min-height: 360px; }
  .lm-path { display: none; }
  html { scroll-padding-top: 104px; }
  .loupe-hint { display: none; }
  .hero h1 { font-size: 64px; }
  .counts { grid-template-columns: 1fr; }
  .counts li:nth-child(odd) { border-right: 0; }
  .counts li:nth-child(even) { padding-left: 0; }
  .wall { grid-auto-rows: 56px; gap: 6px; }
  .sec-head { flex-direction: column; gap: 8px; }
  .sec-head p { text-align: left; }
  .rows a { grid-template-columns: 36px 1fr; gap: 4px 10px; padding: 18px 0; }
  .rows .k { grid-column: 2; }
  .rows .y, .rows img { display: none; }
  .rows a:hover { padding-left: 0; }
  .project { padding-top: 88px; }
  .tb-main { padding: 22px 18px 24px; }
  .tb-grid > div { padding: 12px 14px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis li { padding: 16px 12px 14px 0; }
  .kpis li:nth-child(n) { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .kpis li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--rule); }
  .kpis b { font-size: 24px; }
  .block { margin-top: 56px; }
  .block-head { grid-template-columns: 1fr; gap: 6px; }
  .inst-sch > #benchSch { overflow-x: auto; padding: 8px 8px 0; }
  #benchSch svg { min-width: 600px; }
  #scope { min-height: 360px; }
  .meas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meas > div:nth-child(3) { border-right: 0; }
  .meas > div:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .sep { display: none; }
  .exps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-h { display: none; }
  .console { flex-direction: column; align-items: flex-start; }
  .proofs { grid-template-columns: 1fr 1fr; }
  .lane { grid-template-columns: 1fr; gap: 8px; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .cellview { grid-template-columns: 1fr; }
  .cellview .zoom img, .cellview.one .zoom img { height: 280px; }
  .build { grid-template-columns: 1fr; padding: 18px; }
  #inv { height: 360px; }
  .op-grid { grid-template-columns: 1fr; }
  .op-lay { grid-row: auto; }
  .op-grid img, .op-lay img { height: 280px; }
  .cards { grid-template-columns: 1fr; }
  .tools > div { grid-template-columns: 90px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sch .flow.on { animation: none; stroke-dasharray: none; opacity: .3; }
  .bench-sch.br-dt .f-shoot { animation: none; }
  html.js .reveal, #inv [data-k], .tile img, .rows img { transition: none; transform: none; }
  #inv [data-k="5"].in .L-scan { animation: none; }
}