/* Orbit / Day & Night. Shared component rules, two intentionally art-directed
   palettes. Explicit tokens also work without JS and without light-dark(). */
:root {
  --bg: #080b16;
  --panel: #111827;
  --panel-soft: #182033;
  --text: #f4f6fc;
  --muted: #a4b1c8;
  --subtle: #95a5c0;
  --line: #283247;
  --line-strong: #465570;
  --cyan: #79e5ff;
  --violet: #c0adff;
  --accent: #b4b8ff;
  --active-bg: #292443;
  --active-text: #eee8ff;
  --hover: #202a40;
  --header-bg: #080b16ed;
  --ambient-one: #482e7935;
  --ambient-two: #136c7b12;
  --card-a: #151c2d;
  --card-b: #101725;
  --glass: #141a2ce8;
  --primary-a: #e0d6ff;
  --primary-b: #b5ebff;
  --primary-text: #101422;
  --primary-line: #e8e1ff;
  --route-a: #1c1c34;
  --route-b: #101c2b;
  --step-bg: #0a101f9e;
  --shadow: #0000002b;
  --shadow-lg: #00000055;
  --glow: #817aff25;
  --tile-a: #24233f;
  --tile-b: #0d1a2c;
  --tile-line: #58507888;
  --tile-top: #c8bcff20;
  --tile-glow: #489bff22;
  --glyph-start: #c6a3ff;
  --glyph-middle: #7ea8ff;
  --glyph-end: #62e5ed;
  --glyph-accent: #80e3fc;
  --success: #97d6c8;
  --warning: #e5c48b;
  --logo-blend: screen;
  --logo-filter: none;
  --logo-dark-display: block;
  --logo-light-display: none;
  --ring: #9180ce36;
  --hero-gradient: linear-gradient(100deg,#c4a5ff 3%,#9eadff 45%,#77e4ff 100%);
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7fc;
  --panel: #ffffff;
  --panel-soft: #eef1f9;
  --text: #17213a;
  --muted: #53617d;
  --subtle: #62718b;
  --line: #dce2ef;
  --line-strong: #b7c3da;
  --cyan: #086c9c;
  --violet: #6650bb;
  --accent: #4b56ae;
  --active-bg: #eee9ff;
  --active-text: #503997;
  --hover: #e9eefb;
  --header-bg: #f9faffed;
  --ambient-one: #b9a4f62b;
  --ambient-two: #a6e6fc30;
  --card-a: #ffffff;
  --card-b: #fafbff;
  --glass: #ffffffed;
  --primary-a: #6650c9;
  --primary-b: #365bc7;
  --primary-text: #ffffff;
  --primary-line: #6559cd;
  --route-a: #f0ecff;
  --route-b: #edf7fd;
  --step-bg: #ffffffce;
  --shadow: #2d458010;
  --shadow-lg: #2d458023;
  --glow: #6476cc24;
  --tile-a: #ffffff;
  --tile-b: #edf2ff;
  --tile-line: #c9cce8;
  --tile-top: #ffffff;
  --tile-glow: #a1d2ff3b;
  --glyph-start: #7950d3;
  --glyph-middle: #376ade;
  --glyph-end: #088697;
  --glyph-accent: #2078ae;
  --success: #227564;
  --warning: #856010;
  --logo-blend: normal;
  --logo-filter: saturate(1.06) drop-shadow(0 16px 25px #777bd01c);
  --logo-dark-display: none;
  --logo-light-display: block;
  --ring: #8179c82d;
  --hero-gradient: linear-gradient(100deg,#7544bb 3%,#4b5ac6 48%,#057d9c 100%);
}
/* Exact same light palette for the static/no-JS fallback. The verifier guards
   against drift between this block and the explicit selection above. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f6f7fc;
    --panel: #ffffff;
    --panel-soft: #eef1f9;
    --text: #17213a;
    --muted: #53617d;
    --subtle: #62718b;
    --line: #dce2ef;
    --line-strong: #b7c3da;
    --cyan: #086c9c;
    --violet: #6650bb;
    --accent: #4b56ae;
    --active-bg: #eee9ff;
    --active-text: #503997;
    --hover: #e9eefb;
    --header-bg: #f9faffed;
    --ambient-one: #b9a4f62b;
    --ambient-two: #a6e6fc30;
    --card-a: #ffffff;
    --card-b: #fafbff;
    --glass: #ffffffed;
    --primary-a: #6650c9;
    --primary-b: #365bc7;
    --primary-text: #ffffff;
    --primary-line: #6559cd;
    --route-a: #f0ecff;
    --route-b: #edf7fd;
    --step-bg: #ffffffce;
    --shadow: #2d458010;
    --shadow-lg: #2d458023;
    --glow: #6476cc24;
    --tile-a: #ffffff;
    --tile-b: #edf2ff;
    --tile-line: #c9cce8;
    --tile-top: #ffffff;
    --tile-glow: #a1d2ff3b;
    --glyph-start: #7950d3;
    --glyph-middle: #376ade;
    --glyph-end: #088697;
    --glyph-accent: #2078ae;
    --success: #227564;
    --warning: #856010;
    --logo-blend: normal;
    --logo-filter: saturate(1.06) drop-shadow(0 16px 25px #777bd01c);
    --logo-dark-display: none;
    --logo-light-display: block;
    --ring: #8179c82d;
    --hero-gradient: linear-gradient(100deg,#7544bb 3%,#4b5ac6 48%,#057d9c 100%);
  }
}
body { background: var(--bg); color: var(--text); }
::selection { color: var(--active-text); background: var(--active-bg); }
.ambient { background: radial-gradient(ellipse at 80% 30%,var(--ambient-one),transparent 48%),radial-gradient(ellipse at 15% 10%,var(--ambient-two),transparent 50%); }
.header { background: var(--header-bg); border-color: var(--line); }
.brand small,.header nav a { color: var(--muted); }
.header nav a:hover,.icon-button:hover { color: var(--text); }
.icon-button:hover { background: var(--hover); }
.brand img { background: #0c1020; box-shadow: 0 2px 8px var(--shadow); }
.saved-trigger,.saved-filter { background: var(--panel); color: var(--muted); border-color: var(--line-strong); }
.saved-trigger[aria-pressed="true"],.saved-filter[aria-pressed="true"] { background: var(--active-bg); border-color: var(--violet); color: var(--active-text); }
.skip { color: var(--primary-text); background: var(--primary-b); }
.hero-lead { color: var(--muted); }
.gradient-text { background-image: var(--hero-gradient); }
.hero-logo { mix-blend-mode: var(--logo-blend); filter: var(--logo-filter); }
.hero-logo-dark { display: var(--logo-dark-display); }
.hero-logo-light { display: var(--logo-light-display); }
.orbit-ring { border-color: var(--ring); }
.orbit-tag { background: var(--glass); border-color: var(--line-strong); box-shadow: 0 12px 35px var(--shadow-lg); }
.orbit-tag small,.orbit-caption { color: var(--subtle); }
.hero-proof .icon,.feature-list .icon,.trust-note .icon { color: var(--success); }
.primary { color: var(--primary-text); background: linear-gradient(110deg,var(--primary-a),var(--primary-b)); border-color: var(--primary-line); box-shadow: 0 5px 20px var(--glow); }
.primary:hover { box-shadow: 0 9px 28px var(--glow); }
.secondary { background: var(--panel); border-color: var(--line-strong); color: var(--text); }
.platform-strip strong { color: var(--text); }
.platform-strip>a { color: var(--muted); }
.platform-strip>p { border-color: var(--line); }
.muted-title { color: var(--subtle); }
.route-tabs button { background: var(--panel); color: var(--muted); }
.route-tabs button[aria-selected="true"] { color: var(--active-text); background: var(--active-bg); border-color: var(--line-strong); }
.route-tabs button:hover { color: var(--text); border-color: var(--violet); }
.route-panel { background: linear-gradient(115deg,var(--route-a),var(--route-b)); border-color: var(--line-strong); }
.route-decoration { background: var(--glow); border-color: var(--line); }
.route-decoration .icon { color: var(--violet); }
.route-steps a { background: var(--step-bg); border-color: var(--line); }
.route-steps a:hover { background: var(--active-bg); border-color: var(--violet); }
.step-caption,.step-caption b,.route-note { color: var(--muted); }
.search { background: var(--panel); border-color: var(--line-strong); }
.search input,.command-search input { color: var(--text); }
.search input::placeholder,.command-search input::placeholder { color: var(--subtle); opacity: 1; }
.search>.icon,.search kbd { color: var(--subtle); }
.search kbd { border-color: var(--line-strong); }
.search:focus-within { box-shadow: 0 0 0 3px var(--glow); }
.filters button { color: var(--muted); }
.filters button:hover { color: var(--text); background: var(--hover); }
.filters button[aria-pressed="true"] { background: var(--active-bg); color: var(--active-text); border-color: var(--line-strong); }
.filters button span { color: inherit; }
.results-bar p,.saved-note { color: var(--subtle); }
.results-bar button { color: var(--violet); }
.app { background: linear-gradient(130deg,var(--card-a),var(--card-b)); border-color: var(--line); box-shadow: 0 4px 18px var(--shadow); min-height: 302px; }
.app:hover { border-color: var(--line-strong); box-shadow: 0 15px 36px var(--shadow-lg); }
.app-top { align-items: flex-start; }
.save-app { color: var(--subtle); }
.save-app[aria-pressed="true"] { color: var(--violet); background: var(--active-bg); }
.category { color: var(--subtle); }
.app-bottom { border-color: var(--line); }
.status { color: var(--muted); }
.status-preview { color: var(--warning); }
.card-link { color: var(--accent); background: var(--panel-soft); border-color: var(--line); }
.card-link:hover { color: var(--text); background: var(--hover); }
.catalog-note,.catalog-note .icon { color: var(--subtle); }
#empty { background: var(--panel); border-color: var(--line-strong); }
#empty>.icon { color: var(--violet); }
.showcase-choices button[aria-selected="true"] { border-color: var(--line-strong); background: var(--panel); box-shadow: 0 4px 18px var(--shadow); }
.showcase-choices small,.showcase-choices button>.icon { color: var(--subtle); }
.showcase-screens figure,.product-image { border-color: var(--line-strong); background: var(--panel); box-shadow: 0 15px 50px var(--shadow-lg); }
.screen-chrome { color: var(--muted); background: var(--panel-soft); }
.window-dots { color: var(--subtle); }
.showcase-screens figcaption,.product-image figcaption { color: var(--muted); }
.showcase-screens figcaption a { color: var(--cyan); }
.trust-note { color: var(--muted); border-color: var(--line); background: var(--panel); }
.faq-list details p { color: var(--muted); }
.closing { background: radial-gradient(ellipse at 15% 10%,var(--ambient-one),transparent 70%),linear-gradient(130deg,var(--route-a),var(--route-b)); border-color: var(--line-strong); }
.closing>img { mix-blend-mode: normal; background: #0c1020; }
.footer-links,.footer-bottom,.motion-toggle { color: var(--muted); }
.footer-bottom { border-color: var(--line); }
.breadcrumbs,.text-link { color: var(--muted); }
.breadcrumbs a { color: var(--cyan); }
.product-hero .status { border-color: var(--line-strong); }
.product-card { border-color: var(--line-strong); background: radial-gradient(ellipse at 15% 0%,var(--glow),transparent 65%),linear-gradient(150deg,var(--route-a),var(--card-b)); box-shadow: 0 25px 50px var(--shadow-lg); }
.product-card .micro-label { color: var(--violet); }
.product-platforms { border-color: var(--line); }
.product-platforms>span { color: var(--muted); }
.version { background: linear-gradient(125deg,var(--card-a),var(--card-b)); border-color: var(--line); box-shadow: 0 5px 22px var(--shadow); }
.feature-list li,.getting-started li p { color: var(--muted); }
.getting-started li>span { color: var(--active-text); background: var(--active-bg); border-color: var(--line-strong); }
.notice { background: var(--panel-soft); border-color: var(--line-strong); }
.related a { background: var(--panel); border-color: var(--line); }
.related a:hover { background: var(--hover); border-color: var(--line-strong); }
dialog { background: var(--panel); color: var(--text); border-color: var(--line-strong); box-shadow: 0 35px 100px var(--shadow-lg); }
.command-search { background: var(--bg); border-color: var(--line-strong); }
.command-hint,.command-item small { color: var(--muted); }
.command-item:hover,.command-item.is-active { background: var(--active-bg); border-color: var(--line-strong); }
.toast { color: var(--text); background: var(--panel); border-color: var(--line-strong); box-shadow: 0 14px 35px var(--shadow-lg); }

/* One icon system at every scale. No raster sheets, heavy filters or motion
   loops: inset light and a restrained hover lift provide the dimensionality. */
.app-symbol {
  position: relative;
  isolation: isolate;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: var(--glyph-middle);
  background: radial-gradient(ellipse at 80% 100%,var(--tile-glow),transparent 70%),linear-gradient(145deg,var(--tile-a),var(--tile-b));
  border: 1px solid var(--tile-line);
  box-shadow: inset 0 1px 0 var(--tile-top),inset 0 -2px 5px var(--shadow),0 6px 16px var(--shadow);
  transition: transform .25s,box-shadow .25s;
}
.app-symbol::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--tile-top); border-radius: inherit; pointer-events: none; z-index: -1; }
.app-glyph { width: 72%; height: 72%; overflow: visible; }
.glyph-start { stop-color: var(--glyph-start); }
.glyph-middle { stop-color: var(--glyph-middle); }
.glyph-end { stop-color: var(--glyph-end); }
.glyph-wash { fill: var(--glyph-middle); fill-opacity: .055; stroke: none; }
.glyph-accent { stroke: var(--glyph-accent); }
.app:hover .app-symbol { transform: translateY(-2px) rotate(-3deg); box-shadow: inset 0 1px 0 var(--tile-top),0 9px 22px var(--glow); }
.step-app .app-symbol,.related .app-symbol { width: 38px; height: 38px; border-radius: 11px; }
.showcase-choices .app-symbol { width: 44px; height: 44px; border-radius: 13px; }
.command-item .app-symbol { width: 42px; height: 42px; border-radius: 12px; }
.orbit-tag .app-symbol { width: 39px; height: 39px; border-radius: 11px; box-shadow: inset 0 1px 0 var(--tile-top); }
.product-card>.app-symbol { width: 100px; height: 100px; border-radius: 28px; }
.product-identity { display: flex; align-items: center; gap: 17px; }
.product-identity>.app-symbol { display: none; }
.product-identity .eyebrow { margin-bottom: 10px; }
.product-identity>div { min-width: 0; }

/* Compact, keyboard accessible theme switch. The icon describes the action;
   the stable switch name and aria-checked announce the actual dark-mode state. */
.theme-toggle { position: relative; width: 42px; height: 44px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--violet); margin-left: 4px; }
.theme-toggle .icon { position: absolute; width: 19px; height: 19px; transition: opacity .2s,transform .25s; }
.theme-sun { opacity: 0; transform: rotate(-60deg) scale(.7); }
.theme-moon { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"] .theme-sun { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"] .theme-moon { opacity: 0; transform: rotate(60deg) scale(.7); }
.display-settings { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.system-theme { align-items: center; gap: 7px; color: var(--muted); background: transparent; padding: 10px 0; min-height: 40px; font-size: 10px; }
.system-theme .icon { width: 15px; height: 15px; }
.system-theme[aria-pressed="true"] { color: var(--cyan); }
.theme-toggle:focus-visible { outline-offset: 3px; }
@media (min-width: 801px) and (max-width: 1050px) {
  .saved-trigger>span { display: none; }
  .header-inner { gap: 12px; }
  .header-actions { gap: 4px; }
}
@media (max-width: 800px) {
  .product-identity>.app-symbol { display: inline-flex; width: 66px; height: 66px; border-radius: 18px; }
}
@media (max-width: 560px) {
  .header-inner { gap: 6px; min-height: 74px; width: calc(100% - 24px); }
  .header-actions { gap: 3px; }
  .theme-toggle { width: 38px; height: 40px; margin-left: 0; }
  .command-trigger { width: 36px; height: 40px; padding: 9px; justify-content: center; }
  .saved-trigger { padding: 9px 7px; gap: 4px; min-height: 40px; }
  .menu-toggle { width: 34px; height: 40px; }
  .app { min-height: 292px; }
  .app-symbol { width: 62px; height: 62px; border-radius: 17px; }
  .orbit-tag { padding: 10px; gap: 8px; }
  .orbit-tag .app-symbol { width: 31px; height: 31px; border-radius: 9px; }
  .showcase-choices .app-symbol { width: 38px; height: 38px; border-radius: 11px; }
  .tag-docs { top: 148px; }
  .display-settings { gap: 17px; }
  .product-identity>.app-symbol { width: 58px; height: 58px; border-radius: 16px; }
  .product-identity { gap: 13px; }
}
@media (max-width: 360px) {
  .header .brand { gap: 5px; }
  .header .brand img { width: 30px; height: 30px; }
  .header .brand>span { font-size: 19px; }
  .header .brand small { letter-spacing: 1.7px; }
  .header-actions { gap: 2px; }
  .command-trigger { width: 30px; padding: 6px; }
  .saved-trigger { padding-inline: 6px; }
  .theme-toggle { width: 34px; }
  .menu-toggle { width: 32px; }
}
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --subtle: var(--muted); }
  .app,.route-panel,.version { border-color: var(--line-strong); }
  .category,.status,.catalog-note,.hero-proof { color: var(--text); }
}
@media (forced-colors: active) {
  .app-symbol { background: Canvas; border-color: ButtonText; box-shadow: none; }
  .app-glyph g,.glyph-accent { stroke: CanvasText; }
  .glyph-wash { fill: none; stroke: none; }
  .gradient-text,.error-code { color: CanvasText; background: none; }
  .theme-toggle { border-color: ButtonText; }
  .primary,.secondary { border: 1px solid ButtonText; }
}