/* generated by design-sources/port/gen_designer.py — do not edit */
:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app){--ff-head:var(--st-ff-head);--ff-body:var(--st-ff-body)}
:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec,:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec-vars,:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec--light{--s-bg:var(--st-bg);--s-fg:var(--st-text);--s-muted:var(--st-muted);--s-accent:var(--st-primary);--s-accent-fg:var(--st-on);--s-soft:var(--st-secondary);--s-line:var(--st-line);--s-card:var(--st-surface);--s-star:var(--st-gold)}
:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec--warm{--s-bg:var(--st-secondary);--s-card:var(--st-surface);--s-soft:color-mix(in srgb,var(--st-primary) 14%,var(--st-secondary))}
:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec--dark,:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .zone--dark{--s-bg:var(--st-dk-bg);--s-fg:var(--st-dk-fg);--s-muted:var(--st-dk-muted);--s-accent:var(--st-dk-accent);--s-accent-fg:var(--st-dk-accent-fg);--s-soft:var(--st-dk-soft);--s-line:var(--st-dk-line);--s-card:var(--st-dk-card);--s-star:var(--st-dk-accent)}
/* small accent text (the eyebrow over a section title) takes --st-eb: the theme's primary only where it clears 4.5:1 on every ground, else its text colour; the inverted panel keeps its own accent */
:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec:not(.sec--dark) .zone:not(.zone--dark) .xt-k-e{color:var(--st-eb)}
:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec h1,:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec h2,:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec h3,:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec .h{font-family:var(--ff-head)}
:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .sec .btn{border-radius:var(--st-r-sm);box-shadow:none}
:root:has(meta[name="sv-theme"][data-btn="pill"]) :is(.sd-site,.sd-app) .sec .btn{border-radius:999px}
:root:has(meta[name="sv-theme"][data-btn="brutal"]) :is(.sd-site,.sd-app) .sec .btn{border:3px solid var(--s-fg);border-radius:0;box-shadow:4px 4px 0 var(--s-fg)}
:root:has(meta[name="sv-theme"][data-btn="outline"]) :is(.sd-site,.sd-app) .sec .btn{background:transparent;color:var(--s-fg);border:2px solid var(--s-fg)}
:root:has(meta[name="sv-theme"][data-btn="underline"]) :is(.sd-site,.sd-app) .sec .btn{background:transparent;color:var(--s-fg);border:0;border-bottom:2px solid var(--s-fg);border-radius:0;padding-inline:2px}
:root:has(meta[name="sv-theme"][data-btn="gradient"]) :is(.sd-site,.sd-app) .sec .btn{background:linear-gradient(120deg,var(--st-g1),var(--st-g2));color:var(--st-on);border:0}
:root:has(meta[name="sv-theme"][data-btn="neon"]) :is(.sd-site,.sd-app) .sec .btn{box-shadow:0 0 14px color-mix(in srgb,var(--s-accent) 60%,transparent)}
:root:has(meta[name="sv-theme"][data-btn="clay"]) :is(.sd-site,.sd-app) .sec .btn{border-radius:max(var(--st-r),18px);box-shadow:var(--st-sh-b)}
:root:has(meta[name="sv-theme"][data-btn="neu"]) :is(.sd-site,.sd-app) .sec .btn{border-radius:max(var(--st-r),14px);box-shadow:var(--st-sh-b)}
:root:has(meta[name="sv-theme"][data-btn="glass"]) :is(.sd-site,.sd-app) .sec .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--st-sh-b)}
:root:has(meta[name="sv-theme"][data-btn="stamp"]) :is(.sd-site,.sd-app) .sec .btn{border-radius:4px;transform:rotate(-1deg)}
:root:has(meta[name="sv-theme"][data-btn="bevel"]) :is(.sd-site,.sd-app) .sec .btn{border-radius:0;border:2px solid;border-color:#fff #555 #555 #fff;box-shadow:1px 1px 0 #000}
:root:has(meta[name="sv-theme"][data-card="brutal"]) :is(.sd-site,.sd-app) .sec [class*="card"]{border:3px solid var(--s-fg);border-radius:0;box-shadow:5px 5px 0 var(--s-fg)}
:root:has(meta[name="sv-theme"][data-card="outline"]) :is(.sd-site,.sd-app) .sec [class*="card"]{box-shadow:none;border:1px solid var(--s-line)}
:root:has(meta[name="sv-theme"][data-card="elevated"]) :is(.sd-site,.sd-app) .sec [class*="card"]{box-shadow:var(--st-sh)}
:root:has(meta[name="sv-theme"]) :is(.sd-site,.sd-app) .ph:not(.ph--real){background:radial-gradient(circle at 70% 24%,color-mix(in srgb,var(--s-bg) 80%,#fff) 0 12%,transparent 12.5%),radial-gradient(120% 80% at 50% 112%,color-mix(in srgb,var(--s-accent) 70%,#000) 0 38%,transparent 38.5%),linear-gradient(170deg,color-mix(in srgb,var(--s-accent) 22%,var(--s-bg)) 0%,color-mix(in srgb,var(--s-accent) 55%,var(--s-bg)) 100%)}
/* per box: a theme preview card */

.sv-dress :is(.sd-site,.sd-app){--ff-head:var(--st-ff-head);--ff-body:var(--st-ff-body)}
.sv-dress :is(.sd-site,.sd-app) .sec,.sv-dress :is(.sd-site,.sd-app) .sec-vars,.sv-dress :is(.sd-site,.sd-app) .sec--light{--s-bg:var(--st-bg);--s-fg:var(--st-text);--s-muted:var(--st-muted);--s-accent:var(--st-primary);--s-accent-fg:var(--st-on);--s-soft:var(--st-secondary);--s-line:var(--st-line);--s-card:var(--st-surface);--s-star:var(--st-gold)}
.sv-dress :is(.sd-site,.sd-app) .sec--warm{--s-bg:var(--st-secondary);--s-card:var(--st-surface);--s-soft:color-mix(in srgb,var(--st-primary) 14%,var(--st-secondary))}
.sv-dress :is(.sd-site,.sd-app) .sec--dark,.sv-dress :is(.sd-site,.sd-app) .zone--dark{--s-bg:var(--st-dk-bg);--s-fg:var(--st-dk-fg);--s-muted:var(--st-dk-muted);--s-accent:var(--st-dk-accent);--s-accent-fg:var(--st-dk-accent-fg);--s-soft:var(--st-dk-soft);--s-line:var(--st-dk-line);--s-card:var(--st-dk-card);--s-star:var(--st-dk-accent)}

.sv-dress :is(.sd-site,.sd-app) .sec:not(.sec--dark) .zone:not(.zone--dark) .xt-k-e{color:var(--st-eb)}
.sv-dress :is(.sd-site,.sd-app) .sec h1,.sv-dress :is(.sd-site,.sd-app) .sec h2,.sv-dress :is(.sd-site,.sd-app) .sec h3,.sv-dress :is(.sd-site,.sd-app) .sec .h{font-family:var(--ff-head)}
.sv-dress :is(.sd-site,.sd-app) .sec .btn{border-radius:var(--st-r-sm);box-shadow:none}
.sv-dress[data-btn="pill"] :is(.sd-site,.sd-app) .sec .btn{border-radius:999px}
.sv-dress[data-btn="brutal"] :is(.sd-site,.sd-app) .sec .btn{border:3px solid var(--s-fg);border-radius:0;box-shadow:4px 4px 0 var(--s-fg)}
.sv-dress[data-btn="outline"] :is(.sd-site,.sd-app) .sec .btn{background:transparent;color:var(--s-fg);border:2px solid var(--s-fg)}
.sv-dress[data-btn="underline"] :is(.sd-site,.sd-app) .sec .btn{background:transparent;color:var(--s-fg);border:0;border-bottom:2px solid var(--s-fg);border-radius:0;padding-inline:2px}
.sv-dress[data-btn="gradient"] :is(.sd-site,.sd-app) .sec .btn{background:linear-gradient(120deg,var(--st-g1),var(--st-g2));color:var(--st-on);border:0}
.sv-dress[data-btn="neon"] :is(.sd-site,.sd-app) .sec .btn{box-shadow:0 0 14px color-mix(in srgb,var(--s-accent) 60%,transparent)}
.sv-dress[data-btn="clay"] :is(.sd-site,.sd-app) .sec .btn{border-radius:max(var(--st-r),18px);box-shadow:var(--st-sh-b)}
.sv-dress[data-btn="neu"] :is(.sd-site,.sd-app) .sec .btn{border-radius:max(var(--st-r),14px);box-shadow:var(--st-sh-b)}
.sv-dress[data-btn="glass"] :is(.sd-site,.sd-app) .sec .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--st-sh-b)}
.sv-dress[data-btn="stamp"] :is(.sd-site,.sd-app) .sec .btn{border-radius:4px;transform:rotate(-1deg)}
.sv-dress[data-btn="bevel"] :is(.sd-site,.sd-app) .sec .btn{border-radius:0;border:2px solid;border-color:#fff #555 #555 #fff;box-shadow:1px 1px 0 #000}
.sv-dress[data-card="brutal"] :is(.sd-site,.sd-app) .sec [class*="card"]{border:3px solid var(--s-fg);border-radius:0;box-shadow:5px 5px 0 var(--s-fg)}
.sv-dress[data-card="outline"] :is(.sd-site,.sd-app) .sec [class*="card"]{box-shadow:none;border:1px solid var(--s-line)}
.sv-dress[data-card="elevated"] :is(.sd-site,.sd-app) .sec [class*="card"]{box-shadow:var(--st-sh)}
.sv-dress :is(.sd-site,.sd-app) .ph:not(.ph--real){background:radial-gradient(circle at 70% 24%,color-mix(in srgb,var(--s-bg) 80%,#fff) 0 12%,transparent 12.5%),radial-gradient(120% 80% at 50% 112%,color-mix(in srgb,var(--s-accent) 70%,#000) 0 38%,transparent 38.5%),linear-gradient(170deg,color-mix(in srgb,var(--s-accent) 22%,var(--s-bg)) 0%,color-mix(in srgb,var(--s-accent) 55%,var(--s-bg)) 100%)}