:root{--color-bg: #F2F5F2;--color-bg-2: #E5EDE7;--color-bg-3: #D9E5DB;--color-text: #2f3439;--color-text-2: #5f564a;--color-text-light: #EADCC6;--color-text-light-rgb: 234, 220, 198;--color-primary: #1F4D44;--color-primary-dark: #163B34;--color-primary-rgb: 31, 77, 68;--color-accent: #DC512F;--color-accent-dark: #E17145;--color-accent-rgb: 220, 81, 47;--color-accent-dark-rgb: 225, 113, 69;--synth-bg: #1c1814;--synth-bg-mid: #231f1b;--synth-bg-canvas: #0e0b09;--synth-bg-panel: #1f1c18;--synth-bg-group: #2a2520;--synth-bg-track: #38302a;--synth-text: #cac0b4;--synth-text-2: #b8aea2;--synth-text-dim: #6a5e52;--synth-text-muted: #5a5048;--synth-border: rgba(200, 160, 110, .12);--synth-active: #55A898;--synth-active-rgb: 85, 168, 152;--synth-accent-deep: #9E3318}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--synth-bg);height:100dvh;overflow:hidden;color:var(--synth-text);font-family:DM Sans,monospace;display:flex;flex-direction:column}#topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid rgba(var(--color-primary-rgb),.4);background:var(--color-primary)}#topbar a{display:inline-flex;align-items:center;gap:6px;font-size:9px;color:var(--color-text-light);text-decoration:none;letter-spacing:2px;text-transform:uppercase;border:1px solid rgba(234,220,198,.3);padding:5px 13px;border-radius:4px;background:#eadcc614;transition:background .2s,border-color .2s,color .2s}#topbar a:hover{background:#eadcc629;border-color:#eadcc68c;color:var(--color-text-light)}#topbar h1{font-size:10px;letter-spacing:6px;text-transform:uppercase;color:#eadcc6b3;font-weight:400}.status-pill{display:flex;align-items:center;gap:7px;font-size:9px;color:#eadcc680;letter-spacing:2px;text-transform:uppercase}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--synth-bg-group);border:1px solid var(--synth-bg-track);transition:background .4s,box-shadow .4s,border-color .4s}.status-dot.active{background:var(--synth-active);border-color:var(--synth-active);box-shadow:0 0 6px rgba(var(--synth-active-rgb),.7),0 0 14px rgba(var(--synth-active-rgb),.3)}video{display:none}#canvas-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--synth-bg-canvas);overflow:hidden}canvas{display:block;max-width:100%;max-height:100%}#overlay-hint{position:absolute;color:var(--synth-bg-group);font-size:10px;letter-spacing:6px;text-transform:uppercase;pointer-events:none;user-select:none}#controls{flex-shrink:0;display:flex;gap:10px;align-items:center;padding:10px 20px;background:var(--synth-bg-mid);border-top:1px solid var(--synth-border)}#start-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:10;background:#0e0b09a6;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}#start-overlay>p{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--synth-text-muted)}.overlay-loading{display:none;flex-direction:column;align-items:center;gap:18px}#start-overlay.is-loading .overlay-loading{display:flex}#start-overlay.is-loading #btnStartOverlay,#start-overlay.is-loading>p{display:none}.loading-bars{display:flex;align-items:flex-end;gap:5px;height:28px}.loading-bars span{width:4px;border-radius:2px;background:var(--color-accent);transform-origin:bottom;animation:loadBar 1s ease-in-out infinite}.loading-bars span:nth-child(1){animation-delay:0s;height:35%}.loading-bars span:nth-child(2){animation-delay:.18s;height:65%}.loading-bars span:nth-child(3){animation-delay:.36s;height:100%}.loading-bars span:nth-child(4){animation-delay:.54s;height:65%}.loading-bars span:nth-child(5){animation-delay:.72s;height:35%}@keyframes loadBar{0%,to{opacity:.25;transform:scaleY(.35)}50%{opacity:1;transform:scaleY(1)}}.loading-msg{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--synth-text-muted)}.synth-btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--color-accent) 0%,var(--synth-accent-deep) 100%);color:#fff;border:none;height:44px;padding:0 26px;cursor:pointer;font-family:DM Sans,monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;border-radius:5px;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 2px 14px rgba(var(--color-accent-rgb),.45),inset 0 1px #ffffff24,inset 0 -1px #0003}.synth-btn:hover{background:linear-gradient(135deg,var(--color-accent-dark) 0%,var(--color-accent) 100%);box-shadow:0 5px 22px rgba(var(--color-accent-rgb),.65),inset 0 1px #ffffff2e,inset 0 -1px #0003;transform:translateY(-1px)}.synth-btn:active{transform:translateY(1px);box-shadow:0 1px 6px rgba(var(--color-accent-rgb),.4),inset 0 1px 3px #0003}.synth-btn .btn-icon-play{width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;flex-shrink:0}.synth-btn .btn-icon-stop{width:9px;height:9px;background:#fff;border-radius:1px;flex-shrink:0}#btnStart{display:none;height:36px;padding:0 18px;font-size:10px}#btnStart.visible{display:inline-flex}#btnRecord{display:none;height:36px;padding:0 18px;font-size:10px;background:linear-gradient(135deg,var(--synth-bg-group) 0%,var(--synth-bg-panel) 100%);border:1px solid rgba(var(--color-accent-rgb),.28);color:var(--synth-text-dim);box-shadow:0 1px 6px #0000004d,inset 0 1px #ffffff0a;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s}#btnRecord.visible{display:inline-flex}#btnRecord:hover{background:linear-gradient(135deg,var(--synth-bg-track) 0%,var(--synth-bg-group) 100%);border-color:rgba(var(--color-accent-rgb),.5);color:var(--color-accent-dark);transform:translateY(-1px)}#btnRecord.recording{background:linear-gradient(135deg,#7a1818,#5a0e0e);border-color:#aa2424;color:#ffb8b8;box-shadow:0 2px 16px #b41e1e80,inset 0 1px #ffffff14}.btn-icon-rec{width:9px;height:9px;border-radius:50%;background:currentColor;flex-shrink:0}#btnRecord.recording .btn-icon-rec{background:#ff5050;animation:recPulse 1.1s ease-in-out infinite}@keyframes recPulse{0%,to{opacity:1;box-shadow:0 0 #ff3c3ccc}50%{opacity:.6;box-shadow:0 0 0 5px #ff3c3c00}}.rec-timer{display:none;font-variant-numeric:tabular-nums;letter-spacing:1px;opacity:.85;font-size:10px;padding-left:4px}#btnRecord.recording .rec-timer{display:inline}#ctrl-status{margin-left:auto;font-size:9px;color:var(--synth-text-muted);letter-spacing:2px;text-transform:uppercase}#synth-panel{flex-shrink:0;display:flex;gap:12px;align-items:flex-start;padding:10px 20px;background:var(--color-primary-dark);border-top:1px solid rgba(var(--color-text-light-rgb),.1);flex-wrap:wrap}.sp-group{display:flex;flex-direction:column;gap:7px;background:#00000040;border:1px solid rgba(var(--color-text-light-rgb),.1);border-radius:6px;padding:9px 12px}.sp-label{font-size:8px;letter-spacing:3px;color:var(--color-text-light);text-transform:uppercase;opacity:.75;padding-bottom:2px;border-bottom:1px solid rgba(var(--color-text-light-rgb),.12)}#semitone-grid{display:flex;gap:3px;align-items:flex-end}.semi-btn{position:relative;width:30px;height:44px;background:linear-gradient(180deg,#ddd5c4,#cbbfae);color:#7a6a58;border:1px solid #b4a898;border-radius:3px 3px 5px 5px;cursor:pointer;font-family:DM Sans,monospace;font-size:8px;font-weight:700;letter-spacing:.3px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 6px;box-shadow:0 4px #8a7e6c,0 5px 5px #0003;transition:box-shadow .06s,transform .06s,background .1s,color .1s;user-select:none}.semi-btn:before{content:"";position:absolute;top:7px;left:50%;transform:translate(-50%);width:5px;height:5px;border-radius:50%;background:#a89880;box-shadow:inset 0 1px 2px #00000040;transition:background .12s,box-shadow .12s}.semi-btn:hover:not(.active){background:linear-gradient(180deg,#ede5d4,#ddd0be);color:var(--color-accent);border-color:#c4b8a8}.semi-btn.active{background:linear-gradient(180deg,var(--color-accent) 0%,var(--synth-accent-deep) 100%);color:#ffd8c8;border-color:var(--synth-accent-deep);box-shadow:0 2px #4a1808,0 2px 3px #00000040;transform:translateY(2px)}.semi-btn.active:before{background:var(--color-accent-dark);box-shadow:0 0 5px var(--color-accent),0 0 12px rgba(var(--color-accent-rgb),.55)}.semi-btn.playing:before{background:var(--synth-active);box-shadow:0 0 6px var(--synth-active),0 0 14px rgba(var(--synth-active-rgb),.75)}.semi-btn.active.playing:before{background:#fff;box-shadow:0 0 8px #fff,0 0 18px #fffc}.semi-btn.sharp{height:44px;background:linear-gradient(180deg,#2e2518,#201810);color:#6a5a44;border-color:#3e3020;box-shadow:0 4px #0e0c08,0 5px 5px #0006}.semi-btn.sharp:before{background:#5a4a30;box-shadow:inset 0 1px 2px #0006}.semi-btn.sharp:hover:not(.active){background:linear-gradient(180deg,#3a3020,#2a2218);color:var(--color-accent);border-color:#4e3e28}.semi-btn.sharp.active{background:linear-gradient(180deg,var(--color-accent) 0%,var(--synth-accent-deep) 100%);border-color:var(--synth-accent-deep)}.knob-controls{display:flex;gap:14px;align-items:flex-start}.knob-item{display:flex;flex-direction:column;align-items:center;gap:3px}.knob-label{font-size:7px;color:rgba(var(--color-text-light-rgb),.55);letter-spacing:1.5px;text-transform:uppercase}.knob-canvas{cursor:ns-resize;display:block}.knob-val{font-size:9px;color:var(--color-accent-dark);font-weight:700;font-family:DM Sans,monospace;letter-spacing:.3px;min-width:44px;text-align:center}#tip-popup{position:absolute;bottom:14px;left:50%;transform:translate(-50%);z-index:20;background:#14100ce0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(var(--color-accent-rgb),.35);border-radius:8px;padding:9px 20px 10px;pointer-events:none;white-space:nowrap;box-shadow:0 6px 28px #0000008c,0 0 0 1px rgba(var(--color-accent-rgb),.08),inset 0 1px #ffffff0f}#tip-popup:after{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);width:8px;height:5px;background:#14100ce0;clip-path:polygon(50% 0%,0% 100%,100% 100%)}#tip-text{font-family:DM Sans,monospace;font-size:12px;color:rgba(var(--color-text-light-rgb),.88);letter-spacing:.6px;transition:opacity .45s ease}#tip-text.fade{opacity:0}@media(max-width:600px){#tip-popup{bottom:10px;padding:8px 14px 9px;max-width:calc(100vw - 24px);white-space:normal;text-align:center;border-radius:7px}#tip-text{font-size:11px;letter-spacing:.3px}}.mobile-sliders{display:none}.slider-item{display:flex;flex-direction:column;gap:3px}.slider-row-label{font-size:7px;color:rgba(var(--color-text-light-rgb),.55);letter-spacing:1.5px;text-transform:uppercase;display:flex;justify-content:space-between}.slider-val{color:var(--color-accent-dark);font-weight:700;font-family:DM Sans,monospace}input[type=range].synth-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:0;padding:0;background:var(--synth-bg-track);border-radius:2px;outline:none}input[type=range].synth-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--color-accent-dark),var(--synth-accent-deep));border:1px solid var(--synth-accent-deep);box-shadow:0 0 6px rgba(var(--color-accent-rgb),.5);cursor:pointer}input[type=range].synth-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--color-accent-dark),var(--synth-accent-deep));border:1px solid var(--synth-accent-deep);box-shadow:0 0 6px rgba(var(--color-accent-rgb),.5);cursor:pointer}input[type=range].synth-range::-webkit-slider-runnable-track{-webkit-appearance:none;background:linear-gradient(to right,var(--color-accent) var(--pct, 0%),var(--synth-bg-track) var(--pct, 0%));height:4px;border-radius:2px}input[type=range].synth-range::-moz-range-track{background:linear-gradient(to right,var(--color-accent) var(--pct, 0%),var(--synth-bg-track) var(--pct, 0%));height:4px;border-radius:2px}.sp-label-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:2px;border-bottom:1px solid rgba(var(--color-text-light-rgb),.12)}.sp-label-row .sp-label{border-bottom:none;padding-bottom:0}.rate-mode-header{display:flex;align-items:center;gap:5px}.rate-mode-btn{font-family:DM Sans,monospace;font-size:7px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;background:#00000059;border:1px solid rgba(var(--color-text-light-rgb),.18);color:rgba(var(--color-text-light-rgb),.45);border-radius:3px;padding:2px 7px;height:18px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;line-height:1;white-space:nowrap}.rate-mode-btn:hover{border-color:rgba(var(--color-text-light-rgb),.38);color:rgba(var(--color-text-light-rgb),.75)}.rate-mode-btn.active{background:rgba(var(--color-accent-rgb),.18);border-color:rgba(var(--color-accent-rgb),.55);color:var(--color-accent-dark);box-shadow:0 0 6px rgba(var(--color-accent-rgb),.2)}.bpm-ctrl{display:none;align-items:center;gap:3px}.bpm-step-btn{width:16px;height:16px;background:#0000004d;border:1px solid rgba(var(--color-text-light-rgb),.18);border-radius:2px;color:rgba(var(--color-text-light-rgb),.55);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .1s,color .1s;font-family:DM Sans,monospace}.bpm-step-btn:hover{background:rgba(var(--color-text-light-rgb),.1);color:rgba(var(--color-text-light-rgb),.9)}.bpm-value{font-size:9px;font-weight:700;color:var(--color-accent-dark);font-family:DM Sans,monospace;min-width:24px;text-align:center;letter-spacing:.5px}.bpm-unit{font-size:6px;color:rgba(var(--color-text-light-rgb),.35);letter-spacing:1.5px;text-transform:uppercase}.rate-live-item{pointer-events:none}.rate-live-box{width:50px;height:50px;background:#0006;border:1px solid rgba(var(--color-text-light-rgb),.1);border-radius:4px;display:flex;align-items:center;justify-content:center}#rate-live-val{font-size:9px;font-weight:700;font-family:DM Sans,monospace;color:var(--synth-text-dim);letter-spacing:.5px;transition:color .08s}#rate-live-val.active{color:var(--synth-active)}@media(max-width:600px){.mobile-sliders{display:flex;flex-direction:column;gap:8px}.knob-controls{display:none}#synth-panel{padding:8px 10px;gap:6px}#synth-panel .sp-group:first-child{width:100%}#synth-panel .sp-group:not(:first-child){flex:1;min-width:0}#semitone-grid{width:100%;gap:2px}.semi-btn{flex:1;min-width:0;width:auto;height:36px;font-size:6.5px;padding:0 0 4px}.semi-btn:before{width:4px;height:4px;top:5px}}