: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);align-items:center}.language-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--glass-bg);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-full);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.language-btn{min-width:34px;height:26px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-tertiary);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:all var(--transition-fast)}.language-btn:hover{background:#ffffff0d;color:var(--text-primary)}.language-btn.active{background:linear-gradient(145deg,var(--upca-red),var(--upca-red-dark));color:#fff;box-shadow:var(--shadow-glow-red)}body.embed-mode .app-header{padding:var(--space-2) var(--space-4)}body.embed-mode .header-center,body.embed-mode #btn-help,body.embed-mode .upca-badge{display:none}.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,.practice-section,.diagram-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)}.goal-section p{font-size:15px;line-height:1.55;color:var(--text-primary);font-weight:450}.practice-card{display:grid;gap:var(--space-3);padding:var(--space-4);background:var(--glass-bg-light);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-md)}.practice-block{display:flex;flex-direction:column;gap:6px}.practice-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--upca-gold)}.practice-block p{margin:0;font-size:13px;line-height:1.55;color:var(--text-primary)}.overview-section{margin-top:var(--space-2);padding:var(--space-4);background:linear-gradient(180deg,#c41e3a14,#ffffff08);border:1px solid var(--glass-border-subtle);border-radius:var(--radius-md)}.overview-section>p{margin-bottom:var(--space-3);font-size:13px;line-height:1.55;color:var(--text-secondary)}.overview-list{display:flex;flex-direction:column;gap:var(--space-2);padding:0;list-style:none}.overview-list li{font-size:12px;line-height:1.45;color:var(--text-secondary);padding-left:14px;position:relative}.overview-list li:before{content:"•";position:absolute;left:0;color:var(--upca-gold)}.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)}.controls-panel{position:fixed;top:65px;right: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;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{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)}body.embed-mode .floating-tip,body.embed-mode .onboarding-overlay{display:none!important}.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-card .overview-section{text-align:left;margin-bottom:var(--space-5)}.onboarding-card .overview-section>p{margin-bottom:var(--space-3)}.onboarding-card .overview-list li{color:var(--text-secondary)}.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}.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}body.embed-mode .copyright-footer{display:none}.dragging-light,.dragging-light *{cursor:grabbing!important}.light-draggable{cursor:grab}.hidden{display:none!important}@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)}.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}.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:700px){.teach-panel{inset:auto 0 0;width:100%;height:45vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0}.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}}body.embed-mode .progress-bar{top:49px}body.embed-mode .teach-panel{top:56px;bottom:var(--space-3)}body.embed-mode .controls-panel{top:56px}body.embed-mode .floating-tip,body.embed-mode .copyright-footer{display:none!important}@media(max-width:700px){body.embed-mode .teach-panel{top:auto;bottom:0;height:42vh}body.embed-mode .controls-panel{top:auto;bottom:0}}@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}}