@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;700&display=swap";:root{color:#e9e7e5;font-synthesis:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--line:#ffffff13;--muted:#85848b;--accent:#dfc6ff;background:#0e0e10;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent)}a{color:inherit;text-decoration:none}button{background:0 0;border:0}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:78px;padding:0 3vw;display:flex}.studio-brand{letter-spacing:-.9px;align-items:center;gap:9px;font-size:20px;font-weight:650;display:flex}.studio-brand img{display:block}.header-label,.credit{letter-spacing:1.5px;color:#8a878e;font-size:10px}.credit{letter-spacing:0}main{grid-template-columns:minmax(0,1fr) 330px;max-width:1920px;margin:auto;display:grid}.workspace{align-self:start;min-width:0;padding:42px 3vw 24px;position:sticky;top:0}.intro{justify-content:space-between;align-items:end;gap:15px;margin-bottom:30px;display:flex}.eyebrow{letter-spacing:1.8px;color:var(--muted);margin:0 0 11px;font-size:9px;line-height:1.6}h1{letter-spacing:-2.5px;margin:0;font-family:Manrope,sans-serif;font-size:clamp(34px,3.5vw,64px);font-weight:500;line-height:1.13}h1 em{color:#dfc6ff;font-family:Georgia,serif;font-weight:400}.intro-copy{color:#89868e;margin:0 0 4px;font-size:12px;line-height:1.6}.stage{background:#000;border:1px solid #ffffff12;height:min(66vw,100vh - 300px);min-height:400px;position:relative;overflow:hidden}canvas{touch-action:pan-y;cursor:grab;width:100%;height:100%;display:block}canvas:active{cursor:grabbing}.stage-top,.stage-bottom{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;left:24px;right:24px}.stage-top{top:22px}.stage-bottom{bottom:19px}.stage-top span,.stage-bottom>span{letter-spacing:1.5px;color:#a4a0aa;font-size:8px}.live{align-items:center;gap:7px;display:flex}.live i{background:#ddc6fa;border-radius:50%;width:4px;height:4px;box-shadow:0 0 8px #ddc6fa66}.stage-bottom>div{pointer-events:auto;gap:8px;display:flex}.stage-bottom button{color:#bab6c0;background:#ffffff0d;border:1px solid #ffffff20;border-radius:50%;width:31px;height:31px;font-size:14px}.stage-bottom button:hover{color:#fff;background:#ffffff28}.caption{align-items:center;gap:13px;padding:21px 0;display:flex}.caption-index{color:#bba5cf;font-size:20px}.caption p{color:#8c8793;flex:1;margin:0;font-size:11px;line-height:1.6}.caption button{white-space:nowrap;border-bottom:1px solid #ffffff35;padding:9px 0;font-size:10px}.caption button span{color:#d3bdf2;margin-left:20px}aside{border-left:1px solid var(--line);background:#141416;padding:33px 24px}.panel-heading{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.panel-heading .eyebrow{margin-bottom:8px;font-size:8px}h2{letter-spacing:-.8px;margin:0;font-family:Manrope,sans-serif;font-size:23px;font-weight:500}h2 span{color:var(--accent)}#reset{color:#8d8894;padding:6px;font-size:10px}.control-section{border-top:1px solid var(--line);margin-top:22px;padding-top:21px}h3{align-items:center;gap:12px;margin:0 0 17px;font-size:10px;font-weight:500;display:flex}h3>span{color:#6d6775;font-size:8px}h3 small{color:#9f8cb3;text-transform:capitalize;margin-left:auto;font-size:9px;font-weight:400}.mode-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.mode{text-align:left;background:#1a191d;border:1px solid #ffffff12;border-radius:7px;flex-direction:column;gap:8px;padding:11px 12px;transition:background .2s,border-color .2s;display:flex}.mode-icon{color:#77707f;font:23px/25px Georgia,serif}.mode>span:last-child{color:#aba6b2;font-size:10px}.mode:hover{border-color:#ffffff40}.mode[aria-pressed=true]{background:#c2a4e515;border-color:#c2a4e581}.mode[aria-pressed=true] .mode-icon,.mode[aria-pressed=true]>span:last-child{color:#e5d0ff}.palette-list{gap:9px;display:flex}.swatch{background:var(--swatch);border:3px solid #141416;border-radius:50%;flex:1;height:29px;box-shadow:0 0 0 1px #ffffff14}.swatch[aria-pressed=true]{box-shadow:0 0 0 1px #e6d9f8}.swatch:hover{transform:translateY(-2px)}.parameter{color:#aaa4b2;grid-template-columns:1fr auto;gap:9px;margin-top:16px;font-size:10px;display:grid}.parameter output{font-variant-numeric:tabular-nums;color:#c6bfce;font-size:9px}.parameter input{accent-color:#d9c4f1;cursor:pointer;grid-column:1/-1;width:100%;min-width:0;height:14px;margin:0}.parameter input:disabled{opacity:.3;cursor:default}.control-note{color:#817686;margin:6px 0 0;font-size:8px;line-height:1.5}details{border-top:1px solid var(--line);margin-top:22px;padding-top:17px}summary{color:#a39aa9;cursor:pointer;justify-content:space-between;font-size:10px;list-style:none;display:flex}summary::-webkit-details-marker{display:none}.panel-actions{gap:12px;margin-top:24px;display:grid}.remix{color:#251f2d;background:#dbc4f7;border:1px solid #d3bfee;border-radius:4px;justify-content:center;gap:12px;padding:12px;font-size:18px;display:flex}.remix span{align-self:center;font-size:11px;font-weight:600}.remix:hover{background:#e9d5ff}#share{color:#aaa0b7;padding:8px;font-size:9px}.panel-foot{color:#716977;margin-top:22px;font-size:9px;line-height:1.9}kbd{background:#25222a;border:1px solid #ffffff12;border-radius:3px;padding:1px 4px;font:8px inherit}footer{border-top:1px solid var(--line);color:#77717d;letter-spacing:1px;justify-content:space-between;padding:21px 3vw;font-size:8px;display:flex}#loading{color:#ddd0e6;text-align:center;background:#08080b;flex-direction:column;justify-content:center;align-items:center;gap:15px;padding:30px;font-size:12px;display:flex;position:absolute;inset:0}#loading button{border:1px solid #ffffff40;padding:12px 20px}#notice{z-index:10;color:#251f2d;background:#e6d8f7;border:1px solid #fff4;border-radius:6px;max-width:90vw;padding:14px 24px;font-size:12px;position:fixed;bottom:25px;left:50%;transform:translate(-50%);box-shadow:0 8px 35px #0008}[hidden]{display:none!important}.stage:fullscreen{border:0;width:100vw;height:100vh}.focus-mode header,.focus-mode aside,.focus-mode .intro,.focus-mode .caption,.focus-mode footer{display:none}.focus-mode main{display:block}.focus-mode .workspace{padding:0}.focus-mode .stage{border:0;height:100dvh}.preview{background:#000}.preview header,.preview aside,.preview .intro,.preview .caption,.preview footer,.preview .stage-top,.preview .stage-bottom{display:none}.preview main{display:block}.preview .workspace{padding:0}.preview .stage{border:0;height:100vh;min-height:0}.preview canvas{touch-action:none}@media (width>=1500px){main{grid-template-columns:minmax(0,1fr) 370px}aside{padding:40px 32px}.stage{height:calc(100vh - 290px)}.mode{padding:15px}.parameter{margin-top:21px}.swatch{height:36px}}@media (width<=1000px){.intro-copy{display:none}.workspace{padding:30px 24px 20px}main{grid-template-columns:minmax(0,1fr) 295px}aside{padding:28px 18px}.stage{height:calc(100vh - 275px);min-height:370px}h1{font-size:39px}.caption{align-items:start}.caption p{max-width:225px}.stage-top,.stage-bottom{left:17px;right:17px}.stage-top{top:17px}}@media (width<=740px){header{height:65px;padding:0 20px}.header-label{display:none}main{display:block}.workspace{padding:27px 20px 0;position:relative;top:auto}.intro{margin-bottom:22px}h1{font-size:44px}.eyebrow{font-size:8px}.stage{aspect-ratio:1;height:auto;min-height:0}.caption{padding:17px 0 24px}.caption button span{margin-left:8px}aside{border-left:0;border-top:1px solid var(--line);padding:28px 20px}.panel-heading{margin-bottom:23px}.mode-grid{grid-template-columns:repeat(3,1fr)}.mode{min-height:86px}.palette-list{max-width:380px}.swatch{flex:none;width:39px;height:39px}.tuning{grid-template-columns:1fr 1fr;column-gap:24px;display:grid}.tuning h3,.tuning details,.control-note{grid-column:1/-1}.tuning h3{margin-bottom:0}.parameter{font-size:12px}.parameter input{height:24px}.parameter output{font-size:11px}footer{padding:20px;font-size:7px}.panel-foot{margin-bottom:0}.preview .stage,.focus-mode .stage{aspect-ratio:auto}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}