.shadow-mapping-lab{display:grid;gap:4rem;min-width:0;width:100%;padding-bottom:8rem}.shadow-mapping-kicker{display:block;color:var(--accent-dark);font-size:.7rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.shadow-mapping-stage,.shadow-mapping-stage__viewport,.shadow-mapping-lesson,.shadow-mapping-controls{min-width:0;max-width:100%}.shadow-mapping-stage__viewport,.shadow-mapping-lesson,.shadow-mapping-controls{border:1px solid var(--gray-700);border-radius:1rem;background:color-mix(in srgb,var(--gray-999) 94%,var(--gray-800))}.shadow-mapping-stage__viewport{--shadow-mapping-z-label: 1;--shadow-mapping-z-panel: 5;--shadow-mapping-z-toggle: 6;position:relative;overflow:hidden}.shadow-mapping-stage__label{position:absolute;z-index:var(--shadow-mapping-z-label);inset:.8rem .8rem auto;display:flex;gap:.75rem;justify-content:space-between;padding-right:8rem;pointer-events:none;color:#dce5e8;font-size:.68rem;letter-spacing:.04em}.shadow-mapping-controls-toggle{position:absolute;z-index:var(--shadow-mapping-z-toggle);top:.75rem;right:.75rem;min-height:44px;padding:.65rem .8rem;border:1px solid var(--gray-600);border-radius:.6rem;color:var(--gray-100);background:color-mix(in srgb,var(--gray-999) 90%,transparent);font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;backdrop-filter:blur(12px)}.shadow-mapping-controls-toggle:hover{border-color:var(--gray-400)}.shadow-mapping-controls-toggle:focus-visible,.shadow-mapping-preset-row button:focus-visible,.shadow-mapping-button:focus-visible,.shadow-mapping-lesson-nav button:focus-visible,.shadow-mapping-controls input:focus-visible,.shadow-mapping-controls select:focus-visible{outline:3px solid var(--accent-regular);outline-offset:2px}.shadow-mapping-controls-drawer{position:absolute;z-index:var(--shadow-mapping-z-panel);top:3.35rem;right:.75rem;width:min(17rem,calc(100% - 1.5rem));max-height:min(55%,32rem);overflow-y:auto;overscroll-behavior:contain;border:1px solid color-mix(in srgb,var(--gray-500) 70%,transparent);border-radius:.85rem;background:color-mix(in srgb,var(--gray-999) 92%,transparent);box-shadow:var(--shadow-lg);backdrop-filter:blur(16px)}.shadow-mapping-controls-drawer[hidden]{display:none}.shadow-mapping-controls-drawer .shadow-mapping-controls{border:0;background:transparent}.shadow-mapping-viewport{aspect-ratio:4 / 5;display:grid;place-items:center;min-height:0;width:100%;color:#c2cdd0;background:#090d11}.shadow-mapping-viewport canvas{display:block;width:100%!important;height:100%!important;touch-action:none}.shadow-mapping-viewport--fallback{padding:2rem;text-align:center}.shadow-mapping-viewport--fallback strong{color:#f3f6f7}.shadow-mapping-viewport--fallback p{max-width:42ch;margin-top:.6rem;color:#aebcc1}.shadow-mapping-controls{min-width:0;max-width:100%;padding:.7rem}.shadow-mapping-panel-heading{display:flex;align-items:end;justify-content:space-between;gap:.6rem;padding-bottom:.55rem}.shadow-mapping-panel-heading h2{margin-top:.2rem;color:var(--gray-100);font-size:.95rem}.shadow-mapping-panel-heading a,.shadow-mapping-lesson-heading a{min-height:44px;display:inline-flex;align-items:center;color:var(--accent-dark);font-size:.72rem;font-weight:700;text-underline-offset:.25rem}.shadow-mapping-fieldset{min-width:0;padding:.65rem 0;border:0;border-top:1px solid var(--gray-700)}.shadow-mapping-fieldset legend{padding:0;margin-bottom:.4rem;color:var(--gray-200);font-family:var(--font-brand);font-size:.72rem;font-weight:700}.shadow-mapping-preset-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}.shadow-mapping-preset-row button,.shadow-mapping-button,.shadow-mapping-lesson-nav button{min-height:44px;border:1px solid var(--gray-700);border-radius:.6rem;color:var(--gray-200);background:var(--gray-900);font:inherit;font-size:.68rem;font-weight:650;cursor:pointer}.shadow-mapping-preset-row button:hover,.shadow-mapping-button:hover,.shadow-mapping-lesson-nav button:hover{border-color:var(--gray-500)}.shadow-mapping-control-row,.shadow-mapping-range>span,.shadow-mapping-toggle{display:flex;gap:.6rem;align-items:center;justify-content:space-between}.shadow-mapping-control-row{min-height:44px;color:var(--gray-300);font-size:.72rem}.shadow-mapping-control-row select{width:63%;min-width:0;max-width:63%}.shadow-mapping-controls select{min-height:44px;padding-inline:.5rem;border:1px solid var(--gray-700);border-radius:.55rem;color:var(--gray-100);background:var(--gray-900);font:inherit;font-size:.68rem}.shadow-mapping-range{display:grid;gap:.2rem;min-width:0;width:100%;padding-block:.2rem;color:var(--gray-300);font-size:.72rem}.shadow-mapping-range output{color:var(--gray-100);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem}.shadow-mapping-range input{width:100%;max-width:100%;min-height:44px;accent-color:var(--accent-regular)}.shadow-mapping-toggle{min-height:44px;border-top:1px solid var(--gray-800);color:var(--gray-300);font-size:.72rem}.shadow-mapping-toggle input{width:1.25rem;height:1.25rem;accent-color:var(--accent-regular)}.shadow-mapping-action-row{position:sticky;z-index:4;bottom:.45rem;display:grid;gap:.35rem;margin:.3rem -.2rem -.2rem;padding:.4rem;border:1px solid var(--gray-700);border-radius:.8rem;background:color-mix(in srgb,var(--gray-999) 92%,transparent);backdrop-filter:blur(16px);box-shadow:var(--shadow-md)}.shadow-mapping-action-row [role=status]{display:flex;align-items:center;gap:.5rem;color:var(--gray-300);font-size:.68rem;font-weight:650}.shadow-mapping-action-row [role=status]>span{width:.55rem;height:.55rem;border-radius:50%;background:var(--gray-500)}.shadow-mapping-action-row [data-state=pending]>span{background:var(--accent-orange)}.shadow-mapping-action-row [data-state=invalid]>span{background:#c74747}.shadow-mapping-action-row>div:last-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}.shadow-mapping-action-row>div:last-child button{font-size:.68rem}.shadow-mapping-action-row>div:last-child button:last-child{grid-column:1 / -1}.shadow-mapping-button--primary{border-color:var(--accent-regular);color:var(--accent-text-over);background:var(--accent-regular)}.shadow-mapping-button--live[data-active=true]{border-color:var(--accent-orange);color:#111827;background:var(--accent-orange)}.shadow-mapping-lesson{padding:1.25rem}.shadow-mapping-lesson-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:2rem}.shadow-mapping-lesson-nav button>span:first-child{display:block}.shadow-mapping-lesson-nav button>span:last-child{display:none}.shadow-mapping-lesson-nav button[aria-current=step]{border-color:var(--accent-regular);color:var(--accent-text-over);background:var(--accent-regular)}.shadow-mapping-lesson-heading{display:grid;gap:.75rem}.shadow-mapping-lesson-heading h2{margin-top:.35rem;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.035em}.shadow-mapping-lesson-summary{max-width:62ch;margin-top:.8rem;color:var(--gray-400);font-size:var(--text-md);line-height:1.65}.shadow-mapping-action-note{max-width:70ch;margin-top:1.25rem;padding:1rem;border-left:3px solid var(--accent-regular);background:color-mix(in srgb,var(--accent-subtle-overlay) 55%,var(--gray-999))}.shadow-mapping-action-note p{margin-top:.35rem;color:var(--gray-200);line-height:1.6}.shadow-mapping-causal-grid{display:grid;margin-top:2rem}.shadow-mapping-causal-grid>div{padding-block:1.25rem;border-top:1px solid var(--gray-700)}.shadow-mapping-causal-grid dt{margin-bottom:.45rem;color:var(--accent-dark);font-size:.72rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.shadow-mapping-causal-grid dd{color:var(--gray-300);line-height:1.65}.shadow-mapping-causal-grid dd strong,.shadow-mapping-causal-grid dd span{display:block}.shadow-mapping-causal-grid dd span{margin-top:.5rem;color:var(--gray-400)}.shadow-mapping-observation{margin-top:1rem;padding:1rem;border:1px solid var(--gray-700);border-radius:.8rem;background:var(--gray-900)}.shadow-mapping-observation p{margin-top:.45rem;color:var(--gray-200);line-height:1.6}.shadow-mapping-observation ul{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin-top:.8rem;list-style:none}.shadow-mapping-observation li{padding:.3rem .5rem;border:1px solid var(--gray-700);border-radius:999rem;color:var(--gray-400);font-size:.7rem}@media(min-width:64em){.shadow-mapping-stage__viewport{position:sticky;top:1rem}.shadow-mapping-viewport{aspect-ratio:16 / 11;min-height:42rem}.shadow-mapping-lesson{padding:2rem}.shadow-mapping-lesson-nav button>span:first-child{display:none}.shadow-mapping-lesson-nav button>span:last-child{display:block}.shadow-mapping-lesson-heading{grid-template-columns:1fr auto;align-items:end}.shadow-mapping-causal-grid{grid-template-columns:1fr 1fr}.shadow-mapping-causal-grid>div{padding:1.5rem}.shadow-mapping-causal-grid>div:nth-child(odd){padding-left:0;border-right:1px solid var(--gray-700)}}@media(max-width:30rem){.shadow-mapping-stage__label span:last-child{display:none}.shadow-mapping-controls-toggle{top:.5rem;right:.5rem}.shadow-mapping-controls-drawer{top:3rem;right:.5rem;width:min(17rem,calc(100% - 1rem));max-height:46%}}@media(prefers-reduced-motion:reduce){.shadow-mapping-lab *,.shadow-mapping-lab *:before,.shadow-mapping-lab *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}