:root{--page:#0a0f1a;--panel:#111827;--raised:#182134;--line:#232e42;--border:#646f86;--text:#e8edf5;--muted:#9aa6b8;--accent:#0ca7ff;--accent-hover:#3db8ff;--on-accent:#070d19;--warning:#fbbf24;--error:#ff7a6e;--stage:#313338;--code-keyword:#ff8f70;--code-string:#7ee0a8;--code-number:#f7c65c;--code-comment:#7d8aa0;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--page);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:light){:root{--page:#f6f8fb;--panel:#fff;--raised:#eef2f7;--line:#e2e7ee;--border:#7f8899;--text:#0f1726;--muted:#566173;--accent:#0a6eb0;--accent-hover:#0995e6;--warning:#9a4a06;--error:#c62a1e;--stage:#e3e5e8;--code-keyword:#b4361a;--code-string:#17794a;--code-number:#8a5a00;--code-comment:#6b7486;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--border) transparent}[hidden]{display:none!important}body{flex-direction:column;height:100vh;margin:0;display:flex}a{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.visually-hidden,.button input{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}header{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px 24px;padding:14px 24px;display:flex}.brand{flex-wrap:wrap;align-items:center;gap:4px 12px;display:flex}h1{letter-spacing:-.01em;align-items:center;gap:8px;margin:0;font:800 20px/28px Nunito,system-ui,sans-serif;display:flex}.brand p{color:var(--muted);margin:0}.install{align-items:center;gap:8px;margin-left:auto;display:flex}.install code{font:13px/16px var(--mono);background:var(--panel);border:1px solid var(--line);white-space:nowrap;border-radius:6px;padding:6px 10px}header a{color:var(--muted);text-decoration:none}header a:hover{color:var(--text);text-decoration:underline}nav{gap:16px;display:flex}main{flex:1;grid-template-columns:minmax(320px,400px) minmax(0,1fr);min-height:0;display:grid}.controls,.output{scrollbar-gutter:stable;min-height:0;overflow-y:auto}.controls{border-right:1px solid var(--line);align-content:start;gap:20px;padding:24px;display:grid}.group{gap:6px;display:grid}.caption,.field label:not(.button){color:var(--muted);font-size:13px;font-weight:500;line-height:20px}.note{color:var(--muted);margin:2px 0 0;font-size:12px}.segmented{background:var(--panel);border:1px solid var(--line);border-radius:8px;grid-template-columns:repeat(5,1fr);gap:2px;padding:2px;display:grid}.segmented label{position:relative}.segmented input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.segmented span{text-align:center;white-space:nowrap;color:var(--muted);border-radius:6px;padding:7px 4px;font-size:13px;font-weight:600;display:block}.segmented input:checked+span{background:var(--raised);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}.segmented input:focus-visible+span{outline:2px solid var(--accent)}.presets{flex-wrap:wrap;gap:6px;display:flex}button,.button{font:inherit;border:1px solid var(--border);background:var(--panel);height:36px;color:var(--text);cursor:pointer;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:0 14px;font-weight:600;line-height:1;display:inline-flex}button:hover,.button:hover{background:var(--raised)}.button:focus-within{outline:2px solid var(--accent);outline-offset:2px}button.primary{color:var(--on-accent);background:#0ca7ff;border-color:#0ca7ff}button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}button.ghost{min-width:5.5em;height:28px;padding:0 10px;font-size:13px}button.remove{width:36px;padding:0;font-size:20px;font-weight:400}.chip{border-color:var(--line);border-radius:999px;height:32px;font-size:13px}.chip:hover{border-color:var(--border)}details{border-top:1px solid var(--line)}details[open]{padding-bottom:8px}summary,label,.caption,.chip{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}summary{cursor:pointer;padding:14px 0;font-weight:700;line-height:20px;list-style:none;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:"";border:solid var(--muted);border-width:0 1.5px 1.5px 0;width:6px;height:6px;position:absolute;top:19px;right:4px;transform:rotate(45deg)}details:not([open])>summary:after{top:21px;transform:rotate(-45deg)}.fields{grid-template-columns:1fr 1fr;gap:16px 12px;display:grid}.field{align-content:start;gap:4px;min-width:0;display:grid}.field.text,.field.image{grid-column:1/-1}input,select{font:inherit;border:1px solid var(--border);background:var(--panel);width:100%;min-width:0;height:36px;color:var(--text);border-radius:6px;padding:0 10px}@supports (appearance:base-select){@media (hover:hover) and (pointer:fine){select{appearance:base-select}::picker(select){appearance:base-select}select{justify-content:space-between;align-items:center;display:flex}::picker(select){border:1px solid var(--line);background:var(--panel);border-radius:8px;margin-block:4px;padding:4px;box-shadow:0 8px 24px #0000004d}select::picker-icon{color:var(--muted);transition:rotate .15s}select:open::picker-icon{rotate:180deg}option{border-radius:4px;padding:6px 8px}option:hover,option:focus-visible{background:var(--raised)}option::checkmark{color:var(--accent)}}}input::placeholder{color:var(--muted);opacity:1;font-style:italic}input[aria-invalid=true],input:invalid{border-color:var(--error)}.row{gap:6px;display:flex}.color .row{position:relative}.color input[type=text]{font-family:var(--mono);padding-left:38px;font-size:13px}.color input[type=color]{cursor:pointer;background:0 0;border:0;width:24px;height:24px;margin:auto 0;padding:0;position:absolute;inset:0 auto 0 6px}.color .row:has(input:placeholder-shown) input[type=color]{opacity:.5}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #80808080}input[type=color]::-moz-color-swatch{border:0;border-radius:4px}.status.warning{color:var(--warning)}.status.error{color:var(--error)}.output{flex-direction:column;gap:8px;padding:0 24px;display:flex}.output>*{flex:none}.stage{z-index:1;background:var(--page);gap:12px;min-width:0;padding:24px 0 16px;display:grid;position:sticky;top:0}.preview{background:var(--stage);border-radius:12px;place-items:center;padding:32px;display:grid}.preview canvas{width:auto;max-width:100%;height:auto;display:block}.status:empty{display:none}.status{color:var(--muted);margin:0}.actions{gap:8px;display:flex}.actions button{min-width:10.5em}pre{border:1px solid var(--line);background:var(--panel);font:13px/20px var(--mono);border-radius:12px;margin:0;padding:16px 20px;overflow:auto}.keyword{color:var(--code-keyword)}.string{color:var(--code-string)}.number{color:var(--code-number)}.comment{color:var(--code-comment)}footer{max-width:72ch;color:var(--muted);padding:16px 0 24px;font-size:13px}footer p{margin:4px 0}@media (width<=1100px){.install{flex-basis:100%;order:1;margin-left:0}nav{margin-left:auto}}@media (width<=860px){html{scroll-padding-top:200px}body{height:auto}header{padding:12px 16px}.install{flex-wrap:wrap}main{flex-direction:column;display:flex}.output{display:contents}.stage{border-bottom:1px solid var(--line);order:-1;gap:8px;padding:8px 16px}.preview{padding:8px}.controls{border-right:0;padding:16px;overflow:visible}pre,footer{margin:0 16px}input,select,.color input[type=text]{font-size:16px}input:not([type=color]),select,.actions button,.button,button.remove{height:44px}button.remove{width:44px}.chip,.segmented span{justify-content:center;align-items:center;min-height:40px;display:flex}}