.su{--su-serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;--su-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--su-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--bg:#faf8f4;--fg:#1b1815;--fg-dim:#625b52;--fg-faint:#8d867c;--line:rgba(27,24,21,0.14);--line-soft:rgba(27,24,21,0.08);--raise:#ffffff;--accent:#b5502e;--accent-soft:rgba(181,80,46,0.1);--warn:#b5502e;max-width:960px;margin:0 auto;padding:0 24px 96px;background:var(--bg);color:var(--fg);font-family:var(--su-sans);font-size:16px;line-height:1.6}@media (prefers-color-scheme:dark){.su{--bg:#131211;--fg:#eae6df;--fg-dim:#a49c91;--fg-faint:#79726a;--line:rgba(234,230,223,0.16);--line-soft:rgba(234,230,223,0.08);--raise:#1c1a18;--accent:#e2916e;--accent-soft:rgba(226,145,110,0.14);--warn:#e2916e}}body:has(.su){background:var(--bg,#faf8f4)}body:has(.su),html:has(.su){overflow:auto;height:auto;cursor:auto}.su-head{padding:72px 0 32px;border-bottom:1px solid var(--line)}.su-eyebrow{margin:0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}.su h1{font-family:var(--su-serif);font-weight:400;font-size:clamp(40px,8vw,64px);letter-spacing:-.01em;line-height:1;margin:14px 0 0}.su-lede{color:var(--fg-dim);font-size:18px;max-width:66ch;margin:18px 0 0}.su-section{margin-top:56px}.su-section>h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line)}.su-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:20px;gap:20px}.su-facts h3{font-family:var(--su-serif);font-weight:400;font-size:21px;margin:0 0 6px}.su-facts p{margin:0;color:var(--fg-dim);font-size:15px}.su-build{display:grid;grid-template-columns:1.4fr 1fr;grid-gap:26px;gap:26px;align-items:start}.su-fields{display:flex;flex-direction:column;gap:24px;min-width:0}.su-field{border:none;margin:0;padding:0;min-width:0}.su-field legend,.su-label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:10px;padding:0}.su-row{display:flex;align-items:center;gap:14px}.su-row input[type=range]{flex:1 1;accent-color:var(--accent);min-width:0}.su-out{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:14px;color:var(--fg);min-width:8ch;text-align:right}.su-choices{display:flex;gap:8px;flex-wrap:wrap}.su-choice{font:inherit;font-size:14px;padding:7px 14px;border:1px solid var(--line);border-radius:3px;background:var(--raise);color:var(--fg-dim);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.su-choice:hover{border-color:var(--fg-faint);color:var(--fg)}.su-choice[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}.su-choice:focus-visible,.su-copy:focus-visible,.su-preview:focus-visible,.su-token-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.su-hint{margin:10px 0 0;font-size:13.5px;color:var(--fg-faint);max-width:60ch}.su-textarea{width:100%;min-height:220px;resize:vertical;font-family:var(--su-mono);font-size:14.5px;line-height:1.7;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--raise);color:var(--fg)}.su-textarea:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}.su-token-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.su-token-btn{font:inherit;font-family:var(--su-mono);font-size:12.5px;padding:5px 10px;border:1px dashed var(--line);border-radius:3px;background:transparent;color:var(--fg-dim);cursor:pointer}.su-token-btn:hover{border-color:var(--accent);color:var(--fg)}.su-meter{margin-top:12px;border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}.su-meter-row{display:flex;align-items:baseline;gap:10px;padding:5px 10px;font-family:var(--su-mono);font-size:12.5px;border-bottom:1px solid var(--line-soft)}.su-meter-row:last-child{border-bottom:none}.su-meter-page{flex:0 0 auto;color:var(--fg-faint);font-family:var(--su-sans);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}.su-meter-text{flex:1 1;min-width:0;overflow-wrap:anywhere;color:var(--fg-dim)}.su-meter-count{flex:0 0 auto;color:var(--fg-faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.su-meter-row[data-over=true] .su-meter-count{color:var(--warn);font-weight:600}.su-meter-row[data-over=true]{background:var(--accent-soft)}.su-meter-empty{padding:10px;color:var(--fg-faint);font-size:13px}.su-swatch-row{display:flex;align-items:center;gap:10px;margin-top:10px}.su-swatch{width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:4px;background:none;cursor:pointer}.su-swatch-value{font-family:var(--su-mono);font-size:13px;color:var(--fg-dim)}.su-charset{font-family:var(--su-mono);font-size:15px;letter-spacing:.12em;color:var(--fg);border:1px solid var(--line-soft);border-radius:4px;padding:12px 14px;overflow-wrap:anywhere}.su-charset,.su-result{background:var(--raise)}.su-result{position:-webkit-sticky;position:sticky;top:24px;border:1px solid var(--line);border-radius:5px;padding:20px;min-width:0}.su-result h2{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 12px}.su-result h2+.su-preview-frame{margin-top:0}.su-url{display:block;font-family:var(--su-mono);font-size:12.5px;line-height:1.6;background:var(--bg);border:1px solid var(--line-soft);padding:10px 12px;overflow-wrap:anywhere;margin-bottom:12px}.su-copy,.su-preview,.su-url{color:var(--fg);border-radius:3px}.su-copy,.su-preview{font:inherit;font-size:14px;padding:8px 16px;border:1px solid var(--line);background:var(--raise);cursor:pointer;text-decoration:none;display:inline-block;margin-right:8px}.su-preview{border-color:var(--accent);background:var(--accent-soft)}.su-preview-frame{aspect-ratio:16/9;width:100%;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#0b0b0b;margin-bottom:10px}.su-preview-frame iframe{width:100%;height:100%;border:0;display:block}.su-preview-note{margin-top:0;margin-bottom:18px}.su-table-scroll{overflow-x:auto}.su-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:620px}.su-table th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);padding:0 14px 10px 0;border-bottom:1px solid var(--line)}.su-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line-soft);color:var(--fg-dim);vertical-align:top}.su code{font-family:var(--su-mono);font-size:.88em;background:var(--accent-soft);border-radius:2px;padding:1px 5px;color:var(--fg)}.su-foot{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);color:var(--fg-faint);font-size:14px}.su-foot p{margin:0;max-width:68ch}@media (max-width:720px){.su-build{grid-template-columns:1fr}.su-result{position:static}}@media (prefers-reduced-motion:reduce){.su-choice{transition:none}}