:root{color-scheme:light;--ink:#232129;--muted:#66616d;--panel:#fff;--line:#e8e3ec;--wash:#f7f5f8;--accent:#5237ad;--accent-ink:#fff;font:15px/1.45 "DM Sans",sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#f8f7fa}button,select{font:inherit;color:inherit}button{cursor:pointer}button,a,select,summary,[tabindex]{outline-offset:4px} :focus-visible{outline:2px solid #7651e3}a{color:inherit}h1,h2,h3,p{margin:0}[hidden]{display:none!important}
.topbar{border-bottom:1px solid var(--line);background:#fff}.top-inner,main{max-width:1440px;margin:auto;padding-inline:clamp(18px,4vw,66px)}.top-inner{display:flex;align-items:center;gap:40px;min-height:64px}.wordmark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:700 18px Geist,sans-serif;letter-spacing:-.045em}.mark{background:#26222e;display:grid;place-content:center;gap:3px;width:26px;height:26px;border-radius:7px;transform:rotate(-6deg)}.mark i{display:block;height:2px;width:12px;background:#d6c9ff;border-radius:2px}.mark i:nth-child(2){transform:translateX(2px)}.mark i:nth-child(3){transform:translateX(-2px)}.top-inner nav{display:flex;gap:20px}.top-inner nav a{font-size:.87rem;text-decoration:none;color:var(--muted)}.top-inner nav a[aria-current]{font-weight:700;color:var(--ink)}.share{margin-left:auto;white-space:nowrap}
.intro{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;padding:41px 0 27px}.eyebrow{font:500 10px "IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--accent);margin-bottom:9px}.intro h1{font:600 clamp(36px,5.3vw,68px)/.98 Geist,sans-serif;letter-spacing:-.082em}.intro p:not(.eyebrow){color:var(--muted);max-width:530px;margin-top:13px}.counts{display:flex;gap:0;white-space:nowrap;color:var(--muted);font-size:.79rem;padding-bottom:2px}.counts span{padding-inline:12px;border-left:1px solid #dfdae5}.counts span:first-child{border-left:0}.counts span:last-child{padding-right:0}.counts strong{color:var(--ink)}
.workbench{display:grid;grid-template-columns:minmax(235px,280px) minmax(0,1fr);gap:16px;align-items:start;scroll-margin-top:16px}.settings,.stage,.command-panel,.fit-panel{background:#fff;border:1px solid var(--line);border-radius:14px;min-width:0}.panel-heading,.stage-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.settings{padding:18px}.panel-heading{padding-bottom:14px;border-bottom:1px solid var(--line)}h2{font:650 16px/1.2 Geist,sans-serif;letter-spacing:-.04em}.text-button{border:0;background:none;padding:4px 0;color:var(--accent);font-size:.81rem;font-weight:700}.field{padding:13px 0;border-bottom:1px solid var(--line)}.field label,.effects-bar label{display:block;font-size:.825rem;font-weight:700;margin-bottom:6px}.field select,.effects-bar select{background:#faf9fb;border:1px solid #e4dfea;border-radius:7px;width:100%;min-height:37px;padding:5px 9px}.field-note{font-size:.75rem;margin-top:6px;color:var(--muted);line-height:1.36}.add{margin-top:4px}.extras:not(:empty){display:grid;gap:6px;margin-top:8px}.extra-row{display:flex;gap:7px}.remove{border:1px solid var(--line);border-radius:6px;background:var(--wash);width:32px;flex:none}.panel-footer{margin-top:13px}.quiet{border:1px solid #e0dbe7;background:#fff;border-radius:7px;padding:7px 10px;font-size:.82rem;font-weight:650;min-height:34px}.quiet:hover{background:#f2edf9}.quiet span{padding-right:3px}.swatches{display:flex;overflow:hidden;border-radius:6px;margin-top:7px;min-height:28px}.swatches span{display:grid;flex:1;place-items:center;font:500 9px "IBM Plex Mono",monospace}
.results{display:grid;gap:12px}.stage{padding:13px}.stage-top{margin:0 0 10px 2px}.tabs{display:flex;gap:3px;padding:3px;background:#f3f0f6;border:1px solid #eee9f3;border-radius:8px}.tabs button{border:0;background:none;border-radius:6px;color:var(--muted);padding:6px 9px;font-size:.77rem;font-weight:650}.tabs button[aria-pressed=true]{background:#fff;color:#2d2636;box-shadow:0 1px 3px #392d4b29}.browser-frame{border:1px solid #e9e5ee;border-radius:10px;overflow:hidden}.browser-bar{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:8px;min-height:32px;padding:0 9px;background:#f1eef4;color:#62596d;font:500 10px "IBM Plex Mono",monospace}.chrome-dots{display:flex;gap:4px}.chrome-dots i{width:5px;height:5px;border-radius:100%;background:#c9c0d2}.browser-bar>span:nth-child(2){text-align:center}.browser-bar button{justify-self:end;font:650 10px Geist,sans-serif;white-space:nowrap}.viewport{background:#e9e5ef;padding:0}.viewport.mobile{padding:12px}.viewport.mobile .demo{width:min(100%,360px);margin:auto;border-radius:10px}.effects-bar{display:flex;gap:10px;align-items:center;margin-top:10px}.effects-bar label{margin:0;white-space:nowrap}.effects-bar select{width:auto;flex:1}
.result-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:12px}.command-panel,.fit-panel{padding:14px}.command-panel code{display:block;color:#e9defb;background:#282331;border-radius:7px;padding:9px 10px;overflow-wrap:anywhere;font:400 .74rem/1.5 "IBM Plex Mono",monospace;margin:9px 0}.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:7px;font-weight:700;font-size:.82rem;padding:8px 12px;min-height:35px}.primary:hover{background:#422989}.fit-panel #fit{margin-top:8px}.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}.tag{background:#f0ebfc;color:#472887;padding:3px 7px;border-radius:4px;font-size:.73rem;font-weight:700}.fit-panel p{color:var(--muted);font-size:.77rem;line-height:1.38}.fit-panel p+p{margin-top:4px}
.directions{margin-top:28px;scroll-margin-top:18px}.directions h2{font-size:20px}.starter-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}.starter{border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;padding:12px;font-size:.83rem;font-weight:700;min-width:0}.starter:hover{border-color:var(--accent)}.starter small{display:block;color:var(--muted);margin-top:4px;font-weight:500}.starter-strip{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-bottom:9px}.starter-strip i{flex:1}.starter-strip i:first-child{flex:3}.starter-strip i:nth-child(2){flex:1.5}.references{margin:22px 0 35px;color:var(--muted);font-size:.84rem}.references summary{cursor:pointer;font-weight:700}.references a:hover{color:var(--accent)}.toast{position:fixed;bottom:20px;right:20px;background:#26222e;color:#fff;padding:11px 14px;border-radius:9px;z-index:9;box-shadow:0 6px 22px #21183735}
@media(max-width:850px){.workbench{grid-template-columns:minmax(190px,230px) minmax(0,1fr)}.settings{padding:12px}.top-inner{gap:20px}.counts{display:none}.result-grid{grid-template-columns:1fr}.starter-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:630px){.workbench{grid-template-columns:1fr}.intro{padding:30px 0 20px}.top-inner nav{display:none}.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.panel-heading,.panel-footer{grid-column:1/-1}.field{padding-block:9px}.stage{padding:8px}.field-note{min-height:0}.tabs button{padding-inline:6px}}
.reference-heading{margin-top:23px}.reference-mix{display:grid;gap:5px}.reference-mix a{font-size:.73rem;color:var(--accent);width:max-content;padding:4px 2px}
.panel-footer{display:flex;gap:6px;flex-wrap:wrap}.copy-help{font-size:.75rem;color:var(--muted);margin-top:7px}.top-inner nav{align-items:center}.top-inner nav button{font-size:.87rem;color:var(--muted)}
#library{width:min(740px,calc(100% - 24px));max-height:90vh;border:1px solid var(--line);padding:19px;border-radius:14px;color:var(--ink);box-shadow:0 16px 64px #19132642}#library::backdrop{background:#25202d9e}.library-heading{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-bottom:14px}.library-heading p{font-size:.85rem;color:var(--muted);margin-top:3px}#library label{font-size:.8rem;font-weight:700}#mix-search{display:block;margin:4px 0 8px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;width:100%;font:inherit}#match-count,.library-pagination span{font-size:.8rem;color:var(--muted)}.mix-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}.mix-list .starter{padding:8px}.library-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px}.library-pagination button:disabled{opacity:.45;cursor:default}

/* Mixer workspace */
:root{--ink:#1e2823;--muted:#535e56;--accent:#1e563d;--accent-ink:#fff;--line:#dddcd1;--wash:#f5f4ec;--panel:#fffefa}
body{background:#f6f5ee}
:focus-visible{outline-color:#28734f}
.topbar,.settings,.stage,.command-panel,.fit-panel,.starter,.quiet{background:var(--panel)}
.top-inner{min-height:62px}.top-inner nav button{color:var(--muted)}
.mark{background:var(--accent);border-radius:5px;transform:none}.mark i{background:#e2eee2}
.intro{align-items:center;padding:32px 0 19px}.intro h1{font:400 clamp(36px,5vw,67px)/.98 "Instrument Serif",Georgia,serif;letter-spacing:-.047em}
.workbench{grid-template-columns:minmax(0,1fr) minmax(245px,286px);grid-template-areas:"preview settings";gap:16px}
.settings{grid-area:settings;padding:15px}.results{grid-area:preview}
.stage{padding:12px}.stage-top{margin:0 0 10px}.stage-top button{min-height:32px}
.browser-frame{border-color:#dedcd1;border-radius:8px}.viewport{background:#ebeadf}
.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;margin-top:8px}
#browser-label{font-size:.79rem;font-weight:700}.effects-bar{margin:0;gap:6px}.effects-bar label{margin:0}
.field{padding:10px 0}.field-note{line-height:1.42}.field-note:empty{display:none}
.quiet{border-color:var(--line);color:var(--ink)}.quiet:hover{background:#eeeede}.primary:hover{background:#163e2d}
.tag{background:#e5eee3;color:#1e563d}.command-panel code{background:#212b26;color:#e8f0e5}
.export-actions{display:flex;flex-wrap:wrap;gap:6px}.export-actions [aria-pressed=true]{background:#e5eee3;border-color:#91ac95}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pick-trigger{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:38px;background:#f9f8f0;border:1px solid var(--line);border-radius:7px;padding:6px 8px;text-align:left;font-size:.83rem}
.pick-trigger::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 3px 3px 0;flex:none}
.pick-trigger:hover{background:#eeefe4}.extra-row .pick-trigger{min-width:0}
#picker,#saved{width:min(600px,calc(100% - 24px));max-height:86dvh;border:1px solid var(--line);padding:17px;border-radius:12px;background:var(--panel);color:var(--ink)}
#picker::backdrop,#saved::backdrop,#library::backdrop{background:#181e1bb3}
#picker-search{width:100%;font:inherit;padding:9px;border:1px solid var(--line);border-radius:6px;margin:0 0 10px;background:var(--wash)}
.picker-list{max-height:min(56dvh,450px);overflow:auto;display:grid;gap:4px;padding:4px}
.pick-option{background:#fffefa;border:1px solid var(--line);border-radius:7px;text-align:left;padding:9px 10px;display:grid;gap:2px}
.pick-option:hover,.pick-option[aria-pressed=true]{background:#e5eee3;border-color:#91ac95}.pick-option strong{font-size:.89rem}.pick-option small{color:var(--muted);font-size:.78rem}
.option-swatches{display:flex;height:7px;border-radius:3px;overflow:hidden;margin-top:3px}.option-swatches i{flex:1}
#saved-list{display:grid;gap:8px}.saved-row{padding:10px;border:1px solid var(--line);border-radius:8px}.saved-row small{color:var(--muted)}.saved-row .export-actions{margin-top:8px}.saved-row .option-swatches{margin-top:6px}
.toast{z-index:10}.dialog-status{color:var(--accent);font-size:.8rem;min-height:1.2em;padding-top:5px}
@media(max-width:850px){.workbench{grid-template-columns:minmax(0,1fr) minmax(210px,245px)}.preview-footer{flex-wrap:wrap}}
@media(max-width:670px){.workbench{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview" "settings"}.results{display:contents}.stage{grid-area:preview}.settings{grid-area:settings}.result-grid{grid-column:1;grid-row:3}.top-inner nav{display:none}.intro{padding:22px 0 15px}.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.panel-heading,.panel-footer{grid-column:1/-1}}
.workbench{scroll-margin-top:10px}.settings{position:sticky;top:10px}
@media(max-height:780px){.settings{position:static}}
@media(max-width:670px){.settings{position:static}.top-inner{gap:10px}.share{min-height:40px}.pick-trigger,.export-actions button{min-height:43px}}