/* Native system preference responds immediately, without cookies or a script. */
:root { color-scheme: light dark; }
.portrait > img { object-position: center 30%; filter: none; }
.video-launch > img { object-position: center 30%; filter: none; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e5ecf8;
    --muted: #b0bbcf;
    --line: rgba(177, 196, 229, .17);
    --glass: rgba(30, 42, 61, .62);
    --blue: #a4bee9;
  }
  body { background: #111824; }
  body::before {
    background: radial-gradient(ellipse at 78% 18%, #29314f 0, transparent 43%),
      radial-gradient(ellipse at 17% 49%, #18303a 0, transparent 50%),
      linear-gradient(#151b2b, #172131 70%, #111824);
  }
  .glass {
    border-color: rgba(210, 225, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 40px -28px #0009;
  }
  .ambient-one { background: #284951; opacity: .4; }
  .ambient-two { background: #393450; opacity: .45; }
  .monogram > span { color: #a0c9c1; }
  .eyebrow, .mini-label, .card-number, .trust-strip,
  .text-button, .question-index, .source-note, .video-notice,
  footer > p, footer > span { color: #adbbd2; }
  .nav-links a:hover { color: #bfd2f4; }
  .gradient-text {
    background-image: linear-gradient(100deg, #a9c8ec, #c7b8e8);
  }
  .button-dark { background: #dbe7f7; color: #1b2c43; }
  .button-dark:hover { background: #edf3ff; }
  .button:hover { box-shadow: 0 8px 18px -8px #0008; }
  button:focus-visible, a:focus-visible, summary:focus-visible {
    outline-color: #b3d9ee;
  }
  .play-small { border-color: #72839d; }
  .stars { color: #b7c8e7; }
  .status-dot { background: #a0d0bd; }
  .portrait { background: #303e53; }
  .portrait-caption { color: #fff; }
  .orbit { border-color: rgba(155, 179, 219, .13); }
  .floating-bubble, .mini-card { background: rgba(34, 47, 68, .78); }
  .bubble-icon { background: #354863; color: #dce9ff; }
  .mini-title em { color: #c0c5e6; }
  .mini-footer > span, .visual-spark { color: #a8bce0; }
  .trust-strip span:nth-child(even) { color: #93a9c9; }
  .conversation-art > span {
    background: #303e59; border-color: #ffffff14; color: #dce7f8;
  }
  .conversation-art > span + span { background: #2d4949; }
  .conversation-art i { color: #a4d2be; }
  .explore-art > span { border-color: #ffffff14; color: #e5ebf8; }
  .explore-art > span:nth-child(1) { background: #443d5c; }
  .explore-art > span:nth-child(2) { background: #2e4948; }
  .explore-art > span:nth-child(3) { background: #354764; }
  .explore-art i { color: #afbfdf; }
  .progress-art > span { background: #35475e; border-color: #ffffff12; }
  .progress-art > span:nth-child(2) { background: #486078; }
  .progress-art > span:nth-child(3) { background: #607d95; }
  .progress-art > span:nth-child(4) { background: #83a4ba; }
  .progress-art i, .practice-note span { color: #b2c5df; }
  .practice {
    background: linear-gradient(140deg, #293750b5, #1c283bba);
    box-shadow: inset 0 1px 0 #ffffff12, 0 25px 70px -45px #000b;
  }
  .level-label { background: #314653; color: #d1e4ed; }
  .topic { border-color: #53647e; color: #b9c7dd; }
  .topic.active { background: #3b506d; border-color: #7188aa; color: #f5f8ff; }
  .topic:hover { border-color: #91a7c9; }
  .hint { background: #ffffff08; border-color: #ffffff16; }
  .hint > span { color: #b2c4dd; }
  .hint > p { color: #d4e3f4; }
  .video-launch { background: #26364b; }
  .video-badge { background: #1d2d45c7; color: #edf3ff; }
  .review-card > .stars { color: #b7c8e7; }
  .review-person > span { background: #34455f; color: #d0ddf4; }
  .review-card:nth-child(2) .review-person > span { background: #2d4641; color: #b9dcd0; }
  .review-card:nth-child(3) .review-person > span { background: #443b57; color: #dfcaec; }
  .faq-list summary > span, .about-detail > span { color: #aabbd5; }
  .contact {
    background: radial-gradient(ellipse at 80% 20%, #343e61a8, transparent 60%),
      radial-gradient(ellipse at 10% 90%, #21414380, transparent 60%), #1c2739b3;
  }
  .contact-decoration { color: #a3b8df12; }
  .skip { color: #172437; background: #e1ecfb; }
  .floating-bubble::after, .mini-card::after {
    background: linear-gradient(110deg, transparent 35%, #ffffff18 49%, transparent 62%);
  }
}

@media (prefers-color-scheme: dark) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .floating-bubble:hover, .mini-card:hover {
    background: rgba(46, 62, 88, .87);
    box-shadow: inset 0 1px 0 #ffffff1c, 0 22px 35px -20px #000b;
  }
  .method-card:hover, .review-card:hover {
    border-color: #b6d3ff38;
    box-shadow: inset 0 1px 0 #ffffff12, 0 24px 42px -25px #000b;
  }
  .practice:focus-within {
    box-shadow: inset 0 1px 0 #ffffff1c, 0 25px 70px -40px #7396cf55;
  }
}