:root{--bg:#f4f3f0;--surface:#fff;--surface-2:#f8f7f5;--border:#e2dfd9;--text:#1d1c1a;--muted:#6b6862;--accent:#e8590c;--accent-text:#fff;--accent-soft:#fff1e8;--warn-bg:#fff6db;--warn-text:#7a5a00;--invalid:#c92a2a;--viewer-bg:radial-gradient(circle at 50% 40%, #fff 0%, #ebe9e4 100%);--radius:10px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#161615;--surface:#201f1d;--surface-2:#262523;--border:#353330;--text:#ecebe8;--muted:#a19d96;--accent:#ff7a2e;--accent-text:#1b0d04;--accent-soft:#3a2316;--warn-bg:#3a3112;--warn-text:#f2d675;--invalid:#ff8787;--viewer-bg:radial-gradient(circle at 50% 40%, #34322f 0%, #1c1b1a 100%);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.topbar{border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap;align-items:baseline;gap:12px;padding:14px 20px;display:flex}.topbar h1{margin:0;font-size:18px;font-weight:650}.tagline{color:var(--muted);font-size:13px}.layout{grid-template-columns:minmax(320px,420px) 1fr;height:calc(100vh - 55px);min-height:560px;display:grid}.panel{border-right:1px solid var(--border);background:var(--surface);flex-direction:column;min-height:0;display:flex}.tabs{border-bottom:1px solid var(--border);gap:4px;padding:10px 16px 0;display:flex}.tab{appearance:none;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 14px;font-weight:600}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.pane{flex:1;padding:16px;overflow-y:auto}.field{flex-direction:column;gap:4px;margin-bottom:12px;display:flex}.field>span,.field>label{color:var(--muted);font-size:13px;font-weight:600}input:not([type=checkbox]):not([type=color]),.combo-btn{border:1px solid var(--border);background:var(--surface-2);width:100%;color:var(--text);font:inherit;border-radius:8px;padding:8px 10px}input:focus,.combo-btn:focus-visible,.combo-btn[aria-expanded=true]{outline:2px solid var(--accent);outline-offset:-1px}.combo-btn{text-align:left;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;display:flex}.combo-btn span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.combo-btn svg{width:16px;height:16px;color:var(--muted);flex:none}.combo-input{position:relative}.combo-input input{padding-right:40px!important}.combo-toggle{width:36px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:0 8px 8px 0;place-items:center;display:grid;position:absolute;top:1px;bottom:1px;right:1px}.combo-toggle:hover{color:var(--text)}.combo-toggle svg{width:16px;height:16px}.combo-popup{z-index:1000;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin:0;padding:4px;list-style:none;position:fixed;overflow-y:auto;box-shadow:0 8px 24px #0000002e}.combo-popup li{cursor:pointer;border-radius:6px;padding:7px 10px;font-size:14px}.combo-popup li.active{background:var(--accent-soft)}.combo-popup li.selected{color:var(--accent);font-weight:650}input.invalid{border-color:var(--invalid);color:var(--invalid)}input[type=color]{border:1px solid var(--border);background:var(--surface-2);cursor:pointer;border-radius:8px;flex:none;width:46px;height:38px;padding:2px}.color-row{gap:8px;display:flex}.color-row input[name=hex]{text-transform:uppercase;font-family:ui-monospace,Cascadia Mono,Consolas,monospace}.check{flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 12px;display:flex}.check input{width:18px;height:18px;accent-color:var(--accent)}.check label,.check span{font-size:14px;font-weight:600}.check .help{flex-basis:100%}.temps{background:var(--surface-2);border-radius:8px;grid-template-columns:1fr 1fr;gap:0 10px;margin:-4px 0 12px;padding:10px 12px 0;display:grid}.unit-input{position:relative}.unit-input input{padding-right:42px}.unit{color:var(--muted);pointer-events:none;font-size:13px;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.help{color:var(--muted);font-size:12px}.hint{color:var(--muted);margin:8px 0 0;font-size:13px}.hint a{color:var(--accent)}fieldset{border:1px solid var(--border);border-radius:var(--radius);margin:0 0 14px;padding:8px 14px 4px}legend{padding:0 6px;font-size:14px;font-weight:700}.params-actions{justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;display:flex}.params-actions .hint{margin:0}[hidden]{display:none!important}.btn{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;white-space:nowrap;border-radius:8px;padding:9px 14px;font-weight:600}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn.ghost{background:0 0;padding:6px 10px;font-size:13px}.viewer{flex-direction:column;min-width:0;min-height:0;display:flex}.preview{background:var(--viewer-bg);flex:1;min-height:300px;position:relative;overflow:hidden}.preview canvas{touch-action:none;width:100%;height:100%;display:block}.loading{color:var(--muted);place-items:center;display:grid;position:absolute;inset:0}.view-reset{background:var(--surface);position:absolute;top:10px;right:10px}.viewer-footer{border-top:1px solid var(--border);background:var(--surface);padding:12px 16px 16px}.status{flex-wrap:wrap;gap:12px;font-weight:600;display:flex}.muted{color:var(--muted);font-size:13px;font-weight:400}.warnings{margin:8px 0 0;padding:0;list-style:none}.warnings li{background:var(--warn-bg);color:var(--warn-text);border-radius:8px;margin-bottom:6px;padding:7px 10px;font-size:13px}.downloads{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}@media (width<=820px){.layout{grid-template-columns:1fr;height:auto}.viewer{order:-1}.preview{flex:none;height:52vh}.panel{border-right:0}.pane{overflow:visible}.topbar{padding:12px 16px}}