.design-page{--design-width:1520px;--design-gutter:96px;--design-header-height:90px}
.design-page .site-header{max-width:var(--design-width);margin:auto;padding:0 var(--design-gutter);height:var(--design-header-height)}
.design-page h1{font-size:clamp(64px,7vw,108px);line-height:1.17;letter-spacing:-4px;font-weight:400;margin:0 0 40px}
.design-page h2{font-size:clamp(38px,4.1vw,64px);line-height:1.3;font-weight:400;letter-spacing:-2px;margin:0}
.design-page h3{font-weight:400}
.design-page p{line-height:1.95}
.skip-link{position:fixed;top:12px;left:20px;z-index:100;padding:12px 20px;background:var(--ink);color:var(--bg);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.design-hero{max-width:var(--design-width);margin:auto;min-height:calc(100svh - var(--design-header-height));position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;column-gap:7%;row-gap:32px;align-items:center;padding:40px var(--design-gutter) 28px;overflow:hidden}
.design-hero-copy{position:relative;z-index:1}
.design-lede{font-size:17px;color:var(--muted);margin:0;max-width:470px}
.design-hero-link{grid-column:1/-1;justify-self:center;align-self:end;display:inline-flex;flex-direction:column;align-items:center;gap:14px;font-size:14px;padding:8px 20px;text-align:center}
.design-hero-link span{font-size:22px}
.hero-study{margin:0;position:relative;width:100%;max-width:620px;justify-self:center}
.hero-study img{display:block;width:100%;height:auto;max-height:60svh;object-fit:contain}
.design-section{max-width:var(--design-width);padding:120px var(--design-gutter) 150px;margin:0 auto;scroll-margin-top:24px}
.intro-grid,.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:12%}
.project-copy p{font-size:17px;color:var(--muted);margin:0 0 32px}
.project-copy p:last-child{margin-bottom:0}
.project-copy p:first-child{color:#e0e0e0}
.design-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;margin:100px 0 0;padding:48px 0 0}
.design-facts dt{font-size:13px;color:#8e8e8e;margin-bottom:22px}
.design-facts dd{font-size:64px;letter-spacing:-2px;font-weight:400;margin:0;line-height:1}
.design-facts dd span{font-size:13px;letter-spacing:0;margin-left:10px;color:var(--muted)}
.design-facts .fact-text{font-size:44px;padding-top:10px}
.section-intro{align-items:end;margin-bottom:80px}
.section-intro>p{font-size:16px;margin:0 0 5px;color:var(--muted)}
.structure-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:10%;align-items:center}
.structure-visual{background:#222222;border-radius:6px;padding:36px;overflow:hidden}
.view-switch{display:inline-flex;gap:3px;background:#313131;padding:4px;border-radius:3px}
.view-switch button{font-size:13px;padding:9px 14px;color:#a9a9a9;border-radius:2px}
.view-switch button[aria-pressed=true]{background:#cbcbcb;color:#363636}
.exploded-diagram{display:block;width:100%;height:auto;max-height:660px;stroke:#7f7f7f;stroke-width:1.15;overflow:visible;fill:none}
.diagram-axis{stroke:#383838;stroke-dasharray:5 9}
.structure-part{transition:transform .7s ease,opacity .25s,stroke .25s;transform-box:view-box;opacity:.5}
.structure-part.is-selected{opacity:1;stroke:#f3f3f3}
.structure-part .mesh-line{stroke-width:.7;opacity:.6}
.part-ring{stroke-dasharray:3 7;opacity:.45}
.lens-pieces{fill:#444444}
.structure-part.is-selected .lens-pieces{fill:#777777}
.shell-ports{fill:#171717}
.part-index{fill:#9a9a9a;stroke:none;font-size:15px;font-family:var(--font)}
.is-selected .part-index{fill:#ffffff}
.part-callout{stroke:#575757;stroke-width:.8}
.board-traces{stroke-width:1.2}
.circuit-board{fill:#292929}
.is-selected .circuit-board{fill:#424242}
.unified-diagram{display:block;width:100%;height:auto;max-height:660px;fill:none;stroke:none}
.unified-diagram .assembly-content{transform-box:view-box;transform-origin:360px 380px;transition:transform .85s cubic-bezier(.4,0,.2,1)}
.unified-diagram .structure-part{transition:transform .85s cubic-bezier(.4,0,.2,1),opacity .25s;opacity:.78}
.unified-diagram .structure-part.is-selected{opacity:1;stroke:#d6d6d6}
.unified-diagram[data-view=exploded] .assembly-content{transform:translateY(34px) scale(.54)}
.unified-diagram[data-view=exploded] [data-part=lens]{transform:translateY(-375px)}
.unified-diagram[data-view=exploded] [data-part=rotation]{transform:translateY(50px)}
.unified-diagram[data-view=exploded] [data-part=control]{transform:translateY(130px)}
.unified-diagram[data-view=exploded] [data-part=base]{transform:translateY(280px)}
.unified-diagram .part-index{fill:#afafaf;stroke:none;font:15px var(--font)}
.unified-diagram .part-callout{stroke:#888888;stroke-width:1;fill:none}
.unified-diagram .is-selected .part-index{fill:#d6d6d6}
.unified-diagram[data-view=exploded] .part-index{font-size:24px}
.unified-diagram[data-view=assembled] .structure-part{opacity:.82}
.unified-diagram[data-view=assembled] .structure-part.is-selected{opacity:1}
.unified-diagram[data-view=assembled] [data-part=control]{opacity:0}
.unified-diagram[data-view=assembled][data-selected=control] [data-part=control]{opacity:1}
.unified-diagram[data-view=assembled] .part-callout,.unified-diagram[data-view=assembled] .part-index{opacity:0}
.unified-diagram[data-view=assembled] .is-selected .part-callout,.unified-diagram[data-view=assembled] .is-selected .part-index{opacity:1}
.unified-diagram .assembly-base-body,.unified-diagram .assembly-shell-grid,.unified-diagram .assembly-rotation-internal,.unified-diagram .assembly-axis{transition:opacity .3s}
.unified-diagram[data-view=assembled] .assembly-axis{opacity:0}
.unified-diagram .is-selected .part-outline{stroke:#d6d6d6}
.unified-diagram[data-selected=shell] .assembly-shell-grid{opacity:.5}
.unified-diagram[data-view=exploded] .assembly-shell-grid{opacity:.3}
.unified-diagram[data-view=exploded] .assembly-rotation-internal,.unified-diagram[data-selected=rotation] .assembly-rotation-internal{opacity:1}
.unified-diagram[data-view=assembled][data-selected=control] .assembly-base-body,.unified-diagram[data-view=assembled][data-selected=rotation] .assembly-base-body{opacity:.18}
.structure-details{padding:16px 0}
.part-button{width:100%;display:flex;align-items:center;gap:28px;text-align:left;padding:24px 20px;border-radius:3px;color:#8c8c8c;transition:color .2s,background .2s}
.part-number{font-size:12px;letter-spacing:1px;align-self:flex-start;margin-top:5px}
.part-button strong{display:block;font-size:20px;font-weight:400;margin-bottom:5px}
.part-plus{margin-left:auto;font-size:24px;font-weight:300}
.part-button[aria-pressed=true]{color:#f5f5f5;background:#202020}
.part-button[aria-pressed=true] .part-plus{transform:rotate(45deg)}
.part-button:hover{color:#f5f5f5}
.part-description{margin:48px 20px 0;min-height:168px}
.part-description h3{font-size:20px;line-height:1.6;margin:0 0 12px}
.part-description p{font-size:14px;color:#a5a5a5;margin:0}
.drawing-sheet{margin:0;background:#1d1d1d;padding:28px 38px;color:#aeaeae;border-radius:3px}
.drawing-sheet img{display:block;width:100%;height:auto}
.algorithm-overview{margin-bottom:144px}
.algorithm-overview h2{margin:0}
.algorithm-explorer{display:grid;grid-template-columns:240px minmax(0,1fr);gap:10%;align-items:center;margin-bottom:160px}
.algorithm-chapters{display:flex;flex-direction:column;gap:4px}
.algorithm-chapters button{position:relative;display:flex;align-items:center;gap:24px;text-align:left;padding:18px 0;color:#777777;font-size:18px;line-height:1.5;white-space:nowrap;transition:color .25s}
.algorithm-chapters button span{font-size:14px;color:#555555;font-variant-numeric:tabular-nums;letter-spacing:.5px;transition:color .25s}
.algorithm-chapters button:hover{color:#c9c9c9}
.algorithm-chapters button[aria-selected=true]{color:#f0f0f0}
.algorithm-chapters button[aria-selected=true] span{color:#bcbcbc}
.algorithm-detail{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:48px;min-height:420px}
.algorithm-caption{text-align:center}
.algorithm-detail h3{font-size:30px;line-height:1.4;letter-spacing:-.7px;margin:0}
.algorithm-glyph{height:280px;margin:0}
.algorithm-glyph svg{width:100%;height:100%;display:block;stroke:none;overflow:visible;animation:algorithm-reveal .45s ease-out both}
@keyframes algorithm-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.algorithm-lab{padding:80px 64px;background:#181818;border-radius:5px}
.lab-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:80px}
.lab-heading h3{font-size:38px;line-height:1.45;letter-spacing:-1px;margin:0}
.lab-mode-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lab-mode-actions{display:flex;align-items:center;gap:32px}
.lab-segmented{display:flex;align-items:center;gap:4px;flex-wrap:wrap;background:#222222;padding:4px;border-radius:3px}
.lab-segmented button{font-size:14px;color:#949494;padding:11px 20px;border-radius:2px;white-space:nowrap;transition:background .2s,color .2s}
.lab-segmented button:hover{color:#eeeeee}
.lab-segmented button[aria-pressed=true]{color:#171717;background:#dedede}
.lab-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:80px;align-items:start}
.lab-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:15px;color:#bebebe;min-height:22px}
.algorithm-lab canvas{display:block;width:100%}
.lab-spectrum{height:170px;margin-top:36px}
.lab-band-labels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));text-align:center;margin-top:12px;gap:4px}
.lab-band-labels span{font-size:12px;color:#949494;white-space:nowrap}
.lab-envelope-heading{margin-top:64px}
.lab-chart-key{display:flex;align-items:center;gap:14px;font-size:12px;color:#7c7c7c}
.lab-chart-key span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.lab-chart-key i{width:9px;height:2px;display:inline-block;background:#bcbcbc}
.lab-chart-key .key-input{height:7px;background:#424242}
.lab-chart-key .key-output{background:#eeeeee}
.lab-timeline{height:112px;margin-top:28px;cursor:crosshair;touch-action:none}
.lab-globe{height:360px;touch-action:none;cursor:grab;margin-top:32px}
.lab-globe:active{cursor:grabbing}
.lab-fixture-readout{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:40px}
.lab-fixture-selector{display:flex;align-items:center;gap:12px}
.lab-fixture-selector button{display:grid;place-items:center;width:36px;height:36px;padding:0;font-size:18px;color:#777777;border-radius:2px;transition:color .2s}
.lab-fixture-selector button:hover{color:#eeeeee}
.lab-fixture-selector output{font-size:17px;letter-spacing:.5px;min-width:36px;text-align:center;color:#c9c9c9;font-variant-numeric:tabular-nums}
.lab-fixture-readout strong{font-size:25px;font-weight:400;font-variant-numeric:tabular-nums;color:#dedede}
.lab-transport{display:flex;align-items:center;gap:18px;margin:80px 0 64px;min-width:0}
.lab-play{flex-shrink:0;width:34px;height:34px;border-radius:50%;color:#171717;background:#dddddd;font-size:12px;padding:0;display:grid;place-items:center}
.lab-transport input{min-width:0;flex:1;margin:0;height:16px;accent-color:#dddddd}
.lab-transport output{font-size:12px;color:#929292;white-space:nowrap;font-variant-numeric:tabular-nums}
#lab-audio{font-size:14px;white-space:nowrap;padding:9px 0 9px 6px;color:#a6a6a6}
#lab-audio[aria-pressed=true]{color:#eeeeee}
#lab-compare{font-size:14px;color:#949494;padding:12px 0}
#lab-compare span{margin-left:8px;font-size:16px;vertical-align:-1px}
.lab-parameters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin-top:64px}
.lab-parameter{display:block;min-width:0}
.lab-parameter>span{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#bcbcbc;margin-bottom:17px;white-space:nowrap}
.lab-parameter output{font-size:12px;color:#848484;align-self:center;font-variant-numeric:tabular-nums}
.lab-parameter input{display:block;width:100%;margin:0;height:18px;accent-color:#d5d5d5}
.lab-parameter:has(input:disabled){opacity:.45}
.lab-comparison{display:grid;grid-template-columns:.8fr 1.2fr;gap:12%;padding-top:96px;align-items:center}
.lab-comparison h4{font-size:28px;line-height:1.5;font-weight:400;letter-spacing:-.5px;margin:0}
.lab-compare-charts canvas{height:44px;margin:12px 0 22px}
.lab-compare-charts .lab-panel-heading{font-size:13px}
.lab-compare-charts .lab-panel-heading span+span{color:#777777;font-variant-numeric:tabular-nums}
#lab-reset{font-size:14px;color:#939393;white-space:nowrap;padding:12px 0;line-height:1.7}
#lab-status:not(.sr-only){margin:40px 0 0;font-size:14px;color:#b0b0b0}
.algorithm-lab button:focus-visible,.lab-fixture-selector:focus-visible{outline:2px solid #bcbcbc;outline-offset:3px;filter:none}
.algorithm-chapters button:focus-visible{outline:1px solid #939393;outline-offset:5px;background:none;filter:none}
.algorithm-detail:focus-visible{outline:1px solid #777777;outline-offset:2px}
.algorithm-lab input[type=range]:focus-visible{outline:1px solid #aaaaaa;outline-offset:5px;background:none;filter:none}
.design-footer{max-width:var(--design-width);margin:auto;padding:48px var(--design-gutter) 64px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.design-footer .brand{font-size:20px;gap:8px}
.design-footer .brand-mark{font-size:25px}
.design-footer nav{display:flex;align-items:center;gap:30px}
.design-footer nav a{font-size:11px;color:#7c7c7c}
@media(prefers-reduced-motion:reduce){.structure-part,.algorithm-chapters button,.algorithm-chapters button span{transition:none}.algorithm-glyph svg{animation:none}}
@media(max-width:1100px){
  .design-page{--design-gutter:56px;--design-header-height:80px}
  .design-page h1{font-size:clamp(56px,7vw,74px)}
  .design-hero{column-gap:6%;padding-top:48px}
  .design-section{padding-top:100px;padding-bottom:120px}
  .structure-layout{gap:7%}
  .structure-visual{padding:28px}
  .part-button{gap:20px;padding:22px 14px}
  .part-button strong{font-size:18px}
  .algorithm-overview{margin-bottom:128px}
  .algorithm-explorer{grid-template-columns:200px minmax(0,1fr);gap:8%;margin-bottom:128px}
  .algorithm-chapters button{gap:20px;font-size:17px}
  .algorithm-detail{min-height:380px;gap:40px}
  .algorithm-detail h3{font-size:27px}
  .algorithm-glyph{height:240px}
  .algorithm-lab{padding:64px 40px}
  .lab-workspace{gap:48px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .lab-parameters{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .lab-heading h3{font-size:34px}
}
@media(max-width:700px){
  .design-page{--design-gutter:28px;--design-header-height:76px}
  .design-hero{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:28px;padding-top:40px;padding-bottom:24px}
  .design-page h1{font-size:clamp(54px,16vw,66px);letter-spacing:-3px;margin:0 0 36px}
  .design-lede{font-size:15px}
  .design-hero-link{font-size:14px;gap:12px}
  .hero-study{max-width:420px}
  .hero-study img{max-height:clamp(240px,34svh,340px)}
  .design-section{padding-top:92px;padding-bottom:100px}
  .intro-grid,.section-intro{grid-template-columns:1fr;gap:40px}
  .design-page h2{font-size:38px;letter-spacing:-1.4px}
  .project-copy p{font-size:15px;margin-bottom:28px}
  .design-facts{grid-template-columns:repeat(2,1fr);gap:48px 28px;margin-top:56px;padding-top:24px}
  .design-facts dt{font-size:12px;margin-bottom:22px}
  .design-facts dd{font-size:52px}
  .design-facts .fact-text{font-size:34px}
  .design-facts dd span{font-size:12px}
  .section-intro{margin-bottom:48px}
  .section-intro>p{font-size:14px}
  .structure-layout{grid-template-columns:1fr;gap:36px}
  .structure-visual{padding:24px 16px}
  .view-switch{margin-left:6px}
  .view-switch button{font-size:12px;padding:10px 12px}
  .exploded-diagram{max-height:500px}
  .structure-details{padding:0}
  .part-button{padding:20px 12px}
  .part-button strong{font-size:18px}
  .part-description{margin:36px 12px 0;min-height:130px}
  .part-description h3{font-size:19px}
  .drawing-sheet{padding:16px 8px}
  .drawing-sheet img{min-width:0}
  .algorithm-overview{margin-bottom:96px}
  .algorithm-explorer{grid-template-columns:1fr;gap:48px;margin-bottom:96px}
  .algorithm-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
  .algorithm-chapters button{justify-content:center;padding:12px 0 16px;font-size:15px}
  .algorithm-chapters button span{display:none}
  .algorithm-detail{gap:32px;min-height:0}
  .algorithm-detail h3{font-size:25px}
  .algorithm-glyph{height:220px}
  .algorithm-lab{padding:48px 24px 64px}
  .lab-heading{display:block;margin-bottom:56px}
  .lab-heading h3{font-size:32px}
  .lab-heading>.lab-segmented{margin-top:36px;display:inline-flex}
  .lab-segmented{gap:2px;padding:3px}
  .lab-segmented button{padding:11px 18px;font-size:13px}
  .lab-workspace{grid-template-columns:1fr;gap:80px}
  .lab-spectrum{height:160px;margin-top:28px}
  .lab-band-labels span{font-size:11px}
  .lab-panel-heading{font-size:14px;gap:10px}
  .lab-chart-key{font-size:11px;gap:10px}
  .lab-envelope-heading{margin-top:56px}
  .lab-globe{height:300px;margin-top:24px}
  .lab-fixture-readout{max-width:320px;margin:32px auto 0}
  .lab-transport{gap:12px;flex-wrap:wrap;margin:56px 0 48px}
  .lab-transport input{flex-basis:calc(100% - 153px)}
  .lab-transport output{font-size:11px}
  #lab-audio{margin-left:46px;font-size:13px;padding:6px 0}
  .lab-mode-row{gap:24px}
  .lab-mode-actions{gap:24px}
  #lab-compare{font-size:13px}
  .lab-parameters{grid-template-columns:1fr;gap:36px;margin-top:48px}
  .lab-parameter>span{font-size:14px;margin-bottom:12px}
  .lab-comparison{grid-template-columns:1fr;gap:36px;padding-top:64px}
  .lab-comparison h4{font-size:25px}
  #lab-reset{font-size:13px}
  .design-footer{padding-top:40px;padding-bottom:48px;flex-wrap:wrap;gap:24px}
  .design-footer nav{margin-left:auto;gap:20px}
  .design-page .site-header .brand{gap:8px}
}