:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:#000;--surface:#101014;--surface-raised:#18181d;--surface-glass:#1c1c20c2;--ink:#f5f5f7;--ink-soft:#a1a1a6;--ink-faint:#6e6e73;--line:#ffffff1c;--line-strong:#fff3;--accent:#2997ff;--accent-bright:#64b5ff;--accent-soft:#2997ff24;--success:#30d158;--danger:#ff453a;--radius-sm:.75rem;--radius-md:1.25rem;--radius-lg:2rem;--shadow:0 24px 80px #0000006b;--font-sans:-apple-system, blinkmacsystemfont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", arial, sans-serif}*{box-sizing:border-box}html{background:var(--canvas);scroll-behavior:smooth}body{background:radial-gradient(circle at 50% -18rem, #37549647, transparent 42rem), var(--canvas);min-width:20rem;min-height:100vh;color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:1rem;line-height:1.5}main{width:min(100%,90rem);margin:0 auto;padding:0 1.25rem 5rem}.site-header{z-index:20;justify-content:space-between;align-items:center;height:3.5rem;display:flex;position:sticky;top:0}.site-header__shortcut{background:var(--accent-soft);min-height:2rem;color:var(--accent-bright);border-color:#2997ff59;padding:.3rem .75rem;font-size:.75rem;font-weight:650}.site-brand{align-items:center;gap:.55rem;width:fit-content;display:flex}.site-brand__mark{background:conic-gradient(from 30deg,#7cc4ff,#147ce5,#0a3478,#63b4ff,#147ce5,#7cc4ff);border:1px solid #ffffff38;border-radius:.45rem;width:1.45rem;height:1.45rem;display:block;position:relative;box-shadow:0 0 16px #2997ff38}.site-brand__mark:after{content:"";background:#08111f;border:1px solid #ffffff8c;border-radius:50%;position:absolute;inset:.4rem}.site-brand h1{letter-spacing:-.025em;margin:0;font-size:1rem;font-weight:650}.site-brand__descriptor{border-left:1px solid var(--line-strong);color:var(--ink-faint);margin-left:.1rem;padding-left:.65rem;font-size:.82rem;font-weight:500}main:before{content:"";z-index:15;border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);pointer-events:none;background:#000000b8;height:3.5rem;position:fixed;inset:0 0 auto}#root{animation:.7s cubic-bezier(.2,.8,.2,1) both page-enter}h1,h2,h3,p{text-wrap:pretty}h2,h3{color:var(--ink);letter-spacing:-.035em;margin-top:0;line-height:1.08}h2{font-size:clamp(2rem,4.2vw,4.25rem);font-weight:650}h3{font-size:1.15rem;font-weight:650}button,input{font:inherit}button{border:1px solid var(--line-strong);min-height:2.75rem;color:var(--ink);cursor:pointer;background:#ffffff12;border-radius:999px;padding:.55rem 1rem;transition:background-color .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}button:hover:not(:disabled){background:#ffffff21;border-color:#ffffff52;transform:translateY(-1px)}button:active:not(:disabled){transform:scale(.98)}button:disabled{opacity:.34;cursor:not-allowed}button:focus-visible,input:focus-visible,[role=radio]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}fieldset{border:0;min-width:0;margin:0}legend{color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;padding:0 .35rem;font-size:.78rem;font-weight:650}.opening{border:1px solid var(--line);border-radius:var(--radius-lg);min-height:calc(100vh - 5rem);box-shadow:var(--shadow);background:radial-gradient(circle at 78% 14%,#4980ff5c,#0000 25rem),radial-gradient(circle at 62% 38%,#7949ff2b,#0000 24rem),linear-gradient(145deg,#111116 0%,#050506 58%);flex-direction:column;gap:clamp(2.5rem,6vw,5rem);padding:clamp(3.5rem,8vw,7.5rem) clamp(1rem,5vw,5rem) 4rem;display:flex;position:relative;overflow:hidden}.opening:before,.opening:after{content:"";pointer-events:none;filter:blur(2px);border-radius:50%;position:absolute}.opening:before{aspect-ratio:1;border:1px solid #ffffff2b;width:clamp(10rem,24vw,22rem);animation:8s ease-in-out infinite lens-float;top:8%;right:8%;box-shadow:inset 0 0 4rem #2997ff2e,0 0 7rem #2997ff21}.opening:after{aspect-ratio:1;background:radial-gradient(circle at 38% 32%,#9ed0ff 0,#1d55b8 22%,#0a1021 60%,#000 100%);width:clamp(5rem,12vw,11rem);animation:6s ease-in-out infinite lens-glow;top:calc(8% + clamp(2.5rem,6vw,5.5rem));right:calc(8% + clamp(2.5rem,6vw,5.5rem));box-shadow:0 0 3rem #3687ff4d}.opening__intro,.opening__principles,.opening__how-to{z-index:2;position:relative}.opening__intro{max-width:50rem}.opening__intro h2{letter-spacing:-.065em;color:#0000;background:linear-gradient(108deg,#fff 25%,#b5c8ef 58%,#7d91bc 100%);-webkit-background-clip:text;background-clip:text;max-width:13ch;margin:.75rem 0 1.25rem;padding-bottom:.08em;font-size:clamp(3rem,7.2vw,6.8rem);line-height:1}.opening__lead{max-width:43rem;color:var(--ink-soft);margin:0;font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.45}.opening__scroll-cue{width:fit-content;color:var(--ink-faint);letter-spacing:.11em;text-transform:uppercase;align-items:center;gap:.65rem;margin-top:2rem;font-size:.7rem;font-weight:650;display:flex}.opening__scroll-cue span{background:var(--line-strong);width:1.8rem;height:1px;position:relative;overflow:hidden}.opening__scroll-cue span:after{content:"";background:var(--accent-bright);animation:2.2s ease-in-out infinite scroll-cue;position:absolute;inset:0;transform:translate(-110%)}.opening__principles{gap:.75rem;display:grid}.opening__principles article{border:1px solid var(--line);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffff0d;min-height:12rem;padding:1.5rem;transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s,border-color .3s}.opening__principles article:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-5px)}.opening__step-number{background:var(--accent-soft);width:2.25rem;height:2.25rem;color:var(--accent-bright);border-radius:50%;place-items:center;margin-bottom:2rem;font-size:.78rem;font-weight:700;display:inline-grid}.opening__principles h3{margin-bottom:.65rem}.opening__principle-copy{color:var(--ink-soft);margin:0;font-size:.92rem}.opening__how-to{border-top:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:1.5rem;padding-top:2rem;display:flex}.opening__how-to h3{margin-bottom:.75rem}.opening__how-to ol{color:var(--ink-soft);margin:0;padding-left:1.25rem}@supports (animation-timeline:view()){.opening [data-scroll-reveal]{will-change:opacity, transform;animation:linear both opening-section-reveal;animation-timeline:view();animation-range:entry}}.opening__start{border-color:var(--accent);background:var(--accent);color:#fff;min-height:3.35rem;padding:.8rem 1.45rem;font-weight:650;box-shadow:0 8px 24px #2997ff38}.opening__start:hover:not(:disabled){border-color:var(--accent-bright);background:var(--accent-bright);box-shadow:0 12px 34px #2997ff57}.tutorial,.challenge-section,.simulator-app{flex-direction:column;gap:1.5rem;display:flex}.tutorial,.challenge-section{padding-top:2rem}.tutorial__progress{grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.tutorial__progress li{border:1px solid var(--line);min-width:0;color:var(--ink-faint);white-space:nowrap;border-radius:999px;font-size:.72rem;position:relative;overflow:hidden}.tutorial__progress button{z-index:1;width:100%;min-height:3rem;color:inherit;font:inherit;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;align-items:center;gap:.5rem;padding:.55rem .7rem;display:flex;position:relative;overflow:hidden}.tutorial__progress button:not(:disabled){cursor:pointer}.tutorial__progress button:disabled{opacity:1}.tutorial__progress button:focus-visible{border-radius:inherit;outline:3px solid var(--accent);outline-offset:-3px}.tutorial__progress li[data-state=complete]:has(button:not(:disabled)):hover{background:#30d15812;border-color:#30d15880}.tutorial__progress li:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff0f,#0000);position:absolute;inset:0;transform:translate(-110%)}.tutorial__progress li button span{background:#ffffff12;border-radius:50%;flex:0 0 1.5rem;place-items:center;width:1.5rem;height:1.5rem;font-size:.7rem;font-weight:700;display:grid}.tutorial__progress li[data-state=current]{background:var(--accent-soft);color:var(--ink);border-color:#2997ff73}.tutorial__progress li[data-state=current]:before{animation:3.5s ease-in-out infinite progress-shine}.tutorial__progress li[data-state=current] button span{background:var(--accent);color:#fff}.tutorial__progress li[data-state=complete]{color:var(--ink-soft)}.tutorial__progress li[data-state=available]{color:var(--ink-soft);border-color:#2997ff40}.tutorial__progress li[data-state=available]:hover{background:var(--accent-soft);border-color:#2997ff85}.tutorial__progress li[data-state=complete] button span{background:var(--success);color:#001807}.tutorial__header{max-width:76rem;padding:clamp(2rem,4vw,3.5rem) 0 1rem}.tutorial__header h2,.challenge-section__header h2{max-width:18ch;margin:.45rem 0 1.25rem}.tutorial__header p{max-width:54rem;margin:.55rem 0}.tutorial__eyebrow{color:var(--accent-bright);letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700}.tutorial__purpose{color:var(--ink-soft);font-size:clamp(1.05rem,1.8vw,1.3rem)}.tutorial__goal{background:var(--accent-soft);color:#d7ebff;border:1px solid #2997ff40;border-radius:999px;width:fit-content;padding:.65rem 1rem;margin-top:1rem!important}.tutorial__details{border-top:1px solid var(--line);width:min(100%,34rem);color:var(--ink-soft);margin-top:1rem;padding-top:.8rem}.tutorial__details summary{width:fit-content;color:var(--accent-bright);cursor:pointer;font-size:.82rem;font-weight:650;list-style-position:outside}.tutorial__details summary:hover{color:#b9dcff}.tutorial__details summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:.25rem}.tutorial__details[open] summary{margin-bottom:.65rem}.tutorial__tradeoff{color:var(--ink-soft);font-size:.9rem;animation:.22s ease-out both answer-reveal;margin:0!important}.tutorial-concept{border:1px solid var(--line-strong);background:#ffffff08;border-radius:1.25rem;width:min(100%,38rem);margin:1rem 0 0;overflow:hidden}.tutorial-concept__heading{border-bottom:1px solid var(--line);flex-direction:column;gap:.25rem;padding:1rem 1rem .8rem;display:flex}.tutorial-concept__heading strong{color:var(--ink);font-size:.98rem}.tutorial-concept__heading span{color:var(--ink-soft);font-size:.82rem;line-height:1.45}.concept-before-after{grid-template-columns:minmax(0,1fr) 1.5rem minmax(0,1fr);align-items:center;gap:.5rem;padding:.9rem 1rem;display:grid}.concept-example{color:var(--ink-soft);text-align:center;flex-direction:column;align-items:center;gap:.22rem;font-size:.72rem;display:flex}.concept-example strong{color:var(--ink);margin-top:.2rem;font-size:.82rem}.concept-arrow{color:var(--accent-bright);text-align:center;font-size:1.4rem;animation:1.4s ease-in-out infinite teaching-arrow}.concept-scene,.concept-motion{background:linear-gradient(#214b72 0 55%,#16222a 55%);border:1px solid #ffffff1f;border-radius:.8rem;width:100%;height:5rem;position:relative;overflow:hidden}.concept-scene--dark{filter:brightness(.42)}.concept-scene--bright-grain{filter:brightness(1.12)}.concept-scene__sun{background:#ffd873;border-radius:50%;width:.7rem;height:.7rem;position:absolute;top:.7rem;right:.8rem}.concept-scene__mountain{clip-path:polygon(0 100%,45% 10%,65% 55%,78% 34%,100% 100%);background:#213c4d;width:75%;height:2.5rem;position:absolute;bottom:.8rem;left:-.4rem}.concept-scene__person{background:#dcecff;border-radius:999px 999px .2rem .2rem;width:.55rem;height:1.55rem;position:absolute;bottom:.65rem;right:28%}.concept-scene__person:before{content:"";background:#dcecff;border-radius:50%;width:.7rem;height:.7rem;position:absolute;top:-.48rem;left:-.08rem}.concept-scene__grain{opacity:.8;background-image:radial-gradient(circle at 15% 22%,#ff9d70 0 1px,#0000 1.5px),radial-gradient(circle at 72% 38%,#79c5ff 0 1px,#0000 1.5px),radial-gradient(circle at 42% 76%,#fff 0 1px,#0000 1.5px);background-size:11px 13px,15px 17px,19px 21px;animation:.7s steps(2,end) infinite teaching-grain;position:absolute;inset:0}.concept-lens{background:#06080c;border:.55rem solid #252b35;border-radius:50%;place-items:center;width:5rem;height:5rem;display:grid;position:relative;box-shadow:inset 0 0 0 2px #ffffff2e}.concept-lens i{background:#2997ff47;border:2px solid #8ed0ff;border-radius:50%;display:block;box-shadow:0 0 14px #2997ff7a}.concept-lens--small i{width:.7rem;height:.7rem}.concept-lens--wide i{width:2.9rem;height:2.9rem;animation:2s ease-in-out infinite teaching-aperture}.concept-motion{background:linear-gradient(#0000 65%,#fff3 66% 68%,#0000 69%),#111820;align-items:center;display:flex}.concept-runner{z-index:2;font-size:2.1rem;position:absolute;left:56%;transform:translate(-50%)}.concept-motion--frozen .concept-runner{animation:2s ease-in-out infinite teaching-freeze}.concept-motion--trail .concept-runner{animation:1.8s ease-in-out infinite teaching-motion}.concept-motion--trail i{background:linear-gradient(90deg,#0000,#8ed0ff6b);border-radius:999px;width:35%;height:.55rem;animation:1.8s ease-in-out infinite teaching-trail;position:absolute;left:24%}.concept-motion--trail i:nth-child(2){animation-delay:-.2s;translate:0 1rem}.concept-equation{grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:.45rem;padding:.9rem 1rem;display:grid}.concept-equation>div{border:1px solid var(--line);text-align:center;background:#ffffff08;border-radius:.85rem;flex-direction:column;justify-content:center;align-items:center;gap:.22rem;min-height:6.2rem;padding:.55rem;display:flex}.concept-equation>div:first-of-type{animation:3.6s ease-in-out infinite teaching-step}.concept-equation>div:nth-of-type(2){animation:3.6s ease-in-out 1.2s infinite teaching-step}.concept-equation>div:nth-of-type(3){animation:3.6s ease-in-out 2.4s infinite teaching-step}.concept-equation strong{font-size:.76rem}.concept-equation small,.concept-equation b{color:var(--ink-faint);font-size:.65rem;font-weight:500}.concept-equation b{color:#ffb28e}.concept-equation__result b,.concept-equation__result strong{color:#a8f0ba}.concept-equation__icon{background:var(--accent-soft);min-width:2rem;height:2rem;color:var(--accent-bright);border-radius:999px;place-items:center;padding:0 .35rem;font-size:.7rem;font-weight:800;display:grid}.concept-equation__operator{color:var(--ink-faint);align-self:center;font-weight:700}.concept-three{grid-template-columns:repeat(3,1fr);gap:.55rem;padding:.9rem 1rem 4.4rem;display:grid;position:relative}.concept-three>div:not(.concept-three__result){border:1px solid var(--line);text-align:center;border-radius:.8rem;flex-direction:column;gap:.2rem;padding:.65rem;display:flex}.concept-three span{color:var(--accent-bright);text-transform:uppercase;font-size:.7rem;font-weight:700}.concept-three strong{font-size:.76rem}.concept-three small{color:var(--ink-faint);font-size:.64rem}.concept-three>div:not(.concept-three__result):after{content:"↓";color:var(--accent-bright);font-size:1.1rem;animation:1.3s ease-in-out infinite teaching-down;position:absolute;bottom:3.1rem}.concept-three__result{color:#a8f0ba;white-space:nowrap;background:#30d1581a;border:1px solid #30d1584d;border-radius:999px;align-items:center;gap:.6rem;padding:.55rem .9rem;font-size:1rem;display:flex;position:absolute;bottom:.6rem;left:50%;translate:-50%}.concept-three__result i{background:#30d158;border-radius:50%;flex:0 0 .85rem;width:.85rem;height:.85rem;animation:1.8s ease-in-out infinite teaching-result;box-shadow:0 0 12px #30d158b3}@keyframes teaching-arrow{50%{translate:.22rem}}@keyframes teaching-grain{50%{background-position:3px -2px,-2px 4px,4px 2px}}@keyframes teaching-aperture{50%{transform:scale(1.08);box-shadow:0 0 24px #2997ffb8}}@keyframes teaching-freeze{0%,30%,to{transform:translate(-50%)}15%{transform:translate(-44%)}}@keyframes teaching-motion{0%{transform:translate(-80%)}70%,to{transform:translate(-20%)}}@keyframes teaching-trail{0%{opacity:0;transform-origin:100%;transform:scaleX(.3)}45%,75%{opacity:1;transform-origin:100%;transform:scaleX(1)}to{opacity:0}}@keyframes teaching-step{0%,25%,to{border-color:var(--line);background:#ffffff08}10%{background:var(--accent-soft);border-color:#2997ff99}}@keyframes teaching-down{50%{translate:0 .2rem}}@keyframes teaching-result{50%{transform:scale(1.25)}}.camera-workbench{border:1px solid var(--line);border-radius:calc(var(--radius-lg) + .5rem);box-shadow:var(--shadow);background:linear-gradient(145deg,#ffffff0f,#ffffff05);gap:1rem;padding:.65rem;display:grid}.camera-workbench__visual,.camera-workbench__controls,.camera-workbench__triangle,.tutorial__explanation{min-width:0}.camera-workbench__visual{flex-direction:column;gap:.75rem;display:flex}.simulator-app__stage{isolation:isolate;border-radius:var(--radius-lg);min-height:15rem;box-shadow:inset 0 0 0 1px var(--line);background:#09090b;position:relative;overflow:hidden}canvas{width:100%;height:auto;display:block}.processed-canvas{position:relative}.processed-canvas__status{border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink-soft);background:#000000a6;border-radius:999px;margin:0;padding:.35rem .7rem;font-size:.75rem;position:absolute;inset:auto 1rem 1rem auto}.comparison-slider{border-radius:inherit;background:#0b0b0d;width:100%;position:relative;overflow:hidden}.comparison-slider__layer{width:100%;animation:.65s ease-out both image-reveal}.comparison-slider__layer--simulated{position:absolute;inset:0}.comparison-slider__label,.comparison-slider__settings{z-index:3;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#ffffffd1;letter-spacing:.04em;pointer-events:none;background:#08080aad;border:1px solid #ffffff2e;border-radius:999px;font-size:.7rem;font-weight:650;position:absolute;box-shadow:0 5px 18px #0000003d}.comparison-slider__label{text-transform:uppercase;padding:.35rem .65rem;top:.85rem}.comparison-slider__label--original{left:.85rem}.comparison-slider__label--simulated{right:.85rem}.comparison-slider__divider{z-index:4;pointer-events:none;background:#ffffffeb;width:2px;transition:left 80ms linear;position:absolute;top:0;bottom:0;transform:translate(-50%);box-shadow:0 0 0 1px #00000026,0 0 24px #00000061}.comparison-slider__grip{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#131317d1;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;gap:.18rem;width:2.8rem;height:2.8rem;font-size:1.25rem;line-height:1;transition:background-color .18s,box-shadow .18s,transform .18s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 22px #0000006b}.comparison-slider[data-comparing=true] .comparison-slider__grip,.comparison-slider:focus-within .comparison-slider__grip{background:var(--accent);transform:translate(-50%,-50%)scale(1.08);box-shadow:0 8px 28px #2997ff66}.comparison-slider__settings{opacity:0;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 5rem);margin:0;padding:.45rem .75rem;transition:opacity .18s,transform .18s;bottom:.85rem;left:50%;overflow:hidden;transform:translate(-50%,.5rem)}.comparison-slider[data-comparing=true] .comparison-slider__settings,.comparison-slider:focus-within .comparison-slider__settings{opacity:1;transform:translate(-50%)}.comparison-slider__handle{z-index:5;appearance:none;cursor:ew-resize;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.comparison-slider__handle::-webkit-slider-thumb{appearance:none;background:0 0;border:0;width:2.8rem;height:4rem}.comparison-slider__handle::-moz-range-track{background:0 0}.comparison-slider__handle::-moz-range-thumb{background:0 0;border:0;width:2.8rem;height:4rem}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.indicator-badges{flex-wrap:wrap;gap:.5rem;margin:0;padding:0 .35rem;list-style:none;display:flex}.indicator-badges__item{border:1px solid var(--line);background:#ffffff0a;border-radius:999px;align-items:baseline;gap:.45rem;padding:.5rem .75rem;display:flex}.indicator-badges__label{color:var(--ink-faint);letter-spacing:.07em;text-transform:uppercase;font-size:.65rem;font-weight:650}.indicator-badges__value{text-transform:capitalize;font-size:.82rem;font-weight:650}.quality-guidance{border-radius:var(--radius-sm);color:var(--ink-soft);background:#ffffff0d;margin:0 .35rem;padding:.7rem .85rem;font-size:.84rem}.quality-guidance[data-ready=true]{color:#a8f0ba;background:#30d1581f}.camera-workbench__controls{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-glass);-webkit-backdrop-filter:saturate(150%)blur(28px);backdrop-filter:saturate(150%)blur(28px);flex-direction:column;gap:.75rem;padding:1rem;display:flex}.control-panel{flex-direction:column;gap:1rem;padding:.25rem;display:flex}.control-panel__row{border-bottom:1px solid var(--line);grid-template-columns:minmax(4.75rem,.8fr) 2.5rem minmax(1.5rem,1fr) 2.5rem 4.75rem;align-items:center;gap:.35rem;min-height:3.15rem;padding:.35rem 0;display:grid}.control-panel__row label{color:var(--ink-soft);font-size:.9rem}.control-panel__row output{min-width:0;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-size:.95rem;font-weight:600}.control-panel__row button{min-height:2.25rem;padding:0;font-size:1.15rem}.control-panel__row[data-locked=true]{opacity:.36}.control-panel__fixed{color:var(--ink-faint);grid-column:2/-1;font-size:.72rem}.control-panel input[type=range]{appearance:none;background:0 0;width:100%;height:1.5rem}.control-panel input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent), #4c4c51);border-radius:999px;height:4px}.control-panel input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:3px solid #fff;border-radius:50%;width:1.15rem;height:1.15rem;margin-top:-.45rem;transition:transform .16s;box-shadow:0 2px 10px #0000008c}.control-panel input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}.control-panel input[type=range]::-moz-range-track{background:#4c4c51;border-radius:999px;height:4px}.control-panel input[type=range]::-moz-range-progress{background:var(--accent);border-radius:999px;height:4px}.control-panel input[type=range]::-moz-range-thumb{background:var(--accent);border:3px solid #fff;border-radius:50%;width:.85rem;height:.85rem}.control-panel>button:last-child{color:var(--ink-soft);margin-top:.25rem}.camera-workbench__triangle{border-top:1px solid var(--line);padding:1rem .75rem .25rem}.simulator-app__triangle-caption{color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:600}.exposure-triangle-diagram{width:min(100%,18rem);margin:.75rem auto 0}.exposure-triangle-diagram svg{width:100%;height:auto;display:block}.exposure-triangle-diagram__triangle{fill:#ffffff05;stroke:#ffffff38;stroke-width:1px}.exposure-triangle-diagram__vertex circle{fill:#1c1c20;stroke:#77777d;stroke-width:1.5px}.exposure-triangle-diagram__label{fill:var(--ink-soft);font-family:var(--font-sans);font-size:.62rem;font-weight:600}.exposure-triangle-diagram__marker{fill:var(--accent);stroke:#d8edff;stroke-width:1.5px;filter:drop-shadow(0 0 6px var(--accent));transition:transform .28s cubic-bezier(.2,.8,.2,1)}.answer-card{border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff08;overflow:hidden}.answer-card[data-revealed=true]{background:var(--accent-soft);border-color:#2997ff52}.answer-card__reveal{width:100%;min-height:3.1rem;color:var(--ink-soft);text-align:left;background:0 0;border:0;border-radius:0;justify-content:space-between;align-items:center;padding:.7rem .9rem;font-size:.82rem;font-weight:650;display:flex}.answer-card__reveal>span:first-child{align-items:center;gap:.55rem;display:flex}.answer-card__reveal>span:first-child>span{color:var(--accent-bright);font-size:1rem}.answer-card__details{gap:.7rem;padding:.2rem .9rem .9rem;animation:.26s cubic-bezier(.2,.8,.2,1) both answer-reveal;display:grid}.answer-card__details p,.answer-card__details small{margin:0}.answer-card__details p{color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;font-weight:650}.answer-card__details output{color:#fff;font-variant-numeric:tabular-nums;font-size:1rem;font-weight:650}.answer-card__details small{color:var(--ink-faint);font-size:.72rem}.answer-card__details button{background:var(--accent);color:#fff;border-color:#2997ff73;justify-self:start;min-height:2.4rem;font-size:.78rem;font-weight:650}.explanation-panel{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);padding:1.25rem}.explanation-panel h2{margin-bottom:.85rem;font-size:1.15rem}.explanation-panel ul{color:var(--ink-soft);margin:0;padding-left:1.2rem}.challenge-section__header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;padding:3.5rem 0 2rem;display:flex}.challenge-section__header p:not(.tutorial__eyebrow){max-width:45rem;color:var(--ink-soft);font-size:1.1rem}.award-screen{place-items:center;min-height:calc(100vh - 3.5rem);padding:clamp(3rem,8vw,7rem) 1rem;display:grid}.award-screen__content{text-align:center;background:radial-gradient(circle at 50% 0,#2997ff45,#0000 22rem),linear-gradient(145deg,#ffffff14,#ffffff08);border:1px solid #ffffff29;border-radius:2.25rem;width:min(100%,52rem);padding:clamp(2rem,6vw,5rem);position:relative;overflow:hidden;box-shadow:0 30px 90px #00000073}.award-screen__mark{background:var(--success);color:#031108;border-radius:50%;place-items:center;width:4.5rem;height:4.5rem;margin:1.5rem auto;font-size:2.2rem;font-weight:800;display:grid;box-shadow:0 0 3rem #30d15852}.award-screen h2{max-width:18ch;margin-inline:auto}.award-screen__lead{max-width:38rem;color:var(--ink-soft);margin:1.25rem auto 2rem;font-size:clamp(1rem,2vw,1.2rem)}.award-card{border-radius:var(--radius-md);background:#2997ff17;border:1px solid #2997ff59;gap:.45rem;max-width:32rem;margin:0 auto 2rem;padding:1.5rem;display:grid}.award-card span,.award-card p{color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;font-weight:700}.award-card strong{color:var(--ink);font-size:clamp(1.25rem,3vw,1.8rem)}.award-card p{color:var(--accent-bright);margin:0}.award-screen__actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.award-screen__primary{background:var(--accent);color:#fff;border-color:#2997ff8c}.scene-selector{grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;display:grid}.scene-selector__option{border-color:var(--line);background:var(--surface);text-align:left;border-radius:1.4rem;flex-direction:column;align-items:stretch;gap:0;min-width:0;min-height:16rem;padding:0;transition:border-color .24s,box-shadow .24s,transform .24s cubic-bezier(.2,.8,.2,1);display:flex;position:relative;overflow:hidden}.scene-selector__option--selected{background:var(--surface-raised);border-color:#2997ff8c;box-shadow:inset 0 0 0 1px #2997ff38,0 12px 34px #00000042}.scene-selector__option--locked{opacity:.62}.scene-selector__option:hover:not(:disabled){background:var(--surface-raised);border-color:#ffffff42;transform:translateY(-4px)}.scene-selector__media{aspect-ratio:16/10;background:#08080a;width:100%;display:block;position:relative;overflow:hidden}.scene-selector__media:after{content:"";background:linear-gradient(#0000,#000000a3);position:absolute;inset:35% 0 0}.scene-selector__media img{object-fit:cover;width:100%;height:100%;transition:filter .28s,transform .5s cubic-bezier(.2,.8,.2,1);display:block;transform:scale(1.01)}.scene-selector__option:hover:not(:disabled) .scene-selector__media img,.scene-selector__option--selected .scene-selector__media img{transform:scale(1.055)}.scene-selector__option--locked .scene-selector__media img{filter:grayscale(.75)brightness(.62)}.scene-selector__media-overlay{z-index:1;justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex;position:absolute;inset:.7rem}.scene-selector__number,.scene-selector__status{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#ffffffd1;letter-spacing:.07em;text-transform:uppercase;background:#08080a99;border:1px solid #ffffff2e;border-radius:999px;align-items:center;min-height:1.65rem;font-size:.62rem;font-weight:700;display:inline-flex}.scene-selector__number{justify-content:center;min-width:1.65rem;padding:0 .35rem}.scene-selector__status{padding:0 .55rem}.scene-selector__status[data-status=completed]{color:#b9f8c8;background:#124620ad;border-color:#30d15852}.scene-selector__status[data-status=in-progress]{color:#d3eaff;background:#0a3560b8;border-color:#2997ff6b}.scene-selector__content{flex-direction:column;flex:1;gap:.55rem;padding:1rem;display:flex}.scene-selector__title{color:var(--ink);justify-content:space-between;align-items:center;gap:.5rem;font-size:1rem;font-weight:650;display:flex}.scene-selector__description{color:var(--ink-faint);font-size:.78rem;line-height:1.35;display:block}.scene-selector__badge{color:var(--success);flex:none;font-size:.66rem;font-weight:600}.challenge-complete-summary{border-radius:var(--radius-md);color:#b9f8c8;background:#30d1581a;border:1px solid #30d1584d;align-items:center;gap:.85rem;padding:1rem 1.15rem;display:flex}.challenge-complete-summary>span{background:var(--success);color:#031a09;border-radius:50%;flex:none;place-items:center;width:2rem;height:2rem;font-weight:800;display:grid}.challenge-complete-summary div{gap:.12rem;display:grid}.challenge-complete-summary strong{color:#d8ffe1}.challenge-complete-summary small{color:#91dca3}.success-overlay{z-index:10;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);pointer-events:none;background:#00000052;place-items:center;animation:.3s ease-out both success-overlay-in;display:grid;position:absolute;inset:0;overflow:hidden}.success-overlay[data-state=leaving]{animation:.4s cubic-bezier(.4,0,1,1) both success-overlay-out}.success-overlay[data-state=leaving] .success-overlay__message{animation:.4s cubic-bezier(.4,0,1,1) both success-message-out}.success-overlay__message{z-index:2;border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);text-align:center;background:#17171bcc;border:1px solid #ffffff38;justify-items:center;width:min(88%,28rem);padding:1.75rem 2rem;animation:.52s cubic-bezier(.16,1,.3,1) both success-message-in;display:grid;position:relative;box-shadow:0 24px 70px #0000008c}.success-overlay__message>span{background:var(--success);color:#001807;border-radius:50%;place-items:center;width:3rem;height:3rem;margin-bottom:.75rem;font-size:1.5rem;font-weight:800;display:grid;box-shadow:0 0 35px #30d15859}.success-overlay__message strong{letter-spacing:-.04em;font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.05}.success-overlay__message small{color:var(--ink-soft);margin-top:.5rem;font-size:.9rem}.lesson-complete-chip{z-index:8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#b6f5c5;pointer-events:none;background:#101014c7;border:1px solid #ffffff38;border-radius:999px;max-width:calc(100% - 2rem);padding:.5rem .8rem;font-size:.78rem;font-weight:650;position:absolute;inset:1rem 1rem auto auto;box-shadow:0 8px 24px #00000059}.success-overlay__confetti,.success-overlay__confetti i{position:absolute;inset:0}.success-overlay__confetti i:before{content:"";background:var(--accent-bright);width:.45rem;height:.45rem;transform:rotate(calc(var(--i,1) * 30deg)) translateY(-5rem);animation:particle-burst .9s calc(var(--i,1) * 16ms) cubic-bezier(.1, .7, .2, 1) both;border-radius:50%;position:absolute;top:48%;left:50%;box-shadow:0 0 12px}.success-overlay__confetti i:first-child{--i:1}.success-overlay__confetti i:nth-child(2){--i:2}.success-overlay__confetti i:nth-child(3){--i:3}.success-overlay__confetti i:nth-child(4){--i:4}.success-overlay__confetti i:nth-child(5){--i:5}.success-overlay__confetti i:nth-child(6){--i:6}.success-overlay__confetti i:nth-child(7){--i:7}.success-overlay__confetti i:nth-child(8){--i:8}.success-overlay__confetti i:nth-child(9){--i:9}.success-overlay__confetti i:nth-child(10){--i:10}.success-overlay__confetti i:nth-child(11){--i:11}.success-overlay__confetti i:nth-child(12){--i:12}@keyframes page-enter{0%{opacity:0;transform:translateY(1rem)}}@keyframes image-reveal{0%{opacity:0;transform:scale(1.012)}}@keyframes lens-float{50%{transform:translateY(-12px)rotate(2deg)}}@keyframes lens-glow{50%{opacity:.72;transform:scale(.96)}}@keyframes scroll-cue{45%,to{transform:translate(110%)}}@keyframes opening-section-reveal{0%{opacity:.12;filter:blur(7px);transform:translateY(2.5rem)scale(.98)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes progress-shine{0%,40%{transform:translate(-110%)}75%,to{transform:translate(110%)}}@keyframes success-overlay-in{0%{opacity:0}}@keyframes success-overlay-out{to{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}@keyframes success-message-in{0%{opacity:0;transform:translateY(1.5rem)scale(.9)}}@keyframes success-message-out{to{opacity:0;transform:translateY(-.75rem)scale(.94)}}@keyframes particle-burst{0%{opacity:1;transform:rotate(calc(var(--i) * 30deg)) translateY(-2rem) scale(1.2)}to{opacity:0;transform:rotate(calc(var(--i) * 30deg)) translateY(-14rem) scale(.2)}}@keyframes answer-reveal{0%{opacity:0;transform:translateY(-.4rem)}}@media (width>=52rem){main{padding-inline:2rem}.opening__principles{grid-template-columns:repeat(3,minmax(0,1fr))}.opening__how-to{flex-direction:row;justify-content:space-between;align-items:center}}@media (width>=64rem){main{padding-inline:2.5rem}.tutorial{gap:1.15rem}.tutorial__header{grid-template-columns:1.15fr 1fr;grid-template-areas:"eyebrow purpose""title concept""title goal""title details";align-items:start;gap:.8rem 3rem;padding-top:1rem;padding-bottom:.25rem;display:grid}.tutorial__header .tutorial__eyebrow{grid-area:eyebrow}.tutorial__header h2{grid-area:title;margin-bottom:0}.tutorial__header .tutorial__purpose{grid-area:purpose;margin-top:0}.tutorial__header .tutorial-concept{grid-area:concept;grid-template-columns:minmax(9rem,.8fr) minmax(0,1.45fr);grid-template-areas:"heading example";margin-top:0;display:grid}.tutorial-concept__heading{border-right:1px solid var(--line);border-bottom:0;grid-area:heading;justify-content:center;padding:.7rem}.concept-before-after,.concept-equation,.concept-three{grid-area:example}.concept-before-after{padding:.55rem .7rem}.concept-scene,.concept-motion{height:3.65rem}.concept-lens{width:3.8rem;height:3.8rem}.concept-lens--wide i{width:2.1rem;height:2.1rem}.concept-equation{gap:.25rem;padding:.55rem}.concept-equation>div{min-height:4.8rem;padding:.35rem}.concept-three{gap:.3rem;padding:.55rem .55rem 3.8rem}.concept-three>div:not(.concept-three__result){padding:.4rem .25rem}.tutorial__header .tutorial__goal{grid-area:goal;margin-top:0!important}.tutorial__header .tutorial__details{grid-area:details;margin-top:0}.camera-workbench{grid-template-columns:minmax(0,1.7fr) minmax(22rem,.9fr);align-items:start}.camera-workbench__controls{gap:.55rem;padding:.75rem}.control-panel{gap:.55rem}.control-panel__row{min-height:2.85rem;padding-block:.2rem}.camera-workbench__triangle .exposure-triangle-diagram{width:min(100%,11.5rem);margin-top:.4rem}}@media (width<=63.99rem){.scene-selector{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=42rem){main{padding-inline:.75rem}.site-header{padding-left:.35rem}.site-brand__descriptor{display:none}.opening{border-radius:1.5rem;min-height:auto;padding:3.5rem 1.25rem 2rem}.opening:before,.opening:after{opacity:.6}.opening__intro h2{font-size:clamp(2.75rem,14vw,4.4rem)}.tutorial__progress{overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch;padding-bottom:.25rem;scroll-padding-inline:.75rem;display:flex;overflow-x:auto}.tutorial__progress::-webkit-scrollbar{display:none}.tutorial__progress li{scroll-snap-align:center;flex:none}.tutorial__progress li[data-state=locked]{display:none}.tutorial__header{padding-top:2rem}.tutorial__header h2{font-size:2.65rem}.concept-equation{grid-template-columns:1fr}.concept-equation__operator{line-height:.6}.concept-equation>div{min-height:4.5rem}.camera-workbench{border-radius:1.5rem;padding:.4rem}.camera-workbench__controls,.simulator-app__stage{border-radius:1.15rem}.control-panel__row{grid-template-columns:1fr 2.5rem 2.5rem 4.25rem}.control-panel__row label{grid-column:1/-1}.control-panel__row input{grid-area:2/1}.control-panel__row button:first-of-type{grid-column:2}.challenge-section__header{flex-direction:column;align-items:stretch}.scene-selector{scroll-snap-type:inline proximity;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch;padding:.15rem .75rem .75rem 0;scroll-padding-inline:.75rem;display:flex;overflow:auto hidden}.scene-selector::-webkit-scrollbar{display:none}.scene-selector__option{scroll-snap-align:start;flex:0 0 min(82vw,20rem);min-height:0}.scene-selector__media{aspect-ratio:16/9}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}