:root{--primary:#6a11cb;--primary-dark:#4a00c8;--secondary:#2575fc;--text:#2d334a;--text-light:#8a94a8;--background:#f8f9fd;--card:#ffffff;--border:#e6e8f0;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--blue:#0369a1;--indigo:#4f46e5;--purple:#9333ea;--green:#16a34a;--orange:#ea580c;--yellow:#ca8a04;--transition-fast:0.15s;--transition-normal:0.3s;--transition-slow:0.5s;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:1rem;--radius-full:9999px;--container-width:90%;--container-max-width:1280px;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--beat-frequency:0.5s;--preset-color:var(--purple)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--background);color:var(--text);line-height:1.5}button{cursor:pointer;font-family:inherit}.binaural-container{width:var(--container-width);max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-lg) 0;display:flex;flex-direction:column;gap:var(--spacing-xl)}@media(max-width:768px){.binaural-container{width:95%;padding:var(--spacing-md) 0;gap:var(--spacing-lg)}}.binaural-header{text-align:center;margin-bottom:var(--spacing-lg)}.binaural-header h1{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);font-size:3rem;font-weight:800;letter-spacing:-.03em;margin-bottom:var(--spacing-xs)}@media(max-width:768px){.binaural-header h1{font-size:2.25rem}}.binaural-header p{color:var(--text-light);font-size:1.1rem;font-weight:500}.binaural-visualization{background:var(--card);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);overflow:hidden;position:relative;height:220px;display:flex;flex-direction:column;justify-content:center}@media(max-width:768px){.binaural-visualization{height:180px;padding:var(--spacing-md)}}.binaural-waves{position:relative;height:70%;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.binaural-waves .wave{position:absolute;height:100%;width:100%;opacity:.5}.binaural-waves .wave:before{content:"";position:absolute;top:50%;left:0;width:100%;height:40px;background:var(--preset-color);border-radius:50%;transform:translateY(-50%);filter:blur(20px)}.binaural-waves .left-wave:before{animation:waveAnimation var(--beat-frequency) infinite ease-in-out}.binaural-waves .right-wave:before{animation:waveAnimation calc(var(--beat-frequency)*1.1) infinite ease-in-out;animation-delay:calc(var(--beat-frequency)*.1)}.binaural-waves .wave-interference{position:absolute;top:0;left:0;width:100%;height:100%}.binaural-waves .wave-interference:after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background:var(--preset-color);transform:translateY(-50%);opacity:.8;animation:interferenceAnimation var(--beat-frequency) infinite linear}@keyframes waveAnimation{0%,to{transform:translateY(-50%) scaleY(.8)}50%{transform:translateY(-50%) scaleY(1.2)}}@keyframes interferenceAnimation{0%{opacity:.3;height:1px}50%{opacity:.8;height:3px}to{opacity:.3;height:1px}}.binaural-info{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md)}.frequency-display{display:flex;gap:var(--spacing-md);align-items:center}.frequency-display .beat-freq,.frequency-display .ear-freq{display:flex;flex-direction:column;align-items:center}.frequency-display .beat-freq span,.frequency-display .ear-freq span{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-light);margin-bottom:var(--spacing-xs)}.frequency-display .beat-freq div,.frequency-display .ear-freq div{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}.frequency-display .beat-freq div{color:var(--preset-color);font-size:1.3rem}.timer-display{background:rgba(0,0,0,.06);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-variant-numeric:tabular-nums}.timer-display .time-remaining{font-size:1.2rem;font-weight:700;color:var(--preset-color)}.presets-container h2{margin-bottom:var(--spacing-md);font-size:1.25rem;font-weight:600}.preset-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}@media(max-width:768px){.preset-buttons{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.preset-buttons{grid-template-columns:1fr}}.preset-button{display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--spacing-md);transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}.preset-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.preset-button.active{border-color:var(--preset-color);background-color:rgba(var(--preset-color),.05)}.preset-button.blue{--preset-color:var(--blue)}.preset-button.indigo{--preset-color:var(--indigo)}.preset-button.purple{--preset-color:var(--purple)}.preset-button.green{--preset-color:var(--green)}.preset-button.orange{--preset-color:var(--orange)}.preset-button.yellow{--preset-color:var(--yellow)}.preset-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);background:rgba(var(--preset-color),.1);color:var(--preset-color);margin-right:var(--spacing-md);flex-shrink:0}.preset-info{display:flex;flex-direction:column;text-align:left}.preset-info .preset-name{font-weight:600;font-size:1rem}.preset-info .preset-desc{font-size:.8rem;color:var(--text-light);margin-bottom:var(--spacing-xs)}.preset-info .preset-freq{font-size:.75rem;font-weight:600;color:var(--preset-color)}.controls-container{background:var(--card);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:var(--spacing-lg)}@media(max-width:768px){.controls-container{padding:var(--spacing-md)}}.main-controls{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xl)}@media(max-width:480px){.main-controls{flex-direction:column;gap:var(--spacing-lg)}}.play-button{width:64px;height:64px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.play-button:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}.play-button.playing{background:linear-gradient(135deg,var(--error),#ff6b6b)}@media(max-width:480px){.play-button{width:56px;height:56px}}.volume-control{display:flex;align-items:center;background:rgba(0,0,0,.03);border-radius:var(--radius-full);padding:var(--spacing-xs) var(--spacing-sm)}.volume-control .mute-button{background:none;border:none;color:var(--text);padding:var(--spacing-xs);margin-right:var(--spacing-xs)}.volume-control .mute-button:hover{color:var(--primary)}.volume-control .volume-slider{width:150px;cursor:pointer}@media(max-width:768px){.volume-control .volume-slider{width:120px}}.advanced-toggle{align-self:center;background:none;border:none;color:var(--primary);font-size:.9rem;font-weight:500}.advanced-toggle:hover{text-decoration:underline}.advanced-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg)}@media(max-width:768px){.advanced-controls{grid-template-columns:1fr}}.control-group{display:flex;flex-direction:column}.control-group label{font-size:.9rem;font-weight:500;margin-bottom:var(--spacing-sm)}.control-group input[type=range]{margin-bottom:var(--spacing-sm);cursor:pointer}.control-group .control-value{font-size:.85rem;color:var(--text-light);font-variant-numeric:tabular-nums}.timer-buttons,.waveform-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.timer-buttons button,.waveform-buttons button{padding:var(--spacing-sm) var(--spacing-md);background:var(--background);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;transition:all var(--transition-fast)}.timer-buttons button:hover,.waveform-buttons button:hover{background:rgba(var(--primary),.05)}.timer-buttons button.active,.waveform-buttons button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.info-panel{background:var(--card);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);border-left:4px solid var(--primary)}.info-panel h3{margin-bottom:var(--spacing-sm);font-size:1.1rem;font-weight:600}.info-panel ul{padding-left:var(--spacing-lg)}.info-panel ul li{margin-bottom:var(--spacing-xs);font-size:.9rem;color:var(--text-light)}@media(max-width:768px){.info-panel{padding:var(--spacing-md)}}input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:var(--background);border-radius:var(--radius-full);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:var(--radius-full);background:var(--primary);cursor:pointer;transition:all var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:var(--radius-full);background:var(--primary);cursor:pointer;transition:all var(--transition-fast);border:none}input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}