:root{--upca-red: #C41E3A;--upca-red-light: #E63950;--upca-red-dark: #9B1730;--upca-gold: #D4AF37;--upca-gold-light: #E5C158;--color-bg: #050508;--color-bg-secondary: #0c0c10;--color-bg-tertiary: #161620;--color-bg-elevated: rgba(22, 22, 32, .95);--glass-bg: rgba(16, 16, 24, .94);--glass-bg-light: rgba(28, 28, 40, .85);--glass-border: rgba(196, 30, 58, .2);--glass-border-subtle: rgba(255, 255, 255, .06);--glass-border-hover: rgba(255, 255, 255, .12);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .78);--text-tertiary: rgba(255, 255, 255, .52);--text-quaternary: rgba(255, 255, 255, .28);--accent-primary: var(--upca-red);--accent-primary-light: var(--upca-red-light);--accent-secondary: var(--upca-gold);--accent-green: #34d058;--accent-blue: #58a6ff;--accent-teal: #56d4dd;--light-key: #ffc844;--light-fill: #56d4dd;--light-rim: #ff6b9d;--light-back: #a855f7;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;--font-mono: "SF Mono", "Fira Code", "Menlo", monospace;--radius-xs: 6px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow-red: 0 0 20px rgba(196, 30, 58, .3);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--transition-fast: .15s var(--ease-out);--transition-normal: .28s var(--ease-out);--transition-slow: .45s var(--ease-out)}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:var(--font-system);background:var(--color-bg);color:var(--text-primary);overflow:hidden;width:100vw;height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:var(--upca-red);color:#fff}#scene-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}#app{position:relative;z-index:1;width:100vw;height:100vh;pointer-events:none}#app>*{pointer-events:auto}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--glass-border-hover);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-quaternary)}.app-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:var(--space-3) var(--space-5);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(5,5,8,.85) 0%,rgba(5,5,8,.4) 70%,transparent 100%);backdrop-filter:blur(8px)}.header-left{display:flex;align-items:center;gap:var(--space-3)}.app-icon{width:38px;height:38px;background:linear-gradient(145deg,var(--upca-red),var(--upca-red-dark));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--shadow-glow-red),var(--shadow-sm);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.app-icon:hover{transform:scale(1.05)}.header-title h1{font-size:17px;font-weight:650;letter-spacing:-.4px}.header-subtitle{font-size:11px;color:var(--text-tertiary);letter-spacing:.3px;margin-top:1px}.header-center{display:flex;align-items:center}.upca-badge{display:flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3);background:linear-gradient(135deg,#c41e3a26,#c41e3a14);border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:11px;color:var(--upca-red-light);font-weight:600;letter-spacing:.5px;transition:all var(--transition-fast)}.upca-badge:hover{background:linear-gradient(135deg,#c41e3a40,#c41e3a1f);border-color:var(--upca-red)}.upca-badge:before{content:"🎓";font-size:13px}.header-right{display:flex;gap:var(--space-2)}.icon-button{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border-subtle);color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.icon-button:hover{background:var(--color-bg-tertiary);border-color:var(--glass-border-hover);color:var(--text-primary);transform:translateY(-1px)}.icon-button:active{transform:translateY(0)}.progress-bar{position:fixed;top:58px;left:0;right:0;height:3px;background:#ffffff0a;z-index:99;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--upca-red),var(--upca-gold),var(--upca-red));background-size:200% 100%;width:14.28%;transition:width var(--transition-slow);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{background-position:0% 0%}50%{background-position:100% 0%}}.teach-panel{position:fixed;top:65px;left:var(--space-4);bottom:var(--space-4);width:350px;background:var(--glass-bg);backdrop-filter:blur(50px) saturate(180%);-webkit-backdrop-filter:blur(50px) saturate(180%);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;animation:slideIn .6s var(--ease-out);box-shadow:var(--shadow-lg)}@keyframes slideIn{0%{opacity:0;transform:translate(-40px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.lesson-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:1px solid var(--glass-border-subtle);background:linear-gradient(180deg,rgba(196,30,58,.08) 0%,transparent 100%)}.lesson-number{width:40px;height:40px;background:linear-gradient(145deg,var(--upca-red),var(--upca-red-dark));border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;box-shadow:var(--shadow-glow-red),var(--shadow-sm);transition:transform var(--transition-fast)}.lesson-number:hover{transform:scale(1.08)}.lesson-meta{flex:1;min-width:0}.lesson-category{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--upca-red-light);font-weight:600}.lesson-title{font-size:22px;font-weight:700;letter-spacing:-.6px;line-height:1.2}.difficulty-badge{display:flex;gap:5px;padding:var(--space-2)}.difficulty-badge .dot{width:8px;height:8px;border-radius:50%;background:#ffffff1f;transition:all var(--transition-fast)}.difficulty-badge .dot.active{background:var(--upca-gold);box-shadow:0 0 8px var(--upca-gold)}.panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden}.goal-section,.observe-section,.diagram-section,.practice-section,.lights-overview{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--glass-border-subtle)}.section-label{display:flex;align-items:center;gap:var(--space-2);font-size:11px;font-weight:650;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:var(--space-3)}.section-label .icon{font-size:13px;opacity:.9}.section-label.small{font-size:10px;margin-bottom:var(--space-2)}.collapsible-trigger{cursor:pointer;user-select:none;margin-bottom:0;padding:var(--space-1) 0;transition:color var(--transition-fast);border-radius:var(--radius-xs)}.collapsible-trigger:hover{color:var(--text-primary)}.collapsible-trigger:focus-visible{outline:2px solid var(--upca-red);outline-offset:2px}.collapse-chevron{margin-left:auto;flex-shrink:0;transition:transform var(--transition-fast);opacity:.5}.collapsible-trigger[aria-expanded=false] .collapse-chevron{transform:rotate(-90deg)}.collapsed-body{display:none}.collapsible-trigger[aria-expanded=true]+[id$=-body],.collapsible-trigger[aria-expanded=true]~[id$=-body]{display:block}.collapsible-section .section-label{margin-bottom:0}.collapsible-section .section-label[aria-expanded=true]{margin-bottom:var(--space-3)}.goal-section p{font-size:15px;line-height:1.55;color:var(--text-primary);font-weight:450}.observe-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.observe-list li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:13px;line-height:1.45;color:var(--text-secondary);padding:var(--space-2) var(--space-3);background:var(--glass-bg-light);border-radius:var(--radius-sm);border:1px solid transparent;transition:all var(--transition-fast)}.observe-list li:hover{border-color:var(--glass-border-hover);background:var(--color-bg-tertiary)}.observe-list li:before{content:"✓";color:var(--accent-green);font-weight:700;flex-shrink:0;font-size:12px}.diagram-container{aspect-ratio:1.6;background:linear-gradient(180deg,var(--color-bg-secondary) 0%,rgba(12,12,16,.6) 100%);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--glass-border-subtle);transition:border-color var(--transition-fast)}.diagram-container:hover{border-color:var(--glass-border-hover)}.diagram-svg{width:100%;height:100%}.lights-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:200px;overflow-y:auto}.light-item{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-3);background:var(--glass-bg-light);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent}.light-item:hover{background:var(--color-bg-tertiary);border-color:var(--glass-border-hover);transform:translate(3px)}.light-item.selected{background:#c41e3a1f;border-color:var(--upca-red);box-shadow:inset 0 0 0 1px #c41e3a33}.light-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 10px currentColor;flex-shrink:0;transition:transform var(--transition-fast)}.light-item:hover .light-dot{transform:scale(1.15)}.light-item-info{flex:1;min-width:0}.light-item-name{font-size:13px;font-weight:600;margin-bottom:2px}.light-item-role{font-size:11px;color:var(--text-tertiary);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.light-drag-hint{font-size:9px;color:var(--text-quaternary);padding:3px 8px;background:var(--color-bg-tertiary);border-radius:var(--radius-xs);margin-left:auto;white-space:nowrap}.lesson-nav{flex-shrink:0;padding:var(--space-3) var(--space-4);display:flex;align-items:center;justify-content:center;gap:var(--space-3);border-top:1px solid var(--glass-border-subtle);background:#0003}.nav-button{display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:8px 14px;min-width:90px;background:var(--color-bg-tertiary);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);color:var(--text-primary);font-size:12px;font-weight:550;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.nav-button:hover:not(:disabled){background:var(--upca-red);border-color:var(--upca-red);box-shadow:var(--shadow-glow-red);transform:translateY(-1px)}.nav-button:active:not(:disabled){transform:translateY(0)}.nav-button:disabled{opacity:.35;cursor:not-allowed}.nav-button .arrow{font-size:14px;transition:transform var(--transition-fast)}.nav-button:hover:not(:disabled) .arrow{transform:translate(2px)}.nav-button.prev:hover:not(:disabled) .arrow{transform:translate(-2px)}.lesson-dots{display:flex;gap:5px;flex-shrink:0}.lesson-dot{width:7px;height:7px;border-radius:50%;background:#ffffff1f;cursor:pointer;transition:all var(--transition-fast)}.lesson-dot.active{background:var(--upca-red);width:18px;border-radius:4px;box-shadow:0 0 10px #c41e3a80}.lesson-dot:hover:not(.active){background:var(--text-tertiary);transform:scale(1.2)}.guided-only,.explore-only{display:none}body:not(.explore-mode) .guided-only{display:block}body.explore-mode .explore-only{display:block}.controls-panel{position:fixed;top:65px;right:var(--space-4);bottom:var(--space-4);width:290px;background:var(--glass-bg);backdrop-filter:blur(50px) saturate(180%);-webkit-backdrop-filter:blur(50px) saturate(180%);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;transition:all var(--transition-normal);box-shadow:var(--shadow-lg);animation:slideInRight .5s var(--ease-out)}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.controls-panel.collapsed{width:auto}.controls-panel.collapsed .controls-content{display:none}.controls-toggle{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);background:transparent;border:none;color:var(--text-primary);font-size:13px;font-weight:550;cursor:pointer;transition:background var(--transition-fast)}.controls-toggle:hover{background:#ffffff0a}.toggle-icon{font-size:16px;transition:transform var(--transition-fast)}.controls-toggle:hover .toggle-icon{transform:rotate(30deg)}.controls-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 var(--space-4) var(--space-4)}.control-section{margin-bottom:var(--space-4)}.control-section:last-child{margin-bottom:0}.light-selector{display:flex;flex-wrap:wrap;gap:var(--space-2)}.light-select-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--color-bg-tertiary);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);font-size:11px;font-weight:550;cursor:pointer;transition:all var(--transition-fast)}.light-select-btn:hover{border-color:var(--glass-border-hover);color:var(--text-primary)}.light-select-btn.active{border-color:var(--upca-red);background:#c41e3a26;color:var(--text-primary)}.light-select-dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 6px currentColor}.control-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:10px}.control-row.compact{margin-bottom:6px}.control-label{font-size:12px;color:var(--text-tertiary);width:68px;flex-shrink:0;font-weight:450}.control-slider{flex:1;height:5px;background:#ffffff14;border-radius:3px;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background var(--transition-fast)}.control-slider:hover{background:#ffffff1f}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(145deg,#fff,#e0e0e0);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 2px 10px #0006}.control-value{font-size:11px;font-family:var(--font-mono);color:var(--text-tertiary);width:36px;text-align:right;font-weight:500}.control-color{width:30px;height:30px;border:none;border-radius:var(--radius-sm);cursor:pointer;background:transparent;transition:transform var(--transition-fast)}.control-color:hover{transform:scale(1.08)}.control-color::-webkit-color-swatch-wrapper{padding:0}.control-color::-webkit-color-swatch{border:2px solid var(--glass-border-hover);border-radius:var(--radius-sm)}.drag-mode-indicator{display:flex;align-items:center;gap:var(--space-2);padding:10px var(--space-3);background:linear-gradient(135deg,#c41e3a1f,#c41e3a0f);border:1px solid var(--upca-red);border-radius:var(--radius-sm);font-size:12px;color:var(--upca-red-light);margin-bottom:var(--space-3);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.reset-row{justify-content:center;margin-top:var(--space-2)}.reset-light-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 16px;background:#ffffff0f;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);width:100%;justify-content:center;min-height:44px}.reset-light-btn:hover{background:#c41e3a1f;border-color:var(--upca-red);color:var(--upca-red-light)}.reset-light-btn:active{transform:scale(.97)}.bg-swatches{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}.bg-swatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--glass-border-subtle);cursor:pointer;transition:all var(--transition-fast);min-height:32px}.bg-swatch:hover{transform:scale(1.12);border-color:var(--glass-border-hover)}.bg-swatch.active{border-color:var(--upca-red);box-shadow:0 0 10px #c41e3a66;transform:scale(1.1)}.model-selector{display:flex;gap:var(--space-2);flex-wrap:wrap}.model-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;background:var(--color-bg-tertiary);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:11px;cursor:pointer;transition:all var(--transition-fast);min-height:52px}.model-card:hover{background:#c41e3a14;border-color:var(--glass-border-hover);color:var(--text-primary)}.model-card.active{background:#c41e3a26;border-color:var(--upca-red);color:var(--upca-red-light)}.model-icon{font-size:22px;line-height:1}.model-name{text-align:center;line-height:1.2}.dup-light-btn{background:none;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-xs);color:var(--text-secondary);font-size:16px;cursor:pointer;padding:6px 10px;transition:all var(--transition-fast);min-height:44px;margin-left:var(--space-2)}.dup-light-btn:hover{background:#c41e3a1f;border-color:var(--upca-red);color:var(--upca-red-light)}.sandbox-toolbar{padding:var(--space-3) var(--space-5);border-top:1px solid var(--glass-border-subtle)}.sandbox-add-buttons{display:flex;gap:var(--space-2)}.sandbox-add-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:10px var(--space-2);background:var(--color-bg-tertiary);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:12px;font-weight:550;cursor:pointer;transition:all var(--transition-fast);min-height:44px}.sandbox-add-btn:hover{background:#c41e3a1f;border-color:var(--upca-red);color:var(--text-primary);transform:translateY(-1px)}.sandbox-add-btn:active{transform:translateY(0)}.add-icon{font-size:16px}.light-delete-btn{background:none;border:none;font-size:14px;cursor:pointer;padding:6px;border-radius:var(--radius-xs);opacity:.5;transition:all var(--transition-fast);flex-shrink:0;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}.light-delete-btn:hover{opacity:1;background:#dc323233}.drag-mode-indicator.hidden{display:none}.floating-tip{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);background:var(--glass-bg);backdrop-filter:blur(24px);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);padding:10px var(--space-5);display:flex;align-items:center;gap:var(--space-3);animation:fadeUp .6s var(--ease-out) 1.2s both;box-shadow:var(--shadow-md)}@keyframes fadeUp{0%{opacity:0;transform:translate(-50%) translateY(24px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.floating-tip.hidden{display:none}.tip-content{display:flex;align-items:center;gap:var(--space-2);font-size:13px;color:var(--text-secondary);font-weight:450}.tip-icon{font-size:15px}.tip-close{background:none;border:none;color:var(--text-quaternary);font-size:18px;cursor:pointer;padding:0 var(--space-1);transition:color var(--transition-fast),transform var(--transition-fast);line-height:1}.tip-close:hover{color:var(--text-primary);transform:scale(1.1)}.onboarding-overlay{position:fixed;inset:0;background:#000000eb;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .4s var(--ease-out)}.onboarding-overlay.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.onboarding-card{background:var(--glass-bg);backdrop-filter:blur(50px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:40px;max-width:440px;text-align:center;animation:scaleIn .5s var(--ease-out);box-shadow:var(--shadow-lg),var(--shadow-glow-red)}@keyframes scaleIn{0%{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.onboarding-logo{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-6)}.onboarding-logo .logo-icon{width:64px;height:64px;background:linear-gradient(145deg,var(--upca-red),var(--upca-red-dark));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:var(--shadow-glow-red),var(--shadow-md);animation:float 4s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.onboarding-card h2{font-size:26px;font-weight:700;letter-spacing:-.6px;margin-bottom:var(--space-2)}.onboarding-card .subtitle{font-size:13px;color:var(--upca-red-light);margin-bottom:var(--space-5);font-weight:500}.onboarding-card>p{font-size:15px;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-6)}.onboarding-features{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-6)}.feature{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);transition:transform var(--transition-fast)}.feature:hover{transform:translateY(-4px)}.feature-icon{font-size:28px}.feature span:last-child{font-size:12px;color:var(--text-tertiary);font-weight:500}.cta-button{display:inline-flex;align-items:center;gap:var(--space-2);padding:14px 32px;background:linear-gradient(145deg,var(--upca-red),var(--upca-red-dark));border:none;border-radius:var(--radius-full);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-glow-red),var(--shadow-sm)}.cta-button:hover{transform:scale(1.03) translateY(-2px);box-shadow:0 0 30px #c41e3a80,var(--shadow-md)}.cta-button:active{transform:scale(1) translateY(0)}.cta-button .arrow{font-size:20px;transition:transform var(--transition-fast)}.cta-button:hover .arrow{transform:translate(4px)}.onboarding-hint{margin-top:var(--space-5);font-size:12px;color:var(--text-quaternary)}.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);z-index:2000;transition:opacity .5s var(--ease-out),visibility .5s}.loading.hidden{opacity:0;visibility:hidden}.loading-spinner{width:44px;height:44px;border:3px solid rgba(196,30,58,.15);border-top-color:var(--upca-red);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading p{font-size:14px;color:var(--text-tertiary);font-weight:450}.tour-overlay{position:fixed;inset:0;background:#0006;z-index:9998;pointer-events:auto;opacity:0;transition:opacity .3s ease}.tour-overlay.visible{opacity:1}.tour-highlight{position:relative!important;z-index:9999!important;pointer-events:auto!important;box-shadow:0 0 0 4px var(--surface-1),0 0 0 6px var(--upca-red),0 0 20px #c41e3a80!important;border-radius:var(--radius-sm);background:var(--surface-1);animation:tour-pulse 2s infinite}@keyframes tour-pulse{0%{box-shadow:0 0 0 4px var(--surface-1),0 0 0 6px #c41e3ab3}70%{box-shadow:0 0 0 4px var(--surface-1),0 0 0 10px #c41e3a00}to{box-shadow:0 0 0 4px var(--surface-1),0 0 0 6px #c41e3a00}}.tour-popover{position:fixed;z-index:10000;background:var(--surface-2);border:1px solid var(--border-color);padding:var(--space-4);border-radius:var(--radius-md);width:280px;box-shadow:0 10px 30px #00000080;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;pointer-events:auto}.tour-popover.visible{opacity:1;transform:translateY(0)}.tour-popover h3{margin:0 0 var(--space-2) 0;font-size:var(--text-md);color:var(--text-primary)}.tour-popover p{margin:0 0 var(--space-4) 0;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.4}.tour-actions{display:flex;justify-content:space-between;align-items:center}.tour-step-counter{font-size:var(--text-xs);color:var(--text-tertiary);font-variant-numeric:tabular-nums}.tour-btn{background:var(--upca-red);color:#fff;border:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;cursor:pointer}.tour-btn:hover{background:var(--upca-red-light)}.copyright-footer{position:fixed;bottom:var(--space-4);right:var(--space-5);font-size:10px;color:var(--text-quaternary);text-align:right;line-height:1.5;max-width:260px;opacity:.8;transition:opacity var(--transition-fast)}.copyright-footer:hover{opacity:1}.copyright-footer strong{color:var(--text-tertiary)}.copyright-footer a{color:var(--upca-red-light);text-decoration:none;transition:color var(--transition-fast)}.copyright-footer a:hover{color:var(--upca-red);text-decoration:underline}.dragging-light,.dragging-light *{cursor:grabbing!important}.light-draggable{cursor:grab}.hidden{display:none!important}.visually-hidden{clip:rect(0,0,0,0);clip-path:inset(50%);position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;white-space:nowrap;border:0;padding:0}.visually-hidden:focusable:focus{clip:auto;clip-path:none;position:static;width:auto;height:auto;margin:0;overflow:visible;white-space:normal}:root{--font-system: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif}.progress-track{position:fixed;top:58px;left:0;right:0;height:3px;background:#ffffff0a;z-index:99;overflow:hidden}.app-main,.scene-area,.noise-overlay{pointer-events:none}#app>.app-main{pointer-events:none}.icon-svg{width:1em;height:1em;display:inline-block;flex-shrink:0}.app-icon .icon-svg,.onboarding-logo .icon-svg{width:34px;height:34px}.language-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);background:#ffffff0a}.language-btn,.mode-btn,.btn{border:1px solid transparent;color:var(--text-secondary);background:transparent;cursor:pointer;transition:all var(--transition-fast);font:inherit}.language-btn{min-width:34px;min-height:28px;border-radius:var(--radius-full);font-size:11px;font-weight:700}.language-btn.active,.language-btn:hover{color:var(--text-primary);background:#c41e3a2e;border-color:#c41e3a59}.mobile-panel-toggle{display:none}.app-main{position:fixed;inset:0;z-index:2}.scene-area{position:fixed;inset:58px 320px 0 382px}.scene-area>*,.teach-panel,.controls-panel,.app-footer,.app-header,.status-toast,.curriculum-drawer,.comparison-layer,.screenshot-toast,.completion-modal,.app-scrim{pointer-events:auto}.practice-section,.checklist-section,.response-section{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--glass-border-subtle)}.practice-card,.mission-card,.response-card{background:var(--glass-bg-light);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-md);padding:var(--space-3)}.practice-block+.practice-block{margin-top:var(--space-3)}.practice-label{display:block;margin-bottom:4px;color:var(--upca-red-light);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.practice-card p,.mission-step-text,.mission-step-hint{color:var(--text-secondary);font-size:13px;line-height:1.45}.mission-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.mission-badge{padding:3px 8px;border-radius:var(--radius-full);background:#d4af3724;color:var(--upca-gold-light);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.mission-step{display:grid;grid-template-columns:24px 1fr;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-sm);background:#ffffff0a;border:1px solid transparent}.mission-step.active{border-color:#c41e3a61;box-shadow:inset 0 0 0 1px #c41e3a1f}.mission-step-icon{width:24px;height:24px;display:grid;place-items:center;color:var(--upca-gold-light)}.checklist{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.checklist-item{display:grid;grid-template-columns:22px 1fr auto;align-items:start;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--glass-bg-light);border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:12px;line-height:1.4}.checklist-item.active{border-color:#d4af3761}.checklist-item.completed{color:var(--text-primary);border-color:#34d05840}.checklist-box{width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--glass-border-hover);border-radius:6px;color:var(--accent-green)}.checklist-item.completed .checklist-box:after{content:"✓";font-weight:800}.checklist-required{padding:2px 6px;border-radius:var(--radius-full);background:#c41e3a1f;color:var(--upca-red-light);font-size:9px;text-transform:uppercase;letter-spacing:.5px}.checklist-progress-wrap{margin-top:var(--space-3)}.checklist-progress-bar{height:5px;overflow:hidden;border-radius:var(--radius-full);background:#ffffff14}.checklist-progress-bar>span,.checklist-progress-bar>div{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--upca-red),var(--upca-gold))}.checklist-progress-text,.checklist-done{margin-top:6px;color:var(--text-tertiary);font-size:11px}.response-card textarea,.response-card input,.palette-select{width:100%;color:var(--text-primary);background:var(--color-bg-tertiary);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-sm);padding:9px 10px;font:inherit}.response-card textarea{min-height:84px;resize:vertical}.response-actions,.palette-actions,.completion-modal-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:34px;padding:8px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:700}.btn-primary{color:#fff;background:linear-gradient(145deg,var(--upca-red),var(--upca-red-dark));box-shadow:var(--shadow-glow-red)}.btn-ghost{background:#ffffff0f;border-color:var(--glass-border-subtle)}.palette-preview-wrap,.palette-swatches,.palette-strip{display:flex;align-items:center;gap:var(--space-2)}.palette-preview-wrap{margin:var(--space-3) 0}.palette-preview-swatch,.palette-swatch,.palette-strip-swatch{width:28px;height:28px;border:1px solid var(--glass-border-hover);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.palette-strip{position:fixed;left:50%;bottom:86px;transform:translate(-50%);padding:8px;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);background:var(--glass-bg);backdrop-filter:blur(24px);opacity:0;transition:opacity var(--transition-fast)}.palette-strip.visible{opacity:1}.selected-light-context,.scene-feedback{position:fixed;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-2);padding:8px 14px;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);background:var(--glass-bg);backdrop-filter:blur(24px);color:var(--text-secondary);font-size:12px}.selected-light-context{top:78px}.scene-feedback{top:122px}.selected-light-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.status-toast,.screenshot-toast{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:500;max-width:320px;padding:12px 14px;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-md);background:var(--glass-bg);backdrop-filter:blur(24px);color:var(--text-primary);box-shadow:var(--shadow-md);opacity:0;transform:translateY(12px);pointer-events:none;transition:all var(--transition-fast)}.status-toast.visible,.screenshot-toast.visible{opacity:1;transform:translateY(0)}.screenshot-toast{display:flex;align-items:center;gap:var(--space-3)}.screenshot-toast-thumb{width:64px;height:42px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--glass-border-subtle)}.screenshot-toast-text{display:grid;gap:2px;font-size:12px}.screenshot-toast-text small{color:var(--text-tertiary)}.control-group{border-bottom:1px solid var(--glass-border-subtle);padding:var(--space-3) 0}.control-group:first-child{padding-top:0}.control-group-header,.controls-header{display:flex;align-items:center;gap:var(--space-2)}.controls-header{justify-content:space-between;border-bottom:1px solid var(--glass-border-subtle)}.controls-header .controls-toggle{width:auto;flex:1}.control-group-header{margin-bottom:var(--space-2);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.mode-toggle-wrap{display:flex;gap:2px;padding-right:var(--space-3)}.mode-btn{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-full)}.mode-btn.active,.mode-btn:hover{color:var(--text-primary);background:#ffffff14}.curriculum-drawer,.completion-modal{position:fixed;z-index:1001;inset:72px max(24px,calc((100vw - 780px)/2)) auto;max-height:calc(100vh - 120px);overflow:auto;background:var(--glass-bg);backdrop-filter:blur(50px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg),var(--shadow-glow-red)}.curriculum-drawer.hidden,.completion-modal.hidden,.comparison-layer.hidden,.app-scrim.hidden,.hidden{display:none!important}.curriculum-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5);border-bottom:1px solid var(--glass-border-subtle)}.curriculum-list{display:grid;gap:var(--space-2);padding:var(--space-5)}.curriculum-item-btn,.curriculum-item{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:var(--space-3);padding:var(--space-3);color:var(--text-secondary);background:var(--glass-bg-light);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-md);text-align:left}.curriculum-item.current .curriculum-item-btn,.curriculum-item.current{border-color:#d4af376b;color:var(--text-primary)}.curriculum-item.completed .curriculum-item-status{color:var(--accent-green)}.curriculum-item.locked,.curriculum-item-btn:disabled{opacity:.55;cursor:not-allowed}.comparison-layer{position:fixed;left:50%;top:82px;z-index:300;transform:translate(-50%)}.comparison-card{display:flex;align-items:center;gap:var(--space-3);max-width:min(520px,calc(100vw - 32px));padding:10px 14px;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);background:var(--glass-bg);backdrop-filter:blur(24px);box-shadow:var(--shadow-md)}.comparison-card span{color:var(--text-secondary);font-size:12px}.comparison-toggle{padding:6px 10px;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);color:var(--text-primary);background:#ffffff0f}.completion-card{padding:var(--space-6);text-align:center}.completion-modal-evidence{display:grid;gap:var(--space-2);margin:var(--space-4) 0}.completion-evidence-item{padding:var(--space-2);border-radius:var(--radius-sm);background:var(--glass-bg-light);color:var(--text-secondary);font-size:12px}.completion-evidence-palette{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.completion-evidence-label{font-weight:600;color:var(--text-primary);margin-right:4px}.completion-palette-swatch{display:inline-block;width:20px;height:20px;border-radius:var(--radius-xs);border:1px solid var(--glass-border-subtle)}.response-status{display:block;margin-top:4px;font-size:11px;transition:color var(--transition-fast)}.response-status-dirty{color:var(--upca-gold-light)}.response-status-saving{color:var(--text-tertiary);animation:pulse 1s ease-in-out infinite}.response-status-saved{color:var(--accent-green)}.response-status-completed{color:var(--accent-green);font-weight:700}.skip-link{position:fixed;top:8px;left:8px;z-index:9999;padding:10px 18px;background:var(--upca-red);color:#fff;border-radius:var(--radius-sm);font-size:14px;font-weight:700;text-decoration:none;transform:translateY(-150%);transition:transform .2s}.skip-link:focus{transform:translateY(0)}.app-scrim{position:fixed;inset:0;z-index:180;background:#0000006b;backdrop-filter:blur(2px);display:none}.app-scrim.visible{display:block}.app-footer{position:fixed;right:326px;bottom:var(--space-4);z-index:4;max-width:260px;color:var(--text-quaternary);font-size:10px;line-height:1.5;text-align:right;opacity:.8;pointer-events:auto}.app-footer:hover{opacity:1}.footer-row{display:inline}.footer-institution{color:var(--text-tertiary);text-decoration:none}.overview-section{margin:var(--space-5) 0;text-align:left}.overview-list{display:grid;gap:var(--space-2);margin-left:var(--space-4);color:var(--text-secondary);font-size:13px;line-height:1.45}.feature-stat{display:grid;justify-items:center;gap:var(--space-1)}.feature-number{color:var(--upca-gold-light);font-size:22px;font-weight:800}.feature-caption{color:var(--text-tertiary);font-size:12px}@media(max-width:900px){.app-footer{display:none}.mobile-panel-toggle{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 10px;border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);color:var(--text-primary);background:#ffffff0d}.language-switch{display:none}.scene-area{inset:58px 0 0}.teach-panel{transform:translateY(100%);z-index:210}.teach-panel.open,.controls-panel.open{transform:translateY(0)}}@media(max-width:700px){.app-icon{width:38px;height:38px}.header-title h1{font-size:18px}.header-right{gap:6px}.mobile-panel-toggle span{display:none}.curriculum-drawer,.completion-modal{inset:70px 12px 12px;max-height:none}.palette-strip{bottom:calc(45vh + 12px)}}html,body{overflow-x:hidden}@media(max-width:1100px){.teach-panel{width:320px}.controls-panel{width:260px}}@media(max-width:900px){.teach-panel{width:300px}.controls-panel{position:fixed;inset:auto 0 0;width:100%;max-height:45vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow-y:auto;z-index:200;transform:translateY(100%);transition:transform var(--transition-normal);overflow-x:hidden}.controls-panel:not(.collapsed){transform:translateY(0)}.controls-panel.collapsed{width:100%;transform:translateY(calc(100% - 48px))}.controls-panel.collapsed .controls-content{display:none}.controls-toggle{min-height:48px;justify-content:center}.copyright-footer{display:none}.scene-feedback{max-width:calc(100vw - 32px)}.nav-button{min-height:44px;padding:10px 16px;font-size:13px}.light-item{padding:12px var(--space-3);min-height:44px}.icon-button{width:44px;height:44px;font-size:16px}.lesson-dot{width:10px;height:10px}.lesson-dot.active{width:22px}}@media(max-width:500px){.header-title h1{font-size:16px}.header-subtitle{display:none}.icon-button{width:40px;height:40px}.teach-panel{height:55vh;max-height:55vh}.controls-panel{max-height:40vh}.lesson-title{font-size:18px}.goal-section p{font-size:13px}.observe-list li{font-size:12px}}.mobile-bottom-nav{display:none}@media(max-width:900px){.mobile-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:300;height:56px;background:var(--glass-bg);backdrop-filter:blur(24px);border-top:1px solid var(--glass-border-subtle);padding-bottom:env(safe-area-inset-bottom,0);justify-content:space-around;align-items:center}.bottom-nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-fast);min-height:44px;min-width:44px;font:inherit}.bottom-nav-btn:hover{color:var(--text-secondary)}.bottom-nav-btn[aria-current=page],.bottom-nav-btn.active{color:var(--upca-red-light)}.bottom-nav-label{font-size:9px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}.teach-panel,.controls-panel{padding-bottom:56px}.palette-strip{bottom:68px}.status-toast,.screenshot-toast{bottom:calc(56px + var(--space-4))}}@media(max-width:700px){.teach-panel{inset:auto 0 0;width:100%;height:45vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow-x:hidden}.floating-tip{bottom:47vh}.upca-badge,.header-subtitle{display:none}.goal-section p{font-size:14px}.observe-list li{font-size:13px;padding:var(--space-3)}.lesson-title{font-size:20px}.control-slider{height:8px}.control-slider::-webkit-slider-thumb{width:22px;height:22px}.bg-swatch{width:36px;height:36px}}@media(max-width:900px)and (max-height:500px)and (orientation:landscape){.controls-panel{max-height:65vh}.teach-panel{height:65vh}.floating-tip{bottom:67vh}}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.diagram-container{position:relative;overflow:hidden;aspect-ratio:1;background:linear-gradient(180deg,var(--color-bg-secondary) 0%,rgba(12,12,16,.6) 100%);border-radius:var(--radius-md);border:1px solid var(--glass-border-subtle);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.diagram-container:hover{border-color:var(--glass-border-hover);box-shadow:0 0 20px #c41e3a14}.diagram-container:focus-within{border-color:var(--upca-red);box-shadow:0 0 0 2px #c41e3a4d}.color-wheel-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none;-ms-touch-action:none;outline:none;border-radius:inherit}.color-wheel-canvas:active{cursor:grabbing}.color-wheel-canvas:focus-visible{outline:2px solid var(--upca-red);outline-offset:-2px}.color-wheel-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.diagram-container .diagram-svg{display:none}@media(max-width:560px){.diagram-container{aspect-ratio:1;max-height:280px}}@media(min-width:561px)and (max-width:960px){.diagram-container{aspect-ratio:1;max-height:320px}}