:root{--bg:oklch(16.5% .004 265);--surface:oklch(20.5% .004 265);--surface-2:oklch(24.5% .005 265);--surface-3:oklch(29% .006 265);--line:oklch(32.5% .006 265);--line-soft:oklch(26.5% .005 265);--ink:oklch(97% .002 265);--ink-muted:oklch(72% .004 265);--ink-faint:oklch(55% .005 265);--primary:oklch(64.5% .18 18);--primary-hi:oklch(71% .17 20);--primary-press:oklch(58% .17 16);--primary-soft:oklch(64.5% .18 18/.14);--primary-faint:oklch(64.5% .18 18/.08);--on-primary:oklch(99% 0 0);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--fs-xs:.6875rem;--fs-sm:.75rem;--fs-md:.8125rem;--fs-lg:.9375rem;--fs-xl:1.1875rem;--fs-logo:1.625rem;--radius:8px;--radius-sm:6px;--radius-lg:12px;--radius-pill:99px;--control-h:42px;--shadow-pop:0 6px 16px -10px oklch(0% 0 0/.55);--shadow-canvas:0 8px 28px -18px oklch(0% 0 0/.6);--ease:cubic-bezier(.22, 1, .36, 1);--t:.14s var(--ease);--t-slow:.22s var(--ease);--font-ui:"Inter", system-ui, -apple-system, sans-serif;--font-mono:var(--font-ui);--z-bar:10;--z-panel:20;--z-toast:50;--z-tooltip:60}.theme-light{--bg:oklch(97.5% .002 265);--surface:oklch(100% 0 0);--surface-2:oklch(97.5% .002 265);--surface-3:oklch(94.5% .003 265);--line:oklch(88% .004 265);--line-soft:oklch(92.5% .003 265);--ink:oklch(24% .006 265);--ink-muted:oklch(46% .006 265);--ink-faint:oklch(58% .006 265);--shadow-canvas:0 10px 30px -20px oklch(0% 0 0/.25)}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-ui);font-size:var(--fs-md);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}button{font-family:inherit}::selection{background:var(--primary-soft)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}.app{background:var(--bg);grid-template-columns:332px 1fr;gap:14px;height:100vh;padding:14px;display:grid}.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);flex-direction:column;min-height:0;display:flex;overflow:hidden}.panel__scroll{gap:var(--sp-5);padding:var(--sp-5);scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;flex-direction:column;display:flex;overflow-y:auto}.panel__scroll::-webkit-scrollbar{width:8px}.panel__scroll::-webkit-scrollbar-thumb{background:var(--surface-3);border:2px solid var(--surface);border-radius:8px}.rule{background:var(--line-soft);border:0;height:1px;margin:0}.brand{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-soft)}.brand__row{justify-content:space-between;align-items:center;display:flex}.brand__logo{color:var(--ink);margin:0;line-height:0}.brand__logo-svg{width:auto;height:20px;display:block}.brand__nav{align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);display:flex}.brand__nav a,.brand__nav-link{font-family:var(--font-ui);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--ink-muted);transition:color var(--t);font-weight:600;text-decoration:none}.brand__nav-link{cursor:pointer;background:0 0;border:0;padding:0}.brand__nav a:hover,.brand__nav-link:hover{color:var(--ink)}.icon-btn{border:1px solid var(--line);background:var(--surface-2);width:34px;height:34px;color:var(--ink-muted);cursor:pointer;transition:color var(--t), background var(--t), border-color var(--t), transform var(--t);border-radius:9px;place-items:center;display:inline-grid}.icon-btn:hover{color:var(--ink);background:var(--surface-3)}.icon-btn:active{transform:scale(.94)}.btn{justify-content:center;align-items:center;gap:var(--sp-2);height:var(--control-h);padding:0 var(--sp-4);border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:var(--fs-md);cursor:pointer;transition:background var(--t), border-color var(--t), transform var(--t), color var(--t);font-weight:600;display:inline-flex}.btn:hover:not(:disabled){background:var(--surface-3)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.42;cursor:not-allowed}.btn svg{opacity:.8}.btn--primary{background:var(--primary);color:var(--on-primary);border-color:#0000;font-weight:600}.btn--primary:hover:not(:disabled){background:var(--primary-hi)}.btn--primary:active:not(:disabled){background:var(--primary-press)}.btn--primary svg{opacity:1}.btn--ok{color:var(--primary);border-color:var(--primary);background:var(--primary-faint)}.btn-row{gap:var(--sp-3);grid-template-columns:1fr 1fr;display:grid}.group{gap:var(--sp-3);flex-direction:column;display:flex}.group--inline{justify-content:space-between;align-items:center;gap:var(--sp-3);flex-direction:row}.group__head{justify-content:space-between;align-items:center;gap:var(--sp-2);flex-wrap:wrap;display:flex}.group__title{align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-md);letter-spacing:.02em;color:var(--ink);margin:0;font-weight:600;display:flex}.group__title svg{color:var(--ink-faint)}.group__title--sm{font-family:var(--font-ui);font-size:var(--fs-md);letter-spacing:0;font-weight:600}.field{gap:var(--sp-3);flex-direction:column;display:flex}.field__head{justify-content:space-between;align-items:center;display:flex}.field__label{align-items:center;gap:var(--sp-2);font-family:var(--font-ui);font-size:var(--fs-md);color:var(--ink);font-weight:600;display:flex}.field__icon{color:var(--ink-faint);place-items:center;display:inline-grid}.field__value{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink);background:var(--surface-2);border:1px solid var(--line-soft);padding:2px var(--sp-2);text-align:center;font-variant-numeric:tabular-nums;border-radius:6px;min-width:46px}.badge{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);border-radius:5px;padding:2px 6px;font-size:.625rem}.note{margin:calc(var(--sp-2) * -1) 0 0;font-size:var(--fs-sm);color:var(--ink-muted);line-height:1.55}.slider{appearance:none;cursor:pointer;background:0 0;width:100%;height:24px}.slider::-webkit-slider-runnable-track{border-radius:var(--radius-pill);background:linear-gradient(90deg, var(--primary) var(--pct), var(--surface-3) var(--pct));height:4px}.slider::-moz-range-track{border-radius:var(--radius-pill);background:var(--surface-3);height:4px}.slider::-moz-range-progress{border-radius:var(--radius-pill);background:var(--primary);height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);width:16px;height:16px;box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--t);border-radius:50%;margin-top:-6px}.slider::-moz-range-thumb{background:var(--ink);width:16px;height:16px;box-shadow:0 0 0 1px var(--line);border:0;border-radius:50%}.slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--primary-soft)}.slider:active::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--primary-soft)}.toggle{border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface-2);cursor:pointer;width:44px;height:26px;transition:background var(--t), border-color var(--t);flex:none;position:relative}.toggle:hover{border-color:var(--line);background:var(--surface-3)}.toggle__knob{background:var(--ink-muted);width:20px;height:20px;transition:transform var(--t), background var(--t);border-radius:50%;position:absolute;top:2px;left:2px}.toggle.is-on{background:var(--primary);border-color:#0000}.toggle.is-on:hover{background:var(--primary-hi)}.toggle.is-on .toggle__knob{background:var(--on-primary);transform:translate(18px)}.shape-grid{gap:var(--sp-2);grid-template-columns:repeat(4,1fr);display:grid}.shape-btn{align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:var(--surface-2);color:var(--ink-muted);font-size:var(--fs-xs);cursor:pointer;transition:color var(--t), background var(--t), border-color var(--t), transform var(--t);flex-direction:column;font-weight:600;display:flex}.shape-btn:hover{color:var(--ink);border-color:var(--line);background:var(--surface-3)}.shape-btn:active{transform:scale(.96)}.shape-glyph{width:22px;height:22px}.shape-btn.is-active{color:var(--ink);background:var(--primary-soft);border-color:var(--primary)}.shape-btn.is-active .shape-glyph{color:var(--primary)}.radio-row{gap:var(--sp-3);display:flex}.radio{align-items:center;gap:var(--sp-1);cursor:pointer;display:inline-flex}.radio span{font-size:var(--fs-sm);color:var(--ink-muted);transition:color var(--t)}.radio input{accent-color:var(--primary)}.radio:hover span{color:var(--ink)}.radio:has(input:checked) span{color:var(--ink)}[data-disabled=true]{opacity:.4;pointer-events:none;filter:grayscale(.4)}.palette{grid-template-columns:repeat(8,1fr);gap:7px;display:grid}.swatch{aspect-ratio:1;border:1px solid color-mix(in oklch, var(--ink) 14%, transparent);cursor:pointer;transition:transform var(--t), box-shadow var(--t);border-radius:7px;padding:0}.swatch:hover{transform:scale(1.1)}.swatch.is-active{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--primary);transform:scale(1.06)}.swatch--custom{background:conic-gradient(red,#ffea00,#0f6,#00d9ff,#5b00ff,#ff00c8,red);position:relative;overflow:hidden}.swatch--custom input{cursor:pointer;opacity:0;border:0;width:140%;height:140%;padding:0;position:absolute;inset:-20%}.swatch--sm{aspect-ratio:1;border-radius:6px;width:28px}.bg-controls{align-items:center;gap:var(--sp-3);display:flex}.check{align-items:center;gap:var(--sp-2);cursor:pointer;display:inline-flex}.check span{font-size:var(--fs-sm);color:var(--ink-muted);transition:color var(--t)}.check:hover span{color:var(--ink)}.check input{accent-color:var(--primary)}.stage{border-radius:var(--radius-lg);border:1px solid var(--line-soft);background:var(--surface);min-width:0;display:grid;position:relative;overflow:hidden}.stage__bar{z-index:var(--z-bar);pointer-events:none;justify-content:space-between;display:flex;position:absolute;inset:14px 14px auto}.stage__bar .icon-btn{pointer-events:auto;background:var(--surface-2)}.stage__canvas{padding:60px var(--sp-6) var(--sp-6);place-items:center;min-height:0;display:grid;position:relative}.stage.is-dragging{border-color:var(--primary)}.stage.is-dragging .stage__canvas{background:var(--primary-soft)}.render{object-fit:contain;border:1px solid var(--line-soft);border-radius:4px;max-width:100%;max-height:100%}.is-checker .render{background-image:linear-gradient(45deg, var(--surface-3) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-3) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-3) 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-size:18px 18px}.stage__status{z-index:var(--z-bar);align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:6px 10px;display:flex;position:absolute;bottom:14px;left:14px}.stage__status b{color:var(--ink);font-weight:600}.stage__status .dot{background:var(--ink-faint);border-radius:50%;width:4px;height:4px}.empty{z-index:1;align-items:center;gap:var(--sp-2);text-align:center;flex-direction:column;padding:40px;display:flex;position:relative}.empty__mark{width:64px;height:64px;margin-bottom:var(--sp-2);border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);color:var(--ink-faint);place-items:center;display:grid}.empty__mark svg{width:30px;height:30px}.empty__title{font-size:var(--fs-xl);color:var(--ink);margin:0;font-weight:600}.empty__sub{margin:0 0 var(--sp-3);font-size:var(--fs-md);color:var(--ink-muted)}@media (width<=880px){.app{grid-template-rows:minmax(280px,42vh) auto;grid-template-columns:1fr;height:auto;min-height:100vh}.stage{order:-1;min-height:280px}.panel{max-height:none}}.modal{z-index:var(--z-toast);padding:var(--sp-5);-webkit-backdrop-filter:blur(10px)saturate(1.1);animation:modal-fade var(--t-slow);background:oklch(0% 0 0/.5);place-items:center;display:grid;position:fixed;inset:0}.modal__card{width:min(420px,100%);padding:var(--sp-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);animation:modal-pop var(--t-slow);position:relative}.modal__close{top:var(--sp-3);right:var(--sp-3);width:30px;height:30px;position:absolute}.creator{align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);display:flex}.creator__avatar{background:var(--primary-soft);width:52px;height:52px;color:var(--primary);font-weight:600;font-size:var(--fs-lg);letter-spacing:.02em;border-radius:50%;flex:none;place-items:center;display:grid}.creator__name{font-size:var(--fs-xl);color:var(--ink);margin:0;font-weight:600}.creator__role{font-size:var(--fs-sm);color:var(--ink-muted);margin:2px 0 0}.creator__bio{margin:0 0 var(--sp-4);font-size:var(--fs-md);color:var(--ink-muted);line-height:1.6}.creator__facts{margin:0 0 var(--sp-4);padding:var(--sp-4) 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);gap:var(--sp-2);flex-direction:column;list-style:none;display:flex}.creator__facts li{font-size:var(--fs-md);color:var(--ink)}.creator__facts span{width:92px;color:var(--ink-faint);display:inline-block}.creator__links{gap:var(--sp-2);display:flex}.creator__links a{text-align:center;padding:9px var(--sp-4);border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:var(--fs-md);transition:background var(--t), border-color var(--t);flex:1;font-weight:600;text-decoration:none}.creator__links a:hover{background:var(--surface-3);border-color:var(--line)}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important}.modal,.modal__card{animation:none}}