:root{color-scheme:dark;--bg:#071b25;--panel:#102b36;--line:#34545f;--ink:#ecf6f4;--muted:#afc9cd;--mint:#a1efdd;--gold:#ffd09a}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 8% 0,#17424c,var(--bg) 65%);font:1rem/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:var(--mint)}button,input{font:inherit}button{min-height:44px;padding:8px 12px;background:#173844;border:1px solid #5a7b84;border-radius:8px;color:var(--ink);cursor:pointer}button:hover:not(:disabled){background:#2a5059}button:disabled{opacity:.5;cursor:default}.primary{background:var(--mint);border-color:var(--mint);color:#092b30;font-weight:700}.primary:hover:not(:disabled){background:#ccffed}button[aria-pressed=true]{background:#2b584e;box-shadow:inset 0 0 0 1px var(--mint);border-color:var(--mint)}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.top{min-height:50px;padding:6px 22px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:7px;font-size:1.25rem;font-weight:750;color:var(--ink);text-decoration:none}.brand span{color:var(--mint);margin-left:-7px}.top nav{display:flex;gap:22px;font-size:.875rem}.top nav a{text-decoration:none}.skip{position:absolute;top:-60px;z-index:10;background:var(--mint);color:var(--bg);padding:10px}.skip:focus{top:0}main{max-width:1440px;margin:auto;padding:12px 22px 6px}.heading{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:12px}.eyebrow{font-size:.75rem;letter-spacing:.11em;color:var(--mint);margin:0 0 4px;font-weight:650}h1{font-size:2.2rem;line-height:1.12;letter-spacing:-.035em;margin:0}h1 em{font-family:Georgia,serif;color:var(--gold);font-weight:400}.heading>p{color:var(--muted);font-size:.9375rem;margin:0}.journey{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:0 0 11px;gap:7px}.journey li{font-size:.875rem;border-bottom:2px solid var(--line);padding:7px 9px;color:var(--muted)}.journey span{color:var(--gold);margin-right:7px;font-size:.75rem}.journey [aria-current]{color:var(--ink);border-color:var(--mint);background:#15363e;border-radius:7px 7px 0 0}.journey li.done:after{content:' ✓';color:var(--mint)}.bench{display:grid;grid-template-columns:230px minmax(300px,1fr) 330px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#0b222d}.column-panel,.image-panel{min-width:0;padding:12px;border-right:1px solid var(--line)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:9px}.panel-head h2{font-size:.9375rem;margin:0}.panel-head button{font-size:.75rem;min-height:32px;padding:5px 8px}.column-panel .panel-head{flex-wrap:wrap;gap:4px}.badge{font-size:.75rem;letter-spacing:.03em;color:var(--gold);white-space:nowrap}#column{width:100%;height:clamp(300px,calc(100svh - 300px),490px);display:block}.diagram-note{font-size:.75rem;color:var(--muted);margin:8px 0 0;text-align:center}.screen{background:#040e15;border:1px solid #45636d;border-radius:9px;position:relative;display:grid;place-items:center;height:clamp(265px,calc(100svh - 345px),440px);overflow:hidden}#image{display:block;width:100%;height:100%;object-fit:contain}#screen-note{position:absolute;bottom:8px;left:8px;padding:4px 8px;border:1px solid #4a6b76;border-radius:5px;background:#09232cee;font-size:.75rem;pointer-events:none}.image-actions{display:flex;gap:8px;margin-top:10px}.image-actions button{flex:1;font-size:.875rem}.image-note{font-size:.8rem;color:var(--muted);margin:8px 0 0}.mission-panel{padding:16px;min-width:0;max-height:calc(100svh - 222px);min-height:420px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b989b #0b222d;scrollbar-gutter:stable}.mission-panel h2{font-size:1.35rem;line-height:1.2;margin:0 0 8px}.goal{font-size:1rem;margin:0 0 9px;color:var(--ink)}#instruction{font-size:.875rem;color:var(--muted);margin:0 0 14px}fieldset{min-width:0;border:0;padding:0;margin:0}legend{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}label{display:block;font-size:.875rem;margin-top:11px}output{float:right;color:var(--mint);font-variant-numeric:tabular-nums}input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;width:100%;height:32px;cursor:pointer;margin:0;display:block}input[type=range]::-webkit-slider-runnable-track{height:6px;background:#526c78;border-radius:8px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:2px solid #d8fff4;border-radius:50%;background:#79d8c8;margin-top:-5.5px}input[type=range]::-moz-range-track{height:6px;background:#526c78;border-radius:8px}input[type=range]::-moz-range-thumb{width:15px;height:15px;border:2px solid #d8fff4;border-radius:50%;background:#79d8c8}.ends{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}.control-note{font-size:.875rem;color:var(--muted);margin:12px 0}.apertures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.apertures button{font-size:.875rem;min-width:0;padding:8px 4px}#status{font-size:.875rem;line-height:1.4;color:var(--gold);margin:14px 0 8px}#answer{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}#answer legend{padding-top:12px;text-transform:none;font-size:.875rem;letter-spacing:0}#answer label{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:7px;min-height:44px;padding:7px 9px;margin-top:7px}#answer label:has(input:checked){border-color:var(--mint);background:#22483f}#answer input{accent-color:var(--mint);width:17px;height:17px;flex-shrink:0}#check,#next,#new-round{width:100%;margin-top:10px;font-size:.875rem}#result{background:#183c35;border:1px solid #628c78;border-radius:9px;padding:12px;margin-top:12px}#result h3{font-size:1.12rem;margin:0 0 7px}#result p{font-size:.875rem;margin:5px 0}#tem-link{display:block;font-size:.875rem;margin-top:10px}.tools{display:flex;gap:7px;margin-top:12px}.tools button{font-size:.8rem;flex:1}#hint-text{font-size:.875rem;color:var(--muted);padding:9px 10px;border-left:3px solid var(--gold);background:#17323d;margin:10px 0}footer{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:3px}footer button{border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:.8rem;padding:4px;min-height:36px}#load-status:empty{display:none}#load-status{font-size:.875rem}dialog{width:calc(100% - 28px);max-width:620px;max-height:85svh;overflow:auto;background:var(--panel);color:var(--ink);border:1px solid #66878c;border-radius:14px;padding:24px}dialog::backdrop{background:#020a0ddc}dialog h2{font-size:1.5rem}dialog p{color:var(--muted)}.close{float:right;width:44px;font-size:1.4rem;padding:0}
@media(min-width:981px) and (max-height:700px){main{padding-top:9px}.heading{margin-bottom:6px}.heading>p{display:none}h1{font-size:1.9rem}.journey{margin-bottom:8px}.journey li{padding-block:5px}.bench{grid-template-columns:210px minmax(300px,1fr) 340px}.mission-panel{min-height:370px;max-height:calc(100svh - 210px);padding:12px 14px}#column{height:290px}.screen{height:270px}.column-panel,.image-panel{padding:9px}.goal{font-size:.9375rem}.mission-panel h2{font-size:1.2rem}#instruction{margin-bottom:10px}.image-note{font-size:.75rem}}
@media(max-width:1100px){.bench{grid-template-columns:180px minmax(260px,1fr) 305px}.heading>p{max-width:280px}main{padding-inline:14px}.column-panel{padding-inline:8px}}
@media(max-width:980px){main{padding:10px 12px}.heading>p{display:none}.bench{grid-template-columns:150px minmax(0,1fr)}.mission-panel{grid-column:1/-1;border-top:1px solid var(--line);min-height:0;max-height:none;overflow:visible;padding:16px}.column-panel{padding:8px}.image-panel{border-right:0}#column{height:290px}.screen{height:260px}.image-note{font-size:.8rem}.journey li{font-size:.8rem}.mission-panel #controls{max-width:580px}.mission-panel .tools{max-width:450px}.mission-panel #result{max-width:650px}.apertures{grid-template-columns:repeat(5,minmax(0,1fr))}.heading h1{font-size:1.9rem}.top{padding:6px 12px}}
@media(max-width:520px){.bench{grid-template-columns:102px minmax(0,1fr)}.column-panel{padding:6px}.column-panel .panel-head h2{font-size:.75rem}.column-panel .panel-head button{font-size:.75rem;padding:4px 5px;min-height:36px}.image-panel{padding:8px}.image-panel .panel-head{flex-wrap:wrap;gap:4px}.panel-head h2{font-size:.875rem}.badge{font-size:.75rem}.screen{height:215px}#column{height:250px}.diagram-note{font-size:.75rem}.image-actions{flex-direction:column;gap:5px}.image-actions button{font-size:.8rem;min-height:42px;padding:6px}.image-note{font-size:.75rem}.heading h1{font-size:1.9rem}.eyebrow{font-size:.75rem;letter-spacing:.05em}.journey{gap:4px}.journey li{padding:6px 5px;font-size:.75rem}.journey span{display:block;font-size:.75rem;margin:0}footer{justify-content:center}footer>span{width:100%;text-align:center}.top nav{gap:14px;font-size:.875rem}.brand{font-size:1.1rem}.apertures{grid-template-columns:repeat(3,minmax(0,1fr))}#screen-note{font-size:.75rem;left:4px;right:4px;bottom:4px;padding:3px 4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}h1,h2,button,label,legend{overflow-wrap:anywhere}.heading{flex-wrap:wrap}.heading>div{min-width:0}

.screen #image{position:absolute;inset:0;min-width:0;min-height:0}

.beam-sides{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.beam-sides button{flex:1;font-size:.875rem}.stigmation #screen-note{display:none}.stigmation .screen{min-height:300px}@media(max-width:520px){.stigmation .screen{height:360px;min-height:360px}.journey{grid-template-columns:repeat(2,1fr)}}

/* On-demand column explorer keeps the actual image and controls in one workspace. */
#inspect-column{width:100%;margin-top:9px;font-size:.875rem}
#column-inspector{width:calc(100% - 24px);max-width:1440px;max-height:94dvh;padding:0;background:#09212c;overscroll-behavior:contain}
.inspector-header{position:sticky;top:0;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:#0d2934f5;border-bottom:1px solid var(--line)}
.inspector-header h2{font-size:1.4rem;line-height:1.2;margin:0}.inspector-header>div{min-width:0}.inspector-header button{flex-shrink:0}
.inspector-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,1fr);align-items:start}
.cutaway-panel{min-width:0;padding:16px;border-right:1px solid var(--line)}.cutaway-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.cutaway-heading h3{font-size:1rem;margin:0}
.cutaway-stage{position:relative;height:clamp(340px,55dvh,600px);margin:12px 0;border:1px solid #3a5966;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#1b3848,#040e18)}
#column-scene,#column-fallback{position:absolute;inset:0}#column-scene{z-index:1}#column-scene canvas{display:block;width:100%;height:100%;touch-action:none}
#column-fallback{display:grid;place-items:center;padding:12px;background:#071b26}
#inspector-diagram{height:100%;width:min(100%,360px);display:block;min-height:0}
#cutaway-boundary{font-size:.8125rem;color:#bdd7d8;margin:8px 0 12px}#cutaway-description{font-size:.9375rem;color:#e1f3ed;padding:12px;border-left:3px solid var(--mint);background:#123440}
.cutaway-views,.cutaway-turns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.cutaway-views button{font-size:.8125rem;flex:1 1 100px}.cutaway-turns button{min-width:44px}
#cutaway-load{font-size:.8125rem;min-height:1.3em;margin:9px 0;color:var(--muted)}
.cutaway-parts,.cutaway-limits{margin-top:12px;border-top:1px solid var(--line);padding-top:9px;font-size:.875rem}.cutaway-parts summary,.cutaway-limits summary{cursor:pointer;min-height:36px;color:var(--mint)}.cutaway-parts>div{display:flex;flex-wrap:wrap;gap:6px}.cutaway-parts button{font-size:.8125rem}.cutaway-parts p,.cutaway-limits p{line-height:1.5}
.inspector-work{min-width:0;position:sticky;top:var(--inspector-header-height,90px);max-height:calc(94dvh - var(--inspector-header-height,90px) - 4px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6b989b #0b222d}.inspector-work>.image-panel{position:sticky;top:0;z-index:4;background:#0b2632;width:100%;border-right:0;border-bottom:1px solid var(--line);padding:14px}.inspector-work .screen{height:clamp(280px,34dvh,340px);min-height:280px}.inspector-work>.mission-panel{max-height:none;min-height:0;overflow:visible;border:0;padding:16px}.inspector-work #inspect-column{display:none}.inspector-work .image-actions{flex-direction:row}.inspector-work #result{scroll-margin:100px}
@media(max-width:760px){#column-inspector{width:calc(100% - 12px);max-height:96dvh}.inspector-header{padding:10px 12px}.inspector-header h2{font-size:1.15rem}.inspector-layout{grid-template-columns:1fr}.cutaway-panel{padding:12px;border-right:0;border-bottom:1px solid var(--line)}.cutaway-stage{height:400px}.cutaway-views button{flex-basis:40%;font-size:.875rem}.inspector-work{position:static;max-height:none;overflow:visible}.inspector-work>.image-panel{position:sticky;top:var(--inspector-header-height,77px);z-index:4;background:#0b2632;padding:10px}.inspector-work .screen{height:280px;min-height:280px}.inspector-work>.mission-panel{padding:14px}#cutaway-description{margin-bottom:8px}}
@media(min-width:1200px){.inspector-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) minmax(280px,.7fr)}.cutaway-panel{position:sticky;top:var(--inspector-header-height,90px);max-height:calc(94dvh - var(--inspector-header-height,90px) - 4px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.inspector-work{display:contents}.inspector-work>.image-panel{top:var(--inspector-header-height,90px);border-right:1px solid var(--line);border-bottom:0}.inspector-work .screen{height:clamp(320px,calc(94dvh - var(--inspector-header-height,90px) - 154px),540px);min-height:320px}.inspector-work>.mission-panel{position:sticky;top:var(--inspector-header-height,90px);max-height:calc(94dvh - var(--inspector-header-height,90px) - 4px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.cutaway-stage{height:clamp(340px,55dvh,600px)}}
.large-text .inspector-layout{grid-template-columns:1fr}.large-text .inspector-work{display:block;position:static;max-height:none;overflow:visible}.large-text .inspector-work>.image-panel{position:static}.large-text .cutaway-panel{position:static;max-height:none;overflow:visible;border-right:0}.large-text .inspector-work>.mission-panel{position:static;max-height:none;overflow:visible}.large-text .inspector-work>.image-panel{border-right:0}.large-text .inspector-header{flex-wrap:wrap}
@media(max-height:600px){.inspector-work{position:static;max-height:none;overflow:visible}.inspector-work>.image-panel{position:static}.cutaway-stage{height:320px}}
