/* Eclipse Toggle v2 — the whole frame is a website; a big eclipse switch flips it from day to night with a
   shockwave that spreads out of the switch. Three looks (?look=aurora|acid|holo), each with a day and a night. */
:root { --sans: 'Geist', -apple-system, system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; }

/* ---- 1. the theme tokens: every colour on the page comes from here ----
   <html> carries data-look and data-theme. While the theme switches, the reveal layer (a copy of the page, app.js)
   carries the other data-theme, so both rules have a descendant form. */

/* AURORA NOIR — night: near-black with living aurora; day: a luminous dawn with the aurora dimmed into sun haze */
:is([data-look="aurora"][data-theme="dark"], [data-look="aurora"] [data-theme="dark"]) {
  color-scheme: dark;
  --bg: radial-gradient(120% 60% at 50% 0%, #140A2A 0%, #05030A 62%);
  --base: #05030A;
  --b1: #7B2FFF; --b2: #00F0C8; --b3: #FF2BD6; --b4: #3A1BFF; --blob-o: .9;
  --ink: #F6F1FF; --ink-2: rgba(226, 214, 255, .62);
  --em: linear-gradient(90deg, #00F0C8, #9C7BFF 55%, #FF2BD6);
  --good: linear-gradient(180deg, #FFFFFF, #FFFFFF);
  --word: linear-gradient(180deg, #F2FFFC 8%, #9EF7E6 34%, #A58BFF 62%, #FF4FDF 96%);
  --word-fx: drop-shadow(0 0 18px rgba(123, 47, 255, .55));
  --chip: #00F0C8; --chip-ink: #05030A;
  --pill: rgba(255, 255, 255, .07); --pill-edge: rgba(255, 255, 255, .16); --pill-ink: #F6F1FF; --pill-dim: rgba(226, 214, 255, .55);
  --pill-icon: linear-gradient(135deg, #00F0C8, #7B2FFF); --pill-icon-ink: #05030A; --pill-shadow: rgba(0, 0, 0, .6);
  --stars: 1; --speck: #EDE6FF; --lockup: none; --ring: rgba(255, 255, 255, .7); --focus: #00F0C8;
  --floor: rgba(123, 47, 255, .55);
}
:is([data-look="aurora"][data-theme="light"], [data-look="aurora"] [data-theme="light"]) {
  color-scheme: light;
  --bg: linear-gradient(180deg, #FFC39B 0%, #FFA88C 30%, #FF8E8E 52%, #E59ACB 76%, #C3A3FF 100%);
  --base: #FFB38A;
  --b1: #FFF4D2; --b2: #FFD36E; --b3: #FF6FA0; --b4: #FFFFFF; --blob-o: .6;
  --ink: #2A0A2C; --ink-2: rgba(42, 10, 44, .64);
  --em: linear-gradient(90deg, #B0125F, #7A1FA8);
  --good: linear-gradient(180deg, #2A0A2C, #2A0A2C);
  --word: linear-gradient(180deg, #6A18A8 6%, #C4126C 52%, #FF4A1C 98%);
  --word-fx: drop-shadow(0 10px 22px rgba(255, 240, 210, .55));
  --chip: #2A0A2C; --chip-ink: #FFD6B8;
  --pill: rgba(255, 255, 255, .5); --pill-edge: rgba(255, 255, 255, .7); --pill-ink: #2A0A2C; --pill-dim: rgba(42, 10, 44, .58);
  --pill-icon: linear-gradient(135deg, #2A0A2C, #7A1FA8); --pill-icon-ink: #FFD6B8; --pill-shadow: rgba(120, 30, 60, .35);
  --stars: 0; --speck: #FFFFFF; --lockup: invert(1) brightness(.18) sepia(.4) hue-rotate(250deg); --ring: #2A0A2C; --focus: #2A0A2C;
  --floor: rgba(255, 244, 214, .85);
}

/* CANDY ACID — day: tangerine with acid yellow; night: electric ultraviolet into hot pink. A jelly knob. */
:is([data-look="acid"][data-theme="dark"], [data-look="acid"] [data-theme="dark"]) {
  color-scheme: dark;
  --bg: linear-gradient(180deg, #2A00D8 0%, #3A00FF 26%, #7A00F0 56%, #D012C4 80%, #FF2E9A 100%);
  --base: #3A00FF;
  --b1: #FF2E9A; --b2: #00E5FF; --b3: #E8FF3A; --b4: #8A00FF; --blob-o: .75;
  --ink: #FFFFFF; --ink-2: rgba(255, 255, 255, .74);
  --em: linear-gradient(90deg, #E8FF3A, #E8FF3A);
  --good: linear-gradient(180deg, #FFFFFF, #FFFFFF);
  --word: linear-gradient(180deg, #FFFFFF 20%, #FFE0F2 50%, #E8FF3A 88%);
  --word-fx: drop-shadow(0 5px 0 #16005E);
  --chip: #E8FF3A; --chip-ink: #16005E;
  --pill: #FFFFFF; --pill-edge: rgba(255, 255, 255, 1); --pill-ink: #16005E; --pill-dim: rgba(22, 0, 94, .56);
  --pill-icon: linear-gradient(135deg, #FF2E9A, #FF2E9A); --pill-icon-ink: #FFFFFF; --pill-shadow: rgba(22, 0, 94, .55);
  --stars: 1; --speck: #FFE3F4; --lockup: none; --ring: #FFFFFF; --focus: #E8FF3A;
  --floor: rgba(255, 46, 154, .85);
}
:is([data-look="acid"][data-theme="light"], [data-look="acid"] [data-theme="light"]) {
  color-scheme: light;
  --bg: linear-gradient(180deg, #FF7A2E 0%, #FF5A1F 42%, #FF4A12 72%, #F2360A 100%);
  --base: #FF5A1F;
  --b1: #E8FF3A; --b2: #FFD12E; --b3: #FF2E9A; --b4: #FFF3A0; --blob-o: .62;
  --ink: #140400; --ink-2: rgba(20, 4, 0, .66);
  --em: linear-gradient(90deg, #FFFFFF, #FFFFFF);
  --good: linear-gradient(180deg, #140400, #140400);
  --word: linear-gradient(180deg, #F4FF7A 10%, #E8FF3A 55%, #CDF000 95%);
  --word-fx: drop-shadow(0 5px 0 #140400);
  --chip: #E8FF3A; --chip-ink: #140400;
  --pill: #140400; --pill-edge: #140400; --pill-ink: #FFFFFF; --pill-dim: rgba(255, 255, 255, .6);
  --pill-icon: linear-gradient(135deg, #E8FF3A, #E8FF3A); --pill-icon-ink: #140400; --pill-shadow: rgba(80, 10, 0, .5);
  --stars: 0; --speck: #FFFFFF; --lockup: invert(1) brightness(.08); --ring: #140400; --focus: #140400;
  --floor: rgba(232, 255, 58, .8);
}

/* HOLOGRAPHIC CHROME — night: graphite with holo foil; day: pearlescent white-silver with holo glints */
:is([data-look="holo"][data-theme="dark"], [data-look="holo"] [data-theme="dark"]) {
  color-scheme: dark;
  --bg: radial-gradient(90% 55% at 50% 52%, #1C1E26 0%, #0E0F13 70%);
  --base: #0E0F13;
  --b1: #FF8AD8; --b2: #7DE9FF; --b3: #B8A2FF; --b4: #FFE58A; --blob-o: .26;
  --ink: #F2F3F7; --ink-2: rgba(222, 226, 236, .56);
  --em: linear-gradient(90deg, #FF9AD5, #FFD76E 25%, #9DFFB0 50%, #7FD8FF 75%, #C29CFF);
  --good: linear-gradient(180deg, #FFFFFF 0%, #D9DDE6 44%, #7C8190 52%, #F0F2F7 100%);
  --word: linear-gradient(100deg, #FF8FD0 0%, #FFD36A 22%, #A6FFB4 44%, #7FD8FF 68%, #B89BFF 88%, #FF8FD0 100%);
  --word-fx: drop-shadow(0 0 16px rgba(160, 200, 255, .28));
  --chip: linear-gradient(90deg, #FF9AD5, #FFD76E, #9DFFB0, #7FD8FF, #C29CFF); --chip-ink: #0E0F13;
  --pill: rgba(255, 255, 255, .06); --pill-edge: rgba(255, 255, 255, .16); --pill-ink: #F2F3F7; --pill-dim: rgba(222, 226, 236, .5);
  --pill-icon: conic-gradient(from 30deg, #FF9AD5, #FFD76E, #9DFFB0, #7FD8FF, #C29CFF, #FF9AD5); --pill-icon-ink: #0E0F13; --pill-shadow: rgba(0, 0, 0, .6);
  --stars: .8; --speck: #DDE6FF; --lockup: none; --ring: rgba(255, 255, 255, .7); --focus: #9DE8FF;
  --floor: rgba(150, 200, 255, .32);
}
:is([data-look="holo"][data-theme="light"], [data-look="holo"] [data-theme="light"]) {
  color-scheme: light;
  --bg: linear-gradient(180deg, #FAFAFC 0%, #EEEFF4 46%, #DFE2EA 100%);
  --base: #EEEFF4;
  --b1: #FFC2E6; --b2: #B6F1FF; --b3: #D9CCFF; --b4: #FFF0B8; --blob-o: .85;
  --ink: #15161B; --ink-2: rgba(21, 22, 27, .56);
  --em: linear-gradient(90deg, #D6337F, #E88A1A 30%, #1E9E62 55%, #1C86CF 78%, #6B45DB);
  --good: linear-gradient(180deg, #3A3E48 0%, #6A6F7C 46%, #111217 54%, #464B57 100%);
  --word: linear-gradient(100deg, #D92F86 0%, #EE8420 24%, #20A05E 46%, #1A8AD2 70%, #6E45E0 90%, #D92F86 100%);
  --word-fx: drop-shadow(0 8px 16px rgba(120, 130, 170, .25));
  --chip: #15161B; --chip-ink: #FFFFFF;
  --pill: #15161B; --pill-edge: #15161B; --pill-ink: #FFFFFF; --pill-dim: rgba(255, 255, 255, .55);
  --pill-icon: conic-gradient(from 30deg, #FF9AD5, #FFD76E, #9DFFB0, #7FD8FF, #C29CFF, #FF9AD5); --pill-icon-ink: #15161B; --pill-shadow: rgba(40, 44, 60, .35);
  --stars: 0; --speck: #FFFFFF; --lockup: invert(1) brightness(.12); --ring: #15161B; --focus: #15161B;
  --floor: rgba(255, 255, 255, .95);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--base);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; overflow: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 2. the stage, the frame, the ambient sky ---- */
.stage { position: relative; height: 100dvh; display: grid; place-items: center; overflow: hidden; color: var(--ink); background: var(--bg), var(--base); }
/* the reveal: an exact copy of the stage in the other theme, fixed on top, clipped to the growing wave.
   The wrapper carries the clip; the copy is promoted to its own layer so the clip never repaints it. */
.reveal { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.stage.is-copy { position: absolute; inset: 0; height: auto; will-change: transform; }
.frame { position: relative; width: 432px; height: 768px; flex: none; transform: scale(calc(var(--k, 1) * var(--bump, 1))); }
.sky { position: absolute; inset: 0; pointer-events: none; }
/* each blob is a big soft ellipse of light; app.js drifts and breathes it (deterministic, from the studio clock) */
.blob { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: var(--blob-o); will-change: transform, opacity; }
.b1 { width: 560px; height: 300px; background: radial-gradient(closest-side, var(--b1), color-mix(in srgb, var(--b1) 55%, transparent) 30%, color-mix(in srgb, var(--b1) 18%, transparent) 64%, transparent); }
.b2 { width: 520px; height: 180px; background: radial-gradient(closest-side, var(--b2), color-mix(in srgb, var(--b2) 55%, transparent) 28%, color-mix(in srgb, var(--b2) 16%, transparent) 62%, transparent); }
.b3 { width: 440px; height: 260px; background: radial-gradient(closest-side, var(--b3), color-mix(in srgb, var(--b3) 55%, transparent) 30%, color-mix(in srgb, var(--b3) 16%, transparent) 64%, transparent); }
.b4 { width: 380px; height: 380px; background: radial-gradient(closest-side, var(--b4), color-mix(in srgb, var(--b4) 50%, transparent) 28%, color-mix(in srgb, var(--b4) 14%, transparent) 62%, transparent); }
.specks { position: absolute; inset: 0; opacity: var(--stars); pointer-events: none; }
.specks i { position: absolute; border-radius: 50%; background: var(--speck); }
.specks i.tw { box-shadow: 0 0 6px 1px var(--speck); will-change: opacity; }

/* ---- 3. the words: the series title, then the site's giant greeting ---- */
.title { position: absolute; top: 38px; left: 0; right: 0; text-align: center; }
.series {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2);
}
.series b { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: var(--chip-ink); background: var(--chip); }
.title h1 { margin: 0; font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.title h1 em {
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.12em; letter-spacing: -.02em; padding: 0 .08em;
  background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hint { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }

.hero { position: absolute; inset: 0; }
.greeting { position: absolute; top: 150px; left: 0; right: 0; margin: 0; text-align: center; font-weight: 700; }
.good {
  display: block; font-size: 70px; line-height: 1; letter-spacing: -.06em; padding: 0 .1em;
  background: var(--good); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-look="acid"] .good { font-weight: 900; font-size: 74px; }
[data-look="holo"] .good { font-weight: 600; }
/* the changing word: letter slots (app.js). Each slot holds the day letter and the night letter on a small drum. */
.word {
  display: block; height: 108px; margin-top: -8px; white-space: nowrap; perspective: 520px;
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 102px; line-height: 108px; letter-spacing: -.01em;
  filter: var(--word-fx);
}
[data-look="acid"] .word { font-family: var(--sans); font-style: normal; font-weight: 900; font-size: 86px; letter-spacing: -.055em; margin-top: -2px; }
.slot { position: relative; display: inline-block; height: 108px; vertical-align: top; }
.face {
  position: absolute; left: -.16em; top: -.08em; padding: .08em .16em .24em; transform-origin: 50% 44% -.3em; backface-visibility: hidden;
  background: var(--word); background-size: var(--ww, 400px) 100%; background-position: calc(.16em - var(--x, 0px)) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform, opacity;
}
.measure { position: absolute; visibility: hidden; white-space: pre; }
.lede { position: absolute; top: 330px; left: 0; right: 0; margin: 0; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); }
/* the line for the other theme is hidden. Through a token, so the nearest [data-theme] wins: the new-theme copy that
   the reveal lays over the page shows its own line, not neither */
[data-theme="light"] { --show-day: inline; --show-night: none; }
[data-theme="dark"] { --show-day: none; --show-night: inline; }
.for-day { display: var(--show-day); } .for-night { display: var(--show-night); }

/* ---- 4. THE COMPONENT: the eclipse switch, 240 × 120, the hero of the page ----
   It draws itself from its own state (app.js), not from the theme, so both copies on screen stay in step. */
.switch-wrap { position: absolute; left: 96px; top: 382px; width: 240px; height: 120px; }
.floor { position: absolute; left: -90px; right: -90px; top: 40px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, var(--floor), transparent); pointer-events: none; will-change: transform, opacity; }
.eclipse {
  position: absolute; inset: 0; width: 240px; height: 120px; padding: 0; border: 0; border-radius: 60px;
  background: none; cursor: pointer; touch-action: manipulation; color: inherit;
}
.eclipse:focus-visible, .eclipse.is-focus { outline: 3px solid var(--focus); outline-offset: 7px; }
.track { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; }
.track > span { position: absolute; inset: 0; border-radius: inherit; }
.foil { display: none; }
.rim { position: absolute; inset: 0; border-radius: 60px; pointer-events: none; }
.n-in, .n-out, .halo, .corona, .bead, .streak, .moonlit { will-change: opacity, transform; }   /* they fade on the compositor */
.stars i { position: absolute; will-change: opacity, transform; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px rgba(255, 255, 255, .9); }
.stars i.sparkle { background: none; box-shadow: none; }
.stars i.sparkle::before, .stars i.sparkle::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 5px rgba(255, 255, 255, .9); }
.stars i.sparkle::before { width: 2px; height: 100%; transform: translate(-50%, -50%); }
.stars i.sparkle::after { width: 100%; height: 2px; transform: translate(-50%, -50%); }

/* the knob: 100 × 100, 10 px in from the track's edge; everything in it is centred on its centre */
.knob { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; will-change: transform; }
.knob > span { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.lens, .gloss { width: 100px; height: 100px; }
.halo { width: 190px; height: 190px; opacity: 0; }
.corona { width: 250px; height: 250px; opacity: 0; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.rays { width: 0; height: 0; }
.rays i { position: absolute; left: -3px; top: -8px; width: 6px; height: 16px; border-radius: 3px; transform-origin: 50% 50%; }
.disc { width: 56px; height: 56px; overflow: hidden; }
.moon { position: absolute; inset: -1px; border-radius: 50%; }
.moonlit { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.moonlit i { position: absolute; border-radius: 50%; }
.moonlit i:nth-child(1) { left: 10px; top: 16px; width: 20px; height: 15px; }
.moonlit i:nth-child(2) { left: 34px; top: 30px; width: 11px; height: 11px; }
.moonlit i:nth-child(3) { left: 22px; top: 40px; width: 6px; height: 6px; }
.bead { width: 12px; height: 12px; margin-left: -28px; background: #FFFFFF; opacity: 0; }
.streak { width: 340px; height: 5px; margin-left: -28px; border-radius: 3px; opacity: 0; }

/* ---- 4a. aurora: dawn sky / black glass with a neon rim, a white-hot sun, a silver moon lit in neon ---- */
[data-look="aurora"] .sky-day {                /* a dawn sky in the track: lilac above, fire at the horizon */
  background: linear-gradient(180deg, #6D35D8 0%, #B53FB8 38%, #F2517E 68%, #FF9A5C 100%);
  box-shadow: inset 0 4px 12px rgba(60, 0, 80, .5), inset 0 -2px 0 rgba(255, 220, 180, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .45), 0 18px 40px -12px rgba(150, 30, 90, .55);
}
[data-look="aurora"] .sky-night {
  background: linear-gradient(180deg, #07040F 0%, #110828 60%, #1B0D3E 100%);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(160, 130, 255, .25);
}
[data-look="aurora"] .haze { background: radial-gradient(120px 100px at 60px 70px, rgba(255, 250, 225, .95), rgba(255, 200, 120, .55) 40%, rgba(255, 120, 90, .2) 70%, transparent); }
[data-look="aurora"] .ribbon {
  background:
    radial-gradient(80px 22px at 70px 44px, rgba(0, 240, 200, .75), transparent),
    radial-gradient(90px 26px at 40px 78px, rgba(123, 47, 255, .8), transparent),
    radial-gradient(60px 18px at 110px 88px, rgba(255, 43, 214, .55), transparent);
}
[data-look="aurora"] .rim { box-shadow: 0 0 0 1.5px rgba(120, 255, 230, .9), 0 0 16px 2px rgba(0, 240, 200, .55), 0 0 44px 8px rgba(123, 47, 255, .6), 0 0 90px 20px rgba(255, 43, 214, .28); }
[data-look="aurora"] .lens-day {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .4) 55%, rgba(255, 240, 230, .28));
  box-shadow: 0 0 34px 6px rgba(255, 214, 140, .75), 0 10px 24px -4px rgba(160, 40, 70, .45), inset 0 2px 0 rgba(255, 255, 255, .95), inset 0 -4px 10px rgba(255, 140, 120, .35);
}
[data-look="aurora"] .lens-night {
  background: radial-gradient(circle at 36% 28%, rgba(200, 180, 255, .2), rgba(40, 18, 90, .45) 60%, rgba(8, 4, 20, .75));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(0, 240, 200, .55), inset 4px 6px 12px rgba(0, 240, 200, .25), inset -6px -8px 16px rgba(255, 43, 214, .35);
}
[data-look="aurora"] .halo { background: radial-gradient(closest-side, rgba(200, 185, 255, .55), rgba(123, 47, 255, .22) 50%, rgba(0, 240, 200, .08) 72%, transparent); }
[data-look="aurora"] .corona {
  background:
    radial-gradient(closest-side, #FFFFFF 22%, rgba(230, 255, 250, .9) 26%, rgba(140, 255, 235, .45) 38%, rgba(160, 110, 255, .22) 60%, transparent),
    repeating-conic-gradient(from 6deg, rgba(235, 255, 252, .7) 0deg 3deg, transparent 3deg 17deg, rgba(210, 190, 255, .45) 17deg 19deg, transparent 19deg 30deg);
}
[data-look="aurora"] .rays i { background: linear-gradient(180deg, #FFFFFF, #FFD36E 45%, #FF7A59); }
[data-look="aurora"] .disc { --sun: 255, 190, 120; background: radial-gradient(circle at 42% 38%, #FFFFFF 0 16%, #FFF3D0 32%, #FFC764 60%, #FF7A59 100%); }
[data-look="aurora"] .moon { background: radial-gradient(circle at 60% 40%, #1C1238, #0A0616 72%); }
[data-look="aurora"] .moonlit {
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #EDE8FF 36%, #BFB3EC 78%, #9A8BD6 100%);
  box-shadow: inset 5px 3px 6px rgba(0, 240, 200, .55), inset -6px -5px 8px rgba(255, 43, 214, .55);
}
[data-look="aurora"] .moonlit i { background: rgba(130, 110, 200, .32); box-shadow: inset 1.5px 1.5px 2px rgba(80, 60, 150, .45); }
[data-look="aurora"] .gloss { background: radial-gradient(60% 34% at 42% 16%, rgba(255, 255, 255, .55), transparent 70%); }
[data-look="aurora"] .bead { box-shadow: 0 0 8px 4px rgba(255, 255, 255, .95), 0 0 26px 10px rgba(140, 255, 235, .6), 0 0 60px 18px rgba(123, 47, 255, .4); }
[data-look="aurora"] .streak { background: linear-gradient(90deg, transparent, rgba(123, 47, 255, .5) 22%, rgba(140, 255, 235, .9) 42%, #FFFFFF 50%, rgba(140, 255, 235, .9) 58%, rgba(255, 43, 214, .5) 78%, transparent); }

/* ---- 4b. acid: a glossy acid-yellow track, a hot-pink jelly knob (a lime one at night) ---- */
[data-look="acid"] .sky-day {
  background: linear-gradient(180deg, #F8FF9C 0%, #E8FF3A 46%, #C4E400 100%);
  box-shadow: inset 0 5px 10px rgba(90, 100, 0, .45), inset 0 -3px 0 rgba(255, 255, 255, .7), 0 0 0 3px #140400;
}
[data-look="acid"] .sky-night {
  background: linear-gradient(180deg, #12004A 0%, #26009E 55%, #4A00E0 100%);
  box-shadow: inset 0 5px 12px rgba(0, 0, 30, .7), inset 0 0 0 2px rgba(255, 46, 154, .6);
}
[data-look="acid"] .haze { background: radial-gradient(70px 70px at 60px 60px, rgba(255, 255, 255, .9), transparent); }
[data-look="acid"] .ribbon { background: radial-gradient(70px 30px at 60px 80px, rgba(255, 46, 154, .7), transparent), radial-gradient(60px 20px at 90px 30px, rgba(0, 229, 255, .5), transparent); }
[data-look="acid"] .rim { box-shadow: 0 0 0 3px #FF2E9A, 0 0 26px 4px rgba(255, 46, 154, .8), 0 0 70px 14px rgba(232, 255, 58, .3); }
[data-look="acid"] .lens-day {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, 0) 15%),
    radial-gradient(circle at 70% 84%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 48% 42%, #FF9BD0 0%, #FF2E9A 55%, #B8005E 100%);
  box-shadow: 0 12px 20px -6px rgba(90, 0, 40, .7), 0 0 0 3px #140400, inset 0 -8px 16px rgba(110, 0, 50, .5), inset 0 6px 12px rgba(255, 255, 255, .35);
}
[data-look="acid"] .lens-night {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, 0) 15%),
    radial-gradient(circle at 70% 84%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 48% 42%, #FAFFB0 0%, #E8FF3A 55%, #9DBF00 100%);
  box-shadow: 0 12px 24px -4px rgba(10, 0, 60, .8), inset 0 -8px 16px rgba(90, 110, 0, .5), inset 0 6px 12px rgba(255, 255, 255, .4), 0 0 30px rgba(232, 255, 58, .45);
}
[data-look="acid"] .halo { background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(232, 255, 58, .25) 50%, transparent); }
[data-look="acid"] .corona {
  background:
    radial-gradient(closest-side, #FFFFFF 22%, rgba(255, 250, 180, .9) 27%, rgba(255, 46, 154, .45) 42%, rgba(0, 229, 255, .2) 62%, transparent),
    repeating-conic-gradient(from 4deg, rgba(255, 255, 200, .8) 0deg 5deg, transparent 5deg 16deg, rgba(255, 90, 180, .6) 16deg 19deg, transparent 19deg 32deg);
}
[data-look="acid"] .rays i { background: linear-gradient(180deg, #FFFFFF, #FFF36A 50%, #FFB800); width: 8px; left: -4px; border-radius: 4px; }
[data-look="acid"] .disc { --sun: 255, 240, 120; background: radial-gradient(circle at 40% 35%, #FFFFFF 0 20%, #FFF7A8 44%, #FFE02E 74%, #FFB000); }
[data-look="acid"] .moon { background: radial-gradient(circle at 60% 40%, #5A00D8, #22006E 74%); }
[data-look="acid"] .moonlit { background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #FFF0FA 40%, #FFB6E0 80%, #FF7EC4 100%); box-shadow: inset -4px -5px 8px rgba(180, 0, 100, .35); }
[data-look="acid"] .moonlit i { background: rgba(255, 90, 170, .3); }
[data-look="acid"] .gloss { background: radial-gradient(40% 16% at 40% 13%, rgba(255, 255, 255, .7), transparent 70%); }
[data-look="acid"] .bead { box-shadow: 0 0 8px 4px #FFFFFF, 0 0 24px 10px rgba(255, 255, 120, .8), 0 0 60px 18px rgba(255, 46, 154, .55); }
[data-look="acid"] .streak { height: 7px; background: linear-gradient(90deg, transparent, rgba(255, 46, 154, .6) 22%, rgba(232, 255, 58, .95) 42%, #FFFFFF 50%, rgba(232, 255, 58, .95) 58%, rgba(0, 229, 255, .6) 78%, transparent); }

/* ---- 4c. holo: a holographic foil track (its angle follows the knob), a crystal lens, a prism sun, a chrome moon ---- */
[data-look="holo"] .foil {
  display: block; z-index: -1;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .55) var(--sheen, 40%), transparent calc(var(--sheen, 40%) + 18%)),
    conic-gradient(from var(--foil, 0deg) at 50% 50%, #FF9AD5, #FFD76E, #B8FF9A, #7FE8FF, #9FA8FF, #E59BFF, #FF9AD5);
}
[data-look="holo"] .sky-day { background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .1)); box-shadow: inset 0 3px 8px rgba(40, 50, 80, .3), inset 0 0 0 1.5px rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(255, 255, 255, .8); }
[data-look="holo"] .sky-night { background: linear-gradient(180deg, rgba(14, 15, 19, .88), rgba(14, 15, 19, .42) 70%, rgba(14, 15, 19, .3)); box-shadow: inset 0 4px 12px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
[data-look="holo"] .haze { background: radial-gradient(70px 70px at 60px 60px, rgba(255, 255, 255, .8), transparent); }
[data-look="holo"] .rim { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 30px 2px rgba(127, 216, 255, .35), 0 0 70px 10px rgba(255, 154, 213, .18); }
[data-look="holo"] .lens-day, [data-look="holo"] .lens-night {
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .18) 52%, rgba(255, 255, 255, .06));
  box-shadow: 0 12px 26px -6px rgba(20, 24, 40, .5), inset 3px 0 5px rgba(255, 110, 200, .55), inset -3px 0 5px rgba(90, 210, 255, .6), inset 0 -3px 6px rgba(255, 220, 110, .5), inset 0 2px 0 rgba(255, 255, 255, .95);
}
[data-look="holo"] .lens-night { background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .35), rgba(20, 22, 30, .55) 55%, rgba(8, 9, 12, .8)); }
[data-look="holo"] .halo { background: radial-gradient(closest-side, rgba(230, 236, 255, .5), rgba(150, 200, 255, .18) 50%, rgba(255, 150, 220, .08) 70%, transparent); }
[data-look="holo"] .corona {
  background:
    radial-gradient(closest-side, #FFFFFF 22%, rgba(255, 255, 255, .8) 26%, rgba(255, 255, 255, .2) 44%, transparent 70%),
    repeating-conic-gradient(from var(--foil, 0deg), #FF5DA8 0deg 3deg, transparent 3deg 9deg, #FFD33D 9deg 12deg, transparent 12deg 18deg, #3DFFA0 18deg 21deg, transparent 21deg 27deg, #3DC8FF 27deg 30deg, transparent 30deg 36deg, #A36BFF 36deg 39deg, transparent 39deg 45deg);
}
[data-look="holo"] .rays i { background: linear-gradient(180deg, #FFFFFF, #CFE9FF 40%, #FFB3E0); }
[data-look="holo"] .disc {
  --sun: 220, 235, 255;
  background: radial-gradient(circle, #FFFFFF 0 20%, rgba(255, 255, 255, .5) 38%, rgba(255, 255, 255, 0) 64%),
    conic-gradient(from var(--foil, 0deg), #FF4D6D, #FFB84D, #F9FF6B, #5DFFB1, #4DD2FF, #8D6BFF, #FF4DD8, #FF4D6D);
}
[data-look="holo"] .moon { background: radial-gradient(circle at 60% 40%, #1E2028, #0A0B0E 74%); }
[data-look="holo"] .moonlit {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(170deg, #FAFBFD 0%, #C9CED8 36%, #454A55 49%, #1C1F25 53%, #8E94A2 64%, #F1F3F7 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 3px 0 4px rgba(255, 120, 200, .45), inset -3px 0 4px rgba(90, 210, 255, .5);
}
[data-look="holo"] .moonlit i { display: none; }
[data-look="holo"] .gloss { background: radial-gradient(50% 26% at 42% 15%, rgba(255, 255, 255, .7), transparent 70%); }
[data-look="holo"] .bead { box-shadow: 0 0 8px 4px #FFFFFF, 0 0 22px 8px rgba(160, 220, 255, .7), 0 0 50px 16px rgba(255, 150, 220, .4); }
[data-look="holo"] .streak { background: linear-gradient(90deg, transparent, #FF5DA8 18%, #FFD33D 30%, #3DFFA0 40%, #FFFFFF 50%, #3DC8FF 60%, #A36BFF 72%, #FF5DA8 84%, transparent); }

/* ---- 5. the shockwave (app.js, stage 6): rings, a soft band and sparks, over both themes ---- */
.fx { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; }
.fx-band, .fx-ring { position: absolute; inset: 0; }
.fx-ring { display: none; }
[data-look="acid"] .fx-ring { display: block; }
.fx-ring:nth-child(2) { background: #E8FF3A; }
.fx-ring:nth-child(3) { background: #FF2E9A; }
.fx-ring:nth-child(4) { background: #00E5FF; }
.fx-sparks i { position: absolute; left: 0; top: 0; border-radius: 3px; will-change: transform, opacity; }
[data-look="aurora"] .fx-sparks i { width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; background: linear-gradient(90deg, transparent, var(--c) 45%, #FFFFFF); box-shadow: 0 0 6px var(--c); }
[data-look="acid"] .fx-sparks i { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF 0 20%, var(--c) 45%); box-shadow: 0 2px 0 rgba(20, 0, 60, .35); }
[data-look="holo"] .fx-sparks i { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: radial-gradient(closest-side, #FFFFFF, var(--c) 40%, transparent); }
[data-look="holo"] .fx-sparks i::before, [data-look="holo"] .fx-sparks i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; margin: -.75px 0 0 -11px; background: linear-gradient(90deg, transparent, #FFFFFF, transparent); }
[data-look="holo"] .fx-sparks i::after { transform: rotate(90deg); }

/* ---- 6. the frame's footer ---- */
.tutorial {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); margin: 0;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 18px 10px 11px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--pill-ink); background: var(--pill); box-shadow: 0 14px 28px -14px var(--pill-shadow), inset 0 0 0 1px var(--pill-edge);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tutorial svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; fill: var(--pill-icon-ink); background: var(--pill-icon); }
.tutorial span { font-weight: 400; color: var(--pill-dim); }
.credits { position: absolute; left: 28px; right: 24px; bottom: 34px; display: flex; align-items: center; justify-content: space-between; }
.stack { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.stack i { font-style: normal; color: var(--ink); margin: 0 3px; }
.logo { margin: 0; display: flex; align-items: center; gap: 7px; }
.logo .avatar { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1.2px var(--ring); }
.logo .lockup { height: 24px; width: auto; filter: var(--lockup); }

/* ---- the touch circle (shows where the finger is, for the video) ---- */
.touch {
  position: fixed; top: 0; left: 0; z-index: 10; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid #FFFFFF; background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); transition: opacity .12s;
}
.touch.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .touch { transition: none; } }