/* =====================================================================
   Castor — one page, three skins (like arils.jp): Liquid Glass (Apple),
   Material 3 (Android / ChromeOS / Linux) and WinUI (Windows), picked
   before first paint. All share a glassy night sky; Liquid surfaces are
   glass, Material and WinUI surfaces are blurred (Acrylic on WinUI).
   ===================================================================== */
:root {
  color-scheme: dark;
  --gold: #ffd27a;
  --violet: #8e92ff;
  --sky-1: #070818;
  --sky-2: #14163f;
  --sky-3: #2b2f8f;

  /* Liquid (default) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", sans-serif;
  --text: #f5f5f7;
  --text-2: rgba(235, 235, 245, .66);
  --text-3: rgba(235, 235, 245, .38);
  --accent: #fff;
  --on-accent: #0b0c22;
  --tonal: rgba(255, 255, 255, .14);
  --on-tonal: #fff;
  /* Telescope-lens glass: a clear middle, a darker rim, a faint blue/amber
     fringe at the edge and one curved glint — not a frosted slab. */
  --surface:
    radial-gradient(70% 45% at 22% 0%, rgba(255, 255, 255, .085), transparent 70%),
    radial-gradient(farthest-corner at 50% 42%, rgba(18, 20, 52, .16) 35%, rgba(6, 7, 24, .52) 100%);
  --surface-filter: blur(10px) saturate(125%);
  --surface-edge: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 1.5px 1.5px 0 -.5px rgba(150, 176, 255, .32),
    inset -1.5px -1.5px 0 -.5px rgba(255, 192, 140, .22), inset 0 0 30px rgba(0, 0, 0, .30);
  --surface-shadow: 0 16px 44px rgba(0, 0, 0, .32);
  --bar: radial-gradient(60% 120% at 20% 0%, rgba(255, 255, 255, .07), transparent 70%), rgba(10, 11, 32, .46);
  --r-card: 22px;
  --r-button: 999px;
  --button-h: 46px;
  --button-weight: 600;
  --ease: cubic-bezier(.2, .9, .1, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --h1: 800 clamp(44px, 7.5vw, 76px) / 1.02 var(--display);
  --h2: 700 clamp(26px, 3.4vw, 34px) / 1.25 var(--display);
}
:root[data-ui="material"] {
  --font: "Roboto Flex", "Noto Sans JP", Roboto, system-ui, sans-serif;
  --display: "Roboto Flex", "Noto Sans JP", Roboto, system-ui, sans-serif;
  /* Dark scheme from Castor's indigo seed */
  --text: #e4e1ec;
  --text-2: #c7c5d0;
  --text-3: #918f9a;
  --accent: #bec2ff;
  --on-accent: #262a78;
  --tonal: #44455e;
  --on-tonal: #e1e0f9;
  --surface: rgba(31, 31, 43, .70);
  --surface-filter: blur(18px);
  --surface-edge: none;
  --surface-shadow: none;
  --bar: rgba(19, 19, 28, .72);
  --r-card: 24px;
  --r-button: 24px;
  --button-h: 48px;
  --button-weight: 500;
  --ease: cubic-bezier(.05, .7, .1, 1);
  --spring: cubic-bezier(.42, 1.67, .21, .9);
  --h1: 400 clamp(44px, 7vw, 64px) / 1.1 var(--display);
  --h2: 400 clamp(26px, 3.2vw, 32px) / 1.25 var(--display);
}
:root[data-ui="winui"] {
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Yu Gothic UI", "Meiryo UI", sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", "Yu Gothic UI", sans-serif;
  --text: #fff;
  --text-2: rgba(255, 255, 255, .786);
  --text-3: rgba(255, 255, 255, .544);
  --accent: #a6abff;
  --on-accent: #000;
  --tonal: rgba(255, 255, 255, .0605);
  --on-tonal: #fff;
  /* Acrylic: tinted, blurred, lightly saturated */
  --surface: rgba(36, 36, 52, .62);
  --surface-filter: blur(30px) saturate(125%);
  --surface-edge: inset 0 0 0 1px rgba(255, 255, 255, .0698), inset 0 1px 0 rgba(255, 255, 255, .05);
  --surface-shadow: 0 8px 16px rgba(0, 0, 0, .26);
  --bar: rgba(28, 28, 40, .74);
  --r-card: 8px;
  --r-button: 4px;
  --button-h: 36px;
  --button-weight: 600;
  --ease: cubic-bezier(0, 0, 0, 1);
  --spring: cubic-bezier(0, 0, 0, 1);
  --h1: 600 clamp(40px, 6vw, 60px) / 1.1 var(--display);
  --h2: 600 clamp(24px, 3vw, 28px) / 1.3 var(--display);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--sky-1); }
body {
  font: 400 16px/1.7 var(--font);
  font-feature-settings: "palt";
  color: var(--text);
  /* Transparent so the fixed sky (z-index -1) shows; the root carries the colour. */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[data-ui="material"] body, [data-ui="winui"] body { font-feature-settings: normal; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- the night sky behind everything ---------- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% -8%, rgba(142, 146, 255, .34), transparent 70%),
    radial-gradient(45% 40% at 88% 30%, rgba(204, 41, 64, .13), transparent 70%),
    radial-gradient(55% 45% at 8% 70%, rgba(91, 95, 214, .18), transparent 70%),
    linear-gradient(180deg, var(--sky-2), var(--sky-1) 60%); }
/* Three star layers; site.js moves them with scrolling and time (nearer is faster). */
.stars { position: absolute; top: -760px; left: -760px; right: 0; bottom: 0; background-repeat: repeat; will-change: transform; }
.stars.far {
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fffb, transparent), radial-gradient(1.5px 1.5px at 160px 80px, #fff9, transparent),
    radial-gradient(1.5px 1.5px at 90px 190px, #dfe1ff, transparent), radial-gradient(1.2px 1.2px at 230px 140px, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 300px 260px, #fffa, transparent), radial-gradient(1.2px 1.2px at 40px 300px, #fff8, transparent);
  background-size: 340px 340px; opacity: .75; }
.stars.mid {
  background-image:
    radial-gradient(2.1px 2.1px at 70px 110px, #fff, transparent), radial-gradient(1.8px 1.8px at 250px 40px, #fffc, transparent),
    radial-gradient(2.1px 2.1px at 420px 330px, #dfe1ff, transparent), radial-gradient(1.7px 1.7px at 330px 470px, #fff, transparent),
    radial-gradient(2.0px 2.0px at 140px 400px, #ffe9b8, transparent);
  background-size: 520px 520px; opacity: .95; }
.stars.near {
  background-image:
    radial-gradient(3.0px 3.0px at 120px 160px, #fff, transparent), radial-gradient(2.7px 2.7px at 560px 90px, #ffe9b8, transparent),
    radial-gradient(3.3px 3.3px at 380px 520px, #dfe1ff, transparent), radial-gradient(2.4px 2.4px at 660px 640px, #fff, transparent);
  background-size: 760px 760px; animation: twinkle-field 6s ease-in-out infinite; }
@keyframes twinkle-field { 0%, 100% { opacity: .95; } 50% { opacity: .4; } }

/* Sections rise in as they scroll into view. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- shared glass surface ---------- */
.glass, .features article, .platform, details.files, .cards li, .thanks, .faq-list {
  background: var(--surface);
  -webkit-backdrop-filter: var(--surface-filter);
  backdrop-filter: var(--surface-filter);
  box-shadow: var(--surface-edge), var(--surface-shadow);
  border-radius: var(--r-card);
}

/* ---------- top bar ---------- */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 40px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 17px; }
.brand img { width: 28px; height: 28px; }
.nav nav { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.nav nav > a:not(.star-pill), .lang { text-decoration: none; color: var(--text-2); padding: 6px 12px; border-radius: var(--r-button); }
.nav nav > a:not(.star-pill):hover, .lang:hover { color: var(--text); background: var(--tonal); }
.lang { font: inherit; font-size: 13px; border: 0; background: none; cursor: pointer; }
[data-ui="liquid"] .nav { top: 12px; width: min(1060px, calc(100% - 24px)); margin: 12px auto 0; border-radius: 999px; padding: 6px 8px 6px 16px;
  background: var(--bar); -webkit-backdrop-filter: var(--surface-filter); backdrop-filter: var(--surface-filter);
  box-shadow: var(--surface-edge), 0 12px 32px rgba(0, 0, 0, .32); }
[data-ui="material"] .nav { min-height: 64px; background: var(--bar); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
[data-ui="material"] .brand { font-weight: 400; font-size: 22px; }
[data-ui="winui"] .nav { min-height: 48px; padding-block: 6px; background: var(--bar); -webkit-backdrop-filter: blur(30px) saturate(125%); backdrop-filter: blur(30px) saturate(125%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3); }
[data-ui="winui"] .brand { font-weight: 600; font-size: 14px; }
[data-ui="winui"] .brand img { width: 20px; height: 20px; }

main { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
section { padding: clamp(48px, 8vw, 92px) 0; }
h2 { font: var(--h2); margin-bottom: 18px; text-align: center; text-wrap: balance; }
.muted { color: var(--text-2); text-align: center; }

/* ---------- buttons ---------- */
.button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none;
  min-height: var(--button-h); padding: 0 22px; border-radius: var(--r-button); border: 0; cursor: pointer;
  font: var(--button-weight) 15px/1.3 var(--font); color: var(--on-tonal); background: var(--tonal);
  position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.button.primary { background: var(--accent); color: var(--on-accent); }
.button.big { width: 100%; padding: 12px 20px; font-size: 17px; }
.button small { font-weight: 500; font-size: 12px; opacity: .78; word-break: break-all; }
[data-ui="liquid"] .button { transition: transform .35s var(--spring), background .3s; }
[data-ui="liquid"] .button:hover { transform: scale(1.03); }
[data-ui="liquid"] .button:active { transform: scale(.97); }
[data-ui="liquid"] .button:not(.primary) { background: var(--bar); -webkit-backdrop-filter: var(--surface-filter); backdrop-filter: var(--surface-filter); box-shadow: var(--surface-edge); }
[data-ui="material"] .button { transition: border-radius .35s var(--spring); }
[data-ui="material"] .button:active { border-radius: 12px; }
[data-ui="material"] .button::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .2s; }
[data-ui="material"] .button:hover::before { opacity: .08; }
[data-ui="winui"] .button { font-size: 14px; transition: background .083s; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .0698), inset 0 1px 0 rgba(255, 255, 255, .0465); }
[data-ui="winui"] .button:hover { background: rgba(255, 255, 255, .0837); }
[data-ui="winui"] .button.primary { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14); }
[data-ui="winui"] .button.primary:hover { background: #b8bcff; }
[data-ui="winui"] .button.primary:active { background: #9599e6; color: rgba(0, 0, 0, .6); }

/* ---------- hero ---------- */
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: clamp(40px, 7vw, 80px); }
.hero-icon { width: clamp(92px, 12vw, 124px); filter: drop-shadow(0 18px 40px rgba(60, 64, 200, .5)); }
.hero h1 { font: var(--h1); letter-spacing: .01em; }
.tagline { font-size: clamp(18px, 2.6vw, 24px); font-weight: 700; text-wrap: balance; }
[data-ui="material"] .tagline { font-weight: 500; }
.lead { color: var(--text-2); font-size: clamp(15px, 1.9vw, 17px); text-wrap: pretty; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.promo { width: min(100%, 900px); margin-top: 30px; border-radius: var(--r-card); background: #000;
  box-shadow: var(--surface-edge), 0 30px 80px rgba(0, 0, 0, .5); }

/* ---------- features ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding-top: 24px; }
.features article { padding: 20px 22px; }
.features h3 { font-size: 17px; margin-bottom: 6px; }
.features h3::before { content: "★ "; color: var(--gold); }
.features p { color: var(--text-2); font-size: 14px; }

/* ---------- download ---------- */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 26px; }
.platform { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.platform.detected { box-shadow: var(--surface-edge), 0 0 0 1.5px var(--violet), 0 20px 60px rgba(90, 96, 255, .25); }
.platform:not(.detected) .button.primary { background: var(--tonal); color: var(--on-tonal); }
.platforms.none .platform .button.primary { background: var(--accent); color: var(--on-accent); }
.os { font: var(--h2); font-size: 24px; display: flex; align-items: center; gap: 10px; }
.os::after { content: attr(data-badge); display: none; font: 700 12px/1.6 var(--font); color: #1a1405; background: var(--gold); border-radius: 999px; padding: 1px 10px; }
.platform.detected .os::after { display: inline-block; }
.req { color: var(--text-2); font-size: 13px; margin-top: -8px; }
.steps { padding-left: 1.3em; display: grid; gap: 6px; font-size: 14px; }
.steps li::marker { color: var(--gold); font-weight: 800; }
.platform details summary { cursor: pointer; color: var(--text-2); font-size: 14px; }
.platform video { width: 100%; margin-top: 10px; border-radius: calc(var(--r-card) / 2); }
.note { font-size: 12px; color: var(--text-2); }
.notice { margin-top: 18px; text-align: center; padding: 12px; border-radius: var(--r-card); background: rgba(255, 210, 122, .10); color: var(--gold); }

details.files { margin-top: 18px; padding: 14px 18px; }
details.files summary { cursor: pointer; font-weight: 700; }
details.files > p.muted { text-align: left; margin: 10px 0; font-size: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 8px; border-top: 1px solid rgba(255, 255, 255, .08); vertical-align: top; }
th { color: var(--text-2); font-weight: 600; }
td code { font: 12.5px/1.5 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; word-break: break-all; }
td .tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
td .tag.rec { background: rgba(255, 210, 122, .2); color: var(--gold); }
.plain { list-style: none; display: grid; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--text-2); }

/* ---------- safety & faq ---------- */
.cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cards li { padding: 18px 20px; display: grid; gap: 4px; }
.cards b { font-size: 16px; }
.cards span { color: var(--text-2); font-size: 14px; }
.faq { max-width: 780px; margin: 0 auto; }
.faq-list { padding: 4px 20px; }
.faq details { padding: 14px 2px; }
.faq details + details { border-top: 1px solid rgba(255, 255, 255, .08); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { color: var(--text-2); margin-top: 6px; font-size: 14.5px; }

/* ---------- footer & skin switch ---------- */
.footer { display: grid; gap: 18px; justify-items: center; padding: 40px 16px 52px; color: var(--text-2); font-size: 13px; }
.footer .links { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.footer a { color: var(--text-2); }
.switch { display: grid; gap: 8px; justify-items: center; }
.seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 3px; border-radius: var(--r-button);
  background: var(--surface); -webkit-backdrop-filter: var(--surface-filter); backdrop-filter: var(--surface-filter); box-shadow: var(--surface-edge); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 6px 14px; border-radius: var(--r-button); font-size: 13px; color: var(--text-2); transition: background .25s, color .25s; }
.seg input:checked + span { background: var(--tonal); color: var(--text); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }
/* Material 3 segmented button: a round outlined pill, square segments inside. */
[data-ui="material"] .seg { padding: 0; gap: 0; border-radius: 999px; overflow: hidden; background: rgba(19, 19, 28, .55);
  box-shadow: inset 0 0 0 1px #918f9a; }
[data-ui="material"] .seg span { border-radius: 0; padding: 10px 22px; font-size: 14px; font-weight: 500; color: var(--text); }
[data-ui="material"] .seg input:checked + span { background: #44455e; color: #e1e0f9; }
[data-ui="winui"] .seg input:checked + span { background: rgba(255, 255, 255, .0837); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 4px; }

/* =====================================================================
   Stars on GitHub: an invitation, never a gate.
   ===================================================================== */
.star-pill { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text) !important;
  padding: 5px 13px; border-radius: var(--r-button); background: rgba(255, 210, 122, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 122, .42); }
.star-pill:hover { background: rgba(255, 210, 122, .2); }
.star-glyph { color: var(--gold); transition: transform .4s ease; display: inline-block; }
.star-pill:hover .star-glyph, .star-button:hover .star-glyph { transform: rotate(72deg) scale(1.2); }
.star-count { font-size: 12px; color: var(--gold); padding-left: 6px; border-left: 1px solid rgba(255, 210, 122, .35); }

.constellation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 760px) { .constellation { grid-template-columns: 1fr; text-align: center; } }
.constellation h2 { text-align: left; }
@media (max-width: 760px) { .constellation h2 { text-align: center; } }
.constellation .lead { margin-bottom: 20px; }
.gemini { width: 100%; max-width: 440px; justify-self: center; overflow: visible; }
.gemini .lines path { fill: none; stroke: rgba(190, 194, 255, .38); stroke-width: 1.4; stroke-dasharray: 4 5; }
.gemini .dots circle { fill: #e9eaff; animation: twinkle 3.2s ease-in-out infinite; }
.gemini .dots circle:nth-child(2n) { animation-delay: 1.1s; }
.gemini .dots circle:nth-child(3n) { animation-delay: 2.2s; }
.gemini .dots .named { fill: #fff; filter: drop-shadow(0 0 6px #a9adff); }
.gemini .dots .gold { fill: var(--gold); filter: drop-shadow(0 0 8px var(--gold)); }
.gemini .label { fill: var(--text-2); font: 700 13px var(--font); text-anchor: middle; letter-spacing: .04em; }
.gemini .label.you { fill: var(--gold); opacity: .55; transition: opacity .4s; }
.gemini .yours circle { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .6; transition: all .5s ease; }
.gemini .yours .halo { opacity: 0; }
.constellation:hover .gemini .yours circle:first-child, .constellation.lit .gemini .yours circle:first-child { fill: var(--gold); stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 10px var(--gold)); }
.constellation:hover .gemini .yours .halo, .constellation.lit .gemini .yours .halo { opacity: .5; stroke-dasharray: none; animation: halo 2s ease-out infinite; }
.constellation:hover .gemini .label.you, .constellation.lit .gemini .label.you { opacity: 1; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes halo { from { r: 8; opacity: .6; } to { r: 26; opacity: 0; } }
.star-button span:first-child { font-size: 16px; }

.thanks { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: min(380px, calc(100vw - 32px)); display: flex; gap: 14px; padding: 18px;
  box-shadow: var(--surface-edge), inset 0 0 0 1px rgba(255, 210, 122, .25), 0 24px 60px rgba(0, 0, 0, .5);
  animation: rise .5s cubic-bezier(.2, .9, .3, 1.2); }
@media (max-width: 520px) { .thanks { right: 16px; left: 16px; width: auto; } }
.thanks[hidden], [hidden] { display: none !important; }
.thanks-star { font-size: 30px; color: var(--gold); line-height: 1; filter: drop-shadow(0 0 10px var(--gold)); animation: spin-in .9s ease; }
.thanks-body { display: grid; gap: 6px; font-size: 14px; }
.thanks-body > span { color: var(--text-2); }
.thanks-actions { display: flex; gap: 8px; margin-top: 6px; }
.thanks-actions .button { min-height: 0; padding: 8px 16px; font-size: 14px; flex-direction: row; }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin-in { from { transform: rotate(-144deg) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* =====================================================================
   First visit: a telescope sweeps the dark from the lower left to the
   upper right, finds Castor and Pollux, then opens onto the page.
   ===================================================================== */
.intro { display: none; }
:root[data-intro="on"] .intro { display: block; position: fixed; inset: 0; z-index: 100; overflow: hidden; }
/* The lens looks at the page's own sky; the page itself appears when it opens. */
.nav, main, .footer { transition: opacity .9s ease; }
:root[data-intro="on"]:not([data-intro-open]) :is(.nav, main, .footer) { opacity: 0; }
:root[data-intro="on"] body { overflow: hidden; }
.intro-twins { position: absolute; left: 78%; top: 26%; width: 0; height: 0; opacity: 0; transition: opacity .8s ease; }
.intro.found .intro-twins { opacity: 1; }
.intro-twins i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.intro-twins .castor { left: -34px; top: -10px; width: 12px; height: 12px; background: #fff; box-shadow: 0 0 18px 4px rgba(169, 173, 255, .9); }
.intro-twins .pollux { left: 30px; top: 8px; width: 14px; height: 14px; background: var(--gold); box-shadow: 0 0 22px 6px rgba(255, 210, 122, .85); }
.intro-twins b { position: absolute; font: 600 12px/1 var(--font); letter-spacing: .12em; color: rgba(235, 235, 245, .75); white-space: nowrap; transform: translateX(-50%); }
.intro-twins .castor-label { left: -34px; top: -38px; }
.intro-twins .pollux-label { left: 30px; top: 26px; }
.intro-dark { position: absolute; inset: 0; background: #010208;
  -webkit-mask: radial-gradient(circle var(--r, 0px) at var(--x, 15%) var(--y, 80%), transparent 97%, #000 100%);
  mask: radial-gradient(circle var(--r, 0px) at var(--x, 15%) var(--y, 80%), transparent 97%, #000 100%); }
.intro-lens { position: absolute; left: var(--x, 15%); top: var(--y, 80%); width: calc(var(--r, 0px) * 2); height: calc(var(--r, 0px) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 72%, rgba(0, 0, 0, .55) 100%), radial-gradient(40% 25% at 32% 18%, rgba(255, 255, 255, .10), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 2px 2px 0 rgba(150, 176, 255, .35), inset -2px -2px 0 rgba(255, 192, 140, .25); }
.intro-lens::before, .intro-lens::after { content: ""; position: absolute; background: rgba(200, 210, 255, .16); }
.intro-lens::before { left: 50%; top: 18%; bottom: 18%; width: 1px; }
.intro-lens::after { top: 50%; left: 18%; right: 18%; height: 1px; }
.intro.open .intro-lens { opacity: 0; transition: opacity .6s ease; }
.intro-skip { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; cursor: pointer;
  font: 600 14px/1 var(--font); color: rgba(235, 235, 245, .82); padding: 9px 16px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.intro-skip:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.intro.leaving { opacity: 0; transition: opacity .55s ease; }

/* =====================================================================
   After a star: the sky brightens once (a flare and a shooting star),
   and stays a little brighter, with "your star" lit, from then on.
   ===================================================================== */
.sky { transition: filter 1.2s ease; }
:root[data-starred] .sky { filter: brightness(1.18) saturate(1.1); }
:root[data-starred] .stars.far { opacity: .95; }
.sky.flare { animation: flare 2.6s ease-out; }
@keyframes flare { 0% { filter: brightness(1); } 18% { filter: brightness(2.1) saturate(1.3); } 100% { filter: brightness(1.18) saturate(1.1); } }
.sky.flare .stars.near { animation: none; opacity: 1; }
.meteor { position: absolute; top: 12%; left: 78%; width: 180px; height: 2px; opacity: 0; transform: rotate(-32deg);
  background: linear-gradient(90deg, transparent, rgba(255, 233, 184, .9), #fff); border-radius: 2px; filter: drop-shadow(0 0 6px #ffe9b8); }
.sky.flare .meteor { animation: meteor 1.4s ease-in .2s; }
@keyframes meteor { 0% { opacity: 0; transform: translate(0, 0) rotate(-32deg) scaleX(.3); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-520px, 330px) rotate(-32deg) scaleX(1); } }
:root[data-starred] .constellation .gemini .yours circle:first-child { fill: var(--gold); stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 12px var(--gold)); }
:root[data-starred] .constellation .gemini .yours .halo { opacity: .5; stroke-dasharray: none; animation: halo 2s ease-out infinite; }
:root[data-starred] .constellation .gemini .label.you { opacity: 1; }
.gemini .thanks-label { fill: var(--gold); opacity: 0; transition: opacity .6s ease .4s; font-weight: 600; }
:root[data-starred] .gemini .thanks-label { opacity: .85; }
:root[data-starred] .star-pill .star-glyph { text-shadow: 0 0 10px var(--gold), 0 0 20px rgba(255, 210, 122, .6); }
:root[data-starred] .gemini .dots circle { filter: drop-shadow(0 0 3px rgba(223, 225, 255, .8)); }

/* Browsers without backdrop-filter get an opaque version of the same tint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .features article, .platform, details.files, .cards li, .thanks, .faq-list, .nav, .seg { background: rgba(24, 25, 52, .96); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }