*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#0a0a0f;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.synth-container{width:100%;height:100vh;height:100dvh;background:#0a0a0f;position:relative;overflow:hidden}.synth-canvas{width:100%;height:100%;cursor:crosshair}.hint{position:absolute;color:#ffffff4d;font-size:.875rem;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.hint--top{top:1.5rem;left:1.5rem}.hint--bottom{bottom:calc(1.5rem + env(safe-area-inset-bottom));left:1.5rem;font-size:.75rem;color:#fff3}.sound-btn{position:absolute;bottom:calc(1.5rem + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);padding:.75rem 1.5rem;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:9999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s ease;font-family:inherit;z-index:10}.sound-btn:hover{background:#fff3}.controls-container{position:absolute;bottom:calc(1.5rem + env(safe-area-inset-bottom));right:1.5rem;display:flex;gap:.75rem;z-index:20}.icon-btn{width:3rem;height:3rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s cubic-bezier(.4,0,.2,1);text-decoration:none}.icon-btn:hover{border-color:#ffffff4d}.icon-btn svg{width:1.25rem;height:1.25rem;opacity:.9}.settings-panel{position:absolute;bottom:calc(5.5rem + env(safe-area-inset-bottom));right:1.5rem;width:280px;max-height:70vh;overflow-y:auto;overflow-x:hidden;background:#0f0f14d9;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.25rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;z-index:20;box-shadow:0 8px 32px #0006;font-family:inherit}.settings-panel::-webkit-scrollbar{width:6px}.settings-panel::-webkit-scrollbar-track{background:#ffffff0d;margin-top:10px;margin-bottom:10px;border-radius:3px}.settings-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.settings-panel::-webkit-scrollbar-thumb:hover{background:#fff6}.settings-panel h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;color:#fff6;font-weight:600;font-family:inherit}.settings-panel h3:not(:first-child){margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.05)}.control-group{margin-bottom:.75rem}.control-group label{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;margin-bottom:.4rem;color:#fffc;font-family:inherit}.control-group label span:last-child{color:#fff6;font-variant-numeric:tabular-nums;font-size:.75rem}.reset-btn{width:100%;margin-top:1.5rem;padding:.6rem;background:#ff50501a;border:1px solid rgba(255,80,80,.2);color:#fcc;border-radius:8px;cursor:pointer;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:all .2s;font-family:inherit}.reset-btn:hover{background:#ff505033;border-color:#ff505066;color:#fff}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer;height:16px;display:block;margin:0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;background:#ffffff26;border-radius:2px;border:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:12px;width:12px;border-radius:50%;background:#fff;margin-top:-4px;box-shadow:0 0 10px #ffffff4d;transition:background .2s}input[type=range]:hover::-webkit-slider-thumb{background:#fff;box-shadow:0 0 15px #fff9}input[type=range]::-moz-range-track{width:100%;height:4px;background:#ffffff26;border-radius:2px;border:none}input[type=range]::-moz-range-thumb{border:none;height:12px;width:12px;border-radius:50%;background:#fff;box-shadow:0 0 10px #ffffff4d}input[type=checkbox]{-webkit-appearance:none;appearance:none;min-width:2.25rem;width:2.25rem;height:1.25rem;background:#ffffff1a;border-radius:999px;position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.2);transition:all .3s ease;flex-shrink:0}input[type=checkbox]:after{content:"";position:absolute;top:1px;left:2px;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);background:#fff9;border-radius:50%;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000004d}input[type=checkbox]:hover{background:#ffffff26}input[type=checkbox]:checked{background:#ffffff40;border-color:#fff6}input[type=checkbox]:checked:after{transform:translate(1rem);background:#fff;box-shadow:0 0 8px #ffffff80}