/* Material Asterisk — public site styles.
   Palette values are mapped from the "Landing C - Blueprint" design export onto
   this site's own Material 3 token system: the dark scheme carries the export's
   near-black surfaces and amber accent directly, the light and high-contrast
   schemes hold the same hue family at contrast-safe values (the raw amber
   #FFB224 fails on a white background, so light mode uses the darker #8A5A00
   already used elsewhere in this file as an accessible amber). The mechanism —
   M3 tonal roles, dark/light/contrast, density — is unchanged from the desktop
   app's own generated tokens; only the values moved. Typography combines the
   export's vendored Archivo / IBM Plex Mono (console/assets/site-fonts) with
   the app's vendored Roboto / Roboto Mono (console/assets/fonts) as fallback. */


:root{
  color-scheme:dark;
  /* Neutral surfaces — mapped from the Blueprint export's near-black panels. */
  --surface:#0B0E13;
  --surface-0:#0B0E13;
  --surface-1:#0E1219;
  --surface-2:#141925;
  --surface-3:#1C2230;
  --surface-4:#33405A;
  --glass:rgba(11,14,19,.90);
  --on-surface:#E6E9EF;
  --muted:#9AA4B4;
  --muted-2:#7C8698;
  --outline:#33405A;
  --outline-variant:#1C2230;
  /* Brand — the Blueprint export's amber as primary, its status-dot green as secondary. */
  --primary:#FFB224;
  --on-primary:#0B0E13;
  --primary-container:#4A3300;
  --on-primary-container:#FFD98A;
  --primary-soft:color-mix(in srgb,var(--primary) 16%,transparent);
  --secondary:#7ED98F;
  --on-secondary:#04170B;
  --danger:#FFB4AB;
  --danger-strong:#93000A;
  --danger-container:#93000A;
  --good:#7ED98F;
  --warning:#FFB224;
  /* Shape — distinct small/medium/large radii instead of one flat blob. */
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:28px;
  --gap:20px;
  --touch:48px;
  --font-scale:1;
  --rail-width:320px;
  --font-sans:'Archivo','Roboto','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','Roboto Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.28);
  --shadow-2:0 4px 12px rgba(0,0,0,.36),0 12px 32px rgba(0,0,0,.28);
}
html[data-theme="light"]{
  color-scheme:light;
  /* The raw Blueprint amber (#FFB224) fails WCAG contrast on a light surface, so
     light mode keeps the same hue family at #8A5A00 — an accessible amber-brown
     already used in this file — and moves the export's green accent to secondary. */
  --surface:#F5F6F8;
  --surface-0:#FFFFFF;
  --surface-1:#EEF0F4;
  --surface-2:#E4E7ED;
  --surface-3:#D7DBE3;
  --surface-4:#C3C9D4;
  --glass:rgba(245,246,248,.90);
  --on-surface:#12151C;
  --muted:#3A4150;
  --muted-2:#5C6470;
  --outline:#5C6470;
  --outline-variant:#C3C9D4;
  --primary:#8A5A00;
  --on-primary:#FFFFFF;
  --primary-container:#FFE0A8;
  --on-primary-container:#2A1B00;
  --secondary:#146B41;
  --on-secondary:#FFFFFF;
  --danger:#B3261E;
  --danger-strong:#B3261E;
  --danger-container:#FFDAD6;
  --good:#146B41;
  --warning:#8A5A00;
  --shadow-1:0 1px 2px rgba(18,21,28,.14),0 2px 8px rgba(18,21,28,.08);
  --shadow-2:0 4px 12px rgba(18,21,28,.14),0 16px 32px rgba(18,21,28,.10);
}
html[data-theme="contrast"]{
  --surface:#000;--surface-0:#000;--surface-1:#090909;--surface-2:#111;--surface-3:#1b1b1b;--surface-4:#262626;
  --on-surface:#fff;--muted:#f2f2f2;--muted-2:#d8d8d8;--outline:#fff;--outline-variant:#bbb;
  --primary:#FFE600;--on-primary:#000;--primary-container:#3a3400;--on-primary-container:#FFE600;--primary-soft:rgba(255,230,0,.18);
  --secondary:#00FF9C;--on-secondary:#000;--danger:#FF8A80;--danger-strong:#FF3B30;--danger-container:#3a0000;--good:#00FF9C;--warning:#FFE600;
  --shadow-1:none;--shadow-2:none;
}
html[data-density="compact"]{--gap:13px;--touch:42px;--radius:12px;--radius-lg:20px}
html[data-density="spacious"]{--gap:28px;--touch:54px;--radius:20px;--radius-lg:32px}

*{box-sizing:border-box}
html{font-size:calc(16px * var(--font-scale));scroll-behavior:smooth}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--surface);color:var(--on-surface);font-family:var(--font-sans);line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea{min-height:var(--touch)}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit}
code,kbd,.mono{font-family:var(--font-mono)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;z-index:1000;top:8px;left:8px;padding:12px 18px;border-radius:var(--radius-sm);background:var(--primary);color:var(--on-primary);font-weight:700;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ambient{display:none}

.topbar{position:sticky;top:0;z-index:50;height:72px;display:flex;align-items:center;gap:32px;padding:10px clamp(18px,4vw,64px);background:var(--glass);border-bottom:1px solid var(--outline-variant);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:max-content}
.brand-mark,.logo-preview{display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-weight:800;overflow:hidden}
.brand-mark{width:40px;height:40px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:1.05rem}
.brand-mark-image{width:100%;height:100%;object-fit:contain;display:block}
.brand strong,.brand small{display:block}
.brand strong{font-weight:700;letter-spacing:-.01em}
.brand small{font-size:.72rem;color:var(--muted-2)}
.header-links{display:flex;gap:28px;margin-inline:auto}
.header-links a{text-decoration:none;color:var(--muted);font-weight:600;font-size:.9rem}
.header-links a:hover{color:var(--on-surface)}
.top-actions,.hero-actions,.rail-tools,.rail-footer,.preset-row,.inline-controls,.bulk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top-actions{margin-left:auto}
.icon-button,.command-button,.text-button,.regex-trigger,.primary-button,.secondary-button,.download-button,.danger-button,.logo-preset,.builder-buttons button,.context-menu>button{border:0;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;background:transparent;font-weight:600}
.icon-button,.regex-trigger{padding:0;min-width:var(--touch)}
.command-button{background:var(--surface-2);border:1px solid var(--outline-variant);color:var(--muted)}
.command-button:hover{border-color:var(--outline)}
kbd{padding:2px 6px;border:1px solid var(--outline-variant);border-radius:5px;background:var(--surface-1);font-size:.72em;font-family:var(--font-mono)}
.primary-button{background:var(--primary);color:var(--on-primary);font-weight:700;box-shadow:var(--shadow-1)}
.primary-button:hover:not(:disabled){box-shadow:var(--shadow-2)}
.secondary-button{background:var(--primary-soft);color:var(--primary);font-weight:650;border:1px solid color-mix(in srgb,var(--primary) 45%,transparent)}
.download-button{background:var(--surface-3);border:1px solid var(--outline)}
.text-button{color:var(--primary);font-weight:650}
.danger-button{background:color-mix(in srgb,var(--danger-strong) 14%,transparent);color:var(--danger)}
.badge{position:absolute;transform:translate(12px,-13px);min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:var(--danger-strong);color:#fff;font-size:.68rem;display:grid;place-items:center;font-weight:700}
.nav-toggle{display:flex}

.rail{position:fixed;z-index:80;top:0;right:0;width:min(var(--rail-width),100vw);height:100dvh;overflow:auto;padding:18px;background:var(--surface-1);border-left:1px solid var(--outline-variant);box-shadow:var(--shadow-2);transform:translateX(104%);transition:transform .22s cubic-bezier(.2,0,0,1)}
.rail.open{transform:none}
.rail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.rail-tools{padding-block:8px 13px}
.tab-list{display:flex;flex-direction:column;gap:4px}
.tab{display:flex;align-items:center;gap:11px;width:100%;padding:10px 13px;border:0;border-radius:var(--radius-sm);background:transparent;text-align:left;color:var(--muted)}
.tab:hover{background:var(--surface-2)}
.tab[aria-selected="true"]{background:var(--primary-soft);color:var(--on-surface)}
.tab .tab-icon{width:28px;text-align:center}
.tab .pin{margin-left:auto;color:var(--primary)}
.tab-group{margin:15px 9px 6px;color:var(--muted-2);font-size:.68rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.rail-footer{padding-top:18px;border-top:1px solid var(--outline-variant)}

main{width:min(1400px,100%);margin:auto;padding:clamp(22px,4vw,56px)}
.hero{min-height:calc(100vh - 120px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(440px,1.05fr);align-items:center;gap:clamp(32px,5vw,72px);padding:clamp(28px,4vw,56px) 0}
.availability{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid var(--outline-variant);border-radius:999px;color:var(--muted);font-size:.78rem;font-weight:650}
.availability span{width:8px;height:8px;border-radius:50%;background:var(--warning)}
/* Blueprint grid texture, adopted from the Landing C - Blueprint design export. */
.compact-home .hero{position:relative}
.compact-home .hero::before{content:"";position:absolute;inset:-24px -9999px auto -9999px;height:calc(100% + 48px);background-image:linear-gradient(var(--outline-variant) 1px,transparent 1px),linear-gradient(90deg,var(--outline-variant) 1px,transparent 1px);background-size:48px 48px;opacity:.14;z-index:-1;pointer-events:none}
.blueprint-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--primary);text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.compact-home .hero::before{background-image:none}}
.write-pipeline{margin-top:56px;padding:clamp(24px,4vw,44px);border:1px solid var(--outline-variant);border-radius:var(--radius-lg);background:var(--surface-1)}
.write-pipeline h2{margin:10px 0 8px;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.02em}
.write-pipeline>p{margin:0 0 24px;color:var(--muted);max-width:64ch}
.pipeline-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:0;padding:0;list-style:none;border:1px solid var(--outline-variant);background:var(--outline-variant)}
.pipeline-steps li{background:var(--surface-1);padding:18px 16px;display:flex;flex-direction:column;gap:8px}
.pipeline-steps strong{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;color:var(--primary)}
.pipeline-steps span{color:var(--muted);font-size:.85rem;line-height:1.5}
@media(max-width:900px){.pipeline-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pipeline-steps{grid-template-columns:1fr}}


.hero h1{font-family:var(--font-sans);font-weight:700;font-size:clamp(2.5rem,4.6vw,4.25rem);line-height:1.05;letter-spacing:-.02em;margin:.25em 0}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero-copy>p{max-width:640px;color:var(--muted);font-size:clamp(1rem,1.2vw,1.1rem)}
.hero-actions{margin:26px 0}
.release-callout{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:32px;padding:18px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.release-callout small,.release-callout strong{display:block}
.release-callout small{color:var(--muted-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.release-callout p{margin:.35rem 0 0;color:var(--muted);font-size:.8rem;max-width:480px}

.console-preview{position:relative;border:1px solid var(--outline-variant);border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:var(--shadow-2);overflow:hidden}
.preview-chrome{height:48px;display:flex;align-items:center;gap:7px;padding:0 18px;border-bottom:1px solid var(--outline-variant);background:var(--surface-2)}
.preview-chrome>span{width:9px;height:9px;border-radius:50%;background:var(--outline)}
.preview-chrome strong{margin-left:8px;font-size:.8rem;font-weight:650}
.preview-chrome em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--warning)}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--outline-variant)}
.preview-stat{padding:20px 18px;background:var(--surface-1)}
.preview-stat small,.preview-stat strong,.preview-stat .trend{display:block}
.preview-stat small{color:var(--muted-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.preview-stat strong{font-family:var(--font-mono);font-size:clamp(1.6rem,2.4vw,2.4rem);letter-spacing:-.01em;margin:.2em 0}
.preview-stat strong span{font-size:.42em;color:var(--muted-2)}
.trend{font-size:.72rem;color:var(--good)}
.trend.warning{color:var(--warning)}
.demo-disclosure{margin:0;padding:11px 13px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--muted);font-size:.72rem}

.trust-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-block:1px solid var(--outline-variant);color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.02em}
.trust-strip span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;background:var(--primary);border-radius:1px;vertical-align:middle}
.section{margin-top:clamp(72px,10vw,140px);scroll-margin-top:92px}
.section-heading{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:40px;margin-bottom:clamp(26px,4vw,52px)}
.section-heading h2{font-size:clamp(2rem,4vw,3.25rem);line-height:1.08;letter-spacing:-.02em;margin:.15em 0;font-weight:700}
.section-heading>p,.section-heading>div>p{max-width:600px;color:var(--muted);font-size:1.02rem}
.eyebrow,.card-kicker{font-size:.71rem;letter-spacing:.1em;font-weight:750;color:var(--primary);text-transform:uppercase}

.bento-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:var(--gap)}
.bento-card{position:relative;min-height:280px;padding:clamp(22px,3vw,36px);border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1);overflow:hidden}
.bento-card h3,.bento-card h2{font-size:clamp(1.3rem,2vw,1.85rem);line-height:1.2;letter-spacing:-.01em;font-weight:700}
.bento-card p{color:var(--muted)}
.bento-large{grid-column:span 2;min-height:380px;background:var(--surface-1);border-color:color-mix(in srgb,var(--primary) 30%,var(--outline-variant))}
.bento-wide{grid-column:span 2;display:flex;align-items:center;justify-content:space-between}
.card-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--primary);font-size:1.3rem}
.mini-flow{position:absolute;left:36px;right:36px;bottom:36px;display:flex;align-items:center;gap:9px;overflow:auto}
.mini-flow span{white-space:nowrap;padding:9px 14px;border-radius:999px;background:var(--surface-3);font-size:.78rem;font-family:var(--font-mono)}
.mini-flow b{color:var(--primary)}
.orbit{position:relative;width:190px;aspect-ratio:1;border:1px solid var(--outline-variant);border-radius:50%;display:grid;place-items:center}
.orbit:before,.orbit:after{content:"";position:absolute;border:1px solid var(--outline-variant);border-radius:50%;inset:22px}
.orbit:after{inset:48px;background:var(--primary-soft)}
.orbit span{z-index:2;font-weight:700}
.orbit i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--secondary);animation:orbit 8s linear infinite}
.orbit i:nth-of-type(2){animation-delay:-2.7s}
.orbit i:nth-of-type(3){animation-delay:-5.3s}

.destination-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.destination-toolbar p{color:var(--muted)}
.destination-grid,.catalog-grid,.ai-grid,.security-grid{display:grid;gap:var(--gap)}
.destination-grid{grid-template-columns:repeat(auto-fit,minmax(245px,1fr))}
.destination-card,.catalog-card,.surface-card{position:relative;display:flex;flex-direction:column;padding:22px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1);transition:border-color .16s ease,background .16s ease}
.destination-card:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--outline-variant));background:var(--surface-2)}
.destination-card .destination-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--primary);font-size:1.1rem}
.destination-card h3,.catalog-card h3,.surface-card h3{margin:16px 0 8px;font-size:1.1rem;font-weight:650}
.destination-card p,.catalog-card p,.surface-card p{color:var(--muted);font-size:.87rem}
.destination-card a{margin-top:auto;align-self:flex-start}
.destination-card[data-hidden="true"],.catalog-card[data-hidden="true"],.tab[data-hidden="true"],.setting-row[data-hidden="true"]{display:none}
.status-chip{align-self:flex-start;padding:6px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--outline-variant);color:var(--muted);font-size:.7rem;font-weight:650}

.settings-section{padding:clamp(22px,4vw,48px);border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--outline-variant)}
.settings-shell{border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1);overflow:hidden}
.settings-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border-bottom:1px solid var(--outline-variant)}
.settings-tabs{display:flex;gap:6px;overflow:auto}
.settings-tabs button{border:0;border-radius:999px;padding:10px 15px;background:transparent;white-space:nowrap}
.settings-tabs button[aria-selected="true"]{background:var(--primary-soft);color:var(--primary)}
.settings-panels{padding:clamp(18px,3vw,32px)}
.settings-panel{display:none}
.settings-panel.active{display:block}
.setting-row{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--outline-variant)}
.setting-row h3{margin:0}
.setting-row p{margin:.25em 0;color:var(--muted);font-size:.85rem}
.schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.schedule-grid label,.surface-card label,.logo-studio label{display:flex;flex-direction:column;gap:6px}
.weekday-list{display:flex;flex-wrap:wrap;gap:8px}
.feature-band{padding:clamp(24px,4vw,44px);border:1px solid var(--outline-variant);border-radius:var(--radius-lg);background:var(--surface-1)}
.logo-studio{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:center}
.logo-preview{width:220px;max-width:100%;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;font-size:5rem;font-family:var(--font-mono)}
.logo-preview img{width:100%;height:100%;object-fit:contain}
.catalog-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:24px}
.ai-grid{grid-template-columns:repeat(4,1fr)}
.security-grid{grid-template-columns:repeat(3,1fr)}
.code-demo{font:700 2rem var(--font-mono);letter-spacing:.06em;padding:18px;margin:12px 0;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--outline-variant)}
.docs-cta{display:flex;align-items:center;justify-content:space-between;gap:44px;padding:clamp(28px,5vw,64px);border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--outline-variant)}
.docs-cta h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;margin:.2em 0;font-weight:700}
.docs-cta p{max-width:720px;color:var(--muted)}
footer{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:100px;padding:36px clamp(20px,5vw,64px);border-top:1px solid var(--outline-variant);color:var(--muted)}
footer p{font-size:.8rem}

.search-composite{display:flex;align-items:center;gap:5px;position:relative}
.search-composite.wide{width:min(540px,100%)}
input,select,textarea{max-width:100%;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-2);padding:10px 12px}
input[type="range"]{padding:0}
input[type="checkbox"]{accent-color:var(--primary)}
textarea{min-height:90px;resize:vertical}
.search-composite input{width:100%}
/* Adjacent-sibling selector, deliberately more specific than ".sticky-tools-inner p"
   (which several search toolbars already declare for a neighbouring status <p>): this
   readout always sits directly after the .search-composite it describes, and it must
   win that specificity fight rather than inherit a right-aligned, nowrap, margin-0
   rule meant for a different element. */
.search-composite + .mode-status{display:block;width:100%;margin:6px 0 0;font-size:.72rem;letter-spacing:.02em;color:var(--muted-2);font-family:var(--font-mono);white-space:normal}
.search-composite + .mode-status.is-regex{color:var(--primary)}
.search-composite + .mode-status:empty{display:none}
.select-composite,.searchable-select{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.searchable-select>input{max-width:150px}
.plain-note{color:var(--muted);font-size:.86rem}
.overlay-card{width:min(720px,calc(100vw - 24px));max-height:min(88vh,820px);overflow:auto;border:1px solid var(--outline-variant);border-radius:var(--radius-lg);background:var(--surface-1);color:var(--on-surface);padding:22px;box-shadow:var(--shadow-2)}
dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between}
.dialog-heading h2{margin:0;flex:1 1 auto}
/* The dialog-emoji decoration. `flex:0 0 auto` on the glyph and `flex:1 1 auto` on the
 * heading above keep the glyph and the title together on the left with the close control
 * still pushed to the right, whether the decoration is present or not -- so the switch
 * moves nothing except the glyph itself. Sized in `em` so it tracks the text-size slider
 * instead of standing still while everything around it grows. */
.dialog-emoji{flex:0 0 auto;margin-inline-end:10px;font-size:1.15em;line-height:1}
.palette-results{display:grid;gap:6px;margin-top:14px}
.palette-result{width:100%;border:0;border-radius:var(--radius-sm);padding:14px;background:transparent;color:var(--on-surface);text-align:left}
.palette-result:hover{background:var(--surface-2)}
.palette-result strong,.palette-result span{display:block}
.palette-result span{color:var(--muted);font-size:.76rem}
.four-searches{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.four-searches label{display:flex;flex-direction:column;gap:5px}
/* A `.context-menu` rule and a `.context-menu>button` rule sat here from the site's first
 * commit, styling a feature that never shipped -- nothing in any page or in app.js ever
 * carried the class. They were removed when the real menu landed at the foot of this
 * file, because two rules for one selector in one stylesheet is decided by source order
 * rather than by anything a reader can see: an edit to the wrong one is a silent no-op,
 * and the dead one styled a `>button` shape the real menu does not even use. */
.toast-region{position:fixed;z-index:200;right:18px;bottom:18px;display:flex;flex-direction:column-reverse;gap:10px;width:min(400px,calc(100vw - 36px))}
.toast{padding:16px;border-radius:var(--radius);background:var(--surface-3);border:1px solid var(--outline-variant);box-shadow:var(--shadow-2);display:flex;align-items:flex-start}
.toast-text{flex:1 1 auto;min-width:0}
.toast strong,.toast span{display:block}
.toast span{margin-top:4px;color:var(--muted)}
/* The decoration is not part of the message, so it takes neither the muted colour nor
 * the gap that separates a message box's title from its body. */
.toast .dialog-emoji{margin-top:0;color:inherit}
.ticket{padding:11px;margin-top:8px;border-radius:var(--radius-sm);background:var(--surface-2)}
.highlight{animation:highlight 1.2s ease}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,0,0,1)}
.reveal.visible{opacity:1;transform:none}

body.focus-mode .section:not(:focus-within):not(:target){opacity:.55}
body.low-stimulation *{animation:none!important;transition:none!important}
body.one-at-a-time .destination-card:not(:focus-within):not(:hover){opacity:.55}
body.momentum-mode #installer-status::after{content:" Local momentum prompts are enabled."}

@keyframes orbit{from{transform:rotate(0) translateX(95px) rotate(0)}to{transform:rotate(360deg) translateX(95px) rotate(-360deg)}}
@keyframes highlight{45%{box-shadow:0 0 0 4px var(--primary)}}

@media(max-width:1100px){.header-links{display:none}.hero{grid-template-columns:1fr;min-height:auto}.bento-grid{grid-template-columns:1fr 1fr}.bento-large,.bento-wide{grid-column:span 2}.ai-grid{grid-template-columns:1fr 1fr}.security-grid{grid-template-columns:1fr}.section-heading{grid-template-columns:1fr}.section-heading>p{margin:0}.trust-strip{overflow:auto;justify-content:flex-start}.trust-strip span{white-space:nowrap}}
@media(max-width:720px){.topbar{height:64px;padding:8px 14px}.brand small,.command-button{display:none}.top-actions{gap:2px}main{padding:16px}.hero{padding-top:36px}.hero h1{font-size:clamp(2.2rem,10vw,3rem)}.release-callout,.docs-cta,footer{align-items:flex-start;flex-direction:column}.preview-grid{grid-template-columns:1fr}.preview-stat{display:grid;grid-template-columns:1fr auto;align-items:center}.preview-stat .trend{grid-column:1/-1}.bento-grid{grid-template-columns:1fr}.bento-large,.bento-wide{grid-column:auto}.bento-wide{display:block}.orbit{margin:25px auto 0}.mini-flow{position:static;margin-top:44px}.section{margin-top:72px}.section-heading h2{font-size:clamp(1.9rem,9vw,2.6rem)}.settings-section,.feature-band{padding:18px;border-radius:var(--radius)}.settings-top{align-items:stretch;flex-direction:column}.setting-row{grid-template-columns:1fr}.logo-studio{grid-template-columns:1fr}.logo-preview{width:100%;max-width:220px}.ai-grid{grid-template-columns:1fr}.four-searches{grid-template-columns:1fr}.destination-toolbar{align-items:flex-start;flex-direction:column}.destination-toolbar .search-composite{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.orbit i{animation:none}.rail,.destination-card{transition:none}.ambient{display:none}}

.documentation-page{max-width:900px;margin:auto;padding:clamp(22px,5vw,64px)}
.documentation-page nav{margin-bottom:36px;color:var(--muted)}
.documentation-page article{padding:clamp(20px,4vw,48px);border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.documentation-page h1{font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.1;font-weight:700}
.documentation-page p,.documentation-page li{color:var(--muted)}
.documentation-page code{padding:.15em .35em;border-radius:5px;background:var(--surface-2)}

.site-nav{display:flex;align-items:center;gap:6px;margin-inline:auto}
.site-nav a,.local-tabs a{min-height:42px;display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:.85rem;font-weight:600;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="page"],.local-tabs a:hover,.local-tabs a[aria-current="page"]{background:var(--primary-soft);color:var(--primary)}
.page-shell{width:min(1400px,100%);margin:auto;padding:clamp(20px,3vw,44px)}
.compact-home{min-height:calc(100vh - 72px);display:grid;align-content:center}
.compact-hero{min-height:0;grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr);gap:clamp(30px,4vw,64px);padding:16px 0}
.compact-hero h1{font-size:clamp(2.5rem,4.6vw,3.75rem)}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px}
.quick-grid a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:14px;border:1px solid var(--outline-variant);border-radius:var(--radius);text-decoration:none;background:var(--surface-2)}
.quick-grid a:hover{border-color:var(--primary)}
.quick-grid span{grid-row:span 2;color:var(--primary);font-weight:750;font-family:var(--font-mono)}
.quick-grid small{color:var(--muted)}
.disabled-link{pointer-events:none;opacity:.55}
.compact-page{min-height:calc(100vh - 72px)}
.page-intro{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:40px;padding:clamp(22px,4vh,44px) 0 20px}
.page-intro h1{margin:.15em 0;font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.08;letter-spacing:-.02em;font-weight:700}
.page-intro h1 em{font-style:normal;color:var(--primary)}
.page-intro>p{color:var(--muted);font-size:1.02rem;max-width:600px}
.local-tabs{position:sticky;top:72px;z-index:20;display:flex;gap:6px;padding:8px;margin-bottom:18px;border:1px solid var(--outline-variant);border-radius:999px;background:var(--glass);backdrop-filter:blur(14px);width:max-content;max-width:100%;overflow:auto}
.compact-stage,.download-stage,.status-stage{scroll-margin-top:150px}
.product-bento{grid-template-columns:1.25fr .75fr .75fr}
.product-bento .bento-card{min-height:220px}
.product-bento .bento-large{grid-row:span 2;min-height:460px}
.sticky-tools{position:sticky;top:72px;z-index:20;margin-bottom:14px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--glass);backdrop-filter:blur(14px);overflow:visible}
.sticky-tools>summary{padding:10px 14px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:650;user-select:none}
.sticky-tools>summary::-webkit-details-marker{display:none}
.sticky-tools>summary::after{content:"▾";margin-left:auto;transition:transform .18s;color:var(--muted)}
.sticky-tools[open]>summary::after{transform:rotate(180deg)}
.sticky-tools-inner{display:flex;align-items:center;gap:14px;padding:0 14px 12px}
.sticky-tools-inner p{margin:0 0 0 auto;color:var(--muted);white-space:nowrap;font-family:var(--font-mono);font-size:.82rem}
.filter-status{color:var(--muted-2);font-weight:500;font-size:.8rem;font-family:var(--font-mono)}
.compact-grid{grid-template-columns:repeat(4,1fr)}
.compact-grid .destination-card{min-height:220px;padding:18px}
.compact-grid .destination-card h2{margin:12px 0 5px;font-size:1.02rem;font-weight:650}
.compact-grid .destination-card p{margin:0 0 10px;font-size:.78rem}
.pagination{display:flex;justify-content:center;gap:7px;margin-top:16px}
.pagination button{min-width:42px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-1)}
.pagination button[aria-current="page"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.empty-state{grid-column:1/-1;text-align:center;padding:44px;color:var(--muted)}
.download-stage{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--gap)}
.download-panel{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:clamp(22px,4vw,44px);border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.download-panel dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.download-panel dl div{padding:14px;border-top:1px solid var(--outline-variant)}
.download-panel dt{color:var(--muted-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.download-panel dd{margin:4px 0 0;font-weight:650;font-family:var(--font-mono)}
.download-mark{display:grid;place-items:center;width:68px;height:68px;border-radius:var(--radius);background:var(--primary-soft);color:var(--primary);font-size:1.8rem}
.warning-chip{color:var(--warning)}
.compact-facts{display:grid;gap:var(--gap)}
.compact-facts article{padding:20px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.compact-facts h2{font-size:1rem;font-weight:650}
.compact-facts p{font-size:.8rem;color:var(--muted)}
.status-stage{display:grid;grid-template-columns:.65fr 1.35fr;gap:var(--gap)}
.status-cards{display:grid;gap:var(--gap)}
.status-cards article{padding:20px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.status-cards small,.status-cards strong{display:block}
.status-cards small{color:var(--muted-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.status-cards strong{margin:6px 0;font-size:1.3rem;font-family:var(--font-mono)}
.status-cards p{margin:0;color:var(--muted);font-size:.8rem}
.compact-console{transform:none}
.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.setting-card{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:160px;padding:20px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.setting-card h2{margin:.25em 0;font-size:1.05rem;font-weight:650}
.setting-card p{margin:0;color:var(--muted);font-size:.8rem}
.setting-card input[type="checkbox"]{width:26px;height:26px}
.vocabulary-card{grid-column:span 2}
.range-row{display:flex;align-items:center;gap:8px}
.state-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--muted-2)}
.state-dot.good{background:var(--good)}
.state-dot.waiting{background:var(--warning)}
.notice{padding:12px;border-bottom:1px solid var(--outline-variant)}
.notice p{color:var(--muted)}

.documentation-page{max-width:1080px;min-height:100vh}
.documentation-page .article-shell{display:grid;grid-template-columns:220px 1fr;gap:20px}
.documentation-page .article-nav{position:sticky;top:20px;align-self:start;display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.documentation-page .article-nav a{min-height:40px;display:flex;align-items:center;padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;color:var(--muted)}
.documentation-page .article-nav a:hover{background:var(--primary-soft);color:var(--primary)}
.documentation-page article{padding:24px}
.documentation-page details{border-bottom:1px solid var(--outline-variant)}
.documentation-page details summary{cursor:pointer;min-height:52px;display:flex;align-items:center;font-weight:700}
.documentation-page details .article-section{padding:0 4px 18px}
.documentation-page details:first-of-type[open] summary{color:var(--primary)}

@media(max-width:1100px){.site-nav{position:fixed;z-index:90;top:64px;right:14px;display:none;flex-direction:column;align-items:stretch;width:min(330px,calc(100vw - 28px));padding:12px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1);box-shadow:var(--shadow-2)}.site-nav.open{display:flex}.site-nav a{justify-content:flex-start}.compact-hero{grid-template-columns:1fr}.compact-grid{grid-template-columns:repeat(2,1fr)}.product-bento{grid-template-columns:1fr 1fr}.product-bento .bento-large{grid-column:span 2;grid-row:auto;min-height:320px}.status-stage,.download-stage{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr 1fr}.vocabulary-card{grid-column:span 2}}
@media(max-width:720px){.page-intro{grid-template-columns:1fr;padding-top:26px}.page-intro h1{font-size:clamp(2rem,10vw,2.75rem)}.compact-home{display:block}.compact-hero{padding-top:34px}.quick-grid,.settings-grid,.compact-grid,.product-bento{grid-template-columns:1fr}.product-bento .bento-large,.vocabulary-card{grid-column:auto}.sticky-tools{position:static}.sticky-tools-inner{align-items:stretch;flex-direction:column}.sticky-tools-inner p{margin:0}.local-tabs{top:64px;width:100%}.download-panel{grid-template-columns:1fr}.download-panel dl{grid-template-columns:1fr}.documentation-page .article-shell{grid-template-columns:1fr}.documentation-page .article-nav{position:sticky;top:0;z-index:10;flex-direction:row;overflow:auto}.trust-strip{margin-top:30px}}
@media(prefers-reduced-motion:reduce){.site-nav,.quick-grid a{transition:none}}

/* ---- Custom-styled form controls: no default browser chrome anywhere. ---- */
select{appearance:none;-webkit-appearance:none;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%239AA39B"/></svg>') calc(100% - 14px) center/10px 6px no-repeat;padding:10px 34px 10px 12px}
html[data-theme="light"] select{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%236F7971"/></svg>')}
select:hover{border-color:var(--outline)}
select::-ms-expand{display:none}

input[type="checkbox"],input[type="radio"]{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border:2px solid var(--outline);border-radius:6px;background:var(--surface-2);display:inline-grid;place-items:center;transition:background .14s ease,border-color .14s ease}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]::before,input[type="radio"]::before{content:"";width:14px;height:14px;transform:scale(0);transition:transform .14s cubic-bezier(.2,0,0,1);background:var(--on-primary);clip-path:polygon(11% 45%,25% 30%,42% 62%,78% 20%,92% 34%,44% 88%)}
input[type="radio"]::before{clip-path:none;border-radius:50%;width:10px;height:10px}
input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--primary);border-color:var(--primary)}
input[type="checkbox"]:checked::before,input[type="radio"]:checked::before{transform:scale(1)}
input[type="checkbox"]:hover,input[type="radio"]:hover{border-color:var(--primary)}
label:has(input[type="checkbox"]),label:has(input[type="radio"]){display:inline-flex;align-items:center;gap:10px;min-height:var(--touch)}

input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;height:var(--touch)}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--primary) 0,var(--primary) var(--range-fill,50%),var(--surface-3) var(--range-fill,50%),var(--surface-3) 100%)}
input[type="range"]::-moz-range-track{height:6px;border-radius:999px;background:var(--surface-3)}
input[type="range"]::-moz-range-progress{height:6px;border-radius:999px;background:var(--primary)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-9px;width:24px;height:24px;border-radius:50%;background:var(--primary);border:3px solid var(--on-primary);box-shadow:var(--shadow-1);cursor:pointer}
input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--primary);border:3px solid var(--on-primary);box-shadow:var(--shadow-1);cursor:pointer;box-sizing:border-box}
input[type="range"]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--primary);outline-offset:3px}
input[type="range"]:focus-visible::-moz-range-thumb{outline:3px solid var(--primary);outline-offset:3px}

input[type="color"]{-webkit-appearance:none;appearance:none;width:52px;height:36px;padding:3px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
input[type="color"]::-webkit-color-swatch{border:0;border-radius:6px}
input[type="color"]::-moz-color-swatch{border:0;border-radius:6px}

input[type="file"]{border:1px dashed var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-2);padding:9px 12px;font-size:.85rem}
input[type="file"]::file-selector-button{border:0;border-radius:999px;padding:8px 16px;margin-right:12px;background:var(--primary);color:var(--on-primary);font-weight:700;cursor:pointer}
input[type="file"]::-webkit-file-upload-button{border:0;border-radius:999px;padding:8px 16px;margin-right:12px;background:var(--primary);color:var(--on-primary);font-weight:700;cursor:pointer}

details{border-radius:var(--radius-sm)}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";display:inline-block;width:9px;height:9px;margin-right:12px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(-45deg);transition:transform .16s ease}
details[open]>summary::before{transform:rotate(45deg)}

hr{border:0;height:1px;background:var(--outline-variant);margin:24px 0}
progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:var(--surface-3)}
progress::-webkit-progress-bar{background:var(--surface-3)}
progress::-webkit-progress-value{background:var(--primary);border-radius:999px}
progress::-moz-progress-bar{background:var(--primary);border-radius:999px}
meter{appearance:none;-webkit-appearance:none;width:100%;height:8px}
meter::-webkit-meter-bar{background:var(--surface-3);border:0;border-radius:999px}
meter::-webkit-meter-optimum-value{background:var(--primary);border-radius:999px}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--surface-1)}
::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:999px;border:3px solid var(--surface-1)}
::-webkit-scrollbar-thumb:hover{background:var(--outline)}
*{scrollbar-width:thin;scrollbar-color:var(--surface-4) var(--surface-1)}

/* ---- Generated motion graphics: canvas call-graph, waveform, ambient field. ---- */
.ambient{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient::before,.ambient::after{content:"";position:absolute;width:52vmax;height:52vmax;border-radius:50%;filter:blur(90px);opacity:.16;background:radial-gradient(circle,var(--primary) 0%,transparent 68%);animation:drift-a 34s ease-in-out infinite alternate}
.ambient::after{background:radial-gradient(circle,var(--secondary) 0%,transparent 68%);animation-name:drift-b;animation-duration:41s;opacity:.11}
.ambient-a::before{top:-18vmax;left:-14vmax}
.ambient-a::after{bottom:-22vmax;right:-16vmax}

.console-preview{position:relative}
/* Everything except the canvas sits above it. `.console-preview>*` and `.hero-canvas`
   carry the same specificity, so whichever came later won outright — and the later one
   was turning the canvas into an in-flow block that reserved 598x299 of layout instead
   of overlaying the card. Excluding it here settles the collision by intent rather than
   by source order. */
.console-preview>*:not(.hero-canvas){position:relative;z-index:1}
.console-preview>.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1;pointer-events:none}

.waveform{display:flex;align-items:flex-end;gap:3px;height:40px;padding:0 18px 16px;position:relative;z-index:1}
.waveform span{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:linear-gradient(to top,var(--primary),var(--secondary));animation:wave-bar 1.6s ease-in-out infinite;transform-origin:bottom}
.count-up{font-variant-numeric:tabular-nums}

@keyframes drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(6vmax,4vmax) scale(1.12)}}
@keyframes drift-b{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-5vmax,-3vmax) scale(1)}}
@keyframes wave-bar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}

@media(prefers-reduced-motion:reduce){
  .ambient::before,.ambient::after{animation:none}
  .waveform span{animation:none;transform:scaleY(.6)}
  .hero-canvas{display:none}
  details>summary::before{transition:none}
}

/* ---- product.html: connection-kind diagram ---- */
.connection-diagram{display:grid;gap:10px;padding:22px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.connection-diagram svg{width:100%;height:auto;display:block}
.connection-diagram .path{stroke:var(--outline-variant);stroke-width:2;fill:none;transition:stroke .3s ease}
.connection-diagram .node{fill:var(--surface-2);stroke:var(--outline-variant);stroke-width:1.5;transition:stroke .3s ease,fill .3s ease}
.connection-diagram .node-label{fill:var(--muted);font-size:9px;font-family:var(--font-sans)}
.connection-diagram [data-path]{cursor:default}
.connection-diagram [data-path] .path{stroke-dasharray:6 5}
.connection-diagram [data-path].active .path{stroke:var(--primary);stroke-width:3;animation:path-flow 1.1s linear infinite}
.connection-diagram [data-path].active .node{stroke:var(--primary);fill:var(--primary-soft)}
.connection-diagram [data-path].active .kind-label{color:var(--primary)}
.connection-legend{display:flex;flex-wrap:wrap;gap:10px}
.kind-label{padding:6px 12px;border-radius:999px;border:1px solid var(--outline-variant);color:var(--muted);font-size:.76rem;font-weight:650;transition:color .3s ease,border-color .3s ease}
.kind-label.active{border-color:var(--primary);color:var(--primary)}
@keyframes path-flow{to{stroke-dashoffset:-22}}

/* ---- documentation.html: destination rail map ---- */
.destination-map{display:grid;gap:8px;margin-bottom:20px;padding:16px 18px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.rail{display:grid;grid-template-columns:84px 1fr 52px;align-items:center;gap:12px}
.rail-label{font-size:.76rem;font-weight:650;color:var(--muted)}
.rail-track{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.rail-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(to right,var(--primary),var(--secondary));transition:width .3s cubic-bezier(.2,0,0,1)}
.rail-count{text-align:right;font-size:.74rem;color:var(--muted-2)}
.rail-empty .rail-fill{background:var(--outline-variant)}
.rail-empty .rail-count{color:var(--outline)}

/* ---- downloads.html: assembly / checksum motif ---- */
.package-motif{display:flex;flex-direction:column;align-items:center;gap:10px}
.package-motif svg{width:96px;height:96px}
.package-motif .crate{stroke:var(--outline);stroke-width:2;fill:var(--surface-2)}
.package-motif .seam{stroke:var(--outline-variant);stroke-width:1.5;stroke-dasharray:4 4}
.package-motif .scan{stroke:var(--warning);stroke-width:2;opacity:.85;animation:scan-sweep 2.6s ease-in-out infinite}
.checksum-strip{display:flex;gap:3px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted-2)}
.checksum-strip span{padding:4px 6px;border-radius:4px;background:var(--surface-2);border:1px dashed var(--outline-variant);animation:checksum-fade 1.8s ease-in-out infinite}
@keyframes scan-sweep{0%,100%{transform:translateY(-24px)}50%{transform:translateY(24px)}}
@keyframes checksum-fade{0%,100%{opacity:.4}50%{opacity:.9}}

/* ---- status.html: instrument panel ---- */
.status-cards article{position:relative;overflow:hidden}
.gauge{--value:0%;width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--gauge-color,var(--good)) var(--value),var(--surface-3) 0);display:grid;place-items:center;flex:none}
.gauge::before{content:"";width:40px;height:40px;border-radius:50%;background:var(--surface-1)}
.sparkline{display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:8px}
.sparkline span{flex:1;border-radius:1px 1px 0 0;background:var(--outline-variant)}
.sparkline.is-good span{background:var(--good);animation:spark-pulse 2.4s ease-in-out infinite}
.sparkline.is-waiting span{background:var(--warning)}
.status-cards article .card-top{display:flex;align-items:center;gap:14px}
.status-timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:2px solid var(--outline-variant);margin-left:6px}
.status-timeline li{position:relative;padding:14px 0 14px 22px}
.status-timeline li::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--surface-1);border:2px solid var(--outline)}
.status-timeline li[data-state="good"]::before{border-color:var(--good);background:var(--good)}
.status-timeline li[data-state="waiting"]::before{border-color:var(--warning)}
.status-timeline strong,.status-timeline p{display:block}
.status-timeline p{color:var(--muted);font-size:.82rem;margin:.2em 0 0}
@keyframes spark-pulse{0%,100%{opacity:.75}50%{opacity:1}}

/* ---- settings.html: live preview panel ---- */
.settings-preview{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--outline-variant);border-radius:var(--radius-lg);background:var(--surface-1);margin-bottom:22px}
.settings-preview .preview-window{border:1px solid var(--outline-variant);border-radius:var(--radius);overflow:hidden;background:var(--surface-0)}
.settings-preview .preview-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--outline-variant)}
.settings-preview .preview-bar span{width:8px;height:8px;border-radius:50%;background:var(--outline)}
.settings-preview .preview-bar strong{margin-left:8px;font-size:.8rem}
.settings-preview .preview-body{display:flex;align-items:center;gap:12px;padding:18px}
.settings-preview .preview-chip{padding:8px 16px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-weight:700;font-size:.82rem}
.settings-preview .preview-line{flex:1;height:8px;border-radius:999px;background:var(--surface-3)}
.settings-preview .preview-meta{display:flex;justify-content:space-between;gap:12px;font-size:.76rem;color:var(--muted-2)}
.settings-preview .preview-scale-track{width:80px;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
#preview-scale{display:block;height:100%;background:var(--primary);transition:width .16s ease}

@media(prefers-reduced-motion:reduce){
  .connection-diagram [data-path].active .path{animation:none}
  .package-motif .scan{animation:none;transform:translateY(0)}
  .checksum-strip span{animation:none;opacity:.75}
  .sparkline.is-good span{animation:none}
}

/* Attention accommodations, collapsible panels, and local logo mark: appended
   deliberately at the end so every earlier cascade layer keeps its original
   specificity story. */
.collapsible-panel{border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1);margin-bottom:20px;overflow:hidden}
.collapsible-panel>summary{cursor:pointer;padding:12px 16px;font-weight:650;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;user-select:none}
.collapsible-panel>summary::-webkit-details-marker{display:none}
.collapsible-panel>summary::after{content:"▾";transition:transform .18s;color:var(--muted)}
.collapsible-panel[open]>summary::after{transform:rotate(180deg)}
.collapsible-panel>summary:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.collapsible-panel>.destination-map,.collapsible-panel>.settings-preview{margin:0 16px 16px}

.session-timer{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);padding:6px 10px;border:1px solid var(--outline-variant);border-radius:999px;white-space:nowrap}

.one-thing-banner{margin:0 0 16px;padding:10px 16px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1);font-size:.85rem}
.one-thing-banner[hidden]{display:none}
.update-banner{margin:0 0 16px;padding:12px 16px;border:1px solid var(--outline-variant);border-left:3px solid var(--primary);border-radius:var(--radius);background:var(--surface-1);font-size:.85rem}
.update-banner[hidden]{display:none}
.update-banner strong{display:block;margin-bottom:4px}
.update-banner p{margin:0 0 10px;color:var(--on-surface-variant)}
.update-banner-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* In-context recovery. Deliberately shaped like the surface it interrupts rather
   than like an alert: it appears where somebody is already looking, so it should
   read as part of that card and not as a second thing to deal with. The accent
   edge is decoration only -- every fact is in the text, because a colour is not
   something a listener can hear or a monochrome display can show. */
.recovery{margin:8px 0 0;padding:10px 14px;border:1px solid var(--outline-variant);border-left:3px solid var(--primary);border-radius:var(--radius);background:var(--surface-1);font-size:.82rem}
.recovery-heading{margin:0 0 4px;font-size:.86rem;font-weight:700}
.recovery-detail{margin:0 0 6px;color:var(--on-surface-variant)}
.recovery-lead{margin:0 0 6px;color:var(--on-surface-variant)}
.recovery-note{margin:0 0 8px;color:var(--muted-2)}
.recovery-nothing{margin:0 0 8px;color:var(--muted-2)}
.recovery-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.recovery-forbidden-label{margin:0 0 4px;font-weight:600}
.recovery-forbidden{margin:0;padding-left:18px;color:var(--muted-2)}
.recovery-forbidden li{margin-bottom:4px}

body.attn-focus .topbar,body.attn-focus footer{opacity:.55;transition:opacity .2s}
body.attn-focus .topbar:hover,body.attn-focus .topbar:focus-within,body.attn-focus footer:hover,body.attn-focus footer:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){
  body.attn-focus .topbar,body.attn-focus footer{transition:none}
  .collapsible-panel>summary::after{transition:none}
}

/* Site Integration pig: real exports, real bulk actions, real colour translator.
   Appended at the end so nothing earlier changes specificity. */
.export-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0;padding:14px 16px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.export-toolbar label{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.export-loss{width:100%;margin:0;color:var(--warning);font-size:.8rem}
.export-loss:empty{display:none}

.notif-toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.notif-bulk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.notif-bulk-row .filter-status{margin-left:auto}
.notif-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;border:1px solid var(--danger);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--danger-strong) 12%,transparent)}
.notif-confirm[hidden]{display:none}
.notif-confirm p{margin:0;flex:1 1 220px;font-size:.85rem}
.notice{display:flex;align-items:flex-start;gap:10px}
.notice input[type="checkbox"]{margin-top:2px;flex:none}
.notice-body{flex:1;min-width:0}

.setting-card-stack{flex-direction:column;align-items:stretch;gap:14px}
/* The narration card is a stack of labelled controls rather than one switch, so its
   labels have to read as labels: without this they inherit the card's body colour and
   sit indistinguishably against the status sentences between them. The range rows
   keep their slider from collapsing when a label shares the row with it. */
.setting-card-stack label[for^="narration-"]{color:var(--muted-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.setting-card-stack .range-row label[for^="narration-"]{flex:0 0 auto}
.setting-card-stack .range-row input[type="range"]{flex:1 1 auto;min-width:0}
/* The restricted-presentation card: its labels read as labels for the same reason the
   narration ones do, and its three control groups are laid out as stacks. The [hidden]
   rules are load-bearing rather than defensive -- `display:grid` on a group would
   otherwise beat the browser's own `[hidden]{display:none}`, and the group a person is
   not in the state for would sit there fully operable. */
.school-card label[for^="school-"]{color:var(--muted-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
#school-name-controls,#school-arm-controls,#school-unlock-controls{display:grid;gap:6px}
#school-name-controls[hidden],#school-arm-controls[hidden],#school-unlock-controls[hidden]{display:none}
#school-arm-controls button,#school-unlock-controls button{justify-self:start;margin-top:6px}
#school-recovery summary{cursor:pointer;color:var(--muted-2);font-size:.82rem}
#school-recovery p{margin:8px 0 0;color:var(--muted-2);font-size:.82rem}
.setting-note{margin:0;color:var(--muted-2);font-size:.82rem}
.colour-translate{display:flex;flex-direction:column;gap:10px}
.colour-translate .search-composite{width:100%}
.colour-translate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.colour-translate-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-2)}
.colour-translate-row span:first-child{color:var(--muted-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.colour-translate-row output{font-family:var(--font-mono);font-size:.78rem}
.colour-translate-row button{padding:4px 10px;font-size:.72rem;background:var(--surface-3)}
.contrast-result{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--outline-variant);font-size:.84rem}
.contrast-result[data-verdict="fail"]{border-color:var(--danger);color:var(--danger)}
.contrast-result[data-verdict="AA"],.contrast-result[data-verdict="AAA"]{border-color:var(--good);color:var(--good)}

/* Destructive-action super-confirmation: two independent keys plus a
   full-range slider gate "Reset settings". */
.super-confirm-keys{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.super-confirm-key{display:flex;align-items:center;gap:8px;font-size:.9rem}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#reset-confirm-slider:disabled{opacity:.4;cursor:not-allowed}

/* Long-operation progress. The bar is a real determinate <progress>, never an
   indeterminate sweep: an animation that runs whatever is happening is the spinner
   this surface exists to replace, and it is also motion nobody asked for. The
   sentence under it carries the same counts in words, so the report survives both a
   screen reader and a reduced-motion preference without losing anything. */
.operation-progress{margin:14px 0}
.operation-progress label{display:block;font-size:.82rem;color:var(--muted-2);margin-bottom:6px}
.operation-progress progress{width:100%;height:10px;border-radius:999px;overflow:hidden}
.operation-progress progress::-webkit-progress-bar{background:var(--surface-2);border-radius:999px}
.operation-progress progress::-webkit-progress-value{background:var(--primary);border-radius:999px}
.operation-progress progress::-moz-progress-bar{background:var(--primary)}
#export-everything-progress-text{margin:8px 0 0;font-size:.82rem;color:var(--muted-2)}
.operation-optional{margin:12px 0;display:flex;flex-direction:column;gap:6px}
.operation-optional[hidden]{display:none}
#export-everything-decline:empty{display:none}
#export-everything-disabled-reason:empty,#export-everything-reentry:empty{display:none}

/* Local history panel. */
.history-list{max-height:50vh;overflow:auto;margin-top:14px}
.history-entry{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid var(--outline-variant)}
.history-entry p{margin:4px 0;color:var(--muted)}
.history-entry small{color:var(--muted-2);font-family:var(--font-mono);font-size:.78rem}

/* Provider-authored Markdown output (such as release notes). */
.release-notes-wrap{margin-top:18px}
.release-notes-wrap h3{margin:0 0 8px}
.release-notes h3,.release-notes h4,.release-notes h5{margin:12px 0 6px}
.release-notes ul{margin:8px 0;padding-left:22px}
.release-notes pre{padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);overflow:auto}
.release-notes p{margin:8px 0;color:var(--muted)}

/* Changelog. The section spans the whole page rather than sitting in the download
 * grid's narrow right column: a change summary is a sentence, and a sentence in a
 * 300px column wraps four times. */
.changelog-stage{margin-top:var(--gap);scroll-margin-top:150px;display:grid;gap:14px}
.changelog-head h2{margin:4px 0 6px}
.changelog-head p{margin:0;max-width:74ch;color:var(--muted)}
.changelog-entries{display:grid;gap:12px}
.changelog-entry{padding:14px 16px;border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-1)}
.changelog-entry header{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;justify-content:space-between}
.changelog-entry h3{margin:0;font-size:1.05rem}
.changelog-entry time{color:var(--muted);font-size:.85rem}
.changelog-entry h4{margin:12px 0 4px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.changelog-entry ul{margin:0;padding-left:20px;display:grid;gap:6px}
.changelog-entry li{line-height:1.5}
/* The commit id stays legible rather than decorative: it is the one part of an entry a
 * reader can check for themselves. */
.changelog-commit{font-size:.8rem;color:var(--muted);white-space:nowrap}
a.changelog-commit:hover,a.changelog-commit:focus-visible{color:var(--primary)}

@media(max-width:640px){
  .notif-bulk-row .filter-status{margin-left:0}
  .changelog-entry header{flex-direction:column;gap:2px}
}

/* Product screenshots.
 *
 * The grid is `auto-fit` with a `minmax` floor rather than a fixed column count, so it
 * collapses to one column on a narrow screen without a breakpoint to maintain. The
 * images carry their intrinsic width and height in the markup and `height:auto` here,
 * which is what stops the page reflowing as each one arrives -- the browser reserves the
 * right box before the bytes land.
 *
 * `max-width:100%` is the line that keeps a 2160px capture from pushing the page body
 * sideways on a phone, which the site contract forbids outright. */
.screens .shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-4, 1rem);
  margin-top: var(--space-4, 1rem);
}
.screens .shot {
  margin: 0;
  border: 1px solid var(--md-sys-color-outline-variant, #1C2230);
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  overflow: hidden;
  background: var(--md-sys-color-surface-container, #0B0E13);
}
.screens .shot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-bottom: 1px solid var(--md-sys-color-outline-variant, #1C2230);
}
.screens .shot figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-3, 0.75rem);
  font-size: 0.875rem;
}
.screens .shot figcaption strong { color: var(--md-sys-color-primary, #FFB224); }
.screens .shot figcaption span { color: var(--md-sys-color-on-surface-variant, #A9B4C6); }

/* ------------------------------------------------------------------
 * The right-click menu.
 *
 * `position:fixed` because it is placed from viewport coordinates, and clamped in
 * script rather than here -- CSS can keep a box inside the viewport but it cannot
 * decide to flip a menu to the other side of the point it was opened from, and a
 * `max-height` that is not paired with `overflow:auto` deletes whatever falls past
 * it with no scrollbar to say anything is missing.
 * ------------------------------------------------------------------ */
.context-menu{position:fixed;z-index:150;width:min(var(--context-menu-width,320px),calc(100vw - 16px));display:flex;flex-direction:column;gap:8px;overflow:auto;padding:12px;border:1px solid var(--outline);border-radius:var(--radius);background:var(--surface-1);color:var(--on-surface);box-shadow:var(--shadow-2);transition:opacity .12s ease}
.context-menu[hidden]{display:none}
.context-menu-title{margin:0;font-size:.78rem;font-weight:700;color:var(--muted)}
.context-menu-search-row{display:flex;gap:6px;align-items:stretch}
.context-menu-search{flex:1 1 auto;min-width:0;padding:8px 10px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-0);color:var(--on-surface);font:inherit}
.context-menu-regex{flex:0 0 auto;min-width:var(--touch);min-height:var(--touch);border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--muted);font-family:var(--font-mono)}
.context-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.context-menu-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;min-height:var(--touch);padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer}
.context-menu-item:hover{background:var(--surface-2)}
.context-menu-item[aria-selected="true"]{background:var(--surface-3);outline:2px solid var(--outline);outline-offset:-2px}
.context-menu-item[aria-disabled="true"]{cursor:default;opacity:.72}
.context-menu-item[aria-disabled="true"]:hover{background:transparent}
.context-menu-label{grid-column:1;min-width:0}
/* Right-aligned, in its own column, so a long label wraps rather than pushing the
 * chord off the edge of the menu. */
.context-menu-keys{grid-column:2;justify-self:end;white-space:nowrap;padding:2px 6px;border:1px solid var(--outline-variant);border-radius:5px;background:var(--surface-0);font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.context-menu-reason{grid-column:1 / -1;font-size:.72rem;line-height:1.4;color:var(--muted-2)}
.context-menu-item.is-destructive .context-menu-label{color:var(--danger)}
.context-menu-empty{padding:10px;font-size:.8rem;color:var(--muted)}
.context-menu-count{margin:0;font-size:.72rem;color:var(--muted)}
.context-menu-foot{margin:0;padding-top:6px;border-top:1px solid var(--outline-variant);font-size:.72rem;line-height:1.45;color:var(--muted-2)}
@media(prefers-reduced-motion:reduce){.context-menu{transition:none}}

/* Built-in authenticator. The code is the thing a person came to read, so it is the
 * largest text in the row and it is monospaced, because grouped digits that shift
 * width every second are harder to read back than they look. The countdown lives in
 * the meta line as words rather than as a bar: a colour or a shrinking shape is not
 * readable to everyone, and a number of seconds is. */
.auth-list{display:flex;flex-direction:column;gap:8px;width:100%}
.auth-entry{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-0)}
.auth-select{flex:none;display:flex;align-items:center;min-height:var(--touch)}
.auth-select input[type="checkbox"]{width:22px;height:22px}
.auth-entry-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.auth-entry-main strong{font-size:.92rem;overflow-wrap:anywhere}
.auth-code{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;letter-spacing:.08em;color:var(--primary)}
.auth-meta{margin:0;font-size:.74rem;color:var(--muted-2);overflow-wrap:anywhere}
.auth-entry-actions{flex:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:min(100%,320px)}
#auth-camera{width:min(320px,100%);margin-top:10px;border-radius:var(--radius-sm);background:var(--surface-2)}
#auth-camera[hidden]{display:none}
#authenticator-dialog fieldset{margin:12px 0;padding:12px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm)}
#authenticator-dialog legend{padding:0 6px;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)}
#authenticator-dialog label{display:block;margin-top:10px;font-size:.78rem;color:var(--muted-2)}
#authenticator-dialog input:not([type="file"]),#authenticator-dialog select{width:100%}
#authenticator-dialog .inline-controls input:not([type="file"]){flex:1 1 auto;min-width:0}
/* Narrow screens: the action column stops competing with the code for width. */
@media(max-width:620px){.auth-entry{flex-wrap:wrap}.auth-entry-actions{max-width:100%;justify-content:flex-start}}

/* ---------------------------------------------------------------------------
   Local suite pages (converter, Ollama). These class names shipped in the
   markup with no rules behind them, so every card on both pages rendered as an
   unstyled block; the panels below are the shared shell and the converter's own
   catalogue, queue and pager.
   --------------------------------------------------------------------------- */
.suite-panel{display:flex;flex-direction:column;gap:14px}
.suite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:18px}
.ok-chip{color:var(--success,#5FD08A)}
.file-picker{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:48px;cursor:pointer}
.file-picker input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.converter-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.converter-toolbar .search-composite.wide{flex:1 1 260px;min-width:0}
.adapter-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.adapter-category h3{margin:0 0 8px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)}
.adapter-category ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.adapter-entry{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:12px;border:1px solid var(--outline-variant);border-radius:14px;background:var(--surface-1)}
.adapter-entry.is-unavailable{background:var(--surface-0)}
.adapter-entry .adapter-name{font-weight:650}
.adapter-entry p{grid-column:1/-1;margin:0;font-size:.78rem;color:var(--muted)}
.converter-queue{display:flex;flex-direction:column;gap:14px}
.converter-item{padding:14px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-1);display:flex;flex-direction:column;gap:8px}
.converter-item-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.converter-item-facts,.converter-item-reason{margin:0;font-size:.78rem;color:var(--muted)}
.converter-item-reason{color:var(--warning)}
.converter-item-actions{display:flex;flex-wrap:wrap;gap:10px}
.converter-item-actions button{min-height:48px}
.converter-preview{margin:0;padding:12px;border-radius:12px;background:var(--surface-0);border:1px solid var(--outline-variant);font-size:.74rem;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.converter-pager{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.converter-pager button{min-height:48px}
@media(max-width:620px){.converter-item-head{flex-wrap:wrap}.converter-toolbar{flex-direction:column;align-items:stretch}}

/* Support Tickets is a local recovery desk, not a network service. Keep the disclosure
   visually distinct from the playful ticket copy and keep its path readable at narrow widths. */
.support-disclosure{margin:12px 0;padding:12px 14px;border:1px solid var(--outline);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--on-surface);font-weight:600;font-size:.82rem}
.support-card{grid-column:span 2}
.support-form{display:grid;gap:10px;margin:14px 0 18px}
.support-form label{display:flex;flex-direction:column;gap:5px;font-size:.82rem}
.support-form textarea{min-height:96px;resize:vertical;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--on-surface);padding:10px 12px;font:inherit}
.support-list{display:grid;gap:10px}
.support-ticket{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-1)}
.support-ticket input[type="checkbox"]{margin-top:2px;flex:none}
.support-body{flex:1;min-width:0}
.support-body h3{margin:0 0 4px;font-family:var(--font-mono);font-size:.95rem;font-weight:700}
.support-meta{margin:0 0 8px;color:var(--muted);font-size:.78rem}
.support-description{margin:0 0 10px;overflow-wrap:anywhere}
.support-updates{margin:0;padding-left:20px;display:grid;gap:6px}
.support-updates p{margin:2px 0 0;color:var(--muted);font-size:.8rem}
.support-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.support-resolution{margin-top:12px;padding:12px 14px;border:1px solid var(--primary);border-radius:var(--radius-sm);background:var(--primary-soft)}
.support-resolution h4{margin:0 0 6px;font-size:.9rem;font-weight:700}
.support-keys{margin:4px 0 10px;padding-left:20px;font-family:var(--font-mono);font-size:.8rem;overflow-wrap:anywhere}
.support-note{margin:8px 0 0;color:var(--muted);font-size:.78rem}
@media(max-width:1100px){.support-card{grid-column:span 2}}
@media(max-width:720px){.support-card{grid-column:auto}.support-ticket{flex-direction:row}}

/* ---- Per-element toy locks ------------------------------------------------
   The affordance is a word rather than a glyph on purpose: a padlock picture
   reaches nobody using a screen reader and nothing searching the page's own
   text, and this site's search fields match rendered text. */
.locked-element{position:relative}
.locked-element[aria-disabled="true"]{opacity:.72;cursor:not-allowed}
.lock-affordance{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.lock-list{display:flex;flex-direction:column;gap:8px;width:100%}
.lock-entry{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-0)}
.lock-entry div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.lock-entry strong{font-size:.92rem;overflow-wrap:anywhere}
.lock-entry p{margin:0;font-size:.82rem;color:var(--muted-2)}
.lock-entry small{font-family:var(--mono);font-size:.7rem;color:var(--muted-2);overflow-wrap:anywhere}
/* Anchored beside the element rather than centred over the page, and bounded by
   the viewport with its own scroll, exactly as the right-click menu is. */
.lock-dialog{margin:0;border:1px solid var(--outline-variant)}
.lock-dialog label{display:block;margin-top:10px;font-size:.78rem;color:var(--muted-2)}
.lock-dialog input:not([type="checkbox"]),.lock-dialog select{width:100%}
.lock-dialog [hidden]{display:none}
.lock-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.lock-keypad[hidden]{display:none}
.lock-key{min-height:48px;min-width:48px;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);background:var(--surface-1);color:var(--on-surface);font-size:1.05rem;cursor:pointer}
.lock-key:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.lock-key-wide{grid-column:span 3;font-size:.85rem}
@media(max-width:620px){.lock-entry{flex-wrap:wrap}.lock-dialog{width:min(420px,calc(100vw - 24px))}}