:root{color-scheme:dark;--bg: #07080c;--panel: #0d0f14;--ink: #f4f1ea;--mute: rgba(244, 241, 234, .56);--faint: rgba(244, 241, 234, .32);--line: rgba(244, 241, 234, .12);--line-strong: rgba(244, 241, 234, .24);--accent: #f3c27a;--accent-ink: #1a1307;--radius: 14px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 Outfit,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}a{color:inherit}.studio{display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}.masthead{display:flex;align-items:center;gap:18px;padding:14px 24px 12px}.masthead-title{margin:0;font:400 1.35rem/1 "Instrument Serif",Georgia,serif;letter-spacing:-.005em}.masthead-title em{color:var(--faint)}.masthead nav{margin-left:auto}.brand{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--accent)}.masthead nav{display:flex;gap:20px;font-size:.88rem}.masthead nav a{color:var(--mute);text-decoration:none}.masthead nav a:hover{color:var(--ink)}.workspace{display:grid;grid-template-columns:264px minmax(0,1fr) 304px;grid-template-rows:minmax(0,1fr);gap:16px;padding:0 16px 16px;min-height:0}.rail{display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 28px;min-height:0;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent 100%)}.rail::-webkit-scrollbar{display:none}.section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:12px}.section-head{display:flex;align-items:center;justify-content:space-between}.section h2{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}.tag{font-size:.72rem;color:var(--faint)}.link{border:0;background:none;padding:0;font-size:.8rem;color:var(--accent)}.note{margin:0;font-size:.78rem;color:var(--faint)}.templates{display:grid;gap:8px}.template{text-align:left;border:1px solid var(--line);background:transparent;border-radius:10px;padding:10px 12px;display:grid;gap:2px;transition:border-color .12s,background .12s}.template strong{font-weight:500}.template span{font-size:.8rem;color:var(--mute)}.template:hover{border-color:var(--line-strong)}.template[aria-pressed=true]{border-color:var(--accent);background:#f3c27a12}.effect-family{display:grid;gap:6px}.effects{display:flex;flex-wrap:wrap;gap:6px}.effect{border:1px solid var(--line);background:none;border-radius:999px;padding:5px 11px;font-size:.8rem;color:var(--mute);transition:border-color .12s,color .12s,background .12s}.effect:hover{color:var(--ink);border-color:var(--line-strong)}.effect[aria-pressed=true]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.samples{display:flex;flex-wrap:wrap;gap:6px}.sample{border:1px solid var(--line);background:none;border-radius:999px;padding:4px 10px;font-size:.76rem;color:var(--mute)}.sample:hover{color:var(--ink)}.sample[aria-checked=true]{color:var(--ink);border-color:var(--accent)}.slots{display:grid;gap:8px}.drop-slot{border:1px dashed var(--line-strong);border-radius:10px;transition:border-color .12s,background .12s}.drop-slot.over{border-color:var(--accent);background:#f3c27a14}.drop-hit{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;background:none;text-align:left}.thumb{width:64px;height:44px;flex:none;border-radius:6px;background:#050608;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}.thumb img{max-width:100%;max-height:100%;object-fit:contain}.drop-text{display:grid;min-width:0}.drop-text strong{font-weight:500}.drop-text small{color:var(--mute);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-column{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}.stage-area{flex:1;min-height:0;display:grid;place-items:center}.stage-stack{display:flex;flex-direction:column;align-items:center;gap:12px}.stage-footer .transport{max-width:none}.stage-frame{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 30px 80px #00000073}.stage-frame canvas{display:block}.checker{background-color:#15171c;background-image:linear-gradient(45deg,#1f2229 25%,transparent 25%),linear-gradient(-45deg,#1f2229 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1f2229 75%),linear-gradient(-45deg,transparent 75%,#1f2229 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.stage-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#07080c9e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.stage-overlay span{padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);font-size:.86rem}.error{margin:0;color:#ffb4a8;font-size:.86rem;text-align:center}.transport{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);max-width:640px;width:100%;align-self:center}.transport .play{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;border:0;background:var(--ink);color:var(--bg)}.transport .play svg{width:14px;height:14px;fill:currentColor}.transport input[type=range]{flex:1;accent-color:var(--accent)}.time{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--mute);min-width:5.6rem;text-align:right}.loop{border:1px solid var(--line);background:none;border-radius:999px;padding:4px 10px;font-size:.78rem;color:var(--mute)}.loop[aria-pressed=true]{color:var(--ink);border-color:var(--line-strong)}.segmented{display:flex;padding:3px;gap:2px;border:1px solid var(--line);border-radius:10px;background:#00000040}.segmented.wrap{flex-wrap:wrap}.segmented button{flex:1 1 auto;border:0;background:none;border-radius:7px;padding:6px 8px;font-size:.82rem;color:var(--mute);white-space:nowrap;transition:background .12s,color .12s}.segmented button:hover{color:var(--ink)}.segmented button[aria-checked=true]{background:#f4f1ea1a;color:var(--ink)}.slider{display:grid;gap:4px}.slider label{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mute)}.slider output{font-variant-numeric:tabular-nums;color:var(--ink)}.slider input{width:100%;accent-color:var(--accent)}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.row-label{font-size:.8rem;color:var(--mute)}.swatches{display:flex;gap:6px}.swatches button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);padding:0}.swatches button[aria-checked=true]{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)}.primary,.secondary{border-radius:10px;padding:11px 14px;font-weight:500}.primary{border:0;background:var(--accent);color:var(--accent-ink)}.primary:disabled{opacity:.55;cursor:progress}.secondary{border:1px solid var(--line);background:none;color:var(--mute)}.secondary:hover{color:var(--ink)}@media(max-width:980px){.studio{display:block;height:auto;overflow:visible}.masthead{padding:12px 16px 8px}.masthead-title em{display:none}.workspace{grid-template-columns:1fr;grid-template-rows:none;padding:0 12px 24px}.stage-column{order:-1;position:sticky;top:0;z-index:20;padding:8px 0 10px;background:var(--bg);box-shadow:0 14px 18px -14px #000000e6}.stage-area{flex:none;height:min(46vh,calc(56.25vw + 76px))}.transport{padding:6px 10px}.rail{overflow:visible;-webkit-mask-image:none;mask-image:none;padding-bottom:2px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}