:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffeb;background-color:#0d0d0d;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--glass-bg: rgba(20, 20, 20, .6);--glass-border: rgba(255, 255, 255, .1);--glass-blur: 20px;--accent-color: #a3b18a;--accent-hover: #dad7cd}body{margin:0;padding:0;width:100vw;min-height:100vh;overflow-x:hidden;overflow-y:auto}#root{width:100%;min-height:100%}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.scene-background{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden}.scene-image{width:100%;height:100%;background-size:cover;background-position:center;transition:background-image 1s ease-in-out;filter:brightness(.8)}.scene-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.4) 100%);pointer-events:none}.scene-selector{margin-top:2rem;width:100%}.selector-title{font-size:1.2rem;margin-bottom:1rem;color:#fffc;text-transform:uppercase;letter-spacing:.1rem}.thumbnails-container{display:flex;gap:1rem;overflow-x:auto;padding:.5rem;justify-content:center;scrollbar-width:none}.thumbnails-container::-webkit-scrollbar{display:none}.scene-thumbnail{background:transparent;border:2px solid transparent;padding:0;border-radius:12px;width:100px;height:80px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s;flex-shrink:0}.scene-thumbnail:hover{transform:translateY(-4px);border-color:#ffffff80}.scene-thumbnail.active{border-color:var(--accent-color);box-shadow:0 0 10px var(--accent-color)}.scene-thumbnail img{width:100%;height:100%;object-fit:cover}.scene-name{position:absolute;bottom:0;left:0;width:100%;background:#0009;color:#fff;font-size:.7rem;padding:4px 0;text-align:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.scene-thumbnail:focus{outline:2px solid var(--accent-color);outline-offset:2px}.scene-thumbnail:focus:not(:focus-visible){outline:none}@media(max-width:768px){.selector-title{font-size:1rem}.scene-thumbnail{width:90px;height:70px}.scene-name{font-size:.65rem}}@media(max-width:480px){.thumbnails-container{gap:.75rem}.scene-thumbnail{width:80px;height:60px}}.sound-mixer{width:100%;margin-top:2rem;padding:1rem;background:#0003;border-radius:16px}.mixer-title{font-size:1.2rem;margin-bottom:1.5rem;color:#ffffffe6;text-align:left;padding-left:.5rem}.mixer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.sound-track{display:flex;flex-direction:column;align-items:center;padding:1rem;background:#ffffff0d;border-radius:12px;transition:all .3s ease;border:1px solid transparent}.sound-track:hover{background:#ffffff1a}.sound-track.active{background:rgba(var(--accent-color-rgb),.1);background:#a3b18a33;border-color:var(--accent-color);box-shadow:0 4px 12px #0003}.track-controls{display:flex;flex-direction:column;align-items:center;width:100%;gap:.8rem}.play-button{width:50px;height:50px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:#0003;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:1.5rem;padding:0}.play-button .icon{display:inline-block;line-height:1;font-style:normal}.play-button:hover{transform:scale(1.05);border-color:var(--accent-color);background:#ffffff1a}.sound-track.active .play-button{border-color:var(--accent-color);background:var(--accent-color);color:#1a1a1a}.track-info{display:flex;flex-direction:column;align-items:center;width:100%;gap:.5rem}.track-name{font-size:.9rem;font-weight:500;opacity:.8}.volume-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#fff3;border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-color);cursor:pointer;transition:transform .1s}.volume-slider:disabled{opacity:.5;cursor:not-allowed}.volume-slider:disabled::-webkit-slider-thumb{background:#666}.error-message{font-size:.7rem;color:#ff6b6b;margin-top:.2rem}.icon.loading{animation:spin 1s linear infinite}.icon.error{color:#ff6b6b}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.mixer-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}.sound-track{padding:.75rem}.play-button{width:44px;height:44px;font-size:1.3rem}.track-name{font-size:.8rem}}@media(max-width:480px){.mixer-grid{grid-template-columns:repeat(2,1fr)}}.timer-container{background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:1.25rem;margin-top:1.5rem;border:1px solid rgba(255,255,255,.1)}.timer-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.timer-icon{font-size:1.25rem}.timer-title{font-size:1rem;font-weight:500;color:#ffffffe6}.timer-presets{display:flex;flex-wrap:wrap;gap:.5rem}.timer-preset-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:.5rem 1rem;color:#ffffffd9;font-size:.875rem;cursor:pointer;transition:all .2s ease}.timer-preset-btn:hover{background:#ffffff2e;border-color:#ffffff40;transform:translateY(-1px)}.timer-preset-btn:active{transform:translateY(0)}.timer-active{display:flex;flex-direction:column;align-items:center;gap:.75rem}.timer-display{font-size:2.5rem;font-weight:600;font-variant-numeric:tabular-nums;color:#fffffff2;letter-spacing:.05em}.timer-display.fading{animation:pulse 1.5s ease-in-out infinite;color:#fbbf24}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.timer-fading-hint{font-size:.75rem;color:#fbbf24;opacity:.9}.timer-cancel-btn{background:#ef444433;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:.5rem 1.5rem;color:#fca5a5;font-size:.875rem;cursor:pointer;transition:all .2s ease}.timer-cancel-btn:hover{background:#ef44444d;border-color:#ef444480}@media(max-width:480px){.timer-container{padding:1rem}.timer-presets{justify-content:center}.timer-preset-btn{padding:.5rem .75rem;font-size:.8125rem}.timer-display{font-size:2rem}}.preset-selector{margin-top:1.5rem}.preset-title{font-size:1rem;font-weight:500;color:#ffffffe6;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.preset-title:before{content:"✨"}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.preset-card{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:1rem .75rem;background:#ffffff0f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .25s ease;text-align:center}.preset-card:hover{background:#ffffff1f;border-color:#fff3;transform:translateY(-2px)}.preset-card:active{transform:translateY(0)}.preset-card.active{background:#6366f133;border-color:#6366f180;box-shadow:0 0 20px #6366f133}.preset-icon{font-size:1.75rem;line-height:1}.preset-name{font-size:.875rem;font-weight:500;color:#fffffff2}.preset-desc{font-size:.6875rem;color:#ffffff80;line-height:1.3}@media(max-width:640px){.preset-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:400px){.preset-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.preset-card{padding:.75rem .5rem}.preset-icon{font-size:1.5rem}.preset-name{font-size:.8125rem}.preset-desc{font-size:.625rem}}.preset-grid.horizontal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}.preset-grid.horizontal .preset-card{flex-shrink:0;width:140px;scroll-snap-align:start}.preset-grid.horizontal::-webkit-scrollbar{height:4px}.preset-grid.horizontal::-webkit-scrollbar-track{background:#ffffff0d;border-radius:2px}.preset-grid.horizontal::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.global-controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1.5rem;background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50px;border:1px solid rgba(255,255,255,.1);margin-bottom:1.5rem}.global-play-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#ffffffe6;cursor:pointer;transition:all .25s ease}.global-play-btn:hover{background:#ffffff2e;transform:scale(1.05)}.global-play-btn.playing{background:#6366f14d;border-color:#6366f180}.global-play-btn svg{width:24px;height:24px}.volume-control{display:flex;align-items:center;gap:.75rem}.mute-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:transparent;border:none;color:#ffffffb3;cursor:pointer;transition:all .2s ease}.mute-btn:hover{color:#fffffff2;background:#ffffff1a}.mute-btn.muted{color:#ef4444}.master-volume-slider{width:120px;height:6px;-webkit-appearance:none;appearance:none;background:#ffffff26;border-radius:3px;outline:none;cursor:pointer}.master-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:transform .15s ease}.master-volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.master-volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.volume-percentage{font-size:.8125rem;font-weight:500;color:#ffffffb3;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}@media(max-width:480px){.global-controls{padding:.75rem 1rem;gap:.75rem}.global-play-btn{width:44px;height:44px}.master-volume-slider{width:80px}.volume-percentage{display:none}}.keyboard-hint-trigger{position:fixed;bottom:1.5rem;right:1.5rem;width:40px;height:40px;border-radius:50%;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);color:#ffffffb3;font-size:1rem;cursor:pointer;transition:all .2s ease;z-index:100;display:flex;align-items:center;justify-content:center}.keyboard-hint-trigger:hover{background:#ffffff2e;color:#fffffff2;transform:scale(1.05)}.keyboard-hints-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.keyboard-hints-modal{background:#1e1e23f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;min-width:280px;max-width:90vw;animation:slideUp .25s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.keyboard-hints-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.1)}.keyboard-hints-header h3{font-size:1.125rem;font-weight:600;color:#fffffff2;margin:0}.keyboard-hints-close{background:transparent;border:none;color:#ffffff80;font-size:1rem;cursor:pointer;padding:.25rem;transition:color .2s}.keyboard-hints-close:hover{color:#ffffffe6}.keyboard-hints-list{display:flex;flex-direction:column;gap:.75rem}.keyboard-hint-item{display:flex;align-items:center;gap:1rem}.keyboard-key{display:inline-flex;align-items:center;justify-content:center;min-width:48px;padding:.375rem .625rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#ffffffd9}.keyboard-desc{font-size:.875rem;color:#ffffffb3}.keyboard-hints-footer{margin-top:1.25rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1);font-size:.75rem;color:#fff6;text-align:center}.keyboard-hints-footer kbd{display:inline-flex;align-items:center;justify-content:center;padding:.125rem .375rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:4px;font-family:inherit;font-size:.6875rem;margin:0 .25rem}.share-button-container{position:relative;display:inline-flex}.share-button{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#ffffffd9;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.share-button:hover{background:#ffffff24;border-color:#fff3;transform:translateY(-1px)}.share-button:active{transform:translateY(0)}.share-button svg{flex-shrink:0}.share-toast{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);padding:.5rem 1rem;background:#1e1e23f2;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#ffffffe6;font-size:.8125rem;white-space:nowrap;animation:toastIn .2s ease;z-index:100}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-width:480px){.share-button{padding:.5rem .75rem;font-size:.8125rem}.share-button span{display:none}}.seo-content{max-width:900px;margin:3rem auto 2rem;padding:2rem;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;color:#ffffffe6;line-height:1.7;position:relative;z-index:10}.back-to-tool{display:block;margin:0 auto 2rem;padding:.8rem 2rem;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:50px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-to-tool:hover{background:#ffffff40;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.seo-section{margin-bottom:3rem}.seo-section:last-child{margin-bottom:0}.seo-section h2{font-size:1.8rem;margin-bottom:1rem;color:#fff;font-weight:600}.seo-section h3{font-size:1.3rem;margin-top:1.5rem;margin-bottom:.5rem;color:#fff;font-weight:500}.seo-section p{margin-bottom:1rem;font-size:1rem;color:#ffffffd9}.seo-section ul,.seo-section ol{margin:1rem 0;padding-left:1.5rem}.seo-section li{margin-bottom:.8rem;color:#ffffffd9}.seo-section li strong{color:#fff;font-weight:600}.faq-section{margin-top:3rem}.faq-item{margin-bottom:2rem;padding:1.5rem;background:#ffffff08;border-radius:12px;border-left:3px solid rgba(255,255,255,.2)}.faq-item:last-child{margin-bottom:0}.faq-item h3{margin-top:0;font-size:1.2rem}.faq-item p{margin-bottom:0}@media(max-width:768px){.seo-content{margin:2rem 1rem;padding:1.5rem}.seo-section h2{font-size:1.5rem}.seo-section h3{font-size:1.1rem}.faq-item{padding:1rem}}.app-container{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;position:relative;color:#fff;overflow-y:auto}.main-content{z-index:10;text-align:center;padding:2rem;margin-top:4rem;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:24px;box-shadow:0 8px 32px #0000005e;max-width:800px;width:90%;animation:fadeIn 1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.title{font-size:3rem;margin-bottom:2rem;font-weight:300;letter-spacing:.2rem;text-shadow:0 2px 4px rgba(0,0,0,.5)}@media(max-width:768px){.main-content{padding:1.5rem;width:95%;border-radius:16px}.title{font-size:2rem;letter-spacing:.1rem;margin-bottom:1.5rem}}@media(max-width:480px){.main-content{padding:1rem;width:98%}.title{font-size:1.5rem;margin-bottom:1rem}}.learn-more-btn{margin-top:2rem;padding:.8rem 2rem;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:50px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.learn-more-btn:hover{background:#fff3;border-color:#ffffff80;transform:translateY(2px)}.share-section{margin-top:1.5rem;display:flex;justify-content:center}