/* Focus presentation: deep space, quiet surfaces, the original Quitok mark. */
:root[data-site-style="focus"] {
  color-scheme: dark;
  --paper: #070910;
  --ink: #f4f6ff;
  --muted: #aeb5c9;
  --purple: #c0d1ff;
  --lilac: #202b46;
  --line: #2b3348;
  --night: #03050b;
  --cream: #f4f6ff;
  --surface: #101522;
  --media-stage: #131b2d;
  --stage-label: #b7c7e7;
}
.site-cosmos { display: none; }
html[data-site-style="focus"] body { background: var(--paper); isolation: isolate; }
/* One fixed decorative layer keeps the sky continuous between sections.
   It never sits above content or uses the intro's body::before layer. */
html[data-site-style="focus"] .site-cosmos {
  display: block; position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none; user-select: none;
  background: #070910;
}
html[data-site-style="focus"] .site-cosmos::before {
  content: ""; position: absolute; inset: -3%;
  background: linear-gradient(#07091026, #07091026), url("/assets/cosmic-atmosphere.webp") center / cover no-repeat;
  opacity: .8;
}
html[data-site-style="focus"] .site-cosmos::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 48%, #07091077, transparent 72%);
}
html[data-site-style="focus"] :is(h1, h2, h3) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html[data-site-style="focus"] :is(h1, h2) em {
  font-family: inherit; font-style: normal; font-weight: inherit; color: var(--purple); letter-spacing: inherit;
}
html[data-site-style="focus"] :is(.step-number, .rule-list article>span, .story-layout aside>p, .story-layout aside>p em) {
  font-family: inherit; font-style: normal;
}
html[data-site-style="focus"] ::selection { background: #bacbff; color: #080c17; }
html[data-site-style="focus"] :is(a, button, input, summary):focus-visible { outline-color: #b3caff; }
html[data-site-style="focus"] .brand { color: #fff; letter-spacing: -.05em; }
html[data-site-style="focus"] :is(.brand img, .style-brand img) {
  filter: grayscale(1) brightness(.68) contrast(5);
  box-shadow: 0 0 0 1px #ffffff20;
}
html[data-site-style="focus"] :is(.site-header, .style-switch) {
  background: #070910ed; border-color: #ffffff12;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
html[data-site-style="focus"] .desktop-nav a { color: #c4c9d9; }
html[data-site-style="focus"] .desktop-nav a:is(:hover, [aria-current]) { color: #fff; }
html[data-site-style="focus"] .button {
  color: #0a1020; background: #eff3ff; border-color: #eff3ff; box-shadow: 0 2px 14px #b9ccff0a;
}
html[data-site-style="focus"] .button:hover {
  color: #070b16; background: #c6d6ff; border-color: #c6d6ff; box-shadow: 0 5px 26px #a5c0ff22;
}
html[data-site-style="focus"] .button.light { background: var(--ink); border-color: var(--ink); color: #080d19; }
html[data-site-style="focus"] :is(.eyebrow, .ink .eyebrow, .example-note .eyebrow) { color: #b8c9ed; }
html[data-site-style="focus"] :is(.hero .lead, .ink .lead, .ink p) { color: #bec6db; }
html[data-site-style="focus"] .hero .hero-note { color: var(--muted); }
html[data-site-style="focus"] .style-switch-options { background: #121725; border-color: #ffffff1b; }
html[data-site-style="focus"] .style-switch-options button[aria-pressed="true"] { background: #ecf1ff; color: #111827; }
html[data-site-style="focus"] .style-switch-options button:hover { background: #25304b; color: #f4f6ff; }
html[data-site-style="focus"] .style-switch-options button[aria-pressed="true"]:hover { background: #d9e3ff; color: #111827; }
html[data-site-style="focus"] .mobile-dock { background: #0a0e19f2; border-color: #ffffff1a; box-shadow: 0 -8px 32px #0003; }
html[data-site-style="focus"] .mobile-dock a { color: #adb8d1; }
html[data-site-style="focus"] .mobile-dock a[aria-current] { background: #222e4b; color: #e2ebff; }

/* The original cosmic artwork stays behind a real screen from the app. */
html[data-site-style="focus"] .cosmic-hero {
  position: relative; isolation: isolate; overflow: clip; background-color: var(--paper);
  background-image: linear-gradient(180deg, #07091012 55%, var(--paper) 100%),
    linear-gradient(90deg, #07091055 0%, transparent 55%), url("/assets/cosmic-horizon.webp");
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
html[data-site-style="focus"] .cosmic-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3;
  background: linear-gradient(var(--paper), transparent 28%, var(--paper)),
    url("/assets/cosmic-atmosphere.webp") center / cover no-repeat;
  pointer-events: none;
}
html[data-site-style="focus"] .launch-hero { isolation: isolate; }
html[data-site-style="focus"] .launch-hero h1 { font-weight: 600; letter-spacing: -.058em; }
html[data-site-style="focus"] .orbit-scene {
  position: relative; isolation: isolate; height: 580px; width: 100%; min-width: 0;
  max-width: 560px; margin-inline: auto;
}
html[data-site-style="focus"] .orbit-scene::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 12% 20%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 9%, #acc5ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 92% 39%, #fff 0 .7px, transparent 1.4px),
    radial-gradient(circle at 18% 70%, #afc1ff 0 .8px, transparent 1.5px),
    radial-gradient(circle at 84% 81%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 4%, #fff9 0 .6px, transparent 1.2px),
    radial-gradient(circle at 7% 49%, #fffa 0 .7px, transparent 1.3px),
    radial-gradient(ellipse at 53% 49%, #27387718, transparent 65%);
}
html[data-site-style="focus"] .orbit-scene::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, #819bdd65, transparent); pointer-events: none;
}
html[data-site-style="focus"] .orbit-core {
  position: absolute; width: 96%; max-width: 470px; aspect-ratio: 1; left: 50%; top: 49%;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, #90b3ff0c, transparent 68%);
  border: 0; pointer-events: none;
}
html[data-site-style="focus"] .orbit-ring {
  position: absolute; left: 3%; top: 27%; width: 94%; height: 43%; z-index: 0;
  transform: rotate(-28deg); border: 1px solid #b7caff29; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 18px #b8ccff07;
}
html[data-site-style="focus"] .orbit-ring::before {
  content: ""; position: absolute; top: 19%; left: 7%; width: 5px; height: 5px;
  border-radius: 50%; background: #e4ecff; box-shadow: 0 0 12px #afcaff;
}
html[data-site-style="focus"] .orbit-ring-two { top: 14%; left: 14%; width: 72%; height: 67%; transform: rotate(25deg); border-color: #a3b9e919; }
html[data-site-style="focus"] .orbit-ring-two::before { top: auto; bottom: 11%; left: 19%; width: 3px; height: 3px; background: #b0c6ff; }
html[data-site-style="focus"] .orbit-app {
  position: absolute; z-index: 2; width: 220px; max-width: 67%; top: 40px; left: 50%;
  margin: 0; padding: 4px; transform: translateX(-50%) rotate(-4deg); border-radius: 29px;
  background: #080b12; border: 1px solid #dbe7ff63;
  box-shadow: 0 0 0 4px #05070f, 0 28px 50px #0009, 0 0 46px #98b6ff17;
}
html[data-site-style="focus"] .orbit-app img { display: block; width: 100%; border-radius: 23px; }
html[data-site-style="focus"] .orbit-label {
  left: 0; right: 0; top: auto; bottom: 10px; transform: none; text-align: center;
  padding-inline: 12px; font-size: 10px; letter-spacing: .16em; line-height: 1.5; color: #b4c4e8;
}

/* Consistent dark glass on the demo, actual media, and interior pages. */
html[data-site-style="focus"] :is(.protection-step, .film-feature, .feature-film, .film-choice, .group-focus-art, .help-card, .example-note, .mode-widget) {
  background: linear-gradient(145deg, #151c2dd9, #0c111dee);
  border: 1px solid #ffffff16; box-shadow: inset 0 1px #ffffff06, 0 18px 48px #0002;
}
html[data-site-style="focus"] .protection-step { position: relative; }
html[data-site-style="focus"] .protection-step .step-number { color: #b7caff; }
html[data-site-style="focus"] .protection-step h3 { color: #f5f7ff; }
html[data-site-style="focus"] .protection-step p { color: var(--muted); }
html[data-site-style="focus"] .proof-strip { border-color: var(--line); color: #b9c5df; }
html[data-site-style="focus"] .proof-strip strong { color: #f1f5ff; }
html[data-site-style="focus"] :is(.film-screen, .film-choice-art, .app-shot-image) {
  background: radial-gradient(ellipse at 50% 35%, #26335355, transparent 80%), #111726;
  border-color: #ffffff19;
}
html[data-site-style="focus"] :is(.film-video-wrap video, .app-shot-image img) { box-shadow: 0 14px 36px #0005; }
html[data-site-style="focus"] .film-choice[aria-current] { border-color: #c0d1ff; box-shadow: 0 0 0 1px #c0d1ff; }
html[data-site-style="focus"] .film-choice-play { color: #0b1020; background: #e7efff; }
html[data-site-style="focus"] .film-choice-time { background: #070b16ed; }
html[data-site-style="focus"] :is(.compact-showcase, .film-section) { background: transparent; }
html[data-site-style="focus"] .phase-overview { background: #10152291; }
html[data-site-style="focus"] .phase-route { background: #0a1019b0; }
html[data-site-style="focus"] .launch-groups { border-color: #ffffff16; }
html[data-site-style="focus"] .group-rings>span:not(:nth-child(2)) {
  border-color: #849fd179; background: radial-gradient(circle at 25% 20%, #25365a, #0b101f 75%);
  color: #e1eaff; box-shadow: inset 0 1px 12px #b7cdff12;
}
html[data-site-style="focus"] :is(.soft-section, .story-strip, .values-section, .library-detail, .companion-section) { background: #0d111c70; }
html[data-site-style="focus"] .story-hero { background: linear-gradient(180deg, #080b1466, #151d3166); }
html[data-site-style="focus"] .creator-monogram { background: #202e4b; color: #e5edff; border-color: #405272; }
html[data-site-style="focus"] .story-panorama { filter: saturate(.62) brightness(.65); }
html[data-site-style="focus"] :is(.ink, .closing-cta) { background: #05070e88; }
html[data-site-style="focus"] .closing-cta { border-block: 1px solid #ffffff13; }
html[data-site-style="focus"] .closing-cta::before {
  content: ""; position: absolute; height: 1px; top: 0; left: 10%; right: 10%;
  background: linear-gradient(90deg, transparent, #a1b9ff9c, transparent); pointer-events: none;
}
html[data-site-style="focus"] :is(.ink h2 em, .closing-cta h2 em, .large-mark) { color: var(--purple); }
html[data-site-style="focus"] :is(.ink .small-text, .ink .phase-controls>.small-text) { color: var(--muted); }
html[data-site-style="focus"] .phase-tabs button[aria-selected="true"] { background: #e2ebff; border-color: #e2ebff; color: #0a1120; }
html[data-site-style="focus"] .phase-tabs button:hover { background: #263554; }
html[data-site-style="focus"] .phase-tabs button[aria-selected="true"]:hover { background: #c6d7ff; }
html[data-site-style="focus"] .phase-art>img.phase-landscape { border: 1px solid #849ed240; }
html[data-site-style="focus"] .segmented button[aria-selected="true"] { background: #263653; color: #f1f5ff; }
html[data-site-style="focus"] .site-footer { background: #07091099; }
html[data-site-style="focus"] .site-footer .brand img { opacity: .95; }
html[data-site-style="focus"] :is(.footer-bottom, .contact-link, .motion-toggle) { border-color: #ffffff1a; }

@media (min-width: 701px) and (max-width: 1000px) {
  html[data-site-style="focus"] .orbit-scene { height: 520px; }
  html[data-site-style="focus"] .orbit-app { width: 195px; top: 35px; }
  html[data-site-style="focus"] .orbit-core { width: 98%; }
}
@media (max-width: 700px) {
  html[data-site-style="focus"] .site-cosmos::before {
    background-image: linear-gradient(#07091026, #07091026), url("/assets/cosmic-atmosphere-mobile.webp");
    background-position: center, right center;
  }
  html[data-site-style="focus"] .cosmic-hero::before {
    background-image: linear-gradient(var(--paper), transparent 28%, var(--paper)), url("/assets/cosmic-atmosphere-mobile.webp");
    background-position: center, right center;
  }
  html[data-site-style="focus"] .cosmic-hero {
    background-image: linear-gradient(180deg, var(--paper) 0%, #070910f2 22%, #07091040 44%, #07091000 63%, var(--paper) 100%),
      url("/assets/cosmic-horizon-mobile.webp");
    background-size: 100% 100%, auto 560px; background-position: center, 70% bottom;
  }
  html[data-site-style="focus"] .orbit-scene { height: 450px; max-width: 390px; }
  html[data-site-style="focus"] .orbit-app { width: 185px; max-width: 67%; top: 15px; padding: 3px; border-radius: 24px; }
  html[data-site-style="focus"] .orbit-app img { border-radius: 20px; }
  html[data-site-style="focus"] .orbit-core { top: 47%; width: 94%; }
  html[data-site-style="focus"] .orbit-ring { top: 26%; height: 41%; }
  html[data-site-style="focus"] .orbit-ring-two { top: 15%; height: 63%; }
  html[data-site-style="focus"] .orbit-scene::after { bottom: 30px; }
  html[data-site-style="focus"] .orbit-label { bottom: 3px; font-size: 9px; letter-spacing: .13em; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-site-style="focus"]:not(.motion-paused) .orbit-app { animation: quitok-orbit-arrive .9s cubic-bezier(.2,.75,.25,1) both; }
  @keyframes quitok-orbit-arrive {
    from { opacity: 0; transform: translate(-50%, 12px) rotate(-4deg); }
    to { opacity: 1; transform: translate(-50%, 0) rotate(-4deg); }
  }
}
/* A very slow drift on larger screens; mobile keeps the same sky still. */
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  html[data-site-style="focus"]:not(.motion-paused) .site-cosmos::before {
    animation: quitok-sky-drift 48s ease-in-out infinite alternate;
  }
  @keyframes quitok-sky-drift {
    from { transform: translate3d(-.7%, -.5%, 0) scale(1.01); }
    to { transform: translate3d(.7%, .5%, 0) scale(1.025); }
  }
}
html[data-site-style="focus"].motion-paused .site-cosmos::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-site-style="focus"] :is(.orbit-app, .orbit-ring, .orbit-core) { animation: none; }
}
html[data-site-style="focus"].motion-paused :is(.orbit-app, .orbit-ring, .orbit-core) { animation: none; }