:root{color-scheme:dark;--bg:#19191e;--card:#222228;--line:#3b393f;--text:#f0e9de;--muted:#b5afa9;--gold:#edba79;--lav:#bcaddc}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,sans-serif;padding-bottom:calc(98px + env(safe-area-inset-bottom))}header{max-width:760px;margin:auto;padding:22px 20px;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line)}.brand{font:italic 44px Georgia;color:var(--text);text-decoration:none;line-height:1}.brand span{color:var(--gold)}header b{font-size:12px;letter-spacing:.15em}header small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.lab{margin-left:auto;font-size:12px;white-space:nowrap;color:var(--gold)}main{max-width:680px;margin:auto;padding:0 20px}.hero{padding:30px 0 24px}.eyebrow{font-size:10px;letter-spacing:.17em;color:var(--muted);display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;background:var(--gold);border-radius:50%}h1{font:normal 48px/.99 Georgia,serif;letter-spacing:-.04em;margin:18px 0}h1 em{color:var(--gold);font-weight:400}.hero p{color:var(--muted);font-size:14px;margin-bottom:0}.instrument{border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#2c2831,#201f25);padding:16px;margin-bottom:30px;box-shadow:0 16px 35px #0002}.now{display:flex;justify-content:space-between;gap:12px;font-size:12px}.now span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now span:last-child{color:var(--muted);white-space:nowrap}canvas{width:100%;height:132px;display:block}.versions{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.versions button{padding:8px 2px;font-size:10px;min-height:44px;background:transparent}.versions button.active{background:var(--lav);color:#211b2c;border-color:var(--lav)}.statusline{min-height:30px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--gold);font-size:12px}.statusline button{padding:2px 10px}button,.file-button,select,input[type=text],input:not([type]){font:inherit}button,.file-button,select{border:1px solid var(--line);border-radius:10px;background:#2b2a30;color:var(--text);padding:11px 13px;min-height:46px;cursor:pointer;touch-action:manipulation}button:hover,.file-button:hover{border-color:var(--gold)}button.active,button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#37302a}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.step{padding:0 0 28px;margin-bottom:24px;border-bottom:1px solid var(--line)}.step-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}.step-title>span:first-child{color:var(--gold);font:12px monospace}h2{font-size:19px;font-weight:550;letter-spacing:-.025em;margin:0}.sources,.presets{display:flex;gap:8px;flex-wrap:wrap}.sources button,.presets button{flex:1;font-size:12px;padding:10px 8px;white-space:nowrap}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:13px 0}.hint{font-size:12px;line-height:1.55;color:var(--muted)}.muted{color:var(--muted)}label:not(.file-button){display:block;margin-top:22px;font-size:13px}output{float:right;color:var(--gold);font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;height:34px;margin:8px 0 0;accent-color:var(--gold);cursor:pointer}input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.file-button{display:inline-flex;align-items:center;font-size:13px;position:relative}.file-button:focus-within{outline:2px solid var(--gold)}.end-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:-3px}.layer-picker{display:grid;grid-template-columns:1fr 1fr}.layer-picker button{font-size:12px}.pitch{margin:0!important;display:flex!important;align-items:center;gap:8px}.pitch select{font-size:13px}details{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;min-height:32px;font-size:13px;color:var(--lav)}#name{width:100%;display:block;background:#222228;color:var(--text);border:1px solid var(--line);border-radius:9px;min-height:46px;font-size:16px;padding:10px;margin-top:8px}#count{margin-left:auto;color:var(--muted);font-size:12px}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px;margin-top:12px}.card h3{font-size:14px;margin:0;overflow-wrap:anywhere}.card p{font-size:11px;color:var(--muted);margin:5px 0}.card button{font-size:12px;margin:8px 6px 0 0}.about p{font-size:13px;color:var(--muted)}footer{font-size:10px;letter-spacing:.1em;text-align:center;color:var(--muted);padding:32px 0}footer a{display:inline-block;margin-top:12px;font-size:12px;letter-spacing:0;color:var(--gold)}.transport{position:fixed;bottom:0;left:0;right:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));display:flex;gap:12px;justify-content:center;background:#19191ef5;border-top:1px solid var(--line);backdrop-filter:blur(16px);z-index:5}.transport button{max-width:400px;flex:1;font-size:15px;font-weight:650;background:var(--gold);color:#241b15;border:none;min-height:52px}.transport #keep{max-width:140px;background:#38333e;color:var(--lav);border:1px solid #514859}#download{background:#37302a;border:1px solid var(--gold);border-radius:10px;padding:12px}#download-link{display:block;color:var(--gold);overflow-wrap:anywhere;margin-bottom:10px}[hidden]{display:none!important}@media(min-width:650px){h1{font-size:66px}.hero{padding:42px 0}.versions button{font-size:13px}.sources button,.presets button{font-size:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

label select{display:block;width:100%;margin-top:8px}label.check{display:flex;align-items:center;gap:10px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--gold)}.rhythm-box{margin-top:24px;background:#25232b;border:1px solid var(--line);border-radius:13px;padding:14px}.rhythm-box h3{font-size:16px;margin:0;flex:1}.gate-pattern{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-top:18px}.gate-pattern button{min-height:53px;min-width:0;padding:5px 0;font:12px monospace;border-radius:7px}.gate-pattern button[data-level="1"]{background:#c1aedb;color:#201b28}.gate-pattern button[data-level="0.5"]{background:#675974;color:white}.gate-pattern button[data-level="0"]{background:#201f25;color:#b5afa9}#gate-view{display:block;width:100%;height:55px;color:var(--lav);margin-top:12px}.level-meters{font:10px/1.6 monospace;color:var(--muted);margin-top:10px}.row label.pitch select{margin-top:0;width:auto}#shape-feed{border-color:var(--lav)}

.guide-box{border:1px solid #514859;border-radius:12px;padding:16px;background:#26232c}.guide-box>summary{font-size:15px;color:var(--text)}.guide-box>summary span{display:block;font-size:11px;color:var(--lav);margin-left:16px}.guide-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}.guide-presets button{flex:1;font-size:11px;padding:9px 5px}.guide-label{font:10px monospace;letter-spacing:.1em;color:var(--lav);margin-top:24px}.guide-plot{margin-top:22px;border:1px solid var(--line);border-radius:8px;padding:10px}#guide-view{width:100%;height:90px;display:block}.guide-legend{display:flex;gap:8px;flex-wrap:wrap;font-size:10px}.guide-legend span:first-child{color:var(--gold)}.guide-legend span:last-child{color:var(--lav)}.model-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.model-flow span{font-size:11px;padding:8px;border:1px solid var(--line);border-radius:6px}.guide-box .row button{font-size:12px;flex:1;min-width:85px}.guide-box label{margin-top:16px}

.dsp-box{border:1px solid #6c5842;border-radius:12px;padding:16px;background:#29251f}.dsp-box>summary{font-size:15px;color:var(--text)}.dsp-box>summary span{display:block;font-size:11px;color:var(--gold);margin-left:16px}.dsp-box .row button{flex:1;font-size:12px;min-width:85px;padding:9px}.dsp-box label{margin-top:16px}#dsp-region-view{display:block;width:100%;height:60px;margin-top:12px}#dsp-mask{height:144px;background:#19191e;border:1px solid var(--line);border-radius:7px;margin-top:18px;image-rendering:auto}.dsp-mask-labels{display:flex;gap:8px;justify-content:space-between;font:9px/1.5 monospace;color:var(--muted);margin-top:5px}

.grain-box{padding:16px;border:1px solid #506563;border-radius:12px;background:#232b2b}.grain-box>summary{font-size:15px;color:var(--text)}.grain-box>summary span{display:block;margin-left:16px;color:#a9cfbe;font-size:11px}.grain-box label{margin-top:18px}.grain-presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.grain-presets button{flex:1;min-width:110px;font-size:12px;padding:10px 5px}.grain-box .row button{font-size:12px}.grain-box output{color:#b8d8c9}.grain-box input[type=range]{accent-color:#b8d8c9}.grain-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:390px){.grain-pair{grid-template-columns:1fr;gap:0}}

.space-box,.double-box{padding:16px;border:1px solid #57536b;border-radius:12px;background:#26242f}.space-box>summary,.double-box>summary{font-size:15px;color:var(--text)}.space-box>summary span,.double-box>summary span{display:block;margin-left:16px;font-size:11px;color:var(--lav)}.space-presets{display:flex;flex-wrap:wrap;gap:7px}.space-presets button{flex:1;min-width:90px;font-size:12px;padding:10px 6px}.space-box .row button,.double-box .row button{font-size:12px}.space-box label,.double-box label{margin-top:17px}

.pair-box{border:1px solid #62503f;border-radius:12px;padding:16px;background:#29252a}.pair-box>summary{font-size:15px;color:var(--text)}.pair-box>summary span{display:block;font-size:11px;color:var(--gold);margin-left:16px}.pair-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.pair-card{min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px;background:#201f25}.pair-card h3{font-size:15px;margin:0 0 12px}.pair-a h3{color:var(--gold)}.pair-b h3{color:var(--lav)}.pair-card label{margin-top:14px}.pair-quick{display:grid;grid-template-columns:1fr 1fr;gap:5px}.pair-quick button{font-size:11px;padding:5px;min-width:0}.pair-listen{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.pair-listen button{font-size:11px;padding:7px 5px}#pair-report{font-variant-numeric:tabular-nums}#input-chain{padding:0 12px 12px;border-left:2px solid var(--lav)}.gate-pattern button:nth-child(4n){border-right:2px solid #a797b6}@media(max-width:420px){.pair-cards{grid-template-columns:1fr}.pair-card label{margin-top:12px}.gate-pattern{grid-template-columns:repeat(4,1fr)}}