/* SAMPLER (2026-10-31): the Aural Alchemy tool look of Audio Evo and the MIDI Remixer (Cinzel titles, Share Tech Mono
   labels, teal-to-gold gradient, glass panels, gold sliders, thin gold scrollbars), mobile first. Skins (suite-skins.js)
   only act under html.aa-skinned, so the Original skin is this look untouched. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Jost:wght@300;400;500&family=Share+Tech+Mono&display=swap');
:root{--bg:#080e10;--panel:rgba(13,22,24,.64);--line:rgba(212,168,67,.18);--line2:rgba(212,168,67,.32);--fg:#e9e2d0;--mut:#8f9b94;--gold:#d4a843;--gold2:#f2cf63;--teal:#2dd4bf;--title:#f4ecd9;--field:rgba(8,14,16,.7);--mono:'Share Tech Mono',ui-monospace,monospace;--rose:#e0867f;--rec:#e8705c}
*{box-sizing:border-box}
[hidden]:not(.drop){display:none!important}
html{color-scheme:dark;scrollbar-width:thin;scrollbar-color:rgba(212,168,67,.45) transparent;-webkit-text-size-adjust:100%}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(212,168,67,.45);border-radius:6px}::-webkit-scrollbar-button{display:none}
*{scrollbar-width:thin;scrollbar-color:rgba(212,168,67,.45) transparent}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:300 15px/1.6 'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
#aa-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,14,16,.7) 0%,rgba(8,14,16,.86) 45%,rgba(8,14,16,.95) 100%),url(/rediseno/home/hero-chamber-h.webp) center/cover no-repeat}
@media (max-width:700px),(orientation:portrait){#aa-bg{background:linear-gradient(180deg,rgba(8,14,16,.7) 0%,rgba(8,14,16,.88) 45%,rgba(8,14,16,.96) 100%),url(/rediseno/home/hero-chamber-v.webp) center/cover no-repeat}}
header,main,.linkbar{position:relative;z-index:1}
header{padding:16px 22px 0;max-width:1400px;margin:auto}
.hrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hrow .aa-skin-btn,.hrow #syncBadge{margin-left:auto}
#syncBadge:not([hidden])+.aa-skin-btn{margin-left:0}
h1{margin:0;font-family:'Cinzel',serif;font-weight:500;font-size:clamp(1.45rem,3.2vw,2rem);letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(118deg,#b9eadf 0%,#f4ecd9 40%,#f2cf63 75%,#d4a843 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kick{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
header p{margin:8px 0 0;color:var(--mut);font-size:.92rem;max-width:820px}
header p.value{margin:4px 0 0;font:500 1.06rem/1.35 'Cinzel',serif;letter-spacing:.05em;color:var(--title)}
header p.long{margin-top:4px}
.mut{color:var(--mut)}
#syncBadge{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(8,14,16,.6);font:400 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
#syncBadge[hidden]{display:none}
#syncBadge i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);opacity:.35;transition:opacity .08s}
.linkbar{max-width:1400px;margin:12px auto 0;padding:0 22px;display:flex;align-items:center;gap:12px}
.linkbar[hidden]{display:none}
.linkbar>span{flex:1;min-width:0;padding:9px 14px;border:1px solid rgba(45,212,191,.35);border-radius:12px;background:rgba(45,212,191,.07);font-size:.86rem}
.linkbar i{width:9px;height:9px;flex:none;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.linkbar b{color:var(--title);font-weight:500}
main{padding:12px 22px 70px;max-width:1400px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.left{min-width:0;display:flex;flex-direction:column;gap:14px}

/* ---------- buttons, fields ---------- */
button,select,input[type=text],input[type=search]{min-height:40px;background:var(--field);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font:400 .74rem var(--mono);letter-spacing:.1em;transition:border-color .2s,background .2s,box-shadow .2s,opacity .2s}
button{cursor:pointer;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:7px}
button:hover:not(:disabled){border-color:var(--gold2);background:rgba(212,168,67,.1)}
button:disabled{opacity:.35;cursor:default}
button svg{width:15px;height:15px;flex:none}
button.small{min-height:34px;padding:5px 12px;font-size:.64rem}
button.ghost{background:transparent}
button.primary{color:#1a1408;border-color:transparent;font-family:'Cinzel',serif;font-weight:600;letter-spacing:.14em;padding:10px 22px;background:linear-gradient(180deg,#f2cf63,#d4a843);box-shadow:0 14px 40px -12px rgba(212,168,67,.6),inset 0 1px 0 rgba(255,255,255,.4)}
button.primary:hover:not(:disabled){background:linear-gradient(180deg,#f7d873,#dcae4b);border-color:transparent}
button:focus-visible,select:focus-visible,input:focus-visible,.drop:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
select{appearance:none;-webkit-appearance:none;border-radius:10px;padding-right:30px;font:400 .86rem 'Jost',sans-serif;letter-spacing:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23d4a843' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;cursor:pointer}
select option{background:#0d1618;color:var(--fg)}
input[type=text],input[type=search]{border-radius:10px;font:400 .9rem 'Jost',sans-serif;letter-spacing:0;width:100%}
input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;margin:0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:2px 0 0;background:transparent;cursor:pointer;accent-color:var(--gold);touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(45,212,191,.55),rgba(212,168,67,.6))}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(45,212,191,.55),rgba(212,168,67,.6))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6.5px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#f7de8a,#d4a843);box-shadow:0 0 0 4px rgba(212,168,67,.14),0 2px 10px rgba(212,168,67,.5)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#f7de8a,#d4a843);box-shadow:0 0 0 4px rgba(212,168,67,.14),0 2px 10px rgba(212,168,67,.5)}
.tog{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--field);font:400 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;user-select:none}
.tog:has(input:checked){border-color:rgba(242,207,99,.55);color:var(--gold2);background:rgba(212,168,67,.1)}
.step{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--field)}
.step button{min-height:32px;width:32px;padding:0;border:0;background:transparent;font-size:1rem;letter-spacing:0}
.step output{min-width:58px;text-align:center;font:400 .78rem var(--mono);color:var(--gold2);letter-spacing:.06em;white-space:nowrap}
.step output small{color:var(--mut);margin-right:4px;font-size:.6rem}
kbd{display:inline-block;min-width:18px;padding:0 4px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;font:400 .62rem var(--mono);color:var(--title);text-align:center;margin:0 1px}

/* ---------- the stage ---------- */
.stage,.rec{position:relative;background:linear-gradient(180deg,rgba(10,18,20,.8),rgba(8,14,16,.74));border:1px solid var(--line);border-radius:18px;padding:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03)}
.lh{display:flex;align-items:center;gap:10px;min-height:26px;margin:2px 2px 8px;min-width:0}
.lh .tag{flex:none;font:400 .58rem var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--teal);padding:3px 8px;border:1px solid rgba(45,212,191,.28);border-radius:6px}
.lh b{font:500 .95rem 'Cinzel',serif;letter-spacing:.04em;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lh .chips{display:flex;gap:6px;margin-left:auto;flex-wrap:nowrap;overflow:hidden;min-width:0}
.chip{flex:none;font:400 .6rem var(--mono);letter-spacing:.08em;color:var(--mut);padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);white-space:nowrap}
.chip.hi{color:var(--gold2);border-color:rgba(212,168,67,.3)}.chip.te{color:var(--teal);border-color:rgba(45,212,191,.25)}
.chip:empty{display:none}
.lane{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(4,9,10,.86),rgba(9,16,18,.76));border:1px solid rgba(212,168,67,.12)}
.lane canvas{display:block;width:100%;height:100%}
#waveLane{height:178px;touch-action:pan-y}
#waveLane.has{cursor:ew-resize}
.drop{position:absolute;inset:8px;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px dashed rgba(212,168,67,.45);border-radius:12px;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(212,168,67,.1),transparent 70%),#070c0d;cursor:pointer;transition:border-color .2s,background .2s,opacity .25s}
.drop:hover,.drop.over{border-color:var(--gold2);background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(212,168,67,.18),transparent 70%),#070c0d}
.drop[hidden]{display:flex;opacity:0;pointer-events:none}
#waveLane.over{outline:2px dashed var(--gold2);outline-offset:-4px}
.dropin{max-width:600px;padding:8px 12px}
.dropin svg{width:40px;height:40px;margin-bottom:2px;filter:drop-shadow(0 0 18px rgba(212,168,67,.35))}
.dropin b{display:block;font:500 clamp(1.1rem,2.6vw,1.45rem) 'Cinzel',serif;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(118deg,#b9eadf,#f4ecd9 45%,#f2cf63);-webkit-background-clip:text;background-clip:text;color:transparent}
.dropin .sub{display:block;margin-top:2px;color:var(--mut);font-size:.86rem;line-height:1.45}
.dropin u{color:var(--gold2);text-decoration-color:rgba(242,207,99,.4);text-underline-offset:3px;cursor:pointer}
.dropin .or{display:block;margin:10px 0 7px;font:400 .58rem var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--teal)}
.chipsrow{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.chipsrow button{min-height:36px;padding:5px 14px;font:400 .82rem 'Jost',sans-serif;text-transform:none;letter-spacing:.02em}
#prog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,88%);padding:13px 16px 11px;border-radius:14px;background:rgba(6,11,12,.9);border:1px solid var(--line2);box-shadow:0 20px 50px -20px rgba(0,0,0,.9);z-index:6}
#prog[hidden]{display:none}
#pStep{font:500 .9rem 'Cinzel',serif;color:var(--title);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptrack{height:6px;margin:9px 0 7px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.ptrack span{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--gold2));box-shadow:0 0 12px rgba(242,207,99,.5);transition:width .12s linear}
.pmeta{display:flex;justify-content:space-between;gap:10px;font:400 .62rem var(--mono);letter-spacing:.08em;color:var(--mut)}
#pPct,#libPct{color:var(--teal)}
.srcrow{display:flex;align-items:center;gap:8px;margin:10px 0 0;min-width:0}
.srcrow>button{flex:none}
.recent{display:flex;gap:6px;overflow-x:auto;min-width:0;padding:2px 0;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.recent::-webkit-scrollbar{display:none}
.recent button{flex:none;min-height:32px;padding:4px 12px;font:400 .76rem 'Jost',sans-serif;text-transform:none;letter-spacing:.01em;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.recent .rl{flex:none;font:400 .56rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);align-self:center}

/* zones */
.zonebar{margin:12px 0 0;padding:10px;border:1px solid rgba(212,168,67,.12);border-radius:12px;background:rgba(4,9,10,.5)}
.zonebar[hidden]{display:none}
.zpick{display:flex;gap:6px;overflow-x:auto;padding:0 0 8px;min-width:0}
.zpick button{flex:none;min-height:30px;padding:3px 11px;font:400 .74rem 'Jost',sans-serif;text-transform:none;letter-spacing:0;border-radius:8px;gap:6px}
.zpick button i{width:8px;height:8px;border-radius:50%;flex:none}
.zpick button[aria-selected=true]{border-color:var(--gold2);color:var(--gold2);background:rgba(212,168,67,.12)}
.zfields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.zf{display:flex;flex-direction:column;gap:2px;min-width:0}
.zf>span{font:400 .56rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.zf select{min-height:34px;padding:4px 28px 4px 10px;font-size:.84rem}
.zfine{flex:1 1 150px;min-width:130px}
.zfine output{font:400 .66rem var(--mono);color:var(--gold2)}
.zsrc{margin:8px 2px 0;font-size:.78rem;color:var(--mut)}
.zsrc:empty{display:none}

/* keyboard */
.kbwrap{margin-top:12px}
.kbtools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:8px}
.kmap{font-size:.74rem;color:var(--mut)}
.pedal{font:400 .6rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#081210;background:var(--teal);border-radius:6px;padding:3px 8px}
.pedal[hidden]{display:none}
#panic{margin-left:auto}
.kbscroll{overflow-x:auto;overflow-y:hidden;border-radius:12px;border:1px solid rgba(212,168,67,.14);background:rgba(4,9,10,.6);overscroll-behavior-x:contain}
.kbin{position:relative}
.zmap{position:relative;height:26px;touch-action:pan-x;border-bottom:1px solid rgba(212,168,67,.12);cursor:grab}
.zmap .zb{position:absolute;top:5px;height:16px;border-radius:5px;border:1px solid;opacity:.75;cursor:pointer;overflow:hidden;font:400 .55rem/14px var(--mono);letter-spacing:.06em;color:#081210;padding:0 5px;white-space:nowrap}
.zmap .zb.sel{opacity:1;box-shadow:0 0 0 1px #fff3,0 0 12px currentColor}
.zmap .zr{position:absolute;top:3px;width:3px;height:20px;border-radius:2px;background:#fff;pointer-events:none;box-shadow:0 0 6px #fff8}
.kb{position:relative;height:150px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.kb .k{position:absolute;top:0;padding:0;border-radius:0 0 7px 7px;min-height:0;letter-spacing:0;text-transform:none;-webkit-tap-highlight-color:transparent;transition:background .05s}
.kb .w{height:100%;border:1px solid rgba(0,0,0,.55);background:linear-gradient(180deg,#e7dfca 0%,#d6cdb4 82%,#bfb59a 100%);z-index:1}
.kb .b{height:60%;border:1px solid #000;background:linear-gradient(180deg,#222b2c,#0a1011 88%,#1c2324);z-index:2;box-shadow:0 3px 5px rgba(0,0,0,.5)}
.kb .w:hover{background:linear-gradient(180deg,#efe8d4,#ddd4bb)}
.kb .k i{position:absolute;left:0;right:0;bottom:6px;font:400 .58rem var(--mono);font-style:normal;color:#3a2f18;text-align:center;pointer-events:none}
.kb .k.root{box-shadow:inset 0 -5px 0 var(--gold)}
.kb .b.root{box-shadow:inset 0 -5px 0 var(--gold),0 3px 5px rgba(0,0,0,.5)}
.kb .w.on{background:linear-gradient(180deg,#9ff3e6,var(--teal))}
.kb .b.on{background:linear-gradient(180deg,#2dd4bf,#128f80)}
.kb .k.kbd::after{content:attr(data-key);position:absolute;left:0;right:0;top:6px;text-align:center;font:400 .55rem var(--mono);color:rgba(58,47,24,.65);text-transform:uppercase;pointer-events:none}
.kb .b.kbd::after{color:rgba(242,207,99,.7)}

/* recorder */
.rrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.rrow.out{margin-top:10px}
.rbtn{color:var(--rec);border-color:rgba(232,112,92,.45)}
.rbtn svg{fill:currentColor}
.rbtn.on{background:rgba(232,112,92,.16);border-color:var(--rec);box-shadow:0 0 22px -6px rgba(232,112,92,.8)}
.rbtn.count{animation:recPulse .5s ease-in-out infinite alternate}
@keyframes recPulse{from{opacity:1}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.rbtn.count{animation:none}}
.clock{display:flex;align-items:baseline;gap:8px;padding:0 6px;font:400 .95rem var(--mono);color:var(--title);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.clock .mut{font-size:.72rem;color:var(--teal);letter-spacing:.12em}
.sp{flex:1}
.takelane{height:96px;margin-top:10px}
.takeempty{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:.84rem;pointer-events:none;padding:0 12px;text-align:center}
.takeempty[hidden]{display:none}
button.send{border-color:rgba(45,212,191,.5);color:var(--teal)}
.takeinfo{font-size:.78rem}

/* ---------- side panel ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px 16px 10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sec{border-top:1px solid rgba(212,168,67,.12)}
.sec:first-child{border-top:0}
.sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::after{content:'';width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);margin:0 4px 4px 0;transition:transform .2s}
.sec[open]>summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.sec h2{margin:0;font:400 .62rem var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--teal)}
.sec>div,.sec>p{margin-bottom:10px}
.ctl{margin:0 0 10px}
.ctl .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ctl label{color:var(--title);font:500 .88rem 'Cinzel',serif;letter-spacing:.04em;cursor:help}
.ctl output{color:var(--gold2);font:400 .72rem var(--mono);letter-spacing:.06em;white-space:nowrap}
.ctl.off{opacity:.42}
.ctl select{width:100%;margin-top:4px;min-height:34px;font-size:.84rem}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--field);margin-bottom:12px}
.modes button{min-height:32px;padding:4px 6px;border:0;border-radius:999px;background:transparent;font-size:.62rem;letter-spacing:.1em;color:var(--mut)}
.modes button[aria-checked=true]{background:linear-gradient(180deg,rgba(242,207,99,.24),rgba(212,168,67,.12));color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(242,207,99,.45)}
.togs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mine{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.mine:empty{display:none}
.mine .up{display:inline-flex;align-items:center;border:1px solid rgba(45,212,191,.3);border-radius:999px;overflow:hidden}
.mine .up button{min-height:30px;border:0;border-radius:0;font:400 .8rem 'Jost',sans-serif;text-transform:none;letter-spacing:0;padding:3px 10px;background:transparent}
.mine .up button.del{padding:3px 9px;color:var(--mut);font-size:.9rem}
.mine .up button[aria-pressed=true]{color:var(--teal)}
.saverow{display:flex;gap:6px;margin-top:10px}
.saverow input{min-height:34px;padding:5px 10px;font-size:.84rem}
.midirow{display:flex;gap:8px;align-items:center}
.midirow select{flex:1;min-width:0;min-height:34px}
.panel .hint{font-size:.78rem;color:var(--mut);line-height:1.4;margin:8px 0 0}
.panel .aa-pchips{margin:0}

/* ---------- library drawer ---------- */
.lib{position:fixed;z-index:45;top:0;bottom:0;left:0;width:min(440px,100vw);display:flex;flex-direction:column;gap:8px;padding:14px 14px 10px;background:linear-gradient(180deg,rgba(9,16,18,.97),rgba(6,11,12,.98));border-right:1px solid var(--line2);box-shadow:30px 0 60px -30px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lib[hidden]{display:none}
.libh{display:flex;align-items:center;gap:10px}
.libh h2{margin:0;font:500 1.05rem 'Cinzel',serif;letter-spacing:.12em;text-transform:uppercase;color:var(--title)}
.libh .mut{font:400 .62rem var(--mono);letter-spacing:.1em}
.x{margin-left:auto;width:38px;min-height:38px;padding:0;font-size:1.3rem;line-height:1;letter-spacing:0}
.libf select{width:100%}
.cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;flex:none}
.cats button{flex:none;min-height:30px;padding:3px 11px;font:400 .76rem 'Jost',sans-serif;text-transform:none;letter-spacing:0}
.cats button[aria-pressed=true]{border-color:var(--gold2);color:var(--gold2);background:rgba(212,168,67,.12)}
.librecent{display:flex;gap:6px;overflow-x:auto;flex:none}
.librecent:empty{display:none}
.librecent button{flex:none;min-height:28px;padding:2px 10px;font:400 .74rem 'Jost',sans-serif;text-transform:none;letter-spacing:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.libbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;font-size:.78rem}
.libnote{margin:0;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;background:rgba(212,168,67,.06);font-size:.84rem;line-height:1.45}
.libnote a{color:var(--gold2)}
.libprog[hidden]{display:none}
.liblist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px;padding-right:4px}
.li{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 4px;border:1px solid transparent;border-radius:10px;background:rgba(255,255,255,.02);cursor:grab}
.li:hover{border-color:var(--line);background:rgba(212,168,67,.05)}
.li.lock{cursor:pointer}
.li .pv{flex:none;width:34px;min-height:34px;padding:0;border-radius:50%;letter-spacing:0}
.li .pv.on{border-color:var(--teal);color:var(--teal)}
.li .tx{flex:1;min-width:0}
.li .tx b{display:block;font:400 .86rem 'Jost',sans-serif;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .tx span{display:block;font:400 .6rem var(--mono);letter-spacing:.06em;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li svg.wv{flex:none;width:56px;height:22px;opacity:.7}
.li .act{flex:none;display:flex;gap:4px}
.li .act button{min-height:32px;padding:3px 10px;font-size:.6rem}
.li .badge{flex:none;font:400 .56rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);border:1px solid rgba(212,168,67,.4);border-radius:6px;padding:3px 7px}
.more{flex:none;width:100%}

/* ---------- guide, tooltip, toast ---------- */
.aa-guia{position:fixed;left:14px;bottom:14px;z-index:40;display:inline-flex;align-items:center;gap:6px;min-height:0;padding:5px 11px 5px 9px;border-radius:999px;border:1px solid rgba(201,168,106,.35);background:rgba(10,8,6,.55);color:#cbb88f;font:400 12px/1 'Jost',sans-serif;letter-spacing:.04em;text-transform:none;opacity:.6;transition:opacity .2s,border-color .2s,color .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.aa-guia:hover,.aa-guia:focus-visible{color:#f2e8d5;border-color:#c9a86a;opacity:1;outline:none;background:rgba(10,8,6,.7)}
.guide{position:fixed;left:14px;bottom:52px;z-index:41;width:min(340px,calc(100vw - 28px));padding:14px 16px 12px;border:1px solid var(--line2);border-radius:14px;background:rgba(7,12,13,.97);box-shadow:0 24px 60px -20px rgba(0,0,0,.9);font-size:.84rem;line-height:1.45}
.guide[hidden]{display:none}
.guide .gh{display:flex;align-items:center;margin-bottom:4px}
.guide .gh b{font:500 .95rem 'Cinzel',serif;letter-spacing:.06em;color:var(--title)}
.guide .x{width:32px;min-height:32px}
.guide ol{margin:4px 0 8px;padding-left:18px}
.guide li{margin:5px 0}
.guide li b{color:var(--gold2);font-weight:500}
.guide p{margin:0;font-size:.76rem}
#tip{position:fixed;z-index:60;max-width:260px;padding:7px 10px;border-radius:9px;border:1px solid var(--line2);background:rgba(6,11,12,.96);color:var(--fg);font:400 .78rem/1.4 'Jost',sans-serif;box-shadow:0 10px 30px -10px rgba(0,0,0,.9);pointer-events:none}
#tip[hidden]{display:none}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;max-width:min(560px,calc(100vw - 32px));padding:0;pointer-events:none}
#toast div{margin-top:8px;padding:10px 16px;border-radius:12px;border:1px solid var(--line2);background:rgba(7,12,13,.96);font-size:.86rem;line-height:1.4;box-shadow:0 20px 50px -20px rgba(0,0,0,.9);pointer-events:auto}
#toast a{color:var(--gold2)}

/* ---------- responsive ---------- */
@media (max-width:1060px){main{grid-template-columns:minmax(0,1fr)}.panel{order:2}}
@media (max-width:700px){
  header{padding:12px 16px 0}.kick{margin-bottom:2px}header p.long{display:none}header p.value{font-size:.98rem;margin-top:2px}
  .linkbar{padding:0 16px}
  main{padding:8px 16px 70px;gap:12px}
  .stage,.rec{padding:10px;border-radius:16px}
  #waveLane{height:150px}
  .dropin svg{display:none}.dropin .sub{font-size:.8rem}.dropin .or{margin:7px 0 6px}
  .chipsrow{display:grid;grid-template-columns:1fr 1fr;gap:6px}.chipsrow button{min-height:44px;padding:4px 6px}
  .kmap{display:none}
  .kb{height:140px}
  .srcrow>button{min-height:44px}
  button,select,.tog,.step button{min-height:44px}
  .step button{width:40px}
  button.small{min-height:40px}
  .rrow .tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rrow #recBtn,.rrow #playBtn,.rrow #stopBtn{width:48px;padding:0}
  .rrow #playBtn svg,.rrow #stopBtn svg,.rrow #recBtn svg{width:18px;height:18px}
  .clock{font-size:.85rem}
  .rrow .sp{display:none}
  .rrow.out button{flex:1 1 auto;padding:6px 10px;font-size:.62rem}
  .zfields{gap:8px}
  .zf select{min-height:40px}
  input[type=range]{height:40px}
  .aa-guia span{display:none}.aa-guia{padding:7px 9px;left:10px;bottom:10px}
  .guide{left:10px;bottom:50px}
  .lib{width:100vw;border-right:0}
  .li .act button{min-height:40px}
  .li svg.wv{display:none}
}

/* ---------- skins (suite-skins.js): only under html.aa-skinned ---------- */
html.aa-skinned{--gold:var(--sk-a);--gold2:var(--sk-a2);--panel:var(--sk-panel);--line:rgba(var(--sk-rgb),.2);--line2:rgba(var(--sk-rgb),.38);--field:rgba(var(--sk-panel-rgb),.72);scrollbar-color:rgba(var(--sk-rgb),.45) transparent}
html.aa-skinned *{scrollbar-color:rgba(var(--sk-rgb),.45) transparent}
html.aa-skinned ::-webkit-scrollbar-thumb{background:rgba(var(--sk-rgb),.45)}
html.aa-skinned h1{background:linear-gradient(118deg,#e8f7f3 0%,#f4ecd9 38%,var(--sk-a2) 74%,var(--sk-a) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html.aa-skinned .stage,html.aa-skinned .rec{background:linear-gradient(180deg,rgba(var(--sk-panel-rgb),.82),rgba(var(--sk-panel-rgb),.74));border-color:rgba(var(--sk-rgb),.2)}
html.aa-skinned .lane,html.aa-skinned .kbscroll,html.aa-skinned .zonebar{border-color:rgba(var(--sk-rgb),.16)}
html.aa-skinned .sec{border-top-color:rgba(var(--sk-rgb),.14)}
html.aa-skinned .sec:first-child{border-top:0}
html.aa-skinned .sec>summary::after{border-color:var(--sk-a)}
html.aa-skinned button:hover:not(:disabled){background:rgba(var(--sk-rgb),.12)}
html.aa-skinned button.primary{color:var(--sk-ink);background:linear-gradient(180deg,var(--sk-a2),var(--sk-a));box-shadow:0 14px 40px -12px rgba(var(--sk-rgb),.6),inset 0 1px 0 rgba(255,255,255,.4)}
html.aa-skinned button.primary:hover:not(:disabled){background:linear-gradient(180deg,var(--sk-a2),var(--sk-a));filter:brightness(1.07)}
html.aa-skinned .modes button[aria-checked=true],html.aa-skinned .zpick button[aria-selected=true],html.aa-skinned .cats button[aria-pressed=true]{background:linear-gradient(180deg,rgba(var(--sk-rgb2),.24),rgba(var(--sk-rgb),.12));color:var(--sk-a2);box-shadow:inset 0 0 0 1px rgba(var(--sk-rgb2),.45)}
html.aa-skinned .tog:has(input:checked){border-color:rgba(var(--sk-rgb2),.55);color:var(--sk-a2);background:rgba(var(--sk-rgb),.1)}
html.aa-skinned input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,rgba(45,212,191,.55),rgba(var(--sk-rgb),.7))}
html.aa-skinned input[type=range]::-moz-range-track{background:linear-gradient(90deg,rgba(45,212,191,.55),rgba(var(--sk-rgb),.7))}
html.aa-skinned input[type=range]::-webkit-slider-thumb{background:radial-gradient(circle at 35% 30%,#fff6dc,var(--sk-a));box-shadow:0 0 0 4px rgba(var(--sk-rgb),.16),0 2px 10px rgba(var(--sk-rgb),.5)}
html.aa-skinned input[type=range]::-moz-range-thumb{background:radial-gradient(circle at 35% 30%,#fff6dc,var(--sk-a));box-shadow:0 0 0 4px rgba(var(--sk-rgb),.16),0 2px 10px rgba(var(--sk-rgb),.5)}
html.aa-skinned .drop{border-color:rgba(var(--sk-rgb),.5);background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(var(--sk-rgb),.12),transparent 70%),rgba(var(--sk-panel-rgb),.94)}
html.aa-skinned #prog,html.aa-skinned .lib,html.aa-skinned .guide,html.aa-skinned #tip,html.aa-skinned #toast div{background:rgba(var(--sk-panel-rgb),.97)}
html.aa-skinned .kb .k.root{box-shadow:inset 0 -5px 0 var(--sk-a)}
html.aa-skinned #syncBadge{background:rgba(var(--sk-panel-rgb),.6)}

/* empty: the lane grows with the drop zone (nothing is cut on a phone) */
#waveLane.empty{height:auto;min-height:178px}
#waveLane.empty canvas{position:absolute;inset:0}
#waveLane.empty .drop{position:relative;inset:auto;margin:8px;min-height:162px}
/* wide screens: the controls stay beside the keyboard and scroll on their own */
@media (min-width:1061px){.panel{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain}}
@media (max-width:700px){
  .lh #cLen{display:none}
  .zfields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .zfields .zfine{grid-column:1/-1;order:3}
  .zfields .zf select{width:100%}
  .zfields button{order:4;min-width:0;padding:4px 6px;font-size:.58rem;letter-spacing:.06em}
  .kbtools .step output{min-width:46px}
  .kbtools .step button{width:36px}
  .rrow .tog{padding:4px 10px;font-size:.6rem}
  .rrow .step.tempo output{min-width:64px}
  .rrow.out{display:grid;grid-template-columns:1fr 1fr}
  .rrow.out .takeinfo{grid-column:1/-1}
}
/* in a frame (the Suite tab, beside Track Maker, Track Maker's drawer) the long intro line steps aside */
html.framed header p.long{display:none}
html.framed header{padding-top:12px}
/* ---------- small frames and the Suite's chat button (2026-10-31) ---------- */
/* the Library: search and pack on one row, "Show more" scrolls as the list's last row, so the list keeps its height */
.libsr{display:flex;gap:8px;flex:none;min-width:0}
.libsr #libQ{flex:1 1 58%;min-width:0}
.libsr .libf{flex:1 1 42%;min-width:0}
.liblist .more{margin-top:4px}
.x{width:40px;min-height:40px}
/* the strip the Suite's chat button covers stays empty (sampler.js fitFab sets --smp-fab where it overlaps) */
.lib[style*="--smp-fab"]{padding-bottom:var(--smp-fab)}
@media (min-width:1061px){.panel[style*="--smp-fab"]{max-height:calc(100vh - 24px - var(--smp-fab))}}
/* short frames (a Suite tab at 540 x 540): the count sits beside the categories, Recent stays on the stage */
@media (max-height:640px){
  .lib{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto auto minmax(0,1fr);row-gap:0;column-gap:10px;padding-top:10px}
  .lib>*{margin-top:6px}.lib>.libh{margin-top:0}
  .libh,.libsr,.libnote,.libprog,.liblist{grid-column:1/-1}
  .libh{grid-row:1}.libsr{grid-row:2}.cats{grid-row:3;grid-column:1;min-width:0}.libbar{grid-row:3;grid-column:2;min-height:0;max-width:46vw}
  .libnote{grid-row:4}.libprog{grid-row:5}.liblist{grid-row:6}
  .lib .librecent{display:none}
  .libbar #libShown{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
/* touch targets of 40 px and more on phones */
@media (max-width:700px){
  .cats button,.librecent button{min-height:40px;min-width:40px}
  .li .pv{width:40px;min-height:40px}
  .li .act button{min-width:40px}
  .sec>summary{min-height:44px;padding:8px 0}
  .hrow .aa-skin-btn:not(.aa-keep-label){width:44px}
}
/* the "How it works" pill: a 40 px tap area around the small pill; in a short Suite frame it moves to the top corner, so
   at rest it never covers the Library button at the bottom (and the chat button keeps the other bottom corner) */
.aa-guia::before{content:"";position:absolute;inset:-6px}
@media (max-height:640px){html.framed .aa-guia{position:absolute;top:8px;right:66px;left:auto;bottom:auto}html.framed .guide{top:44px;bottom:auto;left:auto;right:16px}}
/* phones (2026-10-31): fixed in the bottom-left corner the guide button sat on the Metronome toggle at first view and on
   the lowest key inside the Suite. It moves to the header's top row, left of the skin button, clear of the title row. */
@media (max-width:700px){.aa-guia{position:absolute;top:8px;right:66px;left:auto;bottom:auto;padding:5px 8px}.guide{top:44px;bottom:auto;left:auto;right:16px}}