/* Shared website tokens, pinned to the local RadioPalette snapshot. */
:root {
  --site-dark-canvas: #01040A;
  --site-dark-canvas-rgb: 1,4,10;
  --site-dark-surface: #101D2A;
  --site-dark-surface-rgb: 16,29,42;
  --site-dark-text: #D0E9FF;
  --site-dark-text-rgb: 208,233,255;
  --site-dark-muted: #A5C9E7;
  --site-dark-muted-rgb: 165,201,231;
  --site-dark-accent: #5AB5FF;
  --site-dark-accent-rgb: 90,181,255;
  --site-dark-accent-soft: #0C3D68;
  --site-dark-accent-soft-rgb: 12,61,104;
  --site-dark-border: #5D8FC2;
  --site-dark-border-rgb: 93,143,194;
  --site-dark-modal-contour: #80C8FF;
  --site-dark-modal-contour-rgb: 128,200,255;
  --site-dark-action-fill: #5AB5FF;
  --site-dark-action-fill-rgb: 90,181,255;
  --site-dark-action-text: #01040A;
  --site-dark-action-text-rgb: 1,4,10;
  --site-dark-surface-base: #0B1826;
  --site-dark-surface-base-rgb: 11,24,38;
  --site-light-canvas: #F2F7FE;
  --site-light-canvas-rgb: 242,247,254;
  --site-light-surface: #EAF3FE;
  --site-light-surface-rgb: 234,243,254;
  --site-light-text: #103556;
  --site-light-text-rgb: 16,53,86;
  --site-light-muted: #3F607D;
  --site-light-muted-rgb: 63,96,125;
  --site-light-accent: #006BDE;
  --site-light-accent-rgb: 0,107,222;
  --site-light-accent-soft: #F8FCFF;
  --site-light-accent-soft-rgb: 248,252,255;
  --site-light-border: #6E8199;
  --site-light-border-rgb: 110,129,153;
  --site-light-modal-contour: #004FA8;
  --site-light-modal-contour-rgb: 0,79,168;
  --site-light-button-text: #01040A;
  --site-light-button-text-rgb: 1,4,10;
  --site-light-button-fill: #5AB5FF;
  --site-light-button-fill-rgb: 90,181,255;
  --site-light-action-fill: #5AB5FF;
  --site-light-action-fill-rgb: 90,181,255;
  --site-light-action-text: #01040A;
  --site-light-action-text-rgb: 1,4,10;
}

:root, .landing {
  color-scheme: dark;
  --night: var(--site-dark-canvas);
  --canvas: var(--site-dark-canvas);
  --white: var(--site-dark-text);
  --text: var(--site-dark-text);
  --muted: var(--site-dark-muted);
  --cyan: var(--site-dark-accent);
  --accent: var(--site-dark-accent);
  --ink: var(--site-light-text);
  --light-muted: var(--site-light-muted);
  --paper: #fff;
  --line: rgba(var(--site-dark-border-rgb), .23);
  --paper-line: rgba(var(--site-light-border-rgb), .23);
  --motion-response: 180ms;
  --motion-surface: 280ms;
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
}
html, body { background-color: var(--site-dark-canvas); color: var(--site-dark-text); }
.paper, .nc-music, .plugins {
  color-scheme: light;
  --white: var(--site-light-text);
  --text: var(--site-light-text);
  --muted: var(--site-light-muted);
  --cyan: var(--site-light-accent);
  --accent: var(--site-light-accent);
  --line: rgba(var(--site-light-border-rgb), .23);
  background: #fff;
  color: var(--site-light-text);
}
/* Dark panels embedded in a light chapter keep their own contrast context. */
.plan-pro, .draft-preview, .plugin-icon {
  color-scheme: dark;
  --white: var(--site-dark-text);
  --text: var(--site-dark-text);
  --muted: var(--site-dark-muted);
  --cyan: var(--site-dark-accent);
  --accent: var(--site-dark-accent);
  --line: rgba(var(--site-dark-border-rgb), .23);
}
.pixel-grid {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  /* Safari's browser bars change innerHeight during a swipe. Keep particle
     coordinates tied to one stable viewport instead of rebuilding each time. */
  height: 100lvh;
  pointer-events: none;
  user-select: none;
}
main .wrap, .site-footer { position: relative; }
main .wrap, .site-footer { z-index: 2; }
.site-header { z-index: 20; }
.skip-link { z-index: 40; }
.main-nav a, .site-footer nav a, .footer-links a { color: var(--muted); }
.main-nav a:is(:hover, :focus-visible), .site-footer nav a:is(:hover, :focus-visible),
.footer-links a:is(:hover, :focus-visible) { color: var(--cyan); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 6px;
}
:where(a, button, summary) { touch-action: manipulation; }
.main-nav a, .text-link, .footer-links a, .footer-bottom a {
  transition-duration: var(--motion-response);
  min-height: 44px;
}
.main-nav a { display: inline-flex; align-items: center; min-width: 44px; }
.text-link:active { opacity: .7; }
.text-link .arrow { transition: transform var(--motion-surface) var(--ease-settle); }
.text-link:is(:hover, :focus-visible) .arrow { transform: translateX(4px); }
.app-card:focus-within, .plugin-card:focus-within { border-color: var(--cyan); }
.plugins em, .plugin-card .text-link { color: var(--site-light-accent); }
.plugin-link span { border-color: currentColor; }
.plugin-card { border-color: var(--paper-line); }
.plugin-card:hover { border-color: var(--site-light-accent); }

/* Talori's older literal colours now resolve to the shared semantics. */
.page-home .intelligence, .legal-main { background-color: var(--site-dark-canvas); }
.trust, .plan-pro, .draft-preview, .mobile-nav-panel, .language-options,
.contact-form { background-color: var(--site-dark-surface); }
.hero-description, .hero-availability, .hero-product figcaption, .hero-bottom,
.draft-state, .draft-preview dt, .draft-preview > p, .trust-copy > p:not(.section-index):not(.section-lead),
.private-note, .plan-pro .plan-price span, .plan-pro .plan-detail, .plan-pro .plan-bottom,
.footer-top em, .support-date, .legal-meta, .legal-toc a, .legal-article p { color: var(--muted); }
.section-intro > p:last-child, .feature-row p, .pricing-heading > p,
.plan-price span, .plan-detail, .launch-note p, .faq-list details p { color: var(--muted); }
.paper .section-index, .device-number, .setup-steps li::before { color: var(--site-light-muted); }
.faq-list summary:is(:hover, :focus-visible), .faq-list details[open] summary,
.launch-note .status-dot { color: var(--cyan); }
.launch-note .status-dot { background: var(--cyan); }
.language-switch > summary, .mobile-navigation > summary { border-color: rgba(var(--site-dark-border-rgb), .5); }
.language-switch[open] > summary, .mobile-navigation[open] > summary,
.language-options a:is(:hover, :focus-visible, [aria-current]) { background: var(--site-dark-accent-soft); color: var(--site-dark-accent); }
.language-options a:focus-visible { outline-offset: -3px; }
.support-sources a, .legal-article a, .legal-article a:hover { color: var(--cyan); }
.contact-form :is(input, textarea, select) {
  background: var(--site-dark-surface);
  color: var(--site-dark-text);
  border-color: rgba(var(--site-dark-border-rgb), .5);
}
.cookie-dialog { background: var(--site-dark-surface); color: var(--site-dark-text); border-color: var(--line); }
.cookie-dialog h2 { color: var(--site-dark-accent); }
.cookie-dialog p, .cookie-dialog .cookie-status, .cookie-brand, .cookie-links a { color: var(--site-dark-muted); }
.cookie-choice { background: var(--site-dark-accent-soft); color: var(--site-dark-text); border-color: rgba(var(--site-dark-accent-rgb), .6); }
.cookie-choice:hover { background: var(--site-dark-accent-soft); border-color: var(--site-dark-accent); }
.cookie-dialog summary { min-height: 44px; }
.cookie-dialog :focus-visible, .cookie-settings:focus-visible { outline: 3px solid var(--site-dark-accent); outline-offset: 6px; }
.page-guide { --kb-blue: var(--site-dark-accent); --kb-muted: var(--site-dark-muted); }
body:has(.header-tools) .site-header::before,
html.talori-motion .site-header.is-scrolled::before {
  background-color: rgba(var(--site-dark-canvas-rgb), .92);
  border-bottom-color: var(--line);
}

@media (hover: none) {
  .app-card:hover, .screenshot-link:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html .pixel-grid { display: block; }
  .text-link:is(:hover, :focus-visible) .arrow,
  .app-card:hover, .screenshot-link:hover { transform: none !important; }
}

/* Reading progress belongs to the viewport, independently of header/banner width. */
.site-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 80;
  pointer-events: none;
  user-select: none;
}
.site-scroll-progress[hidden] { display: none; }
.site-scroll-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--site-dark-accent);
  opacity: .75;
  transform: scaleX(0);
  transform-origin: left center;
}
/* The portfolio return strip uses the accent itself; invert the progress fill. */
html.has-portfolio-return .site-scroll-progress > span {
  background: var(--site-dark-canvas);
  opacity: 1;
}