:root{--bg:#e8e6e0;--dots:#14141417;--surface:#fbfaf7;--surface-2:#f1efe9;--text:#75716a;--text-h:#151413;--hairline:#14120f1a;--accent:#ff4d2e;--on-accent:#fff;--shadow-poster:0 1px 2px #0000000f, 0 30px 60px -28px #1e140a73;--shadow-pop:0 12px 32px -8px #00000038, 0 2px 6px #0000000f;--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;font:14px/1.45 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--bg:#111112;--dots:#ffffff12;--surface:#1a1a1c;--surface-2:#232326;--text:#8f8c86;--text-h:#f3f1ec;--hairline:#ffffff17;--shadow-poster:0 1px 2px #0006, 0 30px 60px -24px #000c;--shadow-pop:0 12px 32px -8px #000000b3, 0 2px 6px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);margin:0}button,input,textarea{font:inherit;color:inherit}button{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#root{flex-direction:column;height:100svh;display:flex}.app-shell{flex-direction:column;height:100%;min-height:0;display:flex}.topbar{border-bottom:1px solid var(--hairline);background:var(--surface);flex:none;justify-content:space-between;align-items:center;gap:12px;height:56px;padding:0 16px 0 22px;display:flex}.brand{color:var(--text-h);align-items:center;gap:10px;display:flex}.brand-name{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}.topbar-actions{align-items:center;gap:6px;display:flex}.btn{border:1px solid var(--hairline);height:34px;color:var(--text-h);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:7px;padding:0 13px;font-size:13px;font-weight:550;transition:background .15s,transform .15s cubic-bezier(.34,1.56,.64,1);display:inline-flex}.btn:hover{background:var(--surface-2)}.btn:active{transform:scale(.96)}.btn--primary{background:var(--text-h);border-color:var(--text-h);color:var(--surface)}.btn--primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn--primary:hover svg{animation:.5s cubic-bezier(.34,1.56,.64,1) dice-roll}@keyframes dice-roll{0%{transform:rotate(-90deg)scale(.8)}to{transform:rotate(0)scale(1)}}.menu-anchor{position:relative}.menu{z-index:20;background:var(--surface);border:1px solid var(--hairline);min-width:170px;box-shadow:var(--shadow-pop);border-radius:12px;flex-direction:column;padding:5px;display:flex;position:absolute;top:calc(100% + 6px);right:0}.menu button{color:var(--text-h);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:baseline;padding:9px 10px;font-weight:600;display:flex}.menu button span{font:500 11px/1 var(--mono);color:var(--text)}.menu button:hover{background:var(--surface-2)}.workspace{flex:auto;min-height:0;display:flex}.stage{background-color:var(--bg);background-image:radial-gradient(var(--dots) 1.2px, transparent 1.4px);background-size:18px 18px;flex-direction:column;flex:auto;min-width:0;display:flex}.stage-area{flex:auto;min-height:0;margin:32px 32px 20px;position:relative}@media (width<=860px){#root{height:auto;min-height:100svh}.workspace{flex-direction:column}.stage{flex:none;height:62svh}.stage-area{margin:16px 16px 12px}.topbar{padding:0 12px 0 16px}.brand-name,.btn--ghost span{display:none}.btn--ghost{justify-content:center;width:34px;padding:0}}.px{transform-box:fill-box;transform-origin:50%;animation-delay:var(--d,0s)}.anim-entrance .px{animation-name:px-entrance;animation-duration:.5s;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-fill-mode:both}@keyframes px-entrance{0%{transform:scale(0)}to{transform:scale(1)}}.anim-wave .px{animation-name:px-wave;animation-duration:1.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-fill-mode:backwards}@keyframes px-wave{0%,to{transform:scale(.78)}50%{transform:scale(1.12)}}.anim-pulse .px{animation-name:px-pulse;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-fill-mode:backwards}@keyframes px-pulse{0%,to{transform:scale(.72)}50%{transform:scale(1.15)}}.anim-jitter .px{animation-name:px-jitter;animation-duration:.5s;animation-timing-function:ease;animation-fill-mode:both}@keyframes px-jitter{0%{transform:scale(.2)}60%{transform:scale(1.25)}to{transform:scale(1)}}.anim-twinkle .px{animation-name:px-twinkle;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-fill-mode:backwards}@keyframes px-twinkle{0%,to{opacity:1;transform:scale(1)rotate(0)}45%{opacity:.35;transform:scale(.35)rotate(45deg)}}.anim-spin .px{animation-name:px-spin;animation-duration:3.2s;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;animation-fill-mode:backwards}@keyframes px-spin{0%,30%{transform:rotate(0)scale(1)}60%{transform:rotate(180deg)scale(.7)}90%,to{transform:rotate(360deg)scale(1)}}@media (prefers-reduced-motion:reduce){.px{animation:none!important}}.panel{background:var(--surface);border-left:1px solid var(--hairline);min-height:0;color:var(--text-h);flex-direction:column;flex:0 0 348px;display:flex}.text-block{flex-direction:column;gap:10px;padding:16px 18px 14px;display:flex}.field{flex-direction:column;gap:6px;display:flex}.field-label,.section-title{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin:0}.text-input,.caption-input,.emoji-input{border:1px solid var(--hairline);background:var(--surface-2);width:100%;color:var(--text-h);border-radius:10px;outline:none;transition:border-color .15s,background .15s}.text-input{resize:none;font:700 17px/1.25 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:10px 12px}.caption-input{height:34px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0 12px}.text-input:focus,.caption-input:focus,.emoji-input:focus{border-color:var(--text-h);background:var(--surface)}.text-input::placeholder,.caption-input::placeholder{color:var(--text);opacity:.6;text-transform:none;letter-spacing:0;font-weight:500}.tabs{border-bottom:1px solid var(--hairline);gap:2px;padding:0 14px;display:flex}.tabs button{color:var(--text);cursor:pointer;background:0 0;border:0;flex:1;padding:11px 0 12px;font-size:13px;font-weight:600;position:relative}.tabs button:hover,.tabs button.is-on{color:var(--text-h)}.tabs button.is-on:after{content:"";background:var(--accent);border-radius:3px 3px 0 0;width:22px;height:3px;margin-left:-11px;position:absolute;bottom:-1px;left:50%}.panel-scroll{scrollbar-width:thin;flex:auto;min-height:0;padding:4px 0 28px;overflow-y:auto}.section{border-bottom:1px solid var(--hairline);padding:16px 18px}.section:last-child{border-bottom:0}.section-head{justify-content:space-between;align-items:center;gap:8px;min-height:22px;margin-bottom:12px;display:flex}.section-body{flex-direction:column;gap:12px;display:flex}.section-body:empty{display:none}.section-head:has(+.section-body:empty){margin-bottom:0}.hint{color:var(--text);margin:0;font-size:12px;line-height:1.4}.section-head .hint{font:500 10px/1 var(--mono);letter-spacing:.02em;opacity:.8}.row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.slider{cursor:pointer;grid-template-columns:1fr auto;row-gap:7px;font-size:13px;display:grid}.slider-label{font-weight:550}.slider-value{font:500 11.5px/1.6 var(--mono);color:var(--text)}.slider input{appearance:none;cursor:pointer;background:0 0;grid-column:1/-1;width:100%;height:18px;margin:0}.slider input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--text-h) var(--pct), var(--hairline) var(--pct));border-radius:4px;height:4px}.slider input::-moz-range-track{background:linear-gradient(to right, var(--text-h) var(--pct), var(--hairline) var(--pct));border-radius:4px;height:4px}.slider input::-webkit-slider-thumb{appearance:none;background:var(--surface);border:2px solid var(--text-h);border-radius:50%;width:16px;height:16px;margin-top:-6px;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}.slider input::-moz-range-thumb{background:var(--surface);border:2px solid var(--text-h);border-radius:50%;width:12px;height:12px}.slider input:active::-webkit-slider-thumb{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}.slider.is-disabled{opacity:.4;cursor:not-allowed}.segmented{background:var(--surface-2);border-radius:10px;gap:2px;padding:3px;display:flex}.segmented button{height:28px;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:7px;flex:1;padding:0 10px;font-size:12.5px;font-weight:600;transition:background .15s,color .15s}.segmented button:hover{color:var(--text-h)}.segmented button.is-on{background:var(--surface);color:var(--text-h);box-shadow:0 1px 2px #0000001f, 0 0 0 1px var(--hairline)}.segmented--sm{border-radius:8px;padding:2px}.segmented--sm button{border-radius:6px;height:22px;padding:0 9px;font-size:11.5px}.toggle{background:var(--hairline);cursor:pointer;border:0;border-radius:999px;width:34px;height:20px;padding:0;transition:background .18s;position:relative}.toggle-knob{background:var(--surface);border-radius:50%;width:16px;height:16px;transition:transform .22s cubic-bezier(.34,1.56,.64,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000040}.toggle.is-on{background:var(--accent)}.toggle.is-on .toggle-knob{transform:translate(14px)}.tile-grid{gap:6px;display:grid}.tile-grid--shapes{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}.panel .tile-grid--shapes .tile{aspect-ratio:auto;height:42px;max-height:46px}.row .tile-grid--shapes{grid-template-columns:repeat(4,38px)}.tile-grid--styles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.tile-grid--motion{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.tile{aspect-ratio:1;border:1px solid var(--hairline);background:var(--surface);color:var(--text-h);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;transition:border-color .12s,background .12s,transform .15s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative}.tile:hover{background:var(--surface-2)}.tile:active{transform:scale(.94)}.tile--labelled{aspect-ratio:auto;padding:10px 4px 8px;font-size:11.5px;font-weight:600}.tile.is-on{border-color:var(--text-h);box-shadow:inset 0 0 0 1px var(--text-h)}.tile-grid--shapes .tile.is-on:not(.is-multi),.tile-grid--motion .tile.is-on{background:var(--text-h);color:var(--surface)}.style-swatch{box-shadow:inset 0 0 0 1px var(--hairline);border-radius:9px}.tile.is-multi.is-on:after{content:"";background:var(--accent);border-radius:50%;width:6px;height:6px;position:absolute;top:4px;right:4px}.emoji-row{flex-wrap:wrap;gap:4px;display:flex}.emoji-input{width:64px;height:30px;padding:0 8px;font-size:16px}.emoji-chip{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;width:30px;height:30px;padding:0;font-size:16px}.emoji-chip:hover{background:var(--surface-2)}.emoji-chip.is-on{border-color:var(--text-h)}.palette-list{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.palette-card{aspect-ratio:1.15;box-shadow:inset 0 0 0 1px var(--hairline);cursor:pointer;border:0;border-radius:10px;flex-wrap:wrap;place-content:center;gap:3px;padding:6px;transition:transform .18s cubic-bezier(.34,1.56,.64,1);display:flex}.palette-card:hover{transform:translateY(-2px)rotate(-2deg)}.palette-card span{border-radius:50%;width:9px;height:9px}.ink-row{flex-wrap:wrap;gap:6px;display:flex}.ink-chip{width:34px;height:34px;box-shadow:inset 0 0 0 1px var(--hairline);cursor:pointer;border-radius:50%;transition:transform .15s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.ink-chip:hover{transform:scale(1.08)}.ink-chip input,.color-slot-swatch input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.ink-chip--add{border:1.5px dashed var(--hairline);box-shadow:none;color:var(--text);background:0 0;justify-content:center;align-items:center;display:flex}.chip-group{flex-wrap:wrap;gap:5px;display:flex}.chip{border:1px solid var(--hairline);height:28px;color:var(--text-h);cursor:pointer;background:0 0;border-radius:999px;padding:0 11px;font-size:12px;font-weight:600;transition:background .12s,color .12s}.chip:hover:not(:disabled){background:var(--surface-2)}.chip.is-on{background:var(--text-h);border-color:var(--text-h);color:var(--surface)}.chip:disabled{opacity:.35;cursor:not-allowed}.slot-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.color-slot{border:1px solid var(--hairline);cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:6px;transition:background .12s;display:flex}.color-slot:hover{background:var(--surface-2)}.color-slot-swatch{width:28px;height:28px;box-shadow:inset 0 0 0 1px var(--hairline);border-radius:7px;flex:none;position:relative;overflow:hidden}.color-slot-text{flex-direction:column;gap:3px;min-width:0;display:flex}.color-slot-label{font-size:12.5px;font-weight:600}.color-slot-hex{font:500 10.5px/1 var(--mono);color:var(--text)}.ramp-list{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.ramp{border:1px solid var(--hairline);cursor:pointer;text-align:left;background:0 0;border-radius:10px;flex-direction:column;gap:6px;padding:6px 6px 7px;display:flex}.ramp.is-on{border-color:var(--text-h);box-shadow:inset 0 0 0 1px var(--text-h)}.ramp-bar{border-radius:5px;height:18px}.ramp-name{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-h)}@media (width<=860px){.panel{border-left:0;border-top:1px solid var(--hairline);flex:none}.tabs{z-index:2;background:var(--surface);position:sticky;top:0}.panel-scroll{overflow:visible}.text-block,.panel-scroll{width:100%;max-width:640px;margin:0 auto}.palette-list{grid-template-columns:repeat(5,1fr)}}.preset-strip{scrollbar-width:none;gap:10px;padding:4px 24px 18px;display:flex;overflow-x:auto}.preset-strip::-webkit-scrollbar{display:none}.preset-card{cursor:pointer;color:var(--text);font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;background:0 0;border:0;flex-direction:column;flex:none;gap:6px;padding:0;display:flex}.preset-thumb-wrap{width:116px;height:64px;box-shadow:inset 0 0 0 1px var(--hairline);border-radius:10px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;display:block;overflow:hidden}.preset-card:hover .preset-thumb-wrap,.preset-card:focus-visible .preset-thumb-wrap{box-shadow:inset 0 0 0 1px var(--hairline), 0 8px 18px -6px #00000059;transform:translateY(-3px)rotate(-1.5deg)}.preset-card:hover .preset-name{color:var(--text-h)}.preset-thumb{display:block}.stage-box{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.stage-poster{line-height:0;position:relative}.poster-svg{box-shadow:var(--shadow-poster);border-radius:14px;transition:box-shadow .2s;display:block}.stage-empty{font:500 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);opacity:.7;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}