:root{color-scheme:light;
  --bg-deep:#f4f4f5;--bg:#fafafa;--card:#ffffff;--raised:#f4f4f5;
  --text:#171717;--text-2:#525252;--muted:#6f6f74;
  --hair:rgba(23,23,23,.08);--hair-strong:rgba(23,23,23,.14);
  --accent:#346aac;--accent-ink:#ffffff;--accent-soft:rgba(52,106,172,.10);
  --ok:#15803d;--warn:#8a5a00;--err:#c81e1e;
  --ok-soft:rgba(21,128,61,.10);--warn-soft:rgba(138,90,0,.10);--err-soft:rgba(200,30,30,.10);
  --s1:#346aac;--s2:#a14174;--s3:#876114;--s4:#7a4aba;--s5:#05a388;--s-other:#a3a3a3;
  --s1-line:#346aac;--s2-line:#a14174;--s3-line:#876114;--s4-line:#7a4aba;--s5-line:#05a388;
  --btn-fill:#171717;--btn-ink:#ffffff;
  --grad-selected:linear-gradient(180deg,#ffffff,#ececee);--grad-card:linear-gradient(180deg,#ffffff,#f8f8f9);--grad-float:linear-gradient(180deg,#ffffff,#fafafb);
  --hl-top:inset 0 1px 0 rgba(255,255,255,.9);--ring-selected:inset 0 0 0 1px rgba(23,23,23,.08);--shadow-selected:0 1px 3px rgba(0,0,0,.08);--input-bg:#f7f7f8;--inset-sm:inset 0 1px 2px rgba(0,0,0,.04);
  --glow-wide:.09;--glow-blue:.7;--glow-gap:0;--glow-blend:normal;--dot-ring:.12;--tint-fill:8%;--tint-line:28%;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-float:0 8px 24px rgba(0,0,0,.06);
  --r-4:4px;--r-8:8px;--r-12:12px;--r-16:16px;
  --ease:cubic-bezier(.22,1,.36,1);--t-fast:140ms;--t-menu:180ms;--t-enter:320ms;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){color-scheme:dark;
  --bg-deep:#0f0f10;--bg:#141415;--card:#19191b;--raised:#232325;
  --text:#ededed;--text-2:#a1a1a6;--muted:#85858b;
  --hair:rgba(237,237,237,.08);--hair-strong:rgba(237,237,237,.14);
  --accent:#4996f5;--accent-ink:#141415;--accent-soft:rgba(73,150,245,.14);
  --ok:#4cc38a;--warn:#d9a94a;--err:#ee6b6b;
  --ok-soft:rgba(76,195,138,.12);--warn-soft:rgba(217,169,74,.12);--err-soft:rgba(238,107,107,.12);
  --s1:#4996f5;--s2:#cd689b;--s3:#b58629;--s4:#a37fde;--s5:#11a68b;--s-other:#5c5c62;
  --s1-line:#5ea8ff;--s2-line:#f07fb6;--s3-line:#f0b945;--s4-line:#bb9ef8;--s5-line:#2fd0b0;
  --btn-fill:#ededed;--btn-ink:#141415;
  --grad-selected:linear-gradient(180deg,#333337,#232326);--grad-card:linear-gradient(180deg,#1f1f22,#19191b);--grad-float:linear-gradient(180deg,#26262a,#1f1f22);
  --hl-top:inset 0 1px 0 rgba(255,255,255,.10);--ring-selected:inset 0 0 0 1px rgba(255,255,255,.08);--shadow-selected:0 1px 3px rgba(0,0,0,.5);--input-bg:#121213;--inset-sm:inset 0 1px 2px rgba(0,0,0,.35);
  --glow-wide:.25;--glow-blue:.7;--glow-gap:.6;--glow-blend:screen;--dot-ring:.14;--tint-fill:10%;--tint-line:28%;
  --shadow-sm:0 0 #0000;--shadow-float:0 8px 24px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg-deep:#0f0f10;--bg:#141415;--card:#19191b;--raised:#232325;
  --text:#ededed;--text-2:#a1a1a6;--muted:#85858b;
  --hair:rgba(237,237,237,.08);--hair-strong:rgba(237,237,237,.14);
  --accent:#4996f5;--accent-ink:#141415;--accent-soft:rgba(73,150,245,.14);
  --ok:#4cc38a;--warn:#d9a94a;--err:#ee6b6b;
  --ok-soft:rgba(76,195,138,.12);--warn-soft:rgba(217,169,74,.12);--err-soft:rgba(238,107,107,.12);
  --s1:#4996f5;--s2:#cd689b;--s3:#b58629;--s4:#a37fde;--s5:#11a68b;--s-other:#5c5c62;
  --s1-line:#5ea8ff;--s2-line:#f07fb6;--s3-line:#f0b945;--s4-line:#bb9ef8;--s5-line:#2fd0b0;
  --btn-fill:#ededed;--btn-ink:#141415;
  --grad-selected:linear-gradient(180deg,#333337,#232326);--grad-card:linear-gradient(180deg,#1f1f22,#19191b);--grad-float:linear-gradient(180deg,#26262a,#1f1f22);
  --hl-top:inset 0 1px 0 rgba(255,255,255,.10);--ring-selected:inset 0 0 0 1px rgba(255,255,255,.08);--shadow-selected:0 1px 3px rgba(0,0,0,.5);--input-bg:#121213;--inset-sm:inset 0 1px 2px rgba(0,0,0,.35);
  --glow-wide:.25;--glow-blue:.7;--glow-gap:.6;--glow-blend:screen;--dot-ring:.14;--tint-fill:10%;--tint-line:28%;
  --shadow-sm:0 0 #0000;--shadow-float:0 8px 24px rgba(0,0,0,.4)}
/* Old names, kept so app style blocks written against them keep working. New code uses the names above. */
:root{--surface:var(--card);--surface-2:var(--raised);--line:var(--hair);--line-strong:var(--hair-strong);
  --accent-bg:var(--accent);--series-1:var(--s1);--grid:var(--hair);--radius:var(--r-12);--shadow:var(--shadow-sm)}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:14px/20px var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,summary,label{touch-action:manipulation}
strong,b{font-weight:500}
a{color:var(--accent);text-decoration:none}@media (hover:hover){a:hover{text-decoration:underline}}
/* Clickable data looks clickable: links in tables, lists and checks keep the accent. Only a row's title (the slug, a form or popup
   name, a page cell), which plainly opens the row's item, stays in the text colour; it underlines on hover like every link. */
.page-cell,.link-cell a,a.link-slug,td a:has(> strong:only-child),.w-list-line > a,.w-status a{color:inherit}
code{font:12.5px/1.4 var(--mono);word-break:break-all}
svg.i{width:16px;height:16px;flex:none;vertical-align:-3px}
.btn,.icon-btn,.nav-item,.tabs a,.chip,.segmented a,.segmented button,.menu-item,.theme-toggle,.widget-view,.host,.picker-list li,.add-widget,input,select,textarea{transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:active,.icon-btn:active{transform:scale(.98)}
@keyframes admin-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
h1{font-size:28px;line-height:32px;margin:0;font-weight:500;letter-spacing:0}
h2{font-size:14px;line-height:20px;margin:0 0 12px;font-weight:500}
h3{font-size:14px;line-height:20px;font-weight:500;margin:16px 0 8px}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.figure{font:500 28px/32px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
p{margin:0 0 8px}
.muted{color:var(--muted)}.small{font-size:12px;line-height:16px}
/* layout */
.layout{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;background:linear-gradient(to right,var(--bg-deep) 247px,var(--hair) 247px,var(--hair) 248px,var(--bg) 248px)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:0;padding:16px;background:var(--bg-deep)}
.brand{display:flex;align-items:center;gap:8px;height:32px;font-size:16px;font-weight:500;color:var(--text);padding:0 8px}
@media (hover:hover){.brand:hover{text-decoration:none}}
.brand-mark{width:16px;height:16px;border-radius:4px;background:var(--text);position:relative;flex:none}
.brand-mark::after{content:"";position:absolute;inset:5px;border-radius:2px;background:var(--bg-deep)}
.host{display:flex;align-items:center;gap:8px;font:12px/24px var(--mono);color:var(--text-2);height:24px;padding:0 8px;margin:0 0 16px;white-space:nowrap}
@media (hover:hover){.host:hover{text-decoration:none;color:var(--text)}}.host-name{overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;color:var(--muted);background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor calc(var(--dot-ring) * 100%),var(--bg-deep))}
.dot-ok{color:var(--ok)}.dot-warn{color:var(--warn)}.dot-err{color:var(--err)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:12px;line-height:16px;font-weight:400;color:var(--muted);padding:0 8px;margin:24px 0 8px}
.nav > .nav-label:first-child{margin-top:0}
.nav-item{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 8px;border-radius:8px;color:var(--text-2);font-weight:400}
@media (hover:hover){.nav-item:hover{background:var(--raised);text-decoration:none;color:var(--text)}}
.nav-item[aria-current]{background:var(--grad-selected);color:var(--text);box-shadow:var(--hl-top),var(--ring-selected),var(--shadow-selected)}
.nav-glyph{width:20px;height:20px;display:grid;place-items:center;color:var(--muted);flex:none}
.nav-initial{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.nav-item[aria-current] .nav-glyph{color:var(--text)}.nav-item[aria-current] .nav-glyph svg{stroke-width:1.75}
.nav-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The nav list scrolls; the account row stays pinned under it. */
.side > .nav{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin:0 -8px;padding:0 8px 4px}
.side-foot{flex:none;margin-top:8px;border-top:1px solid var(--line);padding:12px 0 0 8px;display:flex;align-items:center;gap:8px}
.user{flex:1 1 auto;min-width:0;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot-actions{flex:none;display:flex;align-items:center;gap:4px}
.side-out{width:28px;padding:0;color:var(--muted)}
@media (hover:hover){.side-out:hover{color:var(--text)}}
.side-out svg{width:16px;height:16px}
.main{padding:28px 32px 48px;max-width:1600px;width:100%;min-width:0}
.page-foot{margin:32px 0 0}
.page-head{margin-bottom:24px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.subtitle{color:var(--muted);margin:4px 0 0}
/* Phone and tablet shell: desktop keeps the sidebar; these parts only exist under the breakpoint. */
.appbar,.scrim,.drawer-close,.nav-sub{display:none}
.drawer-head{display:contents}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr);background:var(--bg)}
  /* app bar: sticky, blurred, inside the safe area */
  .appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:2px;min-height:56px;padding:env(safe-area-inset-top,0px) max(6px,env(safe-area-inset-right,0px)) 0 max(6px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hair)}
  .menu-btn,.appbar-status,.appbar .theme-toggle{flex:none;width:44px;height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--text);text-decoration:none}
  .menu-lines{display:grid;gap:4px;width:18px}.menu-lines i{display:block;height:2px;border-radius:1px;background:currentColor}
  .appbar-title{flex:1;min-width:0;font-size:16px;line-height:24px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
  html.has-js .appbar-title{opacity:0;transform:translateY(4px)}
  html.has-js .appbar.scrolled .appbar-title{opacity:1;transform:none}
  .appbar-status .dot{box-shadow:0 0 0 3px color-mix(in srgb,currentColor calc(var(--dot-ring) * 100%),var(--bg))}
  .page-head .theme-toggle{display:none}
  .page-head{margin-bottom:16px}
  /* phones: the panel tabs sit right under the title, above any update notice (desktop keeps notices first) */
  .main{display:flex;flex-direction:column;align-items:stretch}
  .main > *{min-width:0}
  .main > .page-head{order:-3}.main > .tabs{order:-2}
  /* drawer: a left tray over a scrim; :target opens it without JS, .nav-open with JS */
  .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
  .drawer-close{display:inline-flex;flex:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px;color:var(--text-2);margin-right:-10px}
  .drawer-close:active{background:var(--raised)}
  .side{position:fixed;top:0;bottom:0;left:0;z-index:50;width:min(300px,85vw);height:100vh;height:100dvh;overflow:hidden;padding:max(12px,env(safe-area-inset-top,0px)) 12px max(16px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:var(--bg-deep);border-right:1px solid var(--hair);box-shadow:var(--shadow-float);transform:translateX(-105%);visibility:hidden;transition:transform var(--t-enter) var(--ease),visibility 0s linear var(--t-enter)}
  .scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;transition:opacity var(--t-enter) var(--ease),visibility 0s linear var(--t-enter)}
  html.nav-open .side,.side:target{transform:none;visibility:visible;transition:transform var(--t-enter) var(--ease)}
  html.nav-open .scrim,.side:target + .scrim{opacity:1;visibility:visible;transition:opacity var(--t-enter) var(--ease)}
  html.nav-open body{position:fixed;width:100%;overflow:hidden}
  .host{height:auto;min-height:44px;margin:0 0 8px;white-space:normal}
  .host-name{overflow-wrap:anywhere}
  .nav-item{min-height:44px;gap:12px;font-size:14px}
  .nav-label{margin-top:20px}
  /* the current app is plain text while its panels show; the current panel gets a 2px accent rail on a hairline spine */
  .nav-item.has-sub[aria-current]{background:none;box-shadow:none;color:var(--text);font-weight:500}
  .nav-item.has-sub[aria-current] .nav-glyph{color:var(--text)}
  .nav-sub{display:grid;gap:0;margin:0 0 6px 19px;padding-left:12px;border-left:1px solid var(--hair)}
  .nav-sub-item{position:relative;display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:8px;color:var(--text-2);font-size:14px;text-decoration:none}
  .nav-sub-item[aria-current]{color:var(--text);background:none;font-weight:500}
  .nav-sub-item[aria-current]::before{content:"";position:absolute;left:-13px;top:8px;bottom:8px;width:2px;border-radius:1px;background:var(--accent)}
  .nav-sub-item:active,.nav-item:active{background:var(--raised)}
  .side-foot{padding-top:4px;margin-top:4px}
  .side-out{width:44px;height:44px;min-height:44px;margin-right:-10px}
  .main{padding:16px max(16px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  h1{font-size:24px;line-height:28px}
  .figure,.tile-value,.w-stat-value{font-size:28px;line-height:32px}
}
/* theme toggle */
.theme-toggle{display:inline-flex;align-items:center;gap:8px;min-height:32px;border:1px solid var(--line-strong);background:var(--grad-selected);color:var(--text-2);border-radius:8px;width:32px;padding:0;justify-content:center;font:inherit;font-size:13px;font-weight:400;cursor:pointer;white-space:nowrap;box-shadow:var(--hl-top)}
@media (hover:hover){.theme-toggle:hover{color:var(--text);background:var(--raised)}}
.theme-icon{display:inline-grid;width:16px;height:16px}.theme-icon svg{grid-area:1/1;display:none}
.theme-toggle .theme-icon svg:nth-child(1){display:block}
.theme-toggle[data-mode="light"] .theme-icon svg{display:none}.theme-toggle[data-mode="light"] .theme-icon svg:nth-child(2){display:block}
.theme-toggle[data-mode="dark"] .theme-icon svg{display:none}.theme-toggle[data-mode="dark"] .theme-icon svg:nth-child(3){display:block}
/* AI buttons */
.ai-btn{color:var(--text-2)}
@media (hover:hover){.ai-btn:hover{color:var(--text);border-color:var(--hair-strong)}}
/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:8px 12px;color:var(--text-2);font-weight:400;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap}
@media (hover:hover){.tabs a:hover{color:var(--text);text-decoration:none}}
.tabs a[aria-current]{color:var(--text);border-bottom-color:var(--text)}
/* Tabs on phones and tablets: the same underline text tabs, in a strip that scrolls sideways (44px tall through padding; a fade on the edge that has more). */
@media (max-width:860px){
  .tabs{--fade-l:0px;--fade-r:32px;gap:4px;margin:0 -16px 16px;padding:0 16px;scroll-padding:0 16px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
  .tabs:not(.at-start){--fade-l:32px}
  .tabs.at-end{--fade-r:0px}
  .tabs a{display:inline-flex;align-items:center;min-height:44px;padding:12px;margin-bottom:-1px;border-bottom:1px solid transparent;border-radius:0;background:none;font-size:14px;font-weight:400;scroll-snap-align:start;flex:none}
  .tabs a:first-child{padding-left:0}
  .tabs a:active{color:var(--text)}
  .tabs a[aria-current]{background:none;color:var(--text);border-bottom-color:var(--text);box-shadow:none}
}
/* surfaces */
.card{background:var(--grad-card);border:1px solid var(--hair);border-radius:var(--radius);padding:20px;box-shadow:var(--hl-top),var(--shadow-sm)}
.card + .card{margin-top:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card-head h2{margin:0}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px;align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.two-col > .card{margin-top:0}
.stack{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.card{min-width:0;overflow-wrap:break-word}
.card p,.card li,.card dd{overflow-wrap:anywhere}
.empty{color:var(--muted);text-align:center;padding:32px 12px}
.empty p{margin:0 0 12px}.empty .btn{color:var(--text)}.empty .btn-primary{color:var(--btn-ink)}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.tile{display:block;background:var(--grad-card);border:1px solid var(--hair);border-radius:var(--radius);padding:16px 20px;color:var(--text);box-shadow:var(--hl-top),var(--shadow-sm)}
@media (hover:hover){a.tile:hover{text-decoration:none;border-color:var(--hair-strong)}}
.tile-label{font-size:13px;color:var(--text-2)}
.tile-value{font:500 32px/36px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0;margin-top:8px}
.tile-hint{font-size:12px;color:var(--muted);margin-top:4px}
.delta-up{color:var(--ok)}.delta-down{color:var(--err)}
/* forms */
label{display:block;font-size:13px;font-weight:500;color:var(--text-2)}
.field{display:grid;gap:4px}
.field .hint{font-weight:400;color:var(--muted);font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.form-grid .span-2{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}}
input[type=text],input[type=url],input[type=search],input[type=email],input[type=number],input[type=date],input[type=datetime-local],input[type=tel],input:not([type]),select,textarea{width:100%;font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--hair-strong);border-radius:8px;padding:6px 10px;min-height:32px;box-shadow:var(--inset-sm)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.input-prefix{display:flex;align-items:stretch;border:1px solid var(--hair-strong);border-radius:8px;overflow:hidden;background:var(--input-bg);box-shadow:var(--inset-sm)}
.input-prefix span{display:flex;align-items:center;padding:0 10px;background:var(--surface-2);color:var(--muted);font-size:13px;white-space:nowrap;border-right:1px solid var(--line)}
.input-prefix input{border:0;border-radius:0;box-shadow:none}
.input-prefix:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--text);padding:8px 0}
.check input{margin-top:3px}
.check small{display:block;font-weight:400;color:var(--muted)}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
/* Status cards: every notice, flash, update notice and callout is a clean card tinted with its status colour, never a side rail.
   --tone is info (the accent) unless a variant says ok, warn or err; an app's own box joins with "callout <variant>".
   The fill and hairline are the tone at --tint-fill / --tint-line over transparent, so the card takes the surface under it.
   --muted steps up to --text-2 inside, because muted on a tint drops below 4.5:1 (ratios: docs/design/admin-tokens.md). */
:is(.notice,.flash,.upd,.callout.info,.callout.ok,.callout.warn,.callout.err){--tint-bg:color-mix(in srgb,var(--tone) var(--tint-fill),transparent);--muted:var(--text-2);background:var(--tint-bg);border:1px solid color-mix(in srgb,var(--tone) var(--tint-line),transparent);box-shadow:none}
.notice,.flash,.upd,.callout{--tone:var(--accent)}
.notice.ok,.flash.ok,.callout.ok,.upd-updated{--tone:var(--ok)}
.notice.warn,.flash.warn,.callout.warn,.upd-license{--tone:var(--warn)}
.notice.err,.flash.err,.callout.err{--tone:var(--err)}
.notice{font-size:13px;border-radius:8px;padding:8px 12px;color:var(--text-2)}
.notice.warn{color:var(--text)}
.notice:empty{display:none}
.main > .notice,.main > form > .notice{margin-bottom:16px}
.notice a{color:inherit;text-decoration:underline}
details.more summary{cursor:pointer;color:var(--text-2);font-size:13px;margin-top:8px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:500;border-radius:8px;padding:0 12px;min-height:32px;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--btn-fill);color:var(--btn-ink);box-shadow:var(--hl-top)}
@media (hover:hover){.btn-primary:hover{opacity:.9}}
.btn-secondary{background:var(--grad-selected);color:var(--text);border-color:var(--hair-strong);box-shadow:var(--hl-top)}
@media (hover:hover){.btn-secondary:hover{background:var(--raised)}}
.btn-ghost{background:transparent;color:var(--text-2)}
@media (hover:hover){.btn-ghost:hover{background:var(--raised);color:var(--text)}}
.btn-danger{background:transparent;color:var(--err)}
@media (hover:hover){.btn-danger:hover{background:var(--err-soft)}}
.btn-sm{padding:0 8px;min-height:28px;font-size:13px}
.icon-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair-strong);background:var(--grad-selected);box-shadow:var(--hl-top);color:var(--text-2);border-radius:8px;min-height:28px;padding:0 8px;font:inherit;font-size:13px;cursor:pointer}
@media (hover:hover){.icon-btn:hover{background:var(--raised);color:var(--text)}}
.icon-btn.copied,.btn.copied{border-color:var(--ok);color:var(--ok)}
.icon-btn svg{width:14px;height:14px}
.icon-btn.icon-only{padding:0 6px}
.icon-btn.icon-only.copied::after{content:"Copied";font-size:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.row-actions{display:flex;gap:2px;justify-content:flex-end;flex-wrap:nowrap}
.row-actions form{display:inline}
.row-menu{display:inline-block}
.row-menu summary{list-style:none}.row-menu summary::-webkit-details-marker{display:none}
.row-menu[open] summary{background:var(--grad-selected);box-shadow:var(--hl-top),var(--ring-selected)}
/* A sticky cell (Links' action column) is a stacking context, so a menu opened inside it would paint under the sticky cells below: lift the cell while its menu is open. */
td:has(details.row-menu[open]){z-index:1}
.row-menu .menu{position:fixed;z-index:20;min-width:160px;background:var(--grad-float);border:1px solid var(--hair-strong);border-radius:8px;box-shadow:var(--hl-top),var(--shadow-float);padding:4px;display:grid;animation:admin-rise var(--t-menu) var(--ease)}
.row-menu form{display:block}
.menu-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:4px;padding:8px 10px;min-height:32px;font:inherit;font-size:13px;color:var(--text);cursor:pointer}
/* row status dot (rowDot): an 8px dot with a 28px click area and a popover with the state in words */
.row-dot{display:inline-block;vertical-align:middle;line-height:0}
.row-dot > summary{display:inline-block;position:relative;cursor:pointer;margin:0 6px 0 2px;min-width:0;box-shadow:0 0 0 3px color-mix(in srgb,currentColor calc(var(--dot-ring) * 100%),var(--card));list-style:none}
.row-dot > summary::-webkit-details-marker{display:none}
.row-dot > summary::before{content:"";position:absolute;inset:-10px}
.row-dot[open] > summary{background:currentColor}
.row-dot > summary:focus-visible{outline-offset:4px}
.dot-off{color:var(--muted)}
.row-dot .menu{padding:10px 12px;min-width:220px;max-width:300px;font-size:13px;line-height:18px;color:var(--text)}
.row-dot .menu strong{display:block;font-weight:500}
.row-dot .menu p{margin:4px 0 0;color:var(--text-2);overflow-wrap:anywhere}
/* one line per row: long secondary text is clamped; a click opens it (the full text also sits in the title tooltip) */
.clamp1{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.clamp1.open{white-space:normal;overflow-wrap:anywhere}
/* "n variants" / "n items": a quiet toggle that shows the rows under a parent (tr[data-parent]) */
.rows-toggle{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font:inherit;font-size:12px;line-height:16px;color:var(--muted);cursor:pointer;white-space:nowrap}
.rows-toggle::after{content:"";width:5px;height:5px;margin-bottom:1px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
.rows-toggle[aria-expanded="true"]::after{transform:rotate(45deg);margin-bottom:3px}
@media (hover:hover){.rows-toggle:hover{color:var(--text)}}
tr[hidden]{display:none!important}
@media (hover:hover){.menu-item:hover{background:var(--raised)}}.menu-item.danger{color:var(--err)}
/* toolbar, chips, segmented */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .grow{flex:1;min-width:180px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:8px;background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:500;border:1px solid transparent;white-space:nowrap}
@media (hover:hover){a.chip:hover{text-decoration:none;border-color:var(--hair-strong);color:var(--text)}}
a.chip[aria-current]{background:var(--grad-selected);color:var(--text);border-color:var(--hair-strong);box-shadow:var(--hl-top)}
.chip .count{color:var(--muted)}
.segmented{display:inline-flex;border:1px solid var(--hair-strong);border-radius:8px;overflow:hidden;background:var(--card)}
.segmented a,.segmented button{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;color:var(--text-2);font-weight:500;font-size:13px;border-right:1px solid var(--line)}
.segmented button{background:transparent;border-top:0;border-bottom:0;border-left:0;font-family:inherit;cursor:pointer}
.segmented a:last-child,.segmented button:last-child{border-right:0}
@media (hover:hover){.segmented a:hover,.segmented button:hover{background:var(--raised);text-decoration:none}}
.segmented a[aria-current],.segmented button[aria-current]{background:var(--grad-selected);box-shadow:var(--hl-top),var(--ring-selected);color:var(--text)}
.badge{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;font-weight:400;color:var(--text-2)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor calc(var(--dot-ring) * 100%),var(--card))}
.badge-off{color:var(--muted)}.badge-off::before{color:var(--muted)}
.badge-ok::before{color:var(--ok)}
.badge-warn,.badge-changed{margin-left:4px}.badge-warn::before,.badge-changed::before{color:var(--warn)}
.badge-err::before{color:var(--err)}
.chip-err{background:var(--err-soft);color:var(--err)}
/* a small text tag next to a row title (never a second dot): Off, Review, deleted, A/B */
.tag{display:inline-flex;align-items:center;min-height:18px;padding:0 6px;margin-left:6px;border:1px solid var(--hair-strong);border-radius:4px;font-size:12px;line-height:16px;font-weight:400;color:var(--text-2);white-space:nowrap;vertical-align:middle}
.tag-off{color:var(--muted)}
.tag-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.tile-text{font-size:16px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-title{font-family:var(--sans)}
.page-cell{display:flex;flex-direction:column;gap:1px;color:var(--text)}
@media (hover:hover){a.page-cell:hover{text-decoration:none}a.page-cell:hover code{text-decoration:underline}}
.page-title{font-weight:500;color:var(--text)}
tr.selected td{background:var(--raised)}
.scan-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;border-radius:8px;background:var(--raised)}
.progress{height:4px;border-radius:2px;background:var(--raised);margin-top:8px;overflow:hidden;width:min(360px,60vw)}
.progress-bar{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent);transition:transform var(--t-menu) var(--ease)}
.issues{list-style:none;padding:0;margin:0}
.issues li{padding:8px 0;border-top:1px solid var(--line);line-height:1.6}
/* tables */
.table-wrap{overflow-x:auto;position:relative;margin:0 -20px;border-top:1px solid var(--line)}
.table-wrap:last-child{margin-bottom:-20px}
.table-wrap + p{margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:400;font-size:12px;color:var(--muted);padding:8px 12px;background:var(--raised);white-space:nowrap}
td{padding:8px 12px;min-height:40px;border-top:1px solid var(--line);vertical-align:middle}
@media (hover:hover){tbody tr:hover td{background:color-mix(in srgb,var(--raised) 55%,transparent)}}
th:first-child,td:first-child{padding-left:20px}th:last-child,td:last-child{padding-right:20px}
td.num,th.num{text-align:right;white-space:nowrap}th.num{font-family:inherit}
.link-cell{display:flex;align-items:center;gap:6px}
.link-slug{font-weight:500;color:var(--text);white-space:nowrap}
.truncate{display:inline-block;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;color:var(--text-2)}
/* flash, status */
.flash{display:flex;gap:8px;align-items:center;padding:12px 16px;border-radius:8px;margin-bottom:16px;font-weight:400}
.flash{color:var(--text)}.flash > span:first-child{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--text-2);background:var(--raised)}
.flash.ok > span:first-child{color:var(--ok);background:var(--ok-soft)}.flash.err > span:first-child{color:var(--err);background:var(--err-soft)}
.status-line{padding:12px 16px;border-radius:8px;background:var(--raised);font-size:13px}
.status-line .ok{color:var(--ok)}.status-line .err{color:var(--err)}
/* health */
.check-group + .check-group{margin-top:24px}
.check-fix{color:var(--text)!important}
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.checks li p{margin:2px 0 0;color:var(--text-2);font-size:13px;line-height:20px}
.checks li strong{display:block}.checks li strong::first-letter,.widget[data-key="core.health"] .w-status li > div::first-letter,.widget[data-key="core.health"] .w-status li > div > a::first-letter{text-transform:uppercase}
.check-icon{width:8px;height:8px;margin:6px 6px 0;border-radius:50%;flex:none;font-size:0;color:var(--muted);background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor calc(var(--dot-ring) * 100%),var(--card))}
.checks .ok .check-icon{color:var(--ok)}
.checks .err .check-icon{color:var(--err)}
.checks .warn .check-icon{color:var(--warn)}
.checks .info strong{color:var(--text-2);font-weight:400}.checks .info .check-icon{color:var(--muted)}
/* overview */
.activity,.app-list{list-style:none;padding:0;margin:0}
.activity li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.activity time{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.app-list li{padding:8px 0;border-top:1px solid var(--line)}
.app-list p{margin:2px 0 0}
/* chart */
.chart{width:100%;height:auto;display:block}
.chart .grid line{stroke:var(--hair);stroke-width:1}
.chart .axis text{fill:var(--muted);font:11px var(--mono);font-variant-numeric:tabular-nums}
.chart .bar{fill:var(--s1)}
.chart .hit{fill:transparent;cursor:default}
@media (hover:hover){.chart .hit:hover + .bar,.chart .col:hover .bar{opacity:.85}}
.chart .col:focus{outline:none}.chart .col:focus .bar{stroke:var(--text);stroke-width:1.5}
.chart[data-kind="lines"] line,.chart[data-kind="lines"] path.line,.chart[data-kind="lines"] path.gap,.chart[data-kind="lines"] circle{vector-effect:non-scaling-stroke}
.chart[data-kind="lines"] path.line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart[data-kind="lines"] path.line.quiet{stroke-width:2.5}
.chart[data-kind="lines"] path.line.prev{stroke-width:1.5;opacity:.9}
.chart[data-kind="lines"] .grid .axis-line{stroke:var(--hair-strong)}
.chart[data-kind="lines"] g.glows{opacity:var(--glow-wide);mix-blend-mode:var(--glow-blend)}
.chart[data-kind="lines"] path.glow{fill:none;stroke-width:12;stroke-linejoin:round;stroke-linecap:round}
.chart[data-kind="lines"] path.glow.q{opacity:.55}
.chart[data-kind="lines"] path.glow[data-s="s1"]{opacity:var(--glow-blue)}
.chart[data-kind="lines"] path.glow.q[data-s="s1"]{opacity:calc(.55 * var(--glow-blue))}
.chart[data-kind="lines"] path.gap{fill:none;stroke:var(--card);stroke-width:5;opacity:var(--glow-gap);stroke-linejoin:round;stroke-linecap:round}
.chart[data-kind="lines"] .cross{stroke:var(--hair-strong);stroke-width:1;stroke-dasharray:2 3;opacity:0}
.chart[data-kind="lines"] .mark{opacity:0;stroke:var(--card);stroke-width:2}
.chart[data-kind="lines"] .col:hover .cross,.chart[data-kind="lines"] .col:focus .cross,.chart[data-kind="lines"] .col:hover .mark,.chart[data-kind="lines"] .col:focus .mark{opacity:1}
@media (max-width:640px){.chart .axis text{font-size:22px}.chart[data-kind="lines"] .axis text.xo{display:none}}
@media (prefers-reduced-motion:no-preference){.chart[data-kind="lines"] .mark,.chart[data-kind="lines"] .cross{transition:opacity var(--t-fast) var(--ease)}}
.chart[data-kind="combo"] line,.chart[data-kind="combo"] path.cline,.chart[data-kind="combo"] path.cedge,.chart[data-kind="combo"] circle{vector-effect:non-scaling-stroke}
.chart[data-kind="combo"] .grid .axis-line{stroke:var(--hair-strong)}
.chart[data-kind="combo"] .axis.right text{fill:var(--ax)}
.chart[data-kind="combo"] path.cbar{fill:var(--cb);opacity:.9}
.chart[data-kind="combo"] path.carea{fill:var(--cb);opacity:.22}
.chart[data-kind="combo"] path.cedge{fill:none;stroke:var(--cb);stroke-width:2;stroke-linejoin:round}
.chart[data-kind="combo"] path.cline{fill:none;stroke:var(--cl);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart[data-kind="combo"] circle.cdot{fill:var(--cl);stroke:var(--card);stroke-width:2}
.chart[data-kind="combo"] .hit{fill:transparent}
.chart[data-kind="combo"] .col:focus{outline:none}
.chart[data-kind="combo"] .cross{stroke:var(--hair-strong);stroke-width:1;stroke-dasharray:2 3;opacity:0}
.chart[data-kind="combo"] .col:hover .cross,.chart[data-kind="combo"] .col:focus .cross{opacity:1}
@media (max-width:640px){.chart[data-kind="combo"] .axis text.xo{display:none}}
.chart[data-kind="wave"] line,.chart[data-kind="wave"] path.line,.chart[data-kind="wave"] circle{vector-effect:non-scaling-stroke}
.chart[data-kind="wave"] .grid .axis-line{stroke:var(--hair-strong)}
.chart[data-kind="wave"] path.line{fill:none;stroke:var(--wl);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart[data-kind="wave"] path.wprev{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4;opacity:.7;vector-effect:non-scaling-stroke}
.chart[data-kind="wave"] g.glows{opacity:var(--glow-wide);mix-blend-mode:var(--glow-blend)}
.chart[data-kind="wave"] path.glow{fill:none;stroke:var(--wl);stroke-width:12;stroke-linejoin:round;stroke-linecap:round;opacity:var(--glow-blue)}
.chart[data-kind="wave"] circle.pt{fill:var(--wl);stroke:var(--card);stroke-width:2}
.chart[data-kind="wave"] text.pt-label{fill:var(--text);font:600 13px var(--mono);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.chart[data-kind="wave"] circle.pt,.chart[data-kind="wave"] .mark{transform-box:fill-box;transform-origin:center}
.chart[data-kind="wave"] .hit{fill:transparent}
.chart[data-kind="wave"] .col:focus{outline:none}
.chart[data-kind="wave"] .cross{stroke:var(--hair-strong);stroke-width:1;stroke-dasharray:2 3;opacity:0}
.chart[data-kind="wave"] .mark{fill:var(--wl);stroke:var(--card);stroke-width:2;opacity:0}
.chart[data-kind="wave"] .col:hover .cross,.chart[data-kind="wave"] .col:focus .cross,.chart[data-kind="wave"] .col:hover .mark,.chart[data-kind="wave"] .col:focus .mark{opacity:1}
@media (max-width:640px){.chart[data-kind="wave"] .axis text.xo{display:none}.chart[data-kind="wave"] text.pt-label{font-size:24px}.chart[data-kind="wave"] circle.pt,.chart[data-kind="wave"] .mark{transform:scale(1.8)}}
@media (prefers-reduced-motion:no-preference){.chart[data-kind="wave"] .mark,.chart[data-kind="wave"] .cross{transition:opacity var(--t-fast) var(--ease)}}
.tooltip{position:fixed;z-index:10;pointer-events:none;background:var(--grad-float);color:var(--text);border:1px solid var(--hair-strong);padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.4;box-shadow:var(--hl-top),var(--shadow-float);max-width:260px}
.tooltip strong{display:block}
/* auth pages */
.center-page{display:grid;place-items:center;min-height:100vh;padding:16px}
.narrow{max-width:560px;width:100%}
.narrow h1{margin:16px 0 12px}
.narrow ol{padding-left:20px}.narrow li{margin:6px 0}
/* Phone lists: add class="stack-sm" to a wide <table> (inside .table-wrap). Under 860px (the phone shell) it becomes a list.
   Tables with four or more columns (or class="rows-sm") get two-line list rows: the first cell is the title (or td.sm-title),
   td.sm-sub cells and .sm-sub elements are muted one-line secondary lines, one td.sm-value trails on the right (default: the
   first .num cell; its header is a small caption under the number), td.sm-hide cells are left out, .sm-only elements show
   only here, and every cell without a role is shown as a muted "Label value" line. Core moves the row's buttons into one
   "⋯" bottom sheet (ADMIN_JS) and makes the row tap open the editor (data-href, or the row's Edit link).
   Tables with three columns or fewer (or class="labels-sm") stack as "label value" lines with an auto-width label. */
.sm-only{display:none}
@media (max-width:860px){
  .stack-sm,.stack-sm tbody,.stack-sm tr,.stack-sm td{display:block;width:100%}
  .stack-sm thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stack-sm tr{border-top:1px solid var(--line)}
  .stack-sm tbody tr:first-child{border-top:0}
  .stack-sm td,.stack-sm td:first-child,.stack-sm td:last-child{border:0;padding:0;min-height:0;text-align:left;box-shadow:none;background:none}
  .stack-sm tbody tr:hover td{background:none}
  .stack-sm td:empty{display:none}
  .stack-sm .truncate,.stack-sm .reason{max-width:100%}
  .stack-sm td.num{white-space:normal}
  /* label/value stacks */
  .labels-sm tr{padding:12px 16px;display:grid;gap:4px}
  .labels-sm td[data-label]{display:flex;gap:8px;align-items:baseline;min-width:0}
  .labels-sm td[data-label]::before{content:attr(data-label);flex:0 1 auto;max-width:45%;color:var(--muted);font-size:12px;line-height:20px;font-weight:400;font-family:var(--sans)}
  .labels-sm td[data-label] > *{min-width:0}
  .labels-sm .row-actions{justify-content:flex-start;flex-wrap:wrap;gap:8px;padding-top:4px}
  .labels-sm .truncate{white-space:normal;overflow-wrap:anywhere}
  /* list rows */
  .rows-sm tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:10px 16px;min-height:56px}
  .rows-sm tr.sm-has-more{grid-template-columns:minmax(0,1fr) auto 32px}
  .rows-sm td{grid-column:1;min-width:0}
  .rows-sm td.sm-title,.rows-sm td.sm-title.wrap{font-size:14px;line-height:20px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rows-sm td.sm-title a{color:inherit}
  .rows-sm .page-cell > *{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rows-sm td.sm-title > :is(div,p,.sm-sub),.rows-sm .sm-sub,.rows-sm td.sm-sub,.rows-sm td[data-label]:not(.sm-title):not(.sm-value):not(.sm-more):not(.sm-inline){display:block;font-size:13px;line-height:18px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rows-sm td[data-label]:not(.sm-title):not(.sm-value):not(.sm-more):not(.sm-sub):not(.sm-inline)::before{content:attr(data-label) "  ";color:var(--muted)}
  .rows-sm .sm-sub .muted,.rows-sm td[data-label] .small{font-size:inherit;line-height:inherit}
  .rows-sm td.sm-sub > :is(div,p):not(.share-bar){display:inline!important;margin:0}
  /* links inside a secondary line are not tap targets on phones: the row itself opens the item */
  .rows-sm tr.sm-link td.sm-sub a{pointer-events:none;color:inherit}
  .rows-sm .sm-sub code,.rows-sm td.sm-title code{font-size:12px;word-break:normal}
  .rows-sm .sm-sub .truncate,.rows-sm td[data-label] .truncate{display:inline;max-width:none}
  .rows-sm td.sm-value{grid-column:2;grid-row:1/span 6;align-self:center;text-align:right;white-space:nowrap;font-size:13px;line-height:18px}
  .rows-sm td.sm-value.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;line-height:20px;color:var(--text)}
  .rows-sm td.sm-value.num[data-label]:not([data-label=""])::after{content:attr(data-label);display:block;font:12px/16px var(--sans);color:var(--muted);text-transform:lowercase}
  /* a group or tag shown in a secondary line is plain muted text, not a chip */
  .rows-sm td.sm-sub .chip{display:inline;min-height:0;padding:0;border:0;background:none;box-shadow:none;font:inherit;color:inherit}
  .rows-sm td.sm-value > div,.rows-sm td.sm-value > .badge{display:none}
  .rows-sm td.sm-value a{display:inline;min-height:0;min-width:0;padding:0;margin:0}
  .rows-sm td.sm-more{grid-column:3;grid-row:1/span 6;justify-self:end;align-self:center;width:auto}
  .rows-sm td:has(details.row-menu[open]){z-index:auto}
  .sm-hide{display:none!important}
  /* phone-only elements: blocks show as blocks, spans inline (links and buttons opt in where they live) */
  p.sm-only,div.sm-only{display:block}
  span.sm-only{display:inline}
  .rows-sm td.sm-inline{grid-column:1/-1;grid-row:auto;padding-top:8px}
  .rows-sm td.sm-inline .row-actions{justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .rows-sm td.sm-inline form{display:flex;gap:8px;align-items:center;flex:1 1 100%;min-width:0}
  .rows-sm td.sm-inline form input{flex:1 1 auto;width:auto!important;min-width:0;min-height:44px!important;padding:10px 12px!important}
  form .btn-sm,.toolbar .btn-sm{align-self:center}
  /* a bare checkbox in a cell (a select-row box) gets a 44px row of its own */
  .stack-sm td:has(> input[type=checkbox]),.stack-sm td:has(> input[type=radio]){display:flex;align-items:center;gap:10px;min-height:44px}
  .rows-sm td[colspan]{grid-column:1/-1}
  .rows-sm tr.sm-link{cursor:pointer}
  .rows-sm tr.sm-link:active{background:var(--raised)}
  .rows-sm .row-menu{display:block}
  .rows-sm .row-dot{display:inline-block}
  .rows-sm .sm-more-btn,.sm-more-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:0;min-width:0;padding:0;margin:0;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--text-2);font:inherit;font-size:18px;line-height:1;letter-spacing:1px;position:relative;cursor:pointer}
  .sm-more-btn::before{content:"";position:absolute;inset:-6px}
  .row-menu[open] .sm-more-btn{background:var(--grad-selected);box-shadow:var(--hl-top),var(--ring-selected)}
  .rows-sm .link-cell{flex-wrap:wrap;gap:6px}
  .rows-sm .link-cell .icon-btn{display:none}
  .rows-sm .badge{font-size:12px;gap:6px}
  .rows-sm .chip{min-height:24px;padding:0 8px;font-size:12px}
  .rows-sm .chips{flex-wrap:nowrap;overflow:hidden;gap:4px}
  /* the sheet names its row */
  .menu-title{padding:4px 16px 10px;margin:0 0 4px;border-bottom:1px solid var(--hair);font:12px/16px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* phones: tighter card padding (tokens: 16), and the table bleed follows */
  .card{padding:16px}
  .table-wrap{margin:0 -16px}.table-wrap:last-child{margin-bottom:-16px}
  th:first-child,td:first-child{padding-left:16px}th:last-child,td:last-child{padding-right:16px}
  .empty{padding:24px 8px}
}
/* Touch conventions (phones and tablets). Visible sizes follow the tokens (buttons 40, small buttons, chips and segments 32,
   fields 40 with 16px text); the 44px tap area comes from padding or a transparent ::before overlay, never a bigger box.
   Pressed states instead of hover; menus and dialogs become bottom sheets inside the safe area; long forms keep their actions in reach. */
@media (max-width:860px){
  .upd-close{position:relative;min-width:32px;min-height:32px}.upd-close::before{content:"";position:absolute;inset:-6px}
  input[type=file]{font-size:16px;max-width:100%;min-width:0}
  .btn,.icon-btn,a.chip,button.chip,.segmented a,.segmented button{position:relative}
  .btn::before,.icon-btn::before,a.chip::before,button.chip::before,.segmented a::before,.segmented button::before{content:"";position:absolute;inset:-2px 0}
  .btn-sm::before,.icon-btn::before,a.chip::before,button.chip::before,.segmented a::before,.segmented button::before{inset:-6px -2px}
  .btn{min-height:40px;padding:0 14px}
  .btn-sm{min-height:32px;padding:0 10px;font-size:13px}
  .icon-btn{min-height:32px;padding:0 8px;font-size:13px}
  .icon-btn svg{width:16px;height:16px}
  .icon-btn.icon-only{min-width:32px;padding:0 6px;justify-content:center;border-color:transparent;background:none;box-shadow:none}
  .icon-btn.icon-only:active{background:var(--raised)}
  /* one "Copy for AI" per card: the icon alone on phones (the label stays for screen readers) */
  .icon-btn.ai-btn:not(.icon-only){min-width:32px;padding:0 7px;justify-content:center;border-color:transparent;background:none;box-shadow:none}
  .icon-btn.ai-btn:active{background:var(--raised)}
  .icon-btn.ai-btn:not(.icon-only) .copy-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .icon-btn.ai-btn:not(.icon-only).copied::after{content:"Copied";font-size:12px;margin-left:4px}
  .theme-toggle{min-height:32px;width:32px}
  .segmented a,.segmented button{display:inline-flex;align-items:center;min-height:32px;padding:0 12px}
  .toolbar > .segmented,.dash-toolbar > .segmented{display:flex;width:100%;flex:1 1 100%}
  .toolbar > .segmented > *,.dash-toolbar > .segmented > *{flex:1 1 0;min-width:0;justify-content:center;padding:0 8px;white-space:nowrap}
  a.chip,button.chip{min-height:32px;padding:0 12px;font-size:13px}
  .chips{gap:8px}
  .card > .chips,.toolbar > .chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;margin-top:-6px;padding:6px 16px;scrollbar-width:none}
  .card > .chips::-webkit-scrollbar,.toolbar > .chips::-webkit-scrollbar{display:none}
  .card > .chips > *,.toolbar > .chips > *{flex:none}
  .row-actions{gap:8px}
  /* wrapped toolbar rows keep 12px between them so the 44px tap areas of 32px controls never overlap the row above */
  .toolbar,.dash-toolbar{gap:16px 10px}
  .toolbar .grow{flex:1 1 100%;min-width:0}
  .toolbar input[type=search],.toolbar input[type=text]{width:100%!important;max-width:none!important;flex:1 1 100%}
  .toolbar form[role=search]{flex:1 1 100%;display:flex}
  .card-head > .toolbar{flex:1 1 auto}
  @media (max-width:640px){.toolbar select{width:100%!important;max-width:none!important;flex:1 1 100%}}
  details>summary{padding:12px 0;margin-top:0;min-height:44px}
  .row-menu summary{padding:0;min-width:44px}
  .row-menu summary.sm-more-btn{min-width:32px}
  .row-dot > summary{min-width:0;min-height:0;padding:0;margin:0 8px 0 4px}
  .row-dot > summary::before{inset:-18px}
  .row-dot .menu{padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));font-size:14px;line-height:20px;max-width:none}
  .row-dot .menu::before{margin:-8px auto 12px}
  .rows-toggle{position:relative;font-size:13px;line-height:18px}
  .rows-toggle::before{content:"";position:absolute;inset:-13px -8px}
  .input-prefix{flex-wrap:wrap}.input-prefix span{white-space:normal;overflow-wrap:anywhere;padding:8px 12px}.input-prefix input{flex:1 1 140px;min-width:0}
  .brand{min-height:44px}
  .chart-data > summary,.upd-group > summary{min-height:44px}
  .menu-item{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 16px;font-size:14px;border-radius:8px}
  .menu-item svg{width:16px;height:16px;flex:none;color:var(--text-2)}
  input[type=text],input[type=url],input[type=search],input[type=email],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=tel],input:not([type]),select,textarea{min-height:44px;font-size:16px;padding:10px 12px;border-radius:8px}
  select{background-position:right 12px center;max-width:100%;min-width:0}
  .input-prefix span{font-size:14px}
  /* the focus ring sits in the field on phones: a 2px accent border instead of the outline (the outline reads heavy at phone widths) */
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--inset-sm),0 0 0 1px var(--accent)}
  .input-prefix:focus-within{outline:none;border-color:var(--accent);box-shadow:var(--inset-sm),0 0 0 1px var(--accent)}
  .field{gap:6px;align-content:start}.form-grid{gap:16px}
  .form-grid > :is(input,select,textarea,button){align-self:start}
  label{overflow-wrap:anywhere}label > *{min-width:0}
  /* text links in tables and lists: a 44px tap area around the text without moving the text (the extra area overlaps the row padding) */
  td a:not(.btn):not(.icon-btn):not(.chip):not(.page-cell):not(.rows-sm *),.w-list a,.w-status a,.issues a,.activity a{display:inline-block;min-height:44px;min-width:44px;padding:12px 0;margin:-12px 0;vertical-align:top;overflow-wrap:anywhere}
  td.num a{text-align:right}
  .rows-sm td a:not(.btn):not(.icon-btn):not(.chip):not(.page-cell){position:relative}
  .rows-sm td a:not(.btn):not(.icon-btn):not(.chip):not(.page-cell)::before{content:"";position:absolute;inset:-12px -4px}
  /* the trailing number: its tap area reaches into the gap on its left, not into the "⋯" on its right */
  .rows-sm td.sm-value a:not(.btn):not(.icon-btn):not(.chip):not(.page-cell)::before{inset:-14px -8px -14px -32px}
  .stack-sm td .btn,.stack-sm td .icon-btn{display:inline-flex}
  .check{padding:12px 0;min-height:44px}.check input{width:22px;height:22px;margin-top:0;flex:none}
  /* every checkbox and radio: a 22px box that never gets squeezed, inside a 44px label row (zero-specificity so an app's own option cards keep their layout) */
  input[type=checkbox],input[type=radio]{width:22px;height:22px;min-width:22px;flex:none;margin:0;accent-color:var(--accent)}
  label:where(:has(> input[type=checkbox],> input[type=radio])){display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:11px 0;font-size:14px;line-height:22px;font-weight:400;color:var(--text)}
  label:where(:has(> input[type=checkbox],> input[type=radio])) > span{min-width:0}
  /* option cards: the label on its own line, the help text under it in 13px with its own line height */
  label:where(:has(> input[type=checkbox],> input[type=radio])) > span > :is(.small,small,.hint):last-child{display:block;font-size:13px;line-height:18px;font-weight:400;margin-top:2px}
  td > input[type=checkbox]{vertical-align:middle}
  .widget-view{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
  .widget-controls select{min-height:44px;font-size:16px}
  .widget-controls .icon-btn{min-width:32px}
  .add-widget{min-height:88px}
  .notice{position:relative}
  .notice > .icon-btn.ai-btn{position:absolute;top:4px;right:4px}
  .notice:has(> .icon-btn.ai-btn){padding-right:44px}
  /* flash messages: a snackbar at the bottom (core dismisses a success after 4s; errors stay until tapped) */
  .main > .flash{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:36;margin:0;padding:12px 16px;background:linear-gradient(var(--tint-bg),var(--tint-bg)),var(--grad-float);color:var(--text);box-shadow:var(--hl-top),var(--shadow-float);animation:sheet-up var(--t-enter) var(--ease);transition:opacity var(--t-menu) var(--ease)}
  .main > .flash > span:first-child{background:transparent;color:inherit;width:auto;height:auto}
  .main > .flash.ok > span:first-child{color:var(--ok)}.main > .flash.err > span:first-child{color:var(--err)}
  /* pressed states (no hover on touch) */
  .btn:active,.icon-btn:active,.chip:active,.segmented a:active,.segmented button:active,.menu-item:active,.picker-list li:active,.widget-view:active{background:var(--raised);transform:scale(.98)}
  .btn-primary:active{background:var(--btn-fill);opacity:.85}
  /* bottom sheets: the widget picker and row menus */
  dialog.picker{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:85vh;max-height:85dvh;border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);animation:sheet-up var(--t-enter) var(--ease)}
  dialog.picker[open]{animation:sheet-up var(--t-enter) var(--ease)}
  dialog.picker::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--hair-strong);margin:8px auto -4px}
  .picker-list{max-height:calc(85dvh - 140px)}
  .picker-list li{padding:12px 8px;min-height:56px}
  .picker-list .btn{min-width:72px}
  .row-menu .menu{position:fixed;left:0!important;right:0;top:auto!important;bottom:0;min-width:0;border-radius:16px 16px 0 0;border-bottom:0;padding:12px 8px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:var(--hl-top),0 -8px 30px rgba(0,0,0,.3);animation:sheet-up var(--t-enter) var(--ease);z-index:33}
  .row-menu .menu::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--hair-strong);margin:-4px auto 8px}
  .row-menu[open]::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:32}
  /* long forms: the save row sticks to the bottom of the screen while its card is in view: a quiet Cancel and the full-width primary */
  .card > form:last-child > .form-actions:last-child,.card > .form-actions:last-child{position:sticky;bottom:0;z-index:5;background:var(--card);margin:16px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair);border-radius:0 0 var(--radius) var(--radius)}
  /* a save row that comes before the fields (Popups, Tag Manager) sticks under the app bar instead */
  .card > form > .form-actions:not(:last-child),.card > .form-actions:not(:last-child){position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:5;background:var(--card);margin:0 -16px 16px;padding:12px 16px;border-bottom:1px solid var(--hair)}
  .form-actions{gap:8px 12px}
  .form-actions .btn-primary{flex:1 1 auto;order:2}
  .form-actions > .btn:not(.btn-primary),.form-actions > form > .btn:not(.btn-primary){order:1}
  .form-actions > .btn-ghost,.form-actions > a.btn:not(.btn-primary):not(.btn-secondary){order:0;flex:none;padding:0 4px;color:var(--text-2);background:none;border-color:transparent;box-shadow:none}
  .form-actions > .muted,.form-actions > .small,.form-actions > span:not(.btn):not(.segmented){order:3;flex:1 1 100%;font-size:12px;line-height:16px}
  .form-actions > label{order:-1;flex:1 1 100%;margin:0 0 4px!important;padding:0 0 10px;border-bottom:1px solid var(--hair)}
  .form-actions .sm-only{display:inline-flex}
  /* code and long text never widen the page; paths break at slashes and dashes, not mid-word */
  pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
  code{overflow-wrap:anywhere;word-break:normal}
  .truncate{max-width:200px}
  h1{overflow-wrap:anywhere}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
  .tile{padding:14px 16px}
  .two-col{gap:12px}
  .card + .card{margin-top:12px}
  .dash-grid{gap:12px}
  .card-head{gap:8px}
  .card-head .btn,.card-head .icon-btn{flex:0 1 auto}
  .card-head a:not(.btn):not(.icon-btn):not(.segmented a):not(.chip){display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  /* ranked lists: "See all" links are text, with a 44px row */
  .card-head a.btn-ghost{padding:0;background:none;color:var(--text-2)}
  .page-cell{display:flex}
}
/* Phone editors: related fields in one card, hairlines between them, disclosure rows with a chevron (iOS inset grouped form). */
@media (max-width:640px){
  .form-grid{gap:0}
  .form-grid > .field,.form-grid > .span-2:not(.field):not(.form-actions):not(details),.form-grid > fieldset{padding:12px 0;border-top:1px solid var(--hair)}
  .form-grid > :first-child{border-top:0;padding-top:0}
  .form-grid > .form-actions{border-top:0;padding:0}
  details.more > .form-grid{padding-bottom:4px}
}
@media (max-width:860px){
  details.more{border-top:1px solid var(--hair)}
  details.more > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 0;margin:0;font-size:14px;color:var(--text);list-style:none;cursor:pointer}
  details.more > summary::-webkit-details-marker{display:none}
  details.more > summary::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
  details.more[open] > summary::after{transform:rotate(45deg)}
  /* a card folded away on phones until its button opens it (the Links form) */
  .sm-folded{display:none}
}
@media (max-width:860px) and (orientation:landscape){
  .appbar{min-height:48px}
  .menu-btn,.appbar-status,.appbar .theme-toggle{height:44px}
  .card > form > .form-actions:not(:last-child),.card > .form-actions:not(:last-child){top:calc(48px + env(safe-area-inset-top,0px))}
  .side{padding-left:max(12px,env(safe-area-inset-left,0px))}
}
/* The edit panel (editPanel). Without JS: a card in the page. With JS: a floating sheet on the right over the scrim, the
   drawer's mirror (same scrim, surface level 3, one short entrance); a full-screen sheet on phones. */
.ep-backdrop{display:none}
.ep-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-head h2:focus{outline:none}
.ep-close{flex:none;width:32px;padding:0}
.ep-close svg{width:16px;height:16px}
.ep-error{margin:0 0 16px}
.ep-error[hidden]{display:none}
.ep-error:focus{outline:none}
.ep-foot{flex-wrap:nowrap}
.ep-note{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-foot .ep-delete{margin-left:auto}
.ep-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--hair)}
.ep-section > .card-head h2{font-size:14px}
html.js .ep{position:fixed;inset:0;z-index:60}
html.js .ep-backdrop{display:block;position:absolute;inset:0;background:rgba(0,0,0,.42)}
html.js .ep .ep-sheet{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);margin:0;padding:0;display:flex;flex-direction:column;border:0;border-left:1px solid var(--hair-strong);border-radius:0;background:var(--grad-float);box-shadow:var(--hl-top),var(--shadow-float)}
html.js .ep .ep-head{flex:none;flex-wrap:nowrap;margin:0;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px 24px;border-bottom:1px solid var(--hair)}
html.js .ep .ep-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px max(24px,env(safe-area-inset-right,0px)) 24px 24px}
html.js .ep .ep-sheet > .ep-foot{position:static;flex:none;margin:0;padding:12px max(24px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) 24px;border-top:1px solid var(--hair);border-radius:0;background:none}
html.js .ep .form-grid{grid-template-columns:minmax(0,1fr)}
html.ep-lock body{position:fixed;width:100%;overflow:hidden}
@keyframes ep-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes ep-fade{from{opacity:0}to{opacity:1}}
html.js .ep.ep-enter .ep-sheet{animation:ep-in var(--t-enter) var(--ease)}
html.js .ep.ep-enter .ep-backdrop{animation:ep-fade var(--t-enter) var(--ease)}
/* Back on a scrolled list after a save: the message is the snackbar phones use, so it is seen. */
.main > .flash.flash-snack{position:fixed;right:24px;bottom:24px;z-index:36;max-width:min(480px,calc(100vw - 48px));margin:0;background:linear-gradient(var(--tint-bg),var(--tint-bg)),var(--grad-float);box-shadow:var(--hl-top),var(--shadow-float);animation:sheet-up var(--t-enter) var(--ease);transition:opacity var(--t-menu) var(--ease);cursor:pointer}
@media (max-width:640px){
  html.js .ep .ep-sheet{width:100%;border-left:0}
  html.js .ep .ep-head{padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));min-height:56px}
  html.js .ep .ep-body{padding:16px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
  html.js .ep .ep-sheet > .ep-foot{padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  html.js .ep.ep-enter .ep-sheet{animation-name:sheet-up}
}
@media (max-width:860px){
  .ep-close{width:32px}
  .ep-foot{flex-wrap:wrap}
  .ep-foot .ep-delete{margin-left:0}
  .ep-note{white-space:normal}
}

/* store shell: public top bar (desktop), focus bar (checkout) */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 12px;border-radius:8px;background:var(--card);color:var(--text);box-shadow:var(--shadow-float)}
.skip:focus{left:16px}
.brand-mark{background:var(--accent)}
.topbar{display:none}
.store-public .topbar,.store-focus .topbar{display:block;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hair)}
.topbar-in{display:flex;align-items:center;gap:24px;max-width:1120px;margin:0 auto;min-height:56px;padding:0 32px}
.topbar .brand{padding:0}.topbar .brand-mark::after{background:var(--bg)}
.topnav{display:flex;gap:4px}
.topnav a,.chips a{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:8px;color:var(--text-2)}
@media (hover:hover){.topnav a:hover,.chips a:hover{background:var(--raised);color:var(--text);text-decoration:none}}
.topnav a[aria-current],.chips a[aria-current]{background:var(--grad-selected);color:var(--text);box-shadow:var(--hl-top),var(--ring-selected),var(--shadow-selected)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.focus-note{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;min-width:0}
.focus-note svg{color:var(--ok)}
.focus-note span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar .brand{flex:1;min-width:0;padding:0 4px}
@media (min-width:861px){.store-public .appbar,.store-public .side,.store-public .scrim{display:none}}
.store-public,.store-focus{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.store-public .layout,.store-focus .layout{display:block;min-height:0;background:none;flex:1 0 auto}
.store-public .main,.store-focus .main{max-width:1120px;margin:0 auto;padding:40px 32px 64px}
.store-public .main.w-reading{max-width:800px}
.store-public .main.w-narrow{max-width:480px}
.store-focus .main{max-width:720px}
.store-notice{padding:6px 16px;text-align:center;font-size:13px;line-height:20px;color:var(--text-2);background:var(--bg-deep);border-bottom:1px solid var(--hair)}
.site-foot{border-top:1px solid var(--hair);background:var(--bg-deep)}
.site-foot-in{max-width:1120px;margin:0 auto;padding:24px 32px calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;color:var(--muted);font-size:13px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.site-foot a{color:var(--text-2)}
/* Cookie settings: only when Cookie Consent put its banner on the page (visitors who are asked); elsewhere it would do nothing */
.foot-cookies{display:none}body:has(#site-consent-banner) .foot-cookies{display:inline}
.site-foot .foot-note{flex:1 1 100%}
.site-foot .foot-compat{margin-top:-4px;font-size:12px;line-height:16px}
/* WCAG AA (site audit 2026-11-04): links inside footer sentences are underlined, not told apart by colour alone; code on its chip and table heads use the secondary text colour (muted on the chip/raised background was 4.27:1) */
.site-foot .foot-note a{text-decoration:underline;text-underline-offset:2px}
.muted code,.foot-note code,.prose th{color:var(--text-2)}
.store-focus .site-foot-in{max-width:720px}
@media (max-width:860px){
  .store-public .topbar{display:none}
  .topbar-in{padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));gap:12px}
  .store-public .main,.store-focus .main{padding:24px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
  .site-foot-in{padding:20px 16px calc(28px + env(safe-area-inset-bottom,0px))}
  .site-foot nav a,.legal-links a{display:inline-flex;align-items:center;min-height:44px}
  .top-actions .btn{min-height:32px}
}
/* reading pages: headings and text in the admin's scale */
.store-public .main > h1,.store-focus .main > h1{margin-bottom:8px}
.lead,.store-public .main > h1 + p.muted,.store-focus .main > h1 + p.muted{font-size:16px;line-height:24px;color:var(--text-2);margin:0 0 24px;max-width:680px}
.store-public .main > h2,.store-focus .main > h2{font-size:16px;line-height:24px;margin:32px 0 12px}
.store-public .main > ul,.store-focus .main > ul,.prose ul,.prose ol{padding-left:20px;margin:0 0 12px}
.main li{margin:4px 0}
.hero{padding:24px 0 8px}
.hero h1{font-size:32px;line-height:40px;max-width:720px}
.prose{max-width:720px;font-size:14px;line-height:22px}
.prose h2{font-size:16px;line-height:24px;margin:32px 0 8px}.prose h3{margin:24px 0 8px}
.prose p{margin:0 0 12px}
.prose img{max-width:100%}
.prose table{margin:0 0 16px}.prose th,.prose td{border-bottom:1px solid var(--hair)}
.prose blockquote{margin:0 0 12px;padding:0 16px;border-left:2px solid var(--hair-strong);color:var(--text-2)}
pre{background:var(--input-bg);border:1px solid var(--hair);border-radius:8px;padding:12px;margin:8px 0 12px;overflow-x:auto;font:12.5px/1.5 var(--mono);box-shadow:var(--inset-sm)}
pre code{font:inherit;word-break:normal;background:none;padding:0}
:not(pre) > code{background:var(--raised);border-radius:4px;padding:1px 4px}
/* catalog cards */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid > .card{margin-top:0}
a.card{display:flex;flex-direction:column;gap:4px;color:var(--text-2);text-decoration:none}
@media (hover:hover){a.card:hover{border-color:var(--hair-strong);text-decoration:none}a.card:hover b{text-decoration:underline}}
a.card:active{background:var(--raised)}
a.card b{display:block;color:var(--text);font-weight:500}
a.card small{display:block;color:var(--muted);font-size:12px;line-height:16px;margin-top:auto;padding-top:8px}
.app-glyph{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;margin-bottom:8px;color:var(--text);background:var(--grad-selected);box-shadow:var(--hl-top),var(--ring-selected)}
/* the one catalog: filter chips (the top bar's link style), category sections, the 3 steps, search */
.chips{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.cat{margin-top:28px}.cat .card-head{margin-bottom:4px}.cat h2{font-size:16px;line-height:24px;margin:0}.cat h2 a{color:var(--text)}.cat > p.muted{margin:0 0 12px}
ol.how{list-style:none;padding:0;margin:0}ol.how li{margin:0;color:var(--text-2)}ol.how b{display:flex;align-items:center;color:var(--text);font-weight:500;margin-bottom:4px}
.catalog-search{margin:0 0 12px;max-width:560px}
a.card .vlist{margin-top:8px}
.row > .back{margin-bottom:16px}
@media (max-width:860px){.chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 8px;padding:0 16px;scrollbar-width:none}.chips a{flex:none;min-height:40px}.row > .back{margin-bottom:8px}}
/* callouts: a hairline card with a rail in the accent (or ok / error) */
.note{background:var(--grad-card);border:1px solid var(--hair);border-radius:var(--r-12);padding:16px 20px;margin:20px 0;color:var(--text);box-shadow:var(--hl-top),var(--shadow-sm)}
/* The store's own site apps (src/site-apps.ts), through their documented styling hooks: waitlist sign-ups placed on the
   other-host playbooks, and the Reviews wall of love on the home page. Accent and ink follow the light/dark theme. */
.sw,.rv{--sf-accent:var(--accent);--sf-ink:var(--accent-ink)}
.sw-placed{margin:32px 0 16px;max-width:720px}.sw-placed+.sw-placed{margin-top:16px;border-top:1px solid var(--hair);padding-top:16px}
.store-love:not(:empty){margin:28px 0}
/* status callouts: a small status dot before the text, never a side rail (owner, 2026-11-04) */
.note.ok,.note.err,.new-key{position:relative;padding-left:38px}
.note.ok::before,.note.err::before,.new-key::before{content:"";position:absolute;left:20px;top:23px;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.note.err::before{background:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 18%,transparent)}
.note > b:first-child{display:block;margin-bottom:4px}
.note p{margin:6px 0}.note p:last-child{margin-bottom:0}
.note pre{margin:8px 0 0}
/* small layout helpers used by the public pages */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row > input[type=text],.row > input[type=email],.row > input[type=search]{flex:1 1 200px;width:auto;min-width:0}
.stack{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.btn-block{width:100%}
.price{font-variant-numeric:tabular-nums;white-space:nowrap}
td.price{font-family:var(--mono)}
.card-head .price{color:var(--text-2)}
@media (max-width:400px){.card-head .price{white-space:normal}}
.card > .table-wrap:first-child{margin-top:-20px;border-top:0;border-radius:var(--r-12) var(--r-12) 0 0}
.card > .table-wrap:only-child{border-radius:var(--r-12)}
td.price,th.price{text-align:right}
.total td{border-bottom:0;padding-top:12px}
.total .price{font-size:16px;line-height:24px;color:var(--text)}
s.muted{text-decoration-color:var(--muted)}
/* checkboxes and radios on desktop: box and words in one row (phones get the admin's 44px rows) */
label:where(:has(> input[type=checkbox],> input[type=radio])){display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;font-weight:400;color:var(--text)}
label:where(:has(> input[type=checkbox],> input[type=radio])) > input{margin:2px 0 0;flex:none;accent-color:var(--accent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
/* key/value lists: two columns; on phones, list rows with hairlines */
.kv,.main dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;margin:0}
.kv dt,.main dl dt{color:var(--muted)}.kv dd,.main dl dd{margin:0;overflow-wrap:anywhere}
@media (max-width:640px){
  .kv,.main dl{grid-template-columns:minmax(88px,38%) minmax(0,1fr);gap:0}
  .kv dt,.main dl dt{padding-right:12px!important}
  .kv dt,.kv dd,.main dl dt,.main dl dd{padding:10px 0;border-top:1px solid var(--hair)}
  .kv dt:first-of-type,.kv dt:first-of-type + dd,.main dl dt:first-of-type,.main dl dt:first-of-type + dd{border-top:0;padding-top:0}
}
/* account pages */
pre.code{background:var(--input-bg);border:1px solid var(--hair);border-radius:8px;padding:10px 12px;margin:8px 0;font:12.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.steps{list-style:none;padding:0;margin:0}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;margin:0;border-top:1px solid var(--hair)}
.steps li:first-child{border-top:0;padding-top:0}.steps li:last-child{padding-bottom:0}
.steps .mark{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--hair-strong);display:grid;place-items:center;color:var(--ok);margin-top:1px}
.steps .done .mark{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.steps .done strong{color:var(--muted);font-weight:400}
.steps strong{display:block}.steps p{margin:2px 0 0;color:var(--text-2)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form input[type=text]{width:auto;flex:1 1 150px;min-width:0}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:860px){.cols{grid-template-columns:minmax(0,1fr);gap:12px}}
.card + .card,.cols + .card,.card + .cols,.tiles + .card,.tiles + .cols,.flash + .card,.card + p,.main > p + .card{margin-top:16px}
.cols > .card,.grid > .card,.grid > .card + .card{margin-top:0}
.danger{border-color:color-mix(in srgb,var(--err) 40%,var(--hair))}
.vlist{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}
ul.plain{margin:0;padding-left:18px}ul.plain li{margin:4px 0}
.rel + .rel{margin-top:12px}.rel-ver{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--text-2)}
.rel-history{margin-top:12px}.rel-history + .rel-history{margin-top:4px}.rel-history .rel:first-of-type{margin-top:8px}
.site-head{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.site-head h2{margin:0;font-family:var(--mono);font-size:14px}
.site-head .label{font-family:var(--sans);font-weight:500;margin-right:8px}
.twin{margin-top:24px;font-size:12px;color:var(--muted)}
.legal-links{display:flex;flex-wrap:wrap;gap:4px 16px}.legal-links a{color:var(--text-2)}
.twin + .legal-links{margin-top:8px}

.wrap-cell{white-space:normal}
th{white-space:nowrap}
/* the circled step number (Agents page); .num is core's figures class (money, counts), never restyle it here */
.step-badge{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--hair-strong);font-size:13px;margin-right:8px;vertical-align:2px}
.back{display:inline-flex;align-items:center;gap:4px;margin:0 0 16px;color:var(--text-2);align-self:flex-start}
.back svg{transform:rotate(180deg)}
@media (max-width:860px){.back{min-height:44px;margin:-8px 0 8px}}
.dl{position:relative}
.dl > summary{display:inline-flex;list-style:none;cursor:pointer}.dl > summary::-webkit-details-marker{display:none}
.dl-form{display:grid;gap:12px;margin-top:8px;padding:12px;border:1px solid var(--hair);border-radius:8px;background:var(--input-bg);max-width:20rem}
.dl-form .field{margin:0}.dl-form select,.dl-form input[type=text]{width:100%}.dl-form p{margin:0}
.site-list{list-style:none;margin:0;padding:0}
.site-list li{margin:0}
.site-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;padding:12px 4px;min-height:44px;border-top:1px solid var(--hair);color:inherit;text-decoration:none}
.site-list li:first-child .site-row{border-top:0}
@media (hover:hover){.site-row:hover{background:var(--input-bg);text-decoration:none}.site-row:hover .site-name{text-decoration:underline}}
.site-row:active{background:var(--raised)}
.site-main{flex:1 1 12rem;min-width:0;display:flex;flex-direction:column}
.site-name{font-family:var(--mono);font-size:14px;overflow-wrap:anywhere;color:var(--text)}
.site-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.site-chev{color:var(--muted);margin-left:auto;display:inline-flex}
@media (max-width:860px){
  .site-list{margin:-4px -16px}
  .site-row{position:relative;padding:12px 40px 12px 16px;min-height:64px;gap:2px 8px}
  .site-main{flex-basis:100%}
  .site-meta{font-size:12px}
  .site-chev{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
}
.install-cell{min-width:11rem}
.install-cell details,.install-all details{margin-top:6px}
.install-cell summary,.install-all summary{cursor:pointer;color:var(--muted);font-size:12px}
.install-cell pre.code,.install-all pre.code{margin:6px 0 0;font-size:12px}
.install-all{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.install-all > div{flex:1 1 20rem}
[hidden]{display:none!important}
/* empty states: what's missing and the next step */
.empty strong{color:var(--text);font-weight:500}
/* phone list rows: the status badge stays visible as the row's trailing value, actions sit on their own line */
@media (max-width:860px){
  .stack-sm thead tr{display:none}
  .rows-sm td.sm-value > .badge{display:inline-flex}
  .rows-sm td.sm-value .badge::before{box-shadow:none}
  .rows-sm td.sm-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .rows-sm td.sm-inline:empty{display:none}
  .rows-sm td.sm-inline form{flex:0 1 auto}
  .rows-sm td.sm-inline .dl-form,.rows-sm td.sm-inline details{flex:1 1 100%}
  /* short forms whose tick box sits right above the button (checkout, claim) keep the button in place */
  .card.static-actions > form > .form-actions:last-child{position:static;margin:16px 0 0;padding:0;border-top:0;background:none;border-radius:0}
  summary.btn{padding:0 14px;min-height:40px;margin:0}
  summary.btn-sm{padding:0 10px;min-height:32px}
  /* a row's buttons share one line under its title; the copy-prompt fallback hides when the copy button works */
  .actions-sm tr{display:flex!important;flex-wrap:wrap;align-items:center;column-gap:8px}
  .actions-sm td{flex:1 1 100%;order:2;width:auto}
  .actions-sm td.sm-title{flex:1 1 0;order:0}
  .actions-sm td.sm-value{flex:none;order:1}
  .actions-sm td.sm-inline{flex:0 0 auto;order:3;padding-top:8px}
  .actions-sm td.sm-inline:has(details[open]){flex-basis:100%}
  html.has-js .actions-sm .install-cell details,html.has-js .install-all details{display:none}
  .rows-sm td.sm-inline.install-cell{display:block}
  .rows-sm tr{align-items:start}
  .rows-sm td.wrap-cell.sm-title{white-space:normal}
  .card > .table-wrap:first-child{margin-top:-16px}
}
/* the public top bar's account menu (signed in): a native disclosure, links in a small popover */
.acct{position:relative}
.acct > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:32px;max-width:260px;padding:0 8px 0 4px;border-radius:8px;border:1px solid var(--hair-strong);background:var(--card);color:var(--text);cursor:pointer;font-size:13px}
.acct > summary::-webkit-details-marker{display:none}
@media (hover:hover){.acct > summary:hover{background:var(--raised)}}
.acct > summary .chev{display:inline-flex;color:var(--muted);transform:rotate(90deg);transition:transform var(--t-enter,150ms) var(--ease,ease)}
.acct[open] > summary .chev{transform:rotate(-90deg)}
.acct > summary .chev svg{width:14px;height:14px}
.acct-initial{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--grad-selected);box-shadow:var(--hl-top),var(--ring-selected);font-size:12px;font-weight:600;line-height:1;text-transform:uppercase}
.acct-email{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.acct-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:232px;padding:6px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-12);box-shadow:var(--shadow-float)}
.acct-who{padding:6px 10px 8px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--hair);margin-bottom:4px}
.acct-pop a,.acct-pop button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--text-2);font:inherit;font-size:14px;text-align:left;cursor:pointer;text-decoration:none}
.acct-pop svg{width:16px;height:16px;color:var(--muted);flex:none}
@media (hover:hover){.acct-pop a:hover,.acct-pop button:hover{background:var(--raised);color:var(--text);text-decoration:none}}
.acct-pop a:focus-visible,.acct-pop button:focus-visible{background:var(--raised);color:var(--text)}
.acct-pop form{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--hair)}
/* the account sidebar's pinned footer: email, Settings and Log out (the site admin's one-row account footer) */
.side-foot-actions .side-out[aria-current]{color:var(--text)}
.side-foot-actions form{margin:0}
.nav form{margin:0}
.ways td.sm-sub{white-space:normal!important}
.nav-out{width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.nav > .nav-label[title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){.side-foot-actions{gap:0}.side-foot-actions > .side-out{margin-right:0}}
/* the account sidebar's way back to the public site, under the wordmark */
.side-back{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin:0 0 12px;padding:0 8px;min-height:28px;border-radius:8px;font-size:13px;color:var(--muted)}
.side-back svg{width:14px;height:14px;transform:rotate(180deg)}
@media (hover:hover){.side-back:hover{color:var(--text);background:var(--raised);text-decoration:none}}
@media (max-width:860px){.side-back{min-height:44px;margin:0 0 4px}}
.appbar-acct{display:none}
@media (max-width:860px){.store-public .appbar-acct{display:inline-flex;flex:none;min-height:32px}}
/* the account catalog and in-account app pages: the public catalog's pieces, inside the account shell */
.store-account .catalog > .cat:first-of-type,.store-account .catalog > h2{margin-top:20px}
.acct-reading > .row:first-child .back{margin-bottom:8px}
.store-account .main > h2,.acct-reading > h2{font-size:16px;line-height:24px;margin:32px 0 12px}
.acct-reading{max-width:860px}
/* the home page (views.ts homePage): full-width bands, each with the same head (eyebrow, heading, one-line intro), hairlines
   between them, a full-bleed hero (hero-sundog.ts paints its colour field), the Works with band, the final call */
.eyebrow{margin:0 0 8px;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600}
.main.w-full{max-width:none;padding:0;overflow-x:clip}
.band{border-top:1px solid var(--hair)}
.band-deep{background:var(--bg-deep)}
.band-in{max-width:1120px;margin:0 auto;padding:96px 32px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:40px}
.sec-head-text{min-width:0;max-width:680px}
.band .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;letter-spacing:.1em}
.band .eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.sec-head h2{font-size:36px;line-height:44px;letter-spacing:-.025em;font-weight:600;margin:0;text-wrap:balance}
.sec-lead{margin:12px 0 0;font-size:16px;line-height:26px;color:var(--text-2);max-width:600px}
.home-more{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;min-height:44px}
.home-more svg{width:14px;height:14px}
.home-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.home-grid > a.card{padding:22px;gap:6px}
.home-grid > a.card b{font-size:15px}
.cat-tile small{display:flex!important;align-items:center;gap:4px;color:var(--muted)}
.cat-tile small svg{width:12px;height:12px}
/* hero: full bleed. Without the sundog field (light theme, or the effect off) a soft warm light at the right. */
.home-hero{position:relative;padding:0;margin:0;background:radial-gradient(ellipse 46% 70% at 80% 26%,var(--accent-soft),transparent 72%),var(--bg)}
.hero-in{max-width:1120px;margin:0 auto;padding:88px 32px 72px}
.tm{font-size:.3em;line-height:0;vertical-align:1.9em;font-weight:500;letter-spacing:0;margin-left:.06em}
.home-hero h1{font-size:60px;line-height:64px;letter-spacing:-.035em;font-weight:600;max-width:760px;margin:0 0 20px;text-wrap:balance}
.home-hero .lead{font-size:19px;line-height:30px;max-width:600px;margin:0 0 32px}
.hero-eyebrow{margin-bottom:20px}
.hero-cta{margin:0 0 14px;gap:12px}
.hero-cta .btn{min-height:48px;padding:0 24px;font-size:15px}
.hero-note{margin:0}
/* Works with: one full-width strip right under the hero; its label lines up with the page column */
.band-ww{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--grad-card);box-shadow:var(--hl-top),var(--shadow-sm)}
.band-ww .ww{margin:0;padding:18px max(32px,calc((100% - 1056px) / 2));border:0}
.band-ww .ww-rows{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
/* signed in: the next step, right under the strip */
.band-next .band-in{padding-top:40px;padding-bottom:40px}
.band-next .next-step{margin:0;padding:20px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center}
.band-next .next-step > :not(.row){grid-column:1}
.band-next .next-step > .row{grid-column:2;grid-row:1 / span 3;margin:0!important}
.band-next .next-step > b{font-size:15px}
/* hairline panels: cells joined in one bordered box */
.panel{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--hair-strong);border-radius:var(--r-16);background:var(--grad-card);box-shadow:var(--hl-top),var(--shadow-sm);overflow:hidden}
.panel-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.panel-cell{margin:0!important;padding:28px 28px 32px;color:var(--text-2)}
.panel-cell + .panel-cell{border-left:1px solid var(--hair)}
.panel-cell b{display:block;color:var(--text);font-size:17px;line-height:24px;font-weight:500;margin:0 0 8px}
.panel-cell p{margin:0;font-size:14px;line-height:22px}
.step-num{display:block;margin:0 0 40px;font:500 13px/16px var(--mono);letter-spacing:.04em;color:var(--accent)}
/* why it's different: a ruled list, the claim on the left, the plain-words reason on the right */
.why-list{margin:0;border-top:1px solid var(--hair-strong)}
.why-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 48px;padding:22px 0;border-bottom:1px solid var(--hair)}
.why-row h3{margin:0;color:var(--text);font-size:17px;line-height:26px;font-weight:500}
.why-row p{margin:0;color:var(--text-2);font-size:15px;line-height:24px}
/* for AI agents: words left, the command in a terminal-style panel right */
.agent-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 56px;align-items:center}
.agent-text > p{margin:0 0 16px;font-size:16px;line-height:26px;color:var(--text-2)}
.ticks{list-style:none;margin:0 0 12px;padding:0}
.ticks li{position:relative;margin:0;padding:6px 0 6px 22px;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.term{border:1px solid var(--hair-strong);border-radius:14px;background:var(--grad-card);box-shadow:var(--hl-top),var(--shadow-float);overflow:hidden;min-width:0}
.term-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--hair);background:var(--grad-selected);box-shadow:var(--hl-top);color:var(--muted);font-size:12px}
.term-bar i{width:9px;height:9px;border-radius:50%;background:var(--hair-strong)}
.term-bar i:nth-child(2){width:11px;height:11px;background:var(--accent);opacity:.85}
.term-bar span{margin-left:8px}
.term pre.code{margin:0;padding:22px 20px 8px;border:0;border-radius:0;background:none;box-shadow:none;font-size:13.5px;line-height:22px;color:var(--text)}
.term-foot{margin:0;padding:12px 20px 20px}
.agent-split>.term>pre.code{padding:20px;border-bottom:1px solid var(--hair)}
.agent-split>.term .term-foot{padding:16px 20px 20px}
/* "agent" hero (?hero=agent): the connect command in the hero, the way in attached under it */
.hero-term{max-width:700px;margin:0}
.hero-agent>.hero-in{padding-top:88px}
.hero-term-cmd{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 20px;border-bottom:1px solid var(--hair)}
.ag-bar{flex-wrap:wrap;row-gap:6px}.ag-tabs-label{margin-left:8px}
.term-bar .ag-tabs{display:inline-flex;gap:2px;margin-left:auto;padding:2px;border-radius:8px;background:rgb(0 0 0/.25);box-shadow:inset 0 0 0 1px var(--hair)}
.ag-tab{padding:3px 9px;border-radius:6px;font-size:11.5px;line-height:16px;color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s}
.ag-tab:hover{color:var(--text-2)}
.ag-r:checked+.ag-tab{color:var(--text);background:var(--grad-selected);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair-strong)}
.ag-r:focus-visible+.ag-tab{outline:2px solid rgb(255 198 124/.6);outline-offset:1px}
.ag-row{flex-wrap:wrap}.ag-row .ag-note{flex-basis:100%;margin:0 0 -4px}
.prose .ag-term{margin:12px 0 4px}.prose .ag-row p.ag-note{margin:0 0 -4px}
.ag-tab{white-space:nowrap}
.ag-more{display:inline-flex;align-items:center;padding:3px 6px}.ag-more svg{width:12px;height:12px;transform:rotate(90deg);transition:transform .15s}
.ag-m:checked~.ag-tabs .ag-more svg{transform:rotate(-90deg)}.ag-m:not(:checked)~.ag-tabs:has(~.ag-tabs2 .ag-xr:checked) .ag-more{color:var(--text);background:var(--grad-selected);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair-strong)}.ag-m:checked~.ag-tabs .ag-more{color:var(--text-2)}
.ag-m:focus-visible~.ag-tabs .ag-more{outline:2px solid rgb(255 198 124/.6);outline-offset:1px}
.term-bar .ag-tabs.ag-tabs2{display:none;flex-wrap:wrap}.ag-m:checked~.ag-tabs2{display:inline-flex}
.ag-break{display:none;flex-basis:100%;height:0}.ag-m:checked~.ag-break{display:block}
.ag-term:not(:has(.ag-r[value=codex]:checked)) .ag-row[data-ag=codex],.ag-term:not(:has(.ag-r[value=cursor]:checked)) .ag-row[data-ag=cursor],.ag-term:not(:has(.ag-r[value=opencode]:checked)) .ag-row[data-ag=opencode],.ag-term:not(:has(.ag-r[value=pi]:checked)) .ag-row[data-ag=pi],.ag-term:not(:has(.ag-r[value=hermes]:checked)) .ag-row[data-ag=hermes],.ag-term:not(:has(.ag-r[value=antigravity]:checked)) .ag-row[data-ag=antigravity],.ag-term:not(:has(.ag-r[value=gemini-cli]:checked)) .ag-row[data-ag=gemini-cli],.ag-term:not(:has(.ag-r[value=copilot]:checked)) .ag-row[data-ag=copilot],.ag-term:has(.ag-r:checked:not([value=claude])) .ag-row[data-ag=claude]{display:none}
.hero-term-cmd pre.code{flex:1;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:13.5px;line-height:22px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.hero-term-cmd .btn{flex:none;min-height:32px}
.hero-term-cta{padding:16px 20px 18px}
.hero-term-cta .row{margin:0 0 10px;gap:10px}
.hero-term-cta .btn{min-height:44px;padding:0 22px;font-size:15px}
.hero-term-cta .muted{margin:0}
.hero-agent .lead{margin-bottom:24px}
@media (max-width:480px){.term-bar-more{display:none}}
/* not on Cloudflare yet: one wide panel at the foot of the playbooks band */
.band-start{border-top:0}
.band-start .band-in{padding-top:0}
.start-panel{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding:24px 28px;border:1px solid var(--hair-strong);border-radius:var(--r-16);background:var(--grad-card);box-shadow:var(--hl-top),var(--shadow-sm)}
.start-panel b{display:block;font-size:17px;line-height:24px;font-weight:500;color:var(--text)}
.start-panel p{margin:6px 0 0;color:var(--text-2);max-width:720px}
.start-panel .btn{flex:none;min-height:44px;padding:0 20px}
/* questions: a ruled list */
.faq-list{max-width:860px;border:1px solid var(--hair-strong);border-radius:var(--r-16);background:var(--grad-card);box-shadow:var(--hl-top),var(--shadow-sm);overflow:hidden}
.faq-list details{margin:0;padding:0 24px;border-top:1px solid var(--hair)}
.faq-list details:first-child{border-top:0}
.faq-list details.more > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;margin:0;padding:12px 0;list-style:none;cursor:pointer;color:var(--text);font-size:16px;line-height:24px;font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--hair-strong);background:var(--grad-selected);box-shadow:var(--hl-top);color:var(--text-2);font-size:16px;font-weight:400;transition:transform .2s}
.faq-list details[open] > summary::after{transform:rotate(45deg)}
@media (hover:hover){.faq-list summary:hover::after{border-color:var(--accent);color:var(--accent)}}
.faq-list details.more p{margin:0 0 22px;color:var(--text-2);font-size:15px;line-height:24px;max-width:720px}
.main.w-full > .wc-div{margin:0;padding:64px 0 0;border-top:1px solid var(--hair)}
.main.w-full > .wc-div + .band{border-top:0}
.main.w-full > .wc-div + .band > .band-in{padding-top:48px}
.sec-lead{text-wrap:pretty}
/* the last call: a wide band, the heading large, a low warm light under it */
.home-final{border-top:1px solid var(--hair);text-align:center;background:radial-gradient(ellipse 52% 90% at 50% 118%,var(--accent-soft),transparent 72%),var(--bg-deep)}
.home-final .band-in{padding:120px 32px 128px}
.home-final h2{font-size:48px;line-height:56px;letter-spacing:-.03em;font-weight:600;margin:0 0 12px;text-wrap:balance}
.home-final p.muted{margin:0 auto 32px;font-size:16px;line-height:24px;max-width:560px}
.home-final .hero-cta{justify-content:center;margin:0}
.store-public:has(.main.w-full) .site-foot{border-top-color:var(--hair)}
@media (max-width:1000px){.panel-3{grid-template-columns:minmax(0,1fr)}.panel-cell + .panel-cell{border-left:0;border-top:1px solid var(--hair)}.step-num{margin-bottom:16px}.agent-split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .band-in{padding:64px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px))}
  .sec-head{flex-direction:column;align-items:flex-start;margin-bottom:28px}
  .sec-head .wc-head-spot{align-self:flex-start;--wc-spot:88px}
  .sec-head .wc-spot-sun{--wc-spot:88px}
  .sec-head h2{font-size:28px;line-height:34px}
  .sec-lead{font-size:15px;line-height:24px}
  .hero-in{padding:48px 16px 56px}
  .home-hero h1{font-size:38px;line-height:42px;letter-spacing:-.03em}
  .home-hero .lead{font-size:16px;line-height:25px;margin-bottom:24px}
  .hero-cta .btn{flex:1 1 auto}
  .band-ww .ww{padding:14px 16px}
  .band-next .band-in{padding-top:24px;padding-bottom:24px}
  .band-next .next-step{grid-template-columns:minmax(0,1fr)}
  .band-next .next-step > .row{grid-column:1;grid-row:auto;margin-top:12px!important}
  .why-row{grid-template-columns:minmax(0,1fr);padding:18px 0}
  .panel-cell{padding:22px 20px 24px}
  .start-panel{flex-direction:column;align-items:stretch;padding:20px}
  .faq-list details{padding:0 16px}
  .hero-term-cmd{padding:12px 12px 12px 16px}
  .hero-term-cta{padding:14px 16px 16px}
  .hero-term-cta .btn{flex:1 1 auto}
  .hero-agent .lead{display:none}
  .home-grid.cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home-grid.cat-tiles > a.card{padding:14px}
  .home-final .band-in{padding:80px 16px 88px}
  .home-final h2{font-size:32px;line-height:38px}
}
@media (max-width:420px){.home-hero h1{font-size:34px;line-height:38px}.home-grid.cat-tiles{grid-template-columns:minmax(0,1fr)}}

.flow{margin:0 0 12px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch}
.flow-box{border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.flow-box b{font-weight:600}.flow-box span{font-size:13px;opacity:.75}
.flow-box.later{border-style:dashed;grid-column:5}
.flow-arrow{align-self:center;opacity:.6}
.flow-up{grid-column:5;text-align:center;opacity:.6;line-height:1}
@media (max-width:640px){.flow{grid-template-columns:minmax(0,1fr)}.flow-arrow{justify-self:center;transform:rotate(90deg)}.flow-up,.flow-box.later{grid-column:1}}
:root{--accent:#b4460f;--accent-ink:#ffffff;--accent-soft:rgba(180,70,15,.10);--accent-bg:#b4460f;--btn-fill:#b4460f;--btn-ink:#ffffff}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){--accent:#f0874f;--accent-ink:#141415;--accent-soft:rgba(240,135,79,.14);--accent-bg:#f0874f;--btn-fill:#f0874f;--btn-ink:#141415}}
:root[data-theme="dark"]{--accent:#f0874f;--accent-ink:#141415;--accent-soft:rgba(240,135,79,.14);--accent-bg:#f0874f;--btn-fill:#f0874f;--btn-ink:#141415}
:root[data-theme="light"]{--accent:#b4460f;--accent-ink:#ffffff;--accent-soft:rgba(180,70,15,.10);--accent-bg:#b4460f;--btn-fill:#b4460f;--btn-ink:#ffffff}
.sundog-canvas{display:none}
@keyframes sun-rise{from{transform:translate3d(0,var(--sun-from),0)}to{transform:translate3d(0,calc(var(--sun-from) + var(--sun-follow)),0)}}
@keyframes sun-wash{from{opacity:.1}to{opacity:1}}
@keyframes sun-fade{from{opacity:1}to{opacity:.4}}
@keyframes wash-fade{from{opacity:1}to{opacity:0}}
@keyframes bar-clear{from{background-color:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog{--sun-from:20%;--sun-follow:54vh;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#000 72%,var(--bg));display:flex;align-items:center;min-height:clamp(520px,calc(100svh - 150px),700px)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog>*{position:relative;z-index:2}:root:where(:not([data-theme="light"])) .home-hero.has-sundog>.hero-in{width:100%;padding-top:104px;padding-bottom:64px}:root:where(:not([data-theme="light"])) .home-hero.has-sundog>.sundog-canvas{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transition:opacity .6s ease;will-change:transform;transform:translate3d(0,calc(var(--sun-from) + var(--sun-follow) * var(--rise,0)),0);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 94%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 94%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog>.sundog-canvas.on{opacity:1}:root:where(:not([data-theme="light"])) .home-hero.has-sundog>.sundog-canvas[data-mode="pixel"],:root:where(:not([data-theme="light"])) .home-hero.has-sundog>.sundog-canvas[data-mode="melt"]{image-rendering:crisp-edges;image-rendering:pixelated}:root:where(:not([data-theme="light"])) .home-hero.has-sundog::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 78%,var(--bg)),linear-gradient(90deg,rgba(0,0,0,.84) 0,rgba(0,0,0,.66) 34%,rgba(0,0,0,0) 60%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:calc(.1 + var(--rise,0) * .9);background:radial-gradient(ellipse 42% 60% at 76% 34%,rgba(255,168,92,.2),rgba(240,96,36,.08) 46%,transparent 74%),linear-gradient(180deg,transparent 40%,rgba(240,110,40,.07) 78%,transparent)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog h1,:root:where(:not([data-theme="light"])) .home-hero.has-sundog .lead{max-width:min(700px,62%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog h1{color:#fff}:root:where(:not([data-theme="light"])) .home-hero.has-sundog .lead{color:#cfcfd4}:root:where(:not([data-theme="light"])) .home-hero.has-sundog .muted{color:#a8a8ae}:root:where(:not([data-theme="light"])) .home-hero.has-sundog .btn-secondary{background:rgba(20,20,21,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog .hero-term{background:linear-gradient(180deg,rgba(31,31,34,.84),rgba(25,25,27,.84));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog .hero-term .term-bar{background:linear-gradient(180deg,rgba(51,51,55,.7),rgba(35,35,38,.7))}:root:where(:not([data-theme="light"])) .home-hero.has-sundog .hero-term .btn-secondary{background:var(--grad-selected);-webkit-backdrop-filter:none;backdrop-filter:none}}
:root[data-theme="dark"] .home-hero.has-sundog{--sun-from:20%;--sun-follow:54vh;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#000 72%,var(--bg));display:flex;align-items:center;min-height:clamp(520px,calc(100svh - 150px),700px)}:root[data-theme="dark"] .home-hero.has-sundog>*{position:relative;z-index:2}:root[data-theme="dark"] .home-hero.has-sundog>.hero-in{width:100%;padding-top:104px;padding-bottom:64px}:root[data-theme="dark"] .home-hero.has-sundog>.sundog-canvas{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transition:opacity .6s ease;will-change:transform;transform:translate3d(0,calc(var(--sun-from) + var(--sun-follow) * var(--rise,0)),0);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 94%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 94%)}:root[data-theme="dark"] .home-hero.has-sundog>.sundog-canvas.on{opacity:1}:root[data-theme="dark"] .home-hero.has-sundog>.sundog-canvas[data-mode="pixel"],:root[data-theme="dark"] .home-hero.has-sundog>.sundog-canvas[data-mode="melt"]{image-rendering:crisp-edges;image-rendering:pixelated}:root[data-theme="dark"] .home-hero.has-sundog::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 78%,var(--bg)),linear-gradient(90deg,rgba(0,0,0,.84) 0,rgba(0,0,0,.66) 34%,rgba(0,0,0,0) 60%)}:root[data-theme="dark"] .home-hero.has-sundog::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:calc(.1 + var(--rise,0) * .9);background:radial-gradient(ellipse 42% 60% at 76% 34%,rgba(255,168,92,.2),rgba(240,96,36,.08) 46%,transparent 74%),linear-gradient(180deg,transparent 40%,rgba(240,110,40,.07) 78%,transparent)}:root[data-theme="dark"] .home-hero.has-sundog h1,:root[data-theme="dark"] .home-hero.has-sundog .lead{max-width:min(700px,62%)}:root[data-theme="dark"] .home-hero.has-sundog h1{color:#fff}:root[data-theme="dark"] .home-hero.has-sundog .lead{color:#cfcfd4}:root[data-theme="dark"] .home-hero.has-sundog .muted{color:#a8a8ae}:root[data-theme="dark"] .home-hero.has-sundog .btn-secondary{background:rgba(20,20,21,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:root[data-theme="dark"] .home-hero.has-sundog .hero-term{background:linear-gradient(180deg,rgba(31,31,34,.84),rgba(25,25,27,.84));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}:root[data-theme="dark"] .home-hero.has-sundog .hero-term .term-bar{background:linear-gradient(180deg,rgba(51,51,55,.7),rgba(35,35,38,.7))}:root[data-theme="dark"] .home-hero.has-sundog .hero-term .btn-secondary{background:var(--grad-selected);-webkit-backdrop-filter:none;backdrop-filter:none}
@supports (animation-timeline:scroll()){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog>.sundog-canvas{animation:sun-rise linear both;animation-timeline:scroll(root);animation-range:0 90vh}:root:where(:not([data-theme="light"])) .home-hero.has-sundog::after{animation:sun-wash linear both;animation-timeline:scroll(root);animation-range:0 90vh}:root:where(:not([data-theme="light"])) .store-public:has(.home-hero.has-sundog) .topbar{animation:bar-clear linear both;animation-timeline:scroll(root);animation-range:0 140px}}
:root[data-theme="dark"] .home-hero.has-sundog>.sundog-canvas{animation:sun-rise linear both;animation-timeline:scroll(root);animation-range:0 90vh}:root[data-theme="dark"] .home-hero.has-sundog::after{animation:sun-wash linear both;animation-timeline:scroll(root);animation-range:0 90vh}:root[data-theme="dark"] .store-public:has(.home-hero.has-sundog) .topbar{animation:bar-clear linear both;animation-timeline:scroll(root);animation-range:0 140px}}
@media (min-width:861px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .store-public:has(.home-hero.has-sundog) .main.w-full{margin-top:-57px}}
:root[data-theme="dark"] .store-public:has(.home-hero.has-sundog) .main.w-full{margin-top:-57px}}
@media (max-width:860px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog{min-height:0;display:block;--sun-from:2%;--sun-follow:26vh}:root:where(:not([data-theme="light"])) .home-hero.has-sundog>.hero-in{padding:200px 16px 40px}:root:where(:not([data-theme="light"])) .home-hero.has-sundog::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,.74) 216px,rgba(0,0,0,.82) 88%,var(--bg) 100%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog::after{background:radial-gradient(ellipse 70% 30% at 50% 14%,rgba(255,168,92,.22),transparent 72%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog h1,:root:where(:not([data-theme="light"])) .home-hero.has-sundog .lead{max-width:none}}
:root[data-theme="dark"] .home-hero.has-sundog{min-height:0;display:block;--sun-from:2%;--sun-follow:26vh}:root[data-theme="dark"] .home-hero.has-sundog>.hero-in{padding:200px 16px 40px}:root[data-theme="dark"] .home-hero.has-sundog::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,.74) 216px,rgba(0,0,0,.82) 88%,var(--bg) 100%)}:root[data-theme="dark"] .home-hero.has-sundog::after{background:radial-gradient(ellipse 70% 30% at 50% 14%,rgba(255,168,92,.22),transparent 72%)}:root[data-theme="dark"] .home-hero.has-sundog h1,:root[data-theme="dark"] .home-hero.has-sundog .lead{max-width:none}}
@media (max-width:420px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog>.hero-in{padding-top:180px}}
:root[data-theme="dark"] .home-hero.has-sundog>.hero-in{padding-top:180px}}
/* wide: the field edge to edge, sun centred, dogs near the edges; a soft dark scrim behind the headline */
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide{--sun-from:0%;--sun-follow:16vh}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide>.sundog-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide::before{background:linear-gradient(180deg,transparent 80%,var(--bg)),radial-gradient(ellipse 46% 42% at 50% 66%,rgba(0,0,0,.8),rgba(0,0,0,.62) 50%,rgba(0,0,0,0) 100%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide::after{background:radial-gradient(ellipse 50% 40% at 50% 26%,rgba(255,168,92,.16),rgba(240,96,36,.06) 46%,transparent 74%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise{--sun-from:0%;--sun-follow:0px}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise>.sundog-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise::before{background:linear-gradient(180deg,transparent 80%,var(--bg)),linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.36) 44%,rgba(0,0,0,0) 70%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise::after{background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(255,168,92,.16),rgba(240,96,36,.06) 46%,transparent 74%)}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-wide{--sun-from:0%;--sun-follow:16vh}:root[data-theme="dark"] .home-hero.has-sundog.hero-wide>.sundog-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-wide::before{background:linear-gradient(180deg,transparent 80%,var(--bg)),radial-gradient(ellipse 46% 42% at 50% 66%,rgba(0,0,0,.8),rgba(0,0,0,.62) 50%,rgba(0,0,0,0) 100%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-wide::after{background:radial-gradient(ellipse 50% 40% at 50% 26%,rgba(255,168,92,.16),rgba(240,96,36,.06) 46%,transparent 74%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise{--sun-from:0%;--sun-follow:0px}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise>.sundog-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise::before{background:linear-gradient(180deg,transparent 80%,var(--bg)),linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.36) 44%,rgba(0,0,0,0) 70%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise::after{background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(255,168,92,.16),rgba(240,96,36,.06) 46%,transparent 74%)}
/* agent-rise: the rise composition, full at the top, fading as the hero scrolls away (--rise is the fade here) */
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise{--sun-from:0%;--sun-follow:0px;view-timeline:--sd-hero block}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise>.sundog-canvas{transform:none;will-change:opacity;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise>.sundog-canvas.on{opacity:calc(1 - var(--rise,0) * .6)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise::before{background:linear-gradient(180deg,transparent 80%,var(--bg)),radial-gradient(ellipse 50% 62% at 30% 54%,rgba(0,0,0,.6),rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise h1,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise .lead{text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 18px rgba(0,0,0,.55)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise::after{opacity:calc(1 - var(--rise,0));background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(255,168,92,.16),rgba(240,96,36,.06) 46%,transparent 74%)}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise{--sun-from:0%;--sun-follow:0px;view-timeline:--sd-hero block}:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise>.sundog-canvas{transform:none;will-change:opacity;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 80%,transparent 100%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise>.sundog-canvas.on{opacity:calc(1 - var(--rise,0) * .6)}:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise::before{background:linear-gradient(180deg,transparent 80%,var(--bg)),radial-gradient(ellipse 50% 62% at 30% 54%,rgba(0,0,0,.6),rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise h1,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise .lead{text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 18px rgba(0,0,0,.55)}:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise::after{opacity:calc(1 - var(--rise,0));background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(255,168,92,.16),rgba(240,96,36,.06) 46%,transparent 74%)}
@media (min-width:861px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide>.hero-in{text-align:center;padding-top:200px;padding-bottom:40px}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide h1{max-width:940px;margin-left:auto;margin-right:auto}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide .lead{max-width:640px;margin-left:auto;margin-right:auto}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide .hero-cta{justify-content:center}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent>.hero-in{padding-top:88px;padding-bottom:56px}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-wide>.hero-in{text-align:center;padding-top:200px;padding-bottom:40px}:root[data-theme="dark"] .home-hero.has-sundog.hero-wide h1{max-width:940px;margin-left:auto;margin-right:auto}:root[data-theme="dark"] .home-hero.has-sundog.hero-wide .lead{max-width:640px;margin-left:auto;margin-right:auto}:root[data-theme="dark"] .home-hero.has-sundog.hero-wide .hero-cta{justify-content:center}:root[data-theme="dark"] .home-hero.has-sundog.hero-agent>.hero-in{padding-top:88px;padding-bottom:56px}}
@media (max-width:860px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent>.hero-in{padding-top:168px}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-agent>.hero-in{padding-top:168px}}
@supports (animation-timeline:view()){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise>.sundog-canvas{animation:sun-fade linear both;animation-timeline:--sd-hero;animation-range:exit 0% exit 100%}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise::after{animation:wash-fade linear both;animation-timeline:--sd-hero;animation-range:exit 0% exit 100%}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise>.sundog-canvas{animation:sun-fade linear both;animation-timeline:--sd-hero;animation-range:exit 0% exit 100%}:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise::after{animation:wash-fade linear both;animation-timeline:--sd-hero;animation-range:exit 0% exit 100%}}
@supports (animation-timeline:scroll()){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise>.sundog-canvas,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise::after{animation-range:0 16vh}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-rise>.sundog-canvas,:root[data-theme="dark"] .home-hero.has-sundog.hero-rise::after{animation-range:0 16vh}@media (max-width:860px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise>.sundog-canvas,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise::after{animation-range:0 10vh}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-rise>.sundog-canvas,:root[data-theme="dark"] .home-hero.has-sundog.hero-rise::after{animation-range:0 10vh}}}
@media (max-width:860px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide{--sun-follow:14vh}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide::before,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise::before,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,.7) 216px,rgba(0,0,0,.8) 88%,var(--bg) 100%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-wide::after,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise::after,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise::after{background:radial-gradient(ellipse 80% 30% at 50% 14%,rgba(255,168,92,.2),transparent 72%)}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-wide{--sun-follow:14vh}:root[data-theme="dark"] .home-hero.has-sundog.hero-wide::before,:root[data-theme="dark"] .home-hero.has-sundog.hero-rise::before,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,.7) 216px,rgba(0,0,0,.8) 88%,var(--bg) 100%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-wide::after,:root[data-theme="dark"] .home-hero.has-sundog.hero-rise::after,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise::after{background:radial-gradient(ellipse 80% 30% at 50% 14%,rgba(255,168,92,.2),transparent 72%)}}
/* rise and agent-rise: the hero ends a calm 64px under its last line (no min-height band) and settles to plain black,
   so the Works with band (its own lighter card colour and top rule) stands out below it */
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise{background:#000}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise>.sundog-canvas,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise>.sundog-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 calc(100% - 220px),transparent calc(100% - 24px));mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 calc(100% - 220px),transparent calc(100% - 24px))}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise>.hero-in>:last-child,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise>.hero-in>:last-child{margin-bottom:0}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-rise,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise{background:#000}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise>.sundog-canvas,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise>.sundog-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 calc(100% - 220px),transparent calc(100% - 24px));mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 calc(100% - 220px),transparent calc(100% - 24px))}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise>.hero-in>:last-child,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise>.hero-in>:last-child{margin-bottom:0}
@media (min-width:861px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise{min-height:0;display:block}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise>.hero-in,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise>.hero-in{padding-bottom:64px}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise::before{background:linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 160px),#000),linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.36) 44%,rgba(0,0,0,0) 70%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise::before{background:linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 160px),#000),radial-gradient(ellipse 34% 62% at 42% 54%,rgba(0,0,0,.6),rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%)}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-rise,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise{min-height:0;display:block}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise>.hero-in,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise>.hero-in{padding-bottom:64px}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise::before{background:linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 160px),#000),linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.36) 44%,rgba(0,0,0,0) 70%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise::before{background:linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 160px),#000),radial-gradient(ellipse 34% 62% at 42% 54%,rgba(0,0,0,.6),rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%)}}
@media (max-width:860px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise::before,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,.7) 216px,rgba(0,0,0,.8) calc(100% - 120px),#000 100%)}:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-rise>.hero-in,:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise>.hero-in{padding-bottom:40px}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-rise::before,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,.7) 216px,rgba(0,0,0,.8) calc(100% - 120px),#000 100%)}:root[data-theme="dark"] .home-hero.has-sundog.hero-rise>.hero-in,:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise>.hero-in{padding-bottom:40px}}
/* agent-rise-low: agent-rise (it carries both classes) with the field carried down to the Works with band: the canvas
   stays on to the hero's bottom edge and the scrim dims it gently to near-black there, not plain black above it, and
   never lighter than black, so the band (its own card colour and top rule) still stands out */
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise-low>.sundog-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 calc(100% - 300px),rgba(0,0,0,.55) calc(100% - 110px),rgba(0,0,0,.3) 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 calc(100% - 300px),rgba(0,0,0,.55) calc(100% - 110px),rgba(0,0,0,.3) 100%)}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise-low>.sundog-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 calc(100% - 300px),rgba(0,0,0,.55) calc(100% - 110px),rgba(0,0,0,.3) 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 calc(100% - 300px),rgba(0,0,0,.55) calc(100% - 110px),rgba(0,0,0,.3) 100%)}
@media (min-width:861px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise-low::before{background:linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 240px),rgba(0,0,0,.42) calc(100% - 80px),rgba(0,0,0,.7) 100%),radial-gradient(ellipse 34% 62% at 42% 54%,rgba(0,0,0,.6),rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%)}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise-low::before{background:linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 240px),rgba(0,0,0,.42) calc(100% - 80px),rgba(0,0,0,.7) 100%),radial-gradient(ellipse 34% 62% at 42% 54%,rgba(0,0,0,.6),rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%)}}
@media (max-width:860px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-hero.has-sundog.hero-agent-rise-low::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,.7) 216px,rgba(0,0,0,.8) calc(100% - 120px),rgba(0,0,0,.84) 100%)}}
:root[data-theme="dark"] .home-hero.has-sundog.hero-agent-rise-low::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,.7) 216px,rgba(0,0,0,.8) calc(100% - 120px),rgba(0,0,0,.84) 100%)}}
/* ?cta=glow: the hero's sun alone, low behind the final call, dim and screen-blended (black adds nothing), faded out
   toward every edge so the horizon divider and the band's edges stay clean; a soft dark scrim keeps the text crisp */
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-final.has-glow{position:relative;isolation:isolate}:root:where(:not([data-theme="light"])) .home-final.has-glow>.sundog-canvas{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;opacity:0;transition:opacity .8s ease;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 62% 92% at 50% 92%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 92% at 50% 92%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%)}:root:where(:not([data-theme="light"])) .home-final.has-glow>.sundog-canvas.on{opacity:.8}:root:where(:not([data-theme="light"])) .home-final.has-glow>.sundog-canvas[data-mode="pixel"],:root:where(:not([data-theme="light"])) .home-final.has-glow>.sundog-canvas[data-mode="melt"]{image-rendering:crisp-edges;image-rendering:pixelated}:root:where(:not([data-theme="light"])) .home-final.has-glow>.band-in{position:relative;z-index:1;background:radial-gradient(ellipse 34% 30% at 50% 40%,rgba(0,0,0,.42),rgba(0,0,0,0) 100%)}:root:where(:not([data-theme="light"])) .home-final.has-glow h2{text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 18px rgba(0,0,0,.5)}}
:root[data-theme="dark"] .home-final.has-glow{position:relative;isolation:isolate}:root[data-theme="dark"] .home-final.has-glow>.sundog-canvas{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;opacity:0;transition:opacity .8s ease;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 62% 92% at 50% 92%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 92% at 50% 92%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%)}:root[data-theme="dark"] .home-final.has-glow>.sundog-canvas.on{opacity:.8}:root[data-theme="dark"] .home-final.has-glow>.sundog-canvas[data-mode="pixel"],:root[data-theme="dark"] .home-final.has-glow>.sundog-canvas[data-mode="melt"]{image-rendering:crisp-edges;image-rendering:pixelated}:root[data-theme="dark"] .home-final.has-glow>.band-in{position:relative;z-index:1;background:radial-gradient(ellipse 34% 30% at 50% 40%,rgba(0,0,0,.42),rgba(0,0,0,0) 100%)}:root[data-theme="dark"] .home-final.has-glow h2{text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 18px rgba(0,0,0,.5)}
@media (max-width:860px){@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .home-final.has-glow>.sundog-canvas{-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 90%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);mask-image:radial-gradient(ellipse 90% 70% at 50% 90%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%)}:root:where(:not([data-theme="light"])) .home-final.has-glow>.band-in{background:radial-gradient(ellipse 60% 34% at 50% 40%,rgba(0,0,0,.42),rgba(0,0,0,0) 100%)}}
:root[data-theme="dark"] .home-final.has-glow>.sundog-canvas{-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 90%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);mask-image:radial-gradient(ellipse 90% 70% at 50% 90%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%)}:root[data-theme="dark"] .home-final.has-glow>.band-in{background:radial-gradient(ellipse 60% 34% at 50% 40%,rgba(0,0,0,.42),rgba(0,0,0,0) 100%)}}
@media (prefers-reduced-motion:reduce){.home-final.has-glow>.sundog-canvas{transition:none}}
@media (prefers-reduced-motion:reduce){.home-hero.has-sundog>.sundog-canvas,.home-hero.has-sundog::after,.store-public .topbar{animation:none!important}.home-hero.has-sundog{--rise:.5}.home-hero.has-sundog.hero-rise{--rise:0}.home-hero.has-sundog.hero-rise::after{opacity:1}.home-hero.has-sundog.hero-agent-rise{--rise:0}}

.ww{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 24px;margin:40px 0 0;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ww-head{position:relative;display:flex;align-items:center;gap:6px}
.ww-rail-head h2{margin:0}
.ww-info{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);opacity:.7;cursor:help}
.ww-info .i{width:14px;height:14px}
.ww-info:hover,.ww-info:focus-visible{opacity:1;color:var(--text-2)}
.ww-info:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ww-tip{position:absolute;z-index:5;left:0;top:calc(100% + 6px);width:max-content;max-width:min(280px,calc(100vw - 32px));padding:8px 10px;border-radius:8px;background:var(--raised);color:var(--text-2);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair),0 8px 24px rgba(0,0,0,.25);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0;text-transform:none;white-space:normal;visibility:hidden;opacity:0;transition:opacity .15s}
.ww-head-info:hover .ww-tip,.ww-head-info:focus-within .ww-tip{visibility:visible;opacity:1}
.ww-label{margin:0;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ww-rows{display:grid;gap:10px;min-width:0;overflow:hidden;border-radius:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
.ww-rows:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ww-row{overflow:hidden}
.ww-track{display:flex;width:max-content;animation:ww-slide calc(var(--ww-n,12) * 2.8s) linear infinite}
.ww-rev .ww-track{animation-direction:reverse}
.ww-rows:hover .ww-track,.ww-rows:focus-within .ww-track{animation-play-state:paused}
@keyframes ww-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ww-list,.ww-rail{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.ww-list{gap:0;flex:none}
.ww .ww-item{margin:0;padding:0 18px}
.ww-item{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--text-2);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;transition:color .2s}
.ww-word .ww-name{font-weight:600;letter-spacing:-.01em}
.ww-logo{height:20px;width:auto;flex:none}
.ww-logo-dark{display:none}
/* A full logo already shows the name (Astro's wordmark): the text name stays for screen readers only. */
.ww-wordmark .ww-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (hover:hover){.ww-item:hover{color:var(--text)}}
/* The light-background file in light themes, the dark-background file in dark themes (never recoloured). */
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .ww-logo-light{display:none}:root:where(:not([data-theme="light"])) .ww-logo-dark{display:block}}
:root[data-theme="dark"] .ww-logo-light{display:none}
:root[data-theme="dark"] .ww-logo-dark{display:block}
:root[data-theme="light"] .ww-logo-dark{display:none}
:root[data-theme="light"] .ww-logo-light{display:block}
/* app page rail: pills, no motion */
.ww-rail{flex-wrap:wrap;gap:8px}
.ww-rail .ww-item{margin:0;padding:0 10px;min-height:32px;border-radius:999px;background:var(--raised);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair);font-size:13px}
.ww-rail .ww-logo{height:16px}
@media (max-width:640px){
  .ww{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .ww-rows{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
  .ww .ww-item{padding:0 14px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  /* No motion: the same single strip, still and cropped at the edges (never a wrapped wall of names). */
  .ww-track{animation:none}
}

/* the silver cursor spotlight (spotlight.ts): only under .has-spotlight */
.has-spotlight{--spotlight-rgb:207 207 212;--spotlight-size:280px;--spotlight-strength:.16}
@media (prefers-color-scheme:light){:root:where(:not([data-theme="dark"])) .has-spotlight{--spotlight-rgb:82 82 91;--spotlight-strength:.1}}
:root[data-theme="light"] .has-spotlight{--spotlight-rgb:82 82 91;--spotlight-strength:.1}
.has-spotlight :is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *){isolation:isolate}
.has-spotlight :is(.band-ww,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *){position:relative} /* the key chip keeps its own position:absolute corner placement (checkout-css.ts) */
.has-spotlight :is(.band-ww,.topbar):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *){--sl-k:.55}
.has-spotlight :is(.panel-cell):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *){--sl-k:.8}
.has-spotlight :is(.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *){--sl-k:.9;--sl-r:.45}
.has-spotlight :is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *)::before,.has-spotlight :is(.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *)::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(calc(var(--spotlight-size) * var(--sl-r,1)) circle at var(--mouse-x,50%) var(--mouse-y,50%),rgb(var(--spotlight-rgb) / calc(var(--spotlight-strength) * var(--sl-k,1))),transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.has-spotlight :is(.band-ww,.topbar):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *)::before{inset:0!important} /* the bars span the page: never past its edge (the inset:-1px rule above out-ranks this one by specificity) */
.has-spotlight :is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *) .no-spotlight:not(form){background:var(--sl-under,var(--card))}
.has-spotlight :is(.lit):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *) .no-spotlight{--sl-under:var(--input-bg)}
@media (hover:hover) and (pointer:fine){
.has-spotlight :is(.band-ww,.topbar,.hero-term,.grid>a.card,.agent-split>.term,.start-panel,.lit):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *){transition:border-color .3s ease-out,box-shadow .3s ease-out}
.has-spotlight :is(.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *){transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),border-color .3s ease-out,box-shadow .3s ease-out,opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.has-spotlight :is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *):hover:not(:has(:is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):hover,.no-spotlight:hover,form:hover))::before,.has-spotlight :is(.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *):hover:not(:has(:is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):hover,.no-spotlight:hover,form:hover))::after{opacity:1}
.has-spotlight .topbar:not(.sl-solid)::before{opacity:0!important}
.has-spotlight :is(.hero-term,.grid>a.card,.agent-split>.term,.start-panel,.lit):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *):hover:not(:has(:is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):hover,.no-spotlight:hover,form:hover)){border-color:rgb(var(--spotlight-rgb) / .3)}
.has-spotlight .panel:has(>.panel-cell:not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *):hover){border-color:rgb(var(--spotlight-rgb) / .22)}
.has-spotlight :is(.band-ww):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *):hover:not(:has(:is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):hover,.no-spotlight:hover,form:hover)){border-color:rgb(var(--spotlight-rgb) / .2);box-shadow:var(--hl-top),var(--shadow-sm),0 0 20px rgb(var(--spotlight-rgb) / .05)}
.has-spotlight :is(.topbar):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *):hover:not(:has(:is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):hover,.no-spotlight:hover,form:hover)).sl-solid{border-bottom-color:rgb(var(--spotlight-rgb) / .2);box-shadow:0 0 20px rgb(var(--spotlight-rgb) / .05)}
.has-spotlight :is(.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *):hover:not(:has(:is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):hover,.no-spotlight:hover,form:hover)){border-color:rgb(var(--spotlight-rgb) / .38);box-shadow:var(--hl-top),0 0 20px rgb(var(--spotlight-rgb) / .1)}
}
@media (prefers-reduced-motion:reduce){.has-spotlight :is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *)::before,.has-spotlight :is(.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *)::after{transition:none;--mouse-x:50%;--mouse-y:50%}.has-spotlight :is(.band-ww,.topbar,.hero-term,.panel-cell,.grid>a.card,.agent-split>.term,.start-panel,.lit,.btn-secondary:not([data-copy]),.btn.sl-keep,.key-chip):not(.no-spotlight,.no-spotlight *:not(.sl-keep),form *){transition:none}}
/* the approved palette elements (home-elements.ts): only under .has-elements */
.has-elements{--el-ember:#f0874f;--el-warm:255 198 124;--el-warm-text:#ffc67c;--el-glow:240 135 79;--el-sun:#fff3de;--el-silver-text:#cfcfd4;--el-select:240 135 79 / .3;--el-select-text:#fff3de;--el-parhelion:linear-gradient(90deg,#dc2616,#f6601e,#ffa42c,#ffde70,#ecf0ec,#bcd6ff);--el-band:linear-gradient(90deg,#dc2616,#ffa42c,#ffde70,#bcd6ff);--el-key-drop:0 1px 0 #000;--el-rim:.5}
@media (prefers-color-scheme:light){:root:where(:not([data-theme="dark"])) .has-elements{--el-ember:#b4460f;--el-warm:180 70 15;--el-warm-text:#b4460f;--el-glow:180 70 15;--el-sun:#b4460f;--el-silver-text:#3f3f46;--el-select:180 70 15 / .22;--el-select-text:#171717;--el-parhelion:linear-gradient(90deg,#dc2616,#f6601e,#e08a1c,#c9a227,#8aa0b8,#5b84c4);--el-band:linear-gradient(90deg,#dc2616,#e08a1c,#c9a227,#5b84c4);--el-key-drop:0 1px 0 rgb(0 0 0/.12);--el-rim:.26}}
:root[data-theme="light"] .has-elements{--el-ember:#b4460f;--el-warm:180 70 15;--el-warm-text:#b4460f;--el-glow:180 70 15;--el-sun:#b4460f;--el-silver-text:#3f3f46;--el-select:180 70 15 / .22;--el-select-text:#171717;--el-parhelion:linear-gradient(90deg,#dc2616,#f6601e,#e08a1c,#c9a227,#8aa0b8,#5b84c4);--el-band:linear-gradient(90deg,#dc2616,#e08a1c,#c9a227,#5b84c4);--el-key-drop:0 1px 0 rgb(0 0 0/.12);--el-rim:.26}
.has-elements .btn-primary{background:linear-gradient(180deg,#f59a68,#f0874f 55%,#e57636);color:#141415;box-shadow:inset 0 1px 0 rgb(255 243 222/.55),0 1px 2px rgb(0 0 0/.4),0 6px 18px -6px rgb(224 92 28/.55)}
@media (prefers-color-scheme:light){:root:where(:not([data-theme="dark"])) .has-elements .btn-primary{background:linear-gradient(180deg,#c4561c,#b4460f 55%,#a33d0b);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255/.25),0 1px 2px rgb(0 0 0/.15),0 6px 16px -8px rgb(180 70 15/.5)}}
:root[data-theme="light"] .has-elements .btn-primary{background:linear-gradient(180deg,#c4561c,#b4460f 55%,#a33d0b);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255/.25),0 1px 2px rgb(0 0 0/.15),0 6px 16px -8px rgb(180 70 15/.5)}
.has-elements .btn-secondary{background:var(--grad-selected);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair-strong);border-color:transparent}
.has-elements .btn-parhelion{color:var(--text);background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--el-parhelion) border-box;border:1px solid transparent;min-height:40px;padding:0 18px;font-size:14px}
@media (hover:hover){.has-elements .btn-parhelion:hover{color:var(--text);background:linear-gradient(var(--raised),var(--raised)) padding-box,var(--el-parhelion) border-box}}
.has-elements .hero-more{margin:20px 0 0}
.has-elements .pill{display:inline-block;vertical-align:2px;margin-left:6px;font-size:11px;line-height:1;font-weight:600;letter-spacing:.02em;padding:4px 8px;border-radius:999px;text-decoration:none}
.has-elements .pill-free{color:var(--el-warm-text);background:rgb(var(--el-warm)/.08);box-shadow:inset 0 0 0 1px rgb(var(--el-warm)/.24)}
.has-elements .pill-new{color:var(--el-sun);background:linear-gradient(90deg,rgb(220 38 22/.35),rgb(246 96 30/.25));box-shadow:inset 0 0 0 1px rgb(246 96 30/.35)}
.has-elements .pill-ver{color:var(--el-silver-text);background:var(--grad-selected);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair-strong);font-family:var(--mono);font-weight:500}
.has-elements :is(.band .eyebrow,.eyebrow.page-eyebrow){flex-direction:column;align-items:flex-start;gap:8px;letter-spacing:.14em}
.has-elements .band .eyebrow::before{display:none}
.has-elements :is(.band .eyebrow,.eyebrow.page-eyebrow)::after{content:"";display:block;width:56px;height:2px;border-radius:2px;background:var(--el-band);opacity:.85}
.has-elements .hz-top{position:relative;border-top-color:transparent}
.has-elements :is(.hz-top,hr.hz)::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgb(var(--el-glow)/0) 10%,rgb(var(--el-glow)/.6) 50%,rgb(var(--el-glow)/0) 90%,transparent)}
.has-elements :is(.hz-top,hr.hz)::after{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;pointer-events:none;background:var(--el-sun);box-shadow:0 0 10px 3px rgb(var(--el-warm)/.55)}
/* hr.hz is 1px tall, not 0: an empty 0-height hr lets its margins collapse through into the next heading's, which put the line on the heading itself */
.has-elements hr.hz{position:relative;height:1px;margin:48px 0 8px;border:0;overflow:visible;background:none}
.has-elements :is(a,button,summary,[tabindex]):focus-visible{outline:2px solid rgb(var(--el-warm)/.6);outline-offset:2px}
.has-elements :is(input,select,textarea):focus{outline:none;border-color:rgb(var(--el-warm)/.6);box-shadow:0 0 0 3px rgb(var(--el-warm)/.28)}
.has-elements .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--el-ember);box-shadow:0 0 0 3px rgb(var(--el-glow)/.18),0 0 10px rgb(var(--el-glow)/.7)}
.has-elements .rim-first>a.card:first-child{box-shadow:inset 0 1px 0 rgb(var(--el-warm)/.35),var(--shadow-sm),0 -1px 18px -8px rgb(var(--el-glow)/var(--el-rim))}
.has-elements :is(.home-more,.main :is(p,li,dd,td,label,.note) a:not(.btn,.back,.badge,.home-more,.card)){color:var(--text);text-decoration:none;background:linear-gradient(90deg,var(--el-ember),var(--el-warm-text)) 0 100%/100% 1px no-repeat;padding-bottom:2px;min-height:0;transition:color .2s ease,background-size .2s ease}
.has-elements .home-more{margin-top:12px;margin-bottom:12px}
@media (hover:hover){.has-elements :is(.home-more,.main :is(p,li,dd,td,label,.note) a:not(.btn,.back,.badge,.home-more,.card)):hover{color:var(--el-warm-text);background-size:100% 2px;text-decoration:none}}
.has-elements :is(.btn-key,.hero-term [data-copy]){font:12px/1 var(--mono);color:var(--el-silver-text);min-height:28px;padding:0 9px;border-radius:6px;border-color:transparent;background:var(--grad-selected);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair-strong),var(--el-key-drop)}
.has-elements ::selection{background:rgb(var(--el-select));color:var(--el-select-text)}
.has-elements .meter{height:6px;border-radius:6px;background:var(--raised);overflow:hidden}.has-elements .meter>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#b03208,#e05c1c,#f0874f,#ffc67c)}
.has-elements .eyebrow.page-eyebrow{display:flex;margin:0 0 12px}
.has-elements .app-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px}
.has-elements .app-meta .pill{margin-left:0}
.has-elements .pill-ver.pill-text{font-family:var(--sans)}
.has-elements .main>p.muted+.app-meta{margin-top:-8px}
.has-elements .main>.start-panel{margin-top:16px}
.has-elements .main>:not(.start-panel)+.start-panel{margin-top:48px}
.has-elements.store-public .main>h2{font-size:18px;line-height:26px;letter-spacing:-.01em;margin:40px 0 14px}
.has-elements.store-public .main>hr.hz+h2{margin-top:32px}
.has-elements .prose{font-size:15px;line-height:26px;max-width:68ch}
.has-elements .prose :is(p,ul,ol){margin:0 0 16px}
.has-elements .prose li{margin:6px 0}
.has-elements .prose h1{font-size:28px;line-height:36px;letter-spacing:-.02em;margin:0 0 16px}
.has-elements .prose h2{font-size:20px;line-height:28px;letter-spacing:-.01em;margin:40px 0 12px}
.has-elements .prose h3{font-size:16px;line-height:24px;margin:28px 0 8px}
.has-elements .prose table{font-size:14px;line-height:22px}
.has-elements .prose hr:not(.hz){height:0;margin:40px 0 20px;border:0;border-top:1px solid var(--hair-strong)}
@media (max-width:640px){.has-elements .prose table{display:block;max-width:100%;overflow-x:auto}.has-elements .prose th{white-space:normal}}
.has-elements .cmd-row{display:flex;align-items:flex-start;gap:12px;margin:12px 0 0;padding:10px 10px 10px 14px;border:1px solid var(--hair);border-radius:10px;background:var(--input-bg);box-shadow:var(--inset-sm)}
.has-elements .cmd-row pre.code{flex:1;min-width:0;margin:0;padding:4px 0 0;border:0;border-radius:0;background:none;box-shadow:none;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.has-elements .cmd-row .btn{flex:none}
.has-elements .code-block{margin:8px 0 16px;border:1px solid var(--hair);border-radius:10px;background:var(--input-bg);box-shadow:var(--inset-sm);overflow:hidden}
.has-elements .code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 6px 0 14px;border-bottom:1px solid var(--hair);background:var(--grad-selected);box-shadow:var(--hl-top);font:12px/16px var(--mono);color:var(--text-2)}
.has-elements .code-block pre{margin:0;border:0;border-radius:0;background:none;box-shadow:none;padding:12px 14px}
.has-elements .code-head .btn-key{min-height:28px}
html:not(.has-js) .has-elements .code-head .btn-key{display:none}
.has-elements .store-notice{display:flex;align-items:center;justify-content:center;gap:10px}
.has-elements .store-notice::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--el-ember);box-shadow:0 0 0 3px rgb(var(--el-glow)/.18),0 0 8px rgb(var(--el-glow)/.6)}
@media (prefers-reduced-motion:reduce){.has-elements :is(.home-more,.main :is(p,li,dd,td,label,.note) a:not(.btn,.back,.badge,.home-more,.card)),.has-elements .btn{transition:none}}
/* ?howit=cue (home-elements.ts howCueHtml): the quiet scroll cue and the Start here parhelion */
.has-elements .hero-cue-row{height:40px;margin:20px 0 0}
.has-elements .hero-cue{--cue-ink:#d9d3c5;--cue-o:.4;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 10px 4px;border-radius:8px;color:var(--cue-ink);opacity:var(--cue-o);text-decoration:none;background:none;transition:opacity .25s ease}
@media (prefers-color-scheme:light){:root:where(:not([data-theme="dark"])) .has-elements .hero-cue{--cue-ink:#3f3f46;--cue-o:.5}}
:root[data-theme="light"] .has-elements .hero-cue{--cue-ink:#3f3f46;--cue-o:.5}
.has-elements .hero-cue-label{font-size:10px;line-height:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding-left:.18em}
.has-elements .hero-cue-mark{display:block}
@media (hover:hover){.has-elements .hero-cue:hover{opacity:.9;color:var(--cue-ink)}}
.has-elements .hero-cue:focus-visible{opacity:.9}
@media (prefers-reduced-motion:no-preference){.has-elements .hero-cue-mark{animation:cue-drift 3.6s ease-in-out infinite alternate}}
@media (max-width:860px){.has-elements .hero-cue{bottom:8px;gap:4px}.has-elements .hero-cue-mark{width:24px;height:21px}.has-elements .hero-cue-label{font-size:9px;line-height:11px}}
@media print{.has-elements .hero-cue{display:none}}
.has-elements .start-panel .btn-parhelion{position:relative;min-height:44px;padding:0 20px;background:transparent;border-color:transparent}
.has-elements .start-panel .btn-parhelion::before{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;background:var(--el-parhelion);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
@media (hover:hover){.has-elements .start-panel .btn-parhelion:hover{background:var(--raised)}}
@keyframes cue-drift{from{transform:translateY(0)}to{transform:translateY(3px)}}
/* checkout pieces (checkout-css.ts) */
.offers{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.offers-lead{margin:0 0 12px}
.offer{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-12);background:var(--grad-card);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair);cursor:pointer;font-weight:400;color:var(--text-2);transition:box-shadow .15s ease}
@media (hover:hover){.offer:hover{box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair-strong)}}
.offer-check{position:absolute;opacity:0;width:22px;height:22px;margin:0;left:14px;top:13px;cursor:pointer}
.offer-tick{flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;background:var(--input-bg);box-shadow:inset 0 0 0 1.5px var(--hair-strong);display:grid;place-items:center;transition:background .15s ease,box-shadow .15s ease}
.offer-tick::after{content:"";width:6px;height:11px;margin-top:-2px;border:solid transparent;border-width:0 2px 2px 0;transform:rotate(45deg)}
.offer-check:checked + .offer-tick{background:var(--accent);box-shadow:none}
.offer-check:checked + .offer-tick::after{border-color:var(--accent-ink,#fff)}
.offer:has(.offer-check:checked){box-shadow:var(--hl-top),inset 0 0 0 1.5px var(--accent)}
.offer-check:focus-visible + .offer-tick{outline:2px solid var(--accent);outline-offset:2px}
.offer-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.offer-head{display:flex;gap:8px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.offer-name{color:var(--text);font-weight:600}
.offer-price{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.offer-price s{margin-right:2px}
.offer-benefit{font-size:14px;line-height:20px}
.offer-why{font-size:13px;line-height:19px;color:var(--muted)}
.offer-why b{font-weight:600;color:var(--text-2)}
.offer-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.offers-more{margin-top:8px}
.offers-more>summary{cursor:pointer;color:var(--text-2);font-size:14px;padding:6px 0;list-style:none;display:inline-flex;gap:6px;align-items:center}
.offers-more>summary::-webkit-details-marker{display:none}
.offers-more>summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--hair-strong);font-size:13px;line-height:1}
.offers-more[open]>summary::before{content:"−"}
.offers-more>.offers{margin-top:8px}
.offers-foot{margin-top:12px;gap:8px 12px}
.add-offers form[aria-busy="true"] .offers{opacity:.6;pointer-events:none}
td.price .line-remove{margin:4px 0 0;display:flex;justify-content:flex-end}
td.price .line-remove .btn{min-height:28px;padding:0 8px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.prompt-box{position:relative}
.prompt-box pre.code{margin:0;padding:12px 76px 12px 12px}
.key-chip{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:6px;border:0;cursor:pointer;font:12px/1 var(--mono);color:var(--text-2);background:var(--grad-selected);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair-strong)}
.bought .scope{font-family:var(--mono);font-size:12.5px;color:var(--text)}
.bought td .small{display:inline-block;margin-top:2px}
.goes-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.goes{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-12);background:var(--grad-card);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair)}
.goes .goes-buy,.goes>a{flex:none;margin:0}
.pill{display:inline-block;font-size:11px;line-height:1;font-weight:600;letter-spacing:.02em;padding:4px 8px;border-radius:999px;white-space:nowrap}
/* One price column: the cards share one action column (as wide as the widest button), so every price and Free pill ends on the same edge (field report 2026-11-04, R6). */
@supports (grid-template-columns:subgrid){@media (min-width:561px){.goes-list{grid-template-columns:minmax(0,1fr) auto}.goes{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.goes .goes-buy,.goes>a{justify-self:end}}}
@media (max-width:560px){.goes{flex-direction:column;align-items:stretch}.goes .goes-buy .btn,.goes>a{width:100%}.offers-foot .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.offer,.offer-tick{transition:none}}
.has-elements .offer-check:checked + .offer-tick{background:var(--el-ember);box-shadow:inset 0 1px 0 rgb(255 243 222/.45)}
.has-elements .offer-check:checked + .offer-tick::after{border-color:#141415}
.has-elements .offer:has(.offer-check:checked){box-shadow:var(--hl-top),inset 0 0 0 1.5px var(--el-ember)}
.has-elements .offer-check:focus-visible + .offer-tick{outline:2px solid rgb(var(--el-warm)/.6);outline-offset:2px}
.has-elements .offer-top{box-shadow:inset 0 1px 0 rgb(var(--el-warm)/.35),inset 0 0 0 1px var(--hair),0 -1px 18px -8px rgb(var(--el-glow)/var(--el-rim))}
.has-elements .key-chip{color:var(--el-silver-text);box-shadow:var(--hl-top),inset 0 0 0 1px var(--hair-strong),var(--el-key-drop)}
.has-elements :is(.offer-tags,.offer-price,td.price) .pill{margin-left:0}
.has-elements .key-chip:focus-visible{outline:2px solid rgb(var(--el-warm)/.6);outline-offset:2px}
@media (prefers-color-scheme:light){:root:where(:not([data-theme="dark"])) .has-elements .offer-check:checked + .offer-tick::after{border-color:#fff}}
:root[data-theme="light"] .has-elements .offer-check:checked + .offer-tick::after{border-color:#fff}
:root{--wc-ink:#1f1a14;--wc-w1:rgba(196,132,38,.34);--wc-w2:rgba(214,160,60,.26);--wc-w3:rgba(120,110,90,.06);--wc-fine:.82;--wc-sky-o:.13;--wc-star:#9a6a1c;--wc-spot-o:.55}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){--wc-ink:#d9d3c5;--wc-w1:rgba(240,135,79,.22);--wc-w2:rgba(240,135,79,.13);--wc-w3:rgba(217,211,197,.035);--wc-fine:.62;--wc-sky-o:.2;--wc-star:#d9d3c5;--wc-spot-o:.5}}
:root[data-theme="dark"]{--wc-ink:#d9d3c5;--wc-w1:rgba(240,135,79,.22);--wc-w2:rgba(240,135,79,.13);--wc-w3:rgba(217,211,197,.035);--wc-fine:.62;--wc-sky-o:.2;--wc-star:#d9d3c5;--wc-spot-o:.5}:root[data-theme="light"]{--wc-ink:#1f1a14;--wc-w1:rgba(196,132,38,.34);--wc-w2:rgba(214,160,60,.26);--wc-w3:rgba(120,110,90,.06);--wc-fine:.82;--wc-sky-o:.13;--wc-star:#9a6a1c;--wc-spot-o:.55}
.wc{display:block;width:100%;height:auto;color:var(--wc-ink);fill:currentColor;--wc-paper:var(--bg)}
.wc .wc-p{fill:var(--wc-paper)}.wc .wc-w1{fill:var(--wc-w1)}.wc .wc-w2{fill:var(--wc-w2)}.wc .wc-w3{fill:var(--wc-w3)}.wc .wc-w-soft{opacity:.55}.wc .wc-fine{opacity:var(--wc-fine)}.wc .wc-star{fill:var(--wc-star)}
.wc .wc-cap{font:600 15px/1 "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;letter-spacing:.32em;fill:currentColor}
.wc-sky-wrap{position:relative;isolation:isolate}
.wc-sky{position:absolute;z-index:-1;top:-20px;bottom:-56px;left:max(-12%,calc(50% - 50vw + 8px));right:max(-12%,calc(50% - 50vw + 8px));pointer-events:none;user-select:none;opacity:var(--wc-sky-o);--wc-fx:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);--wc-fy:linear-gradient(transparent,#000 18%,#000 62%,transparent);-webkit-mask-image:var(--wc-fx),var(--wc-fy);-webkit-mask-composite:source-in;mask-image:var(--wc-fx),var(--wc-fy);mask-composite:intersect}
.wc-sky .wc{width:100%;height:100%}
.wc-sky-radial{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%)}
.wc-sky-top{--wc-fy:linear-gradient(#000 10%,transparent 85%)}
.wc-spot{display:inline-block;flex:none;width:var(--wc-spot,136px);opacity:var(--wc-spot-o);pointer-events:none;user-select:none;vertical-align:middle;line-height:0}
.wc-spot-crescent,.wc-spot-crescent-left{--wc-spot:40px}.wc-spot-star{--wc-spot:14px}
.wc-head-spot{align-self:center}
.wc-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wc-title h1{margin-bottom:0}
.wc-div{display:flex;justify-content:center;margin:64px 0 -28px;opacity:.6}
.wc-div .wc{width:min(300px,70%)}
.wc-div-v1{opacity:1}.wc-div-v1 .wc{width:min(320px,76%)}
.wc-fig{margin:0;pointer-events:none;user-select:none}
.wc-beside{display:grid;grid-template-columns:minmax(0,1fr) var(--wc-col,300px);gap:16px 48px;align-items:start}
.wc-beside > .wc-fig{grid-column:2;grid-row:1}
.wc-beside > :not(.wc-fig){grid-column:1;grid-row:1;min-width:0}
.wc-beside-roundel{--wc-col:184px;align-items:center}
.wc-beside .grid.why{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (max-width:1000px){.wc-beside{grid-template-columns:minmax(0,1fr) var(--wc-col,240px);gap:16px 28px}.wc-beside-roundel{--wc-col:150px}}
@media (max-width:860px){
  .wc-beside{display:block}
  .wc-fig-sun{max-width:250px;margin:0 auto 20px}
  .wc-fig-roundel{display:none}
  .wc-div{margin:44px 0 -20px}
  .wc-sky{left:-16px;right:-16px}
  .wc-spot-sun{--wc-spot:104px}
  .wc-title .wc-spot{display:none}
}
@media (max-width:640px){.wc-sky{display:none}}
@media (prefers-contrast:more),(forced-colors:active){.wc-sky{display:none}.wc-spot,.wc-div{opacity:.8}}
@media print{.wc-sky,.wc-spot,.wc-div,.wc-fig{display:none}}
.wc-sunrise{position:absolute;z-index:-1;top:-200px;bottom:-96px;left:calc(50% - 50vw);right:calc(50% - 50vw);overflow:hidden;pointer-events:none;user-select:none;opacity:var(--wc-sr-o,.16);view-timeline:--wc-sunrise block;--wc-sr-d:min(640px,50vw - 72px)}
.wc-sunrise .wc{position:absolute;height:auto}
.wc-sr-sun{width:300px;left:50%;margin-left:-150px;top:28px}
.wc-sr-dog{width:160px;top:142px;opacity:.85}
.wc-sr-dog-l{left:calc(50% - var(--wc-sr-d) - 112px)}
.wc-sr-dog-r{left:calc(50% + var(--wc-sr-d) - 48px)}
@keyframes wc-sr-rise{from{transform:translateY(46%);opacity:0;animation-timing-function:cubic-bezier(.35,.15,.35,1)}to{transform:none;opacity:1}}
@keyframes wc-sr-dog{from{transform:translateY(70%);opacity:0;animation-timing-function:cubic-bezier(.35,.15,.35,1)}to{transform:none;opacity:.85}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .wc-sr-sun{animation:wc-sr-rise linear both;animation-timeline:--wc-sunrise;animation-range:entry 30% cover 46%}
  .wc-sr-dog{animation:wc-sr-dog linear both;animation-timeline:--wc-sunrise;animation-range:entry 60% cover 50%}
}}
@media (prefers-reduced-motion:reduce){.wc-sr-sun,.wc-sr-dog{animation:none}}
@media (max-width:860px){.wc-sunrise{bottom:-64px}.wc-sr-dog{display:none}.wc-sr-sun{width:210px;margin-left:-105px;top:84px}}
@media (max-width:640px){.wc-sr-sun{width:150px;margin-left:-75px;top:95px}}
@media (prefers-contrast:more),(forced-colors:active){.wc-sunrise{display:none}}
@media print{.wc-sunrise{display:none}}
.wc-cosmos{position:absolute;z-index:-1;top:-80px;bottom:-96px;left:calc(50% - 60px);right:calc(50% - 50vw);overflow:hidden;pointer-events:none;user-select:none;opacity:var(--wc-co-o,.18);--wc-fy:linear-gradient(transparent,#000 64px,#000 calc(100% - 48px),transparent);--wc-fx:linear-gradient(90deg,transparent,#000 120px);-webkit-mask-image:var(--wc-fx),var(--wc-fy);-webkit-mask-composite:source-in;mask-image:var(--wc-fx),var(--wc-fy);mask-composite:intersect}
.wc-cosmos .wc{position:absolute;left:0;top:0;width:900px;height:auto;--wc-paper:var(--bg-deep)}
@keyframes wc-tw{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:no-preference){.wc-cosmos .wc-tw{animation:wc-tw 9s ease-in-out infinite}.wc-cosmos .wc-tw1{animation-duration:13s;animation-delay:-4s}}
@media (prefers-reduced-motion:reduce){.wc-cosmos .wc-tw{animation:none}}
@media (max-width:1000px){.wc-cosmos{top:auto;height:400px;bottom:-64px;left:calc(50% - 50vw);right:calc(50% - 50vw)}.wc-cosmos .wc{top:auto;bottom:7px;left:auto;right:-117px;width:620px}}
@media (max-width:640px){.wc-cosmos .wc{right:-98px;bottom:66px;width:520px}}
@media (prefers-contrast:more),(forced-colors:active){.wc-cosmos{display:none}}
@media print{.wc-cosmos{display:none}}
/* the account app (account-elements.ts): only under .store-account */
.store-account{--t-fast:120ms;--acc-info:#cfcfd4;--acc-sec-hover:linear-gradient(180deg,#3b3b40,#2b2b2f);--acc-primary-hover:linear-gradient(180deg,#f7a678,#f39561 55%,#ea8043)}
@media (prefers-color-scheme:light){:root:where(:not([data-theme="dark"])) .store-account{--acc-info:#52525b;--acc-sec-hover:linear-gradient(180deg,#ffffff,#f4f4f5);--acc-primary-hover:linear-gradient(180deg,#c4561c,#ba4b13 55%,#a8400c)}}
:root[data-theme="light"] .store-account{--acc-info:#52525b;--acc-sec-hover:linear-gradient(180deg,#ffffff,#f4f4f5);--acc-primary-hover:linear-gradient(180deg,#c4561c,#ba4b13 55%,#a8400c)}
/* motion: colour only, 120 ms at most, no transforms */
.store-account :is(.btn,.icon-btn,.nav-item,.chip,.theme-toggle,.side-back,.site-row,input,select,textarea){transition:color 120ms ease,background-color 120ms ease,border-color 120ms ease}
.store-account :is(.btn,.icon-btn,.chip,.segmented a,.segmented button):active{transform:none}
.store-account .main :is(p,li,dd,td,label,.note,.notice) a:not(.btn,.back,.badge,.card){transition:color 120ms ease}
@media (hover:hover){
.store-account.has-elements .btn-primary:hover{opacity:1;background:var(--acc-primary-hover)}
.store-account .btn-secondary:hover{background:var(--acc-sec-hover)}
.store-account a.tile:hover{border-color:var(--hair)}
.store-account tbody tr:hover td{background:none}
}
/* #10 underline only on a link inside a sentence of prose (owner, 2026-11-04: underlines "went overboard… needs to only be in
   specific places"; one link in a paragraph "looks pretty good, bc it's one thing highlighted"). Rows, tables, lists, labels:
   plain text that warms on hover. */
body.store-account.has-elements .main a:not(.btn,.badge,.chip,.tile,.card,.site-row,.back){background:none;padding-bottom:0;text-decoration:none}
body.store-account.has-elements .main :is(td,th,li,dd,dt,label) a:not(.btn,.badge){color:var(--text)}
@media (hover:hover){body.store-account.has-elements .main a:not(.btn,.badge,.chip,.tile,.card,.site-row,.back):hover{color:var(--accent)}}
body.store-account.has-elements .main p:not(.twin,.link-row) a:not(.btn,.badge,.chip,.back){color:var(--text);background:linear-gradient(90deg,var(--el-ember),var(--el-warm-text)) 0 100%/100% 1px no-repeat;padding-bottom:2px}
@media (hover:hover){body.store-account.has-elements .main p:not(.twin,.link-row) a:not(.btn,.badge,.chip,.back):hover{color:var(--el-warm-text);background-size:100% 2px}}
.store-account .notice a:not(.btn){color:var(--text)}
/* status cards: the site admin's tinted card, info in neutral silver */
.store-account :where(.note,.notice,.flash,.callout,.new-key,.card.danger){--tone:var(--acc-info);--tint-bg:color-mix(in srgb,var(--tone) var(--tint-fill),transparent);--muted:var(--text-2);background:var(--tint-bg);border:1px solid color-mix(in srgb,var(--tone) var(--tint-line),transparent);box-shadow:none}
.store-account :is(.note,.notice,.flash,.callout).ok,.store-account .new-key{--tone:var(--ok)}
.store-account :is(.note,.notice,.flash,.callout).warn{--tone:var(--warn)}
.store-account :is(.note,.notice,.flash,.callout).err,.store-account .card.danger{--tone:var(--err)}
.store-account :is(.note,.new-key){padding:16px 20px}
.store-account :is(.note.ok,.note.err,.new-key)::before{display:none}
.store-account .flash > span:first-child,.store-account .main > .flash > span:first-child{background:none;color:var(--tone)}
@media (max-width:860px){.store-account .main > .flash{background:linear-gradient(var(--tint-bg),var(--tint-bg)),var(--grad-float);box-shadow:var(--hl-top),var(--shadow-float)}}
.store-account .main > .flash.flash-snack{background:linear-gradient(var(--tint-bg),var(--tint-bg)),var(--grad-float);box-shadow:var(--hl-top),var(--shadow-float)}
/* danger: a red outline button, no fill */
.store-account .btn-danger{color:var(--err);background:transparent;border-color:var(--err);box-shadow:none}
@media (hover:hover){.store-account .btn-danger:hover{color:var(--err);background:color-mix(in srgb,var(--err) var(--tint-fill),transparent)}}
.store-account .confirm-step h2{margin:0 0 8px}
/* status dots: static; .dot-attn pulses slowly, only where attention is needed */
@media (prefers-reduced-motion:no-preference){.store-account .dot-attn::before{animation:acct-attn 2.4s ease-in-out infinite}}
/* round pills only for Free, New, version and licence chips */
.store-account .vlist .pill{margin-left:0}
/* disclosures: the homepage FAQ's ruled row with a +, opening at once */
.store-account details.more{border-top:1px solid var(--hair);margin-top:12px}
.store-account details.more > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0;padding:10px 0 2px;list-style:none;cursor:pointer;color:var(--text);font-size:14px;line-height:20px;font-weight:500}
.store-account details.more > summary::-webkit-details-marker{display:none}
.store-account details.more > summary::after{content:"+";flex:none;width:24px;height:24px;margin:0;display:grid;place-items:center;border:1px solid var(--hair-strong);border-radius:50%;background:var(--grad-selected);box-shadow:var(--hl-top);color:var(--text-2);font-size:15px;line-height:1;font-weight:400;transform:none;transition:color 120ms ease,border-color 120ms ease}
.store-account details.more[open] > summary::after{content:"\2212";transform:none}
@media (hover:hover){.store-account details.more > summary:hover::after{color:var(--text);border-color:var(--text-2)}}
.store-account details.more[open] > summary{margin-bottom:8px}
.store-account .rel-history + .rel-history{margin-top:0}
/* code blocks with a head and a key chip (#11) */
.store-account .code-block{margin:8px 0 12px}
.store-account .code-block pre.code{margin:0}
.store-account .btn-key.btn-sm{min-height:28px}
@media (hover:hover){.store-account .btn-key:hover{background:var(--acc-sec-hover);color:var(--text)}}
/* Overview: the latest release in brief, the full log behind one disclosure */
.store-account .rel-brief{list-style:none;margin:0;padding:0}
.store-account .rel-brief li{margin:0;padding:10px 0;border-top:1px solid var(--hair)}
.store-account .rel-brief li:first-child{border-top:0;padding-top:0}
.store-account .rel-brief .rel-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:2px;color:var(--text-2)}
.store-account .rel-full .rel-notes + h3,.store-account .rel-full > h3{margin:16px 0 8px}
/* Overview: next steps in the homepage "How it works" cells, static */
.store-account .acct-next{margin-top:24px}
.store-account .acct-next-top{margin:0 0 16px}
.store-account .acct-next > h2{font-size:16px;line-height:24px;margin:0 0 12px}
.store-account .acct-steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.store-account .acct-steps .panel-cell{padding:20px 20px 24px}
.store-account .acct-steps .step-num{margin:0 0 16px}
.store-account .acct-steps .panel-cell b{font-size:15px;line-height:22px}
.store-account .acct-steps .panel-cell.done b,.store-account .acct-steps .panel-cell.done .step-num{color:var(--muted)}
.store-account .acct-steps .step-done{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-size:13px}
.store-account .acct-next .row{margin:16px 0 0}
.store-account .acct-next .row + .muted{margin:12px 0 0}
@media (max-width:860px){.store-account .acct-steps{grid-template-columns:minmax(0,1fr)}.store-account .acct-steps .panel-cell + .panel-cell{border-left:0;border-top:1px solid var(--hair)}.store-account .acct-steps .panel-cell{padding:16px}.store-account .acct-steps .step-num{margin-bottom:8px}}
@keyframes acct-attn{0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,currentColor 10%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,currentColor 24%,transparent)}}
.has-dots-mark .brand-mark{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210.5%22%20fill%3D%22none%22%20stroke%3D%22%23b4460f%22%20stroke-width%3D%221.3%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%225.6%22%20fill%3D%22%23b4460f%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2216%22%20r%3D%222.7%22%20fill%3D%22%23b4460f%22%2F%3E%3Ccircle%20cx%3D%2226.5%22%20cy%3D%2216%22%20r%3D%222.7%22%20fill%3D%22%23b4460f%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;width:22px;height:22px;border-radius:0}.has-dots-mark .brand-mark::after{display:none}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .has-dots-mark .brand-mark{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210.5%22%20fill%3D%22none%22%20stroke%3D%22%23f0874f%22%20stroke-width%3D%221.3%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%225.6%22%20fill%3D%22%23f0874f%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2216%22%20r%3D%222.7%22%20fill%3D%22%23f0874f%22%2F%3E%3Ccircle%20cx%3D%2226.5%22%20cy%3D%2216%22%20r%3D%222.7%22%20fill%3D%22%23f0874f%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;width:22px;height:22px;border-radius:0}:root:where(:not([data-theme="light"])) .has-dots-mark .brand-mark::after{display:none}}
:root[data-theme="dark"] .has-dots-mark .brand-mark{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210.5%22%20fill%3D%22none%22%20stroke%3D%22%23f0874f%22%20stroke-width%3D%221.3%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%225.6%22%20fill%3D%22%23f0874f%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2216%22%20r%3D%222.7%22%20fill%3D%22%23f0874f%22%2F%3E%3Ccircle%20cx%3D%2226.5%22%20cy%3D%2216%22%20r%3D%222.7%22%20fill%3D%22%23f0874f%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;width:22px;height:22px;border-radius:0}:root[data-theme="dark"] .has-dots-mark .brand-mark::after{display:none}
:root[data-theme="light"] .has-dots-mark .brand-mark{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210.5%22%20fill%3D%22none%22%20stroke%3D%22%23b4460f%22%20stroke-width%3D%221.3%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%225.6%22%20fill%3D%22%23b4460f%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2216%22%20r%3D%222.7%22%20fill%3D%22%23b4460f%22%2F%3E%3Ccircle%20cx%3D%2226.5%22%20cy%3D%2216%22%20r%3D%222.7%22%20fill%3D%22%23b4460f%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;width:22px;height:22px;border-radius:0}:root[data-theme="light"] .has-dots-mark .brand-mark::after{display:none}