:root{--ground: #F2F1F6;--panel: #FFFFFF;--ink: #1A1728;--muted: #6A6680;--line: #DFDCE9;--soft: #ECEAF3;--accent: #5A3DF0;--accent-ink: #FFFFFF;--stage: #FBFAFD;--dot: #D9D6E5;--ok: #1F8A5B;--ui: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--display: "Instrument Serif", "Iowan Old Style", Georgia, serif;--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ground: #0E0D15;--panel: #16141F;--ink: #ECEAF5;--muted: #9793AE;--line: #29263A;--soft: #1E1B2B;--accent: #A18CFF;--accent-ink: #130F24;--stage: #0A0910;--dot: #23202F;--ok: #5FD3A0;color-scheme:dark}}:root[data-theme=dark]{--ground: #0E0D15;--panel: #16141F;--ink: #ECEAF5;--muted: #9793AE;--line: #29263A;--soft: #1E1B2B;--accent: #A18CFF;--accent-ink: #130F24;--stage: #0A0910;--dot: #23202F;--ok: #5FD3A0;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#root{height:100%}body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.45;overflow:hidden}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{height:100%;display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;padding:16px}.main{grid-column:2;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.side{grid-column:1;grid-row:1;min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}.side-head{padding:14px 16px 12px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px}h1{font-family:var(--display);font-weight:400;font-size:32px;line-height:1;margin:0;letter-spacing:-.01em}h1 em{font-style:italic;color:var(--accent)}.side-head p{margin:0;font-size:12px;color:var(--muted)}.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;min-width:0}.presets{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding-bottom:2px}.presets::-webkit-scrollbar{display:none}.chip{flex:none;font:500 13px var(--ui);border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 11px;min-height:32px;border-radius:999px;cursor:pointer}.chip:hover{border-color:var(--accent)}.chip[aria-pressed=true]{background:var(--ink);color:var(--ground);border-color:var(--ink)}.chip.ghost{background:transparent;border-style:dashed}.stage{position:relative;flex:1;min-height:0;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;overflow:hidden;transition:background-color .2s}.stage[data-bg=grid]{background-color:var(--stage);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:18px 18px}.stage[data-bg=white]{background:#fff;border-color:#e4e2ea}.stage[data-bg=black]{background:#000;border-color:#26242e}.art{position:absolute;top:0;right:0;bottom:0;left:0;padding:5%;display:block}.art svg{width:100%;height:100%;display:block}.bgpick{position:absolute;top:10px;right:10px;display:flex;gap:2px;padding:3px;border-radius:999px;background:#80808c2e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.bgpick button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.bgpick button[aria-pressed=true]{border-color:var(--accent)}.bgpick [data-v=white]{background:#fff}.bgpick [data-v=black]{background:#000}.bgpick [data-v=grid]{background:var(--stage) radial-gradient(var(--dot) 1.2px,transparent 1.6px) 0 0 / 6px 6px}.meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:12px var(--mono);color:var(--muted)}.meta b{color:var(--ink);font-weight:500}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}summary::-webkit-details-marker{display:none}summary:after{content:"+";font:400 16px var(--mono);color:var(--muted)}details[open] summary:after{content:"–"}.sec{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}.row{display:grid;grid-template-columns:1fr 76px;gap:4px 10px;align-items:center}.row label{grid-column:1 / -1;display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.row label .hint{font:11px var(--mono);color:var(--muted);opacity:.8}input[type=range]{width:100%;accent-color:var(--accent);margin:0;height:22px}input[type=number],input[type=text]{width:100%;font:13px var(--mono);color:var(--ink);background:var(--soft);border:1px solid transparent;border-radius:4px;padding:5px 7px;min-height:28px}input[type=number]{text-align:right}input:focus{border-color:var(--accent);outline:none}input:disabled{opacity:.45}.seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--soft);padding:3px;border-radius:5px}.seg button{flex:1 1 auto;font:500 12.5px var(--ui);border:0;background:transparent;color:var(--muted);padding:6px 8px;min-height:28px;border-radius:3px;cursor:pointer;white-space:nowrap}.seg button[aria-pressed=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px #0000001f}.tog{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);min-height:26px}.tog code{font:11px var(--mono);background:var(--soft);padding:1px 4px;border-radius:3px}.switch{position:relative;width:36px;height:20px;flex:none}.switch input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;margin:0;cursor:pointer}.switch span{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--line);border-radius:999px;transition:background .15s;pointer-events:none}.switch span:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--panel);transition:transform .15s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{transform:translate(16px)}.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.triplet{display:flex;flex-direction:column;gap:8px}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sw{display:flex;flex-direction:column;gap:4px;font:11px var(--mono);color:var(--muted)}.sw input[type=color]{width:100%;height:34px;border:1px solid var(--line);border-radius:4px;padding:2px;background:var(--panel);cursor:pointer}input.color1{width:48px;height:28px;border:1px solid var(--line);border-radius:4px;padding:2px;background:var(--panel);cursor:pointer}.ramp{height:8px;border-radius:2px}.export{padding:4px 16px 18px;display:flex;flex-direction:column;gap:12px}.btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.btn{font:600 13px var(--ui);padding:9px 10px;border-radius:4px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.tabs{display:flex;gap:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}.tabs button{font:500 12.5px var(--ui);background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:6px 0;cursor:pointer;margin-bottom:-1px}.tabs button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}textarea{width:100%;height:170px;resize:vertical;font:11.5px/1.5 var(--mono);color:var(--ink);background:var(--soft);border:0;border-radius:4px;padding:10px;white-space:pre;overflow:auto}textarea.wrapit{white-space:pre-wrap;word-break:break-all;height:120px}.copyrow{display:flex;gap:8px;align-items:center;justify-content:space-between}.status{font-size:12px;color:var(--ok);min-height:1.2em}.note{font-size:12px;color:var(--muted);margin:0}.note code{font:11px var(--mono);background:var(--soft);padding:1px 4px;border-radius:3px}.load{display:flex;gap:6px}.load input{flex:1;min-width:0}.credit{padding:14px 16px 18px;font-size:12px;color:var(--muted);text-align:center}.credit a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}.credit a:hover{text-decoration-color:var(--accent)}dialog.support{width:min(420px,calc(100% - 32px));padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px #00000040}dialog.support::backdrop{background:#0e0d1573;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.support-body{padding:22px 22px 16px;display:flex;flex-direction:column;gap:10px}.support-body h2{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;margin:0 0 4px}.support-body h2 em{color:var(--accent)}.support-body p{margin:0;color:var(--muted)}.support-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.support-actions .btn{flex:1 1 auto;text-align:center;text-decoration:none}.support-close{align-self:center;font:500 12.5px var(--ui);background:none;border:0;color:var(--muted);padding:8px;cursor:pointer}.support-close:hover{color:var(--ink)}@media(max-width:820px){.app{display:flex;flex-direction:column;gap:10px;padding:10px 16px 0}.main{flex:none;height:min(48svh,560px);gap:8px}.side{flex:1;min-height:0;border-radius:6px 6px 0 0;border-bottom:0}.side-head{padding:10px 14px}h1{font-size:26px;white-space:nowrap}.side-head p{display:none}.meta{font-size:11px}.toolbar .presets{flex:1}.credit{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}}@media(prefers-reduced-motion:reduce){.switch span,.switch span:after,.stage{transition:none}}