:root{--ink:#0b1a3a;--ink-soft:#4a5878;--ink-faint:#7b88a6;--paper:#f4f6fb;--surface:#fff;--surface-sunk:#eef2f9;--line:#d9e0ee;--brand:#0a3bbf;--brand-strong:#062a8f;--brand-tint:#e5edff;--on-brand:#fff;--warn:#9a4a00;--warn-tint:#fff3e0;--error:#b42318;--grid-dot:#0a3bbf29;--shadow:0 1px 2px #0b1a3a0f, 0 12px 32px -12px #0b1a3a2e;--font-display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;--font-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--radius-s:8px;--radius-m:12px;--radius-l:28px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--ink:#e6ebf7;--ink-soft:#a3aec8;--ink-faint:#75809b;--paper:#0a1020;--surface:#111a30;--surface-sunk:#0d1528;--line:#243150;--brand:#7c9dff;--brand-strong:#a8bdff;--brand-tint:#17254b;--on-brand:#081338;--warn:#f5b454;--warn-tint:#2c2111;--error:#ff8a80;--grid-dot:#7c9dff2e;--shadow:0 1px 2px #0000004d, 0 16px 40px -16px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:88px;font-size:16px}body{font-family:var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-size:1rem;line-height:1.5;transition:background-color .2s,color .2s}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.1}a{color:inherit;text-decoration:none}ul{list-style:none}img,svg{display:block}input,select,textarea,button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.btn{border-radius:var(--radius-s);border:1.5px solid var(--brand);background:var(--surface);min-height:42px;color:var(--brand);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:.9375rem;font-weight:600;transition:background-color .15s,color .15s,transform .1s;display:inline-flex}.btn:hover:not(:disabled){background:var(--brand-tint)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary,.btn-secondary{background:var(--brand);color:var(--on-brand)}.btn--primary:hover:not(:disabled),.btn-secondary:hover:not(:disabled){background:var(--brand-strong);border-color:var(--brand-strong)}.btn--ghost{background:0 0}.btn--quiet{color:var(--ink-soft);background:0 0;border-color:#0000;padding:0 10px}.btn--quiet:hover:not(:disabled){background:var(--surface-sunk);color:var(--ink)}.btn--large{min-height:52px;padding:0 26px;font-size:1.0625rem}.icon-btn{border-radius:var(--radius-s);width:40px;height:40px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;place-items:center;display:inline-grid}.icon-btn:hover{background:var(--surface-sunk);color:var(--ink)}.handle{background:var(--brand);border:2px solid var(--paper);box-sizing:content-box;width:12px;height:12px;position:absolute}.handle--tl{top:-8px;left:-8px}.handle--tr{top:-8px;right:-8px}.handle--bl{bottom:-8px;left:-8px}.handle--br{bottom:-8px;right:-8px}.note{color:var(--ink-soft);align-items:flex-start;gap:8px;font-size:.875rem;display:flex}.note svg{flex:none;margin-top:1px}.note--warn{border-radius:var(--radius-s);background:var(--warn-tint);color:var(--warn);padding:10px 12px}.note--error{color:var(--error)}.footer{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;max-width:1200px;margin:0 auto;padding:32px 24px 48px;display:flex}.footer__credit{font-family:var(--font-display);font-size:1.125rem;font-weight:700}.footer__credit a{color:var(--brand)}.footer__credit a:hover{text-decoration:underline}.footer__heart{color:#e5484d}.footer__note{color:var(--ink-soft);margin-top:4px;font-size:.875rem}.footer__links{flex-wrap:wrap;gap:4px;display:flex}.footer__links a{border-radius:var(--radius-s);color:var(--ink-soft);align-items:center;gap:6px;padding:8px 12px;font-size:.9375rem;font-weight:500;display:inline-flex}.footer__links a:hover{background:var(--surface-sunk);color:var(--ink)}@media (width<=560px){.footer__links{margin-left:-12px}}.navbar{z-index:100;background:var(--paper);border-bottom:1px solid var(--line);align-items:center;gap:24px;height:68px;padding:0 max(16px,50vw - 576px);display:flex;position:sticky;top:0}.brand{font-family:var(--font-display);letter-spacing:-.02em;align-items:center;gap:8px;font-size:1.3125rem;font-weight:800;display:flex}.nav-links{align-items:center;gap:4px;margin-left:auto;display:flex}.nav-links a{border-radius:var(--radius-s);color:var(--ink-soft);align-items:center;gap:6px;padding:8px 12px;font-size:.9375rem;font-weight:500;transition:color .15s,background-color .15s;display:inline-flex}.nav-links a:hover{color:var(--ink);background:var(--surface-sunk)}.nav-links a.activepage{color:var(--brand)}.nav-actions{align-items:center;gap:4px;display:flex}.nav-toggle{display:none}@media (width<=720px){.nav-toggle{display:inline-grid}.nav-actions{margin-left:auto}.nav-links{background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;display:none;position:absolute;top:68px;left:0;right:0}.nav-links.is-open{display:flex}.nav-links a{padding:12px;font-size:1rem}}.hero{max-width:1200px;margin:0 auto;padding:clamp(64px,12vh,128px) 24px clamp(48px,8vh,96px)}.hero__copy{max-width:820px}.hero h1{letter-spacing:-.035em;font-size:clamp(2.5rem,7vw,5rem);font-weight:800;line-height:1.02}.hero__selected{outline:2px solid var(--brand);outline-offset:0;color:var(--brand);padding:0 .12em .06em;display:inline-block;position:relative}.hero__selected .handle{width:10px;height:10px}.hero__lede{max-width:60ch;color:var(--ink-soft);margin:28px 0 36px;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.55}@media (width<=560px){.hero{padding-top:48px}}.generator{max-width:1200px;margin:0 auto;padding:24px 24px 96px}.generator__intro{margin-bottom:20px}.generator__intro h2{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800}.generator__intro p{color:var(--ink-soft);margin-top:6px}.type-picker{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:20px;display:grid}.type-picker__item{border:1.5px solid var(--line);border-radius:var(--radius-m);background:var(--surface);color:var(--ink-soft);cursor:pointer;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 12px;font-size:.875rem;font-weight:600;transition:border-color .15s,color .15s,background-color .15s;display:flex}.type-picker__item:hover{border-color:var(--brand);color:var(--ink)}.type-picker__item[aria-pressed=true]{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}.workspace{grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:24px;display:grid}.editor{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden}.editor__content{padding:24px}.type-form{flex-wrap:wrap;gap:16px;display:flex}.field{flex-direction:column;flex:100%;gap:6px;display:flex}.field--half{flex:calc(50% - 8px);min-width:200px}.field label,.segmented legend,.color-field label,.range label,.export__size label{color:var(--ink);font-size:.875rem;font-weight:600}.field input,.field textarea,.field select,.export__size select{border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--surface-sunk);width:100%;min-height:46px;padding:10px 14px;font-size:1rem;transition:border-color .15s,background-color .15s}.field textarea{resize:vertical;line-height:1.5}.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}.field input:focus,.field textarea:focus,.field select:focus,.export__size select:focus{border-color:var(--brand);background:var(--surface);outline:none}.field__hint{color:var(--ink-soft);font-size:.8125rem}.row{flex-wrap:wrap;gap:16px 24px;display:flex}.row>*{flex:180px}.row--align-end{align-items:flex-end}.segmented{border:0;min-width:0}.segmented legend{margin-bottom:6px}.segmented__options{flex-wrap:wrap;gap:6px;display:flex}.segmented__options label{border:1.5px solid var(--line);color:var(--ink-soft);cursor:pointer;border-radius:999px;padding:7px 12px;font-size:.875rem;font-weight:500;transition:border-color .15s,color .15s,background-color .15s;position:relative}.segmented__options label:hover{border-color:var(--brand);color:var(--ink)}.segmented__options label.is-selected{border-color:var(--brand);background:var(--brand-tint);color:var(--brand);font-weight:600}.segmented__options input{opacity:0;cursor:pointer;position:absolute;inset:0}.segmented__options label:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:2px}.color-field{flex-direction:column;gap:6px;display:flex}.color-field__input{border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--surface-sunk);align-items:center;gap:10px;padding:5px 12px 5px 5px;display:flex}.color-field__input input{cursor:pointer;background:0 0;border:0;border-radius:6px;width:34px;height:34px;padding:0}.color-field__input input::-webkit-color-swatch-wrapper{padding:0}.color-field__input input::-webkit-color-swatch{border:1px solid var(--line);border-radius:6px}.color-field__input input::-moz-color-swatch{border:1px solid var(--line);border-radius:6px}.color-field__input span{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.875rem}.color-field.is-disabled{opacity:.45}.range{flex-direction:column;gap:8px;display:flex}.range__head{justify-content:space-between;display:flex}.range output{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.875rem}.range input{width:100%;accent-color:var(--brand)}.toggle{cursor:pointer;flex:100%;align-items:center;gap:10px;font-size:.9375rem;display:inline-flex}.toggle input{opacity:0;width:1px;height:1px;position:absolute}.toggle__track{background:var(--line);border-radius:999px;flex:none;width:38px;height:22px;transition:background-color .15s;position:relative}.toggle__track:after{content:"";background:var(--surface);border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #00000040}.toggle input:checked+.toggle__track{background:var(--brand)}.toggle input:checked+.toggle__track:after{transform:translate(16px)}.toggle input:focus-visible+.toggle__track{outline:3px solid var(--brand);outline-offset:2px}.disclosure{border-top:1px solid var(--line)}.disclosure summary{cursor:pointer;align-items:baseline;gap:12px;padding:18px 24px;list-style:none;display:flex}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:hover{background:var(--surface-sunk)}.disclosure__title{font-family:var(--font-display);font-size:1.125rem;font-weight:700}.disclosure__summary{color:var(--ink-faint);font-size:.875rem}.disclosure__chevron{color:var(--ink-soft);align-self:center;margin-left:auto;transition:transform .2s}.disclosure[open] .disclosure__chevron{transform:rotate(180deg)}.disclosure__body{flex-direction:column;gap:20px;padding:4px 24px 24px;display:flex}.presets{flex-wrap:wrap;gap:8px;display:flex}.preset{border:1.5px solid var(--line);background:var(--surface);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:5px 12px 5px 5px;font-size:.875rem;font-weight:500;display:inline-flex}.preset:hover{border-color:var(--brand)}.preset[aria-pressed=true]{border-color:var(--brand);background:var(--brand-tint);color:var(--brand);font-weight:600}.preset__swatch{border-radius:999px;gap:2px;padding:4px;display:flex;box-shadow:inset 0 0 0 1px #00000014}.preset__swatch span{border-radius:50%;width:10px;height:10px}.logo-picker{align-items:center;gap:16px;display:flex}.logo-picker__thumb{border-radius:var(--radius-m);border:1.5px solid var(--line);object-fit:contain;background:var(--surface-sunk);flex:none;width:64px;height:64px;padding:6px}.logo-picker__thumb--empty{color:var(--ink-faint);border-style:dashed;place-items:center;display:grid}.logo-picker__actions{flex-wrap:wrap;gap:8px;display:flex}.logo-picker__actions label.btn:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:2px}.preview-column__sticky{flex-direction:column;gap:16px;display:flex;position:sticky;top:88px}.stage{border-radius:var(--radius-l);background-color:var(--surface);background-image:radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px);border:1px solid var(--line);background-size:14px 14px;padding:44px;position:relative}.stage__frame{outline:2px solid var(--brand);box-shadow:var(--shadow);position:relative}.stage__frame .handle{border-color:var(--surface)}.stage__code svg,.stage__code canvas{width:100%;height:auto}.stage--empty .stage__code{opacity:.18;filter:grayscale()}.stage--empty .stage__frame{outline-style:dashed;outline-color:var(--ink-faint)}.stage--empty .handle{background:var(--ink-faint)}.stage__hint{text-align:center;font-family:var(--font-display);color:var(--ink);pointer-events:none;place-items:center;padding:72px;font-size:1.25rem;font-weight:700;display:grid;position:absolute;inset:0}.export{flex-direction:column;gap:12px;display:flex}.export__size{align-items:center;gap:12px;display:flex}.export__size select{flex:1;width:auto;min-height:42px}.export__formats{grid-template-columns:1.4fr 1fr 1fr;gap:8px;display:grid}.export__more{justify-content:center;gap:4px;display:flex}.export__status{text-align:center;min-height:1.5em;color:var(--ink-soft);font-size:.875rem}.export__status.is-error{color:var(--error)}.history{margin-top:64px}.history__head{justify-content:space-between;align-items:baseline;margin-bottom:16px;display:flex}.history__head h2{font-size:1.75rem;font-weight:800}.history__empty{border:1.5px dashed var(--line);border-radius:var(--radius-m);max-width:60ch;color:var(--ink-soft);padding:28px}.history .note--error{margin-bottom:12px}.history__list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;display:grid}.history__item{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);align-items:center;gap:4px;padding:8px;display:flex}.history__open{border-radius:var(--radius-s);text-align:left;cursor:pointer;background:0 0;border:0;flex:1;align-items:center;gap:12px;min-width:0;padding:4px;display:flex}.history__open:hover{background:var(--surface-sunk)}.history__open img{background:#fff;border-radius:6px;flex:none}.history__meta{flex-direction:column;min-width:0;display:flex}.history__type{color:var(--brand);font-size:.8125rem;font-weight:600}.history__label{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.history__time{color:var(--ink-faint);font-size:.8125rem}@media (width<=1000px){.workspace{grid-template-columns:minmax(0,1fr) 340px}.type-picker{grid-template-columns:repeat(4,minmax(0,1fr))}.stage{padding:32px}}@media (width<=760px){.generator{padding:16px 16px 72px}.workspace{grid-template-columns:minmax(0,1fr)}.preview-column{order:-1}.preview-column__sticky{position:static}.stage{width:100%;max-width:360px;margin:0 auto}.type-picker{scroll-snap-type:x mandatory;margin:0 -16px 20px;padding:2px 16px 4px;scroll-padding-inline:16px;display:flex;overflow-x:auto}.type-picker__item{scroll-snap-align:start;flex:0 0 84px}.editor__content,.disclosure summary{padding-left:18px;padding-right:18px}.disclosure__body{padding:4px 18px 20px}.disclosure__summary{display:none}}