/* Astro Engine · Observatory, topnav shell (ASTRO_OBSERVATORY_UI=site). Loaded by api/observatory_ui.py only on
   pages of this shell, after observatory.css (shared tokens, type, focus, reduced motion). Every selector is
   scoped to body.obs and :where(.obs-topnav), in both themes: the daylight values come from the tokens in
   observatory.css, the shell tokens below (night values here, daylight values in the daylight section at the end of
   this file) and the [data-theme="light"] rules at the end of this file. */
/* ---------- shell tokens: legacy names these pages use that the shared remap above does not cover ---------- */
:where(:root) body.obs:where(.obs-topnav) { --o-chrome: var(--o-sans-header);
  --o-wordmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23c0dfff' stroke-width='1'%3E%3Ccircle cx='13' cy='13' r='8'/%3E%3Cellipse cx='13' cy='13' rx='12.2' ry='4.4' transform='rotate(-36 13 13)'/%3E%3C/svg%3E");
  /* the theme toggle's sign: the sun by night (it offers daylight), the moon by day (it offers the night) */
  --o-theme-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4ebff' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.6M12 18.9v2.6M2.5 12h2.6M18.9 12h2.6M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E");
  --o-paper-surface: radial-gradient(120% 70% at 0% 0%, rgba(255, 236, 205, .55), rgba(255, 236, 205, 0) 60%), linear-gradient(180deg, #f7f2e9, #f2ebdf);
  --glass: rgba(10, 16, 27, .78); --glass-vivid: rgba(10, 16, 27, .97); --glass-border: #1f2c42; --glass-border-hover: rgba(174, 217, 255, .45);
  --card-bg: #0a101b; --deep-space: #0a101b;
  --surface-hover: rgba(174, 217, 255, .06); --border-active: rgba(174, 217, 255, .55);
  --gold-light: #d4ebff; --gold-text: #aed9ff; --purple-bright: #d4ebff; --cyan-dim: #cfe3f7;
  --gradient-primary: linear-gradient(#aed9ff, #aed9ff); --gradient-gold: linear-gradient(#aed9ff, #aed9ff);
  --gradient-accent: linear-gradient(#aed9ff, #aed9ff); --shadow-glow: none;
  --transition: 160ms cubic-bezier(.2, .7, .2, 1); }
/* Gold-family accents in the editorial, pricing and account palettes. The tools keep their teal and rose: there they
   mark do/don't lists and errors, always beside a word or a tick. */
:where(:root) body.obs:where(.obs-topnav) { --teal: #aed9ff; }
/* Shell tokens (this file only). Night values; the daylight values are in the daylight section at the end. */
:where(:root) body.obs:where(.obs-topnav) {
  --tn-bar: rgba(6, 10, 18, .92);              /* the header bar and the controls beside it (the seo shell's header value) */
  --tn-sheet: rgba(10, 16, 27, .97);           /* banners that sit over the page (cookie consent) */
  --tn-ink-2: #d3dbe8;                         /* soft ink: navigation, labels, chips, menu rows */
  --tn-link-2: #c6cfdc;                        /* footer, breadcrumb and tab links */
  --tn-text: #c4ccd9;                          /* secondary reading text on the field */
  --tn-text-b: #c7cfdc;                        /* body text inside panels and plan lists */
  --tn-field: #070c16;                         /* text fields and code blocks */
  --tn-scheme: dark;                           /* native parts of controls (date pickers, select arrows, scrollbars) */
  --tn-hover: rgba(174, 217, 255, .06);        /* hover wash on menu rows */
  --tn-glow: rgba(174, 217, 255, .08);         /* instrument light in the corner of an invitation (none by day) */
  --tn-glow-2: rgba(174, 217, 255, .07);       /* the featured plan */
  --tn-focus-wash: rgba(174, 217, 255, .18);   /* halo around a focused field */
  --tn-btn-shadow: 0 10px 30px -14px rgba(174, 217, 255, .55);
  --tn-pop-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8);
  --tn-featured-shadow: 0 30px 70px -40px rgba(174, 217, 255, .45);
  --tn-paper-drop: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 80px -36px rgba(0, 0, 0, .7);
  --tn-paper-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 80px -36px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2);
  --tn-note-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2);
  --tn-lamp-line: rgba(243, 200, 139, .55);
  --tn-direct: #a6dcc1;                        /* Mercury "direct" status: a quiet green, always beside the word */
  --tn-ok-bg: rgba(174, 217, 255, .06); --tn-ok-line: rgba(174, 217, 255, .35);
  --tn-err-bg: rgba(255, 120, 100, .08); --tn-err-line: rgba(255, 150, 130, .35); --tn-err-line-2: rgba(255, 150, 130, .45);
  --tn-warn-bg: rgba(243, 200, 139, .07); --tn-warn-line: rgba(243, 200, 139, .35); --tn-warn-ink: #e8dcc8;
  --tn-scrim: rgba(3, 6, 12, .74);              /* behind dialogs */ }
:where(:root) body.obs:where(.obs-topnav) .skip-link { background: var(--o-ice); color: var(--o-on-ice); }
:where(:root) body.obs:where(.obs-topnav) ::placeholder { color: var(--o-faint); opacity: 1; }
/* ==========================================================================================================
   Header bars. topnav = the editorial template and the static company, pricing and account pages (nav.top-nav with
   role and label); tools = the nine sky tools (plain nav.top-nav). Same bar as the seo shell's header.
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-topnav) .top-nav { background: var(--tn-bar); border-bottom: 1px solid var(--o-line); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  min-height: 72px; padding: 10px clamp(20px, 4.4vw, 64px); column-gap: 24px; }
:where(:root) body.obs:where(.obs-topnav) .top-nav .logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: var(--o-chrome); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--o-ink); -webkit-text-fill-color: currentColor; background: none; text-decoration: none; white-space: nowrap; }
:where(:root) body.obs:where(.obs-topnav) .top-nav .logo::before { content: ""; flex: none; width: 26px; height: 26px; background: var(--o-wordmark) center / contain no-repeat; }
:where(:root) body.obs:where(.obs-topnav) .top-nav .logo:hover { color: var(--o-ink); text-decoration: none; }
:where(:root) body.obs:where(.obs-topnav) .top-nav .nav-links { column-gap: clamp(12px, 1.4vw, 22px); }
/* Links keep whatever display the page gives them (the narrow-screen menus hide them); as flex items they are blocks,
   so padding gives the 44 px target. !important: pricing and the homepage put an inline gold emphasis on one link, and
   no link should look like the current page. */
:where(:root) body.obs:where(.obs-topnav) .top-nav .nav-links > a:not(.btn-nav) { font-family: var(--o-chrome); font-size: .9375rem; font-weight: 400 !important; line-height: 24px; padding-block: 10px;
  color: var(--tn-ink-2) !important; text-decoration: none; }
:where(:root) body.obs:where(.obs-topnav) .top-nav .nav-links > a:not(.btn-nav):hover { color: var(--o-ink) !important; text-decoration: underline; }
/* The current page: ink and an ice underline (not colour alone). */
:where(:root) body.obs:where(.obs-topnav) .top-nav .nav-links > a[aria-current="page"] { color: var(--o-ink) !important; text-decoration: underline; text-decoration-color: var(--o-ice); text-underline-offset: .45em; text-decoration-thickness: 1px; }
/* Login (and the dashboard's Logout): an outline control, the same family as the language button. */
:where(:root) body.obs:where(.obs-topnav) .top-nav .btn-nav, :where(:root) body.obs:where(.obs-topnav) .top-nav .btn-sm { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px;
  background: transparent; border: 1px solid var(--o-control); border-radius: 6px; color: var(--o-ink);
  font: 500 .9375rem/1.2 var(--o-chrome); text-decoration: none; box-shadow: none; cursor: pointer; }
:where(:root) body.obs:where(.obs-topnav) .top-nav .btn-nav:hover, :where(:root) body.obs:where(.obs-topnav) .top-nav .btn-sm:hover { background: transparent; border-color: var(--o-ice); color: var(--o-ink); text-decoration: none; }
/* language switch: the editorial template (.lang-switch) and the static pages (.lang-sw) */
:where(:root) body.obs:where(.obs-topnav) :is(.lang-btn, .lang-sw-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 12px;
  background: transparent; border: 1px solid var(--o-control); border-radius: 6px; color: var(--o-ink);
  font: 600 .875rem/1 var(--o-chrome); letter-spacing: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.lang-btn, .lang-sw-btn):hover { border-color: var(--o-ice); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) :is(.lang-dropdown, .lang-dd) { background: var(--o-night-3); border: 1px solid var(--o-line-2); border-radius: 12px; padding: 6px;
  box-shadow: var(--tn-pop-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.lang-dropdown, .lang-dd) a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px;
  color: var(--tn-ink-2); font: 400 .9375rem var(--o-chrome); text-decoration: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.lang-dropdown, .lang-dd) a:hover { background: var(--tn-hover); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) :is(.lang-dropdown, .lang-dd) a.active { color: var(--o-ice); font-weight: 600; }
/* The about page puts its language switch beside the bar with inline styles; !important beats them. */
:where(:root) body.obs:where(.obs-topnav) > .lang-sw { top: 14px !important; right: calc(clamp(20px, 4.4vw, 64px) + 52px) !important; }
:where(:root) body.obs:where(.obs-topnav) > .lang-sw .lang-sw-btn { background: var(--tn-bar) !important; border: 1px solid var(--o-control) !important; color: var(--o-ink) !important; padding: 0 12px !important; border-radius: 6px !important; font-size: .875rem !important; letter-spacing: 0 !important; }
:where(:root) body.obs:where(.obs-topnav) > .lang-sw .lang-dd { background: var(--o-night-3) !important; border: 1px solid var(--o-line-2) !important; border-radius: 12px !important; padding: 6px !important; }
:where(:root) body.obs:where(.obs-topnav) > .lang-sw .lang-dd a { color: var(--tn-ink-2) !important; padding: 0 12px !important; font-size: .9375rem !important; }
/* That list never opened (inline display:none and no rule for the .open class the page's script sets; today too):
   shown while open. A behaviour fix in CSS only. */
:where(:root) body.obs:where(.obs-topnav) > .lang-sw.open .lang-dd { display: block !important; }
/* hamburger (shown by each page's own narrow-screen rule; display is never set here) */
:where(:root) body.obs:where(.obs-topnav) .hamburger { min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 1px solid var(--o-control); border-radius: 6px;
  color: var(--o-ink); font-size: 1.15rem; line-height: 1; }
:where(:root) body.obs:where(.obs-topnav) .hamburger:hover { border-color: var(--o-ice); }
/* the narrow-screen menu (absolute, 80 px from the top of the bar or of the page: the bar is 72 px tall) */
:where(:root) body.obs:where(.obs-topnav) .top-nav .nav-links.open { top: 80px; background: var(--o-night-3); border: 1px solid var(--o-line-2); border-radius: 12px;
  box-shadow: var(--tn-pop-shadow); min-width: 220px; padding: 8px 16px; }
/* Theme toggle: a hairline sign (the sun by night, the moon by day: what the button offers, as today's emoji did).
   The emoji is decorative (the button is named by its aria-label), so the same sign is drawn as a hairline glyph. */
:where(:root) body.obs:where(.obs-topnav) .theme-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 6px;
  background: var(--o-theme-glyph) center / 20px no-repeat, var(--tn-bar); border: 1px solid var(--o-control);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; transition: border-color 160ms var(--o-ease); }
:where(:root) body.obs:where(.obs-topnav) .theme-toggle:hover { transform: none; border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .theme-toggle .theme-icon { opacity: 0; }
/* Where the toggle sits beside the bar (editorial template, company, account and identity pages), centre it on the bar
   and keep the bar's own controls clear of it: today the language button or Login sits under it. The pages make it
   fixed at the top of the window. Where the bar is sticky (editorial template, identity card) it is sticky instead, in
   the flow just above the bar and taking no room (its vertical margins add up to zero): it sits on the bar under any
   notice the page puts above the bar (the translation notices of the uk, es, pt and hi pages) and docks with the bar
   once the notice scrolls away. No script, no motion. */
:where(:root) body.obs:where(.obs-topnav):has(> .theme-toggle) > .theme-toggle { position: sticky; top: 14px; right: auto; z-index: 200;
  margin: 14px clamp(20px, 4.4vw, 64px) -58px auto; }
:where(:root) body.obs:where(.obs-topnav):has(> .theme-toggle) .top-nav { padding-right: calc(clamp(20px, 4.4vw, 64px) + 56px); }
/* Where the bar itself scrolls away (company, legal, research, developer and account pages; the editorial bar and the
   identity card's are sticky), the controls beside it scroll with it instead of floating over the page. */
:where(:root) body.obs:where(.obs-topnav):has(> .theme-toggle):not(:has(> .top-nav .lang-switch)):not(:has(.ic-hero)) > .theme-toggle { position: absolute; top: 14px; right: clamp(20px, 4.4vw, 64px); margin: 0; }
:where(:root) body.obs:where(.obs-topnav) > .lang-sw { position: absolute !important; }
:where(:root) body.obs:where(.obs-topnav):has(> .lang-sw) .top-nav { padding-right: calc(clamp(20px, 4.4vw, 64px) + 140px); }
/* Phones: the bar keeps one line beside the toggle (wordmark, menu, Login): tighter gaps, and below 380 px the
   wordmark's glyph (decoration, not text) steps aside. */
@media (max-width: 600px) {
  :where(:root) body.obs:where(.obs-topnav) .top-nav { column-gap: 12px; }
  :where(:root) body.obs:where(.obs-topnav) .top-nav .nav-links { column-gap: 12px; }
  :where(:root) body.obs:where(.obs-topnav) .top-nav .btn-nav { padding: 0 12px; }
}
@media (max-width: 379px) {
  :where(:root) body.obs:where(.obs-topnav) .top-nav .logo::before { display: none; }
}
@media (max-width: 340px) {
  :where(:root) body.obs:where(.obs-topnav) .top-nav { column-gap: 8px; padding-left: 12px; }
  :where(:root) body.obs:where(.obs-topnav):has(> .theme-toggle) .top-nav { padding-right: 68px; }
  :where(:root) body.obs:where(.obs-topnav):has(> .theme-toggle) > .theme-toggle { margin-right: 12px; }
  :where(:root) body.obs:where(.obs-topnav):has(> .theme-toggle):not(:has(> .top-nav .lang-switch)):not(:has(.ic-hero)) > .theme-toggle { right: 12px; margin: 0; }
}
/* There (about page) a phone has no room for the wordmark, menu, Login and both fixed controls on one line: the
   wordmark keeps the first line beside the fixed controls and the menu and Login wrap below it. */
@media (max-width: 600px) {
  :where(:root) body.obs:where(.obs-topnav):has(> .lang-sw) .top-nav { flex-wrap: wrap; row-gap: 4px; padding-right: clamp(20px, 4.4vw, 64px); }
  :where(:root) body.obs:where(.obs-topnav):has(> .lang-sw) .top-nav .logo { flex: 0 0 100%; justify-content: flex-start; }
  :where(:root) body.obs:where(.obs-topnav):has(> .lang-sw) .top-nav .nav-links.open { top: 132px; }
}
/* ==========================================================================================================
   Shared surfaces: footers, share bar, newsletter, cookie banners, feedback (topnav and tools)
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-topnav) .site-footer { background: transparent; border-top: 1px solid var(--o-line) !important; color: var(--o-muted) !important;
  font-family: var(--o-sans); font-size: .875rem; line-height: 1.6; padding-block: 40px 48px; margin-top: 48px; }
/* !important: the dashboard's footer links are inline-styled. */
:where(:root) body.obs:where(.obs-topnav) .site-footer a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px;
  color: var(--tn-link-2) !important; text-decoration: none; }
:where(:root) body.obs:where(.obs-topnav) .site-footer a:hover { color: var(--o-ink) !important; text-decoration: underline; }
:where(:root) body.obs:where(.obs-topnav) .site-footer p { color: var(--o-muted); }
:where(:root) body.obs:where(.obs-topnav) .site-footer p[style] { color: var(--o-faint) !important; opacity: 1 !important; }
:where(:root) body.obs:where(.obs-topnav) .share-bar, :where(:root) body.obs:where(.obs-topnav) .share-btn { border-color: var(--o-control) !important; color: var(--tn-ink-2) !important; background: transparent !important; }
:where(:root) body.obs:where(.obs-topnav) .share-btn { min-height: 44px; border-radius: 999px !important; }
:where(:root) body.obs:where(.obs-topnav) .share-btn:hover { border-color: var(--o-ice) !important; color: var(--o-ink) !important; }
:where(:root) body.obs:where(.obs-topnav) .share-bar-label { color: var(--o-muted) !important; }
:where(:root) body.obs:where(.obs-topnav) .email-capture { background: var(--o-night-2) !important; border: 1px solid var(--o-line-2) !important; border-radius: 14px !important; box-shadow: none !important;
  background-image: radial-gradient(60% 120% at 100% 0%, var(--tn-glow), transparent 70%) !important; }
:where(:root) body.obs:where(.obs-topnav) .email-capture h2 { color: var(--o-ivory) !important; font-family: var(--o-serif) !important; font-weight: 400 !important; -webkit-text-fill-color: currentColor; background: none !important; }
:where(:root) body.obs:where(.obs-topnav) .email-capture .ec-subtitle { color: var(--tn-text) !important; }
:where(:root) body.obs:where(.obs-topnav) .email-capture :is(input, select) { background: var(--tn-field) !important; border: 1px solid var(--o-control) !important; border-radius: 10px !important; color: var(--o-ink) !important; min-height: 48px; color-scheme: var(--tn-scheme); }
:where(:root) body.obs:where(.obs-topnav) .email-capture button { background: var(--o-ice) !important; color: var(--o-on-ice) !important; border: 0 !important; border-radius: 999px !important; min-height: 48px; font-weight: 600 !important; box-shadow: none !important; }
:where(:root) body.obs:where(.obs-topnav) .email-capture button:hover { background: var(--o-ice-2) !important; }
/* cookie banners: inline-styled in the editorial template and the static pages (#cookie-consent), class-styled on the tools */
:where(:root) body.obs:where(.obs-topnav) #cookie-consent { background: var(--tn-sheet) !important; border-top: 1px solid var(--o-line-2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:where(:root) body.obs:where(.obs-topnav) #cookie-consent p { color: var(--o-ink) !important; }
:where(:root) body.obs:where(.obs-topnav) #cookie-consent a { color: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-topnav) #cookie-consent button { min-height: 44px; padding: 0 20px !important; border-radius: 999px !important; font-family: var(--o-sans) !important; font-size: .9375rem !important; }
:where(:root) body.obs:where(.obs-topnav) #cookie-consent button:first-child { background: transparent !important; color: var(--o-ink) !important; border: 1px solid var(--o-control) !important; }
:where(:root) body.obs:where(.obs-topnav) #cookie-consent button:last-child { background: var(--o-ice) !important; color: var(--o-on-ice) !important; border: 0 !important; }
/* feedback widget (editorial template, identity card) */
:where(:root) body.obs:where(.obs-topnav) .feedback-btn { background: var(--o-night-3); border: 1px solid var(--o-control); color: var(--o-ice); box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .feedback-btn:hover { transform: none; box-shadow: none; border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel { background: var(--o-night-3); border: 1px solid var(--o-line-2); border-radius: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel .fb-title { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel label { color: var(--tn-ink-2); }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel :is(select, textarea, input[type="email"]) { background: var(--tn-field); border-color: var(--o-control); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel .fb-close { min-width: 44px; min-height: 44px; color: var(--tn-ink-2); }
:where(:root) body.obs:where(.obs-topnav) .fb-stars button { color: var(--o-faint); min-width: 44px; min-height: 44px; }
:where(:root) body.obs:where(.obs-topnav) .fb-stars button.active, :where(:root) body.obs:where(.obs-topnav) .fb-stars button:hover { color: var(--o-lamp); }
:where(:root) body.obs:where(.obs-topnav) .fb-submit { background: var(--o-ice); color: var(--o-on-ice); border-radius: 999px; min-height: 48px; }
:where(:root) body.obs:where(.obs-topnav) .fb-submit:hover { opacity: 1; transform: none; background: var(--o-ice-2); }
/* ==========================================================================================================
   topnav · editorial template (blog, Mercury, Uranus): article frame, panels, calls to action
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-topnav) .page-hero h1, :where(:root) body.obs:where(.obs-topnav) .page-header h1, :where(:root) body.obs:where(.obs-topnav) .api-hero h1, :where(:root) body.obs:where(.obs-topnav) .article-header h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--o-ivory); font-weight: 400;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.005em; text-wrap: balance; }
:where(:root) body.obs:where(.obs-topnav) :is(.page-hero, .page-header) :is(.subtitle, p) { color: var(--tn-text); }
/* the blog's not-found title is inline gold (ice with the remap): ivory like every title */
:where(:root) body.obs:where(.obs-topnav) .seo-container > h1[style*="--gold"] { color: var(--o-ivory) !important; }
:where(:root) body.obs:where(.obs-topnav) article > header h1, :where(:root) body.obs:where(.obs-topnav) .seo-container > h1 { color: var(--o-ivory); font-weight: 400; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.05; text-wrap: balance; }
:where(:root) body.obs:where(.obs-topnav) :is(.article-meta, .byline, .last-updated) { color: var(--o-faint); font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-topnav) :is(.breadcrumbs, .breadcrumb, .mr-breadcrumbs, .ug-breadcrumbs) { color: var(--o-faint); align-items: center; }  /* the flex trails (Mercury) centre the 44 px links with their separators */
:where(:root) body.obs:where(.obs-topnav) :is(.breadcrumbs, .breadcrumb, .mr-breadcrumbs, .ug-breadcrumbs) a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tn-link-2); text-decoration: underline; text-decoration-color: var(--o-line-2); }
:where(:root) body.obs:where(.obs-topnav) :is(.breadcrumbs, .breadcrumb, .mr-breadcrumbs, .ug-breadcrumbs) a:hover { color: var(--o-ink); text-decoration-color: currentColor; }
:where(:root) body.obs:where(.obs-topnav) :is(.content-section, .glass-card, .mission-section, .methodology-box, .ug-history-card, .ug-detail-section, .mr-period-card, .mr-guidance-card, .mr-sign-card, .detail-card, .process-card, .endpoint-category, .feature-item, .zodiac-card, .asset-card, .quote-block, .contact-block) { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 14px; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.content-section, .glass-card, .ug-history-card, .ug-sign-card, .mr-period-card, .mr-guidance-card, .mr-sign-card, .detail-card, .process-card, .endpoint-category, .zodiac-card, .asset-card, .stat-card, .post-card, .links-grid a):hover { transform: none; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.content-section, .glass-card) h2 { color: var(--o-ivory); font-weight: 400; border-bottom-color: var(--o-line); }
:where(:root) body.obs:where(.obs-topnav) :is(.content-section, .glass-card) h3 { color: var(--o-ice-2); }
:where(:root) body.obs:where(.obs-topnav) :is(.content-section, .glass-card) :is(p, li) { color: var(--tn-text-b); }
/* invitations: the seo shell's .cta-section */
:where(:root) body.obs:where(.obs-topnav) :is(.cta-box, .mr-cta, .ug-cta, .cta-section, .cta, .cross-sell) { background: var(--o-night-2); border: 1px solid var(--o-line-2); border-radius: 14px; box-shadow: none;
  background-image: radial-gradient(60% 120% at 100% 0%, var(--tn-glow), transparent 70%); }
:where(:root) body.obs:where(.obs-topnav) .ug-cta::before { display: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.cta-box, .mr-cta, .ug-cta, .cta-section, .cta, .cross-sell) :is(h2, h3) { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) :is(.cta-box, .mr-cta, .ug-cta, .cta-section, .cta, .cross-sell) p { color: var(--tn-text); }
/* Primary actions: one ice pill (the seo shell's .cta-button). The page rules put white or dark text on gold or
   cyan-to-purple gradients; with the remap those became ice, so every one gets the on-ice ink here. */
:where(:root) body.obs:where(.obs-topnav) :is(.btn-cta, .btn-cta-primary, .mr-cta-btn, .ug-cta-btn, .btn-submit, .contact-email, .btn-generate, .btn-chart-cta, .btn-primary, .btn-pro, .btn-premium, .fb-submit, .cta .btn, .btn:not(.btn-outline):not(.btn-sm)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  background: var(--o-ice); color: var(--o-on-ice); border: 0; border-radius: 999px; box-shadow: var(--tn-btn-shadow);
  font: 600 1rem/24px var(--o-sans); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer;
  transition: background 160ms var(--o-ease); }
:where(:root) body.obs:where(.obs-topnav) :is(.btn-cta, .btn-cta-primary, .mr-cta-btn, .ug-cta-btn, .btn-submit, .contact-email, .btn-generate, .btn-chart-cta, .btn-primary, .btn-pro, .btn-premium, .cta .btn, .btn:not(.btn-outline):not(.btn-sm)):hover { background: var(--o-ice-2); color: var(--o-on-ice); opacity: 1; transform: none; box-shadow: var(--tn-btn-shadow); }
:where(:root) body.obs:where(.obs-topnav) :is(.btn-cta, .btn-cta-primary, .mr-cta-btn, .ug-cta-btn, .btn-submit, .btn-generate, .btn-primary, .btn:not(.btn-outline):not(.btn-sm)):disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* /about/team's invitation link (.cta a: a gold gradient, its ink set !important by the page): the ice pill */
:where(:root) body.obs:where(.obs-topnav) .cta > a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px;
  background: var(--o-ice); color: var(--o-on-ice) !important; border: 0; border-radius: 999px; box-shadow: var(--tn-btn-shadow);
  font: 600 1rem/24px var(--o-sans); text-decoration: none; }
:where(:root) body.obs:where(.obs-topnav) .cta > a:hover { background: var(--o-ice-2); }
/* /about's link to the team page (inline gold tint and border): the outline pill */
:where(:root) body.obs:where(.obs-topnav) #main-content > section > a[style*="rgba(212,168,67"] { display: inline-flex; align-items: center; min-height: 44px;
  background: transparent !important; border: 1px solid var(--o-control) !important; border-radius: 999px !important; color: var(--o-ink) !important; }
/* Secondary actions: outline pill (the seo shell's .cta-outline). */
:where(:root) body.obs:where(.obs-topnav) :is(.btn-cta-secondary, .btn-free, .btn-outline, .btn-action, .btn-search, .download-btn, .ug-back-link) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: transparent; color: var(--o-ink); border: 1px solid var(--o-control); border-radius: 999px; box-shadow: none;
  font: 500 .9375rem/1.25 var(--o-sans); text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; }
:where(:root) body.obs:where(.obs-topnav) :is(.btn-cta-secondary, .btn-free, .btn-outline, .btn-action, .btn-search, .download-btn, .ug-back-link):hover { background: transparent; border-color: var(--o-ice); color: var(--o-ink); transform: none; box-shadow: none; }
/* The copy buttons sit inside code and quote blocks at their own small size; only their colours change. */
:where(:root) body.obs:where(.obs-topnav) :is(.copy-btn, .copy-code) { background: var(--o-night-3); border: 1px solid var(--o-control); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) :is(.copy-btn, .copy-code):hover { border-color: var(--o-ice); }
/* chips and tags */
:where(:root) body.obs:where(.obs-topnav) :is(.tag, .ug-chip, .mr-period-sign, .tech-tag, .badge, .ug-eyebrow) { background: transparent; border: 1px solid var(--o-line-2); color: var(--tn-ink-2); text-transform: none; letter-spacing: 0; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .ug-chip { min-height: 44px; display: inline-flex; align-items: center; border-color: var(--o-control); border-radius: 999px; }
:where(:root) body.obs:where(.obs-topnav) .ug-chip:hover { border-color: var(--o-ice); color: var(--o-ink); background: transparent; }
/* table of contents and link grids: hairline library index, not feature cards */
:where(:root) body.obs:where(.obs-topnav) .toc { background: transparent; border: 0; border-top: 1px solid var(--o-line); border-bottom: 1px solid var(--o-line); border-radius: 0; padding-inline: 0; }
:where(:root) body.obs:where(.obs-topnav) .toc h4 { color: var(--o-muted); font-family: var(--o-sans); font-size: .9375rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) .toc a { color: var(--tn-ink-2); }
:where(:root) body.obs:where(.obs-topnav) .links-grid { gap: 0 28px; }
:where(:root) body.obs:where(.obs-topnav) .links-grid a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; background: none; border: 0; border-bottom: 1px solid var(--o-line);
  border-radius: 0; color: var(--tn-ink-2); }
:where(:root) body.obs:where(.obs-topnav) .links-grid a:hover { color: var(--o-ink); text-decoration: underline; }
/* ---------- blog: the index is a hairline library list; the article body is a paper reading surface ---------- */
:where(:root) body.obs:where(.obs-topnav) .blog-list { gap: 0; border-top: 1px solid var(--o-line); }
:where(:root) body.obs:where(.obs-topnav) .post-card { background: transparent; border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; padding: 26px 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) .post-card h2 { color: var(--o-ivory); font-weight: 400; font-size: clamp(1.45rem, 1.3rem + .5vw, 1.75rem); line-height: 1.2; }
:where(:root) body.obs:where(.obs-topnav) .post-card:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .post-card .meta { color: var(--o-faint); font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-topnav) .post-card .excerpt { color: var(--tn-text); max-width: 42.4em; }
:where(:root) body.obs:where(.obs-topnav) .post-card .read-more { color: var(--o-ice); font-weight: 500; }
:where(:root) body.obs:where(.obs-topnav) .library-path { border-bottom-color: var(--o-line); }
:where(:root) body.obs:where(.obs-topnav) .library-path h2 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .library-path p { color: var(--tn-text); }
/* The article reads on paper under the lamp: the seo shell's .summary-card, at article length. */
:where(:root) body.obs:where(.obs-topnav) .article-content { position: relative; color: #1f2533; background: var(--o-paper-surface); border-radius: 3px;
  padding: clamp(24px, 4.2vw, 56px); margin-top: 8px;
  box-shadow: var(--tn-paper-shadow);
  --gold: #1d4b80; --gold-bright: #163d69; --gold-dim: #161b27; --cyan: #1d4b80; --purple: #1d4b80; --purple-bright: #161b27;
  --text: #1f2533; --text-dim: #1f2533; --muted: #4b5467; --text-muted: #4b5467; --border: #d8cebb; --ae-focus: #1d4b80; }
/* both themes */
:where(:root) body.obs:where(.obs-topnav) .article-content { --surface: rgba(22, 27, 39, .05); }
:where(:root) body.obs:where(.obs-topnav) .article-content :is(p, li) { color: #1f2533; font-size: 1.0625rem; line-height: 1.68; max-width: 45.1em; }
:where(:root) body.obs:where(.obs-topnav) .article-content :is(h2, h3, h4) { color: var(--o-paper-ink); font-family: var(--o-serif); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .article-content h2 { font-size: clamp(1.6rem, 1.35rem + .9vw, 2.05rem); border-bottom: 1px solid var(--o-paper-rule); padding-bottom: .4rem; }
:where(:root) body.obs:where(.obs-topnav) .article-content h2:first-child { margin-top: 0; }
:where(:root) body.obs:where(.obs-topnav) .article-content h3 { font-size: 1.4rem; }
:where(:root) body.obs:where(.obs-topnav) .article-content :is(h4, h5, h6) { font-size: 1.25rem; }
:where(:root) body.obs:where(.obs-topnav) .article-content :is(strong, b) { color: var(--o-paper-ink); }
:where(:root) body.obs:where(.obs-topnav) .article-content a { color: var(--o-paper-accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:where(:root) body.obs:where(.obs-topnav) .article-content a:hover { color: #163d69; }
/* both themes */
:where(:root) body.obs:where(.obs-topnav) .article-content blockquote { background: rgba(22, 27, 39, .04); border-left: 3px solid #8a7f6a; color: #1f2533; }
/* both themes */
:where(:root) body.obs:where(.obs-topnav) .article-content code { background: rgba(22, 27, 39, .06); color: var(--o-paper-ink); }
:where(:root) body.obs:where(.obs-topnav) .article-content table { font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-topnav) .article-content th { color: var(--o-paper-muted); font-weight: 500; font-size: .9375rem; background: none; border-bottom: 1px solid var(--o-paper-rule); }
:where(:root) body.obs:where(.obs-topnav) .article-content td { color: #1f2533; border-bottom: 1px solid var(--o-paper-rule); background: none; }
:where(:root) body.obs:where(.obs-topnav) .article-content tr { border-bottom-color: var(--o-paper-rule); }
@media (max-width: 620px) {
  :where(:root) body.obs:where(.obs-topnav) .article-content { padding: 24px 20px; margin-inline: -4px; }
}
/* ---------- Mercury and Uranus pages ---------- */
/* The answer is a reading surface: the TL;DR line becomes a short paper note (the retrograde/direct colours stay on
   the status lines around it, each beside its word). */
:where(:root) body.obs:where(.obs-topnav) .tldr { background: var(--o-paper-surface); color: #1f2533; border: 0; border-radius: 3px;
  box-shadow: var(--tn-note-shadow); }
/* both themes */
:where(:root) body.obs:where(.obs-topnav) .tldr { border-left: 3px solid #8a7f6a; }
:where(:root) body.obs:where(.obs-topnav) .tldr strong { color: var(--o-paper-ink); }
:where(:root) body.obs:where(.obs-topnav) .tldr a { color: var(--o-paper-accent); }
:where(:root) body.obs:where(.obs-topnav) :is(.mr-date-item, .ug-cd-unit) { background: var(--o-night-2); border-color: var(--o-line); box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.mr-period-title, .ug-section-title, .ug-detail-title, .ug-sign-name, .ug-history-era) { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .ug-section-title::after { background: var(--o-line-2); }
:where(:root) body.obs:where(.obs-topnav) .ug-sign-card { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 14px; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .ug-sign-card::before { display: none; }
:where(:root) body.obs:where(.obs-topnav) .ug-hero::before { opacity: .35; }
:where(:root) body.obs:where(.obs-topnav) :is(.mr-faq-item, .ug-faq-item) { background: transparent; border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; }
:where(:root) body.obs:where(.obs-topnav) :is(.mr-faq-q, .ug-faq-q) { color: var(--o-ivory); font-family: var(--o-serif); font-weight: 400; font-size: 1.3rem; }
:where(:root) body.obs:where(.obs-topnav) :is(.mr-faq-a, .ug-faq-a) { color: var(--tn-text); }
:where(:root) body.obs:where(.obs-topnav) .mr-date-label { text-transform: none; letter-spacing: 0; color: var(--o-muted); font-size: .8125rem; }
:where(:root) body.obs:where(.obs-topnav) .mr-date-value { color: var(--o-ink); font-variant-numeric: tabular-nums; }
/* per-sign accent colours (several under 4.5:1 on night) become one quiet ink; the sign is named in the text */
:where(:root) body.obs:where(.obs-topnav) .ug-detail-sub { color: var(--o-ice-2); text-transform: none; letter-spacing: 0; font-weight: 500; }
:where(:root) body.obs:where(.obs-topnav) .ug-sign-house { color: var(--o-muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
:where(:root) body.obs:where(.obs-topnav) .mr-sign-symbol, :where(:root) body.obs:where(.obs-topnav) .ug-sign-symbol { color: var(--o-ice-2) !important; }
/* inline per-sign colours */
/* the highlighted word of the Uranus title: ice, as one solid ink (the gradient sat under 3:1 in places) */
:where(:root) body.obs:where(.obs-topnav) .ug-hero h1 span { background: none; -webkit-text-fill-color: currentColor; color: var(--o-ice-2); }
/* the "now" pill on the active retrograde period keeps its red, dark enough for white text (inline style); both themes */
:where(:root) body.obs:where(.obs-topnav) .mr-period-title span[style*="#ef4444"] { background: #b91c1c !important; }
/* Mercury status colours (inline hex on the banner, the date items, the giant answer, the active period and two figures):
   the Observatory's error and lamp inks and a quiet green, without coloured glows; the words carry the status, the
   colour repeats it. Tokens, so daylight follows (its own rules at the end keep the same values). */
:where(:root) body.obs:where(.obs-topnav) .mr-status-banner[style*="#ef4444"] { --status-color: var(--o-error) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-status-banner[style*="#f59e0b"] { --status-color: var(--o-lamp) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-status-banner[style*="#10b981"] { --status-color: var(--tn-direct) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-status-banner { --status-glow: transparent !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-mercury-glyph { filter: none; color: var(--status-color) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-date-item[style*="#ef4444"] { --date-color: var(--o-error) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-date-item[style*="#f59e0b"] { --date-color: var(--o-lamp) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-date-item[style*="#10b981"] { --date-color: var(--tn-direct) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-answer-page { --answer-glow: transparent !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-answer-page[style*="#ef4444"][style*="#f97316"] { --answer-gradient: linear-gradient(135deg, var(--o-error), var(--o-lamp)) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-answer-page[style*="#f59e0b"][style*="#f97316"] { --answer-gradient: linear-gradient(135deg, var(--o-lamp), var(--o-lamp-2)) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-answer-page[style*="#f59e0b"][style*="#10b981"] { --answer-gradient: linear-gradient(135deg, var(--o-lamp), var(--tn-direct)) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-answer-page[style*="#10b981"][style*="#d4a843"] { --answer-gradient: linear-gradient(135deg, var(--tn-direct), var(--o-lamp)) !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-answer-giant { filter: none; }
:where(:root) body.obs:where(.obs-topnav) .mr-answer-page > span[style*="drop-shadow"] { filter: none !important; }
:where(:root) body.obs:where(.obs-topnav) .mr-period-card.active { border-color: var(--o-error); box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) span[style*="color: #ef4444"] { color: var(--o-error) !important; }
:where(:root) body.obs:where(.obs-topnav) span[style*="color: #10b981"] { color: var(--tn-direct) !important; }
/* Sentence case: no tracked capitals outside the wordmark. The labels keep their own words. */
:where(:root) body.obs:where(.obs-topnav) :is(.mr-status-label, .ug-cd-txt, .ug-countdown-label, .ug-history-theme, .real-questions-eyebrow, .fact-label, .code-label) { text-transform: none; letter-spacing: 0; }
/* The Uranus pages' .container has no frame (text ran to the screen edge); give it the article frame. */
:where(:root) body.obs:where(.obs-topnav) .container:has(.ug-breadcrumbs) { max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 4.4vw, 64px); box-sizing: border-box; }
:where(:root) body.obs:where(.obs-topnav) .mr-share-btn { min-height: 44px; background: transparent; border: 1px solid var(--o-control); color: var(--tn-ink-2); border-radius: 999px; }
/* ==========================================================================================================
   topnav · pricing: plans on night (the instrument), one-time reports on paper (the reading you receive)
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-topnav) .page-header .trust-line, :where(:root) body.obs:where(.obs-topnav) .page-header p[data-i18n-html] { color: var(--o-muted) !important; letter-spacing: 0 !important; }
/* inline styles */
:where(:root) body.obs:where(.obs-topnav) :is(.trial-breakdown-inner, .real-questions-inner) { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 16px; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) .trial-breakdown-title { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .trial-breakdown-sub { color: var(--tn-text); }
:where(:root) body.obs:where(.obs-topnav) .trial-step { background: transparent; border: 0; border-top: 1px solid var(--o-line); border-radius: 0; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .trial-step:hover { transform: none; box-shadow: none; border-color: var(--o-line); }
:where(:root) body.obs:where(.obs-topnav) .trial-step-day { background: transparent; border: 1px solid var(--o-line-2); color: var(--o-lamp); text-transform: none; letter-spacing: 0; font-weight: 600; }
:where(:root) body.obs:where(.obs-topnav) .trial-step-headline { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .trial-step-body { color: var(--tn-text); }
:where(:root) body.obs:where(.obs-topnav) .billing-toggle, :where(:root) body.obs:where(.obs-topnav) .billing-toggle * { letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) .pricing-card { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 16px; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) .pricing-card:hover { transform: none; border-color: var(--o-line-2); }
:where(:root) body.obs:where(.obs-topnav) .pricing-card.featured { border: 1px solid var(--o-ice); box-shadow: var(--tn-featured-shadow); background-image: radial-gradient(70% 60% at 50% 0%, var(--tn-glow-2), transparent 70%); }
:where(:root) body.obs:where(.obs-topnav) .pricing-card.deep-dive { border: 1px solid var(--tn-lamp-line); background: var(--o-night-2); box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.popular-badge, .deep-dive-badge, .report-popular-badge, .mps-popular, .bundle-badge) { background: var(--o-ice); color: var(--o-on-ice); text-transform: none; letter-spacing: 0; font-weight: 600; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .card-tier { color: var(--o-muted); text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 500; }
:where(:root) body.obs:where(.obs-topnav) .card-price { color: var(--o-ivory); font-family: var(--o-serif); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
:where(:root) body.obs:where(.obs-topnav) .card-price span { color: var(--o-muted); font-family: var(--o-sans); }
:where(:root) body.obs:where(.obs-topnav) .card-desc { color: var(--tn-text); }
:where(:root) body.obs:where(.obs-topnav) .trial-note { color: var(--o-lamp); }
:where(:root) body.obs:where(.obs-topnav) .features-list li { color: var(--tn-text-b); }
:where(:root) body.obs:where(.obs-topnav) .features-list li.disabled { opacity: 1; color: var(--o-faint); }
:where(:root) body.obs:where(.obs-topnav) .features-list li .check { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .features-list li[style*="color"] { color: var(--o-ink) !important; }
/* inline gold emphasis; the weight stays */
:where(:root) body.obs:where(.obs-topnav) .features-list li .cross { color: var(--o-faint); }
:where(:root) body.obs:where(.obs-topnav) .btn-pricing { border-radius: 999px; min-height: 48px; font-weight: 600; transform: none; }
:where(:root) body.obs:where(.obs-topnav) .btn-free { background: transparent; border: 1px solid var(--o-control); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) .btn-free:hover { border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .btn-deep-dive { background: var(--o-ice); color: var(--o-on-ice); }
/* mobile price snapshot */
:where(:root) body.obs:where(.obs-topnav) .mps-eyebrow { color: var(--o-muted); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) .mps-card { background: var(--o-night-2); border: 1px solid var(--o-line); box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .mps-card.mps-featured { border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .mps-card.mps-deepdive { border-color: var(--tn-lamp-line); background: var(--o-night-2); }
/* Long Reading price unset (the layer marks the body from the page's own flag): the page's script hides both Long Reading
   cards at the end of the body; hidden from the first layout, the phone layout no longer jumps when that script runs */
:where(:root) body.obs:where(.obs-topnav):where([data-obs-deep-dive="off"]) :is(#deep-dive-card, #mps-deep-dive-card) { display: none; }
:where(:root) body.obs:where(.obs-topnav) .mps-tier { color: var(--o-ink); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) .mps-card .mps-popular { background: transparent; color: var(--o-ice); padding: 0; font-weight: 600; }
/* a line of text in the card, not a badge */
:where(:root) body.obs:where(.obs-topnav) .mps-price { color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-topnav) .mps-price-unit { color: var(--o-muted); }
:where(:root) body.obs:where(.obs-topnav) .mps-cta { border-radius: 999px; min-height: 44px; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) :is(.mps-cta-pro, .mps-cta-prem, .mps-cta-deepdive), :where(:root) body.obs:where(.obs-topnav) .mps-card.mps-deepdive .mps-cta { background: var(--o-ice); color: var(--o-on-ice); border: 0; }
:where(:root) body.obs:where(.obs-topnav) .mps-cta-free { background: transparent; color: var(--o-ink); border: 1px solid var(--o-control); }
/* The divider between plans and one-time reports: an inline-styled label in tracked capitals, on the page field. */
:where(:root) body.obs:where(.obs-topnav) #main-content div[style*="max-width:700px"] > div[style*="height:1px"] { background: var(--o-line-2) !important; }
:where(:root) body.obs:where(.obs-topnav) #main-content div[style*="max-width:700px"] > span[style*="uppercase"] { color: var(--o-muted) !important; background: var(--o-night) !important; text-transform: lowercase !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: .9375rem !important; }
:where(:root) body.obs:where(.obs-topnav) #main-content div[style*="max-width:700px"] > span[style*="uppercase"]::first-letter { text-transform: uppercase; }
/* one-time reports: paper */
:where(:root) body.obs:where(.obs-topnav) .reports-header h2 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) :is(.reports-subtitle, .reports-header .report-desc) { color: var(--tn-text); }
:where(:root) body.obs:where(.obs-topnav) .report-card { background: var(--o-paper-surface); color: #1f2533; border: 0; border-radius: 3px;
  box-shadow: var(--tn-paper-shadow);
  --gold: #1d4b80; --gold-bright: #163d69; --gold-dim: #161b27; --text: #1f2533; --text-dim: #4b5467; --muted: #4b5467; --text-muted: #4b5467;
  --teal: #1d4b80; --cyan: #1d4b80; --purple: #1d4b80; --ae-focus: #1d4b80; }
:where(:root) body.obs:where(.obs-topnav) .report-card:hover { transform: none; box-shadow: var(--tn-paper-shadow); }
:where(:root) body.obs:where(.obs-topnav) .report-featured { box-shadow: var(--tn-paper-drop), 0 0 0 2px var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .report-card h3 { color: var(--o-paper-ink); font-family: var(--o-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.15; }
/* both themes (paper) */
:where(:root) body.obs:where(.obs-topnav) .report-card .report-icon { color: #8a6a2e; filter: none; }
:where(:root) body.obs:where(.obs-topnav) .report-card .price-amount { color: var(--o-paper-ink); font-family: var(--o-serif); font-weight: 500; }
:where(:root) body.obs:where(.obs-topnav) .report-card .price-label { color: var(--o-paper-muted); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) .report-card :is(.report-desc, .report-features li) { color: #1f2533; }
:where(:root) body.obs:where(.obs-topnav) .report-card .report-features li::before { color: var(--o-paper-accent); }
:where(:root) body.obs:where(.obs-topnav) .report-card a:not(.btn-report) { color: var(--o-paper-accent); }
:where(:root) body.obs:where(.obs-topnav) .report-card :is(.btn-report, .btn-report-gold) { background: var(--o-paper-ink); color: var(--o-paper); border: 0; border-radius: 999px; min-height: 48px; box-shadow: none; font-weight: 600; transform: none; }
/* both themes (paper) */
:where(:root) body.obs:where(.obs-topnav) .report-card :is(.btn-report, .btn-report-gold):hover { background: #26304a; color: var(--o-paper); opacity: 1; transform: none; }
:where(:root) body.obs:where(.obs-topnav) .bundle-card { background: var(--o-night-2); border: 1px solid var(--o-line); box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .bundle-heading, :where(:root) body.obs:where(.obs-topnav) .bundle-content h4 { color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-topnav) :is(.btn-bundle, .btn-bundle-gold) { background: var(--o-ice); color: var(--o-on-ice); border-radius: 999px; box-shadow: none; }
/* FAQ: the seo shell's hairline list */
:where(:root) body.obs:where(.obs-topnav) .faq-section h2 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .faq-grid { gap: 0 48px; }
:where(:root) body.obs:where(.obs-topnav) .faq-item { background: transparent; border: 0; border-top: 1px solid var(--o-line); border-radius: 0; padding: 22px 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) .faq-item h3 { font-family: var(--o-serif); font-weight: 400; font-size: 1.35rem; color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-topnav) .faq-item p { color: var(--tn-text); font-size: .9375rem; }
:where(:root) body.obs:where(.obs-topnav) .trust-badges .badge { background: transparent; border: 0; color: var(--o-muted); }
/* ==========================================================================================================
   topnav · company and legal pages, research, developers, identity card
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-topnav) :is(.stat-card) { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 14px; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .stat-number { color: var(--o-ivory); font-family: var(--o-serif); font-weight: 400; background: none; -webkit-text-fill-color: currentColor; }
:where(:root) body.obs:where(.obs-topnav) .stat-label { color: var(--o-muted); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) .container > :is(h2, h3), :where(:root) body.obs:where(.obs-topnav) .container section > h2 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) :is(.mission-section, .detail-card, .process-card, .glass-card) :is(h2, h3) { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .form-card { background: var(--o-night-2); border: 1px solid var(--o-line-2); border-radius: 16px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) .form-card :is(h2, h3) { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .email-card { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 16px; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .email-card h2, :where(:root) body.obs:where(.obs-topnav) .email-card h3 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .email-link { background: transparent; border: 1px solid var(--o-control); color: var(--o-ink); border-radius: 999px; min-height: 44px; }
:where(:root) body.obs:where(.obs-topnav) :is(.form-group, .form-card) label { color: var(--tn-ink-2); text-transform: none; letter-spacing: 0; font-weight: 500; }
:where(:root) body.obs:where(.obs-topnav) :is(.form-card, .email-capture, .chart-controls, .nl-form, .contact-grid) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background: var(--tn-field); border: 1px solid var(--o-control); border-radius: 10px; color: var(--o-ink); min-height: 48px; color-scheme: var(--tn-scheme); }
:where(:root) body.obs:where(.obs-topnav) :is(.form-card, .chart-controls, .nl-form) :is(input, select, textarea):focus { border-color: var(--o-ice); box-shadow: 0 0 0 3px var(--tn-focus-wash); }
:where(:root) body.obs:where(.obs-topnav) .star-rating :is(button, label, span) { color: var(--o-faint); }
:where(:root) body.obs:where(.obs-topnav) :is(.alert-success) { background: var(--tn-ok-bg); border: 1px solid var(--tn-ok-line); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) :is(.alert-error, .error-box) { background: var(--tn-err-bg); border: 1px solid var(--tn-err-line); color: var(--o-error); }
:where(:root) body.obs:where(.obs-topnav) .alert-warning { background: var(--tn-warn-bg); border: 1px solid var(--tn-warn-line); border-left: 3px solid var(--o-lamp); color: var(--tn-warn-ink); }
:where(:root) body.obs:where(.obs-topnav) .code-block, :where(:root) body.obs:where(.obs-topnav) .response-block { background: var(--tn-field); border: 1px solid var(--o-line); border-radius: 12px; }
:where(:root) body.obs:where(.obs-topnav) .price-card { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 16px; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .price-card.featured { border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .plan-price { color: var(--o-ivory); font-family: var(--o-serif); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .ranking-table th { color: var(--o-muted); background: transparent; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--o-line-2); }
:where(:root) body.obs:where(.obs-topnav) .ranking-table td { border-bottom: 1px solid var(--o-line); }
:where(:root) body.obs:where(.obs-topnav) .score-bar { background: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .data-table th { color: var(--o-muted); background: transparent; border-bottom: 1px solid var(--o-line-2); }
:where(:root) body.obs:where(.obs-topnav) .data-table td { border-bottom: 1px solid var(--o-line); }
/* The legal texts are long reading on night: a 45em measure keeps the lines readable. */
:where(:root) body.obs:where(.obs-topnav) :is(.terms-content, .legal-content, .container) > :is(p, ul, ol) { max-width: 45.1em; }
/* identity card */
:where(:root) body.obs:where(.obs-topnav) .ic-hero h1 { color: var(--o-ivory); font-weight: 400; background: none; -webkit-text-fill-color: currentColor; }
:where(:root) body.obs:where(.obs-topnav) .ic-hero .badge { color: var(--tn-ink-2); }
:where(:root) body.obs:where(.obs-topnav) .btn-generate .shine { display: none; }
:where(:root) body.obs:where(.obs-topnav) .btn-download-story { background: var(--o-ice); color: var(--o-on-ice); border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .btn-download-story:hover { background: var(--o-ice-2); color: var(--o-on-ice); }
:where(:root) body.obs:where(.obs-topnav) .btn-new-card { min-height: 44px; border: 1px solid var(--o-control); border-radius: 999px; color: var(--tn-ink-2); background: transparent; }
:where(:root) body.obs:where(.obs-topnav) .btn-new-card:hover { border-color: var(--o-ice); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) .nl-form button { background: var(--o-ice); color: var(--o-on-ice); border-radius: 999px; min-height: 48px; }
:where(:root) body.obs:where(.obs-topnav) .newsletter-section { background: var(--o-night-2); border: 1px solid var(--o-line-2); border-radius: 14px; box-shadow: none; }
/* ==========================================================================================================
   topnav · dashboard: tabs, cards, saved charts
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-topnav) .dash-tabs { border-bottom: 1px solid var(--o-line); gap: 4px; }
:where(:root) body.obs:where(.obs-topnav) .dash-tab { min-height: 44px; padding: 0 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--tn-link-2); font: 500 .9375rem var(--o-sans); box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .dash-tab:hover { color: var(--o-ink); background: transparent; }
:where(:root) body.obs:where(.obs-topnav) .dash-tab.active, :where(:root) body.obs:where(.obs-topnav) .dash-tab[aria-selected="true"] { color: var(--o-ink); border-bottom-color: var(--o-ice); background: transparent; }
:where(:root) body.obs:where(.obs-topnav) .section > h2 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .card { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 14px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) .card a[style*="--glass"] { background: transparent !important; border: 1px solid var(--o-line) !important; }
/* inline-styled tool links */
:where(:root) body.obs:where(.obs-topnav) .card a[style*="--glass"] > div[style*="--gold"] { color: var(--o-ink) !important; font-weight: 500 !important; }
:where(:root) body.obs:where(.obs-topnav) .card a[style*="--glass"]:hover { border-color: var(--o-control) !important; }
:where(:root) body.obs:where(.obs-topnav) .chart-item { background: transparent; border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; }
:where(:root) body.obs:where(.obs-topnav) .chart-title { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) .chart-meta { color: var(--o-faint); font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-topnav) .chart-item .btn-outline.btn-sm { min-height: 44px; padding: 0 14px; border-radius: 999px; background: transparent; font: 500 .875rem var(--o-sans); }
:where(:root) body.obs:where(.obs-topnav) .chart-item .btn-outline.btn-sm:not([data-action="delete"]) { color: var(--o-ink) !important; border-color: var(--o-control) !important; }
/* inline accent colours */
:where(:root) body.obs:where(.obs-topnav) .chart-item .btn-outline.btn-sm[data-action="delete"] { color: var(--o-error) !important; border-color: var(--tn-err-line-2) !important; }
:where(:root) body.obs:where(.obs-topnav) .usage-bar { background: var(--o-line); }
:where(:root) body.obs:where(.obs-topnav) .usage-bar-fill { background: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .usage-label { color: var(--o-muted); }
:where(:root) body.obs:where(.obs-topnav) :is(.tier-badge, .upgrade-prompt h3) { text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) .tier-badge { background: transparent; border: 1px solid var(--o-line-2); color: var(--tn-ink-2); }
:where(:root) body.obs:where(.obs-topnav) .upgrade-prompt { background: var(--o-night-2); border: 1px solid var(--o-line-2); border-radius: 14px; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .card h3 { text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) .card h3[style*="--purple"] { color: var(--o-ivory) !important; font-weight: 400; font-size: 1.5rem !important; }
/* inline style */
:where(:root) body.obs:where(.obs-topnav) #pwa-banner { background: var(--o-night-2) !important; border-bottom: 1px solid var(--o-line) !important; }
:where(:root) body.obs:where(.obs-topnav) #pwa-banner span { color: var(--tn-ink-2) !important; }
:where(:root) body.obs:where(.obs-topnav) #pwa-banner button { min-height: 44px; border-radius: 999px !important; border-color: var(--o-control) !important; color: var(--o-ink) !important; }
:where(:root) body.obs:where(.obs-topnav) .skeleton { background: linear-gradient(90deg, var(--o-night-2), var(--o-night-3), var(--o-night-2)); }
/* ==========================================================================================================
   topnav · the rest of the pages and their states (2026-10-31): editorial notices and forms, Mercury and Uranus,
   the Spanish pilots, company pages, pricing states, toasts. Both themes; daylight values at the end of the file.
   ========================================================================================================== */
/* The translation notice above the bar (editorial pages in uk, es, pt and hi): a quiet line on the panel tone at
   13 px (today 12 px on an amber wash). !important: inline styles. */
:where(:root) body.obs:where(.obs-topnav) > div[style*="rgba(245"] { background: var(--o-night-2) !important; color: var(--o-muted) !important;
  border-bottom: 1px solid var(--o-line) !important; font-size: .8125rem !important; line-height: 1.45; padding: 7px clamp(20px, 4.4vw, 64px) !important; }
/* Code in articles (the API article): a paper inset that scrolls inside itself instead of widening the page. */
:where(:root) body.obs:where(.obs-topnav) .article-content pre { max-width: 100%; overflow-x: auto; padding: 14px 16px; margin: 1.25rem 0; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--o-paper-rule); font-size: .875rem; line-height: 1.6; }
/* both themes (paper) */
:where(:root) body.obs:where(.obs-topnav) .article-content pre { background: rgba(22, 27, 39, .05); }
:where(:root) body.obs:where(.obs-topnav) .article-content pre code { background: none; padding: 0; font-size: inherit; color: var(--o-paper-ink); }
/* Tables in articles: room after them, headers aligned with their columns, and long values wrap inside their cells
   instead of widening the page on phones (the chart lessons have their own stacked layout). */
:where(:root) body.obs:where(.obs-topnav) .article-content table:not([role]) { margin: 1.25rem 0 1.75rem; max-width: 100%; }
:where(:root) body.obs:where(.obs-topnav) .article-content table:not([role]) :is(th, td) { text-align: left; vertical-align: top; overflow-wrap: anywhere; padding: 8px 12px 8px 0; }
/* Focus on paper: any focusable thing on a reading surface (links, and the code blocks, which scroll and so take
   keyboard focus) gets the ink ring; the shared ice ring is 1.3:1 on paper. Paper is the same in both themes. */
:where(:root) body.obs:where(.obs-topnav) :is(.article-content, .tldr, .report-card, #exit-intent-card, #long-reading-preview[open]) :focus-visible { outline-color: #1d4b80; }
/* Newsletter messages under the form: a ruled notice, the words say which (success or error). */
:where(:root) body.obs:where(.obs-topnav) :is(.email-capture .ec-msg, .ug-email .ug-email-msg) { margin: 12px auto 0; max-width: 440px; padding: 10px 14px; border-radius: 10px;
  background: var(--tn-ok-bg); border: 1px solid var(--tn-ok-line); color: var(--o-ink) !important; font-size: .9375rem; line-height: 1.5; }
:where(:root) body.obs:where(.obs-topnav) :is(.email-capture .ec-msg, .ug-email .ug-email-msg)[style*="--rose"] { background: var(--tn-err-bg); border-color: var(--tn-err-line); color: var(--o-error) !important; }
/* Feedback widget: the thank-you state */
:where(:root) body.obs:where(.obs-topnav) .feedback-panel .fb-success .checkmark { color: var(--o-ice); font-size: 2rem; }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel .fb-success p { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel .fb-done { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--o-control); color: var(--o-ink); background: transparent; }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel .fb-done:hover { border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel textarea { min-height: 112px !important; }
:where(:root) body.obs:where(.obs-topnav) .feedback-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* ---------- Mercury ---------- */
/* The period cards are links, inline by default: as blocks they hold their dates instead of breaking into empty
   fragments around them (today's page shows the same fragments). */
:where(:root) body.obs:where(.obs-topnav) a.mr-period-card { display: block; color: inherit; }
:where(:root) body.obs:where(.obs-topnav) a.mr-period-card:hover { border-color: var(--o-control); transform: none; box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) a.mr-period-card:hover .mr-period-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--o-ice); }
/* ---------- Uranus ---------- */
/* Detail sections were given a frame with no inner space: the text touched the rule. */
:where(:root) body.obs:where(.obs-topnav) .ug-detail-section { padding: clamp(18px, 3.4vw, 32px); }
:where(:root) body.obs:where(.obs-topnav) .ug-detail-section :is(ol, ul) { padding-left: 1.25rem; }
/* "or generate your free birth chart": an inline 60 % white (invisible by day); the quiet link ink instead. */
:where(:root) body.obs:where(.obs-topnav) .ug-cta a[style*="rgba(232"] { color: var(--tn-link-2) !important; display: inline-flex; align-items: center; min-height: 44px; }
/* The personal briefing signup: the newsletter's panel, field and ice action (today a gold wash and an amber button). */
:where(:root) body.obs:where(.obs-topnav) .ug-email { background: var(--o-night-2); border: 1px solid var(--o-line-2); border-radius: 14px;
  background-image: radial-gradient(60% 120% at 100% 0%, var(--tn-glow), transparent 70%); padding: clamp(24px, 4vw, 40px) clamp(18px, 3.4vw, 40px); }
:where(:root) body.obs:where(.obs-topnav) .ug-email h2 { color: var(--o-ivory); font-weight: 400; font-size: clamp(1.45rem, 1.3rem + .5vw, 1.75rem); }
:where(:root) body.obs:where(.obs-topnav) .ug-email p { color: var(--tn-text); }
:where(:root) body.obs:where(.obs-topnav) .ug-email input[type="email"] { background: var(--tn-field); border: 1px solid var(--o-control); border-radius: 10px; color: var(--o-ink); min-height: 48px; color-scheme: var(--tn-scheme); }
:where(:root) body.obs:where(.obs-topnav) .ug-email input[type="email"]:focus { border-color: var(--o-ice); box-shadow: 0 0 0 3px var(--tn-focus-wash); }
:where(:root) body.obs:where(.obs-topnav) .ug-email button[type="submit"] { background: var(--o-ice); color: var(--o-on-ice); border: 0; border-radius: 999px; min-height: 48px; padding: 0 24px; font-weight: 600; transform: none; }
:where(:root) body.obs:where(.obs-topnav) .ug-email button[type="submit"]:hover { background: var(--o-ice-2); opacity: 1; transform: none; }
/* Sign glyphs: the zodiac symbols in the editorial pages (Mercury, Uranus, articles) are drawn as text, in the ink
   around them, where the browser supports it, instead of the colour emoji tiles some systems substitute (the property
   is inherited); the sign is always named beside them. */
:where(:root) body.obs:where(.obs-topnav) :is(.seo-container, .container:has(.ug-breadcrumbs)) { font-variant-emoji: text; }
/* ---------- the Spanish pilots (Olivia Rodrigo, Uranus for Scorpio and Sagittarius) ---------- */
/* Their own rules paint the skip link and the feedback button gold with !important; these win back the ice action. */
:where(:root) body.obs:where(.obs-topnav):is(.olivia-es-page, .scorpio-es-page, .sagittarius-es-page) .skip-link { background: var(--o-ice) !important; color: var(--o-on-ice) !important; }
:where(:root) body.obs:where(.obs-topnav):is(.olivia-es-page, .scorpio-es-page, .sagittarius-es-page) #fbPanel .fb-submit { background: var(--o-ice) !important; color: var(--o-on-ice) !important; }
:where(:root) body.obs:where(.obs-topnav):is(.scorpio-es-page, .sagittarius-es-page) .ug-cta-btn { color: var(--o-on-ice); }
/* The reading's call to action: the ice pill (today a gold gradient). */
:where(:root) body.obs:where(.obs-topnav) .olivia-es-reading .olivia-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px;
  background: var(--o-ice); color: var(--o-on-ice); border-radius: 999px; font-weight: 600; text-decoration: none; box-shadow: var(--tn-btn-shadow); }
:where(:root) body.obs:where(.obs-topnav) .olivia-es-reading .olivia-cta-btn:hover { background: var(--o-ice-2); color: var(--o-on-ice); }
:where(:root) body.obs:where(.obs-topnav) .olivia-es-reading h2 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .olivia-es-reading :is(p, li) { color: var(--tn-text); }
:where(:root) body.obs:where(.obs-topnav) .olivia-es-reading a:not(.olivia-cta-btn) { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .olivia-es-reading a:focus-visible { outline-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .sag-table :is(th, td) { border-bottom-color: var(--o-line); }
:where(:root) body.obs:where(.obs-topnav) .sag-table th { color: var(--o-muted); font-weight: 500; }
/* ---------- company and legal pages ---------- */
/* The message box keeps room for its placeholder (the shared 48 px field height had cut it to two lines). */
/* foundation.css sets every field to 44 px with a long selector; the message boxes need their own height. */
:where(:root) body.obs:where(.obs-topnav) .form-card textarea { min-height: 128px !important; }
/* Star rating (contact): hover and the chosen stars in lamp light, the others faint. The radio inputs stay the page's. */
:where(:root) body.obs:where(.obs-topnav) .star-rating label { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
:where(:root) body.obs:where(.obs-topnav) .star-rating :is(label:hover, label:hover ~ label, input:checked ~ label) { color: var(--o-lamp); }
/* Sending (contact form): the page disables the button and writes "Sending..." on it; a quiet ring beside the words. */
:where(:root) body.obs:where(.obs-topnav) .form-card .btn-submit:disabled::before, :where(:root) body.obs:where(.obs-topnav) .feedback-panel .fb-submit:disabled::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 2px;
  border-radius: 50%; border: 1.5px solid currentColor; border-top-color: transparent; animation: obs-spin .9s linear infinite; }
:where(:root) body.obs:where(.obs-topnav) .feedback-panel .fb-submit:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 600px) {
  /* The identity card's feedback button (fixed, bottom right) covered its own primary action at first view on phones;
     as the editorial pages already do on phones, it sits in the flow at the end of the page there. */
  :where(:root) body.obs:where(.obs-topnav):has(.ic-hero) > .feedback-btn { position: static; margin: 8px auto 32px; }
}
/* The identity card's newsletter became a framed panel; its form needs inner space. */
:where(:root) body.obs:where(.obs-topnav) .newsletter-section { padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 40px); }
:where(:root) body.obs:where(.obs-topnav) .newsletter-section h2 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) .newsletter-section p { color: var(--tn-text); }
/* Developer docs: the Copy button and the language label form a header row above the code (the button covered the
   first line, today too). */
:where(:root) body.obs:where(.obs-topnav) .code-block:has(> .copy-code) { padding-top: 64px; }
:where(:root) body.obs:where(.obs-topnav) .code-block .copy-code { min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 999px; font: 500 .875rem var(--o-sans); top: 10px; }
:where(:root) body.obs:where(.obs-topnav) :is(.code-block, .response-block) .code-label { color: var(--o-muted); font-size: .8125rem; top: 12px; }
:where(:root) body.obs:where(.obs-topnav) .response-block { padding-top: 44px; }
:where(:root) body.obs:where(.obs-topnav) .code-block pre { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) .response-block pre { color: var(--tn-text); }
:where(:root) body.obs:where(.obs-topnav) .code-comment { color: var(--o-faint); }
/* Press: the Copy button sits in the quote's top-right corner (absolute); the quote keeps clear of it (the text ran
   under the button, today too). */
:where(:root) body.obs:where(.obs-topnav) .quote-block:has(> .copy-btn) { padding-right: 84px; }
/* research study: the aspect marks keep their symbol and word; one quiet ink each (the rose one sat under 4.5:1 by day) */
:where(:root) body.obs:where(.obs-topnav) .aspect-icon { background: transparent; border: 1px solid var(--o-line-2); }
:where(:root) body.obs:where(.obs-topnav) .aspect-icon.challenging { color: var(--o-lamp); background: transparent; }
:where(:root) body.obs:where(.obs-topnav) .aspect-icon.harmonious { color: var(--o-ice); background: transparent; }
/* ---------- pricing ---------- */
/* Monthly / annual switch. The page script moves the dot between 3 px and 29 px, so the track keeps that geometry;
   the shared 44 px touch height had stretched the frame around a dot left near the top. The frame is now a 52 x 26
   track centred in the 44 px button. !important: inline styles. */
:where(:root) body.obs:where(.obs-topnav) #billingToggle { border: 0 !important; background: transparent !important; width: 56px !important; min-height: 44px; border-radius: 999px !important; }
:where(:root) body.obs:where(.obs-topnav) #billingToggle::before { content: ""; position: absolute; left: 0; top: 50%; width: 52px; height: 26px; transform: translateY(-50%);
  box-sizing: border-box; border: 1px solid var(--o-control); border-radius: 999px; background: var(--o-night-3); }
:where(:root) body.obs:where(.obs-topnav) #billingToggle:hover::before { border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) #billingDot { top: 50% !important; transform: translateY(-50%); background: var(--o-ice) !important; z-index: 1; }
:where(:root) body.obs:where(.obs-topnav) .card-price small { font-size: .8125rem !important; color: var(--o-ice) !important; font-family: var(--o-sans); }
/* Price and billing notes are terms, not fine print: 13 px at full strength (today 11.5 px at 65 % opacity). */
:where(:root) body.obs:where(.obs-topnav) .pricing-card :is(.renew-note, .trial-pause-note, p[data-i18n="pr_dd_method"]) { font-size: .8125rem !important; opacity: 1 !important; color: var(--o-muted); line-height: 1.5 !important; }
:where(:root) body.obs:where(.obs-topnav) .pricing-card .renew-note a { color: var(--o-ice) !important; }
/* Phones: the page reorders the main column so prices come first; the divider before the one-time reports had no
   order of its own and jumped to the top of the page (today too). It goes back between the plans and the reports. */
@media (max-width: 768px) {
  :where(:root) body.obs:where(.obs-topnav) #main-content > div[style*="max-width:700px"] { order: 4; }
}
/* The Long Reading preview (a details box in the deep-dive card): a ruled row when closed; open, the example reads
   on paper, like the reports it previews. !important: inline styles. */
:where(:root) body.obs:where(.obs-topnav) #long-reading-preview { border: 1px solid var(--o-line-2) !important; border-radius: 10px !important; padding: 0 14px !important; }
:where(:root) body.obs:where(.obs-topnav) #long-reading-preview > summary { display: flex; align-items: center; min-height: 48px; color: var(--o-ice) !important; font-weight: 500 !important; }
:where(:root) body.obs:where(.obs-topnav) #long-reading-preview[open] { background: var(--o-paper-surface); border-color: transparent !important; box-shadow: var(--tn-paper-shadow); padding-bottom: 14px !important;
  --ae-focus: #1d4b80; }
:where(:root) body.obs:where(.obs-topnav) #long-reading-preview[open] > summary { color: var(--o-paper-accent) !important; }
:where(:root) body.obs:where(.obs-topnav) #long-reading-preview[open] > p { color: #1f2533; }
/* Live questions (pricing, shown when recent anonymised questions exist): the questions are a voice, so Cormorant at
   20 px (it was 16 px, under the serif's floor); a quiet 13 px attribution; the panel's own cards, no blur. */
:where(:root) body.obs:where(.obs-topnav) .real-question-card { font-size: 1.25rem; line-height: 1.4; color: var(--o-ink); background: var(--o-night-3);
  border: 1px solid var(--o-line-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-topnav) .real-question-card .attrib { font-size: .8125rem; color: var(--o-muted); }
:where(:root) body.obs:where(.obs-topnav) .real-questions-eyebrow { color: var(--o-muted); font-weight: 500; font-size: .9375rem; margin-bottom: 1rem; }
:where(:root) body.obs:where(.obs-topnav) .real-questions-inner { padding: clamp(18px, 2.6vw, 32px); }
:where(:root) body.obs:where(.obs-topnav) .real-question-card { padding: 1.4rem 1.2rem 1.1rem; }
/* The trial decision under the Pro button (shown after a trial request) */
:where(:root) body.obs:where(.obs-topnav) #trial-decision #trial-decision-message { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) #trial-decision #trial-access-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--o-ice); }
/* Exit intent (pricing): an offer for a reading, so it reads on paper like the report cards; ink action, quiet
   dismissals, sentence-case eyebrow. !important: inline styles. */
:where(:root) body.obs:where(.obs-topnav) #exit-intent-overlay { background: var(--tn-scrim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-card { background: var(--o-paper-surface) !important; border: 0 !important; border-radius: 3px !important; color: #1f2533 !important;
  box-shadow: var(--tn-paper-shadow) !important; font-family: var(--o-sans) !important; --ae-focus: #1d4b80; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-card > button[aria-label] { min-width: 44px; min-height: 44px; top: 6px !important; right: 6px !important; color: var(--o-paper-muted) !important; border-radius: 999px !important; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-card > div:first-of-type { background: transparent !important; color: var(--o-paper-muted) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: .875rem !important; font-weight: 500 !important; padding: 0 !important; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-card h3 { color: var(--o-paper-ink) !important; font-family: var(--o-serif) !important; font-weight: 500 !important; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-card p { color: #1f2533 !important; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-price { color: var(--o-paper-ink) !important; font-family: var(--o-serif); font-weight: 500 !important; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-cta { background: var(--o-paper-ink) !important; color: var(--o-paper) !important; border-radius: 999px !important; min-height: 48px; letter-spacing: 0 !important; font: 600 1rem var(--o-sans) !important; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-cta:disabled { opacity: .55; cursor: not-allowed; }
:where(:root) body.obs:where(.obs-topnav) #exit-intent-card > a { display: inline-flex !important; align-items: center; min-height: 44px; color: var(--o-paper-muted) !important; text-decoration: underline !important; text-underline-offset: .2em; font-size: .9375rem !important; }
/* Toasts (toast.js, pricing, login and dashboard): a raised panel with a rule and the type's sign in its ink; the
   message itself in ink (today white text on red, green, amber or blue fills). */
:where(:root) body.obs:where(.obs-topnav) #toast-container { top: 84px; right: clamp(16px, 4.4vw, 64px); }
:where(:root) body.obs:where(.obs-topnav) .toast { background: var(--o-night-3); color: var(--o-ink); border: 1px solid var(--o-line-2); border-left: 3px solid var(--o-ice);
  border-radius: 10px; box-shadow: var(--tn-pop-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; font-family: var(--o-sans); font-size: .9375rem; }
:where(:root) body.obs:where(.obs-topnav) .toast-error { background: var(--o-night-3); border-color: var(--o-line-2); border-left-color: var(--o-error); }
:where(:root) body.obs:where(.obs-topnav) .toast-error .toast-icon { color: var(--o-error); }
:where(:root) body.obs:where(.obs-topnav) .toast-success { background: var(--o-night-3); border-color: var(--o-line-2); border-left-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .toast-warning { background: var(--o-night-3); border-color: var(--o-line-2); border-left-color: var(--o-lamp); }
:where(:root) body.obs:where(.obs-topnav) .toast-warning .toast-icon { color: var(--o-lamp); }
:where(:root) body.obs:where(.obs-topnav) .toast-info { background: var(--o-night-3); border-color: var(--o-line-2); border-left-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) :is(.toast-success, .toast-info) .toast-icon { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-topnav) .toast-close { min-width: 44px; min-height: 44px; margin: -12px -14px -12px auto; padding: 0; opacity: 1; color: var(--o-muted); }
:where(:root) body.obs:where(.obs-topnav) .toast-close:hover { color: var(--o-ink); }
/* ---------- dashboard: every tab and state ---------- */
/* Rose marks errors and destructive actions on these pages (dashboard, contact, newsletter messages): the error ink. */
:where(:root) body.obs:where(.obs-topnav) { --rose: var(--o-error); --rose-bright: var(--o-error); }
/* except on the research study, where rose marks the lowest scores and least compatible pairs: a rating, not an
   error; the lamp ink, as its challenging aspects (the scores and words carry the meaning). */
:where(:root) body.obs:where(.obs-topnav):has(.ranking-table) { --rose: var(--o-lamp); --rose-bright: var(--o-lamp); }
/* The page's compact buttons (Create Key, Search, Save Birth Data, Upgrade) kept the violet-to-gold gradient: the
   ice pill at a compact size. Outline and danger buttons have their own rules. */
:where(:root) body.obs:where(.obs-topnav) .dash-panel .btn.btn-sm:not(.btn-outline):not(.btn-danger) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  background: var(--o-ice); color: var(--o-on-ice); border: 0; border-radius: 999px; font: 600 .9375rem/1.2 var(--o-sans); box-shadow: none; }
:where(:root) body.obs:where(.obs-topnav) .dash-panel .btn.btn-sm:not(.btn-outline):not(.btn-danger):hover { background: var(--o-ice-2); opacity: 1; }
:where(:root) body.obs:where(.obs-topnav) .dash-panel .btn-outline.btn-sm { min-height: 44px; padding: 0 16px; border-radius: 999px; font: 500 .9375rem/1.2 var(--o-sans); }
/* Destructive: revoke a key, delete the account (inline rose), delete a chart. */
:where(:root) body.obs:where(.obs-topnav) :is(.btn-danger, .dash-panel button[onclick^="deleteAccount"]) { background: transparent !important; border: 1px solid var(--tn-err-line-2) !important; color: var(--o-error) !important;
  border-radius: 999px; min-height: 44px; padding: 0 16px; font: 500 .9375rem/1.2 var(--o-sans); }
:where(:root) body.obs:where(.obs-topnav) :is(.btn-danger, .dash-panel button[onclick^="deleteAccount"]):hover { background: var(--tn-err-bg) !important; }
/* Saved charts: empty state, no results, the limit bar */
:where(:root) body.obs:where(.obs-topnav) :is(.empty-state, .no-results) { color: var(--o-muted); }
:where(:root) body.obs:where(.obs-topnav) .empty-state > div[style*="2.5rem"] { font-size: 0 !important; width: 40px; height: 40px; margin: 0 auto 1rem !important; opacity: 1 !important;
  background: var(--o-wordmark) center / contain no-repeat; }
/* the ✨ emoji gives way to the wordmark's hairline glyph (decoration either way) */
:where(:root) body.obs:where(.obs-topnav) .empty-state p[style*="1.1rem"] { font-family: var(--o-serif); font-weight: 400 !important; font-size: 1.5rem !important; color: var(--o-ivory) !important; }
:where(:root) body.obs:where(.obs-topnav) .empty-state a[href="/birth-chart-calculator"] { display: flex !important; align-items: center; justify-content: center; min-height: 48px !important;
  background: var(--o-ice) !important; color: var(--o-on-ice) !important; border-radius: 999px !important; }
:where(:root) body.obs:where(.obs-topnav) .empty-state button[onclick^="generateFromProfile"] { border-color: var(--o-control) !important; color: var(--o-ink) !important; border-radius: 999px !important; }
:where(:root) body.obs:where(.obs-topnav) .empty-state a[style*="border-radius:20px"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px !important;
  border-color: var(--o-control) !important; color: var(--tn-ink-2) !important; border-radius: 999px !important; }
:where(:root) body.obs:where(.obs-topnav) .empty-state a[style*="border-radius:20px"]:hover { border-color: var(--o-ice) !important; color: var(--o-ink) !important; }
:where(:root) body.obs:where(.obs-topnav) .usage-label { font-size: .8125rem; }
/* the reading that a chart's "AI Reading" asks for: status text, error in the error ink, the answer on a quiet card */
:where(:root) body.obs:where(.obs-topnav) [id^="ai-reading-"] > p[style*="--rose"] { color: var(--o-error) !important; background: var(--tn-err-bg); border: 1px solid var(--tn-err-line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
:where(:root) body.obs:where(.obs-topnav) [id^="ai-reading-"] h3[style*="--gold"] { color: var(--o-ivory) !important; font-family: var(--o-serif); font-weight: 400; font-size: 1.35rem !important; text-transform: none; }
/* API keys */
:where(:root) body.obs:where(.obs-topnav) .create-key-form input { background: var(--tn-field); border: 1px solid var(--o-control); border-radius: 10px; color: var(--o-ink); min-height: 48px; color-scheme: var(--tn-scheme); }
:where(:root) body.obs:where(.obs-topnav) .create-key-form input:focus { border-color: var(--o-ice); box-shadow: 0 0 0 3px var(--tn-focus-wash); }
:where(:root) body.obs:where(.obs-topnav) .api-key-item { background: transparent; border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; padding: 12px 0; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
:where(:root) body.obs:where(.obs-topnav) .api-key-item .key-name { color: var(--o-ink); margin-right: 8px; }
:where(:root) body.obs:where(.obs-topnav) .key-prefix { color: var(--o-ice); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-right: 8px; }
:where(:root) body.obs:where(.obs-topnav) .key-meta { color: var(--o-faint); font-size: .875rem; }
:where(:root) body.obs:where(.obs-topnav) .raw-key-banner { background: var(--tn-ok-bg); border: 1px solid var(--tn-ok-line); border-left: 3px solid var(--o-ice); border-radius: 10px; color: var(--o-ink); }
:where(:root) body.obs:where(.obs-topnav) .raw-key-banner code { color: var(--o-ink) !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--tn-field); border: 1px solid var(--o-line-2); border-radius: 8px; padding: 10px 12px; }
:where(:root) body.obs:where(.obs-topnav) .raw-key-banner .warning { color: var(--o-lamp); font-size: .875rem; font-weight: 500; }
:where(:root) body.obs:where(.obs-topnav) .dash-panel .copy-btn { min-height: 44px; min-width: 64px; padding: 0 16px; border-radius: 999px; font: 500 .875rem var(--o-sans); }
/* Account: birth data form (inline-styled fields and tracked-capital labels), referral, subscription, data & privacy */
:where(:root) body.obs:where(.obs-topnav) #birthProfileForm label[style*="uppercase"] { text-transform: none !important; letter-spacing: 0 !important; font-size: .875rem !important; font-weight: 500 !important; color: var(--tn-ink-2) !important; }
:where(:root) body.obs:where(.obs-topnav) #panel-account :is(input[type="date"], input[type="time"], input[type="text"], input[type="number"]) { background: var(--tn-field) !important; border: 1px solid var(--o-control) !important; border-radius: 10px !important;
  color: var(--o-ink) !important; min-height: 48px !important; color-scheme: var(--tn-scheme); }
:where(:root) body.obs:where(.obs-topnav) #panel-account input:focus { border-color: var(--o-ice) !important; box-shadow: 0 0 0 3px var(--tn-focus-wash); }
:where(:root) body.obs:where(.obs-topnav) #panel-account input[type="checkbox"] { accent-color: var(--o-ice); width: 20px !important; height: 20px; }
:where(:root) body.obs:where(.obs-topnav) #panel-account label:has(> input[type="checkbox"]) { min-height: 44px; color: var(--tn-ink-2) !important; font-size: .9375rem !important; }
:where(:root) body.obs:where(.obs-topnav) #referralLink { color: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-topnav) #birthSaveStatus { font-weight: 500; }
:where(:root) body.obs:where(.obs-topnav) #subActive > p, :where(:root) body.obs:where(.obs-topnav) #birthSaveStatus:not([style*="--rose"]) { color: var(--o-ice) !important; }
/* Upgrade prompt (inline violet frame) and the astrocartography tool card (inline violet-gold wash, tracked "Pro") */
:where(:root) body.obs:where(.obs-topnav) #upgradePrompt .card { border-color: var(--o-line-2) !important; }
:where(:root) body.obs:where(.obs-topnav) .card a[href="/astrocartography"][style*="rgba(139"] { background: transparent !important; border: 1px solid var(--o-line) !important; }
:where(:root) body.obs:where(.obs-topnav) .card a[href="/astrocartography"][style*="rgba(139"] > div[style*="--gold"] { color: var(--o-ink) !important; font-weight: 500 !important; }
:where(:root) body.obs:where(.obs-topnav) .card a[href="/astrocartography"] span[style*="uppercase"] { background: transparent !important; border: 1px solid var(--o-line-2); color: var(--tn-ink-2) !important;
  text-transform: none !important; letter-spacing: 0 !important; font-size: .8125rem !important; padding: 1px 8px !important; border-radius: 999px !important; }
:where(:root) body.obs:where(.obs-topnav) .card a[href="/astrocartography"][style*="rgba(139"]:hover { border-color: var(--o-control) !important; }
/* Today's transits (account tab): rows on the panel tone; the aspect signs in the instrument inks (hard aspects in
   lamp light, as on the chart), tracked "APPLYING" labels in lower case at a readable size. */
:where(:root) body.obs:where(.obs-topnav) #personalHoroscopeContent div[style*="0.04)"][style*="border-radius:8px"] { background: transparent !important; border-bottom: 1px solid var(--o-line); border-radius: 0 !important; }
:where(:root) body.obs:where(.obs-topnav) #personalHoroscopeContent span[style*="--rose"] { color: var(--o-lamp) !important; }
:where(:root) body.obs:where(.obs-topnav) #personalHoroscopeContent span[style*="--teal"], :where(:root) body.obs:where(.obs-topnav) #personalHoroscopeContent span[style*="--gold"] { color: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-topnav) #personalHoroscopeContent span[style*="0.7rem"] { font-size: .8125rem !important; text-transform: lowercase; letter-spacing: 0; }
/* Alerts: email verification (with its Resend button) and checkout returns (with their links) */
:where(:root) body.obs:where(.obs-topnav) .alert { border-radius: 10px; line-height: 1.5; font-size: .9375rem; }
:where(:root) body.obs:where(.obs-topnav) #resendBtn { border: 1px solid var(--o-control) !important; color: var(--o-ink) !important; border-radius: 999px !important; min-height: 44px; padding: 0 16px !important; font-size: .875rem !important; }
:where(:root) body.obs:where(.obs-topnav) #paymentAlert a { color: var(--o-ice) !important; display: inline-flex; align-items: center; min-height: 44px; }
/* Pause instead of cancel (a dialog built by the page with inline styles): a panel on night, lamp-free; one ice
   choice (1 month), two outline choices, the reason field, quiet ways out. !important: inline styles. */
:where(:root) body.obs:where(.obs-topnav) #pauseModal { background: var(--tn-scrim) !important; }
:where(:root) body.obs:where(.obs-topnav) #pauseModal > div { background: var(--o-night-2) !important; border: 1px solid var(--o-line-2) !important; border-radius: 16px !important; box-shadow: var(--tn-pop-shadow) !important; color: var(--o-ink) !important; }
:where(:root) body.obs:where(.obs-topnav) #pauseModal h3 { color: var(--o-ivory) !important; font-family: var(--o-serif) !important; font-weight: 400; }
:where(:root) body.obs:where(.obs-topnav) #pauseModal p { color: var(--tn-text) !important; }
:where(:root) body.obs:where(.obs-topnav) #pauseModal button[onclick^="submitPause"] { min-height: 48px; border-radius: 999px !important; background: transparent !important; color: var(--o-ink) !important; border: 1px solid var(--o-control) !important; font-family: var(--o-sans) !important; font-weight: 600 !important; }
:where(:root) body.obs:where(.obs-topnav) #pauseModal button[onclick="submitPause(30)"] { background: var(--o-ice) !important; color: var(--o-on-ice) !important; border-color: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-topnav) #pauseModal #pauseReason { background: var(--tn-field) !important; border: 1px solid var(--o-control) !important; color: var(--o-ink) !important; border-radius: 10px !important; min-height: 48px; }
:where(:root) body.obs:where(.obs-topnav) #pauseModal button[onclick^="closePauseModal"] { min-height: 44px; border-radius: 999px !important; color: var(--o-ink) !important; border: 1px solid var(--o-control) !important; }
:where(:root) body.obs:where(.obs-topnav) #pauseModal a { color: var(--o-muted) !important; display: inline-flex; align-items: center; min-height: 44px; }
:where(:root) body.obs:where(.obs-topnav) #pauseModalMsg { color: var(--o-muted) !important; }
:where(:root) body.obs:where(.obs-topnav) #pauseModalMsg[style*="rgb(248"] { color: var(--o-error) !important; }
:where(:root) body.obs:where(.obs-topnav) #pauseModalMsg[style*="rgb(34"] { color: var(--o-ice) !important; }
/* Welcome (first sign-in, ?welcome=1): the page's dialog, inline-styled in violet and amber; the Observatory panel,
   numbered steps as hairline rings, one ice action and an outline one. !important: inline styles. */
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] { background: var(--tn-scrim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] > div { background: var(--o-night-2) !important; border: 1px solid var(--o-line-2) !important; border-radius: 16px !important;
  color: var(--o-ink) !important; font-family: var(--o-sans) !important; box-shadow: var(--tn-pop-shadow) !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] > div > div:first-child { font-size: 0 !important; width: 40px; height: 40px; margin: 0 auto 1rem !important; background: var(--o-wordmark) center / contain no-repeat; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] h2 { color: var(--o-ivory) !important; font-family: var(--o-serif) !important; font-weight: 400; font-size: 1.75rem !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] :is(p, span[style*="#94a3b8"]) { color: var(--tn-text) !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] strong { color: var(--o-ink) !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] span[style*="#7c3aed"] { background: transparent !important; border: 1px solid var(--o-control); color: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] button { min-height: 48px; border-radius: 999px !important; font-family: var(--o-sans) !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] button[onclick^="closeWelcome"] { background: var(--o-ice) !important; color: var(--o-on-ice) !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] button:not([onclick^="closeWelcome"]) { background: transparent !important; color: var(--o-ink) !important; border: 1px solid var(--o-control) !important; }
:where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] p:last-child { color: var(--o-faint) !important; font-size: .8125rem !important; }
@media (max-width: 600px) {
  /* two pills side by side broke "Dashboard" mid-word at 390 px: stacked, full width */
  :where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] div:has(> button[onclick^="closeWelcome"]) { flex-direction: column !important; align-items: stretch; }
  :where(:root) body.obs:where(.obs-topnav) [role="dialog"][aria-label="Welcome to Astro Engine"] > div { padding: 2rem 1.25rem !important; }
}
/* Small card labels (Account, Subscription): UI labels in the sans at 15 px (the serif sat at 14 px, under its floor). */
:where(:root) body.obs:where(.obs-topnav) .card > h3:not([style]) { font-family: var(--o-sans); font-size: .9375rem; font-weight: 500; color: var(--o-muted); letter-spacing: 0; }
:where(:root) body.obs:where(.obs-topnav) #panel-account input[type="checkbox"] { color-scheme: var(--tn-scheme); }
@media (max-width: 600px) {
  /* the saved-charts search gets the whole row; the sort menu sits under it */
  :where(:root) body.obs:where(.obs-topnav) .chart-controls { flex-wrap: wrap; }
  :where(:root) body.obs:where(.obs-topnav) .chart-controls .chart-search { flex: 1 1 100%; }
  /* the new key gets the whole row; Copy sits under it */
  :where(:root) body.obs:where(.obs-topnav) .raw-key-banner > div { flex-wrap: wrap; }
  :where(:root) body.obs:where(.obs-topnav) .raw-key-banner code { flex: 1 1 100% !important; }
}
/* ---------- phones: the bars that keep two rows ----------
   About (wordmark, menu, Login and the fixed language and theme controls), pricing (wordmark, Login, language, theme,
   menu) and the dashboard and team pages (links without a menu) cannot hold one 44 px row at 390 px. They keep two
   rows, made deliberate: the wordmark leads the first row; the controls gather at the right edge of the second, under
   the controls fixed beside the first, as one cluster; plain link rows (team, dashboard) start under the wordmark. */
@media (max-width: 600px) {
  :where(:root) body.obs:where(.obs-topnav):has(> .lang-sw) .top-nav .hamburger { margin-left: auto; }
  :where(:root) body.obs:where(.obs-topnav) .top-nav:has(> .nav-controls) { row-gap: 4px; }
  /* Bars without a menu (dashboard, team): the dashboard's own rule turns the bar into a centred column of three rows;
     here a row that wraps: the wordmark on the first row beside the theme control, the links and Logout on the second,
     from the left edge, on the full width (the space kept for the theme control is only needed on the first row). */
  :where(:root) body.obs:where(.obs-topnav) .top-nav:not(:has(.hamburger)) { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; row-gap: 2px;
    padding-inline: clamp(20px, 4.4vw, 64px); }
  :where(:root) body.obs:where(.obs-topnav) .top-nav:not(:has(.hamburger)) .logo { flex: 0 0 100%; justify-content: flex-start; }
  :where(:root) body.obs:where(.obs-topnav) .top-nav:not(:has(.hamburger)) .nav-links { flex: 1 1 auto; justify-content: flex-start; column-gap: 18px; row-gap: 0; margin: 0; }
  :where(:root) body.obs:where(.obs-topnav) .top-nav:not(:has(.hamburger)) .nav-links > a:not(.btn-nav) { padding: 10px 0; }
  :where(:root) body.obs:where(.obs-topnav) .top-nav:not(:has(.hamburger)) .nav-links > :is(.btn-nav, .btn-sm) { margin-left: auto; }
}
/* ---------- daylight ---------- */
/* A saved light theme: the shell tokens take their daylight values (design system, section "Daylight"): a cool daylight
   field, deep-ice actions and links, a deeper lamp, no glows; paper reading surfaces stay paper, ruled and lifted by
   the daylight shadow. Every soft ink stays >= 10:1 on the field, panels and white. */
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) {
  --o-wordmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%231d4b80' stroke-width='1'%3E%3Ccircle cx='13' cy='13' r='8'/%3E%3Cellipse cx='13' cy='13' rx='12.2' ry='4.4' transform='rotate(-36 13 13)'/%3E%3C/svg%3E");
  --o-theme-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4b80' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.6 14.6A8 8 0 0 1 9.4 4.4a8 8 0 1 0 10.2 10.2z'/%3E%3C/svg%3E");
  --glass: rgba(247, 249, 252, .88); --glass-vivid: rgba(255, 255, 255, .97); --glass-border: #d4dce7; --glass-border-hover: rgba(29, 75, 128, .45);
  --card-bg: #f7f9fc; --deep-space: #f7f9fc;
  --surface-hover: rgba(29, 75, 128, .06); --border-active: rgba(29, 75, 128, .55);
  --gold-light: #163d69; --gold-text: #1d4b80; --purple-bright: #163d69; --cyan-dim: #24364f;
  --gradient-primary: linear-gradient(#1d4b80, #1d4b80); --gradient-gold: linear-gradient(#1d4b80, #1d4b80);
  --gradient-accent: linear-gradient(#1d4b80, #1d4b80);
  --teal: #1d4b80;
  --tn-bar: rgba(247, 249, 252, .94);
  --tn-sheet: rgba(255, 255, 255, .98);
  --tn-ink-2: #232c3f;
  --tn-link-2: #2e374b;
  --tn-text: #313b50;
  --tn-text-b: #313b50;
  --tn-field: #ffffff;
  --tn-scheme: light;
  --tn-hover: rgba(29, 75, 128, .07);
  --tn-glow: rgba(29, 75, 128, 0);
  --tn-glow-2: rgba(29, 75, 128, 0);
  --tn-focus-wash: rgba(29, 75, 128, .16);
  --tn-btn-shadow: 0 10px 26px -16px rgba(18, 24, 38, .45);
  --tn-pop-shadow: 0 18px 40px -24px rgba(18, 24, 38, .28);
  --tn-featured-shadow: 0 18px 40px -24px rgba(18, 24, 38, .28);
  --tn-paper-drop: 0 18px 40px -24px rgba(18, 24, 38, .28);
  --tn-paper-shadow: 0 0 0 1px #d8cebb, 0 18px 40px -24px rgba(18, 24, 38, .28);
  --tn-note-shadow: 0 0 0 1px #d8cebb, 0 18px 40px -24px rgba(18, 24, 38, .28);
  --tn-lamp-line: rgba(138, 90, 16, .55);
  --tn-direct: #1d6b4f;
  --tn-ok-bg: rgba(29, 75, 128, .06); --tn-ok-line: rgba(29, 75, 128, .4);
  --tn-err-bg: rgba(179, 38, 30, .07); --tn-err-line: #b3261e; --tn-err-line-2: #b3261e;
  --tn-warn-bg: rgba(138, 90, 16, .07); --tn-warn-line: rgba(138, 90, 16, .45); --tn-warn-ink: #3b2c12; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) { --tn-scrim: rgba(18, 24, 38, .4); }
/* Page-level light rules that outrank the shell tokens: the blog index and chart lessons, and the three Spanish
   pilots, redefine the gold family on <body> for today's light page (brown and violet links and headings). Same
   specificity, later in the cascade: the daylight values return. */
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav):is(.blog-index-page, .chart-learning-page, .olivia-es-page, .scorpio-es-page, .sagittarius-es-page) {
  --gold: #1d4b80; --gold-bright: #163d69; --cyan: #1d4b80; --purple-bright: #163d69; --muted: #56627a; background: var(--o-night); }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav).blog-index-page .page-hero h1 { color: var(--o-ivory); }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav):is(.olivia-es-page, .scorpio-es-page, .sagittarius-es-page) #fbPanel { background: var(--o-night-3); }
/* Mercury: the status hues (retrograde red, shadow amber, direct green) deepen for the light field, and the glows go
   (no light-on-light glow). The status is always written beside its colour. !important: inline custom properties. */
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-status-banner { --status-glow: transparent !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-status-banner[style*="#ef4444"] { --status-color: #b3261e !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-status-banner[style*="#f59e0b"] { --status-color: #8a5a10 !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-status-banner[style*="#10b981"] { --status-color: #1d6b4f !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-status-label { background: transparent; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-mercury-glyph { filter: none; color: var(--status-color) !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-answer-page { --answer-glow: transparent !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-answer-page[style*="#ef4444"][style*="#f97316"] { --answer-gradient: linear-gradient(135deg, #b3261e, #9a3412) !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-answer-page[style*="#f59e0b"][style*="#f97316"] { --answer-gradient: linear-gradient(135deg, #8a5a10, #9a3412) !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-answer-page[style*="#f59e0b"][style*="#10b981"] { --answer-gradient: linear-gradient(135deg, #8a5a10, #1d6b4f) !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-answer-page[style*="#10b981"][style*="#d4a843"] { --answer-gradient: linear-gradient(135deg, #1d6b4f, #8a5a10) !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .mr-answer-giant { filter: none; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) span[style*="color: #ef4444"] { color: #b3261e !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) span[style*="color: #10b981"] { color: #1d6b4f !important; }
/* Uranus: the sign glyphs lose their glow by day. */
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) :is(.ug-glyph, .ug-sign-symbol, .ug-detail-symbol) { filter: none; }
/* Loading placeholders: night-2 to night-3 is white on white by day; a cool grey sweep instead. */
:where(:root[data-theme="light"]) body.obs:where(.obs-topnav) .skeleton { background: linear-gradient(90deg, #e6ebf2, #f1f4f8, #e6ebf2); }