:root{color-scheme:dark;--bg:#10171f;--panel:#17212c;--border:#2a3847;--muted:#91a1b2;--text:#e8eef4;--cyan:#65ddcf;--gold:#edba69;--purple:#ae9aec}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.6 -apple-system,BlinkMacSystemFont,"Thonburi",sans-serif}button,input,select{font:inherit}button,select,input{color:inherit}button{cursor:pointer;border:1px solid var(--border);background:#202d3a;border-radius:7px;padding:8px 11px;transition:background .15s,border-color .15s}button:hover{background:#304151;border-color:#668294}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.35;cursor:default}select,input[type=number]{min-width:0;border:1px solid var(--border);border-radius:6px;background:#111b25;padding:7px 9px;width:100%}input[type=range]{accent-color:var(--cyan);cursor:pointer;min-width:0}label{color:var(--muted);font-size:11px;display:block}label select,label input{display:block;margin-top:5px;color:var(--text);font-size:13px}small,.micro{font-size:10.5px;color:var(--muted)}p{margin:8px 0}h1,h2{margin:0;line-height:1.4}h1{font-size:22px;letter-spacing:-.4px}h2{font-size:15px;font-weight:550}.app-header{height:82px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:#131d27}.brand{display:flex;gap:12px;align-items:center}.brand-symbol{color:var(--cyan);font-size:43px;line-height:1}.brand strong{font-size:15px;letter-spacing:2.4px}.brand strong span{color:var(--cyan);font-weight:400}.brand small{display:block;font-size:10px;letter-spacing:.5px}.header-tags{display:flex;align-items:center;gap:12px}.tag{font-size:10px;letter-spacing:.3px;padding:4px 9px;border-radius:5px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}.tag b{color:var(--text);margin-left:5px}.status{color:var(--cyan)}.app-layout{display:grid;grid-template-columns:278px minmax(0,1fr);max-width:1920px;margin:auto}.sidebar{border-right:1px solid var(--border);padding:6px 20px 25px;background:#131d27}.control-section{padding:20px 0;border-bottom:1px solid var(--border)}.section-label{display:flex;gap:10px;align-items:center;color:#64788c;font-size:10px;letter-spacing:1px;margin-bottom:13px}.section-label span{color:var(--text);font-size:12px;letter-spacing:0}.section-label b{color:var(--cyan);margin-left:3px;font-family:monospace}.segmented{display:flex;gap:4px;padding:4px;background:#0e1720;border-radius:8px}.segmented button{flex:1;border-color:transparent;background:transparent;font-weight:600;font-size:16px;padding:8px 9px}.segmented button.active{background:#2a464b;color:#adfff1;border-color:#42676b}.segmented small{font-size:10px;color:inherit}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}.viewpoint{margin-top:-4px}.wheel-row-label{font-size:11px;margin:12px 0 7px;color:var(--muted)}.wheel-row-label b{padding-right:7px}.front b{color:var(--cyan)}.rear b{color:var(--purple)}.wheel-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.wheel-card{text-align:left;padding:8px 9px;border-radius:7px;background:#182631;position:relative;display:flex;flex-direction:column}.wheel-card b{font:11px ui-monospace,Menlo,monospace;color:var(--muted)}.wheel-card span{font:14px ui-monospace,Menlo,monospace;margin-top:4px}.wheel-card i{position:absolute;right:9px;top:12px;border:2px solid #5f7c87;width:16px;height:16px;border-radius:50%}.wheel-card.active{border-color:var(--cyan);background:#1a353b}.wheel-card.active b,.wheel-card.active i{color:var(--cyan);border-color:var(--cyan)}.wheel-card.has-shim span{color:var(--gold)}.shim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}.shim-grid button{font:12px ui-monospace,Menlo,monospace;padding:8px 4px}.shim-grid button.active{background:#463a27;color:#ffd798;border-color:#a67c43}.primary{background:var(--cyan);color:#102c29;border-color:var(--cyan);font-weight:600}.primary:hover{background:#94eedf;color:#122924}.secondary{background:#263845;border-color:#405566}.quiet{background:transparent;font-size:11px}.full{width:100%}.stack{min-height:30px;margin:10px 0 4px;display:flex;gap:5px;flex-wrap:wrap}.stack button{padding:2px 7px;font:10px monospace;background:#493d2c;color:#ffdca2;border-color:#705d3c}.button-row{display:flex;gap:6px;margin-top:10px}.button-row>*{flex:1}.pair-details summary{font-size:11px;color:var(--muted);margin:12px 0 7px}.pair-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.pair-grid button{font-size:10px;padding:5px 2px}summary{cursor:pointer;list-style-position:inside}#apply-preset{margin-top:8px}.workspace{padding:24px 26px 15px;min-width:0}.intro-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px}.eyebrow{font:9px ui-monospace,Menlo,monospace;letter-spacing:1.5px;color:#8198aa;display:block;margin-bottom:5px}.geometry-source{font-size:10px;text-align:right;color:var(--muted);white-space:nowrap}.geometry-source b{color:#b8c8d5;font-weight:400}.stage-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:16px}.panel{border:1px solid var(--border);background:var(--panel);border-radius:11px;overflow:hidden}.panel-heading{padding:17px 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-heading h2 span{color:var(--cyan);font-size:12px;margin-left:6px}.icon-button{font-size:17px;padding:3px 9px;min-width:31px;line-height:1.7}.scene-viewport{height:300px;position:relative;background:radial-gradient(ellipse at 45% 45%,#26394a,#131e29)}.scene-viewport canvas{display:block;width:100%;height:100%;touch-action:none}.scene-note{position:absolute;bottom:9px;left:14px;font-size:9px;color:#8198a9;pointer-events:none;z-index:2}.scene-controls{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid var(--border);gap:5px}.scene-controls label{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:10px}.scene-controls select{display:inline-block;margin:0;width:85px;font-size:10px;padding:3px 6px}.scene-controls .micro{font-size:9px}.pose-readouts{display:grid;grid-template-columns:1fr 1fr 1.25fr;border-top:1px solid var(--border)}.pose-readouts>div{padding:11px 12px;border-right:1px solid var(--border)}.pose-readouts>div:last-child{border:0}.pose-readouts small{font-size:8.5px;display:block}.pose-readouts strong{font:12px ui-monospace,Menlo,monospace;display:block;margin-top:4px;color:#bededb}.compact{padding:2px}.compact button{font:9px inherit;padding:5px 7px;font-size:10px;white-space:nowrap}.chart-viewport{position:relative;margin:0 16px;aspect-ratio:3/2;background:#e9e9e4;border-radius:3px;overflow:hidden}.chart-viewport canvas{width:100%;height:100%;display:block;cursor:crosshair}#chart-region-label{position:absolute;z-index:2;bottom:7px;left:9px;background:#15202bd9;padding:3px 8px;color:#d7e0e7;border-radius:3px;font:8px ui-monospace,Menlo,monospace;pointer-events:none}.chart-toolbar{display:flex;gap:7px;align-items:center;padding:12px 16px 1px}.chart-toolbar label{display:flex;align-items:center;gap:6px;font-size:10px;white-space:nowrap}.chart-toolbar select{width:53px;display:inline;margin:0;padding:5px 3px;font-size:11px}.chart-toolbar button{font-size:10px;padding:6px 8px}.chart-caption{padding:0 16px 6px;font-size:9px}.focus-panel{margin-top:16px;padding:14px 18px;display:flex;align-items:center;gap:18px}.focus-title{flex-shrink:0}.focus-title h2{font-size:12px}.focus-title small{font-size:9px}.focus-slider-wrap{display:flex;align-items:center;gap:10px;flex:1;color:var(--muted)}.focus-slider-wrap input{width:100%}.focus-number{display:flex;align-items:center;gap:7px;color:var(--cyan)}.focus-number input{width:86px;text-align:right;font:15px ui-monospace,Menlo,monospace;padding:6px}.focus-number span{font-size:11px}.focus-number button{font-size:13px}.results-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:16px}.point-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 16px}.point{padding:9px 10px;text-align:left;background:#131f2a;border-left:3px solid var(--cyan);display:block;position:relative}.point .point-id{font:11px ui-monospace,Menlo,monospace;color:var(--cyan);position:absolute;right:9px;top:8px}.point strong{font:14px ui-monospace,Menlo,monospace;display:block;margin-top:14px}.point small{display:block;font-size:8px;color:var(--muted)}.point.selected{background:#253844;border-top-color:#557b8f;border-right-color:#557b8f;border-bottom-color:#557b8f}.map-legend{display:flex;align-items:center;gap:6px;padding:13px 16px;font-size:8px;color:var(--muted)}.map-legend small{margin-left:auto;font-size:8px}.legend-ramp{height:4px;width:42px;background:linear-gradient(90deg,var(--cyan),var(--gold),#ed826b);border-radius:4px}.dot{display:inline-block;width:5px;height:5px;border-radius:50%}.sharp{background:var(--cyan)}.soft{background:#ed826b}.analysis-panel{padding-bottom:12px}.analysis-panel .panel-heading{padding-bottom:8px}.main-stat{padding:4px 18px 6px;display:flex;align-items:center;justify-content:space-between;gap:10px}.main-stat>span{font-size:11px;color:var(--muted)}.main-stat strong{font:28px ui-monospace,Menlo,monospace;color:var(--cyan)}.main-stat strong small{font-size:12px}.effect-description{margin:7px 18px;color:#c2d2df;font-size:11px;min-height:38px}.diagonal-values{display:flex;padding:9px 18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);gap:20px;font:9px ui-monospace,Menlo,monospace;color:var(--muted)}.diagonal-values b{display:block;font-size:12px;margin-top:4px;color:var(--text)}.analysis-panel .button-row{margin-left:18px;margin-right:18px}.analysis-panel .button-row button{font-size:10px}.export-row{margin-top:4px}.analysis-panel #status-message{margin:5px 18px;display:block;font-size:9px}.settings-panel{margin-top:16px;padding:14px 18px}.settings-panel summary{font-size:11px;color:#b5c9d7}.settings-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:15px 0}.settings-grid label{font-size:10px}.model-note{margin-top:18px;color:var(--muted);font-size:11px;padding:0 4px}.model-note summary{font-size:11px}.model-note p{max-width:1000px}.source-links{display:flex;gap:18px;flex-wrap:wrap}a{color:#8cbccc;text-decoration:none}a:hover{text-decoration:underline}.app-footer{margin-top:24px;font:8px ui-monospace,Menlo,monospace;letter-spacing:1px;color:#637b8d;display:flex;justify-content:space-between}.app-footer span{letter-spacing:0}#error-banner{background:#542f30;padding:14px 25px;color:#ffccbf}.changed-better{color:var(--cyan)!important}.changed-worse{color:#ef9479!important}@media(min-width:1600px){.scene-viewport{height:360px}.chart-viewport{max-height:386px}}@media(max-width:1250px){.workspace{padding:22px 18px}.app-layout{grid-template-columns:250px minmax(0,1fr)}.sidebar{padding-left:15px;padding-right:15px}.stage-grid{grid-template-columns:1fr}.scene-viewport{height:300px}.chart-viewport{max-height:400px;aspect-ratio:3/2}.chart-panel .panel-heading{padding-bottom:14px}.chart-caption{margin-bottom:12px}.chart-toolbar{justify-content:flex-start}.focus-panel{flex-wrap:wrap;gap:10px}.focus-title{width:100%}.focus-title small{margin-left:10px}.focus-title h2{display:inline}.results-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:repeat(3,1fr)}.geometry-source{display:none}}@media(max-width:700px){.app-header{height:auto;min-height:76px;padding:16px}.brand strong{font-size:11px;letter-spacing:1.4px}.brand-symbol{font-size:33px}.brand small{font-size:9px}.header-tags .tag{display:none}.header-tags button{padding:6px 9px}.app-layout{display:flex;flex-direction:column}.workspace{order:0;padding:18px 12px}.sidebar{order:1;border-right:0;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:0 16px 20px}.control-section{padding:17px 0}.sidebar .control-section:nth-child(2){grid-row:1/3;grid-column:1}.sidebar .control-section:nth-child(1){grid-column:2;grid-row:1}.sidebar .control-section:nth-child(3){grid-column:2;grid-row:2/4}.sidebar .control-section:nth-child(4){grid-column:1;grid-row:3}.section-label{font-size:9px;gap:6px}.section-label span{font-size:10px}.segmented button{font-size:12px;padding:7px 5px}.shim-grid{grid-template-columns:repeat(3,1fr)}.two-fields{grid-template-columns:1fr;gap:8px}.wheel-card{padding:8px 6px}.wheel-card b{font-size:9px}.wheel-card i{display:none}.wheel-card span{font-size:11px}.button-row{flex-wrap:wrap}.sidebar button{font-size:10px}.wheel-row-label{font-size:10px}.sidebar .micro{font-size:9px}.intro-line h1{font-size:19px}.stage-grid{gap:12px}.scene-viewport{height:290px}.chart-viewport{margin:0 10px}.panel-heading{padding:14px 13px 11px}.panel-heading h2{font-size:13px}.panel-heading .micro{font-size:8px}.focus-panel{padding:12px}.focus-slider-wrap{min-width:100%}.focus-number{margin-left:auto}.point-grid{padding:0 10px;gap:6px}.point{padding:8px}.point strong{font-size:12px}.point small{font-size:7px}.map-legend{padding:12px 10px;flex-wrap:wrap}.map-legend small{margin-left:5px}.settings-grid{grid-template-columns:1fr 1fr}.app-footer{gap:10px;font-size:7px}.app-footer span{text-align:right}.chart-toolbar{padding-left:10px;padding-right:10px;gap:6px}.chart-toolbar button{font-size:9px;padding:6px}.compact button{font-size:9px}.compact{gap:1px}.scene-controls{padding:10px}.scene-controls .micro{font-size:8px}}

.scene-panel{display:flex;flex-direction:column}.scene-panel .scene-viewport{flex:1;min-height:340px}.scene-panel .pose-readouts{margin-top:auto}@media(max-width:700px){.scene-panel .scene-viewport{min-height:300px}}

.scene-scale-badge{position:absolute;top:11px;left:12px;right:12px;z-index:3;width:fit-content;max-width:calc(100% - 24px);padding:5px 9px;border:1px solid #47656b;border-radius:5px;background:#152831ee;color:#b9ece4;font:10px/1.5 -apple-system,Thonburi,sans-serif;pointer-events:none}.scene-scale-badge[data-mode="exaggerated"]{background:#46371cee;border-color:#a88443;color:#ffda93}.scene-controls #model-tilt-value{color:var(--cyan);font-family:ui-monospace,Menlo,monospace}
/* Independent shim seats on each CAD wire assembly. */
.end-options{margin:10px 0 8px}.end-options button{flex:1}.end-options small{display:block;font-size:10px;font-weight:400}.end-options [data-end=A].active{color:#61dccb}.end-options [data-end=B].active{color:#f4a66c}
.end-a{color:#61dccb}.end-b{color:#f4a66c}.wire-diagram{display:flex;align-items:center;gap:0;padding:9px 12px;background:#111e27;border-radius:8px;margin:9px 0}.wire-diagram span{font:600 13px ui-monospace,monospace;border:1px solid currentColor;border-radius:50%;padding:3px 7px}.wire-diagram i{height:2px;background:#81969e;flex:1}.wire-diagram b{border:3px solid #a8864d;background:#cea75e;color:#202b32;border-radius:6px;padding:5px 9px;font-size:12px}.support-stacks{display:grid;gap:8px;margin:12px 0}.support-stack{border:1px solid var(--border);border-radius:7px;padding:8px 10px}.support-stack>strong{font:600 12px ui-monospace,monospace}.support-stack .stack{margin:6px 0 0;min-height:24px}.wire-readout{display:grid;gap:5px;font-size:11px;margin:12px 0;color:var(--muted)}.wire-readout span{display:flex;justify-content:space-between;gap:8px}.wire-readout b{color:#c0d7d9;font:12px ui-monospace,monospace}.wire-readout small{font-size:10px}.scene-controls{flex-wrap:wrap;gap:8px 16px}.scene-controls .see-through{display:flex;align-items:center;gap:6px}.scene-controls input[type=checkbox]{width:15px;height:15px;accent-color:var(--cyan)}.wheel-card span{font-size:11px;white-space:nowrap}.scene-note{max-width:calc(100% - 25px);font-size:10px}
#chart-ff-frame{position:absolute;inset:3.125%;border:1px dashed #61dccbb0;z-index:2;pointer-events:none}#chart-ff-frame[hidden]{display:none}.chart-downloads{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;margin:0 18px 16px;color:var(--muted);font-size:11px}.chart-downloads a{color:var(--cyan);text-underline-offset:3px}.chart-downloads span{width:100%}
.brand-logo{width:52.8px;height:52.8px;flex:0 0 52.8px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}.brand-logo img{display:block;width:82%;height:auto;object-fit:contain}
.brand-title{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px}.app-version{color:var(--muted);font:10px ui-monospace,Menlo,monospace;letter-spacing:0;white-space:nowrap}
.aberration-toggles{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:0 16px 12px}.aberration-toggles label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);cursor:pointer}.aberration-toggles input{accent-color:var(--cyan);width:17px;height:17px;margin:0}.aberration-toggles small{color:var(--muted);font-size:10px}.aberration-toggles .micro{font-size:9px}
.aberration-panel{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:22px;padding:18px;margin-top:16px}.aberration-info h2{margin-top:4px}.aberration-info .micro{font-size:10px}.aberration-info details{margin-top:12px}.aberration-info summary{font-size:11px;color:#bdd3e0}.aberration-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.aberration-fields label{font-size:10px}.aberration-fields input{width:100%;min-width:0}.rgb-focus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:450px}.rgb-focus button{text-align:left;padding:8px 10px}.rgb-focus span{display:block;font-size:10px}.rgb-focus b{display:block;font:12px ui-monospace,Menlo,monospace;margin-top:6px;white-space:nowrap}.rgb-focus button:nth-child(1){border-top:2px solid #f29e9e}.rgb-focus button:nth-child(2){border-top:2px solid #83e0ac}.rgb-focus button:nth-child(3){border-top:2px solid #98b7fb}.psf-preview canvas{width:180px;height:180px;display:block;border:1px solid #385363;background:#000;border-radius:5px}.psf-preview label{display:flex;gap:7px;align-items:center;font-size:9px;margin-top:8px}.psf-preview select{font-size:10px;width:100px;padding:4px;margin:0}.psf-preview small{display:block;font-size:8px;color:var(--muted);margin-top:5px}.psf-orientation{display:block;text-align:center;font-size:9px;color:#a0bacb;margin-top:4px}
@media(max-width:700px){.brand-logo{width:41.6px;height:41.6px;flex-basis:41.6px}.aberration-panel{grid-template-columns:minmax(0,1fr);padding:14px;gap:15px}.psf-preview{width:180px;justify-self:center}.aberration-fields{gap:10px}.rgb-focus b{font-size:11px}.aberration-toggles{gap:12px;padding-left:10px}.aberration-toggles .micro{width:100%}}

.chart-viewport canvas:not([data-zoom="1"]){cursor:grab}.chart-viewport canvas.panning{cursor:grabbing}

/* The explanation follows the available panel width, including a narrow sidebar layout. */
.aberration-panel{display:block;padding:22px;container:aberration / inline-size}
.aberration-layout{display:grid;grid-template-columns:minmax(245px,1fr) 210px minmax(285px,1.25fr);gap:24px;align-items:start}
.aberration-info>.micro{font-size:12.5px;line-height:1.8;margin:12px 0}.aberration-info .rgb-focus{margin-top:18px;gap:7px}.aberration-info .rgb-focus button{padding:10px 8px}.aberration-info .rgb-focus b{font-size:12px}
.optics-try{padding-top:15px;margin-top:16px;border-top:1px solid var(--border)}.optics-try h3{font-size:12px;font-weight:600;margin:0 0 12px;color:#d1e0e9}.optics-try ol{list-style:none;padding:0;margin:0;counter-reset:try}.optics-try li{counter-increment:try;display:flex;gap:9px;margin:10px 0;font-size:12px;line-height:1.8;color:#a9bdcc}.optics-try li:before{content:counter(try);display:grid;place-items:center;width:21px;height:21px;flex:0 0 21px;border:1px solid #365256;border-radius:50%;font:10px ui-monospace,monospace;color:var(--cyan);margin-top:1px}.optics-try b{color:#d0e5e8;font-weight:550}
.aberration-layout .psf-preview{width:210px;justify-self:center}.aberration-layout .psf-preview canvas{width:210px;height:210px}.psf-caption{display:block;font-size:10px;letter-spacing:.2px;color:#abc2d0;margin-bottom:9px;text-align:center}.aberration-layout .psf-preview label{justify-content:space-between;margin-top:13px;font-size:10px}.aberration-layout .psf-preview small{font-size:9px;line-height:1.7}.aberration-layout #psf-method{font-size:9px;line-height:1.7;border-top:1px solid var(--border);padding-top:10px;margin-top:12px}
.aberration-explainer{padding-left:22px;border-left:1px solid var(--border)}.optics-explanation h3{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;line-height:1.6;margin:0 0 9px}.optics-explanation p{font-size:12.5px;line-height:1.85;color:#aebfcd;margin:7px 0}.optics-explanation strong{color:#d9e4eb;font-weight:550}.optics-explanation+.optics-explanation{margin-top:17px;padding-top:16px;border-top:1px solid var(--border)}.optics-explanation .optics-takeaway{font-size:10.5px;color:#d2bb94;border-left:2px solid #a78551;padding-left:10px;margin-top:11px}.optics-source{font-size:12px;color:#8cb8c4;white-space:nowrap}
.optics-mark{display:inline-block;width:19px;height:14px;position:relative;flex:0 0 19px}.ca-mark{background:radial-gradient(circle at 30% 50%,#ee9191 0 4px,transparent 4.5px),radial-gradient(circle at 52% 50%,#80dbae 0 4px,transparent 4.5px),radial-gradient(circle at 78% 50%,#97b8ff 0 4px,transparent 4.5px)}.coma-mark{background:radial-gradient(circle at 5px 7px,#ffe2a6 0 3px,transparent 4px),linear-gradient(90deg,transparent 3px,#b99b6090 6px,transparent 100%);border-radius:50%}
.aberration-panel>#aberration-settings{border-top:1px solid var(--border);padding-top:14px;margin-top:20px}.aberration-panel>#aberration-settings>summary{font-size:11px;color:#bdd3e0;cursor:pointer}.aberration-panel>.aberration-footnote{font-size:10px;color:#849daf;margin:10px 0 0}.aberration-panel .aberration-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
@container aberration (max-width:900px){.aberration-layout{grid-template-columns:minmax(0,1fr) 210px;gap:22px}.aberration-explainer{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:24px;border-left:0;border-top:1px solid var(--border);padding:20px 0 0}.optics-explanation+.optics-explanation{margin:0;padding:0 0 0 24px;border-top:0;border-left:1px solid var(--border)}.aberration-panel .aberration-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container aberration (max-width:560px){.aberration-layout{grid-template-columns:minmax(0,1fr);gap:24px}.aberration-explainer{grid-template-columns:1fr;gap:0}.optics-explanation+.optics-explanation{margin-top:17px;padding:17px 0 0;border-left:0;border-top:1px solid var(--border)}.aberration-panel .aberration-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.aberration-info>.micro,.optics-explanation p{font-size:12px}.optics-try li{font-size:12px}}
@media(max-width:700px){.aberration-panel{padding:17px}}

/* Center the aspect-ratio viewport when its height cap limits its width. */
.chart-viewport{margin-inline:auto;max-width:calc(100% - 32px)}
@media(max-width:700px){.chart-viewport{max-width:calc(100% - 20px)}}

/* Focus help floats above the chart panel without obscuring the whole workspace. */
.chart-toolbar{flex-wrap:wrap}
.chart-toolbar .focus-help-button{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border-color:transparent;background:transparent;color:var(--muted);border-radius:50%}
.chart-toolbar .focus-help-button:hover,.chart-toolbar .focus-help-button[aria-expanded="true"]{color:var(--cyan);background:#213941;border-color:#426368}
.focus-help-button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.focus-help{position:fixed;inset:auto;margin:0;width:350px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);box-sizing:border-box;overflow:auto;padding:18px;background:#192b37;color:#d4e0e9;border:1px solid #47616f;border-radius:10px;box-shadow:0 12px 36px #0008;z-index:20;font-size:12px;line-height:1.8;text-align:left}
.focus-help[hidden]{display:none}
.focus-help::backdrop{background:transparent;pointer-events:none}
.focus-help-section strong{display:block;color:var(--cyan);font-size:13px}
.focus-help p{margin:6px 0 0}
.focus-help .focus-help-detail{color:#a7bccb;font-size:11px}
.focus-help-section+.focus-help-section{margin-top:14px;padding-top:13px;border-top:1px solid #354d5c}
.focus-help .focus-help-note{margin-top:14px;padding-top:12px;border-top:1px solid #354d5c;color:#a7bccb;font-size:11px}
@media(pointer:coarse){.chart-toolbar .focus-help-button{flex-basis:44px;width:44px;height:44px}}

/* A second view compares the same optical state with an independent position. */
.chart-panel{container:chart / inline-size}
.chart-compare-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:0 16px 12px}
.chart-compare-controls label{display:flex;align-items:center;gap:7px;font-size:.75rem;color:var(--text);cursor:pointer;min-height:28px}
.chart-compare-controls input{margin:0;width:16px;height:16px;accent-color:var(--cyan)}
#chart-split-options{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
#chart-split-options[hidden],.chart-pane[hidden]{display:none}
.chart-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.chart-pane{min-width:0}
.chart-pane-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px 9px}
.chart-pane-toolbar label{display:flex;align-items:center;gap:8px;font-size:.6875rem}
.chart-pane-toolbar select{display:inline;width:58px;margin:0;padding:4px 6px;font-size:.75rem;min-height:28px}
.chart-pane-toolbar [data-activate-pane]{display:none;min-height:28px;font-size:.6875rem;padding:3px 9px}
.chart-panes.is-split{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:16px}
.is-split .chart-pane{border:1px solid var(--border);border-radius:6px;overflow:hidden;padding-top:8px;background:#111b25}
.is-split .chart-pane.is-active{border-color:var(--cyan)}
.is-split .chart-pane-toolbar{padding-inline:9px;gap:4px}
.is-split .chart-pane-toolbar [data-activate-pane]{display:block}
.is-split [data-activate-pane][aria-pressed="true"]{background:#244340;border-color:#426b64;color:var(--cyan)}
.is-split .chart-pane-toolbar label{font-size:.625rem;gap:4px}
.is-split .chart-viewport{width:100%;max-width:100%;margin:0;border-radius:0}
.chart-region-label{position:absolute;z-index:2;bottom:7px;left:9px;background:#15202bd9;padding:3px 8px;color:#d7e0e7;border-radius:3px;font:.5rem ui-monospace,Menlo,monospace;pointer-events:none}
.chart-ff-frame{position:absolute;inset:3.125%;border:1px dashed #61dccbb0;z-index:2;pointer-events:none}
.chart-ff-frame[hidden]{display:none}
.chart-active-caption{margin:9px 16px 0;font-size:.625rem;color:var(--cyan)}
.chart-active-caption:empty{display:none}
.chart-viewport canvas:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.chart-resolution-status{display:none;position:absolute;z-index:2;top:7px;right:7px;padding:3px 7px;background:#15202be8;border-radius:3px;color:#d7e0e7;font-size:.5625rem;pointer-events:none}
.chart-viewport:has(canvas[data-raster="pending"]) .chart-resolution-status{display:block}
@container chart (max-width:460px){.chart-panes.is-split{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.chart-compare-controls{padding-inline:10px}.chart-panes.is-split{margin-inline:10px}.chart-pane-toolbar{padding-inline:10px}.chart-active-caption{margin-inline:10px}}
@media(pointer:coarse){.chart-compare-controls label{min-height:36px}.chart-pane-toolbar select,.chart-pane-toolbar [data-activate-pane]{min-height:36px}}
@media(forced-colors:active){.is-split .chart-pane.is-active{border-color:Highlight}}
