/* The IMP Files' site, the 2026-11-12 landing design (Minu: "keep the logo and the art style and design an actual landing page ... make your own
   neon lights that work and even flicker ... gaming/graffity style + a bit of demon ... the buttons have a glint on top of them like glass but
   the glint doesn't move"). The design lives on his canvas; docs/studio/site/2026-11-12-landing.md says where every piece is.
   His logo is the only picture: every other piece is drawn (site/assets/*.svg, reusable anywhere) or made here in CSS.
   Rules kept from before: no white backgrounds, no scroll bars (his words); a key goes down when pressed and comes back to where it stood,
   never above it; the colours keep the deck's meaning (Ileana purple, Pebbles blue, Minu charcoal, Twitch its purple, YouTube its red).
   Fonts are the site's own files (site/fonts, SIL Open Font License): Rubik, Sedgwick Ave Display (the spray), Tilt Neon (the tubes). */

@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("fonts/rubik.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 800 900; font-display: swap; src: url("fonts/rubik-italic.woff2") format("woff2"); }
@font-face { font-family: "Sedgwick Ave Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sedgwick-ave-display.woff2") format("woff2"); }
@font-face { font-family: "Tilt Neon"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/tilt-neon.woff2") format("woff2"); }

:root {
  --navy: #1b0b45; --ink: #24124f; --ink2: #4a3384; --spray: #ff5fd6;
  --disp: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tag: "Sedgwick Ave Display", "Rubik", cursive;
  --neon: "Tilt Neon", "Rubik", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 72px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #1d0f4a; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { scrollbar-width: none; }
body { margin: 0; overflow-x: hidden; background: #d3bffa; color: var(--ink); font: 500 17px/1.55 var(--disp); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: #4a1fb8; }
[hidden] { display: none !important; }
.when-live { display: none !important; }
.is-live .when-live { display: revert !important; }
.is-live .when-off { display: none !important; }

/* ---- sticker lettering: white with the logo's navy outline ------------------------------------------------------------------------- */
.stk { font-family: var(--disp); font-style: italic; font-weight: 900; color: #fff; letter-spacing: -.005em;
  text-shadow: .06em 0 0 #1b0b45, -.06em 0 0 #1b0b45, 0 .06em 0 #1b0b45, 0 -.06em 0 #1b0b45, .045em .045em 0 #1b0b45, -.045em .045em 0 #1b0b45,
    .045em -.045em 0 #1b0b45, -.045em -.045em 0 #1b0b45, .056em .024em 0 #1b0b45, -.056em .024em 0 #1b0b45, .056em -.024em 0 #1b0b45,
    -.056em -.024em 0 #1b0b45, .024em .056em 0 #1b0b45, -.024em .056em 0 #1b0b45, .024em -.056em 0 #1b0b45, -.024em -.056em 0 #1b0b45,
    0 .12em 0 #1b0b45, .045em .11em 0 #1b0b45, -.045em .11em 0 #1b0b45, .06em .08em 0 #1b0b45, -.06em .08em 0 #1b0b45; }
/* graffiti extrude: navy 3D, a pink layer, navy again */
.stk.big { text-shadow: .06em 0 0 #1b0b45, -.06em 0 0 #1b0b45, 0 .06em 0 #1b0b45, 0 -.06em 0 #1b0b45, .045em .045em 0 #1b0b45, -.045em .045em 0 #1b0b45,
    .045em -.045em 0 #1b0b45, -.045em -.045em 0 #1b0b45, .056em .024em 0 #1b0b45, -.056em .024em 0 #1b0b45, .056em -.024em 0 #1b0b45,
    -.056em -.024em 0 #1b0b45, .024em .056em 0 #1b0b45, -.024em .056em 0 #1b0b45, .024em -.056em 0 #1b0b45, -.024em -.056em 0 #1b0b45,
    0 .1em 0 #1b0b45, .05em .09em 0 #1b0b45, -.05em .09em 0 #1b0b45,
    0 .16em 0 #ff5fd6, .05em .155em 0 #ff5fd6, -.05em .155em 0 #ff5fd6, .075em .13em 0 #ff5fd6, -.075em .13em 0 #ff5fd6,
    0 .22em 0 #1b0b45, .06em .21em 0 #1b0b45, -.06em .21em 0 #1b0b45, .1em .17em 0 #1b0b45, -.1em .17em 0 #1b0b45, 0 .3em .3em rgba(27, 11, 69, .35); }

/* ---- glass keys: chamfered, white rim, navy base, a glint that travels ------------------------------------------------------------- */
.key { --c: 17px; --h: 80px; position: relative; display: inline-flex; min-width: 208px; height: var(--h); text-decoration: none; color: #fff;
  cursor: pointer; border: 0; padding: 0; background: none; font: inherit; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 12px 14px rgba(27, 11, 69, .3)); transition: translate .08s ease-out, filter .08s ease-out; }
.key:hover { color: #fff; }
.key:active, .key.pressed { translate: 0 4px; filter: drop-shadow(0 4px 6px rgba(27, 11, 69, .3)); }
.key:focus-visible { outline: 3px solid #3fe3ff; outline-offset: 5px; border-radius: 6px; }
.k-out, .k-rim, .k-face, .c-out, .c-rim, .c-face, .vid .thumb, .vid .in, .vid .shot {
  clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%,
                     0 calc(100% - var(--k)), 0 var(--k)); }
.k-out, .k-rim, .k-face, .c-out, .c-rim, .c-face { display: flex; flex: 1; min-width: 0; }
.k-out { --k: var(--c); padding: 3px 3px 8px; background: #1b0b45; }
.k-rim { --k: calc(var(--c) - 1.5px); padding: 3px; background: linear-gradient(180deg, #fff 0%, #f4edff 55%, #cdb6f7 100%); }
.k-face { --k: calc(var(--c) - 3px); position: relative; overflow: hidden; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 0 30px; transition: filter .15s;
  background: linear-gradient(135deg, transparent 43%, rgba(255, 255, 255, .95) 43% 57%, transparent 57%) 9px 7px / 17px 17px no-repeat, var(--face);
  box-shadow: inset 0 -9px 12px -5px rgba(27, 11, 69, .38), inset 0 2px 0 rgba(255, 255, 255, .55); }
.key:hover .k-face { filter: brightness(1.07) saturate(1.06); }
.k-face::before, .c-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 54%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .12)); clip-path: polygon(0 0, 100% 0, 100% 52%, 0 100%); }
.k-face::after, .c-top::after { content: ""; position: absolute; z-index: 3; top: -40%; bottom: -40%; left: -70%; width: 34%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, .18) 70%, rgba(255, 255, 255, 0));
  transform: translateX(0) skewX(-24deg); will-change: transform; animation: glint 6.5s cubic-bezier(.45, 0, .2, 1) infinite; }
.key:hover .k-face::after { animation: glintOnce .62s cubic-bezier(.45, 0, .2, 1) 1; }
@keyframes glint { 0% { transform: translateX(0) skewX(-24deg); } 15%, 100% { transform: translateX(620%) skewX(-24deg); } }   /* 210% of the face = 620% of the glint */
@keyframes glintOnce { from { transform: translateX(0) skewX(-24deg); } to { transform: translateX(620%) skewX(-24deg); } }
.keys .key:nth-child(2) .k-face::after { animation-delay: .35s; }
.keys .key:nth-child(3) .k-face::after { animation-delay: .7s; }
.keys .key:nth-child(4) .k-face::after { animation-delay: 1.05s; }
.k-lbl { position: relative; z-index: 2; font-size: 27px; line-height: 1; white-space: nowrap; }
.k-sub { position: relative; z-index: 2; font: 800 11px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 0 #1b0b45, 0 0 6px rgba(27, 11, 69, .6); }
.k-sub:empty { display: none; }
.k-spark { position: absolute; z-index: 4; right: 9px; bottom: 7px; width: 20px; height: 20px; animation: twinkle 2.8s ease-in-out infinite; }
.key.sm { --c: 13px; --h: 58px; min-width: 0; }
.key.sm .k-face { padding: 0 26px; }
.key.sm .k-lbl { font-size: 20px; }
.key.sm .k-spark { width: 15px; height: 15px; right: 7px; bottom: 5px; }
.key.is-soon .k-face { filter: saturate(.55) brightness(.92); }
.key.shake .k-out { animation: shake .36s; }          /* a key that has nowhere to go yet shakes its head */
@keyframes shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
.k-pink { --face: linear-gradient(180deg, #ffa6ea 0%, #ff5ad2 50%, #ea33bb 52%, #f548c8 100%); }
.k-twitch { --face: linear-gradient(180deg, #c39bff 0%, #9156ff 50%, #7536f2 52%, #8549fb 100%); }
.k-red { --face: linear-gradient(180deg, #ff9cb0 0%, #ff4569 50%, #e5244f 52%, #f3375e 100%); }
.k-blue { --face: linear-gradient(180deg, #9aedff 0%, #3fc5fb 50%, #16a0f0 52%, #2ab3f7 100%); }
.k-royal { --face: linear-gradient(180deg, #8cb9ff 0%, #4a82f7 50%, #2d62e2 52%, #3b72ef 100%); }
.k-dark { --face: linear-gradient(180deg, #867ea3 0%, #4f4770 50%, #3a3358 52%, #463e66 100%); }
.k-lilac { --face: linear-gradient(180deg, #faf6ff 0%, #e2d3fc 50%, #cdb6f6 52%, #d8c5f9 100%); }
.k-violet { --face: linear-gradient(180deg, #d68bff 0%, #a64cf6 50%, #8b2fe6 52%, #9b41ef 100%); }

/* ---- neon: the unlit glass tube underneath, the lit gas on top, each tube on its own flicker clock ----------------------------------- */
.sign { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 13px 28px 15px; border-radius: 16px;
  background: linear-gradient(180deg, #241050, #140630); border: 2px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 3px #1b0b45, 0 14px 28px rgba(27, 11, 69, .35), inset 0 1px 0 rgba(255, 255, 255, .16); }
.sign::before, .sign::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #a596cf 55%, #4a3d75); }
.sign::before { left: 9px; } .sign::after { right: 9px; }
.ntxt { position: relative; display: inline-block; font-family: var(--neon); font-weight: 400; line-height: 1.1; white-space: nowrap; }
.ntxt .off { color: rgba(255, 236, 252, .2); text-shadow: 0 0 1px rgba(255, 255, 255, .3); }
.ntxt .on { position: absolute; left: 0; top: 0; color: var(--nc); will-change: opacity;
  text-shadow: 0 0 1px #fff, 0 0 4px var(--ng), 0 0 10px var(--ng), 0 0 22px var(--ng), 0 0 44px var(--ng); }
.n-pink { --nc: #fff0fb; --ng: #ff3fd2; } .n-cyan { --nc: #effdff; --ng: #22d8ff; } .n-red { --nc: #fff1f4; --ng: #ff2f62; }
.kick { padding: 9px 24px 11px; }
.kick .ntxt { font-size: 19px; letter-spacing: .2em; text-transform: uppercase; }
.kick-gap { display: block; height: 45px; }               /* the File labels' place, kept empty (Minu, 2026-11-12: "leave the spacing as is") */

.frame { position: absolute; left: 0; right: 0; top: 96px; bottom: 42px; z-index: 0; pointer-events: none; }
.frame svg, .nsym svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.frame path, .nsym path, .nsym circle { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.t-off path, .t-off circle { stroke: rgba(255, 238, 252, .3); stroke-width: 7; }
.tc { stroke-width: 6; } .th { stroke-width: 2.2; stroke: #fff7fe !important; }
.g-pink .tc { stroke: #ff5ddc; } .g-cyan .tc { stroke: #40e3ff; }
.g-pink { filter: drop-shadow(0 0 2px #ff3fd2) drop-shadow(0 0 9px rgba(255, 63, 210, .95)) drop-shadow(0 0 24px rgba(255, 63, 210, .55)); }
.g-cyan { filter: drop-shadow(0 0 2px #22d8ff) drop-shadow(0 0 9px rgba(34, 216, 255, .95)) drop-shadow(0 0 24px rgba(34, 216, 255, .5)); }
.chev { position: absolute; z-index: 1; display: flex; gap: 5px; filter: drop-shadow(0 0 3px #22d8ff) drop-shadow(0 0 9px rgba(34, 216, 255, .85)); }
.chev i { display: block; width: 15px; height: 20px; background: #effdff; clip-path: polygon(0 0, 42% 0, 100% 50%, 42% 100%, 0 100%, 58% 50%);
  opacity: .22; animation: chase 1.6s linear infinite; }
.chev i:nth-child(2) { animation-delay: .16s; } .chev i:nth-child(3) { animation-delay: .32s; } .chev i:nth-child(4) { animation-delay: .48s; }

.flk-a, .flk-b, .flk-c, .flk-dead { will-change: opacity; }
.flk-a { animation: flkA 7.3s step-end infinite; }
.flk-b { animation: flkB 5.1s step-end infinite; }
.flk-c { animation: flkC 9.7s step-end infinite; }
.flk-dead { animation: flkDead 3.4s step-end infinite; }
@keyframes flkA { 0% { opacity: 1; } 40% { opacity: .22; } 40.6% { opacity: 1; } 41.4% { opacity: .4; } 42% { opacity: 1; } 78% { opacity: .15; } 80.5% { opacity: 1; } }
@keyframes flkB { 0% { opacity: 1; } 22% { opacity: .3; } 22.8% { opacity: 1; } 64% { opacity: .5; } 64.6% { opacity: 1; } 65.4% { opacity: .18; } 66.5% { opacity: 1; } }
@keyframes flkC { 0% { opacity: 1; } 12% { opacity: .35; } 12.5% { opacity: 1; } 55% { opacity: .12; } 57% { opacity: 1; } 57.8% { opacity: .3; } 58.6% { opacity: 1; } }
@keyframes flkDead { 0% { opacity: 1; } 6% { opacity: .12; } 7% { opacity: 1; } 9% { opacity: .25; } 10.5% { opacity: 1; } 38% { opacity: .06; } 52% { opacity: .7; }
  53% { opacity: .06; } 55% { opacity: 1; } 80% { opacity: .3; } 81% { opacity: 1; } }
@keyframes chase { 0%, 100% { opacity: .22; } 10%, 34% { opacity: 1; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(22deg); opacity: .6; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes beat { 0%, 48%, 100% { transform: scale(1); } 12% { transform: scale(1.09); } 24% { transform: scale(1); } 36% { transform: scale(1.06); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.5) translateY(3px); } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-40px, 14px); } }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(542%); } }   /* 130% of the screen = 542% of the band */
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
@keyframes mq { to { transform: translateX(-50%); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- decor ------------------------------------------------------------------------------------------------------------------------- */
.spk { position: absolute; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)); animation: twinkle 3.2s ease-in-out infinite; }
.dots { position: absolute; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, .6) 0 1.7px, transparent 2.1px); background-size: 13px 13px; }
.dots.dv { background-image: radial-gradient(circle, rgba(110, 70, 210, .32) 0 1.7px, transparent 2.1px); }
.d-tr { right: 0; top: 0; width: 460px; height: 320px; -webkit-mask-image: radial-gradient(100% 100% at 100% 0, #000, transparent 72%); mask-image: radial-gradient(100% 100% at 100% 0, #000, transparent 72%); }
.d-bl { left: 0; bottom: 0; width: 460px; height: 320px; -webkit-mask-image: radial-gradient(100% 100% at 0 100%, #000, transparent 72%); mask-image: radial-gradient(100% 100% at 0 100%, #000, transparent 72%); }
.d-l { left: 0; top: 30%; width: 300px; height: 340px; -webkit-mask-image: radial-gradient(100% 50% at 0 50%, #000, transparent 75%); mask-image: radial-gradient(100% 50% at 0 50%, #000, transparent 75%); }
.checker { position: absolute; pointer-events: none; background: conic-gradient(rgba(255, 255, 255, .55) 25%, transparent 0 50%, rgba(255, 255, 255, .55) 0 75%, transparent 0) 0 0 / 24px 24px; }
.checker.cv { background: conic-gradient(rgba(214, 120, 255, .55) 25%, transparent 0 50%, rgba(214, 120, 255, .55) 0 75%, transparent 0) 0 0 / 26px 26px; }
.ck-tl { left: 0; top: 0; width: 300px; height: 220px; -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 66%); mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 66%); }
.ck-tr { right: 0; top: 0; width: 300px; height: 220px; -webkit-mask-image: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 66%); mask-image: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 66%); }
.ck-bl { left: 0; bottom: 0; width: 300px; height: 220px; -webkit-mask-image: linear-gradient(45deg, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 66%); mask-image: linear-gradient(45deg, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 66%); }
.bat-wrap { position: absolute; pointer-events: none; animation: drift 9s ease-in-out infinite alternate; }
.bat { display: block; width: 100%; height: auto; opacity: .8; transform-origin: 50% 40%; animation: flap .42s ease-in-out infinite alternate; }
.cloudlet { position: absolute; pointer-events: none; }
.sw { position: absolute; pointer-events: none; filter: drop-shadow(0 0 10px rgba(255, 90, 220, .55)); }

/* ---- the bar on top ---------------------------------------------------------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; gap: 18px; padding: 0 var(--gutter);
  background: linear-gradient(180deg, rgba(20, 7, 52, .94), rgba(27, 11, 69, .84));
  border-bottom: 1px solid rgba(255, 255, 255, .14); }
.nav-logo { display: block; line-height: 0; }
/* the bar's logo stays away while the first screen shows the big one, and pops back in after it (Minu, 2026-11-12) */
.nav-logo img { transform-origin: 30% 60%; animation: logoPop .62s cubic-bezier(.2, .8, .3, 1) both; }
.logo-off .nav-logo { pointer-events: none; }
.logo-off .nav-logo img { animation: none; opacity: 0; transform: scale(.3) rotate(-14deg); transition: opacity .18s ease-in, transform .18s ease-in; }
@keyframes logoPop { 0% { opacity: 0; transform: translateY(-14px) scale(.3) rotate(-14deg); } 55% { opacity: 1; transform: translateY(2px) scale(1.14) rotate(4deg); }
  78% { transform: scale(.96) rotate(-1.5deg); } 100% { opacity: 1; transform: none; } }
.nav-logo img { height: 46px; width: auto; filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { font: italic 800 16px/1 var(--disp); color: #fff; text-decoration: none; padding: 14px; border-radius: 10px; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-links a:focus-visible { outline: 2px solid #3fe3ff; }
.nav-live { text-decoration: none; display: inline-flex; }
.nav-live .sign { padding: 7px 18px 8px; border-radius: 12px; box-shadow: 0 0 0 2px #1b0b45; }
.nav-live .sign::before, .nav-live .sign::after { width: 5px; height: 5px; margin-top: -2.5px; }
.nav-live .ntxt { font-size: 18px; letter-spacing: .16em; }

/* ---- the first screen -------------------------------------------------------------------------------------------------------------- */
.hero { position: relative; z-index: 1; margin-top: calc(var(--nav-h) * -1); min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 48px) var(--gutter) 214px; overflow: hidden;
  background: linear-gradient(180deg, #1d0f4a 0%, #34197a 11%, #5b37b8 28%, #8a64dc 47%, #b494f2 68%, #d3bffa 100%); }
.sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bloom { position: absolute; left: 50%; top: 40%; width: 1240px; height: 780px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 130, 232, .45), rgba(170, 110, 255, .22) 50%, transparent 78%); }
.hero .d-tr { opacity: .55; } .hero .d-l { opacity: .4; }
.sw-a { left: -3vw; top: 28px; width: min(62vw, 900px); }
.sw-b { right: -3vw; top: 27%; width: min(32vw, 460px); transform: scaleX(-1) rotate(-6deg); }
.bw1 { right: 10%; top: 13%; width: 50px; }
.bw2 { right: 18%; top: 20%; width: 32px; animation-duration: 11s; } .bw2 .bat { animation-duration: .36s; }
.bw3 { right: 24%; top: 10%; width: 22px; animation-duration: 7s; } .bw3 .bat { animation-duration: .3s; }
.hero .s1 { left: 11%; top: 23%; width: 44px; }
.hero .s2 { left: 84%; top: 33%; width: 30px; animation-delay: .8s; }
.hero .s3 { left: 91%; top: 52%; width: 38px; animation-delay: 1.6s; }
.hero .s4 { left: 5%; top: 50%; width: 26px; animation-delay: 2.2s; }
.hero .s5 { left: 30%; top: 12%; width: 20px; animation-delay: .4s; }
.hero .s6 { left: 66%; top: 9%; width: 18px; animation-delay: 1.2s; }
.hero .s7 { left: 79%; top: 64%; width: 22px; animation-delay: 2.6s; }
.hero .s8 { left: 17%; top: 66%; width: 20px; animation-delay: 1.9s; }
.stage { position: relative; z-index: 3; width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.chev-tr { right: 62px; top: 132px; transform: scaleX(-1); }
.chev-bl { left: 48px; bottom: 112px; }
.logo { position: relative; z-index: 2; margin: 0; line-height: 0; }
.logo img { display: block; width: min(740px, 90vw); height: auto; animation: float 7s ease-in-out infinite;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 18px 24px rgba(27, 11, 69, .45)); }

/* the three of them, upright, each in their colour, and the one braincell sprayed under them */
.cast3 { position: relative; z-index: 2; margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .1em .3em; font-size: clamp(34px, 4.8vw, 68px); line-height: 1; }
.nm { display: inline-block; font-family: var(--disp); font-weight: 900; font-style: normal; letter-spacing: .015em; color: var(--fill);
  text-shadow: .055em 0 0 #1b0b45, -.055em 0 0 #1b0b45, 0 .055em 0 #1b0b45, 0 -.055em 0 #1b0b45, .04em .04em 0 #1b0b45, -.04em .04em 0 #1b0b45,
    .04em -.04em 0 #1b0b45, -.04em -.04em 0 #1b0b45, .05em .022em 0 #1b0b45, -.05em .022em 0 #1b0b45, .05em -.022em 0 #1b0b45, -.05em -.022em 0 #1b0b45,
    .022em .05em 0 #1b0b45, -.022em .05em 0 #1b0b45, .022em -.05em 0 #1b0b45, -.022em -.05em 0 #1b0b45, 0 .1em 0 #1b0b45, .04em .09em 0 #1b0b45,
    -.04em .09em 0 #1b0b45,
    .1em 0 0 #fff, -.1em 0 0 #fff, 0 -.1em 0 #fff, .075em -.075em 0 #fff, -.075em -.075em 0 #fff, .095em -.035em 0 #fff, -.095em -.035em 0 #fff,
    .035em -.095em 0 #fff, -.035em -.095em 0 #fff, .095em .045em 0 #fff, -.095em .045em 0 #fff, .085em .1em 0 #fff, -.085em .1em 0 #fff,
    0 .15em 0 #fff, .055em .145em 0 #fff, -.055em .145em 0 #fff, 0 .14em .45em var(--glow); }
.nm-i { --fill: #cf5bff; --glow: rgba(255, 80, 220, .7); transform: rotate(-3deg); }
.nm-m { --fill: #fff; --glow: rgba(27, 11, 69, .45); font-size: .84em; }
.nm-p { --fill: #33c3ff; --glow: rgba(34, 216, 255, .7); transform: rotate(3deg); }
.nm-spk { width: .36em; height: .36em; flex: none; animation: twinkle 3s ease-in-out infinite; }
.nm-spk + .nm + .nm-spk { animation-delay: 1.4s; }
.spray-row { flex: 0 0 100%; display: flex; justify-content: center; }
/* "ONE braincell" is his own picture (site/assets/one-braincell.webp, Minu 2026-11-12: "use this for the line") */
.spray { display: block; width: min(8.4em, 92vw); height: auto; margin: -.4em 0 0; transform: translateX(.3em); }
.tag2 { position: relative; z-index: 2; margin: -10px 0 0; max-width: 760px; font: 700 clamp(17px, 1.6vw, 21px)/1.5 var(--disp); color: #fff;
  text-shadow: 1px 0 0 #1b0b45, -1px 0 0 #1b0b45, 0 1px 0 #1b0b45, 0 -1px 0 #1b0b45, 0 2px 0 #1b0b45, 0 0 14px rgba(27, 11, 69, .55); }
.keys { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 40px; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: max(260px, 18.06vw); z-index: 2; pointer-events: none; }
.ground .clouds { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; max-width: none; }
.moon { position: absolute; right: 7%; bottom: 122px; width: 158px; filter: drop-shadow(0 0 16px rgba(255, 255, 255, .55)); animation: bob 8s ease-in-out infinite; }
.pheart { position: absolute; left: 8%; bottom: 138px; width: 104px; animation: beat 2.4s ease-in-out infinite;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 10px 14px rgba(27, 11, 69, .35)); }
/* the first screen drifts slower than the page as it leaves (site.js), its sky slower still */
.hero .stage { translate: 0 calc(var(--leave, 0) * 140px); will-change: translate; }
.hero .sky { translate: 0 calc(var(--leave, 0) * 260px); will-change: translate; }

/* ---- the crossing bands ------------------------------------------------------------------------------------------------------------- */
.bands { position: relative; z-index: 6; height: 0; overflow-x: clip; }   /* the bands are wider than the page; nothing slides sideways on a phone */
.band { position: absolute; left: -5%; width: 110%; overflow: hidden; padding: 13px 0; border-top: 3px solid #fff; border-bottom: 3px solid #fff;
  box-shadow: 0 0 0 3px #1b0b45, 0 16px 26px rgba(27, 11, 69, .28); }
.b-navy { top: -30px; transform: rotate(-2.2deg); background: #1b0b45; }
.b-pink { top: -24px; transform: rotate(1.7deg); background: linear-gradient(90deg, #ff5fd6, #b65cff 50%, #40e3ff); }
.mq { display: flex; width: max-content; animation: mq 40s linear infinite; }
.mq.rev { animation-direction: reverse; animation-duration: 52s; }
.mq-seq { display: flex; align-items: center; gap: 24px; padding-right: 24px; font: italic 900 22px/1 var(--disp); color: #fff;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.mq-seq img { width: 18px; height: 18px; flex: none; }
.b-pink .mq-seq { color: #1b0b45; }

/* ---- the sections: one screen each (site.js pages between them) ---------------------------------------------------------------------- */
.panel { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(92px, 12vh, 116px) var(--gutter) clamp(70px, 10vh, 110px); overflow: hidden; }
.sec-head { position: relative; z-index: 2; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 0 auto clamp(30px, 6vh, 60px); }
.sec-head::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 26px; width: 460px; max-width: 100%; height: 190px;
  transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 95, 214, .34), transparent); }
.title { margin: 16px 0 0; font-size: clamp(50px, 7vw, 98px); line-height: 1.02; }
.scrib { width: min(300px, 70%); height: auto; margin-top: 18px; overflow: visible; }
.sc1 { fill: none; stroke: #ff5fd6; stroke-width: 7; stroke-linecap: round; }
.sc2 { fill: none; stroke: #40e3ff; stroke-width: 4; stroke-linecap: round; }

.watch { padding-top: clamp(110px, 13vh, 130px); padding-bottom: clamp(50px, 7vh, 80px); background: linear-gradient(180deg, #d3bffa 0%, #cab3f8 100%); }
.watch .sec-head { margin-bottom: clamp(28px, 4.5vh, 44px); }
.watch .cloudlet { left: -40px; bottom: 40px; width: 300px; }
.watch .s1 { left: 8%; top: 22%; width: 34px; }
.watch .s2 { left: 90%; top: 70%; width: 26px; animation-delay: 1.3s; }
.tv { position: relative; z-index: 2; width: 100%; max-width: min(1000px, calc((100svh - 500px) * 16 / 9)); min-width: min(100%, 560px); margin: 0 auto; }
.tv-ring { position: absolute; inset: -17px; border-radius: 46px; border: 5px solid rgba(255, 238, 252, .55); pointer-events: none; }
.tv-ring.lit { border-color: #fff3fc; will-change: opacity;
  box-shadow: 0 0 4px #ff3fd2, 0 0 14px #ff3fd2, 0 0 38px rgba(255, 63, 210, .7), inset 0 0 4px #ff3fd2, inset 0 0 14px rgba(255, 63, 210, .6); }
.tv-bezel { position: relative; padding: 16px; border-radius: 30px; background: linear-gradient(180deg, #30196b, #1b0b45);
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px #1b0b45, 0 34px 60px rgba(27, 11, 69, .42); }
.tv-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, #3d2190 0%, #200f52 55%, #12062e 100%); }
#player { position: absolute; inset: 0; }
#player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 4px); }
.roll { position: absolute; left: 0; right: 0; height: 24%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .06), transparent);
  top: -25%; will-change: transform; animation: roll 6s linear infinite; }
.tv-screen:has(iframe) .scan, .tv-screen:has(iframe) .roll { display: none; }
.soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.6vw, 26px); padding: 24px; }
.soon .scr-logo { width: 52%; filter: drop-shadow(0 0 22px rgba(255, 95, 214, .45)); }
.scr-msg { margin: 0; font-size: clamp(24px, 4.4vw, 56px); }
.onair { position: absolute; z-index: 4; right: -28px; top: -44px; transform: rotate(6deg); padding: 12px 26px 14px; }
.onair .ntxt { font-size: 30px; letter-spacing: .1em; }

/* what's in the box, under it */
.now { position: relative; z-index: 2; width: 100%; max-width: 1000px; margin: 38px auto 0; display: flex; align-items: center; gap: 18px 24px;
  flex-wrap: wrap; justify-content: space-between; }
.now-text { flex: 1 1 340px; min-width: 0; }
.now-title { margin: 0; font: 800 clamp(19px, 2.2vw, 24px)/1.3 var(--disp); color: var(--ink); overflow-wrap: anywhere; }
.now-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: .45em; padding: .32em .85em; border-radius: 99px; font: 800 14px/1.2 var(--disp);
  color: var(--ink); background: rgba(255, 255, 255, .55); border: 2px solid var(--navy); }
.chip.live { background: linear-gradient(180deg, #ff7a9a, #ff2f62); color: #fff; text-shadow: 0 1px 0 rgba(27, 11, 69, .6); }
.chip.live::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.now-keys { display: flex; gap: 16px; flex-wrap: wrap; }

/* the videos, a screen of their own once there are any */
.morepanel { background: linear-gradient(180deg, #cab3f8, #cab3f8); }
.vids { position: relative; z-index: 2; width: 100%; max-width: min(1100px, calc((100svh - 420px) * 2.8)); min-width: min(100%, 640px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px); }
.vid { display: block; text-align: left; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.vid .thumb { --k: 14px; position: relative; display: block; aspect-ratio: 16 / 9; background: var(--navy); transition: translate .1s ease-out; }
.vid .in { --k: 12.5px; position: absolute; inset: 3px 3px 6px; display: block; padding: 4px; background: linear-gradient(170deg, #fff, #eadfff); }
.vid .shot { --k: 10px; display: block; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(180deg, #2c1770, #6c46cc 60%, #b89af3); }
.vid .blank { display: grid; place-items: center; }
.vid .blank img { width: 64%; height: auto; }
.vid .len { position: absolute; right: 12px; bottom: 13px; padding: .15em .55em; border-radius: 6px; background: rgba(27, 11, 69, .82); color: #fff; font-size: 13px; font-weight: 800; }
.vid .playing { position: absolute; left: 12px; top: 11px; padding: .2em .6em; border-radius: 6px; background: #ff2f62; color: #fff; font: italic 900 13px/1.2 var(--disp); }
.vid .vt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-weight: 800; line-height: 1.3; }
.vid .vm { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--ink2); }
@media (hover: hover) { .vid:hover .shot { filter: brightness(1.1) saturate(1.15); } .vid:hover .vt { text-decoration: underline; text-decoration-thickness: 2px; } }
.vid:active .thumb { translate: 0 2px; }
.vid:focus-visible { outline: 3px solid #3fe3ff; outline-offset: 5px; border-radius: 10px; }

.cast { background: linear-gradient(180deg, #cab3f8 0%, #d6c4fb 100%); }
.cast .s1 { left: 6%; top: 16%; width: 30px; animation-delay: .6s; }
.cast .s2 { left: 93%; top: 38%; width: 24px; animation-delay: 2s; }
.bigtag { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-9deg); font: 400 clamp(180px, 26vw, 420px)/1 var(--tag);
  color: rgba(255, 255, 255, .2); white-space: nowrap; pointer-events: none; -webkit-text-stroke: 2px rgba(255, 255, 255, .4); }
.cards { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px 34px; max-width: 1180px; margin: 0 auto; }
.card { position: relative; display: flex; filter: drop-shadow(0 18px 22px rgba(27, 11, 69, .26)); }
.c-out { --k: 24px; padding: 4px 4px 10px; background: #1b0b45; }
.c-rim { --k: 22.5px; padding: 4px; background: linear-gradient(180deg, #fff, #efe6ff 60%, #d3bffa); }
.c-face { --k: 21px; flex-direction: column; background: linear-gradient(180deg, #fcfaff, #ece2fe); }
.c-top { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 26px 26px 22px; background: var(--face);
  box-shadow: inset 0 -8px 12px -6px rgba(27, 11, 69, .35); }
.c-id { position: relative; z-index: 2; text-align: left; }
.c-name { margin: 0; font-size: 42px; line-height: 1; }
.role { display: inline-block; margin-top: 9px; padding: 6px 12px; border-radius: 99px; background: rgba(27, 11, 69, .6); color: #fff;
  font: 800 12px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; }
.c-body { margin: 0; padding: 24px 28px 30px; font: 500 16.5px/1.62 var(--disp); color: #24124f; }
.emblem { position: relative; z-index: 2; flex: none; width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, #3d2190, #150631); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1b0b45; }
.ring { position: absolute; inset: 7px; border-radius: 50%; border: 2.5px solid var(--rc);
  box-shadow: 0 0 4px var(--rg), 0 0 12px var(--rg), inset 0 0 4px var(--rg), inset 0 0 10px var(--rg); }
.em-ico { position: relative; width: 54px; height: 54px; }
.horns { position: absolute; left: -8px; top: -21px; width: 106px; max-width: none; height: auto; }
.horns.sm { left: 2px; top: -12px; width: 86px; }
.c-ileana { --face: linear-gradient(180deg, #d68bff 0%, #a64cf6 52%, #8b2fe6 100%); --rc: #ffe0f0; --rg: #ff5fae; }
.c-pebbles { --face: linear-gradient(180deg, #8eeaff 0%, #35bdf8 52%, #1497ea 100%); --rc: #e6fcff; --rg: #22d8ff; }
.c-minu { --face: linear-gradient(180deg, #8a82a8 0%, #4f4770 52%, #3a3358 100%); --rc: #f1eaff; --rg: #a66bff; }
.cards .card:nth-child(2) .c-top::after { animation-delay: .5s; }
.cards .card:nth-child(3) .c-top::after { animation-delay: 1s; }
.ctag { position: absolute; z-index: 5; top: -22px; right: 14px; transform: rotate(7deg); font: 400 32px/1 var(--tag); color: var(--tc); pointer-events: none;
  text-shadow: 0 0 1px #fff, .05em .06em 0 #1b0b45, 0 0 .35em var(--tg); }
.c-ileana .ctag { --tc: #ff63da; --tg: rgba(255, 80, 220, .7); }
.c-pebbles .ctag { --tc: #45d6ff; --tg: rgba(34, 216, 255, .7); transform: rotate(-6deg); }
.c-minu .ctag { --tc: #c38bff; --tg: rgba(166, 107, 255, .75); transform: rotate(4deg); }
.cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 4px; vertical-align: -.18em; background: #24124f; animation: blink 1.05s step-end infinite; }

.what { background: linear-gradient(180deg, #d6c4fb 0%, #cdb8fa 100%); }
.what .d-tr { opacity: .8; }
.what .cloudlet { right: -50px; bottom: 30px; width: 320px; transform: scaleX(-1); }
.what .s1 { left: 4%; top: 30%; width: 28px; animation-delay: 1s; }
.what-grid { position: relative; z-index: 2; width: 100%; max-width: 860px; margin: 0 auto; }
.what-l { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; }
.lede { margin: 0; font: 800 clamp(24px, 2.5vw, 33px)/1.32 var(--disp); color: #2f2c33; }
.mark { background: linear-gradient(transparent 58%, rgba(255, 95, 214, .5) 58% 90%, transparent 90%); padding: 0 .1em; }
.pad-sign { flex-direction: column; gap: 12px; width: 100%; max-width: 520px; padding: 34px 30px 26px; border-radius: 22px; }
.nsym { position: relative; pointer-events: none; }
.nsym.pad { width: 72%; aspect-ratio: 200 / 120; }
.pad-txt { margin: 0; font-size: clamp(20px, 2vw, 26px); letter-spacing: .06em; }

/* the last panel holds Subscribe and the footer together, one screen (Minu, 2026-11-12: "needs to be all in one panel") */
.cta { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 0; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #cdb8fa 0%, #8a63de 11%, #4a27a6 34%, #2c1574 58%, #3d1f94 76%, #8a63de 90%, #d3bffa 100%); }
.cta .d-tr { opacity: .35; top: 120px; }
.cta .ck-tl { top: 110px; opacity: .7; }
.cta .bw1 { left: 14%; right: auto; top: 16%; width: 40px; animation-duration: 10s; }
.cta .s1 { left: 22%; top: 62%; width: 26px; animation-delay: .9s; }
.cta .s2 { left: 80%; top: 66%; width: 34px; animation-delay: 1.7s; }
.cta .s3 { left: 70%; top: 14%; width: 20px; animation-delay: .3s; }
.cta-in { position: relative; z-index: 3; width: 100%; max-width: 1100px; margin: auto; padding: 46px 40px 60px; display: flex; flex-direction: column; align-items: center; }
.cta-in .frame { top: 0; bottom: 0; }
.cta-big { position: relative; margin: 26px 0 0; font-size: clamp(60px, 11vw, 156px); line-height: 1; }
.cta-line { position: relative; margin: 46px 0 0; font: 800 clamp(18px, 1.8vw, 24px)/1.4 var(--disp); color: #fff; text-shadow: 0 2px 0 #1b0b45, 0 0 16px rgba(27, 11, 69, .6); }
.cta .keys { margin-top: 30px; }
.cta .ground .clouds { transform: scaleX(-1); }
.n-heart { position: absolute; z-index: 2; left: 7%; top: 30%; width: 150px; aspect-ratio: 1 / 1; transform: rotate(-10deg); }
.n-crescent { position: absolute; z-index: 2; right: 7%; top: 24%; width: 130px; aspect-ratio: 1 / 1; transform: rotate(12deg); }

/* the footer is the panel's last strip, the clouds stand on it */
.cta { --fh: 136px; }
.cta .ground { height: max(190px, 18.06vw); bottom: var(--fh); }   /* never cut at the top on a wide screen (Minu, 2026-11-12) */
.foot { position: relative; z-index: 3; min-height: var(--fh); margin: 24px calc(var(--gutter) * -1) 0; display: flex; flex-direction: column;
  justify-content: center; padding: 6px var(--gutter) calc(10px + env(safe-area-inset-bottom)); text-align: center; background: #d3bffa; }
.foot-logo { display: block; margin: 0 auto; width: 170px; height: auto; filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; margin: 4px 0 2px; }
.foot-links a { font: italic 800 16px/1 var(--disp); color: #24124f; text-decoration: none; padding: 12px; border-radius: 10px; }
.foot-links a:hover { color: #24124f; background: rgba(255, 255, 255, .35); }
.foot-note { margin: 0; font: 600 14px/1.5 var(--disp); color: #4a3384; }

/* ---- moving between the sections: each section's pieces rise into place as they come into view (site.js sets it up) -------------------- */
.idle, .idle *, .idle *::before, .idle *::after { animation-play-state: paused !important; }
.reveal { opacity: 0; transform: translateY(34px) scale(.97); transition: opacity .75s cubic-bezier(.2, .75, .2, 1), transform .75s cubic-bezier(.2, .75, .2, 1);
  transition-delay: var(--d, 0s); }
.reveal.shown { opacity: 1; transform: none; }

/* the dots: where you are among the sections, and a way to any of them */
.pager { position: fixed; z-index: 60; right: clamp(10px, 1.6vw, 22px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; }
.pager .dot { width: 14px; height: 14px; padding: 0; border: 2.5px solid var(--navy); border-radius: 3px; cursor: pointer; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff, #d9c8ff); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7), 0 3px 6px rgba(27, 11, 69, .35);
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), background .35s; -webkit-tap-highlight-color: transparent; }
.pager .dot.on { transform: rotate(45deg) scale(1.35); background: linear-gradient(135deg, #ffa6ea, #ff5ad2 60%, #c42aa0); }
.pager .dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---- smaller and shorter screens --------------------------------------------------------------------------------------------------- */
@media (max-height: 820px) and (min-width: 641px) {
  .title { font-size: clamp(46px, 5.6vw, 72px); margin-top: 10px; }
  .scrib { margin-top: 10px; }
  .sec-head::before { top: 10px; }
  .logo img { width: min(600px, 80vw); }
  .cast3 { font-size: clamp(32px, 4vw, 54px); }
  .tag2 { margin-top: -6px; }
  .keys { margin-top: 30px; }
  .cta { --fh: 120px; padding-top: calc(var(--nav-h) + 14px); }
  .cta-in { padding: 34px 40px 44px; }
  .cta-big { font-size: clamp(60px, 8.4vw, 124px); margin-top: 16px; }
  .cta-line { margin-top: 36px; }
  .cta .keys { margin-top: 24px; }
  .foot { margin-top: 14px; }
  .foot-logo { width: 140px; }
}
@media (max-width: 980px) {
  .hero .frame, .chev, .sw-b, .nav-links { display: none; }
  .vids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-heart, .n-crescent { width: 90px; top: 12%; }
}
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .nav { gap: 10px; }
  .nav-logo img { height: 38px; }
  .nav .key.sm { display: none; }
  .nav-live { margin-left: auto; }
  .hero { padding-bottom: 170px; }
  .cast3 { font-size: 6.6vw; gap: .1em .26em; }
  .hero .s3 { left: 88%; top: 30%; } .hero .s4 { left: 6%; top: 34%; }
  .what .s1 { left: 6%; top: 15%; }
  .cast .s2 { left: 88%; top: 5%; }
  .spray { width: 79vw; margin-top: -.1em; }
  .keys { gap: 12px; width: 100%; }
  .keys .key { min-width: 0; flex: 1 1 calc(50% - 6px); --h: 66px; --c: 13px; }
  .keys .k-face { padding: 0 14px; }
  .keys .k-lbl { font-size: 21px; }
  .moon { width: 92px; right: 4%; bottom: 92px; }
  .pheart { width: 62px; left: 5%; bottom: 104px; }
  .mq-seq { font-size: 16px; gap: 16px; padding-right: 16px; }
  .tv { min-width: 0; width: calc(100% - 16px); }
  .tv-ring { inset: -11px; border-radius: 34px; }
  .tv-bezel { padding: 10px; border-radius: 24px; }
  .onair { right: -6px; top: -34px; }
  .onair .ntxt { font-size: 20px; }
  .now { justify-content: center; text-align: center; }
  .now-meta, .now-keys { justify-content: center; }
  .vids { min-width: 0; gap: 14px 12px; }
  .vid .vm { font-size: 13px; }
  .c-name { font-size: 34px; }
  .cta-in { padding: 52px 18px 70px; }
  .cta-in .frame { display: block; }
  .n-heart, .n-crescent { display: none; }
  .panel { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  .watch { padding-top: 84px; }
  .sec-head { margin-bottom: 30px; }
  .kick-gap { height: 20px; }
  .cta { min-height: 0; padding-top: 70px; }
  .cta { --fh: 178px; }
  .cta .ground { height: 140px; }
  .foot { margin-top: 150px; }
}
/* a finger scrolls the page itself (Minu, 2026-11-12: "its either scrolling by hand or animation scrolling, both can't exist at the same
   time"): on touch screens nothing pages, glides or rises into place (site.js), and the dots go */
@media (pointer: coarse), (max-width: 640px) {
  .pager { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- for search (Minu, 2026-11-13: "lets think of more keywords people might look for and how to utilize them"): the cast cards lead to
   their own pages, what we play, the questions. The boxes are his box (assets/imp-kit.css, bible §20.3); this adds only their layout. ---- */
.c-more { align-self: flex-start; margin: auto 28px 26px; padding-bottom: 2px; font: italic 800 16px/1.2 var(--disp); color: #5a22c8;
  text-decoration: none; border-bottom: 2px solid rgba(90, 34, 200, .3); }
.c-more:hover { color: #3a0f99; border-bottom-color: currentColor; }
.c-more:focus-visible { outline: 2px solid #3fe3ff; outline-offset: 3px; border-radius: 4px; }

.what-grid { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 4vw, 64px); align-items: center; }
.plays .i-box-in { padding: 42px 34px 78px 32px; }
.plays-tag { margin: 0 0 20px; font-size: clamp(34px, 3vw, 42px); font-weight: 400; line-height: 1; transform: rotate(-3deg); transform-origin: left center; }
.plays-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plays-list li { display: flex; align-items: center; gap: 16px; }
.plays-ico { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(21, 6, 49, .62); box-shadow: inset 0 0 0 2px rgba(255, 238, 252, .2), 0 0 14px rgba(255, 63, 210, .25); }
.plays-ico img { width: 38px; height: auto; }
.plays .i-say { font-size: clamp(19px, 1.7vw, 23px); }
.plays-puff { right: -40px; bottom: -16px; width: 160px; }
.plays-heart { right: 22px; bottom: 34px; width: 50px; }

.faq { background: linear-gradient(180deg, #cdb8fa 0%, #c2a9f6 100%); }
.faq .d-l { opacity: .75; } .faq .ck-tl { opacity: .55; }
.faq .s1 { left: 5%; top: 26%; width: 30px; } .faq .s2 { left: 93%; top: 64%; width: 24px; animation-delay: 1.2s; }
.faq-grid { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px); align-items: stretch; }
.faq-box .i-box-in { padding: 92px 34px 80px 32px; }
.faq-list { margin: 0; display: grid; gap: 22px; }
.faq-q { margin: 0 0 6px; font: 400 25px/1.15 var(--neon); color: #fff0fb; text-shadow: 0 0 2px #ff3fd2, 0 0 9px #ff3fd2, 0 0 22px rgba(255, 63, 210, .55); }
.i-cyanbox .faq-q { color: #effdff; text-shadow: 0 0 2px #22d8ff, 0 0 9px #22d8ff, 0 0 22px rgba(34, 216, 255, .55); }
.faq-a { margin: 0; font-size: 18px; }
.faq-puff { left: -40px; bottom: -16px; width: 160px; transform: scaleX(-1); }
.faq-puff2 { right: -40px; bottom: -16px; width: 160px; }
.faq-heart { right: 22px; bottom: 34px; width: 50px; }

@media (max-height: 820px) and (min-width: 641px) {
  .faq .sec-head { margin-bottom: 24px; }
  .faq-box .i-box-in { padding: 72px 28px 62px; }
  .faq-list { gap: 10px; }
  .faq-q { margin-bottom: 3px; font-size: 21px; }
  .faq-a { font-size: 15.5px; }
  .plays .i-box-in { padding: 34px 28px 70px; }
  .plays-list { gap: 10px; }
}
@media (max-width: 980px) {
  .what-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .what-r { width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .plays-puff, .faq-puff, .faq-puff2 { width: 120px; right: -14px; }
  .faq-puff { left: -14px; right: auto; }
  .plays-heart, .faq-heart { right: 26px; bottom: 26px; width: 40px; }
  .plays .i-box-in { padding: 34px 22px 70px; }
  .plays-tag { font-size: 32px; }
  .faq-box .i-box-in { padding: 82px 22px 72px; }
  .faq-q { font-size: 21px; }
  .faq-a { font-size: 16px; }
  .c-more { margin: auto 22px 22px; }
}