/* Vector artwork on the instrument surface; colours follow the active theme. */
.flow-rim { stroke: var(--screen-rule); stroke-width: 2; }
.flow-rim-glint { fill: none; stroke: white; stroke-width: 1.5; opacity: .22; }
.flow-ticks { fill: none; stroke: var(--screen-muted); stroke-width: 1.5; }
.flow-core { stroke: var(--screen-rule); stroke-width: 2; }
.flow-core-ring { fill: none; stroke: var(--screen-muted); opacity: .18; }
.flow-wafer { fill: none; stroke: var(--screen-muted); opacity: .06; }
.flow-hit { fill: transparent; }
.flow-pop { transform-origin: 0 0; transition: transform .65s cubic-bezier(.2,1.65,.3,1), filter .4s; pointer-events: none; }
.flow-band { stroke: var(--stage-color); stroke-width: 1; stroke-opacity: .65; }
.flow-seg.is-active .flow-pop, .flow-seg:hover .flow-pop, .flow-seg:focus-visible .flow-pop { transform: translate(var(--pop-x),var(--pop-y)) scale(1.08); filter: drop-shadow(0 8px 8px rgb(0 0 0 / .4)); }
.flow-seg:is(.is-active,:hover,:focus-visible) .flow-band { stroke-width: 2; stroke-opacity: 1; }
.flow-seg:focus { outline: none; }
.flow-seg:focus-visible .flow-band { stroke: var(--screen-ink); stroke-width: 4; }
.flow-seg-label { fill: var(--screen-ink); font: 650 18px var(--sans); text-anchor: middle; dominant-baseline: central; }
.flow-scene { opacity: 0; transform: scale(.88); transition: opacity .55s ease, transform .8s cubic-bezier(.2,1.4,.3,1); }
.flow-scene.is-active { opacity: 1; transform: scale(1); }
.flow-scenes { pointer-events: none; }
.flow-scenes text { font: 500 16px var(--mono); fill: var(--screen-ink); }
.flow-scenes .code-comment { font-size: 12px; fill: var(--screen-muted); }
.flow-scenes .code-key { fill: var(--scope-sv); }
.code-caret { fill: var(--wave-cursor); }
.flow-waves path { fill: none; stroke: var(--scope-sv); stroke-width: 2.4; stroke-linejoin: round; }
.flow-waves text { font-size: 12px; fill: var(--screen-muted); }
.flow-waves .wave-valid { stroke: var(--scope-cov); }
.flow-waves .wave-bus { stroke: var(--scope-uvm); }
.flow-waves .wave-value { fill: var(--screen-ink); }
.flow-waves .wave-cursor { stroke: var(--wave-cursor); stroke-width: 1; }
.flow-waves .wave-caption { font: 12px var(--sans); }
.flow-gates { fill: none; stroke: var(--scope-uvm); stroke-width: 2; }
.flow-gates .gate-wire { stroke: var(--screen-muted); }
.flow-gates .gate-body { fill: var(--screen-2); }
.flow-gates text { stroke: none; font-size: 13px; }
.gate-pulse { fill: var(--wave-cursor); stroke: none; }
.die-outline { fill: var(--screen-2); stroke: var(--screen-muted); stroke-width: 1; }
.floor-grid { fill: none; stroke: var(--screen-rule); stroke-width: .6; opacity: .55; }
.placed-cells rect, .route-cells rect { fill: color-mix(in srgb,var(--scope-uvm) 26%,var(--screen)); stroke: var(--scope-uvm); stroke-width: 1; }
.placed-cells rect:nth-child(3n), .route-cells rect:nth-child(3n) { fill: color-mix(in srgb,var(--scope-sv) 30%,var(--screen)); stroke: var(--scope-sv); }
.route-cells { opacity: .65; }
.routed-metal path { fill: none; stroke-width: 2; stroke-linejoin: round; }
.metal-0 { stroke: var(--scope-sv); }.metal-1 { stroke: var(--wave-cursor); }.metal-2 { stroke: var(--scope-uvm); }
.via { fill: var(--screen-ink); stroke: var(--screen); stroke-width: 1; }
.chip-pins { stroke: var(--screen-muted); stroke-width: 10; stroke-linecap: round; }
.chip-package { stroke: var(--screen-muted); stroke-width: 1.5; }
.chip-die { fill: var(--screen); stroke: var(--scope-sv); stroke-width: 1.5; }
.chip-shine { fill: none; stroke: white; stroke-width: 1; opacity: .5; }.pin-one { fill: var(--wave-cursor); }
.flow-analog-circuit { stroke: var(--scope-analog); stroke-width: 2.4; fill: none; }
.flow-analog-circuit text { stroke: none; font-size: 13px; }
.analog-wire { stroke: var(--screen-muted); }.analog-bubble { fill: var(--screen); }.analog-node { fill: var(--scope-analog); }
.analog-device { stroke-width: 3.5; }
.flow-analog-transient { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.analog-axis { stroke: var(--screen-muted); stroke-width: 1; }.analog-grid { stroke: var(--screen-rule); stroke-width: .8; }
.analog-input { stroke: var(--scope-cov); }.analog-response { stroke: var(--scope-analog); }.analog-probe { stroke: var(--wave-cursor); stroke-width: 1; }
.flow-analog-transient text { font-size: 12px; fill: var(--screen-muted); }
.cell-well { fill: color-mix(in srgb,var(--scope-uvm) 12%,var(--screen)); stroke: var(--scope-uvm); stroke-width: 1; stroke-dasharray: 5 4; }
.cell-active { fill: color-mix(in srgb,var(--scope-analog) 24%,var(--screen)); stroke: var(--scope-analog); }
.cell-poly { fill: color-mix(in srgb,var(--scope-cov) 50%,var(--screen)); stroke: var(--scope-cov); }
.cell-metal { stroke: var(--scope-sv); stroke-width: 12; fill: none; stroke-linejoin: round; }
.cell-contacts { fill: var(--screen-ink); stroke: var(--screen); stroke-width: 2; }
.flow-analog-cell text { font-size: 12px; fill: var(--screen-muted); }


/* One aligned reading grid; the 800 × 760 illustration scales as a single scene. */
.silicon-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.13fr); align-items: center; gap: 36px; padding: 48px 0 52px; }
.silicon-copy { min-width: 0; position: relative; z-index: 1; }
.silicon-copy h1 { font: 650 clamp(46px,4.8vw,68px)/1.04 var(--display); letter-spacing: -.055em; margin: 0; }
.silicon-copy .sub { font: 400 clamp(16px,1.35vw,19px)/1.6 var(--sans); color: var(--ink-2); margin: 24px 0 28px; }
.silicon-copy .landing-actions { flex-wrap: wrap; gap: 12px 24px; margin: 0; }
.silicon-copy .btn { padding-inline: 24px; }
.silicon-copy .landing-text-link { font-size: 14px; font-weight: 600; text-underline-offset: 5px; }
.silicon-domains { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 24px; margin-top: 38px; }
.silicon-domains a { --domain-accent: var(--ch-sv); position: relative; display: grid; align-content: start; gap: 9px; padding: 20px 12px 16px; min-width: 0; color: var(--ink); border-top: 1px solid var(--rule-strong); text-decoration: none; transition: transform .2s var(--ease), background .2s, border-color .2s; }
.silicon-domains a::before { content: ''; position: absolute; top: -2px; left: 12px; width: 48px; height: 3px; background: var(--domain-accent); }
.silicon-domains [data-flow-domain="dv"] { --domain-accent: var(--ch-sva); }
.silicon-domains [data-flow-domain="pd"] { --domain-accent: var(--ch-pd); }
.silicon-domains [data-flow-domain="analog"] { --domain-accent: var(--ch-analog); }
.silicon-domains strong { font: 650 15px/1.4 var(--sans); padding-right: 16px; }
.silicon-domains span { font: 400 13px/1.5 var(--sans); color: var(--muted); }
.silicon-domains svg { position: absolute; right: 10px; top: 24px; width: 13px; height: 13px; fill: none; stroke: var(--domain-accent); stroke-width: 1.5; }
.silicon-domains a:is(:hover,:focus-visible) { background: var(--paper-2); border-color: var(--domain-accent); transform: translateY(-3px); }
.silicon-visual { min-width: 0; width: 100%; margin: 0; --flow-0: var(--scope-sv); --flow-1: var(--scope-sva); --flow-2: var(--scope-uvm); --flow-3: var(--scope-pd); --flow-4: var(--scope-sva); --flow-5: var(--scope-sv); --flow-6: var(--scope-analog); --flow-7: var(--scope-cov); --flow-8: var(--scope-sv); }
.silicon-theater { position: relative; width: 100%; aspect-ratio: 800/760; container-type: inline-size; isolation: isolate; }
.silicon-world { position: absolute; width: 800px; height: 760px; left: 0; top: 0; transform: scale(calc(100cqw / 800px)); transform-origin: 0 0; }
.silicon-aura { position: absolute; left: 295px; top: 10px; width: 510px; height: 510px; background: radial-gradient(ellipse,color-mix(in srgb,var(--scope-sv) 12%,transparent),transparent 65%); }
.silicon-floor { position: absolute; left: 370px; top: 470px; width: 420px; height: 95px; background: radial-gradient(ellipse,color-mix(in srgb,var(--ink) 20%,transparent),transparent 68%); }
.silicon-wheel { position: absolute; width: 310px; height: 310px; }
.silicon-wheel::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; box-shadow: 0 18px 28px rgb(0 0 0 / .22); }
[data-wheel="home-digital"] { left: 20px; top: 330px; }
[data-wheel="home-analog"] { left: 256px; top: 462px; }
.silicon-wheel-svg { width: 100%; height: 100%; overflow: visible; position: relative; }
.gear-rotor { transform-origin: 0 0; will-change: transform; }
.gear-teeth { stroke: var(--screen-muted); stroke-width: 1.6; stroke-linejoin: round; }
.gear-teeth-gloss { stroke: var(--screen-ink); stroke-opacity: .35; stroke-width: 1; }
.gear-grain { stroke: var(--screen); stroke-width: 1; opacity: .8; }
.gear-pin { fill: var(--scope-pd); }
.silicon-wheel .flow-rim-glint { opacity: .5; }
.silicon-wheel .flow-seg-label { font-size: 25px; stroke: var(--screen); stroke-width: 3; paint-order: stroke; }
.silicon-wheel .flow-pop { transition: transform .6s cubic-bezier(.18,1.7,.3,1); }
.silicon-wheel .flow-seg.is-active .flow-pop { transform: translate(calc(var(--pop-x)*.45),calc(var(--pop-y)*.45)) scale(1.02); filter: none; }
.silicon-wheel .flow-seg:is(:hover,:focus-visible) .flow-pop { transform: translate(var(--pop-x),var(--pop-y)) scale(1.06); filter: none; }
.silicon-wheel .flow-seg:focus-visible { outline: none; }
.gear-title,.gear-caption { fill: var(--screen-ink); text-anchor: middle; font: 550 24px var(--sans); }
.gear-caption { font-size: 19px; fill: var(--screen-muted); }
.silicon-wheel .flow-scenes { transform: translateY(-3px) scale(.9); }
.silicon-wheel .flow-scene { transition: opacity .18s ease,transform .6s cubic-bezier(.18,1.7,.3,1); }
.silicon-wheel .flow-scene.is-active { transition-delay: .16s; }
.silicon-connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: var(--ch-sv); stroke-width: 1.6; stroke-linecap: round; opacity: .4; }
.silicon-connections path:last-child { stroke: var(--ch-analog); }
.silicon-chip { position: absolute; left: 450px; top: 210px; width: 260px; height: 260px; perspective: 1600px; z-index: 2; }
.silicon-die { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-24deg); }
.silicon-layer { position: absolute; inset: 0; border: 1.5px solid var(--edge); border-radius: 8px; transform: translateZ(var(--z)); background: linear-gradient(135deg,color-mix(in srgb,var(--edge) 20%,transparent),color-mix(in srgb,var(--screen) 70%,transparent)); box-shadow: inset 0 1px 0 #efffff66,0 3px 0 #152b4166,0 4px 0 color-mix(in srgb,var(--edge) 45%,transparent); backface-visibility: hidden; }
.silicon-layer::before { content: ''; position: absolute; inset: 8px; border: 1px solid #b9fff32b; border-radius: 4px; }
.silicon-layer svg { display: block; width: 100%; height: 100%; }
.silicon-layer-label { fill: var(--screen-ink); font: 500 12px var(--mono); }
.silicon-substrate { --z: 25px; --edge: var(--scope-sv); }
.silicon-devices { --z: 80px; --edge: var(--scope-analog); }
.silicon-metal { --z: 135px; --edge: var(--scope-pd); }
.silicon-signals { --z: 190px; --edge: var(--scope-sva); }
.silicon-lid { --z: 250px; --edge: var(--scope-sv); background: linear-gradient(135deg,color-mix(in srgb,var(--scope-sv) 27%,var(--screen)),color-mix(in srgb,var(--screen) 87%,transparent)); }
.silicon-package { position: absolute; left: -22px; right: -22px; top: -20px; bottom: -92px; background: linear-gradient(135deg,#303438 0%,#111417 13%,#020304 54%,#15191c 100%); border: 2px solid #727d86; border-radius: 12px; transform: translateZ(-26px); box-shadow: inset 0 0 0 4px #080a0c,inset 0 0 0 5px #454a4c,0 4px 0 #52565a,0 7px 0 #090a0c,0 14px 0 #151719,0 16px 0 #3b4044,0 21px 0 #050607,0 35px 25px #03091245; transform-style: preserve-3d; }
.silicon-package::after { content: ''; position: absolute; inset: 12px; border: 1px solid #66737844; border-radius: 5px; }
.silicon-pins { position: absolute; inset: -18px; background: repeating-linear-gradient(90deg,transparent 0 13px,#a1acb8 13px 20px,transparent 20px 27px) top/100% 12px no-repeat,repeating-linear-gradient(90deg,transparent 0 13px,#a1acb8 13px 20px,transparent 20px 27px) bottom/100% 12px no-repeat,repeating-linear-gradient(0deg,transparent 0 13px,#a1acb8 13px 20px,transparent 20px 27px) left/12px 100% no-repeat,repeating-linear-gradient(0deg,transparent 0 13px,#a1acb8 13px 20px,transparent 20px 27px) right/12px 100% no-repeat; transform: translateZ(-9px); }
.silicon-mark { position: absolute; left: 31px; bottom: 27px; color: #f3f6f6; font: 650 38px/1.15 var(--sans); letter-spacing: -1.5px; text-shadow: 0 1px #000; }
.silicon-mark span { display: block; font: 500 11px/1.5 var(--sans); letter-spacing: .5px; color: #c2cbd1; margin-top: 5px; }
.silicon-pin-one { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #a5b0b8; left: 16px; bottom: 35px; }
.silicon-projector { position: absolute; inset: 22px 24px 104px; border: 2px solid var(--scope-sv); border-radius: 5px; box-shadow: 0 0 8px #3cffba,0 0 24px #69e9d455,inset 0 0 20px #46e7cc33; }
.silicon-beam { position: absolute; width: 2px; height: 276px; top: -276px; transform-origin: 50% 100%; transform: rotateX(-90deg); background: linear-gradient(0deg,var(--scope-sv),#67efcb55 60%,transparent); opacity: .65; }
.beam-1 { left: 0; }.beam-2 { right: 0; }
.silicon-light-wall { position: absolute; width: 260px; height: 276px; top: -276px; left: 0; transform-origin: 50% 100%; transform: rotateX(-90deg); background: linear-gradient(0deg,#55e8c618,#82e4e505 70%,transparent); }
.silicon-visual figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 0; color: var(--muted); font: 400 12px/1.5 var(--sans); }
.silicon-visual button { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 7px 10px; background: var(--card); color: var(--ink-2); font: 500 11px/1.5 var(--sans); cursor: pointer; }
.silicon-visual button:hover { border-color: var(--rule-strong); }
.silicon-visual button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.silicon-play-icon { display: none; }
[aria-pressed="true"] .silicon-play-icon { display: block; fill: currentColor; stroke: none; }
[aria-pressed="true"] .silicon-pause-icon { display: none; }
@media (max-width:1100px) and (min-width:761px) {
  .silicon-hero { gap: 24px; padding-block: 36px 40px; }
  .silicon-copy h1 { font-size: clamp(38px,4.8vw,53px); }
  .silicon-domains { gap: 12px 14px; margin-top: 28px; }
  .silicon-domains a { padding-inline: 8px; }
  .silicon-domains strong { font-size: 13px; }
  .silicon-domains span { font-size: 12px; }
  .silicon-domains a::before { left: 8px; }
  .silicon-copy .btn { padding-inline: 18px; font-size: 13px; }
  .silicon-copy .landing-text-link { font-size: 13px; }
  .silicon-copy .landing-actions { gap: 8px 16px; }
  .silicon-visual figcaption { flex-wrap: wrap; }
}
@media (max-width:760px) {
  .silicon-hero { grid-template-columns: minmax(0,1fr); padding: 32px 0 36px; gap: 26px; }
  .silicon-copy h1 { font-size: clamp(40px,8.2vw,60px); }
  .silicon-copy h1 br:first-child { display: none; }
  .silicon-copy .sub { font-size: 16px; margin: 22px 0; }
  .silicon-copy .landing-actions { gap: 8px 16px; }
  .silicon-copy .btn { font-size: 13px; padding-inline: 18px; }
  .silicon-copy .landing-text-link { font-size: 13px; }
  .silicon-domains { gap: 14px 16px; margin-top: 28px; }
  .silicon-domains strong { font-size: 14px; min-height: 2.8em; }
  .silicon-domains a { padding: 16px 8px 12px; gap: 5px; }
  .silicon-domains a::before { left: 8px; width: 40px; }
  .silicon-domains svg { top: 20px; right: 4px; width: 11px; height: 11px; }
  .silicon-domains span { font-size: 12px; }
  .silicon-visual { max-width: 440px; margin-inline: auto; }
  .silicon-theater { aspect-ratio: 400/690; }
  .silicon-world { width: 400px; height: 690px; transform: scale(calc(100cqw / 400px)); }
  .silicon-chip { left: 103px; top: 152px; width: 205px; height: 205px; }
  .silicon-substrate { --z: 20px; }.silicon-devices { --z: 60px; }.silicon-metal { --z: 100px; }.silicon-signals { --z: 140px; }.silicon-lid { --z: 185px; }
  .silicon-package { left: -18px; right: -18px; top: -18px; bottom: -70px; transform: translateZ(-20px); border-radius: 9px; }
  .silicon-mark { font-size: 31px; left: 24px; bottom: 20px; letter-spacing: -1px; }
  .silicon-mark span { font-size: 10px; margin-top: 3px; }
  .silicon-pin-one { left: 13px; bottom: 28px; width: 5px; height: 5px; }
  .silicon-package::after { inset: 9px; }
  .silicon-projector { inset: 18px 19px 82px; }
  .silicon-pins { inset: -12px; background-size: 100% 8px,100% 8px,8px 100%,8px 100%; }
  .silicon-beam { height: 205px; top: -205px; }
  .silicon-light-wall { width: 205px; height: 205px; top: -205px; }
  .silicon-wheel { width: 210px; height: 210px; }
  [data-wheel="home-digital"] { left: 4px; top: 390px; }
  [data-wheel="home-analog"] { left: 164px; top: 478px; }
  .silicon-aura { left: 0; top: 0; width: 400px; height: 380px; }
  .silicon-floor { left: 40px; top: 322px; width: 330px; height: 65px; }
  .silicon-connections { display: none; }
  .silicon-visual figcaption { font-size: 11px; gap: 8px; margin-top: 8px; }
  .silicon-visual figcaption > span { max-width: 24ch; }
}
@media (prefers-reduced-motion:reduce) {
  .silicon-domains a,.silicon-wheel .flow-pop,.silicon-wheel .flow-scene { transition: none; }
  .silicon-domains a:is(:hover,:focus-visible) { transform: none; }
  .gear-rotor { will-change: auto; }
}