@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--primary-color: #4a6bdf;--primary-dark: #3351b9;--primary-light: #cbd5f7;--secondary-color: #34c3ff;--accent-color: #ff9d6c;--text-color: #333333;--text-light: #666666;--text-lighter: #999999;--background-color: #ffffff;--background-alt: #f7f9fc;--header-background: #f0f4fc;--border-color: #e0e0e0;--error-color: #e53935;--success-color: #43a047;--warning-color: #ff9800;--scene-urban: #e3f2fd;--scene-beach: #e0f7fa;--scene-mountain: #e8f5e9;--scene-forest: #dcedc8;--scene-desert: #fff3e0;--scene-rural: #f1f8e9;--scene-indoor: #f3e5f5;--scene-default: #f5f5f5;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 3rem;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--font-size-xxxl: 3rem;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 20px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .15);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--z-index-dropdown: 1000;--z-index-sticky: 1100;--z-index-fixed: 1200;--z-index-modal-backdrop: 1300;--z-index-modal: 1400;--z-index-popover: 1500;--z-index-tooltip: 1600}.dark-mode{--primary-color: #6c8fff;--primary-dark: #5272e0;--primary-light: #2a396b;--secondary-color: #4dceff;--accent-color: #ff9d6c;--text-color: #e6e6e6;--text-light: #b0b0b0;--text-lighter: #888888;--background-color: #121212;--background-alt: #1e1e1e;--header-background: #1a1a1a;--border-color: #333333;--error-color: #f44336;--success-color: #66bb6a;--warning-color: #ffa726;--scene-urban: #1a2636;--scene-beach: #1a3236;--scene-mountain: #1a2e1a;--scene-forest: #2a331c;--scene-desert: #332c1c;--scene-rural: #283218;--scene-indoor: #2d1e36;--scene-default: #262626;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px rgba(0, 0, 0, .25);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .4)}.high-contrast:not(.dark-mode){--primary-color: #0066cc;--primary-dark: #004c99;--primary-light: #b3d1ff;--secondary-color: #008080;--accent-color: #ff6600;--text-color: #000000;--text-light: #333333;--text-lighter: #555555;--background-color: #ffffff;--background-alt: #f0f0f0;--header-background: #e6e6e6;--border-color: #000000;--scene-urban: #ccddff;--scene-beach: #ccffff;--scene-mountain: #ccffcc;--scene-forest: #ddffcc;--scene-desert: #ffeecc;--scene-rural: #eeffcc;--scene-indoor: #eeccff;--scene-default: #eeeeee}.high-contrast.dark-mode{--primary-color: #4d94ff;--primary-dark: #1a75ff;--primary-light: #0047b3;--secondary-color: #00cccc;--accent-color: #ff8533;--text-color: #ffffff;--text-light: #cccccc;--text-lighter: #aaaaaa;--background-color: #000000;--background-alt: #0d0d0d;--header-background: #111111;--border-color: #ffffff;--scene-urban: #0a1429;--scene-beach: #0a1a1a;--scene-mountain: #0a1a0a;--scene-forest: #111a0a;--scene-desert: #1a1505;--scene-rural: #101a0a;--scene-indoor: #1a0d29;--scene-default: #141414}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:var(--font-family);font-size:var(--font-size-md);line-height:1.5;color:var(--text-color);background-color:var(--background-color)}a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-dark)}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}button{cursor:pointer}ul,ol{list-style:none}img{max-width:100%;height:auto;display:block}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;padding:var(--spacing-md);max-width:1200px;margin:0 auto;width:100%}@media (min-width: 768px){.main-content{padding:var(--spacing-lg)}}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-bottom:var(--spacing-md);color:var(--text-color)}h1{font-size:var(--font-size-xxxl)}h2{font-size:var(--font-size-xxl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}p{margin-bottom:var(--spacing-md)}.subtitle{color:var(--text-light);font-size:var(--font-size-lg);margin-bottom:var(--spacing-lg)}Button Styles .button,button{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-md);font-weight:500;transition:all var(--transition-fast);border:none;background-color:var(--primary-color);color:#fff}.button:hover,button:hover{background-color:var(--primary-dark);transform:translateY(-1px)}.button:focus,button:focus{outline:2px solid var(--primary-light);outline-offset:2px}.button:active,button:active{transform:translateY(1px)}.button:disabled,button:disabled{background-color:var(--text-lighter);cursor:not-allowed}.button-secondary{background-color:var(--secondary-color)}.button-secondary:hover{background-color:var(--secondary-color);filter:brightness(.9)}.button-text{background-color:transparent;color:var(--primary-color);padding:var(--spacing-xs) var(--spacing-sm)}.button-text:hover{background-color:var(--primary-light);color:var(--primary-dark)}.example-button{background-color:var(--accent-color)}.example-button:hover{background-color:var(--accent-color);filter:brightness(.9)}.reset-button{background-color:var(--text-light)}.reset-button:hover{background-color:var(--text-color)}.cancel-button{background-color:transparent;color:var(--text-light);border:1px solid var(--border-color);padding:var(--spacing-xs) var(--spacing-md)}.cancel-button:hover{background-color:var(--background-alt);color:var(--text-color)}.app-header{background-color:var(--header-background);box-shadow:var(--shadow-sm);padding:var(--spacing-md);position:sticky;top:0;z-index:var(--z-index-sticky)}.header-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.logo{display:flex;align-items:center;gap:var(--spacing-sm)}.logo-icon{width:24px;height:24px;fill:var(--primary-color)}.logo-text{font-weight:700;font-size:var(--font-size-lg);color:var(--text-color)}.main-nav{display:flex;align-items:center}.nav-list{display:none}@media (min-width: 768px){.nav-list{display:flex;gap:var(--spacing-lg)}.menu-toggle{display:none}}.nav-list.open{display:flex;flex-direction:column;position:absolute;top:60px;right:0;background-color:var(--header-background);box-shadow:var(--shadow-md);padding:var(--spacing-md);width:200px;border-radius:var(--border-radius-md);z-index:var(--z-index-dropdown)}.nav-item a{color:var(--text-color);font-weight:500;transition:color var(--transition-fast)}.nav-item a:hover{color:var(--primary-color)}.menu-toggle{background:none;border:none;width:32px;height:32px;position:relative;z-index:100}.menu-icon,.menu-icon:before,.menu-icon:after{display:block;position:absolute;height:3px;width:24px;background-color:var(--text-color);border-radius:3px;transition:transform var(--transition-fast)}.menu-icon{top:15px}.menu-icon:before{content:"";top:-8px}.menu-icon:after{content:"";top:8px}.menu-toggle.open .menu-icon{background-color:transparent}.menu-toggle.open .menu-icon:before{transform:translateY(8px) rotate(45deg)}.menu-toggle.open .menu-icon:after{transform:translateY(-8px) rotate(-45deg)}.app-footer{background-color:var(--background-alt);padding:var(--spacing-xl) var(--spacing-md);margin-top:var(--spacing-xxl);min-height:100px;display:flex;align-items:flex-end}.footer-container{max-width:1200px;margin:0 auto;width:100%;display:flex;justify-content:flex-end}@media (min-width: 768px){.footer-container{justify-content:flex-end}}.footer-logo{display:flex;align-items:center;gap:var(--spacing-sm)}.footer-nav-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.footer-credits{text-align:right;color:var(--text-light);font-size:var(--font-size-sm)}@media (min-width: 768px){.footer-credits{text-align:right}}.copyright{margin-top:var(--spacing-md)}.home-container{display:flex;flex-direction:column;gap:var(--spacing-xl)}.hero-section{text-align:center;margin:var(--spacing-xl) 0}.cta-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-xl)}@media (min-width: 768px){.cta-container{flex-direction:row;justify-content:center}}.or-divider{color:var(--text-light);margin:var(--spacing-sm) 0}.image-uploader{max-width:600px;margin:0 auto;text-align:center}.drag-drop-zone{border:2px dashed var(--border-color);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);margin:var(--spacing-lg) 0;transition:all var(--transition-fast);background-color:var(--background-alt);cursor:pointer}.drag-drop-zone:hover,.drag-drop-zone.dragging{border-color:var(--primary-color);background-color:var(--primary-light)}.drag-drop-zone.uploading{border-color:var(--primary-color);background-color:var(--primary-light);opacity:.8}.drag-drop-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.upload-icon{width:48px;height:48px;color:var(--primary-color)}.drag-text{font-size:var(--font-size-lg);font-weight:500}.or-text{color:var(--text-light)}.browse-button{background-color:var(--primary-color);color:#fff;padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--border-radius-md);border:none;font-weight:600;font-size:var(--font-size-md);transition:background-color var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-sm);cursor:pointer}.browse-button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.browse-button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.browse-button:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px}.browse-button:disabled{background-color:var(--text-lighter);transform:none;box-shadow:none;cursor:not-allowed;opacity:.7}.file-requirements{margin-top:var(--spacing-md);color:var(--text-light);font-size:var(--font-size-sm)}.image-preview-container{max-width:600px;margin:0 auto;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}.image-preview-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background-color:var(--background-alt)}.image-preview-content{padding:var(--spacing-md);background-color:var(--background-color);display:flex;justify-content:center;align-items:center;min-height:200px}.image-wrapper{width:100%;max-height:400px;overflow:hidden;display:flex;justify-content:center;align-items:center}.preview-image{object-fit:contain;max-height:400px;width:auto;max-width:100%}.image-loading,.image-error{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);color:var(--text-light)}.image-preview-footer{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--background-alt);font-size:var(--font-size-sm);color:var(--text-light)}.loading-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-xl);max-width:600px;margin:0 auto;text-align:center}.loading-text h3{margin-bottom:var(--spacing-sm)}.processing-step{color:var(--text-light)}.progress-container{width:100%;height:8px;background-color:var(--primary-light);border-radius:4px;overflow:hidden;position:relative;margin:var(--spacing-md) 0}.progress-bar{height:100%;background-color:var(--primary-color);border-radius:4px;transition:width var(--transition-normal)}.progress-text{position:absolute;top:8px;right:0;font-size:var(--font-size-xs);color:var(--text-light)}.error-message{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:#ffebee;border-left:4px solid var(--error-color);border-radius:var(--border-radius-md);margin:var(--spacing-md) 0;color:var(--error-color)}.error-icon{width:24px;height:24px;fill:var(--error-color)}.spinner{animation:rotate 2s linear infinite;width:30px;height:30px}.spinner .path{stroke:var(--primary-color);stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.results-container{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.image-click-hint{text-align:center;color:var(--text-light);font-size:var(--font-size-sm);margin-top:var(--spacing-md);margin-bottom:var(--spacing-sm);font-style:italic;padding:var(--spacing-sm)}.results-content{display:flex;flex-direction:column;gap:var(--spacing-xl);margin-top:var(--spacing-lg)}.controls-section{display:flex;justify-content:center;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.reset-button{min-width:180px;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg);font-weight:600}.results-image-container{margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-md);border-radius:var(--border-radius-md);overflow:hidden;position:relative;max-width:900px;margin-left:auto;margin-right:auto;width:100%}.results-image-container h3{position:absolute;top:0;left:0;right:0;padding:var(--spacing-sm) var(--spacing-md);background-color:#0009;color:#fff;margin:0;font-size:var(--font-size-md)}.results-image{width:100%;height:auto;display:block;transition:transform .3s ease;cursor:pointer}.results-image:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}.description-section{max-width:900px;margin-left:auto;margin-right:auto;width:100%;display:flex;flex-direction:column;gap:var(--spacing-lg)}.scene-description{padding:var(--spacing-lg);border-radius:var(--border-radius-md);background-color:var(--scene-default);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-md)}.scene-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.scene-icon{font-size:var(--font-size-xl)}.scene-content p{margin-bottom:var(--spacing-md);font-size:var(--font-size-lg);line-height:1.6}.scene-type{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-md);font-size:var(--font-size-sm)}.scene-label{font-weight:600;color:var(--text-light)}.scene-value{font-weight:500;background-color:#0000000d;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm)}.detected-elements{padding:var(--spacing-lg);border-radius:var(--border-radius-md);background-color:var(--background-alt);box-shadow:var(--shadow-sm)}.elements-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.element-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background-color:var(--background-color);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-sm)}.element-icon{font-size:var(--font-size-lg)}.element-name{font-weight:500}.audio-section{max-width:900px;margin-left:auto;margin-right:auto;width:100%}.audio-player{padding:var(--spacing-lg);border-radius:var(--border-radius-md);background-color:var(--background-color);box-shadow:var(--shadow-lg);margin-top:var(--spacing-md)}.audio-player h3{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}.player-controls{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-md);background-color:var(--background-alt);border-radius:var(--border-radius-md)}.scene-urban{background-color:var(--scene-urban)}.scene-beach{background-color:var(--scene-beach)}.scene-mountain{background-color:var(--scene-mountain)}.scene-forest{background-color:var(--scene-forest)}.scene-desert{background-color:var(--scene-desert)}.scene-rural{background-color:var(--scene-rural)}.scene-indoor{background-color:var(--scene-indoor)}.scene-default{background-color:var(--scene-default)}.audio-player{padding:var(--spacing-lg);border-radius:var(--border-radius-md);background-color:var(--background-color);box-shadow:var(--shadow-md)}.audio-player-container{margin-top:var(--spacing-md)}.player-controls{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.play-pause-button{background-color:var(--primary-color);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:background-color var(--transition-fast)}.play-pause-button svg{width:20px;height:20px;fill:currentColor}.play-pause-button:hover{background-color:var(--primary-dark)}.time-slider{flex:1;display:flex;align-items:center;gap:var(--spacing-sm)}.seek-slider{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--primary-light);border-radius:2px;outline:none}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background-color:var(--primary-color);cursor:pointer}.current-time,.duration{font-size:var(--font-size-sm);color:var(--text-light);width:40px;text-align:center}.volume-control{display:flex;align-items:center;gap:var(--spacing-sm)}.volume-button{background:none;border:none;color:var(--text-color);display:flex;align-items:center;justify-content:center}.volume-button svg{width:24px;height:24px;fill:currentColor}.volume-slider{width:80px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--primary-light);border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background-color:var(--primary-color);cursor:pointer}.loop-button,.download-button{background:none;border:none;color:var(--text-color);display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm);border-radius:50%;transition:background-color var(--transition-fast)}.loop-button svg,.download-button svg{width:24px;height:24px;fill:currentColor}.loop-button:hover,.download-button:hover{background-color:var(--background-alt)}.loop-button.active{color:var(--primary-color);background-color:var(--primary-light)}.audio-visualizer{width:100%;height:80px;margin-top:var(--spacing-md);border-radius:var(--border-radius-md);overflow:hidden;background-color:#151a2a0d}.visualizer-canvas{width:100%;height:100%}.download-container{position:relative}.download-error{position:absolute;bottom:100%;right:0;background-color:#ffebee;color:var(--error-color);padding:var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);white-space:nowrap;box-shadow:var(--shadow-md);z-index:var(--z-index-tooltip)}.audio-loading,.audio-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;gap:var(--spacing-md);color:var(--text-light)}.retry-button{background-color:var(--primary-color);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md);border:none;font-weight:500}.retry-button:hover{background-color:var(--primary-dark)}.play-pause-button{background-color:var(--primary-color);color:#fff;width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 2px 4px #0003;position:relative;overflow:hidden}.play-pause-button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.play-pause-button:active{transform:translateY(0);box-shadow:0 1px 2px #0003}.play-pause-button svg{width:24px;height:24px;fill:currentColor;transition:transform .2s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.play-pause-button.playing svg{transform:translate(-50%,-50%)}.play-pause-button:hover svg{transform:translate(-50%,-50%) scale(1.1)}.play-pause-button.playing:hover svg{transform:translate(-50%,-50%) scale(1.1)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-modal);padding:var(--spacing-md)}.modal-container{background-color:var(--background-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);max-width:95vw;max-height:95vh;width:auto;height:auto;overflow:hidden;position:relative;display:flex;flex-direction:column}.modal-close-button{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background-color:#00000080;color:#fff;border:none;border-radius:50%;width:36px;height:36px;font-size:var(--font-size-xl);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background-color var(--transition-fast)}.modal-close-button:hover{background-color:#000000b3}.modal-image-container{overflow:auto;max-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-md)}.modal-image{width:auto;height:auto;max-width:100%;max-height:80vh;object-fit:contain}.results-image{cursor:pointer;transition:opacity var(--transition-fast)}.results-image:hover{opacity:.9}.onboarding-modal .modal-container{width:90%;max-width:600px}.onboarding-content{padding:var(--spacing-xl)}.onboarding-heading{margin-bottom:var(--spacing-lg);color:var(--primary-color);font-size:var(--font-size-xl)}.onboarding-steps{margin-bottom:var(--spacing-xl)}.onboarding-step{display:flex;align-items:flex-start;margin-bottom:var(--spacing-lg)}.step-number{background-color:var(--primary-color);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;margin-right:var(--spacing-md);flex-shrink:0}.step-content h3{margin-top:0;margin-bottom:var(--spacing-xs)}.step-content p{margin:0;color:var(--text-light)}.onboarding-actions{display:flex;justify-content:flex-end;border-top:1px solid var(--border-color);padding-top:var(--spacing-lg)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}.accessibility-controls{position:fixed;bottom:20px;right:20px;z-index:var(--z-index-fixed)}.accessibility-toggle{width:48px;height:48px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;border:none;box-shadow:var(--shadow-md);cursor:pointer;transition:background-color var(--transition-fast)}.accessibility-toggle:hover{background-color:var(--primary-dark)}.accessibility-icon{width:24px;height:24px;fill:currentColor}.accessibility-menu{position:absolute;bottom:100%;right:0;margin-bottom:var(--spacing-md);width:300px;background-color:var(--background-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-md);z-index:var(--z-index-dropdown)}.menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}.menu-header h3{margin-bottom:0}.close-menu{background:none;border:none;font-size:var(--font-size-xl);color:var(--text-light);cursor:pointer}.menu-options{display:flex;flex-direction:column;gap:var(--spacing-md)}.option-item{display:flex;justify-content:space-between;align-items:center}.option-label{font-weight:500;-webkit-user-select:none;user-select:none;cursor:pointer}.toggle-switch{position:relative;display:inline-block;width:50px;height:24px;cursor:pointer}.toggle-input{opacity:0;width:0;height:0;margin:0;padding:0;position:absolute}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--border-color);border-radius:24px;transition:background-color var(--transition-fast)}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:transform var(--transition-fast)}.toggle-input:checked+.toggle-slider{background-color:var(--primary-color)}.toggle-input:checked+.toggle-slider:before{transform:translate(26px)}.font-size-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.font-decrease,.font-reset,.font-increase{background-color:var(--background-alt);color:var(--text-color);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-sm);font-weight:600;cursor:pointer;transition:background-color var(--transition-fast)}.font-decrease:hover,.font-reset:hover,.font-increase:hover{background-color:var(--border-color)}.option-button.full-width{width:100%;text-align:center;padding:var(--spacing-sm);background-color:var(--background-alt);color:var(--text-color);border:1px solid var(--border-color);border-radius:var(--border-radius-md);font-weight:500;cursor:pointer;transition:background-color var(--transition-fast)}.option-button.full-width:hover{background-color:var(--border-color)}a:focus-visible,button:focus-visible,input:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.high-contrast a:focus-visible,.high-contrast button:focus-visible,.high-contrast input:focus-visible,.high-contrast [tabindex="0"]:focus-visible{outline:3px solid var(--primary-dark);outline-offset:3px}.high-contrast .toggle-slider{border:1px solid var(--text-color)}.high-contrast .toggle-slider:before{border:1px solid var(--text-color)}.theme-toggle-icon{display:inline-block;margin-right:.5rem;width:18px;height:18px;vertical-align:text-bottom}.about-container,.tutorial-container{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.about-hero,.tutorial-hero{text-align:center;margin:var(--spacing-xl) 0 var(--spacing-xxl)}.about-section,.tutorial-section{margin-bottom:var(--spacing-xxl)}.process-steps{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);margin-top:var(--spacing-lg)}@media (min-width: 768px){.process-steps{grid-template-columns:repeat(3,1fr)}}.process-step{background-color:var(--background-alt);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);position:relative;box-shadow:var(--shadow-sm)}.step-number{width:40px;height:40px;background-color:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-lg);position:absolute;top:-20px;left:50%;transform:translate(-50%)}.process-step h3{margin-top:var(--spacing-md);text-align:center}.cta-section{text-align:center;margin:var(--spacing-xxl) 0;padding:var(--spacing-xl);background-color:var(--background-alt);border-radius:var(--border-radius-lg)}.cta-button{display:inline-block;background-color:var(--primary-color);color:#fff;font-weight:600;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--border-radius-md);margin-top:var(--spacing-lg);transition:background-color var(--transition-fast)}.cta-button:hover{background-color:var(--primary-dark);color:#fff}.tutorial-steps{display:flex;flex-direction:column;gap:var(--spacing-xxl);margin:var(--spacing-xl) 0}.tutorial-step{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--border-color)}.tutorial-step:last-child{border-bottom:none}@media (min-width: 768px){.tutorial-step{grid-template-columns:1fr 2fr;align-items:center}.tutorial-step:nth-child(2n){grid-template-columns:2fr 1fr}.tutorial-step:nth-child(2n) .step-image{order:2}.tutorial-step:nth-child(2n) .step-content{order:1}}.tutorial-illustration{max-width:100%;height:auto;border-radius:var(--border-radius-md);box-shadow:var(--shadow-md)}.step-content h2{margin-bottom:var(--spacing-md)}.tip-box{background-color:var(--primary-light);border-radius:var(--border-radius-md);padding:var(--spacing-md);margin-top:var(--spacing-lg)}.tip-box h4{margin-bottom:var(--spacing-sm);color:var(--primary-dark)}.tip-box ul{list-style-type:disc;margin-left:var(--spacing-lg)}.tip-box li{margin-bottom:var(--spacing-xs)}.accessibility-section{margin:var(--spacing-xxl) 0;padding:var(--spacing-xl);background-color:var(--background-alt);border-radius:var(--border-radius-lg)}.features-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);margin-top:var(--spacing-lg)}@media (min-width: 768px){.features-grid{grid-template-columns:repeat(2,1fr)}}.feature-item{background-color:var(--background-color);border-radius:var(--border-radius-md);padding:var(--spacing-md);box-shadow:var(--shadow-sm)}.feature-item h3{margin-bottom:var(--spacing-sm);color:var(--primary-color)}.dark-mode svg:not(.accessibility-icon):not(.logo-icon) path,.dark-mode svg:not(.accessibility-icon):not(.logo-icon) rect,.dark-mode svg:not(.accessibility-icon):not(.logo-icon) circle,.dark-mode svg:not(.accessibility-icon):not(.logo-icon) polygon{fill:#fff}.dark-mode svg.colored-svg path,.dark-mode svg.colored-svg rect,.dark-mode svg.colored-svg circle,.dark-mode svg.colored-svg polygon{fill:currentColor}.dark-mode .drag-drop-zone{background-color:var(--background-alt);border-color:var(--border-color)}.dark-mode .drag-drop-zone:hover,.dark-mode .drag-drop-zone.dragging{border-color:var(--primary-color);background-color:#6c8fff26}.dark-mode .image-preview-content{background-color:#0003}.dark-mode .audio-visualizer{background-color:#0000004d}.dark-mode .toggle-slider{background-color:#444}.dark-mode .toggle-slider:before{background-color:#f0f0f0}.dark-mode .toggle-input:checked+.toggle-slider{background-color:var(--primary-color)}.dark-mode .accessibility-menu{box-shadow:0 0 10px #00000080}.dark-mode .font-decrease,.dark-mode .font-reset,.dark-mode .font-increase{background-color:var(--background-alt);color:var(--text-color);border-color:var(--border-color)}.dark-mode .font-decrease:hover,.dark-mode .font-reset:hover,.dark-mode .font-increase:hover{background-color:var(--primary-dark);color:var(--background-color)}.dark-mode .onboarding-modal{box-shadow:0 0 20px #000000b3}.theme-toggle-icon{display:inline-block;margin-right:.5rem;width:16px;height:16px;vertical-align:middle}.dark-mode .theme-toggle-light{display:inline-block}.dark-mode .theme-toggle-dark,.theme-toggle-light{display:none}.theme-toggle-dark{display:inline-block}.dark-mode .svg-icon-invert{filter:brightness(0) invert(1)}.dark-mode .icon-to-invert path,.dark-mode .icon-to-invert rect,.dark-mode .icon-to-invert circle,.dark-mode .icon-to-invert polygon,.dark-mode .icon-to-invert line{fill:#fff;stroke:#fff}.dark-mode .stroke-icon-invert path,.dark-mode .stroke-icon-invert rect,.dark-mode .stroke-icon-invert circle,.dark-mode .stroke-icon-invert polygon,.dark-mode .stroke-icon-invert line{stroke:#fff}.dark-mode .error-icon,.dark-mode .upload-icon,.dark-mode .menu-icon,.dark-mode .element-icon svg,.dark-mode .visualizer-icon,.dark-mode .nav-icon{filter:brightness(0) invert(1)}.dark-mode .drag-drop-content .upload-icon{color:#fff}.dark-mode .player-controls svg:not(.colored-svg){fill:#fff}.dark-mode .primary-svg{filter:none}