:root{--accent-soft:#eaeefc;--ok:oklch(55% .13 150);--warn:oklch(60% .15 60);--bad:oklch(55% .18 25);--canvas:#fff;--canvas-fg:#3a3a48;--canvas-line:#e6e6ee}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--accent-soft:#1a2b25;--ok:oklch(75% .13 150);--warn:oklch(80% .13 75);--bad:oklch(72% .15 25);--canvas-line:#3a3a4a}}:root[data-theme=dark]{--accent-soft:#1a2b25;--ok:oklch(75% .13 150);--warn:oklch(80% .13 75);--bad:oklch(72% .15 25);--canvas-line:#3a3a4a}.hero{gap:6px;padding-block:28px 18px;display:grid}.hero .eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--acc);font-size:12px;font-weight:700}.hero h1{font-size:clamp(38px,6vw,54px);line-height:1.02}.hero p{color:var(--mute);max-width:62ch;margin:0}.grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:8px 48px;display:grid}@media (width>=960px){.grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}.preview-col{top:calc(env(safe-area-inset-top,0px) + 16px);position:sticky}}@media (width<=959px){.preview-col{order:-1}}.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px}form.panel{padding:6px 0}.group{border:0;border-top:1px solid var(--line);margin:0;padding:16px 20px}.group:first-of-type{border-top:0}.group>summary,.group>legend{font-family:var(--font-display);cursor:default;margin-bottom:12px;padding:0;font-size:19px;font-weight:700}fieldset.group>legend{float:left;width:100%}fieldset.group>legend+*{clear:both}details.group>summary{cursor:pointer;justify-content:space-between;align-items:center;margin-bottom:0;list-style:none;display:flex}details.group>summary::-webkit-details-marker{display:none}details.group>summary:after{content:"+";color:var(--mute);font-size:18px;font-weight:500;line-height:1}details.group[open]>summary:after{content:"–"}details.group[open]>summary{margin-bottom:12px}summary .hint{font-family:var(--font-body);color:var(--mute);margin-left:8px;font-size:13px;font-weight:400}.fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}@media (width<=520px){.fields{grid-template-columns:minmax(0,1fr)}}.full{grid-column:1/-1}label{color:var(--mute);gap:4px;min-width:0;font-size:13px;font-weight:600;display:grid}input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{font:inherit;color:var(--fg);background:var(--field);border:1px solid var(--line);border-radius:4px;width:100%;min-width:0;padding:8px 10px;font-size:15px}textarea{resize:vertical;min-height:64px}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}.swatches{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.sw{border:2px solid var(--surface);width:28px;height:28px;box-shadow:0 0 0 1px var(--line);cursor:pointer;border-radius:50%;padding:0}.sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--fg)}input[type=color]{border:1px solid var(--line);background:var(--field);cursor:pointer;border-radius:4px;width:40px;height:32px;padding:2px}.hex{font-family:var(--font-mono);color:var(--mute);font-size:13px}input[type=range]{width:100%;accent-color:var(--acc)}.file-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.note{color:var(--mute);margin:0;font-size:13px;font-weight:400}.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:4px;align-items:center;gap:6px;padding:9px 14px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{border-color:var(--acc)}.btn.primary{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}.btn.primary:hover{filter:brightness(1.08)}.btn.small{padding:6px 10px;font-size:13px}.btn.ghost{color:var(--mute);border-color:#0000}.form-foot{border-top:1px solid var(--line);flex-wrap:wrap;gap:8px;padding:14px 20px 10px;display:flex}.preview-col{gap:16px;min-width:0;display:grid}.tpl{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.check{color:var(--fg);cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.check input{width:18px;height:18px;accent-color:var(--acc)}@media (width<=520px){.tpl{grid-template-columns:repeat(2,minmax(0,1fr))}}.tpl button{font:inherit;text-align:left;background:var(--surface);border:1px solid var(--line);cursor:pointer;color:var(--fg);border-radius:6px;gap:6px;padding:10px;display:grid}.tpl button[aria-pressed=true]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc);background:var(--accent-soft)}.tpl b{font-size:16px;font-family:var(--font-display);font-weight:700}.tpl span{color:var(--mute);font-size:12px;line-height:1.3}.glyph{align-items:center;gap:4px;height:26px;display:flex}.glyph i{background:var(--line);border-radius:2px;display:block}.tpl button[aria-pressed=true] .glyph i.a{background:var(--acc)}.mail{background:var(--canvas);border:1px solid var(--line);border-radius:6px;overflow:hidden}.mail-head{border-bottom:1px solid var(--canvas-line);color:#6b6b7b;gap:2px;padding:10px 16px;font-family:Arial,Helvetica,sans-serif;font-size:13px;display:grid}.mail-head b{color:#2b2b38;font-weight:600}.mail-body{color:var(--canvas-fg);padding:18px 18px 22px;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;overflow-x:auto}.mail-body p{margin:0 0 12px}#sig{margin-top:6px}.example-chip{letter-spacing:.06em;text-transform:uppercase;color:var(--warn);vertical-align:middle;border:1px solid;border-radius:999px;margin-left:8px;padding:1px 8px;font-size:11px;font-weight:700;display:inline-block}.actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.meter{color:var(--mute);gap:4px;font-size:13px;display:grid}.meter .bar{background:var(--line);border-radius:3px;height:6px;overflow:hidden}.meter .bar i{background:var(--ok);width:0;height:100%;transition:width .2s;display:block}.meter.warn .bar i{background:var(--warn)}.meter.bad .bar i{background:var(--bad)}.meter.bad .msg{color:var(--bad)}.meter .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.source{display:none}.source.open{display:block}.source textarea{font-family:var(--font-mono);min-height:140px;font-size:12px}.install{padding:16px 18px}.tabs{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:4px;margin-bottom:12px;display:flex}.tabs button{font:inherit;color:var(--mute);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:6px 10px;font-size:14px;font-weight:600}.tabs button[aria-selected=true]{color:var(--fg);border-bottom-color:var(--acc)}.install ol{gap:4px;margin:0;padding-left:20px;font-size:14px;display:grid}.install strong{color:var(--fg)}.lead{background:var(--accent-soft);border-color:#0000;gap:10px;padding:18px;display:grid}.lead h3{font-size:17px}.lead p{color:var(--fg);max-width:60ch;margin:0;font-size:14px}.lead-actions{flex-wrap:wrap;gap:8px;display:flex}.lead .checks{flex-wrap:wrap;gap:6px;display:flex}.lead .checks span{font-family:var(--font-mono);border:1px solid var(--line);background:var(--surface);color:var(--mute);border-radius:4px;padding:2px 8px;font-size:12px}.toast{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);background:var(--fg);color:var(--bg);opacity:0;pointer-events:none;border-radius:4px;max-width:calc(100vw - 32px);padding:10px 16px;font-size:14px;font-weight:600;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%)translateY(20px)}.layouts{gap:4px 0;margin:0;display:grid}.layouts dt{margin-top:8px;font-weight:600}.layouts dd{color:var(--mute);margin:0}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}@media (prefers-reduced-motion:reduce){.toast,.meter .bar i{transition:none}}.sr{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}