:root{--background:#fff;--surface:#fff9;--surface-raised:#f2f2f2;--border:#e2e2e2;--border-strong:#c8c8c8;--text:#111;--text-muted:#8a8a8a;--heart:#ff4d5e;--heart-soft:#ff4d5e1a;--mind:#5aa9ff;--mind-soft:#5aa9ff1f;--neutral:#111;--neutral-soft:#1111110f;--radius:16px;--radius-small:999px;--gap:16px;--font:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;--font-dot:"Doto","DotGothic16",ui-monospace,monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}input,button{font:inherit;color:inherit}body{--heartGlow:0;--mindGlow:0;font-family:var(--font);color:var(--text);background-color:var(--background);user-select:none;-webkit-user-select:none;min-height:100vh;padding:24px 16px 48px;font-size:13px;line-height:1.4}.backdrop{position:fixed;z-index:-1;overflow:hidden;pointer-events:none;inset:0}.backdrop .art{position:absolute;object-fit:contain;width:52vw;max-height:90vh;transition:opacity .12s linear;top:50%}.backdrop .art.mind{opacity:calc(.3 + var(--mindGlow)*.6);left:-6vw;transform:translateY(-50%)}.backdrop .art.heart{opacity:calc(.3 + var(--heartGlow)*.6);width:44vw;right:-4vw;transform:translateY(-50%)}.sectionTitle{font-family:var(--font-dot);letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:10px;font-size:18px;font-weight:700}@media (max-width:860px){.backdrop .art.mind{width:80vw;top:22%}.backdrop .art.heart{width:70vw;top:72%}.backdrop .art.mind{opacity:calc(.14 + var(--mindGlow)*.5)}.backdrop .art.heart{opacity:calc(.14 + var(--heartGlow)*.5)}}.Button{letter-spacing:.04em;text-align:center;text-transform:uppercase;border-radius:var(--radius-small);background-color:var(--text);color:var(--background);cursor:pointer;user-select:none;width:-moz-fit-content;width:fit-content;padding:12px 28px;transition:transform .12s,filter .12s;font-size:14px}.Button:hover{filter:brightness(140%)}.Button:active{transform:scale(.97)}.ToggleButton{letter-spacing:.04em;text-align:center;text-transform:uppercase;border:1px solid var(--border-strong);border-radius:var(--radius-small);background-color:var(--background);color:var(--text);cursor:pointer;user-select:none;flex:1;padding:6px 14px;transition:background-color .1s,border-color .1s,color .1s;font-size:11px}.ToggleButton:hover{border-color:var(--text)}.ToggleButton.active{border-color:var(--text);background-color:var(--text);color:var(--background)}.ToggleButton.PlayButton{display:grid;border-radius:50%;flex:none;place-items: center;width:36px;height:36px;padding:0}.ToggleButtonSet{display:flex;gap:4px}.ToggleButtonSet .ToggleButton{flex:none}.Slider .title{white-space:nowrap;color:var(--text-muted);margin-bottom:4px;font-size:11px}.Slider .value{font-family:var(--font-dot);font-variant-numeric:tabular-nums;color:var(--text);font-size:1.2em;font-weight:700}.Slider input{accent-color:var(--accent,var(--text));cursor:pointer;width:100%}.voiceHead{display:flex;flex-wrap:wrap;align-items: center;gap:10px 16px}.voiceHead .name{margin-right:auto}.voiceHead .name .title{font-family:var(--font-dot);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);font-size:26px;font-weight:900}.voiceHead .name .hint{color:var(--text-muted);font-size:12px}.voiceHead .controls{display:flex;flex-wrap:wrap;align-items: center;gap:8px}.voiceHead .controls .ToggleButton{flex:none}.voiceHead .controls .ToggleButton.active{border-color:var(--accent);background-color:var(--accent)}.voiceHead .volume{width:140px}.voice.off .Steps{opacity:.35}.Steps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.Step{display:flex;border-radius:10px;flex-direction:column;align-items: center;gap:4px;min-width:0;padding:8px 0;transition:background-color 80ms}.Step:nth-child(4n+1),.Step:nth-child(4n+2){background-color:#11111109}.Step.current{background-color:var(--background);outline:1.5px dotted var(--accent);outline-offset:-1.5px}.Step .note{font-family:var(--font-dot);font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:14px;font-weight:700}.Step.on .note{color:var(--text)}.Step .toggle{border:1.5px solid var(--border-strong);cursor:pointer;border-radius:50%;width:28px;max-width:100%;height:28px;transition:background-color 80ms,border-color 80ms,transform 80ms}.Step .toggle:hover{border-color:var(--accent)}.Step.on .toggle{border-color:var(--accent);background-color:var(--accent)}.Step.on.current .toggle{transform:scale(1.15)}.Step .velocity{writing-mode:vertical-lr;direction:rtl;accent-color:var(--accent);cursor:pointer;opacity:.35;width:18px;height:80px}.Step.on .velocity{opacity:1}.Effects{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.Effects .effect,.beatCard{--accent:var(--neutral);border:1px solid var(--border);border-radius:var(--radius);background-color:var(--surface);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:12px 14px}.Effects .effect .title,.beatCard .title{display:flex;text-transform:uppercase;letter-spacing:.04em;color:var(--text);justify-content:space-between;align-items:baseline;font-size:12px}.Effects .effect .value,.beatCard .value{text-transform:none;font-family:var(--font-dot);font-variant-numeric:tabular-nums;color:var(--text);font-size:18px;font-weight:700}.Pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}.Pad{--accent:var(--neutral);--accent-soft:var(--neutral-soft);display:flex;border:1px solid var(--border);border-radius:var(--radius);background-color:var(--surface);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;touch-action:none;container-type:inline-size;flex-direction:column;gap:4px;min-height:96px;padding:12px;transition:background-color .12s,border-color .12s,transform 80ms}.Pad.heart{--accent:var(--heart);--accent-soft:var(--heart-soft)}.Pad.mind{--accent:var(--mind);--accent-soft:var(--mind-soft)}.Pad .label{border:1px solid var(--accent);border-radius:var(--radius-small);color:var(--accent);width:-moz-fit-content;width:fit-content;padding:1px 7px;font-size:11px}.Pad>.title{font-family:var(--font-dot);white-space:nowrap;font-size:min(15px,8cqi);font-weight:400;line-height:1.2}.Pad .hint{color:var(--text-muted);font-size:11px}.Pad:hover{border-color:var(--accent)}.Pad.active{background-color:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 28px var(--accent-soft)}.Pad:active{transform:scale(.98)}.Pad .controls{display:flex;cursor:default;flex-direction:column;gap:6px;margin-top:auto;padding-top:8px}.Pad .controls .Slider .title{display:flex;overflow:hidden;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:0;font-size:10px}.Pad .controls .Slider .value{white-space:nowrap;flex:none;font-size:12px}body>.hint{color:var(--text-muted);max-width:1200px;margin:0 auto 16px;font-size:11px}.sequencer{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);max-width:1200px;margin:0 auto 32px}.voice{display:flex;border:1px solid var(--border);border-radius:var(--radius);background-color:var(--surface);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);flex-direction:column;gap:12px;padding:18px}.voice.mind{--accent:var(--mind)}.voice.heart{--accent:var(--heart)}.block{max-width:1200px;margin:0 auto 32px}.beatCards{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}.beatCard.transport{display:flex;flex-wrap:wrap;align-items: center;gap:8px}@media (max-width:860px){.sequencer,.beatCards{grid-template-columns:1fr}}@media (max-width:480px){.beatCard .ToggleButtonSet{flex-wrap:wrap}}