:root {
  color-scheme: dark;
  --ink: #e9efeb;
  --muted: #8c9b94;
  --paper: #07100f;
  --paper-2: #0b1714;
  --panel: #101e1a;
  --line: rgba(220, 238, 229, .14);
  --line-strong: rgba(220, 238, 229, .28);
  --museum: #d8e2dc;
  --raw: #f1ae62;
  --raw-soft: rgba(241, 174, 98, .13);
  --video: #63d9c6;
  --video-soft: rgba(99, 217, 198, .12);
  --accent: #d8ff68;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 82% 5%, rgba(73, 126, 109, .15), transparent 28%), var(--paper); }
body:has(dialog[open]) { overflow: hidden; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--accent); color: #0a1008; border-radius: 4px; transition: top .2s; }
.skip-link:focus { top: 16px; }
.museum-shell { width: min(1600px, calc(100% - 64px)); margin: 0 auto; padding: 50px 0 30px; }

.hero { min-height: 370px; display: flex; justify-content: space-between; align-items: flex-end; padding: 28px 0 48px; border-bottom: 1px solid var(--line); }
.eyebrow, .section-kicker { margin: 0; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted); }
.eyebrow span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 13px var(--accent); }
.hero h1 { margin: 22px 0 25px; max-width: 900px; font: 400 clamp(62px, 9vw, 142px)/.77 Georgia, "Times New Roman", serif; letter-spacing: -.065em; }
.hero h1 em { color: var(--accent); font-weight: 400; }
.hero-intro { max-width: 720px; margin: 0; color: #aab7b0; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; }
.hero-index { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 4px; }
.index-number { font: 400 92px/.75 Georgia, serif; color: var(--raw); }
.hero-index div { display: grid; gap: 4px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: var(--muted); }
.hero-index strong { color: var(--ink); }

.orientation { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.orientation-mark { color: var(--accent); font-size: 23px; }
.orientation p { margin: 0; color: #aab6b0; font-size: 13px; }
.orientation strong { color: var(--ink); }
.start-tour { border: 1px solid var(--line-strong); border-radius: 99px; padding: 11px 15px; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; transition: .2s ease; }
.start-tour span { margin-left: 18px; color: var(--accent); }
.start-tour:hover, .start-tour:focus-visible { outline: none; border-color: var(--accent); background: rgba(216,255,104,.08); }

.map-section { padding-top: 70px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.section-heading h2, .concept-strip h2 { margin: 7px 0 0; font: 400 34px Georgia, serif; }
.route-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.route-legend span { display: flex; align-items: center; gap: 7px; }
.route-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--museum); }
.route-legend i.raw { background: var(--raw); }.route-legend i.video { background: var(--video); }
.diagram-frame { overflow-x: auto; padding: 8px 0 18px; scrollbar-color: #284139 transparent; }
.diagram { position: relative; width: 100%; min-width: 1460px; height: 590px; border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.013) 1px, transparent 1px), rgba(4,12,10,.72); background-size: 30px 30px; overflow: hidden; }
.route-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.line { fill: none; stroke-width: 2.2; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; opacity: .58; }
.common-line { stroke: #aebbb5; marker-end: url(#arrow-common); }
.raw-line { stroke: var(--raw); marker-end: url(#arrow-raw); }.video-line { stroke: var(--video); marker-end: url(#arrow-video); }
.diagram[data-active-route="raw"] .video-line, .diagram[data-active-route="video"] .raw-line { opacity: .12; }
.diagram[data-active-route="raw"] .raw-line, .diagram[data-active-route="video"] .video-line { opacity: 1; stroke-width: 3; }
.nodes { position: absolute; inset: 0; }
.signal-node { --node-color: var(--museum); position: absolute; width: 154px; min-height: 190px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), #0b1613; text-align: left; cursor: pointer; box-shadow: 0 15px 30px rgba(0,0,0,.16); transition: .22s ease; }
.signal-node.route-raw { --node-color: var(--raw); }.signal-node.route-video { --node-color: var(--video); }.signal-node.route-shared { --node-color: var(--accent); }
.signal-node:hover, .signal-node:focus-visible, .signal-node.is-current { outline: none; border-color: var(--node-color); transform: translateY(-5px); box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--node-color) 30%, transparent); }
.diagram[data-active-route="raw"] .route-video, .diagram[data-active-route="video"] .route-raw { opacity: .35; filter: saturate(.4); }
.signal-node.is-route-active { opacity: 1 !important; filter: none !important; }
.node-top { display: flex; align-items: center; justify-content: space-between; }
.node-number { color: var(--node-color); font: 700 11px ui-monospace, monospace; letter-spacing: .08em; }
.node-route { text-transform: uppercase; color: #68766f; font-size: 8px; letter-spacing: .15em; }
.node-art { display: grid; place-items: center; height: 82px; margin: 9px 0 11px; border-block: 1px solid var(--line); }
.node-art img { display: block; width: 100%; height: 76px; object-fit: contain; }
.signal-node strong { display: block; min-height: 36px; font: 400 17px/1.1 Georgia, serif; }
.node-open { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.node-open i { color: var(--node-color); font-style: normal; }
.n-light { left: 25px; top: 200px; }.n-optics { left: 200px; top: 200px; }.n-sensor { left: 375px; top: 200px; }.n-analog { left: 550px; top: 200px; }.n-adc { left: 725px; top: 200px; }
.n-raw { left: 1015px; top: 48px; }.n-processing { left: 1015px; top: 352px; }.n-compression { left: 1190px; top: 352px; }.n-file { left: 1375px; top: 200px; }
.branch-label { position: absolute; left: 1016px; padding: 5px 9px; border-radius: 99px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.raw-label { top: 14px; color: var(--raw); background: var(--raw-soft); }.video-label { top: 556px; color: var(--video); background: var(--video-soft); }
.map-note { margin: 0; padding: 12px 2px; color: var(--muted); font-size: 12px; }.map-note span { color: var(--raw); margin-right: 7px; }

.concept-strip { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 0; align-items: stretch; margin-top: 60px; border-block: 1px solid var(--line); }
.concept-strip > div { min-height: 160px; padding: 28px; border-right: 1px solid var(--line); }.concept-strip > div:first-child { padding-left: 0; }.concept-strip > div:last-child { border-right: 0; }
.distinction span { display: block; color: var(--video); font: 700 10px ui-monospace, monospace; }.distinction strong { display: block; margin: 14px 0 8px; font: 400 23px Georgia, serif; }.distinction p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.bibliography { margin-top: 50px; border-bottom: 1px solid var(--line); }.bibliography summary { display: flex; justify-content: space-between; padding: 20px 0; cursor: pointer; list-style: none; font: 400 18px Georgia, serif; }.bibliography summary::-webkit-details-marker { display: none; }.bibliography-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 5px 0 30px; }.bibliography-body h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--video); }.bibliography-body p { color: var(--muted); font-size: 12px; line-height: 1.55; }
body > main > footer { display: flex; justify-content: space-between; padding-top: 30px; color: #627068; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }

.exhibit-dialog { width: min(1240px, calc(100% - 36px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line-strong); border-radius: 7px; background: #091310; color: var(--ink); box-shadow: 0 35px 120px rgba(0,0,0,.75); overflow: auto; }
.exhibit-dialog::backdrop { background: rgba(1,7,6,.82); backdrop-filter: blur(10px); }
.dialog-shell { min-height: min(780px, calc(100vh - 34px)); display: flex; flex-direction: column; }
.dialog-header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); background: rgba(9,19,16,.94); backdrop-filter: blur(16px); }
.dialog-identity { display: flex; align-items: center; gap: 15px; }.dialog-number { color: var(--accent); font: 700 12px ui-monospace, monospace; }.dialog-identity p { margin: 0 0 3px; color: var(--muted); text-transform: uppercase; font-size: 8px; letter-spacing: .17em; }.dialog-identity h2 { margin: 0; font: 400 clamp(22px,3vw,34px) Georgia, serif; }
.close-dialog { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; color: var(--muted); font-size: 22px; }.close-dialog:hover,.close-dialog:focus-visible { outline: none; color: var(--ink); border-color: var(--accent); }
.dialog-body { display: grid; grid-template-columns: 1.08fr .92fr; flex: 1; min-height:0; height:min(620px,calc(100vh - 170px)); overflow:hidden; }
.demo-stage { position: relative; min-height:0; display: flex; flex-direction: column; justify-content: center; padding: 55px 45px 35px; border-right: 1px solid var(--line); background: radial-gradient(circle at 50% 42%, rgba(93,156,135,.1), transparent 43%), #07100e; overflow: hidden; }
.demo-caption { position: absolute; top: 24px; left: 26px; color: #69776f; text-transform: uppercase; letter-spacing: .14em; font-size: 8px; }.demo-svg { display: block; width: 100%; max-height: 430px; overflow: visible; }.demo-svg text { fill: #8d9c94; font: 700 11px ui-monospace, monospace; text-anchor: middle; letter-spacing: .09em; }.demo-stage > p { max-width: 540px; align-self: center; margin: 25px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: #aebbb4; text-align: center; font: italic 17px/1.4 Georgia, serif; }
.exhibit-copy { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding: 30px 38px 24px; }.level-tabs { flex:none; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); margin-bottom: 20px; }.level-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 12px 4px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }.level-tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }.level-tabs button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }.exhibit-copy > [role="tabpanel"] { flex:1; min-height:0; }
.markdown-copy p:first-child { margin-top:0 }.markdown-copy p:last-child { margin-bottom:0 }.markdown-copy a { color:var(--video) }.markdown-copy code,.inline-math { font-family:ui-monospace,monospace; color:#dce7e0 }.markdown-copy li { margin:.45em 0 }.lead-copy { margin: 0; font: 400 clamp(20px,2vw,27px)/1.36 Georgia, serif; color: #e0e8e3; }.lead-copy p { margin:0 0 .8em }.key-idea { margin-top: 20px; padding: 15px 17px; border-left: 2px solid var(--accent); background: rgba(216,255,104,.055); }.key-idea > span,.real-case > span { display: block; margin-bottom: 6px; color: var(--accent); text-transform: uppercase; font-size: 8px; letter-spacing: .15em; }.key-idea .markdown-copy { font-size:12px; line-height:1.5 }.deep-copy { padding-right:15px }.deep-copy p,.deep-copy li { color: #b5c0ba; font-size: 14px; line-height: 1.62; }.deep-copy p:first-child { margin-top: 0; }
.real-case { margin-top: 25px; padding: 18px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.025); }.real-case h3 { margin: 0 0 9px; font: 400 19px Georgia, serif; }.real-case .markdown-copy { color: var(--muted); font-size: 12px; line-height: 1.55; }
.content-scroll-frame { position:relative; height:100%; min-height:0 }.content-scroll { height:100%; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:var(--video) rgba(255,255,255,.05); padding:2px 8px 52px 2px }.content-scroll:focus-visible { outline:1px solid var(--video); outline-offset:5px }.scroll-cue { position:absolute; right:8px; bottom:0; left:0; display:flex; justify-content:center; gap:7px; padding:38px 8px 8px; background:linear-gradient(transparent,#091310 68%); color:var(--accent); pointer-events:none; text-transform:uppercase; letter-spacing:.12em; font-size:8px }.scroll-cue span { animation:scrollCue 1.4s ease-in-out infinite }.scroll-cue[hidden] { display:none }.content-pending,.content-warning { padding:18px; border:1px dashed var(--line-strong); color:var(--muted); font-size:12px; line-height:1.55 }.content-warning strong { color:var(--raw) }
.source-list { flex:0 0 auto; display:grid; gap:12px; max-height:145px; overflow-y:auto; margin-top:16px; padding:14px 6px 2px 0; border-top:1px solid var(--line); scrollbar-color:var(--video) rgba(255,255,255,.05) }.source-group h3 { margin:0 0 8px; color:#68766f; text-transform:uppercase; letter-spacing:.13em; font-size:8px }.source-group > div { display:flex; flex-wrap:wrap; gap:6px }.source-group a,.source-group > div > div { display:grid; gap:2px; max-width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:3px; color:#aab7b0; text-decoration:none; font-size:9px }.source-group a:hover,.source-group a:focus-visible { outline:none; border-color:var(--video); color:var(--video) }.source-list small { color:#607068; font-size:7px; text-transform:uppercase; letter-spacing:.08em }.bibliography-source p { margin:0; line-height:1.45 }.source-empty p,.citation-warning { margin:0; color:#68766f; font-size:9px; line-height:1.45 }.citation-warning { color:var(--raw) }
.branch-choice { padding: 16px 22px; border-top: 1px solid var(--line); background: rgba(216,255,104,.035); }.branch-choice p { margin: 0 0 10px; color: #aebbb4; font-size: 12px; }.branch-choice > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.branch-choice button { border: 1px solid var(--line-strong); border-radius: 3px; padding: 13px; background: transparent; cursor: pointer; text-align: left; font-weight: 700; font-size: 11px; }.branch-choice button span { margin-right: 10px; color: var(--raw); font-family: ui-monospace, monospace; }.branch-choice button[data-choose-route="video"] span { color: var(--video); }.branch-choice button:hover,.branch-choice button:focus-visible { outline: none; border-color: var(--accent); background: rgba(216,255,104,.06); }
.dialog-footer { position: sticky; bottom: 0; z-index: 10; display: grid; grid-template-columns: 160px 1fr 160px; align-items: center; gap: 20px; padding: 15px 22px; border-top: 1px solid var(--line); background: rgba(9,19,16,.96); backdrop-filter: blur(16px); }.tour-nav { border: 1px solid var(--line); border-radius: 99px; padding: 10px 13px; background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }.tour-nav.next { border-color: rgba(216,255,104,.4); color: var(--accent); }.tour-nav:hover:not(:disabled),.tour-nav:focus-visible { outline: none; border-color: var(--accent); background: rgba(216,255,104,.07); }.tour-nav:disabled { opacity: .45; cursor: default; }.tour-progress { display: grid; gap: 7px; text-align: center; color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }.tour-progress i { height: 2px; background: rgba(255,255,255,.08); overflow: hidden; }.tour-progress b { display: block; width: 20%; height: 100%; background: linear-gradient(90deg,var(--video),var(--accent)); transition: width .3s ease; }

@media (min-width: 901px) {
  .exhibit-dialog { overflow:hidden }
  .dialog-shell { height:min(780px,calc(100vh - 34px)); min-height:0 }
  .dialog-header,.dialog-footer { position:relative; flex:none }
  .dialog-body { height:auto; min-height:0 }
  .demo-stage { height:100%; justify-content:flex-start; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding-top:72px; scrollbar-color:var(--raw) rgba(255,255,255,.05) }
  .demo-component { flex:none }
}

/* Demo illustrations */
.demo-svg line { stroke: #50645b; stroke-width: 2; }.photon-path { fill: none; stroke: #36534a; stroke-width: 2; stroke-dasharray: 5 8; }.photon { offset-path: path("M175 216 Q280 178 365 220 T545 205"); animation: photonMove 3.2s linear infinite; animation-delay: calc(var(--i) * -.52s); }.scene-object { fill: none; stroke: #dce5df; stroke-width: 5; }.ray { fill: none; stroke-width: 2.5; animation: rayGlow 2.4s ease-in-out infinite; }.r1 { stroke:#ed7a76 }.r2{stroke:#69d6c2}.r3{stroke:#e9b862}.bayer-cell rect { animation: cellPulse 3s ease-in-out infinite; animation-delay: calc(var(--i)*.035s); }.falling-photons circle { fill:#ffe28a; animation: fall 2.2s linear infinite; animation-delay: calc(var(--i)*-.23s); }.charge-bar { fill:#63d9c6; transform-origin:center bottom; animation: charge 2.7s ease-in-out infinite; animation-delay:calc(var(--d)*-.14s); }.signal-wave,.analog-curve { fill:none; stroke:var(--raw); stroke-width:4; }.digital-steps { fill:none; stroke:var(--video); stroke-width:4; stroke-linejoin:round; stroke-dasharray:580; animation:draw 3s ease-in-out infinite alternate; }.bit-code { fill:var(--accent)!important; opacity:.2; animation:bits 2.4s ease-in-out infinite; animation-delay:calc(var(--i)*.25s); }.chip-title{fill:var(--accent)!important;font-size:27px!important}.chip-sub{fill:var(--raw)!important;font-size:28px!important}.chip-small{font-size:9px!important}.raw-packet rect:first-child{fill:#14201c;stroke:var(--raw);stroke-width:3}.raw-packet path{stroke:#45564e}.raw-packet text{text-anchor:start;fill:#c7d0cb}.raw-packet rect:last-child{fill:var(--raw);animation:packet 2.5s ease-in-out infinite}.raw-cell rect,.source-cell rect{animation:cellPulse 2.8s ease-in-out infinite;animation-delay:calc(var(--i)*.025s)}.rgb-cell{animation:rgbReveal 3s ease-in-out infinite;animation-delay:calc(var(--i)*.035s)}.compression-cell{animation:blockShift 3.5s steps(2) infinite;animation-delay:calc(var(--i)*.03s)}.video-frame rect:first-child{fill:#14211d;stroke:var(--video);stroke-width:2}.video-frame text{text-anchor:start;fill:var(--video)}.video-frame rect:not(:first-child){fill:#314b43;stroke:#618176}.video-frame{animation:frameFlow 3s ease-in-out infinite;animation-delay:calc(var(--i)*.3s)}.essence rect{fill:#13201c;stroke:#789087}.essence text{fill:#d8e1dc}.pack-line{stroke:var(--accent);stroke-width:3;stroke-dasharray:8 7;animation:dash 1.2s linear infinite}.file-shape path{fill:#12211c;stroke:var(--accent);stroke-width:3}.file-shape text{fill:#dfe8e3;font-size:21px}.file-shape rect{fill:var(--accent);opacity:.55;animation:packet 2.3s ease-in-out infinite}
@keyframes photonMove{to{offset-distance:100%}}@keyframes rayGlow{50%{filter:drop-shadow(0 0 5px currentColor);opacity:.45}}@keyframes cellPulse{50%{opacity:.45;transform:scale(.91);transform-origin:center}}@keyframes fall{from{transform:translateY(-25px)}to{transform:translateY(310px);opacity:.15}}@keyframes charge{50%{opacity:.45;transform:scaleY(.35)}}@keyframes draw{from{stroke-dashoffset:580}to{stroke-dashoffset:0}}@keyframes bits{50%{opacity:1}}@keyframes packet{50%{width:80px;opacity:.35}}@keyframes rgbReveal{0%,20%{opacity:.15}55%,100%{opacity:1;filter:saturate(1.3)}}@keyframes blockShift{50%{opacity:.45;transform:translate(3px,2px)}}@keyframes frameFlow{50%{transform:translate(calc(var(--i)*82px + 10px),calc(var(--i)*27px - 6px))}}@keyframes dash{to{stroke-dashoffset:-30}}
@keyframes scrollCue{50%{transform:translateY(4px)}}

@media (max-width: 900px) {
  .museum-shell { width: min(100% - 32px, 720px); padding-top: 25px; }.hero { min-height: 0; display: block; padding: 35px 0; }.hero h1 { font-size: clamp(64px, 17vw, 110px); }.hero-index { margin-top: 40px; }.orientation { grid-template-columns: auto 1fr; }.start-tour { grid-column: 2; justify-self: start; }.section-heading { align-items: flex-start; flex-direction: column; }.diagram-frame { overflow: visible; }.diagram { min-width: 0; height: auto; padding: 28px 16px; overflow: visible; }.route-lines,.branch-label { display:none }.nodes { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.signal-node { position: relative; inset: auto !important; width: auto; min-height: 175px; }.signal-node::after { content:"↓"; position:absolute; bottom:-18px; right:50%; color:#51645a; z-index:3 }.n-adc::after,.n-raw::after,.n-compression::after{color:var(--accent)}.n-file::after{display:none}.n-raw { grid-column:1; }.n-processing { grid-column:2; }.n-compression { grid-column:2; }.n-file { grid-column:1 / -1; }.map-note { padding-top:16px }.concept-strip { grid-template-columns: 1fr; }.concept-strip > div,.concept-strip > div:first-child { min-height: 0; padding: 22px 0; border-right:0; border-bottom:1px solid var(--line) }.bibliography-body { grid-template-columns:1fr }.dialog-body { grid-template-columns:1fr; height:auto; max-height:none; overflow:visible }.demo-stage { min-height:390px; border-right:0; border-bottom:1px solid var(--line); padding:48px 24px 28px }.exhibit-copy { display:block; overflow:visible; padding:30px 24px }.exhibit-copy > [role="tabpanel"] { min-height:auto }.content-scroll-frame { height:auto }.content-scroll{height:auto;max-height:45vh}.source-list{max-height:none;overflow:visible}.dialog-footer { grid-template-columns:105px 1fr 105px; gap:8px }.tour-nav { padding:9px 7px }.dialog-shell { min-height:100% }
}
@media (max-width: 520px) {
  .museum-shell { width: min(100% - 22px, 480px); }.hero h1 { font-size: 61px }.route-legend { gap:10px }.nodes { grid-template-columns:1fr }.n-raw,.n-processing,.n-compression,.n-file{grid-column:1}.signal-node { display:grid; grid-template-columns:70px 1fr; column-gap:12px; min-height:115px }.node-top{grid-column:1/-1}.node-art{grid-row:2/4;height:72px;margin:7px 0}.signal-node strong{align-self:end;min-height:0}.node-open{align-self:start}.branch-choice > div{grid-template-columns:1fr}.dialog-footer{grid-template-columns:1fr 1fr}.tour-progress{grid-column:1/-1;grid-row:1}.demo-stage{min-height:325px}.exhibit-dialog{width:calc(100% - 16px);max-height:calc(100vh - 12px)}.dialog-shell{min-height:calc(100vh - 14px)}.dialog-header{padding:14px}.dialog-identity{gap:9px}.dialog-identity h2{font-size:21px}.source-group > div{display:grid}.orientation{gap:12px}.orientation p{font-size:12px}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition:none!important } }

/* Interactive exhibit engine · v1.1 */
.demo-component { width: 100%; min-width: 0; }
.demo-takeaway { max-width: 560px !important; }
.demo-component button, .demo-component input { accent-color: var(--accent); }
.demo-component button { font: inherit; }
.demo-disclaimer { margin: 13px auto 0; max-width: 620px; color: #77877f; text-align: center; font-size: 10px; line-height: 1.45; }
.photon-label rect { fill: #e8efe9; }.photon-label text { fill: #0a1411; font-size: 10px; }.photon-label path { fill: none; stroke: #e8efe9; stroke-width: 1.5; stroke-dasharray: 4 4; animation: dash 1.2s linear infinite; }

.sensor-picker { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 0 auto 8px; }
.sensor-picker button, .choice-pills button { border: 1px solid var(--line); border-radius: 99px; padding: 7px 10px; background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 700; }
.sensor-picker button[aria-pressed="true"], .choice-pills button[aria-pressed="true"] { border-color: var(--accent); background: rgba(216,255,104,.1); color: var(--accent); }
.sensor-picker button:focus-visible, .choice-pills button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.coverage-visual .demo-svg { max-height: 350px; }
.lens-profile path { fill: rgba(99,217,198,.12); stroke: var(--video); stroke-width: 4; }.lens-profile text { fill: var(--video); }
.coverage-rays { stroke: rgba(241,174,98,.55); stroke-width: 2; stroke-dasharray: 5 6; }
.image-circle { fill: none; stroke: var(--raw); stroke-width: 3; stroke-dasharray: 6 6; }
.sensor-outline { fill: rgba(3,9,8,.12); stroke-width: 4; }.sensor-outline.fits { stroke: var(--accent); }.sensor-outline.vignettes { stroke: #ff7676; }
.sensor-label { fill: #e7eee9 !important; font-size: 10px !important; }
.coverage-readout { display: grid; grid-template-columns: 1fr auto auto; gap: 11px; align-items: center; margin: -5px auto 0; max-width: 610px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.025); font-size: 10px; }
.coverage-readout span { font-weight: 700; }.coverage-readout strong { color: var(--ink); }.coverage-readout small { color: var(--muted); }.coverage-readout.covered span { color: var(--accent); }.coverage-readout.not-covered span { color: #ff8b83; }

.white-light-label { fill: #eef3ef !important; }.white-beam { stroke: rgba(244,245,239,.8); stroke-width: 2; stroke-dasharray: 5 5; animation: dash 1.4s linear infinite; animation-delay: calc(var(--i)*-.12s); }
.bayer-site text { fill: rgba(7,16,15,.78); font-size: 10px; font-weight: 900; }.bayer-site rect { transform-box:fill-box; transform-origin:center; animation:cellPulse 3s ease-in-out infinite; animation-delay:calc(var(--i)*.055s); }
.filtered-beam { stroke: var(--beam); stroke-width: 4; opacity: .68; stroke-dasharray: 7 7; animation: dash 1.1s linear infinite; animation-delay: calc(var(--i)*-.1s); }.filtered-photon { animation: filteredPulse 1.8s ease-in-out infinite; animation-delay: calc(var(--i)*-.15s); }
@keyframes filteredPulse { 50% { opacity:.32; transform:translateY(10px); } }

.meter-controls { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; margin: 0 auto 5px; max-width: 610px; }
.meter-controls label, .compression-slider { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }.meter-controls label strong, .compression-slider strong { justify-self: end; color: var(--accent); }.meter-controls input, .compression-slider input { grid-column: 1 / -1; width: 100%; }
.meter-controls button { border: 1px solid var(--line-strong); border-radius: 99px; padding: 9px 12px; background: transparent; color: var(--video); cursor: pointer; font-size: 9px; font-weight: 700; }.meter-controls button:hover,.meter-controls button:focus-visible { outline: none; border-color: var(--video); }
.voltmeter-visual .demo-svg { max-height: 350px; }.stimulus-source > circle:first-child { fill: #101e1a; stroke: #6f8178; stroke-width: 2; }.stimulus-source text { fill: #97a69f; }.stimulus-source #stimulus-orb { fill: var(--raw); transition: .25s ease; }.stimulus-source #stimulus-orb.is-active { animation: stimulusTravel 1.1s ease-in-out; }
.input-cable,.output-cable { fill:none; stroke:#62776d; stroke-width:5; }.analog-meter > path:first-child { fill:#14231e; stroke:#788b81; stroke-width:3; }.meter-scale { fill:none!important; stroke:#b8c4be!important; stroke-width:2!important; }.analog-meter line:not(#meter-needle) { stroke:#71857b; stroke-width:2; }.analog-meter > text { fill:#b9c5bf; }.analog-meter circle { fill:var(--raw); }.analog-meter #meter-needle { stroke:var(--raw); stroke-width:5; transform-origin:360px 276px; transform:rotate(-58deg); transition:transform .45s cubic-bezier(.2,.75,.2,1); }.output-cable { stroke:var(--video); }.voltmeter-visual #noise-path { fill:none; stroke:var(--accent); transition:.25s; }
.stimulus-readout { display:grid; grid-template-columns:1fr auto; gap:3px 14px; align-items:center; max-width:610px; margin:-4px auto 0; padding:9px 12px; border:1px solid var(--line); background:rgba(255,255,255,.02); font-size:10px; }.stimulus-readout span { color:var(--signal-color); text-transform:uppercase; font-weight:800; }.stimulus-readout strong { color:var(--ink); }.stimulus-readout small { grid-column:1/-1; color:var(--muted); }
@keyframes stimulusTravel { 0%{transform:translateX(0);opacity:.3} 60%{transform:translateX(108px);opacity:1} 100%{transform:translateX(0);opacity:.4} }

.demo-carousel { width:100%; outline:none; }.demo-carousel:focus-visible { box-shadow:0 0 0 1px var(--accent); }
.slide-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }.slide-dots { display:flex; gap:4px; flex-wrap:wrap; }.slide-dots button { display:flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:99px; padding:6px 8px; background:transparent; color:#7d8b84; cursor:pointer; font-size:8px; }.slide-dots button span { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.07); }.slide-dots button[aria-selected="true"] { border-color:var(--accent); color:var(--accent); }.slide-dots button:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }.slide-count { color:#687870; font:700 9px ui-monospace,monospace; }
.slide-panel { min-height:390px; }.slide-panel > h3 { margin:0 0 9px; text-align:center; font:400 19px Georgia,serif; }.slide-nav { display:flex; justify-content:space-between; margin-top:8px; }.slide-nav button { border:0; background:transparent; color:var(--video); cursor:pointer; font-size:9px; font-weight:700; }.slide-nav button:disabled { opacity:.2; cursor:default; }.slide-nav button:focus-visible { outline:1px solid var(--video); outline-offset:3px; }
.choice-pills { display:flex; justify-content:center; gap:6px; margin-bottom:4px; }.sampling-graphic .demo-svg { max-height:300px; }.sampling-graphic > p,.slide-explainer { margin:7px auto; max-width:570px; color:var(--muted); text-align:center; font-size:10px; line-height:1.45; }.sample-points line { stroke:rgba(99,217,198,.34); stroke-width:1; }.sample-points circle { fill:var(--video); stroke:#07100f; stroke-width:2; }.reconstructed-curve { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:6 5; }.alias-curve { fill:none; stroke:#ff7b75; stroke-width:3; stroke-dasharray:8 6; }
.number-input { display:flex; justify-content:center; align-items:center; gap:12px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.number-input input { width:110px; border:1px solid var(--line-strong); border-radius:4px; padding:9px; background:#0e1b17; color:var(--ink); font:700 20px ui-monospace,monospace; text-align:center; }.number-input input:focus { outline:1px solid var(--accent); }
.bit-boxes { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin:30px auto 17px; }.bit-box { display:grid; place-items:center; gap:7px; padding:11px 3px 8px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.02); }.bit-box strong { color:#687870; font:700 24px ui-monospace,monospace; }.bit-box i { width:17px; height:17px; border-radius:50%; background:#17231f; border:1px solid #526159; }.bit-box span { color:var(--muted); font:700 9px ui-monospace,monospace; }.bit-box.is-on { border-color:rgba(216,255,104,.38); background:rgba(216,255,104,.04); }.bit-box.is-on strong { color:var(--accent); }.bit-box.is-on i { background:var(--accent); box-shadow:0 0 18px rgba(216,255,104,.75); }.binary-output > p { display:flex; justify-content:center; gap:18px; align-items:center; }.binary-output > p strong { color:var(--video); font:700 22px ui-monospace,monospace; letter-spacing:.1em; }.binary-output > p span { color:var(--muted); font-size:10px; }
.depth-comparison { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:18px; }.depth-comparison article { display:flex; flex-direction:column; padding:13px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.018); }.depth-comparison article > span { color:var(--accent); font:700 9px ui-monospace,monospace; }.depth-gradient { display:flex; height:88px; margin:11px 0; overflow:hidden; }.depth-gradient i { flex:1; }.depth-comparison strong,.depth-comparison b { color:var(--ink); font:600 13px Georgia,serif; }.depth-comparison b { margin-top:12px; color:var(--video); }.depth-comparison small { color:var(--muted); font-size:8px; }

.raw-packet rect:first-child { fill:#14201c; stroke:var(--raw); stroke-width:3; }.raw-packet path { stroke:#45564e; }.raw-packet text { text-anchor:start; fill:#c7d0cb; }.raw-packet rect:last-child { fill:var(--raw); animation:packet 2.5s ease-in-out infinite; }
.debayer-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:30px; align-items:center; min-height:350px; }.neighbor-grid { display:grid; grid-template-columns:repeat(3,74px); gap:6px; justify-content:center; }.neighbor-site { display:grid; place-items:center; min-height:74px; border:2px solid color-mix(in srgb,var(--site) 70%,transparent); border-radius:5px; background:color-mix(in srgb,var(--site) 18%,#0b1512); }.neighbor-site span { color:var(--site); font:800 11px ui-monospace,monospace; }.neighbor-site strong { font:700 19px ui-monospace,monospace; }.neighbor-site.target { outline:2px solid var(--accent); outline-offset:3px; }.debayer-math { display:grid; gap:7px; }.debayer-math > span { color:var(--accent); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.debayer-math button { border:1px solid var(--line); border-radius:3px; padding:8px 10px; background:transparent; color:var(--muted); cursor:pointer; text-align:left; font-size:9px; }.debayer-math button[aria-pressed="true"] { border-color:var(--video); color:var(--video); }.debayer-math p { margin:2px 0 7px; color:#aebbb4; font:15px ui-monospace,monospace; }.debayer-math p strong { color:var(--accent); }.rgb-result { display:grid; grid-template-columns:42px 1fr; gap:2px 10px; align-items:center; padding-top:12px; border-top:1px solid var(--line); }.rgb-result i { grid-row:1/3; width:42px; height:42px; border-radius:4px; background:var(--rgb); box-shadow:0 0 18px color-mix(in srgb,var(--rgb) 45%,transparent); }.rgb-result small { color:var(--muted); font-size:8px; }

.matrix-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:560px; margin:16px auto; }.matrix-columns article { padding:13px; border:1px solid var(--line); background:rgba(255,255,255,.018); }.matrix-columns h4 { margin:0 0 9px; text-align:center; color:var(--ink); font:400 15px Georgia,serif; }.sample-matrix { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.matrix-cell { display:grid; place-items:center; min-height:72px; background:#65766e; border-radius:3px; }.matrix-cell span { font:800 12px ui-monospace,monospace; }.matrix-cell small { font-size:7px; color:#dce5df; }.chroma-matrix .sample-A { background:#376b71; }.chroma-matrix .sample-B { background:#694f77; }.chroma-matrix .sample-C { background:#7b6541; }.chroma-matrix .sample-D { background:#476b45; }.matrix-columns article > p { margin:8px 0 0; color:var(--muted); text-align:center; font-size:9px; }
.temporal-frames { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }.temporal-frames article { position:relative; border:1px solid var(--line); }.temporal-frames article > span { position:absolute; z-index:2; top:5px; left:5px; padding:3px 5px; background:#07100f; color:var(--accent); font:800 8px ui-monospace,monospace; }.temporal-frames svg { display:block; width:100%; }.reconstruction-strip { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }.reconstruction-strip > strong { display:block; margin-bottom:7px; color:var(--video); text-align:center; font-size:9px; text-transform:uppercase; letter-spacing:.09em; }.reconstruction-strip > div { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }.reconstruction-strip svg { width:100%; }
.compression-slider { max-width:520px; margin:8px auto 14px; }.spatial-landscape { max-width:560px; margin:0 auto; }.spatial-landscape svg { display:block; width:100%; }

@media (max-width: 900px) {
  .slide-panel { min-height:360px; }.coverage-readout { grid-template-columns:1fr auto; }.coverage-readout small { grid-column:1/-1; }.demo-component .demo-svg { max-height:360px; }.debayer-layout { min-height:330px; }
}
@media (max-width: 560px) {
  .sensor-picker { display:grid; grid-template-columns:repeat(2,1fr); }.coverage-readout { grid-template-columns:1fr; }.coverage-readout small { grid-column:auto; }.meter-controls { grid-template-columns:1fr; }.meter-controls button { justify-self:start; }.stimulus-readout { grid-template-columns:1fr; }.stimulus-readout small { grid-column:auto; }.slide-dots button { font-size:0; }.slide-dots button span { font-size:8px; }.slide-panel { min-height:400px; }.bit-boxes { gap:3px; }.bit-box { padding-inline:1px; }.bit-box strong { font-size:18px; }.bit-box i { width:13px; height:13px; }.bit-box span { font-size:7px; }.binary-output > p { display:grid; gap:5px; text-align:center; }.depth-comparison { grid-template-columns:1fr; }.depth-gradient { height:36px; }.debayer-layout { grid-template-columns:1fr; gap:18px; }.neighbor-grid { grid-template-columns:repeat(3,60px); }.neighbor-site { min-height:60px; }.matrix-columns { grid-template-columns:1fr 1fr; gap:7px; }.matrix-columns article { padding:7px; }.matrix-cell { min-height:55px; }.temporal-frames,.reconstruction-strip > div { grid-template-columns:repeat(2,1fr); }.demo-stage { padding-inline:16px; }
}

/* Exposure, signal and photographic refinements */
.exposure-controls { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 14px; max-width:620px; margin:0 auto 6px; }
.exposure-controls label,.nyquist-slider,.bit-depth-slider { display:grid; grid-template-columns:1fr auto; gap:5px 10px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.exposure-controls strong,.nyquist-slider strong,.bit-depth-slider strong { color:var(--accent); }
.exposure-controls input,.nyquist-slider input,.bit-depth-slider input { grid-column:1/-1; width:100%; accent-color:var(--accent); }
.exposure-visual .demo-svg { max-height:285px; }.iris-graphic > circle:first-child { fill:#101e1a; stroke:#60766b; stroke-width:3; }.iris-graphic > circle:nth-child(2) { fill:#07100f; stroke:var(--video); stroke-width:3; transition:r .25s ease; }.iris-graphic text { fill:var(--video); }
.exposure-meter { max-width:620px; margin:-2px auto 0; padding:9px 12px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.exposure-status { display:flex; justify-content:space-between; margin-bottom:8px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.exposure-status span { font-weight:800; }.exposure-status.zona.media span { color:var(--accent); }.exposure-status.subexposición span { color:#6ea8d9; }.exposure-status.saturación span { color:#ff8278; }
.meter-row { display:grid; grid-template-columns:115px 1fr 54px; gap:9px; align-items:center; margin-top:5px; color:var(--muted); font-size:8px; }.meter-row i { height:5px; overflow:hidden; background:rgba(255,255,255,.08); border-radius:99px; }.meter-row b { display:block; height:100%; background:linear-gradient(90deg,#426b78,var(--accent)); transition:width .25s ease; }.meter-row strong { color:var(--ink); text-align:right; font:700 9px ui-monospace,monospace; }.meter-row.signal b { background:linear-gradient(90deg,var(--video),var(--raw)); }

.frame-measurement-banner { display:flex; justify-content:space-between; align-items:center; max-width:620px; margin:8px auto; padding:8px 11px; border:1px solid rgba(216,255,104,.25); background:rgba(216,255,104,.04); color:var(--accent); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }.frame-measurement-banner span { font:700 9px ui-monospace,monospace; }
.photosite-meter-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; max-width:620px; margin:0 auto; }.photosite-meter { padding:8px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.018); transition:border-color .2s,background .2s,box-shadow .2s; }.photosite-meter.is-active { border-color:var(--site-color); background:color-mix(in srgb,var(--site-color) 8%,#0b1512); box-shadow:0 0 20px color-mix(in srgb,var(--site-color) 18%,transparent); }.photosite-meter header { display:flex; justify-content:space-between; color:var(--site-color); font:800 9px ui-monospace,monospace; }.photosite-meter header small { color:var(--muted); font-size:7px; }.photosite-meter .demo-svg { height:104px; max-height:104px; }.mini-meter-face { fill:#13211d; stroke:#71847a!important; stroke-width:2!important; }.mini-meter-scale { fill:none; stroke:#9caaa3!important; stroke-width:1.5!important; }.photosite-meter .mini-needle { stroke:var(--site-color); stroke-width:4; transform-origin:110px 116px; transform:rotate(-55deg); transition:transform .42s cubic-bezier(.2,.75,.2,1); }.photosite-meter svg circle { fill:var(--site-color); }.photosite-meter svg text { fill:var(--site-color); }.photosite-meter > .meter-output { display:grid; grid-template-columns:1fr auto; gap:7px; align-items:center; }.photosite-meter > .meter-output i { display:block; height:3px; background:repeating-linear-gradient(90deg,var(--site-color) 0 3px,transparent 3px 6px); opacity:.25; }.photosite-meter > .meter-output span { color:var(--muted); font:700 8px ui-monospace,monospace; }

.nyquist-slider,.bit-depth-slider { max-width:560px; margin:0 auto 8px; }.sampling-graphic { padding:3px; border:1px solid transparent; transition:border-color .25s,box-shadow .25s,background .25s; }.sampling-graphic.nyquist-reached { border-color:rgba(216,255,104,.42); background:rgba(216,255,104,.025); box-shadow:0 0 28px rgba(216,255,104,.1); }.sampling-graphic.nyquist-reached .sample-points circle { fill:var(--accent); filter:drop-shadow(0 0 6px var(--accent)); }.sampling-graphic.nyquist-reached .reconstructed-curve { filter:drop-shadow(0 0 4px var(--accent)); }
.reconstructed-curve.is-aliasing { stroke:#ff7b75; }
.adc-flow-wave { fill:none; stroke:var(--raw); stroke-width:5; stroke-dasharray:10 6; animation:dash 1.2s linear infinite; }.adc-flow-arrow { stroke:var(--accent)!important; stroke-width:3!important; }.adc-flow-label { fill:var(--muted)!important; font-size:10px!important; letter-spacing:.12em; }.adc-flow-chip rect { fill:#14211d; stroke:var(--accent); stroke-width:3; }.adc-flow-chip text { fill:var(--accent); font-weight:800; }.adc-flow-chip text:nth-of-type(n+2) { fill:var(--muted); font-size:8px; }.adc-flow-bits text { fill:var(--video); font:800 24px ui-monospace,monospace; animation:adcBitPulse 1.8s ease-in-out infinite; animation-delay:calc(var(--i)*-.08s); }@keyframes adcBitPulse{50%{fill:var(--accent);filter:drop-shadow(0 0 7px var(--accent))}}
.single-depth-card { max-width:520px; margin:14px auto 0; padding:17px; border:1px solid var(--line); background:rgba(255,255,255,.02); }.single-depth-card > span { color:var(--accent); font:800 18px ui-monospace,monospace; }.single-depth-card .depth-gradient { height:120px; }.single-depth-card > div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:5px 18px; }.single-depth-card strong,.single-depth-card b { color:var(--ink); font:600 24px Georgia,serif; }.single-depth-card b { color:var(--video); }.single-depth-card small { color:var(--muted); font-size:10px; line-height:1.35; }.bit-depth-options { margin-top:10px; }
.depth-view-tabs { display:flex; justify-content:center; gap:6px; margin:0 auto 12px; }.depth-view-tabs button { border:1px solid var(--line); border-radius:99px; padding:7px 11px; background:transparent; color:var(--muted); cursor:pointer; font-size:8px; font-weight:700; }.depth-view-tabs button[aria-selected="true"] { border-color:var(--accent); background:rgba(216,255,104,.08); color:var(--accent); }.depth-view-tabs button:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.didactic-image-frame { width:min(100%,560px); margin:10px auto 0; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#050908; }.didactic-image-frame img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#050908; }.didactic-image-frame figcaption { display:grid; grid-template-columns:1fr auto; gap:8px 14px; align-items:center; padding:8px 10px; color:var(--muted); font-size:8px; }.didactic-image-frame figcaption strong { color:var(--accent); }.didactic-image-frame figcaption small { text-align:right; }.didactic-image-frame figcaption a { color:var(--video); text-decoration:none; }.didactic-image-frame figcaption a:hover,.didactic-image-frame figcaption a:focus-visible { color:var(--accent); outline:none; text-decoration:underline; }.simulation-note { max-width:560px; margin:8px auto 0; color:#73827b; text-align:center; font-size:8px; line-height:1.4; }

.debayer-source { display:grid; gap:12px; }.grape-reference { display:grid; justify-items:center; gap:2px; color:var(--muted); font-size:8px; text-align:center; }.grape-reference svg { width:130px; height:76px; overflow:visible; }.grape-reference path { fill:none; stroke:#85a66f; stroke-width:5; stroke-linecap:round; }.grape-reference ellipse { fill:#668b59; transform:rotate(12deg); transform-origin:center; }.grape-reference circle { fill:rgb(160,50,235); stroke:#c58cff; stroke-width:1.5; filter:drop-shadow(0 0 5px rgba(160,50,235,.38)); }.debayer-math button:disabled { cursor:default; opacity:.75; }.rgb-channel-rows { display:grid; gap:4px; margin-top:5px; }.rgb-channel-rows > div { display:grid; grid-template-columns:34px 1fr; align-items:center; min-height:32px; padding:5px 9px; border:1px solid var(--line); background:rgba(255,255,255,.018); }.rgb-channel-rows span { color:var(--video); font:800 11px ui-monospace,monospace; }.rgb-channel-rows strong { color:var(--ink); font:700 18px ui-monospace,monospace; }.rgb-result.is-pending i { background:transparent; border:1px dashed var(--line-strong); box-shadow:none; }.rgb-result.is-pending strong { color:var(--muted); }

@media (max-width:560px) {
  .exposure-controls { grid-template-columns:1fr; }.exposure-visual .demo-svg { max-height:240px; }.meter-row { grid-template-columns:92px 1fr 45px; }.photosite-meter-grid { grid-template-columns:1fr 1fr; gap:4px; }.photosite-meter { padding:6px; }.photosite-meter .demo-svg { height:84px; }.frame-measurement-banner { display:grid; gap:4px; }.single-depth-card .depth-gradient { height:76px; }.single-depth-card > span { font-size:15px; }.single-depth-card strong,.single-depth-card b { font-size:20px; }.single-depth-card small { font-size:9px; }.didactic-image-frame figcaption { grid-template-columns:1fr; }.didactic-image-frame figcaption small { text-align:left; }.depth-view-tabs { display:grid; grid-template-columns:1fr 1fr; }.grape-reference svg { width:110px; height:66px; }
}

/* Optics, compression and wrappers · v1.5 */
.optics-pickers { display:grid; gap:7px; max-width:640px; margin:0 auto 5px; }.optics-pickers section { display:grid; grid-template-columns:48px 1fr; gap:8px; align-items:start; }.optics-pickers section > span { padding-top:7px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }.lens-picker,.optics-pickers .sensor-picker { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:5px; margin:0; }.lens-picker button { border:1px solid var(--line); border-radius:99px; padding:7px 10px; background:rgba(255,255,255,.025); color:var(--muted); cursor:pointer; font-size:8px; font-weight:700; }.lens-picker button[aria-pressed="true"] { border-color:var(--raw); background:rgba(241,174,98,.08); color:var(--raw); }.lens-picker button:focus-visible { outline:1px solid var(--raw); outline-offset:2px; }.lens-profile text { font-size:8px!important; }.lens-profile text:last-child { fill:var(--raw); }.optics-note { min-height:28px; }

.spectrum-strip { filter:drop-shadow(0 0 9px rgba(130,190,255,.28)); }.layer-plate rect { fill:rgba(255,255,255,.018); stroke:var(--line); stroke-width:1.5; }.filter-plate rect { fill:rgba(99,217,198,.025); stroke:rgba(99,217,198,.28); }.photosite-plate rect { fill:rgba(180,190,185,.035); stroke:rgba(190,200,195,.38); }.layer-plate text { fill:var(--muted); font-size:7px; text-anchor:end; }.bayer-filter-cell .cfa-filter { transform-box:fill-box; transform-origin:center; animation:cellPulse 3s ease-in-out infinite; animation-delay:calc(var(--i)*.055s); }.bayer-filter-cell text { fill:rgba(7,16,15,.82); font-size:7px; font-weight:900; text-anchor:middle; }.bayer-photosite-cell .photosite-well { fill:#727a76; stroke:#c1cbc6; stroke-width:1.4; }.bayer-photosite-cell .photosite-channel { fill:var(--beam); filter:drop-shadow(0 0 4px var(--beam)); animation:filteredPulse 1.8s ease-in-out infinite; animation-delay:calc(var(--i)*-.05s); }.filtered-layer-arrows path { fill:none; stroke:var(--beam); stroke-width:4; stroke-linecap:round; stroke-dasharray:6 5; animation:dash 1.2s linear infinite; }.filtered-layer-arrows text { fill:var(--beam); font-size:8px; }.bayer-layer-key rect { fill:rgba(255,255,255,.025); stroke:var(--line-strong); }.bayer-layer-key text { fill:var(--muted); font-size:8px; text-anchor:middle; }

.subsampling-equation { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr); gap:5px; align-items:center; max-width:640px; margin:12px auto 8px; }.subsampling-equation article { min-width:0; padding:9px; border:1px solid var(--line); background:rgba(255,255,255,.018); }.subsampling-equation h4 { min-height:34px; margin:0 0 7px; text-align:center; color:var(--ink); font:400 13px/1.2 Georgia,serif; }.subsampling-equation article > p { margin:7px 0 0; color:var(--muted); text-align:center; font-size:8px; }.matrix-operator { color:var(--accent); text-align:center; font:700 18px Georgia,serif; }.subsampling-equation .matrix-cell { min-height:58px; }.luma-cell { background:hsl(150 4% var(--luma)); }.luma-cell strong { color:#fff; font:800 16px ui-monospace,monospace; }.chroma-cell { background:hsl(var(--sample-hue) 48% 38%); }.result-cell { background:var(--result-color); }.result-cell small { padding:2px 3px; border-radius:2px; background:rgba(7,16,15,.35); }.visual-lossless-note { max-width:610px; margin:8px auto 0; padding:8px 10px; border-left:2px solid var(--video); background:rgba(99,217,198,.04); color:#9eb0a8; font-size:9px; line-height:1.4; }

.bag-analogy { display:grid; gap:11px; max-width:640px; margin:0 auto; }.bag-analogy-figure { width:min(100%,500px); margin:0 auto; border:1px solid var(--line); background:#050908; }.bag-analogy-figure img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }.bag-prompt { max-width:610px; margin:0 auto; color:#d6dfda; text-align:center; font:16px/1.48 Georgia,serif; }.bag-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.bag-choices button { min-height:62px; padding:10px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.02); color:#aebbb4; cursor:pointer; font-size:10px; line-height:1.42; text-align:left; }.bag-choices button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); background:rgba(216,255,104,.05); }.bag-choices button:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }.bag-feedback { min-height:54px; padding:10px 12px; border:1px solid var(--line); background:rgba(255,255,255,.015); color:#aebbb4; font-size:10px; line-height:1.5; }.bag-feedback h4 { margin:0 0 6px; color:var(--ink); font:400 17px Georgia,serif; }.bag-feedback p { margin:5px 0; }.bag-feedback.is-lossy { border-color:rgba(255,123,117,.38); }.bag-feedback.is-lossy h4 { color:#ff8b83; }.bag-feedback.is-lossless { border-color:rgba(99,217,198,.4); }.bag-feedback.is-lossless h4 { color:var(--video); }

.format-explorer { max-width:640px; margin:0 auto; }.format-group-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:8px; border-bottom:1px solid var(--line); }.format-group-tabs button { padding:9px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }.format-group-tabs button[aria-selected="true"] { border-color:var(--accent); color:var(--accent); }.format-group-tabs button:focus-visible { outline:1px solid var(--accent); outline-offset:-2px; }.format-options { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin-bottom:10px; }.format-options button { display:grid; gap:3px; min-width:110px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.018); color:var(--muted); cursor:pointer; font-size:11px; font-weight:700; }.format-options button small { color:#71847a; font:700 9px ui-monospace,monospace; }.format-options button[aria-pressed="true"] { border-color:var(--video); color:var(--video); background:rgba(99,217,198,.05); }.format-options button:focus-visible { outline:1px solid var(--video); outline-offset:2px; }.format-presentation { display:grid; grid-template-columns:195px minmax(0,1fr); gap:10px; align-items:stretch; }.format-folder-visual { display:grid; place-items:center; min-width:0; padding:8px; border:1px solid var(--line); background:radial-gradient(circle at 50% 45%,rgba(216,255,104,.06),transparent 58%),rgba(255,255,255,.012); }.format-folder-svg { display:block; width:100%; max-height:285px; }.folder-back { fill:#182822; stroke:var(--raw); stroke-width:2; }.folder-front { fill:#10201b; stroke:var(--accent); stroke-width:2.5; }.folder-extension { fill:var(--accent); font:800 14px ui-monospace,monospace; text-anchor:middle; }.folder-item rect { fill:#1c3129; stroke:#5e746a; }.folder-item text { fill:#d2ddd7; font:800 10px ui-monospace,monospace; text-anchor:middle; }.folder-label { fill:#93a39b; font:700 9px ui-monospace,monospace; text-anchor:middle; }.format-detail { padding:12px; border:1px solid var(--line); background:rgba(255,255,255,.018); }.format-detail header { display:flex; justify-content:space-between; gap:10px; align-items:start; padding-bottom:8px; border-bottom:1px solid var(--line); }.format-detail header span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.format-detail h3 { margin:3px 0 0; color:var(--ink); font:400 21px Georgia,serif; }.format-detail header > strong { padding:5px 7px; border:1px solid rgba(216,255,104,.3); border-radius:3px; color:var(--accent); font:800 11px ui-monospace,monospace; }.format-detail dl { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:10px 0; }.format-detail dl > div { padding:7px; background:rgba(255,255,255,.018); }.format-detail dt { margin-bottom:4px; color:var(--video); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }.format-detail dd { margin:0; color:#d0dad5; font-size:11px; line-height:1.38; }.codec-list { display:flex; flex-wrap:wrap; gap:3px; }.codec-list span { padding:3px 5px; border:1px solid var(--line); border-radius:99px; font-size:9px; }.format-detail > p { margin:0; color:#91a099; font-size:10px; line-height:1.45; }.format-definitions { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:9px; }.format-definitions span { color:#8b9c94; font-size:9px; line-height:1.4; }.format-definitions strong { display:block; margin-bottom:2px; color:var(--raw); font-size:9px; text-transform:uppercase; }

@media (max-width:560px) {
  .optics-pickers section { grid-template-columns:1fr; gap:2px; }.lens-picker,.optics-pickers .sensor-picker { display:grid; grid-template-columns:1fr 1fr; }.lens-picker button:last-child { grid-column:1/-1; }.subsampling-equation { grid-template-columns:1fr; gap:4px; }.subsampling-equation article { padding:7px; }.subsampling-equation h4 { min-height:0; }.matrix-operator { line-height:1; }.bag-analogy { grid-template-columns:1fr; }.bag-analogy-figure { width:100%; }.bag-choices { grid-column:auto; grid-template-columns:1fr; }.bag-feedback { grid-column:auto; }.format-options { display:grid; grid-template-columns:1fr 1fr; }.format-options button { min-width:0; }.format-presentation { grid-template-columns:1fr; }.format-folder-visual { min-height:210px; }.format-folder-svg { max-width:250px; max-height:220px; }.format-detail dl { grid-template-columns:1fr; }.format-definitions { grid-template-columns:1fr 1fr; }
}