:root{--bg: #0e1116;--panel: #171c26;--panel-2: #212940;--line: #2b3450;--text: #e8ecf4;--muted: #93a0b4;--accent: #f5a524;--warn: #fbbf24;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.45;-webkit-tap-highlight-color:transparent}#app{min-height:100%;overflow:auto}.tool{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}@media(min-width:880px){.tool{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}.preview-column{position:sticky;top:16px}}@media(min-width:1400px){.side-column{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start}.side-column>.controls{grid-column:2;grid-row:1 / span 2}}.preview-column,.side-column,.exports,.gallery{display:grid;gap:12px;min-width:0}.side-column{gap:20px}.preview-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000}#preview{display:block;width:100%;aspect-ratio:16 / 10;max-height:62vh}.preview-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.preview-bar .field{flex:1 1 120px}.section-title{margin:0;font-size:16px}.presets{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}.preset{display:grid;gap:6px;justify-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;cursor:pointer;min-height:44px}.preset:hover,.preset:focus-visible{border-color:var(--accent)}.preset canvas{width:64px;height:64px;border-radius:6px}.field{display:grid;gap:4px;min-width:0}.field-label{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.convar{color:var(--muted);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}.control{min-height:44px;width:100%;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:16px}.control:focus-visible,input[type=range]:focus-visible,input[type=color]:focus-visible,input[type=checkbox]:focus-visible,.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}textarea.control{padding-block:10px;resize:vertical}.button{width:auto;cursor:pointer;font-weight:700;white-space:nowrap}.button[aria-pressed=true]{border-color:var(--accent);background:#f5a52429}.output-row{display:flex;gap:8px;align-items:stretch}.output-row .control:first-child{flex:1;min-width:0}.controls{display:grid;gap:14px}fieldset{display:grid;gap:12px;margin:0;padding:12px 14px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);min-width:0}legend{padding:0 6px;font-weight:800}.range-row{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:10px;align-items:center}input[type=range]{width:100%;min-height:44px;accent-color:var(--accent)}.number{padding-inline:8px;font-variant-numeric:tabular-nums}.toggles{display:grid;gap:4px}.toggle{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:44px;cursor:pointer}.toggle input{width:22px;height:22px;accent-color:var(--accent)}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:44px;height:44px;border:2px solid var(--line);border-radius:10px;background:var(--swatch);cursor:pointer}.swatch[aria-pressed=true]{border-color:var(--text);box-shadow:0 0 0 2px var(--accent)}.rgb-row{display:grid;grid-template-columns:56px repeat(3,minmax(0,1fr));gap:8px;align-items:end}input[type=color]{width:100%;min-width:44px;height:44px;padding:2px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}.field input[type=color]{margin-top:0;max-width:120px}.dimmed{opacity:.55}.note{margin:0;color:var(--muted);font-size:14px}#status:not(:empty){color:var(--warn)}@media(max-height:430px){.tool{gap:12px;padding:10px}}