:root{--color-bg: #0a0a0f;--color-bg-elevated: #12121a;--color-bg-muted: #1a1a24;--color-border: #2a2a38;--color-text: #e4e4eb;--color-text-muted: #8a8a9a;--color-primary: #8b5cf6;--color-primary-hover: #a78bfa;--color-secondary: #06b6d4;--color-accent: #f43f5e;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--shadow-sm: 0 1px 2px rgb(0 0 0 / .4);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .4);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .4);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .4), 0 8px 10px -6px rgb(0 0 0 / .4);--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.2}h1{font-size:2.5rem;letter-spacing:-.02em}h2{font-size:2rem;letter-spacing:-.01em}h3{font-size:1.5rem}h4{font-size:1.25rem}p{margin:0 0 var(--space-md)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;padding:0}img,svg{display:block;max-width:100%}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-md)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:.875rem;font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;border:none;text-decoration:none}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px)}.btn-secondary{background-color:var(--color-bg-muted);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-bg-elevated);border-color:var(--color-text-muted)}.btn-ghost{background-color:transparent;color:var(--color-text)}.btn-ghost:hover{background-color:var(--color-bg-muted)}.card{background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.tool-card{transition:all var(--transition-base)}.tool-card:hover{border-color:var(--color-primary);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.tool-card h3{transition:color var(--transition-fast)}.tool-card:hover h3{color:var(--color-primary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--transition-base) ease-out}.top-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:linear-gradient(to bottom,#0a0a0ff2,#0a0a0fcc);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}.top-bar-left{display:flex;align-items:center;gap:var(--space-md)}.logo{display:flex;align-items:center;gap:var(--space-sm);font-size:1.125rem;font-weight:600;color:var(--color-text);text-decoration:none}.logo-icon{font-size:1.5rem;color:var(--color-primary)}.logo-text{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.scene-name{padding:var(--space-xs) var(--space-sm);background:var(--color-bg-muted);border-radius:var(--radius-sm);font-size:.875rem;color:var(--color-text-muted)}.top-bar-right{display:flex;align-items:center;gap:var(--space-lg)}.top-nav{display:flex;gap:var(--space-xs)}.top-nav a{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:.875rem;font-weight:500;color:var(--color-text-muted);text-decoration:none;transition:all var(--transition-fast)}.top-nav a:hover,.top-nav a.active{color:var(--color-text);background:var(--color-bg-muted)}.visualizer-controls{display:flex;gap:var(--space-xs)}.icon-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--color-text-muted);transition:all var(--transition-fast)}.icon-button:hover{color:var(--color-text);background:var(--color-bg-muted)}.drawer-overlay{position:fixed;inset:0;z-index:198;background:#0009;opacity:0;visibility:hidden;transition:all var(--transition-base)}.drawer-overlay.open{opacity:1;visibility:visible}.control-drawer{position:fixed;top:0;right:0;bottom:0;z-index:199;width:340px;max-width:90vw;background:var(--color-bg-elevated);border-left:1px solid var(--color-border);transform:translate(100%);transition:transform var(--transition-base);display:flex;flex-direction:column}.control-drawer.open{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);border-bottom:1px solid var(--color-border)}.drawer-header h2{font-size:1.125rem;font-weight:600}.drawer-tabs{display:flex;padding:var(--space-sm) var(--space-md);gap:var(--space-sm);border-bottom:1px solid var(--color-border)}.tab-button{flex:1;padding:var(--space-sm);border-radius:var(--radius-md);font-size:.875rem;font-weight:500;color:var(--color-text-muted);background:transparent;transition:all var(--transition-fast)}.tab-button:hover,.tab-button.active{color:var(--color-text);background:var(--color-bg-muted)}.drawer-content{flex:1;overflow-y:auto;padding:var(--space-md)}.tab-panel{display:flex;flex-direction:column;gap:var(--space-lg)}.control-group{display:flex;flex-direction:column;gap:var(--space-md)}.control-group-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.control{display:flex;flex-direction:column;gap:var(--space-sm)}.control-header{display:flex;align-items:center;justify-content:space-between}.control-label{font-size:.875rem;font-weight:500}.control-value{font-size:.75rem;font-family:var(--font-mono);color:var(--color-text-muted)}.control-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--color-bg-muted);border-radius:var(--radius-full);outline:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-fast)}.control-slider::-webkit-slider-thumb:hover{background:var(--color-primary-hover)}.control-slider::-moz-range-thumb{width:16px;height:16px;background:var(--color-primary);border:none;border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-fast)}.control-slider::-moz-range-thumb:hover{background:var(--color-primary-hover)}.control-toggle{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:.875rem;font-weight:500;background:var(--color-bg-muted);color:var(--color-text-muted);transition:all var(--transition-fast)}.control-toggle.active{background:var(--color-primary);color:#fff}.control-select,.control-color{width:100%;padding:var(--space-sm);border-radius:var(--radius-md);background:var(--color-bg-muted);color:var(--color-text);border:1px solid var(--color-border);cursor:pointer}.control-color{height:40px;padding:var(--space-xs)}.control-description{font-size:.75rem;color:var(--color-text-muted);margin:0}.cinema-mode .top-bar,.cinema-mode .drawer-overlay,.cinema-mode .control-drawer{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.cinema-mode:hover .top-bar,.cinema-mode:hover .drawer-overlay.open,.cinema-mode:hover .control-drawer.open{opacity:1;visibility:visible}.visualizer-page{min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg)}.visualizer-container{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.visualizer-canvas{display:block;width:100%;height:100%}.audio-controls{position:fixed;bottom:var(--space-md);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#12121ae6;backdrop-filter:blur(10px);border:1px solid var(--color-border);border-radius:var(--radius-full);z-index:50}.audio-file-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);font-size:.875rem;font-weight:500;color:var(--color-text);background:var(--color-bg-muted);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast)}.audio-file-btn:hover{background:var(--color-bg-elevated);border-color:var(--color-text-muted)}.icon-button.active{color:var(--color-primary);background:#8b5cf626}.icon-button.recording{color:var(--color-error);animation:pulse 1s infinite}.share-button{position:relative}.share-tooltip{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);padding:var(--space-xs) var(--space-sm);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast)}.share-button:hover .share-tooltip{opacity:1}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.effect-select{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);font-size:.875rem;font-weight:500;color:var(--color-text);background:var(--color-bg-muted);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast)}.effect-select:hover{background:var(--color-bg-elevated)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.scenes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-lg);padding:var(--space-xl) 0}.scene-card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base);cursor:pointer;text-decoration:none;color:inherit;display:block}.scene-card:hover{border-color:var(--color-primary);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.scene-thumbnail{aspect-ratio:16/9;background:linear-gradient(135deg,var(--color-bg-muted),var(--color-bg));display:flex;align-items:center;justify-content:center;overflow:hidden}.scene-thumbnail canvas{width:100%;height:100%;object-fit:cover}.scene-thumbnail-placeholder{font-size:3rem;color:var(--color-text-muted);opacity:.3}.scene-info{padding:var(--space-md)}.scene-name{font-size:1rem;font-weight:600;margin-bottom:var(--space-xs);color:var(--color-text)}.scene-description{font-size:.875rem;color:var(--color-text-muted);line-height:1.4}.scene-category{display:inline-block;padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.scene-category.canvas2d{background:#06b6d426;color:var(--color-secondary)}.scene-category.webgl{background:#8b5cf626;color:var(--color-primary)}.scenes-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xl)}.scenes-filters{display:flex;gap:var(--space-sm)}.filter-btn{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);font-size:.875rem;font-weight:500;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast)}.filter-btn:hover{color:var(--color-text);background:var(--color-bg-muted)}.filter-btn.active{color:var(--color-text);background:var(--color-bg-muted);border-color:var(--color-text-muted)}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding-top:var(--space-3xl)}.visualizer-main{flex:1}.site-footer{background:var(--color-bg-elevated);border-top:1px solid var(--color-border);padding:var(--space-3xl) 0 var(--space-md);margin-top:var(--space-3xl)}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-xl);margin-bottom:var(--space-xl)}.footer-section h3{font-size:1rem;font-weight:600;margin-bottom:var(--space-sm);color:var(--color-text)}.footer-section h4{font-size:.875rem;font-weight:600;margin-bottom:var(--space-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:var(--space-sm)}.footer-links a,.footer-links button{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;transition:color var(--transition-fast);background:none;border:none;padding:0;cursor:pointer;display:inline}.footer-links a:hover,.footer-links button:hover{color:var(--color-primary)}.footer-links a[target=_blank]{position:relative;padding-right:var(--space-md)}.footer-links a[target=_blank]:after{content:"↗";position:absolute;right:0;font-size:.75rem}.footer-bottom{padding-top:var(--space-lg);border-top:1px solid var(--color-border);text-align:center}.footer-bottom p{margin:0;font-size:.875rem}@media(max-width:768px){.top-nav{display:none}.control-drawer{width:100%;max-width:100vw}.logo-text{display:none}.scene-name{font-size:.75rem}.audio-controls{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - var(--space-lg))}.effect-select{max-width:150px}.scenes-grid{grid-template-columns:1fr}}.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:999;padding:var(--space-md);background:linear-gradient(to top,var(--color-bg) 0%,rgba(10,10,15,.95) 100%);border-top:1px solid var(--color-border);box-shadow:0 -4px 20px #0006;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.cookie-banner-content{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-md)}@media(min-width:640px){.cookie-banner-content{flex-direction:row;align-items:center;justify-content:space-between}}.cookie-banner-text h3{font-size:1rem;margin-bottom:var(--space-xs)}.cookie-banner-text p{margin:0;font-size:.875rem;color:var(--color-text-muted)}.cookie-banner-buttons{display:flex;gap:var(--space-sm);flex-wrap:wrap}.modal-overlay{position:fixed;inset:0;z-index:1000;background:#000000b3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--space-md);animation:fadeIn .2s ease-out}.modal{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);max-width:560px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{transform:scale(.95) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);border-bottom:1px solid var(--color-border)}.modal-header h2{font-size:1.25rem}.modal-close{width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:var(--color-bg-muted);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.modal-close:hover{background:var(--color-border);color:var(--color-text)}.modal-body{padding:var(--space-lg);overflow-y:auto}.modal-footer{display:flex;gap:var(--space-sm);padding:var(--space-lg);border-top:1px solid var(--color-border);justify-content:flex-end}.cookie-preferences-modal{max-width:560px}.cookie-categories{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-lg)}.cookie-category{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md)}.cookie-category-info{flex:1}.cookie-category-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xs)}.cookie-category-header h4{margin:0;font-size:.9375rem}.cookie-category-badge{padding:var(--space-xs) var(--space-sm);background:var(--color-success);color:var(--color-bg);font-size:.6875rem;font-weight:600;border-radius:var(--radius-sm);text-transform:uppercase}.cookie-category p{margin:0;font-size:.8125rem;line-height:1.5}.cookie-links{display:flex;align-items:center;gap:var(--space-sm);font-size:.875rem;padding:var(--space-md) 0}.cookie-links span{color:var(--color-text-muted)}.toggle-switch{position:relative;width:48px;height:26px;background:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:2px;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.toggle-switch:hover{border-color:var(--color-text-muted)}.toggle-switch.enabled{background:var(--color-primary);border-color:var(--color-primary)}.toggle-slider{display:block;width:22px;height:22px;background:var(--color-text);border-radius:50%;transition:transform var(--transition-fast)}.toggle-switch.enabled .toggle-slider{transform:translate(22px)}.btn-link{background:none;border:none;color:var(--color-text-muted);padding:var(--space-sm) var(--space-md);cursor:pointer;font-size:.875rem;font-weight:500;transition:color var(--transition-fast)}.btn-link:hover{color:var(--color-text)}.cookie-link{color:var(--color-text-muted);font-size:.875rem;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}.cookie-link:hover{color:var(--color-primary);text-decoration-style:solid}@media(max-width:640px){.modal-footer{flex-direction:column}.modal-footer button{width:100%}.cookie-category{flex-direction:column}.toggle-switch{align-self:flex-start}}.language-switcher{position:relative;display:inline-block}.language-button{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:all var(--transition-fast);cursor:pointer}.language-button:hover{background:var(--color-bg-elevated);border-color:var(--color-text-muted)}.language-flag{font-size:1rem;line-height:1}.language-code{font-size:.75rem;font-weight:600;text-transform:uppercase}.language-arrow{transition:transform var(--transition-fast)}.language-arrow-open{transform:rotate(180deg)}.language-dropdown{position:absolute;top:calc(100% + var(--space-xs));right:0;min-width:160px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;z-index:100;animation:dropdownFadeIn .2s ease-out}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.language-option{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:none;border:none;color:var(--color-text);text-align:left;cursor:pointer;transition:background var(--transition-fast);position:relative}.language-option:hover{background:var(--color-bg-muted)}.language-option.active{background:var(--color-bg-muted);color:var(--color-primary);font-weight:500}.language-name{font-size:.875rem}.language-check{margin-left:auto;color:var(--color-primary)}@media(max-width:768px){.language-dropdown{right:auto;left:0}}