/* Stagepass Website · Layout-System v1
   Alle Farben, Schriften, Radien und Abstände aus tokens.css / site-tokens.css.
   Reihenfolge der Einbindung: fonts.css, tokens.css, site-tokens.css, site.css. */

/* ---------- Reset und Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--sp-bg);color:var(--sp-ink);font-family:var(--sp-font-sans);font-size:var(--sp-text-base);line-height:var(--sp-leading-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 var(--sp-space-4)}
h1,h2,h3,h4{margin:0;font-weight:var(--sp-weight-bold);letter-spacing:var(--sp-tracking-heading);line-height:var(--sp-leading-heading);text-wrap:balance}
code,kbd,pre{font-family:var(--sp-font-mono)}
:focus-visible{outline:2px solid var(--sp-focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--sp-live-soft);color:#17171B}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--sp-space-4);top:-60px;z-index:50;background:var(--sp-ink);color:var(--sp-on-ink);padding:10px 14px;border-radius:var(--sp-radius-sm);text-decoration:none;font-weight:var(--sp-weight-medium)}
.skip:focus{top:var(--sp-space-3)}

/* Logo und andere Bildpaare: Light/Dark */
.od{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ol{display:none}:root:not([data-theme=light]) .od{display:block}}
:root[data-theme=dark] .ol{display:none}
:root[data-theme=dark] .od{display:block}

/* ---------- Container und Typo-Skala ---------- */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--sp-space-6)}
.wrap-narrow{max-width:800px}
.t-display{font-size:clamp(40px,6.2vw,var(--sp-text-5xl));line-height:var(--sp-leading-tight);letter-spacing:var(--sp-tracking-display)}
.t-h1{font-size:clamp(36px,4.6vw,var(--sp-text-4xl));line-height:1.08;letter-spacing:var(--sp-tracking-display)}
.t-h2{font-size:clamp(28px,3.4vw,var(--sp-text-3xl));letter-spacing:var(--sp-tracking-heading)}
.t-h3{font-size:var(--sp-text-lg)}
.t-lead{font-size:clamp(var(--sp-text-md),1.6vw,var(--sp-text-lg));color:var(--sp-muted);line-height:1.5;max-width:62ch}
.t-small{font-size:var(--sp-text-sm);color:var(--sp-muted)}
.kicker{display:inline-flex;align-items:center;gap:var(--sp-space-2);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);font-weight:var(--sp-weight-medium);letter-spacing:var(--sp-tracking-label);text-transform:uppercase;color:var(--sp-live-text);margin:0 0 var(--sp-space-4)}
.gt{background:var(--sp-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--sp-font-mono)}

/* Tally-Licht (Marke): an = Verlauf, aus = hohl */
.tl{display:inline-block;width:18px;height:7px;border-radius:4px;background:var(--sp-grad-light);box-shadow:0 0 10px rgba(255,69,58,.45);flex:none}
.tl.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--sp-line-strong)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--sp-bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--sp-line)}
.hdr .wrap{display:flex;align-items:center;gap:var(--sp-space-5);height:68px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:28px;width:auto}
.nav{display:flex;gap:var(--sp-space-1);margin-left:var(--sp-space-4)}
.nav a{padding:8px 12px;border-radius:var(--sp-radius-sm);text-decoration:none;font-size:var(--sp-text-sm);font-weight:var(--sp-weight-medium);color:var(--sp-muted)}
.nav a:hover{color:var(--sp-ink);background:var(--sp-surface)}
.nav a[aria-current=page]{color:var(--sp-ink);box-shadow:inset 0 -2px 0 var(--sp-live)}
.hdr-end{display:flex;align-items:center;gap:var(--sp-space-2);margin-left:auto}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-space-2);height:38px;min-width:38px;padding:0 10px;border:1px solid var(--sp-line);border-radius:var(--sp-radius-pill);background:var(--sp-surface);color:var(--sp-ink);font:inherit;font-size:var(--sp-text-sm);font-weight:var(--sp-weight-medium);text-decoration:none;cursor:pointer}
.iconbtn:hover{border-color:var(--sp-line-strong)}
.iconbtn svg{width:18px;height:18px}
/* ---------- Theme toggle "A Spot": capsule plus circle reveal (logic: assets/js/theme.js) ---------- */
:root{--cap:#121215;--cap-on:0}
:root[data-theme=dark]{--cap:#FFFFFF;--cap-on:1}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--cap:#FFFFFF;--cap-on:1}}
[data-theme-toggle] .cap{width:16px;height:16px;overflow:visible}
[data-theme-toggle] .cap-body{fill:var(--cap)}
[data-theme-toggle] .cap-hole{fill:var(--sp-surface)}
[data-theme-toggle] .cap-on,[data-theme-toggle] .cap-halo{opacity:var(--cap-on)}
.theme:focus-visible{border-radius:var(--sp-radius-pill);outline-offset:2px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(sp-fx),::view-transition-old(sp-fx),::view-transition-new(sp-fx){animation:none}
#sp-fx{position:fixed;left:0;top:0;z-index:100;display:none;pointer-events:none;border-radius:50%;view-transition-name:sp-fx;background:radial-gradient(closest-side,transparent calc(100% - 46px),rgba(255,69,58,.10) calc(100% - 22px),rgba(255,138,61,.42) calc(100% - 3px),rgba(255,69,58,0) 100%)}
.menu{display:none;position:relative}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:46px;min-width:220px;padding:var(--sp-space-2);background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);box-shadow:0 14px 32px -12px rgba(255,69,58,.55)}
.menu-panel a{display:block;padding:10px 12px;border-radius:var(--sp-radius-sm);text-decoration:none;font-weight:var(--sp-weight-medium)}
.menu-panel a:hover{background:var(--sp-bg)}

/* ---------- Buttons, Befehl, Chips ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-space-2);height:48px;padding:0 20px;border-radius:var(--sp-radius-pill);font-weight:var(--sp-weight-bold);font-size:var(--sp-text-base);text-decoration:none;border:1px solid transparent;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--sp-ink);color:var(--sp-on-ink)}
.btn-primary:hover{box-shadow:0 0 0 4px var(--sp-live-soft)}
.btn-ghost{border-color:var(--sp-line-strong);color:var(--sp-ink);background:transparent}
.btn-ghost:hover{background:var(--sp-surface)}
.cmd{display:inline-flex;align-items:center;gap:var(--sp-space-3);height:48px;max-width:100%;padding:0 6px 0 16px;border:1px solid var(--sp-line);border-radius:var(--sp-radius-pill);background:var(--sp-surface);font-family:var(--sp-font-mono);font-size:var(--sp-text-sm)}
.cmd code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding:0;border:0;background:none;font-size:inherit}
.cmd .pr{color:var(--sp-live-text);user-select:none}
.copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:var(--sp-radius-pill);background:transparent;color:var(--sp-muted);font:inherit;font-family:var(--sp-font-sans);font-size:var(--sp-text-xs);font-weight:var(--sp-weight-medium);cursor:pointer;flex:none}
.copy:hover{color:var(--sp-ink);background:var(--sp-bg)}
.copy svg{width:16px;height:16px}
.copy:focus-visible{border-radius:var(--sp-radius-pill)}
.toast{position:fixed;left:50%;bottom:var(--sp-space-6);z-index:60;transform:translate(-50%,8px);padding:9px 18px;border:0;border-radius:var(--sp-radius-pill);background:var(--sp-grad-light);color:#FFFFFF;font-family:var(--sp-font-mono);font-size:var(--sp-text-sm);font-weight:var(--sp-weight-bold);letter-spacing:.01em;line-height:1.4;white-space:nowrap;box-shadow:0 0 14px 2px rgba(255,138,61,.55),0 0 36px 6px rgba(255,69,58,.28),inset 0 1px 0 rgba(255,255,255,.22);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.toast[data-show]{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s ease,transform .18s ease,visibility 0s}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--sp-line);border-radius:var(--sp-radius-pill);background:var(--sp-surface);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);color:var(--sp-muted);white-space:nowrap}
.chip strong{color:var(--sp-ink);font-weight:var(--sp-weight-medium)}
.chip-live{color:var(--sp-live-text);border-color:var(--sp-live-soft)}
/* Platzhalter: gestrichelt, Monospace, immer mit Text */
.ph{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px dashed var(--sp-line-strong);border-radius:var(--sp-radius-sm);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);color:var(--sp-muted);background:transparent;white-space:normal}
.ph::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;flex:none}

/* ---------- Sektionen und Karten ---------- */
.section{padding:var(--sp-space-9) 0}
.section+.section{border-top:1px solid var(--sp-line)}
.sec-head{max-width:720px;margin-bottom:var(--sp-space-7)}
.sec-head .t-lead{margin-top:var(--sp-space-4)}
.grid{display:grid;gap:var(--sp-space-5)}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);padding:var(--sp-space-6)}
.card h3{font-size:var(--sp-text-md);margin-bottom:var(--sp-space-2)}
.card p{color:var(--sp-muted);margin:0}
.card p+p,.card p+pre,.card pre+p{margin-top:var(--sp-space-4)}
.ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--sp-radius-md);background:var(--sp-bg);border:1px solid var(--sp-line);color:var(--sp-ink);margin-bottom:var(--sp-space-4)}
.ic svg{width:24px;height:24px}
.ic.live{color:var(--sp-live-text)}
.num{font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);letter-spacing:var(--sp-tracking-label);color:var(--sp-live-text);margin-bottom:var(--sp-space-3)}
.card-link{text-decoration:none;display:block;transition:border-color .15s}
.card-link:hover{border-color:var(--sp-line-strong)}
.card-link .arr{display:inline-block;margin-top:var(--sp-space-4);font-weight:var(--sp-weight-bold);font-size:var(--sp-text-sm)}

/* ---------- Code ---------- */
.code{position:relative;margin:var(--sp-space-5) 0;border:1px solid var(--sp-line);border-radius:var(--sp-radius-md);background:var(--sp-surface);overflow:hidden}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-space-3);height:40px;padding:0 4px 0 14px;border-bottom:1px solid var(--sp-line);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);color:var(--sp-muted)}
.code-bar .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.code pre{margin:0;padding:14px 16px;overflow-x:auto;font-size:13.5px;line-height:1.65;tab-size:2}
.code pre code{white-space:pre}
.tok-c{color:var(--sp-muted)}
.tok-k{color:var(--sp-live-text)}
.tok-s{color:var(--sp-ink);font-weight:var(--sp-weight-medium)}
.tok-p{color:var(--sp-live-text);user-select:none}
:not(pre)>code{font-size:.9em;padding:1px 6px;border-radius:5px;background:var(--sp-surface);border:1px solid var(--sp-line);white-space:nowrap}
/* Long snippets (class set at build time, see scripts/lib/html-transforms.mjs) may wrap so they never overflow narrow containers. */
:not(pre)>code.code-long{white-space:normal;overflow-wrap:anywhere}
:is(h1,h2,h3,h4)>code{white-space:normal;overflow-wrap:anywhere}
.cmd code.code-long,.state code.code-long{white-space:nowrap;overflow-wrap:normal}

/* ---------- Hinweise (Callouts): Form + Label, nie nur Farbe ---------- */
.callout{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--sp-space-3);margin:var(--sp-space-5) 0;padding:var(--sp-space-4) var(--sp-space-5);border:1px solid var(--sp-line);border-left-width:4px;border-radius:var(--sp-radius-md);background:var(--sp-surface)}
.callout svg{width:22px;height:22px;margin-top:1px}
.callout .ct{display:block;font-weight:var(--sp-weight-bold);margin-bottom:2px}
.callout p{margin:0;color:var(--sp-ink)}
.callout p+p{margin-top:var(--sp-space-2)}
.callout.note{border-left-color:var(--sp-ink)}
.callout.tip{border-left-color:var(--sp-live)}
.callout.tip svg{color:var(--sp-live-text)}
.callout.warn{border-left-color:var(--sp-warn)}
.callout.warn svg,.callout.warn .ct{color:var(--sp-warn)}
.callout.danger{border-left-color:var(--sp-error);background:var(--sp-error-tint)}
.callout.danger svg,.callout.danger .ct{color:var(--sp-error)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .callout.danger{background:color-mix(in srgb,var(--sp-error) 14%,var(--sp-surface))}}
:root[data-theme=dark] .callout.danger{background:color-mix(in srgb,var(--sp-error) 14%,var(--sp-surface))}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface)}
table{width:100%;border-collapse:collapse;font-size:var(--sp-text-sm)}
th,td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--sp-line)}
tr:last-child td{border-bottom:0}
th{font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);font-weight:var(--sp-weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--sp-muted);background:var(--sp-bg)}
td.row-h{font-weight:var(--sp-weight-bold)}
tr.us td{background:color-mix(in srgb,var(--sp-live-soft) 18%,var(--sp-surface))}

/* ---------- Figur mit Platzhalter-Bild ---------- */
.fig{margin:0}
.fig .frame{border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);overflow:hidden;background:var(--sp-surface)}
.fig figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-space-2);margin-top:var(--sp-space-3);font-size:var(--sp-text-sm);color:var(--sp-muted)}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--sp-line);padding:var(--sp-space-8) 0 var(--sp-space-7);margin-top:var(--sp-space-9)}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:var(--sp-space-6)}
.ftr-grid>*{min-width:0}
.ftr .brand img{height:26px}
.ftr p{color:var(--sp-muted);font-size:var(--sp-text-sm);margin-top:var(--sp-space-4);max-width:34ch}
.ftr h2{font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);font-weight:var(--sp-weight-medium);letter-spacing:var(--sp-tracking-label);text-transform:uppercase;color:var(--sp-muted);margin-bottom:var(--sp-space-3)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-space-2);font-size:var(--sp-text-sm)}
.ftr ul a{text-decoration:none}
.ftr ul a:hover{text-decoration:underline;text-underline-offset:3px}
.fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-space-3);margin-top:var(--sp-space-7);padding-top:var(--sp-space-5);border-top:1px solid var(--sp-line);font-size:var(--sp-text-xs);color:var(--sp-muted)}

/* =========================================================
   Seiten
   ========================================================= */

/* ---------- Home: Hero ---------- */
.hero{position:relative;padding:var(--sp-space-9) 0 var(--sp-space-8);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto 40%;height:720px;background:radial-gradient(closest-side,color-mix(in srgb,var(--sp-live-2) 22%,transparent),transparent);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-space-8);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 10px;border:1px solid var(--sp-line);border-radius:var(--sp-radius-pill);background:var(--sp-surface);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);color:var(--sp-muted);margin-bottom:var(--sp-space-5)}
.eyebrow b{color:var(--sp-live-text);font-weight:var(--sp-weight-medium);letter-spacing:.08em}
.hero h1{margin-bottom:var(--sp-space-5)}
.cta{display:flex;flex-wrap:wrap;gap:var(--sp-space-3);margin-top:var(--sp-space-6)}
.meta-row{display:flex;flex-wrap:wrap;gap:var(--sp-space-2);margin-top:var(--sp-space-5)}

/* Browserfenster mit Platzhalter-Flaggenbild */
.win{position:relative;border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface);box-shadow:0 40px 80px -40px rgba(23,23,27,.35);overflow:hidden}
.chr{display:flex;align-items:center;gap:var(--sp-space-3);height:44px;padding:0 14px;border-bottom:1px solid var(--sp-line)}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--sp-line);display:block}
.url{flex:1;min-width:0;height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;border-radius:var(--sp-radius-pill);background:var(--sp-bg);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);color:var(--sp-muted);white-space:nowrap;overflow:hidden}
.url b{color:var(--sp-live-text);font-weight:var(--sp-weight-medium)}
.url svg{width:13px;height:13px;flex:none}
.win img{width:100%;height:auto}
.win .ph{position:absolute;left:12px;top:52px;background:var(--sp-surface)}
.term{position:relative;margin:-56px 0 0 -40px;width:min(420px,92%);border-radius:var(--sp-radius-md);background:#17171B;color:#F4F2F0;font-family:var(--sp-font-mono);font-size:12.5px;line-height:1.7;padding:14px 16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border:1px solid #27272C}
.term .p{color:#FF8A3D}
.term .o{color:#9C9799}
.term .ok{color:#FFC4A8}
.hero-vis{position:relative;min-width:0}

/* How-it-works-Grafik: Desktop/Mobil */
.hiw{margin:0}
.hiw .m{display:none}
.hiw svg{width:100%;height:auto}

/* Flaggen-Zustände */
.states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-space-5)}
.state{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);overflow:hidden}
.state .shot{position:relative;aspect-ratio:1024/478;background:var(--sp-bg);border-bottom:1px solid var(--sp-line);overflow:hidden}
.state .shot img{position:absolute;top:0;right:0;width:200%;max-width:none;height:auto}
.state .shot .ph{position:absolute;left:10px;bottom:10px;background:var(--sp-surface)}
.state .shot.none{display:flex;align-items:center;justify-content:center;color:var(--sp-muted);font-family:var(--sp-font-mono);font-size:var(--sp-text-sm)}
.state .body{padding:var(--sp-space-5)}
.state h3{display:flex;align-items:center;gap:var(--sp-space-2);font-size:var(--sp-text-md);margin-bottom:var(--sp-space-2)}
.state h3 svg{width:22px;height:22px}
.state p{margin:0;color:var(--sp-muted);font-size:var(--sp-text-sm)}
.state code{font-size:12px;white-space:nowrap}

/* Built-Streifen */
.built{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-space-6);align-items:center;padding:var(--sp-space-6);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface)}
.built img{width:249px;height:60px}
.built p{margin:0;font-size:var(--sp-text-md)}
.built .t-small{display:block;margin-top:4px}
.built h2{grid-column:1/-1;margin:0}

/* Abschluss-Band */
.band{position:relative;overflow:hidden;border-radius:var(--sp-radius-lg);background:var(--sp-ink);color:var(--sp-on-ink);padding:var(--sp-space-8);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-space-6);align-items:center}
.band::after{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;background:radial-gradient(closest-side,rgba(255,138,61,.35),transparent);pointer-events:none}
.band h2{color:inherit}
.band p{color:color-mix(in srgb,var(--sp-on-ink) 70%,transparent);margin:var(--sp-space-3) 0 0}
.band .btn-primary{background:var(--sp-on-ink);color:var(--sp-ink);position:relative;z-index:1}

/* ---------- Seitenkopf für Unterseiten ---------- */
.phead{padding:var(--sp-space-8) 0 var(--sp-space-7)}
.phead .t-lead{margin-top:var(--sp-space-4)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--sp-text-sm);color:var(--sp-muted);margin-bottom:var(--sp-space-4)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--sp-ink)}
.crumbs span[aria-hidden]{opacity:.6}

/* ---------- Features ---------- */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface);overflow:hidden}
.feat>div{padding:var(--sp-space-6);border-right:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line);min-width:0}
.feat>div:nth-child(3n){border-right:0}
.feat>div:nth-last-child(-n+3){border-bottom:0}
.feat h3{font-size:var(--sp-text-md);margin-bottom:var(--sp-space-2)}
.feat p{color:var(--sp-muted);margin:0;font-size:var(--sp-text-sm)}
.facts{display:flex;flex-wrap:wrap;gap:var(--sp-space-2);margin-top:var(--sp-space-5)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--sp-space-8);align-items:start}
.split>*{min-width:0}
.list{list-style:none;margin:var(--sp-space-5) 0 0;padding:0;display:grid;gap:var(--sp-space-3)}
.list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--sp-space-3);color:var(--sp-muted)}
.list li svg{width:20px;height:20px;color:var(--sp-ink);margin-top:2px}
.list li b{color:var(--sp-ink)}

/* ---------- Docs: Seitenleiste, Inhalt, Inhaltsverzeichnis ---------- */
.docs{display:grid;grid-template-columns:240px minmax(0,1fr) 200px;gap:var(--sp-space-7);align-items:start;padding-top:var(--sp-space-6)}
.side{position:sticky;top:92px;font-size:var(--sp-text-sm)}
.side-toggle{display:none}
.fstates .st{color:var(--sp-ink);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.fstates .st svg{width:20px;height:20px;flex:none}
.figs2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-space-4)}.figs2 .fig{margin:0}
.search{display:flex;align-items:center;gap:var(--sp-space-2);height:38px;padding:0 12px;margin-bottom:var(--sp-space-5);border:1px solid var(--sp-line);border-radius:var(--sp-radius-md);background:var(--sp-surface);color:var(--sp-muted);font-size:var(--sp-text-sm)}
.search kbd{margin-left:auto;font-size:11px;padding:1px 6px;border:1px solid var(--sp-line);border-radius:4px}
.side h2{font-family:var(--sp-font-mono);font-size:11px;font-weight:var(--sp-weight-medium);letter-spacing:var(--sp-tracking-label);text-transform:uppercase;color:var(--sp-muted);margin:var(--sp-space-5) 0 var(--sp-space-2)}
.side h2:first-of-type{margin-top:0}
.side ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--sp-line)}
.side li a{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 12px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;color:var(--sp-muted)}
.side li a:hover{color:var(--sp-ink)}
.side li a[aria-current=page]{color:var(--sp-ink);font-weight:var(--sp-weight-bold);border-left-color:var(--sp-live)}
.side .tag{font-family:var(--sp-font-mono);font-size:10px;padding:0 6px;border:1px dashed var(--sp-line-strong);border-radius:4px;color:var(--sp-muted)}
.prose{max-width:720px;min-width:0}
.prose h1{margin-bottom:var(--sp-space-4)}
.prose>.t-lead{margin-bottom:var(--sp-space-6)}
.prose h2{font-size:var(--sp-text-xl);margin:var(--sp-space-8) 0 var(--sp-space-4);padding-top:var(--sp-space-2)}
.prose h3{font-size:var(--sp-text-md);margin:var(--sp-space-6) 0 var(--sp-space-3)}
.prose p,.prose li{color:var(--sp-ink)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 var(--sp-space-4)}
.prose li+li{margin-top:6px}
.prose li::marker{color:var(--sp-muted)}
.prose a{text-decoration-color:var(--sp-live);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose .table-wrap{margin:var(--sp-space-5) 0}
.docmeta{display:flex;flex-wrap:wrap;gap:var(--sp-space-2);margin-bottom:var(--sp-space-6)}
.steps{counter-reset:s;list-style:none;padding:0!important;margin:var(--sp-space-5) 0}
.steps>li{position:relative;padding-left:48px;padding-bottom:var(--sp-space-5);margin:0!important}
.steps>li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sp-surface);border:1px solid var(--sp-line-strong);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs)}
.steps>li::after{content:"";position:absolute;left:15px;top:36px;bottom:6px;width:1px;background:var(--sp-line)}
.steps>li:last-child::after{display:none}
.steps>li>b:first-child{display:block;margin-bottom:4px;padding-top:3px}
.toc{position:sticky;top:92px;font-size:var(--sp-text-sm)}
.toc h2{font-family:var(--sp-font-mono);font-size:11px;font-weight:var(--sp-weight-medium);letter-spacing:var(--sp-tracking-label);text-transform:uppercase;color:var(--sp-muted);margin-bottom:var(--sp-space-3)}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.toc a{text-decoration:none;color:var(--sp-muted)}
.toc a:hover,.toc a.on{color:var(--sp-ink)}
.toc a.on{font-weight:var(--sp-weight-medium)}
.toc .src{margin-top:var(--sp-space-6);padding-top:var(--sp-space-4);border-top:1px solid var(--sp-line);display:grid;gap:8px}
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-space-4);margin-top:var(--sp-space-8);padding-top:var(--sp-space-6);border-top:1px solid var(--sp-line)}
.pn a{display:block;padding:var(--sp-space-4) var(--sp-space-5);border:1px solid var(--sp-line);border-radius:var(--sp-radius-md);background:var(--sp-surface);text-decoration:none;min-width:0}
.pn a:hover{border-color:var(--sp-line-strong)}
.pn small{display:block;font-size:var(--sp-text-xs);color:var(--sp-muted);margin-bottom:2px}
.pn b{display:block}
.pn .next{text-align:right;grid-column:2}

/* ---------- Guide ---------- */
.article{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--sp-space-8);align-items:start}
.article .prose{max-width:720px}
.related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-space-4);margin-top:var(--sp-space-5)}

/* ---------- Vergleich ---------- */
.checked{display:flex;align-items:flex-start;gap:var(--sp-space-2);margin-top:var(--sp-space-5);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);color:var(--sp-muted)}
.matrix td{min-width:180px}
.matrix td:first-child{min-width:150px}
.matrix .src a{font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);overflow-wrap:anywhere}
.us-tag{display:inline-block;margin-left:6px;font-family:var(--sp-font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--sp-live-text)}

/* ---------- Changelog ---------- */
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-space-4);margin-top:var(--sp-space-6)}
.pkg{display:block;text-decoration:none;padding:var(--sp-space-5);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface)}
.pkg:hover{border-color:var(--sp-line-strong)}
.pkg code{border:0;padding:0;background:none;font-size:var(--sp-text-sm)}
.pkg .v{display:block;margin-top:var(--sp-space-2);font-size:var(--sp-text-xl);font-weight:var(--sp-weight-bold);letter-spacing:var(--sp-tracking-heading)}
.pkg small{color:var(--sp-muted)}
.tline{margin-top:var(--sp-space-8)}
.tday{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--sp-space-6);padding:var(--sp-space-6) 0;border-top:1px solid var(--sp-line)}
.tday>*{min-width:0}
.tday time,.tday .when{font-family:var(--sp-font-mono);font-size:var(--sp-text-sm);color:var(--sp-muted);position:sticky;top:92px;align-self:start}
.rel+.rel{margin-top:var(--sp-space-5)}
.rel h3{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-space-2);font-size:var(--sp-text-md);margin-bottom:var(--sp-space-2)}
.rel h3 .ver{font-family:var(--sp-font-mono);font-weight:var(--sp-weight-medium)}
.rel ul{margin:0;padding-left:20px;color:var(--sp-ink)}
.rel li+li{margin-top:4px}
.rel li::marker{color:var(--sp-muted)}
.pk{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--sp-radius-pill);font-family:var(--sp-font-mono);font-size:11px;font-weight:var(--sp-weight-medium);border:1px solid var(--sp-line-strong);color:var(--sp-ink)}
.pk.loader{background:var(--sp-ink);color:var(--sp-on-ink);border-color:var(--sp-ink)}
.pk.modules{border-style:dashed}
.unrel{font-family:var(--sp-font-mono);font-size:11px;padding:1px 8px;border:1px dashed var(--sp-line-strong);border-radius:var(--sp-radius-pill);color:var(--sp-muted)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:var(--sp-space-8);align-items:start}
.faq-aside{position:sticky;top:92px}
.qa{border-top:1px solid var(--sp-line)}
.qa:last-child{border-bottom:1px solid var(--sp-line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-space-4);padding:var(--sp-space-5) 0;cursor:pointer;list-style:none;font-size:var(--sp-text-md);font-weight:var(--sp-weight-bold);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.75px solid var(--sp-ink);border-bottom:1.75px solid var(--sp-ink);transform:rotate(45deg) translate(-3px,-3px)}
.qa[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa .a{padding:0 0 var(--sp-space-5);color:var(--sp-muted);max-width:64ch}
.qa .a p:last-child{margin:0}

/* ---------- 404 ---------- */
.nf{min-height:calc(100vh - 68px - 220px);display:flex;align-items:center;padding:var(--sp-space-9) 0}
.nf .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-space-8);align-items:center}
.code404{font-family:var(--sp-font-mono);font-size:var(--sp-text-sm);color:var(--sp-muted);margin-bottom:var(--sp-space-4);display:flex;align-items:center;gap:var(--sp-space-2)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1180px){
  .docs{grid-template-columns:220px minmax(0,1fr)}
  .docs .toc{display:none}
}
@media (max-width:980px){
  .nav{display:none}
  .hdr .gh-l{display:none}
  .menu{display:block}
  .hero .wrap,.split,.faq,.article{grid-template-columns:minmax(0,1fr)}
  .hero-vis{max-width:640px}
  .g3,.g4,.states,.pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat>div:nth-child(3n){border-right:1px solid var(--sp-line)}
  .feat>div:nth-child(2n){border-right:0}
  .feat>div:nth-last-child(-n+3){border-bottom:1px solid var(--sp-line)}
  .feat>div:nth-last-child(-n+2){border-bottom:0}
  .article .toc,.faq-aside{position:static}
  .article .toc{display:none}
  .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-grid>:first-child{grid-column:1/-1}
  .built{grid-template-columns:minmax(0,1fr)}
  .band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .docs{grid-template-columns:minmax(0,1fr);gap:var(--sp-space-5);padding-top:var(--sp-space-4)}
  .side{position:static}
  .side-toggle{display:flex}
  .js .side-toggle[aria-expanded=false]~.side-panel{display:none}
  .side-toggle[aria-expanded=true]~.side-panel{display:block}
  .side-panel{margin-top:var(--sp-space-3)}
  .side-toggle:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}
  .figs2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .wrap{padding:0 var(--sp-space-5)}
  .hdr .wrap{height:60px;gap:var(--sp-space-3)}
  .brand img{height:24px}
  .section{padding:var(--sp-space-8) 0}
  .hero{padding:var(--sp-space-7) 0 var(--sp-space-7)}
  .hero .wrap{gap:var(--sp-space-7)}
  .term{margin:-32px 0 0 12px;width:calc(100% - 24px)}
  .g2,.g3,.g4,.states,.pkgs,.related,.feat{grid-template-columns:minmax(0,1fr)}
  .feat>div{border-right:0!important;border-bottom:1px solid var(--sp-line)!important}
  .feat>div:last-child{border-bottom:0!important}
  .hiw .d{display:none}
  .hiw .m{display:block;max-width:360px;margin:0 auto}
  .cta .btn,.cta .cmd{width:100%;justify-content:center}
  .cta .cmd{justify-content:space-between}
  .card{padding:var(--sp-space-5)}
  .band{padding:var(--sp-space-6)}
  .built{padding:var(--sp-space-5)}
  .built img{width:100%;max-width:249px;height:auto}
  .phead{padding:var(--sp-space-7) 0 var(--sp-space-6)}
  .tday{grid-template-columns:minmax(0,1fr);gap:var(--sp-space-3)}
  .tday time,.tday .when{position:static}
  .pn{grid-template-columns:minmax(0,1fr)}
  .pn .next{grid-column:1}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nf .wrap{grid-template-columns:minmax(0,1fr);gap:var(--sp-space-6)}
  .prose h2{font-size:var(--sp-text-lg);margin-top:var(--sp-space-7)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Home: Zeilen-Schritte und Hero-Größe */
.hero h1{font-size:clamp(40px,4.6vw,var(--sp-text-4xl))}
.steprows{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-space-5)}
.steprow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--sp-space-7);align-items:center;padding:var(--sp-space-6);background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg)}
.steprow h3{font-size:var(--sp-text-lg);margin:var(--sp-space-2) 0}
.steprow p{margin:0;color:var(--sp-muted)}
.steprow .code{margin:0}
@media (max-width:860px){.steprow{grid-template-columns:minmax(0,1fr);gap:var(--sp-space-4);padding:var(--sp-space-5)}}
.fig .frame img{width:100%;height:auto}
@media (min-width:761px){.prose td:first-child code,.prose td:first-child{white-space:nowrap}}
.related .card h3{margin-top:0}
.t-h1+.t-lead{margin-top:var(--sp-space-4)}
@media (max-width:760px){.fstates thead{display:none}.fstates,.fstates tbody,.fstates tr,.fstates td{display:block;width:auto}.fstates tr{padding:var(--sp-space-3) 0}.fstates td{border:0;padding:2px var(--sp-space-4)}.fstates td:first-child{padding-bottom:6px}.fstates tr+tr{border-top:1px solid var(--sp-line)}.fstates td:last-child{color:var(--sp-muted)}}
.ic-flag-error,.ic-count-error{color:var(--sp-error)}.ic-count-warn{color:var(--sp-warn)}
@media (max-width:760px){.matrix td,.matrix td:first-child{min-width:0}.matrix th,.matrix td{padding:10px 8px;font-size:var(--sp-text-sm);overflow-wrap:anywhere}.matrix .us-tag{display:block;margin:2px 0 0}}

/* ---------- 404 No show ---------- */
.nf-stage{width:200px;display:flex;justify-content:center}
.nf-art{display:block;width:200px;height:300px;overflow:visible}
.nf-art .p1{stop-color:#2C2C32}.nf-art .p2{stop-color:#121215}
.nf-strap{stroke:var(--sp-line-strong)}
.nf-clip{fill:var(--sp-muted)}
.nf-hole{fill:#0E0E10;stroke:rgba(255,255,255,.28);stroke-width:2}
.nf-ln{fill:#F4F2F0;opacity:.9}.nf-ln2{opacity:.5}
.nf-light{opacity:0}
.nf-swing{transform-box:view-box;transform-origin:100px 0}
:root[data-theme=dark] .nf-art .p1{stop-color:#FFFFFF}:root[data-theme=dark] .nf-art .p2{stop-color:#E2DEDA}
:root[data-theme=dark] .nf-ln{fill:#0E0E10}:root[data-theme=dark] .nf-hole{stroke:rgba(14,14,16,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .nf-art .p1{stop-color:#FFFFFF}:root:not([data-theme=light]) .nf-art .p2{stop-color:#E2DEDA}:root:not([data-theme=light]) .nf-ln{fill:#0E0E10}:root:not([data-theme=light]) .nf-hole{stroke:rgba(14,14,16,.35)}}
.ticket{display:flex;max-width:440px;margin:var(--sp-space-5) 0 var(--sp-space-6);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);letter-spacing:.06em;text-transform:uppercase}
.tk-main,.tk-stub{background:var(--sp-surface);border:1px solid var(--sp-line);padding:14px 16px}
.tk-main{flex:1;display:flex;flex-direction:column;gap:8px;border-radius:12px 0 0 12px;border-right:0;min-width:0}
.tk-k{color:var(--sp-muted)}
.tk-status{color:var(--sp-error);font-size:var(--sp-text-sm);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.tk-status::before{content:"";width:8px;height:8px;border-radius:2px;border:1.5px solid currentColor;transform:rotate(45deg)}
.tk-stub{display:flex;gap:14px;align-items:center;border-radius:0 12px 12px 0;border-left:2px dashed var(--sp-line-strong);color:var(--sp-ink);font-size:var(--sp-text-sm);transform-origin:0 100%;transform:translate(6px,4px) rotate(4deg)}
.tk-stub span{display:flex;flex-direction:column;align-items:center;gap:2px}
.tk-stub i{font-style:normal;font-size:10px;color:var(--sp-muted)}
@media (prefers-reduced-motion:no-preference){
  .nf-light{animation:nf-flick 2.4s .3s 1 both}
  .nf-swing{animation:nf-sway 2.4s .3s 1 both}
  .tk-stub{animation:nf-tear .8s 2.2s 1 both}
  .nf-stage:hover .nf-light{animation-name:nf-flick2}
  .nf-stage:hover .nf-swing{animation-name:nf-sway2}
}
@keyframes nf-flick{0%{opacity:1}14%{opacity:1}17%{opacity:.15}22%{opacity:.95}26%{opacity:.05}33%{opacity:.7}38%,100%{opacity:0}}
@keyframes nf-flick2{0%{opacity:1}14%{opacity:1}17%{opacity:.15}22%{opacity:.95}26%{opacity:.05}33%{opacity:.7}38%,100%{opacity:0}}
@keyframes nf-sway{0%,36%{transform:rotate(0)}52%{transform:rotate(3.5deg)}68%{transform:rotate(-2deg)}84%{transform:rotate(.8deg)}100%{transform:rotate(0)}}
@keyframes nf-sway2{0%,36%{transform:rotate(0)}52%{transform:rotate(3.5deg)}68%{transform:rotate(-2deg)}84%{transform:rotate(.8deg)}100%{transform:rotate(0)}}
@keyframes nf-tear{0%{transform:none}60%{transform:translate(7px,5px) rotate(4.5deg)}100%{transform:translate(6px,4px) rotate(4deg)}}
@media (max-width:860px){.nf-stage{width:auto;justify-content:flex-start}.nf-art{width:128px;height:192px}.ticket{max-width:100%}.tk-stub{gap:10px;padding:12px}.tk-main{padding:12px}}
/* 403: Scanner, Fehlerton, Abweisen */
.nf-deny{opacity:0}
.nf-deny-light{fill:var(--sp-error)}
.nf-deny-halo{fill:var(--sp-error);opacity:.28;filter:blur(6px)}
.nf-scanner{stroke:var(--sp-muted)}
.nf-scan{fill:var(--sp-error);opacity:0}
.nf-403 .tk-stub{transform:none}
@media (prefers-reduced-motion:no-preference){
  .nf-403 .nf-light{animation:none}
  .nf-403 .nf-swing{animation:nf-reject 2.6s .3s 1 both}
  .nf-403 .nf-scan{animation:nf-scan 2.6s .3s 1 both}
  .nf-403 .nf-deny{animation:nf-deny 2.6s .3s 1 both}
  .nf-403 .tk-stub{animation:none}
  .nf-403 .nf-stage:hover .nf-swing{animation-name:nf-reject2}
  .nf-403 .nf-stage:hover .nf-scan{animation-name:nf-scan2}
  .nf-403 .nf-stage:hover .nf-deny{animation-name:nf-deny2}
}
@keyframes nf-scan{0%{opacity:0;transform:translateY(0)}6%{opacity:.9}40%{opacity:.9;transform:translateY(164px)}46%,100%{opacity:0;transform:translateY(164px)}}
@keyframes nf-scan2{0%{opacity:0;transform:translateY(0)}6%{opacity:.9}40%{opacity:.9;transform:translateY(164px)}46%,100%{opacity:0;transform:translateY(164px)}}
@keyframes nf-deny{0%,44%{opacity:0}48%{opacity:1}56%{opacity:.1}62%{opacity:1}74%{opacity:1}84%,100%{opacity:0}}
@keyframes nf-deny2{0%,44%{opacity:0}48%{opacity:1}56%{opacity:.1}62%{opacity:1}74%{opacity:1}84%,100%{opacity:0}}
@keyframes nf-reject{0%,46%{transform:translateX(0)}50%{transform:translateX(-6px)}54%{transform:translateX(5px)}58%{transform:translateX(-4px)}62%{transform:translateX(2px)}66%,100%{transform:translateX(0)}}
@keyframes nf-reject2{0%,46%{transform:translateX(0)}50%{transform:translateX(-6px)}54%{transform:translateX(5px)}58%{transform:translateX(-4px)}62%{transform:translateX(2px)}66%,100%{transform:translateX(0)}}

/* Vergleichstabellen auf schmalen Screens gestapelt: Zeilenkopf, dann je Spalte ein Block mit Label */
@media (max-width:640px){
 .matrix.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .matrix.stack,.matrix.stack tbody,.matrix.stack tr,.matrix.stack td{display:block;width:100%}
 .matrix.stack tr{padding:12px 0;border-bottom:1px solid var(--sp-line)}
 .matrix.stack td{border:0;padding:6px 12px}
 .matrix.stack td.row-h{font-weight:600;padding-top:4px}
 .matrix.stack td[data-label]::before{content:attr(data-label);display:block;font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-bottom:2px}
}

/* ---------- Compare pages (src/components/compare) ----------
   Two equal sides: the compared tool on the left in neutral tones,
   Stagepass on the right with a light accent tint. No shadows. */
:root{--cmp-us-bg:color-mix(in srgb,var(--sp-live) 5%,var(--sp-surface));--cmp-us-line:color-mix(in srgb,var(--sp-live) 32%,var(--sp-line));--cmp-mk-bg:var(--sp-bg);--cmp-blk:color-mix(in srgb,var(--sp-ink) 9%,transparent)}
:root[data-theme=dark]{--cmp-us-bg:color-mix(in srgb,var(--sp-live) 9%,var(--sp-surface));--cmp-us-line:color-mix(in srgb,var(--sp-live) 40%,var(--sp-line));--cmp-blk:color-mix(in srgb,var(--sp-ink) 13%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--cmp-us-bg:color-mix(in srgb,var(--sp-live) 9%,var(--sp-surface));--cmp-us-line:color-mix(in srgb,var(--sp-live) 40%,var(--sp-line));--cmp-blk:color-mix(in srgb,var(--sp-ink) 13%,transparent)}}

.cmp-hero{padding-bottom:var(--sp-space-8)}
.cmp-lead{margin-bottom:var(--sp-space-6)}
.cmp-mono{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border:1px solid var(--sp-line-strong);border-radius:8px;background:var(--sp-surface);font-family:var(--sp-font-mono);font-size:12px;font-weight:var(--sp-weight-bold);letter-spacing:0;color:var(--sp-ink)}
.cmp-us .cmp-mono,.is-us .cmp-mono{border-color:transparent;background:var(--sp-grad-light);color:#fff}
.cmp-chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;line-height:1.3;border:1px solid var(--sp-line);border-radius:var(--sp-radius-pill);font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);color:var(--sp-muted);background:var(--sp-surface)}
.cmp-us .cmp-chip{border-color:var(--cmp-us-line);color:var(--sp-live-text)}

/* Short answer board */
.cmp-board{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface);overflow:hidden}
.cmp-board-k{padding:var(--sp-space-5);display:flex;align-items:flex-start;border-bottom:1px solid var(--sp-line)}
.cmp-board-k .kicker{margin:0}
.cmp-id{padding:var(--sp-space-5);border-left:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-space-3)}
.cmp-id.cmp-us{background:var(--cmp-us-bg)}
.cmp-id-top{display:flex;align-items:center;gap:var(--sp-space-3)}
.cmp-id-n{font-size:var(--sp-text-md);font-weight:var(--sp-weight-bold)}
.cmp-for{margin:0;color:var(--sp-ink);line-height:1.5}
.cmp-for>span:first-child{display:block;font-family:var(--sp-font-mono);font-size:var(--sp-text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--sp-muted);margin-bottom:2px}
.cmp-diffs{grid-column:1/-1;list-style:none;margin:0;padding:0}
.cmp-diffs li{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr)}
.cmp-diffs li+li>*{border-top:1px solid var(--sp-line)}
.cmp-topic{display:flex;align-items:flex-start;gap:10px;padding:var(--sp-space-4) var(--sp-space-5);font-weight:var(--sp-weight-bold);font-size:var(--sp-text-sm)}
.cmp-topic svg{flex:none;margin-top:1px;color:var(--sp-muted)}
.cmp-val{padding:var(--sp-space-4) var(--sp-space-5);border-left:1px solid var(--sp-line);font-size:var(--sp-text-sm);line-height:1.5}
.cmp-val.cmp-us{background:var(--cmp-us-bg)}
.cmp-who{display:none;font-family:var(--sp-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sp-muted);margin-bottom:2px}
.cmp-us .cmp-who{color:var(--sp-live-text)}
.cmp-jump{margin:var(--sp-space-5) 0 0}
.cmp-jump .arr{font-weight:var(--sp-weight-bold);font-size:var(--sp-text-sm);text-decoration:none}
.cmp-jump .arr::after{content:" \2193"}

/* Workflow side by side */
.cmp-flow{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);grid-auto-flow:row dense;gap:var(--sp-space-4) 0}
.cmp-flow>.cmp-them{grid-column:1}.cmp-flow>.cmp-phase,.cmp-flow>.cmp-mid{grid-column:2}.cmp-flow>.cmp-us{grid-column:3}
.cmp-flow-h{display:flex;align-items:center;gap:var(--sp-space-3);font-weight:var(--sp-weight-bold);padding-bottom:var(--sp-space-2);border-bottom:2px solid var(--sp-line)}
.cmp-flow-h.cmp-us{border-bottom-color:var(--sp-live)}
.cmp-flow-h.cmp-mid{border:0}
.cmp-step{border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface);padding:var(--sp-space-5);display:flex;flex-direction:column;gap:var(--sp-space-3);min-width:0}
.cmp-step.cmp-us{background:var(--cmp-us-bg);border-color:var(--cmp-us-line)}
.cmp-step h3{font-size:var(--sp-text-md)}
.cmp-step>p:last-child{margin:0;color:var(--sp-muted);font-size:var(--sp-text-sm);line-height:1.55}
.cmp-step-k{margin:0;display:flex;gap:var(--sp-space-2);align-items:baseline}
.cmp-ph-m{font-family:var(--sp-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sp-muted)}
.cmp-phase{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.cmp-phase::before{content:"";position:absolute;left:12px;right:12px;top:50%;border-top:1px dashed var(--sp-line-strong)}
.cmp-ph-i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--sp-line-strong);border-radius:50%;background:var(--sp-bg);color:var(--sp-ink)}
.cmp-ph-n{display:none}
.cmp-ph-l{position:relative;font-family:var(--sp-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sp-muted);background:var(--sp-bg);padding:0 4px}

/* Self drawn mocks */
.mk{border:1px solid var(--sp-line);border-radius:var(--sp-radius-md);background:var(--cmp-mk-bg);overflow:hidden;font-size:12px;line-height:1.45;min-width:0}
.mk-bar{display:flex;align-items:center;gap:10px;height:28px;padding:0 10px;border-bottom:1px solid var(--sp-line);background:var(--sp-surface);min-width:0}
.mk-dots{display:inline-flex;gap:5px;flex:none}
.mk-dots i{width:8px;height:8px;border-radius:50%;background:var(--sp-line-strong);opacity:.55}
.mk-title{font-family:var(--sp-font-mono);font-size:11px;color:var(--sp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-url{flex:1;min-width:0;height:18px;display:flex;align-items:center;padding:0 8px;border-radius:var(--sp-radius-pill);background:var(--sp-bg);border:1px solid var(--sp-line);font-family:var(--sp-font-mono);font-size:11px;color:var(--sp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-url b{font-weight:var(--sp-weight-bold);color:var(--sp-live-text)}
.mk.mk-term{background:#17171B;border-color:#2A2A30}
.mk.mk-term .mk-bar{background:#202026;border-bottom-color:#2A2A30}
.mk.mk-term .mk-title{color:#9C9799}
.mk-tx{color:#F4F2F0;padding:10px 12px;font-family:var(--sp-font-mono);font-size:11.5px;overflow:hidden}
.mk-tx>div{white-space:pre;overflow:hidden;text-overflow:ellipsis}
.mk-tx .c::before{content:"$ ";color:#FF8A3D}
.mk-tx .o{color:#9C9799}
.mk-page{position:relative;padding:12px;display:flex;flex-direction:column;gap:7px;min-height:104px}
.mk-blk{display:block;height:8px;border-radius:4px;background:var(--cmp-blk)}
.mk-blk.h{height:26px}
.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}
.mk-row{display:flex;gap:8px}.mk-row .mk-blk{flex:1}
.mk-badge{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);height:22px;padding:0 9px;border:1px solid var(--sp-line-strong);border-radius:var(--sp-radius-pill);background:var(--sp-surface);font-family:var(--sp-font-mono);font-size:10.5px;color:var(--sp-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-badge i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--sp-line-strong)}
.mk-badge.is-local{border-color:var(--cmp-us-line);color:var(--sp-live-text)}
.mk-badge.is-local i{width:14px;height:6px;border-radius:3px;background:var(--sp-grad-light)}
.mk-ed{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);min-height:104px}
.mk-files{list-style:none;margin:0;padding:8px 0;border-right:1px solid var(--sp-line);font-family:var(--sp-font-mono);font-size:10.5px;color:var(--sp-muted)}
.mk-files li{padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-files li.on{background:var(--cmp-blk);color:var(--sp-ink)}
.mk-code{position:relative;padding:12px;display:flex;flex-direction:column;gap:8px}
.mk-ln{display:block;height:6px;border-radius:3px;background:var(--cmp-blk)}
.mk-ln.in{margin-left:14px}
.mk-note{align-self:flex-start;margin-top:4px;padding:2px 8px;border:1px solid var(--sp-line-strong);border-radius:var(--sp-radius-pill);font-family:var(--sp-font-mono);font-size:10.5px;color:var(--sp-muted);background:var(--sp-surface)}
.mk-field{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.mk-label{font-size:11px;font-weight:var(--sp-weight-bold)}
.mk-area{margin:0;padding:8px;border:1px solid var(--sp-line);border-radius:6px;background:var(--sp-surface);font-size:10.5px;line-height:1.5;color:var(--sp-muted);white-space:pre-wrap;overflow-wrap:anywhere}
.mk-meter{align-self:flex-end;font-family:var(--sp-font-mono);font-size:10.5px;color:var(--sp-muted)}
.mk-pub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 12px;min-height:64px}
.mk-btn{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--sp-line-strong);border-radius:6px;background:var(--sp-surface);font-size:11px;font-weight:var(--sp-weight-medium);white-space:nowrap}
.mk-btn.last{background:var(--sp-ink);border-color:var(--sp-ink);color:var(--sp-on-ink)}
.mk-arr{width:14px;height:1px;background:var(--sp-line-strong);position:relative}
.mk-arr::after{content:"";position:absolute;right:0;top:-3px;border:3.5px solid transparent;border-left:5px solid var(--sp-line-strong);border-right:0}
.mk-prompt{margin:12px;padding:12px;border:1px solid var(--sp-line-strong);border-radius:var(--sp-radius-md);background:var(--sp-surface)}
.mk-prompt p{margin:0 0 10px;font-size:11.5px;color:var(--sp-ink)}
.mk-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.mk-lib{list-style:none;margin:0;padding:8px 0}
.mk-lib li{display:flex;align-items:center;gap:8px;padding:4px 12px;font-family:var(--sp-font-mono);font-size:11px;color:var(--sp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-sq{flex:none;width:14px;height:14px;border:1px solid var(--sp-line-strong);border-radius:3px}

/* Table */
.cmp-table td{vertical-align:top;line-height:1.5}
.cmp-table:not(.cmp-glance) td:last-child,.cmp-table:not(.cmp-glance) th:last-child,.cmp-table tr.is-us td{background:var(--cmp-us-bg)}
.cmp-rh{display:flex;align-items:center;gap:10px;font-weight:var(--sp-weight-bold);text-decoration:none}
.cmp-rh svg{flex:none;color:var(--sp-muted)}
a.cmp-rh:hover{text-decoration:underline}
.cmp-table .cmp-mono{width:26px;height:26px;font-size:11px}
.cmp-pill{display:flex;width:fit-content;margin-bottom:6px;padding:2px 10px;border:1px solid var(--sp-line);border-radius:var(--sp-radius-pill);background:var(--sp-bg);font-size:var(--sp-text-xs);font-weight:var(--sp-weight-bold);color:var(--sp-ink)}
.cmp-pill.is-us{border-color:var(--cmp-us-line);background:var(--sp-surface);color:var(--sp-live-text)}
.cmp-same{display:inline-block;margin:6px 0 0 28px;padding:1px 8px;border-radius:var(--sp-radius-pill);background:var(--cmp-blk);font-family:var(--sp-font-mono);font-size:10.5px;color:var(--sp-muted);font-weight:var(--sp-weight-medium)}

/* Pick, switching, more */
.cmp-pick .card h3{display:flex;align-items:center;gap:var(--sp-space-3);margin-bottom:var(--sp-space-4)}
.cmp-pick .card.cmp-us{background:var(--cmp-us-bg);border-color:var(--cmp-us-line)}
.cmp-pick ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-space-3)}
.cmp-pick li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.cmp-pick li svg{flex:none;margin-top:3px;color:var(--sp-muted)}
.cmp-pick .cmp-us li svg{color:var(--sp-live-text)}
.cmp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-space-4);counter-reset:none}
.cmp-steps li{display:flex;gap:var(--sp-space-3);align-items:flex-start;padding:var(--sp-space-5);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface);line-height:1.5;font-size:var(--sp-text-sm)}
.cmp-step-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--sp-ink);color:var(--sp-on-ink);font-family:var(--sp-font-mono);font-size:12px;font-weight:var(--sp-weight-bold)}
.cmp-more{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-space-3)}
.cmp-more li{display:flex}.cmp-more a{flex:1}
.cmp-more a{display:flex;align-items:center;gap:var(--sp-space-3);padding:var(--sp-space-4);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface);text-decoration:none}
.cmp-more a:hover{border-color:var(--sp-line-strong)}
.cmp-more b{display:block;font-size:var(--sp-text-sm)}
.cmp-more small{display:block;color:var(--sp-muted);font-size:var(--sp-text-xs)}

/* Overview */
.cmp-tools{list-style:none;margin:var(--sp-space-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-space-4)}
.cmp-tools .card{height:100%;display:flex;flex-direction:column;gap:var(--sp-space-3)}
.cmp-tools .card h3{margin:0}
.cmp-tool-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-space-3)}
.cmp-tool-fit{font-size:var(--sp-text-sm)}
.cmp-tool-fit b{color:var(--sp-ink)}
.cmp-tools .arr{margin-top:auto !important}
.cmp-way .cmp-step-k{margin:0}

/* Status and sources */
.cmp-sources{border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface)}
.cmp-sources summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-space-2) var(--sp-space-4);padding:var(--sp-space-4) var(--sp-space-5);cursor:pointer;list-style:none}
.cmp-sources summary::-webkit-details-marker{display:none}
.cmp-sources summary::before{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);align-self:center;transition:transform .15s}
.cmp-sources[open] summary::before{transform:rotate(45deg)}
.cmp-sum-t{font-weight:var(--sp-weight-bold)}
.cmp-sum-d{font-size:var(--sp-text-sm);color:var(--sp-muted)}
.cmp-src-body{padding:0 var(--sp-space-5) var(--sp-space-5);font-size:var(--sp-text-sm);color:var(--sp-muted);max-width:none}
.cmp-src-body>p{max-width:72ch}
.cmp-src-list{list-style:none;margin:var(--sp-space-4) 0 0;padding:0;border-top:1px solid var(--sp-line)}
.cmp-src-list li{display:flex;gap:var(--sp-space-3);padding:10px 8px;border-bottom:1px solid var(--sp-line);border-radius:6px;scroll-margin-top:96px}
.cmp-src-list li:target{background:var(--cmp-us-bg);outline:1px solid var(--cmp-us-line)}
.cmp-src-n{flex:none;width:24px;font-family:var(--sp-font-mono);font-weight:var(--sp-weight-bold);color:var(--sp-ink)}
.cmp-src-l{display:block;color:var(--sp-ink)}
.cmp-src-m{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px;font-family:var(--sp-font-mono);font-size:var(--sp-text-xs)}
.cmp-src-side{color:var(--sp-muted)}
sup.ref{font-size:10.5px;line-height:0;margin-left:2px;white-space:nowrap}
sup.ref a{color:var(--sp-live-text);text-decoration:none;font-family:var(--sp-font-mono);font-weight:var(--sp-weight-bold);padding:0 1px}
sup.ref a:hover{text-decoration:underline}

@media (max-width:1000px){
  .cmp-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp-board,.cmp-diffs li{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .cmp-tools{grid-template-columns:minmax(0,1fr)}
  .cmp-board{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp-board-k{grid-column:1/-1;padding:var(--sp-space-3) var(--sp-space-4)}
  .cmp-id{padding:var(--sp-space-4);gap:var(--sp-space-2)}
  .cmp-id.cmp-them{border-left:0}
  .cmp-id-n{font-size:var(--sp-text-base)}
  .cmp-for{font-size:var(--sp-text-sm)}
  .cmp-diffs li{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp-topic{grid-column:1/-1;padding:var(--sp-space-3) var(--sp-space-4) 0}
  .cmp-diffs li+li>.cmp-val{border-top:0}
  .cmp-val{padding:var(--sp-space-2) var(--sp-space-4) var(--sp-space-3)}
  .cmp-val.cmp-them{border-left:0}
  .cmp-val .cmp-who{display:block}
  .cmp-flow{grid-template-columns:minmax(0,1fr);gap:var(--sp-space-3)}
  .cmp-flow>*{grid-column:1 !important}
  .cmp-flow-h{display:none}
  .cmp-phase{flex-direction:row;justify-content:flex-start;gap:var(--sp-space-3);margin-top:var(--sp-space-4)}
  .cmp-phase::before{display:none}
  .cmp-ph-i{width:32px;height:32px}
  .cmp-ph-l{font-size:var(--sp-text-xs);color:var(--sp-ink);background:none;padding:0}
  .cmp-step{padding:var(--sp-space-4)}
  .cmp-step .cmp-who{display:inline}
  .cmp-step .cmp-ph-m{display:none}
  .cmp-same{margin-left:0}
}
/* Long URLs written out in running text (e.g. privacy) wrap instead of widening the page on mobile */
main p a,main li a{overflow-wrap:anywhere}