:root{--bg:#0e1116;--panel:#161a21;--panel-2:#1d222b;--line:#2a3038;--text:#e8ecf2;--muted:#97a1af;--accent:#ffc531;--accent-ink:#1a1206;--radius:12px;--font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{flex-direction:column;height:100%;display:flex}.topbar{border-bottom:1px solid var(--line);background:var(--panel);flex:none;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand__mark{background:linear-gradient(135deg, #2f3136 0 55%, var(--accent) 55% 100%);border-radius:9px;width:30px;height:30px;box-shadow:inset 0 0 0 1px #ffffff1f}.brand h1{letter-spacing:.2px;margin:0;font-size:16px}.brand p{color:var(--muted);margin:1px 0 0;font-size:12px}.topbar__hint{color:var(--muted);margin:0;font-size:12px}.stage{flex:auto;grid-template-columns:minmax(0,1fr) 340px;min-height:0;display:grid}.viewport{min-width:0;min-height:0;position:relative}.viewport canvas{touch-action:none;display:block}.viewbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:none;background:#101318b8;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:2px;max-width:calc(100% - 24px);padding:4px;display:flex;position:absolute;bottom:18px;left:50%;overflow-x:auto;transform:translate(-50%)}.viewbar::-webkit-scrollbar{display:none}.viewbar__divider{background:#ffffff24;align-self:stretch;width:1px;margin:3px 4px}.viewbar__item{appearance:none;color:#d4dae3;font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:6px 13px;font-size:12px;transition:background .15s,color .15s}.viewbar__item:hover{background:#ffffff17}.viewbar__item.is-active{background:var(--accent);color:var(--accent-ink);font-weight:600}.loader{pointer-events:none;background:#0e1116d1;place-content:center;justify-items:center;gap:14px;display:grid;position:absolute;inset:0}.loader__ring{border:3px solid #ffffff29;border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.9s linear infinite spin}.loader__label{color:var(--muted);font-size:13px}@keyframes spin{to{transform:rotate(360deg)}}.panel{border-left:1px solid var(--line);background:var(--panel);flex-direction:column;min-height:0;display:flex}.panel__scroll{overscroll-behavior:contain;flex:auto;padding:4px 0 8px;overflow-y:auto}.panel__foot{border-top:1px solid var(--line);background:var(--panel-2);flex:none;gap:8px;padding:12px 16px 14px;display:grid}.section{border-bottom:1px solid var(--line);padding:14px 16px 16px}.section__head h2{text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0;font-size:12px}.section__head p{color:#7f8895;margin:4px 0 0;font-size:12px;line-height:1.45}.section__body{gap:12px;margin-top:12px;display:grid}.note{color:#7f8895;margin:-4px 0 0;font-size:11.5px;line-height:1.45}.note--file{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.notice{color:var(--accent);margin:0;font-size:12px}.swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.swatch{appearance:none;cursor:pointer;background:0 0;border:0;justify-items:center;gap:5px;padding:0;display:grid}.swatch__chip{aspect-ratio:1;border-radius:10px;width:100%;transition:transform .14s,box-shadow .14s;box-shadow:inset 0 0 0 1px #ffffff24}.swatch:hover .swatch__chip{transform:translateY(-2px)}.swatch.is-active .swatch__chip{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent)}.swatch__name{color:var(--muted);font-size:10.5px;line-height:1}.swatch.is-active .swatch__name{color:var(--text)}.row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.row--buttons{gap:8px}.field{gap:6px;display:grid}.field__label{color:var(--muted);justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;display:flex}.field__label em{color:var(--text);font-variant-numeric:tabular-nums;font-size:11.5px;font-style:normal}.slider{appearance:none;cursor:pointer;background:#333a44;border-radius:999px;outline:none;width:100%;height:4px}.slider::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid var(--panel);border-radius:50%;width:15px;height:15px;box-shadow:0 1px 3px #00000080}.slider::-moz-range-thumb{background:var(--accent);border:2px solid var(--panel);border-radius:50%;width:13px;height:13px}.slider:focus-visible{box-shadow:0 0 0 2px var(--accent)}.colorfield{align-items:center;gap:9px;min-width:0;display:flex}.colorfield__swatch{cursor:pointer;border-radius:9px;flex:none;width:34px;height:34px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff2e}.colorfield__swatch input{opacity:0;cursor:pointer;border:0;padding:0;position:absolute;inset:0}.colorfield__meta{gap:2px;min-width:0;display:grid}.colorfield__meta>span{color:var(--muted);font-size:12px}.colorfield__hex{width:100%;min-width:0;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;letter-spacing:.04em;background:0 0;border:0;padding:0;font-size:11.5px}.colorfield__hex:focus{color:var(--accent);outline:none}.textinput{background:var(--panel-2);border:1px solid var(--line);width:100%;min-width:0;color:var(--text);font:inherit;border-radius:8px;padding:8px 10px;font-size:13px}.textinput::placeholder{color:#616a77}.textinput:focus{border-color:var(--accent);outline:none}.segmented{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;display:grid}.segmented__item{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font:inherit;cursor:pointer;border-radius:8px;padding:7px 4px;font-size:11.5px;transition:background .14s,color .14s,border-color .14s}.segmented__item:hover{color:var(--text);border-color:#3b434e}.segmented__item.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:9px;display:flex}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle__track{background:#333a44;border-radius:999px;flex:none;width:34px;height:19px;padding:2px;transition:background .16s}.toggle__thumb{background:#8b939f;border-radius:50%;width:15px;height:15px;transition:transform .16s,background .16s;display:block}.toggle input:checked+.toggle__track{background:var(--accent)}.toggle input:checked+.toggle__track .toggle__thumb{background:var(--accent-ink);transform:translate(15px)}.toggle input:focus-visible+.toggle__track{box-shadow:0 0 0 2px var(--accent)}.toggle__label{color:var(--muted);font-size:12px}.btn{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;border-radius:9px;padding:9px 12px;font-size:12.5px;transition:background .14s,border-color .14s,transform .1s}.btn:hover{background:#232935;border-color:#3f4854}.btn:active{transform:translateY(1px)}.btn--ghost{background:0 0}.btn--slim{padding:6px 10px;font-size:12px}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.btn--primary:hover{background:#ffd45c;border-color:#ffd45c}@media (width<=560px){.viewbar{gap:0;bottom:12px}.viewbar__item{padding:6px 9px;font-size:11.5px}.viewbar__divider{margin:3px 2px}}@media (width<=900px){body{overflow:auto}.app{height:auto;min-height:100%}.stage{grid-template-columns:minmax(0,1fr)}.viewport{height:58vh;min-height:340px}.panel{border-left:0;border-top:1px solid var(--line)}.panel__scroll{overflow-y:visible}.panel__foot{position:sticky;bottom:0}.topbar__hint{display:none}}