@font-face{font-family:Inter;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2")}@font-face{font-family:Geist;font-weight:400 700;font-display:swap;src:url(../fonts/geist-latin.woff2) format("woff2")}:root{--bg: #f2f3f6;--card: #ffffff;--text: #14161f;--dim: #4e5464;--faint: #868da0;--line: rgba(18, 24, 48, .13);--line-soft: rgba(18, 24, 48, .075);--brand: #3564f2;--track: #dfe2ea;--nav: rgba(255, 255, 255, .72);--radius: 20px;--wrap: 1120px;color-scheme:light}:root[data-theme=dark]{--bg: #0c0d12;--card: #14161e;--text: #f2f3f8;--dim: #a4a9ba;--faint: #707588;--line: rgba(255, 255, 255, .11);--line-soft: rgba(255, 255, 255, .065);--brand: #6f95ff;--track: #2a2d3a;--nav: rgba(12, 13, 18, .7);color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,system-ui,-apple-system,sans-serif;min-height:100vh;display:flex;flex-direction:column}main{flex:1}a{color:var(--brand);text-decoration:none}.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}.num{font-variant-numeric:tabular-nums}.muted{color:var(--dim);font-size:13px}nav.top{position:sticky;top:0;z-index:10;height:64px;background:var(--nav);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid var(--line-soft)}nav.top .wrap{position:relative;height:100%;display:flex;align-items:center;gap:28px}.logo{display:inline-flex;align-items:baseline;gap:.32em;font-size:18px;white-space:nowrap}.logo .mark{height:.85em;width:auto;overflow:visible;transform:translateY(.07em) scaleX(1.2)}.logo .mark path{fill:none;stroke:var(--dim);stroke-width:31.5;stroke-linejoin:round}.brand-word{font-family:Geist,Inter,sans-serif;font-weight:600;color:var(--text)}.nav-context{position:absolute;left:50%;transform:translate(-50%);font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--dim);white-space:nowrap}nav.top .links{display:flex;gap:26px;margin-left:auto;align-items:center;font-size:14.5px;color:var(--dim)}nav.top .links a{color:var(--dim)}nav.top .links a:hover{color:var(--text)}button.theme-toggle{width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--dim);transition:color .2s,border-color .2s,transform .2s}button.theme-toggle:hover{color:var(--text);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));transform:translateY(-1px)}button.theme-toggle svg{display:block}button.theme-toggle .sun,[data-theme=dark] button.theme-toggle .moon{display:none}[data-theme=dark] button.theme-toggle .sun{display:block}.step-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.step-head .step{margin:0}.file{display:flex;align-items:center;gap:8px;min-width:0}.file .chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}button{font:inherit;color:inherit;cursor:pointer}button.link{background:none;border:0;padding:0;color:var(--brand);font-size:13px}button.primary{background:var(--text);color:var(--bg);border:0;border-radius:999px;padding:9px 18px;font-weight:500}.chip{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--dim)}input[type=range]{width:100%;accent-color:var(--brand)}input[type=color]{width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}select,textarea,input[type=number]{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 9px;width:100%}.step{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--brand);margin:0 0 6px}.hero{text-align:center;padding-top:56px;padding-bottom:40px}.hero h1{font-size:clamp(34px,6vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:700;margin:0}.hero .lead{color:var(--dim);font-size:17px;margin:14px 0 30px}.drop{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:560px;margin:0 auto;padding:34px 24px 28px;background:var(--card);border:1.5px dashed color-mix(in srgb,var(--brand) 40%,var(--line));border-radius:24px;cursor:pointer;transition:border-color .2s,transform .2s}.drop:hover,.drop.over{border-color:var(--brand);transform:translateY(-1px)}.drop input{display:none}.drop strong{font-size:17px;font-weight:600;margin-top:6px}.drop u{color:var(--brand);text-decoration:none}.drop-icon{width:30px;height:30px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:16px}.paste{max-width:560px;margin:14px auto 0;text-align:left}.paste summary{cursor:pointer;color:var(--brand);font-size:14px;text-align:center;list-style:none}.paste summary::-webkit-details-marker{display:none}.paste textarea{margin-top:10px;font:13px/1.4 ui-monospace,Menlo,monospace;resize:vertical}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}.status{min-height:1.5em;font-size:14px;color:var(--dim);margin:14px 0 0}.status.error{color:#d1453b}.example{color:var(--dim);font-size:14px;margin:4px 0 0}.example .link{font-size:14px}#step-play{padding-top:24px;padding-bottom:40px;max-width:840px}.variants{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px}.variant{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px}.variant.on{border:2px solid var(--brand);padding:7px 13px 7px 7px}.variant svg{width:38px;height:50px;border-radius:8px;flex:none}.variant b{display:block;font-size:14px;font-weight:600}.variant span{display:block;font-size:12px;color:var(--dim)}.studio{display:grid;grid-template-columns:auto minmax(280px,1fr);gap:28px;align-items:start}.stage{display:flex;flex-direction:column;gap:12px;align-items:center;width:min-content;max-width:100%}.stage>:not(.frame){align-self:stretch}.frame{background:#0b0b0d;border-radius:34px;padding:10px;box-shadow:0 24px 60px -24px #10184073;width:fit-content}canvas{display:block;height:clamp(420px,calc(100vh - 250px),760px);max-width:calc(100vw - 68px);object-fit:contain;border-radius:25px}.transport{display:flex;align-items:center;gap:12px}.transport input{flex:1}.round{width:40px;height:40px;border-radius:50%;border:0;background:var(--text);color:var(--bg);display:grid;place-items:center;flex:none}.round svg{width:18px;height:18px;fill:currentColor}.round .i-pause,.round.playing .i-play{display:none}.round.playing .i-pause{display:inline}.round:disabled{opacity:.4;cursor:default}#time{font-size:13px;color:var(--dim);min-width:3.2em;text-align:right}.add-song{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--brand);cursor:pointer}.add-song input{display:none}.add-song svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.export{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px}a.primary{display:inline-block;background:var(--text);color:var(--bg);border-radius:999px;padding:9px 18px;font-weight:500;font-size:15px}button.ghost.small{padding:5px 12px;font-size:13px}button.ghost{background:none;border:1px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--text)}button.primary:disabled{opacity:.5;cursor:default}.stats{font-size:11px;color:var(--faint);margin:0;text-align:center;line-height:1.5}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px 18px 18px}.group,.slider,.field{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:13px;color:var(--dim)}.label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--dim)}.slider{flex-direction:row;flex-wrap:wrap;justify-content:space-between}.slider input{flex-basis:100%;margin:2px 0 0}.slider .num{color:var(--text)}.seg{display:flex;flex-wrap:wrap;gap:4px}.seg button{font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--dim)}.seg button.on{background:var(--text);border-color:var(--text);color:var(--bg)}.check{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px;color:var(--dim);cursor:pointer}.check input{accent-color:var(--brand)}.swatches{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.swatches .divider{width:1px;height:20px;background:var(--line);margin:0 4px}#palette input{width:24px;height:24px;border-radius:50%}#palette input::-webkit-color-swatch{border-radius:50%}.bg-swatch{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);padding:0}.bg-swatch.on,.own-colour.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--brand)}.own-colour{position:relative;width:28px;height:28px;border-radius:50%;cursor:pointer;background:conic-gradient(#ff4b4b,#ffc94d,#5ad17a,#4bb8ff,#8a6bff,#ff5ec4,#ff4b4b)}.own-colour input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.photo{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 8px;cursor:pointer}.photo.on{border-color:var(--brand);color:var(--text)}.photo input{display:none}.photo svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}.swatches.labelled{margin-top:14px;gap:16px}.swatches.labelled label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim)}.more{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:10px}.more summary{cursor:pointer;font-size:13px;color:var(--brand)}.pair{display:flex;gap:8px}.seed{margin:12px 0 0;font-size:11px;color:var(--faint)}dialog.glass{width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:22px 20px 18px;border-radius:26px;color:var(--text);background:#ffffff9e;-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 80px -24px #10184080,inset 0 1px #fff9}:root[data-theme=dark] dialog.glass{background:#181a249e;border-color:#ffffff1f;box-shadow:0 30px 80px -24px #000c,inset 0 1px #ffffff0f}dialog.glass::backdrop{background:#0c0e1652;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}dialog.glass[open]{animation:glass-in .32s cubic-bezier(.22,1,.36,1)}@keyframes glass-in{0%{opacity:0;transform:translateY(10px) scale(.97)}}dialog.glass h2{margin:0;font-size:18px;font-weight:650;letter-spacing:-.01em}.ex-sub{margin:3px 0 14px;font-size:12.5px;color:var(--dim)}.ex-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:0;display:grid;place-items:center;background:#7f7f8c24;color:var(--dim)}.ex-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none}.ex-thumb{position:relative;width:fit-content;margin:0 auto;padding:5px;border-radius:22px;background:#0b0b0d;box-shadow:0 18px 40px -18px #1018408c}.ex-thumb canvas,.ex-thumb video{display:block;width:180px;height:auto;border-radius:17px}.ex-ring{position:absolute;inset:0;margin:auto;width:84px;height:84px}.ex-ring .ring-bg{fill:#ffffffd1;stroke:color-mix(in srgb,var(--brand) 20%,transparent);stroke-width:7}.ex-ring .ring-fg{fill:none;stroke:var(--brand);stroke-width:7;stroke-linecap:round;stroke-dasharray:251.3;stroke-dashoffset:251.3;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .25s}.ex-ring text{font:600 19px Inter,system-ui,sans-serif;fill:#14161f}.ex-state{margin-top:14px}.ex-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 2px;border-bottom:1px solid var(--line-soft)}.ex-row .dim{color:var(--dim)}.ex-row .chip{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent}.wide{display:block;width:100%;text-align:center;margin-top:10px}a.light,button.light{display:block;padding:9px 18px;border-radius:999px;font-weight:500;font-size:15px;color:var(--text);background:#ffffff8c;border:1px solid var(--line)}:root[data-theme=dark] a.light{background:#ffffff0f}.ex-note{margin:10px 0 0;font-size:12px;color:var(--dim);text-align:center}dialog .export-status{margin:8px 0 0;font-size:12.5px;text-align:center;color:#d1453b;min-height:0}dialog .export-status:empty{display:none}input.switch{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:12px;margin:0;position:relative;cursor:pointer;background:#7f7f8c59;transition:background .2s;flex:none}input.switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .2s}input.switch:checked{background:var(--brand)}input.switch:checked:after{transform:translate(16px)}footer{display:flex;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:22px;font-size:12px;color:var(--faint);border-top:1px solid var(--line-soft)}footer a{color:var(--dim)}@media(max-width:760px){.wrap{padding:0 16px}.hero{padding-top:36px}.studio{grid-template-columns:1fr;justify-items:center}.panel{width:100%}canvas{height:min(62vh,640px)}#step-play{max-width:none}.nav-context{display:none}nav.top .links a{display:none}nav.top .wrap{gap:16px}.file .chip{max-width:52vw}}