:root{--color-bg:#0f1117;--color-surface:#1a1d27;--color-surface-hover:#242836;--color-surface-active:#2d3145;--color-border:#2a2e3d;--color-text:#e4e4e7;--color-text-muted:#9ca3af;--color-text-dim:#6b7280;--color-accent:#6366f1;--color-accent-light:#818cf8;--color-accent-dim:#4f46e5;--color-cyan:#22d3ee;--color-cyan-dim:#0891b2;--color-success:#22c55e;--color-warning:#eab308;--color-danger:#ef4444;--color-bronze:#cd7f32;--color-silver:silver;--color-gold:gold;--color-platinum:#e5e4e2;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 24px #00000080;--sidebar-width:260px;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes flowParticle{0%{offset-distance:0%;opacity:0}5%{opacity:1}95%{opacity:1}to{offset-distance:100%;opacity:0}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes drawLine{0%{stroke-dashoffset:1000px}to{stroke-dashoffset:0}}@keyframes bounceIn{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes ripple{0%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.animate-on-view{opacity:0;transition:opacity .6s,transform .6s;transform:translateY(30px)}.animate-on-view.visible{opacity:1;transform:translateY(0)}.stagger-1{transition-delay:50ms}.stagger-2{transition-delay:.1s}.stagger-3{transition-delay:.15s}.stagger-4{transition-delay:.2s}.stagger-5{transition-delay:.25s}.stagger-6{transition-delay:.3s}.stagger-7{transition-delay:.35s}.stagger-8{transition-delay:.4s}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-size:15px;line-height:1.5}#root{min-height:100vh}::selection{background:var(--color-accent);color:#fff}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-dim)}.process-bar{z-index:10;pointer-events:auto;transform-origin:top;opacity:1;justify-content:center;align-items:center;gap:0;padding:50px 24px 16px;display:flex;position:fixed;top:0;left:0;right:0;transform:scale(1.5)}.process-tile-wrapper{align-items:center;gap:0;display:flex}.process-arrow{background:rgba(var(--accent-rgb,99,102,241), .15);width:32px;height:2px;transition:background .5s;position:relative}.process-arrow:after{content:"";border:solid rgba(var(--accent-rgb,99,102,241), .15);border-width:0 2px 2px 0;padding:3px;transition:border-color .5s;position:absolute;top:-4px;right:-4px;transform:rotate(-45deg)}.process-arrow--lit{background:rgba(var(--accent-rgb,99,102,241), .6)}.process-arrow--lit:after{border-color:rgba(var(--accent-rgb,99,102,241), .6)}.process-tile{-webkit-backdrop-filter:blur(16px);cursor:pointer;background:#00000073;border:1px solid #ffffff14;border-radius:14px;justify-content:center;align-items:center;gap:14px;min-width:180px;padding:18px 32px;transition:all .4s;display:flex;position:relative;overflow:hidden}.process-tile--active{background:rgba(var(--accent-rgb,99,102,241), .25);border-color:rgba(var(--accent-rgb,99,102,241), .7);box-shadow:0 0 24px rgba(var(--accent-rgb,99,102,241), .4), 0 0 80px rgba(var(--accent-rgb,99,102,241), .15), inset 0 0 24px rgba(var(--accent-rgb,99,102,241), .1)}.process-tile--completed{background:rgba(var(--accent-rgb,99,102,241), .1);border-color:rgba(var(--accent-rgb,99,102,241), .35);box-shadow:0 0 15px rgba(var(--accent-rgb,99,102,241), .15)}.process-tile__fill{background:linear-gradient(90deg, rgba(var(--accent-rgb,99,102,241), .2), rgba(var(--accent-rgb,99,102,241), .08));pointer-events:none;transition:width .1s linear;position:absolute;top:0;bottom:0;left:0}.process-tile__label{z-index:1;font-family:var(--font-sans);color:#ffffffd9;white-space:nowrap;text-shadow:0 2px 4px #000c,0 4px 12px #00000080;font-size:18px;font-weight:600;transition:color .4s,text-shadow .4s;position:relative}.process-tile--active .process-tile__label{color:#fff;text-shadow:0 0 12px rgba(var(--accent-rgb,99,102,241), .6), 0 2px 4px #000c}.process-tile--completed .process-tile__label{color:var(--color-accent-light)}.process-tile__indicator{z-index:1;background:rgba(var(--accent-rgb,99,102,241), .15);width:30px;height:30px;color:var(--color-text-dim);border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:600;transition:all .4s;display:flex;position:relative}.process-tile--active .process-tile__indicator{background:rgba(var(--accent-rgb,99,102,241), .3);color:var(--color-accent-light);box-shadow:0 0 10px rgba(var(--accent-rgb,99,102,241), .3)}.process-tile--completed .process-tile__indicator{background:rgba(var(--accent-rgb,99,102,241), .25);color:var(--color-accent-light)}@media (width<=900px){.process-bar{flex-wrap:wrap;gap:4px;padding:8px 12px}.process-tile{min-width:auto;padding:6px 10px}.process-tile__label{font-size:11px}.process-arrow{width:16px}}@media (width<=600px){.process-bar{flex-direction:column;align-items:stretch;gap:2px}.process-arrow{align-self:center;width:2px;height:12px}.process-arrow:after{top:auto;bottom:-4px;right:-4px;transform:rotate(45deg)}}.karaoke-container{z-index:5;text-align:left;pointer-events:none;background:#000000b3;border-radius:16px;padding:32px 48px;position:fixed;bottom:150px;left:30px;right:30px}.karaoke-title{font-family:var(--font-sans);font-size:var(--karaoke-body-size,110px);text-transform:uppercase;letter-spacing:6px;color:var(--color-accent-light);margin-bottom:16px;font-weight:700}.karaoke-text{font-family:var(--font-sans);font-size:var(--karaoke-body-size,110px);color:#fff;margin:0;font-weight:400;line-height:1.3}@media (width<=768px){.karaoke-container{padding:20px 24px}.karaoke-text,.karaoke-title{font-size:48px}}.preset-selector{z-index:20;align-items:center;gap:10px;display:flex;position:fixed;top:70px;right:24px}.preset-selector__label{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:1.5px;color:var(--color-text-dim);font-size:11px;font-weight:600}.preset-selector__select{font-family:var(--font-sans);color:var(--color-text);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(var(--accent-rgb,99,102,241), .25);border-radius:var(--radius-md);cursor:pointer;appearance:none;background:#1a1d27b3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 10px center no-repeat;outline:none;padding:8px 32px 8px 14px;font-size:13px;font-weight:500;transition:all .3s}.preset-selector__select:hover{border-color:rgba(var(--accent-rgb,99,102,241), .5);box-shadow:0 0 16px rgba(var(--accent-rgb,99,102,241), .15)}.preset-selector__select:focus{border-color:rgba(var(--accent-rgb,99,102,241), .6);box-shadow:0 0 20px rgba(var(--accent-rgb,99,102,241), .2)}.preset-selector__select option{color:var(--color-text);background:#1a1d27;padding:8px}@media (width<=768px){.preset-selector{top:auto;bottom:24px;right:16px}}.settings-toggle{z-index:25;border:1px solid rgba(var(--accent-rgb,99,102,241), .3);-webkit-backdrop-filter:blur(12px);width:40px;height:40px;color:var(--color-text-muted);cursor:pointer;background:#1a1d27cc;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex;position:fixed;bottom:24px;right:24px}.settings-toggle:hover{border-color:rgba(var(--accent-rgb,99,102,241), .6);color:var(--color-text);box-shadow:0 0 16px rgba(var(--accent-rgb,99,102,241), .2)}.settings-panel{z-index:25;-webkit-backdrop-filter:blur(20px);border:1px solid rgba(var(--accent-rgb,99,102,241), .2);background:#0f1117f2;border-radius:16px;width:320px;max-height:70vh;padding:20px;position:fixed;bottom:74px;right:24px;overflow-y:auto;box-shadow:0 8px 32px #00000080}.settings-panel::-webkit-scrollbar{width:6px}.settings-panel::-webkit-scrollbar-track{background:0 0}.settings-panel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.sp-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.sp-title{letter-spacing:.5px;color:var(--color-text);font-size:14px;font-weight:600}.sp-close{color:var(--color-text-dim);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:20px;line-height:1}.sp-close:hover{color:var(--color-text)}.sp-section{margin-bottom:16px}.sp-section-label{text-transform:uppercase;letter-spacing:1px;color:var(--color-text-dim);margin-bottom:10px;font-size:11px;font-weight:600}.sp-font-row{align-items:center;gap:10px;display:flex}.sp-range{appearance:none;background:rgba(var(--accent-rgb,99,102,241), .2);border-radius:2px;outline:none;flex:1;height:4px}.sp-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-accent,#6366f1);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px rgba(var(--accent-rgb,99,102,241), .4);border-radius:50%}.sp-range::-moz-range-thumb{background:var(--color-accent,#6366f1);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px}.sp-num-input{font-family:var(--font-mono,monospace);color:var(--color-text);border:1px solid rgba(var(--accent-rgb,99,102,241), .15);text-align:center;background:#1a1d2799;border-radius:5px;outline:none;width:52px;padding:4px 6px;font-size:12px}.sp-num-input:focus{border-color:rgba(var(--accent-rgb,99,102,241), .4)}.sp-unit{color:var(--color-text-dim);font-size:11px}.sp-collections{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.sp-coll-btn{border:1px solid rgba(var(--accent-rgb,99,102,241), .1);cursor:pointer;background:#1a1d2780;border-radius:8px;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:6px 8px;transition:all .2s;display:flex}.sp-coll-btn:hover{border-color:rgba(var(--accent-rgb,99,102,241), .3)}.sp-coll-btn.editing{border-color:rgba(var(--accent-rgb,99,102,241), .5);background:rgba(var(--accent-rgb,99,102,241), .1)}.sp-coll-btn.active:after{content:"";background:var(--color-accent,#6366f1);border-radius:50%;width:4px;height:4px;margin-top:2px;display:block}.sp-coll-preview{gap:2px;display:flex}.sp-mini-swatch{border-radius:2px;width:6px;height:12px}.sp-coll-name{color:var(--color-text-dim);text-overflow:ellipsis;white-space:nowrap;max-width:50px;font-size:9px;overflow:hidden}.sp-add-btn{color:var(--color-text-dim);justify-content:center;font-size:18px}.sp-editor{border-top:1px solid rgba(var(--accent-rgb,99,102,241), .1);padding-top:14px}.sp-editor-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.sp-name-input{font-family:var(--font-sans);color:var(--color-text);border:1px solid rgba(var(--accent-rgb,99,102,241), .15);background:#1a1d2799;border-radius:6px;outline:none;width:160px;padding:5px 10px;font-size:13px;font-weight:500;transition:border-color .2s}.sp-name-input:focus{border-color:rgba(var(--accent-rgb,99,102,241), .4)}.sp-delete{font-family:var(--font-sans);color:var(--color-danger,#ef4444);cursor:pointer;background:0 0;border:1px solid #ef444433;border-radius:6px;padding:4px 10px;font-size:11px;transition:all .2s}.sp-delete:hover{background:#ef44441a;border-color:#ef444466}.sp-swatches{flex-direction:column;gap:8px;margin-bottom:14px;display:flex}.sp-swatch-row{justify-content:space-between;align-items:center;display:flex}.sp-swatch-label{color:var(--color-text-muted);flex-shrink:0;width:110px;font-size:11px}.sp-swatch-controls{align-items:center;gap:6px;display:flex}.sp-color-picker{cursor:pointer;background:0 0;border:none;border-radius:6px;width:28px;height:28px;padding:0}.sp-color-picker::-webkit-color-swatch-wrapper{padding:0}.sp-color-picker::-webkit-color-swatch{border:1px solid #ffffff1a;border-radius:5px}.sp-color-picker::-moz-color-swatch{border:1px solid #ffffff1a;border-radius:5px}.sp-hex-input{font-family:var(--font-mono,monospace);color:var(--color-text);border:1px solid rgba(var(--accent-rgb,99,102,241), .12);background:#1a1d2799;border-radius:5px;outline:none;width:72px;padding:4px 6px;font-size:11px}.sp-hex-input:focus{border-color:rgba(var(--accent-rgb,99,102,241), .35)}.sp-swatch-preview{border:1px solid #ffffff14;border-radius:4px;flex-shrink:0;width:20px;height:20px}.sp-apply-btn{border:1px solid rgba(var(--accent-rgb,99,102,241), .3);background:rgba(var(--accent-rgb,99,102,241), .15);width:100%;color:var(--color-text);font-family:var(--font-sans);cursor:pointer;border-radius:8px;padding:8px;font-size:13px;font-weight:500;transition:all .3s}.sp-apply-btn:hover{background:rgba(var(--accent-rgb,99,102,241), .25);border-color:rgba(var(--accent-rgb,99,102,241), .5)}.sp-apply-btn.applied{border-color:rgba(var(--accent-rgb,99,102,241), .2);background:rgba(var(--accent-rgb,99,102,241), .05);color:var(--color-text-dim);cursor:default}@media (width<=600px){.settings-panel{width:auto;bottom:74px;left:8px;right:8px}}.scroll-experience{background:var(--color-bg);width:100%;position:relative}.experience-canvas{z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0}.scroll-spacer{z-index:1;pointer-events:none;position:relative}.scroll-hint{z-index:15;pointer-events:none;flex-direction:column;align-items:center;gap:8px;animation:1s 1s both fadeInHint,1s 4s both fadeOutHint;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.scroll-hint__text{font-family:var(--font-sans);color:var(--color-text-dim);letter-spacing:1px;text-transform:uppercase;font-size:13px}.scroll-hint__arrow{border:solid var(--color-text-dim);border-width:0 2px 2px 0;width:20px;height:20px;animation:1.5s infinite bounceArrow;transform:rotate(45deg)}@keyframes fadeInHint{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes fadeOutHint{0%{opacity:1}to{opacity:0}}@keyframes bounceArrow{0%,to{transform:rotate(45deg)translateY(0)}50%{transform:rotate(45deg)translateY(6px)}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{overflow-x:hidden}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}