/* Cosmos (Damien, 11 Oct 2026): near-black night, fine light-blue fibre-light geometry, cream text,
   pearl / lilac / rose-gold accents, Lampblác Pearl the black-pearl moth and the crystal owl. Replaces cream + purple. */
html.cosmos {
  --night: #05060C; --text: #F2ECE0; --fibre: #8FD8FF; --fibre-dim: rgba(143,216,255,.28);
  --lilac: #C9B6FF; --rose: #E8B4A0; --pearl: #E9E6F2; --gold: #D4B15A;
  --ink: #F2ECE0; --cream: #05060C; --pale: #B9AEDB;
  color-scheme: only dark; background: #05060C !important;
}
html.cosmos body { background: transparent !important; color: var(--text) !important; }
html.cosmos ::selection { background: rgba(201,182,255,.35); color: #fff; }

html.cosmos a:not(.asit-btn):not(.btn):not(.d-begin):not(.d-alt):hover { color: var(--lilac); }
/* the one pill: pearl-cream on night, with a faint fibre glow */
html.cosmos .asit-btn, html.cosmos .btn:not(.alt) {
  box-shadow: 0 0 0 1px rgba(143,216,255,.25), 0 0 22px rgba(143,216,255,.18), 0 0 46px rgba(201,182,255,.12);
}
html.cosmos .asit-btn.alt, html.cosmos .btn.alt { border-color: rgba(242,236,224,.7) !important; box-shadow: 0 0 18px rgba(143,216,255,.12); }
html.cosmos input:not([type=checkbox]):not([type=radio]):not([type=range]):not(#od input), html.cosmos textarea:not(#od textarea), html.cosmos select:not(#od select) {
  background-color: rgba(242,236,224,.04) !important; color: var(--text) !important; border-color: rgba(242,236,224,.5) !important; }
html.cosmos input::placeholder, html.cosmos textarea::placeholder { color: rgba(242,236,224,.45); }
html.cosmos img.cz-invert { filter: invert(1) hue-rotate(180deg) brightness(1.1); }

/* ---------- the sky layer (behind everything, never takes a tap) ---------- */
#cz-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; background:
  radial-gradient(120% 70% at 85% -10%, rgba(201,182,255,.10), transparent 60%),
  radial-gradient(90% 60% at 0% 110%, rgba(143,216,255,.08), transparent 60%),
  radial-gradient(60% 40% at 50% 50%, rgba(232,180,160,.035), transparent 70%), #05060C; }
#cz-sky canvas { position: absolute; left: 0; top: 0; width: 100%; height: 130%; will-change: transform; }
#cz-sky svg.cz-geo { position: absolute; overflow: visible; will-change: transform; }
.cz-geo .f { fill: none; stroke: #8FD8FF; stroke-width: .7; vector-effect: non-scaling-stroke; }
.cz-geo .l { fill: none; stroke: #C9B6FF; stroke-width: .6; vector-effect: non-scaling-stroke; }
.cz-geo .r { fill: none; stroke: #E8B4A0; stroke-width: .6; vector-effect: non-scaling-stroke; }
#cz-flower { width: min(150vmax, 1500px); height: min(150vmax, 1500px); left: 50%; top: 50%; margin: calc(min(150vmax, 1500px) / -2) 0 0 calc(min(150vmax, 1500px) / -2); opacity: .16; filter: drop-shadow(0 0 3px rgba(143,216,255,.9)); animation: czTurn 420s linear infinite; }
#cz-yantra { width: min(70vmin, 520px); height: min(70vmin, 520px); right: -14vmin; top: -10vmin; opacity: .22; filter: drop-shadow(0 0 4px rgba(201,182,255,.9)); animation: czTurn 600s linear infinite reverse; }
#cz-metatron { width: min(64vmin, 480px); height: min(64vmin, 480px); left: -16vmin; bottom: -14vmin; opacity: .18; filter: drop-shadow(0 0 3px rgba(143,216,255,.9)); animation: czTurn 520s linear infinite; }
#cz-lotus { width: min(46vmin, 340px); height: min(23vmin, 170px); left: 50%; bottom: -2vmin; margin-left: calc(min(46vmin, 340px) / -2); opacity: .22; filter: drop-shadow(0 0 4px rgba(232,180,160,.8)); }
.cz-pleiad { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(190,220,255,.85), 0 0 18px 6px rgba(143,216,255,.35); animation: czTwinkle 4.2s ease-in-out infinite; }
#cz-lamp-fly { position: absolute; width: clamp(64px, 11vmin, 120px); left: 6vw; top: 22vh; opacity: .85; animation: czDrift 26s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(201,182,255,.45)); }
.cz-corner { position: absolute; width: clamp(90px, 22vmin, 220px); height: clamp(90px, 22vmin, 220px); opacity: .5; }
.cz-corner.tl { left: 0; top: 0; } .cz-corner.br { right: 0; bottom: 0; transform: rotate(180deg); }
.cz-corner.tr { right: 0; top: 0; transform: scaleX(-1); } .cz-corner.bl { left: 0; bottom: 0; transform: scaleY(-1); }
html.cz-quiet #cz-sky > :not(canvas) { display: none !important; }
html.cz-quiet #cz-lamp-fly { display: none; }
@keyframes czTurn { to { transform: rotate(360deg); } }
@keyframes czTwinkle { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes czDrift { 0% { transform: translate(0,0) rotate(-6deg); } 25% { transform: translate(14vw,-6vh) rotate(4deg); } 50% { transform: translate(4vw,10vh) rotate(-2deg); } 75% { transform: translate(-2vw,3vh) rotate(6deg); } 100% { transform: translate(0,0) rotate(-6deg); } }
.cz-lamp .wing { transform-origin: 100px 78px; animation: czFlap 2.8s ease-in-out infinite; }
.cz-lamp .wing.rt { animation-delay: 0s; }
@keyframes czFlap { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.82); } }

/* section reveals (JS adds .cz-rv then .cz-in when on screen) */
.cz-rv { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.cz-rv.cz-in { opacity: 1; transform: none; }

/* art blocks: images melt into the night (gradient scrims at the edges, never a panel behind text) */
.cz-art { display: block; position: relative; margin: 0 auto; width: 100%; max-width: 980px; }
.cz-art img { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 55%, transparent 100%); }
.cz-art.band img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.cz-cap { text-align: center; font-size: 17px; line-height: 1.618; letter-spacing: .02em; color: var(--text); margin: 21px auto 0; max-width: 24em; padding: 0 21px; }
.cz-cap.big { font-size: clamp(22px, 5.4vw, 34px); line-height: 1.3; font-style: italic; }
.cz-kicker { display: block; text-align: center; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--fibre); opacity: .85; margin: 0 0 13px; }
.cz-gap { height: clamp(89px, 18vh, 180px); }
.cz-rule { display: block; width: min(320px, 70vw); height: 24px; margin: 55px auto; }
.cz-ratline { display: flex; justify-content: center; gap: 21px; margin: 21px auto 0; opacity: .8; }
.cz-ratline svg { width: 54px; height: 30px; }

#cz-music { display: none !important; } /* no on-page audio controls (Damien, 11 Oct pm) */
/* (old) music toggle: bottom-left, 2.75rem, never over question text (the sit keeps it in the corner) */
#cz-music { position: fixed; left: calc(13px + env(safe-area-inset-left, 0px)); bottom: calc(13px + env(safe-area-inset-bottom, 0px)); z-index: 2147481000;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(201,182,255,.55); background: rgba(5,6,12,.72); color: #F2ECE0;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 0 16px rgba(143,216,255,.18); }
#cz-music svg { width: 20px; height: 20px; }
#cz-music[aria-pressed="true"] { border-color: rgba(143,216,255,.85); }
#cz-music:focus-visible { outline: 2px solid #8FD8FF; outline-offset: 2px; }
#cz-music .bars i { display: inline-block; width: 2px; margin: 0 1px; background: currentColor; height: 6px; vertical-align: bottom; }
#cz-music.on .bars i { animation: czBar 1s ease-in-out infinite; } #cz-music.on .bars i:nth-child(2) { animation-delay: .2s; } #cz-music.on .bars i:nth-child(3) { animation-delay: .4s; }
@keyframes czBar { 0%,100% { height: 4px; } 50% { height: 14px; } }

@media (prefers-reduced-motion: reduce) {
  #cz-sky *, .cz-lamp .wing, #cz-music .bars i { animation: none !important; }
  .cz-rv { opacity: 1; transform: none; transition: none; }
}
@media print { #cz-sky, #cz-music { display: none !important; } html.cosmos, html.cosmos body { background: #fff !important; color: #000 !important; } }
/* the old cream-era pinstripe border and corner pins are replaced by the cosmos corners */
html.cosmos .pin-bg-world, html.cosmos .pin-corner { display: none !important; }
html.cosmos { --pin-ground: transparent; }
html.cosmos .pin-clear, html.cosmos body.pin-q, html.cosmos body.pin-qpage { background-color: transparent !important; }
/* The Eternal i.Q. Mountain in the night: lilac-pearl title with a fibre-blue edge, light line-art keys */
html.cosmos #title text { fill: #E9E6F2; stroke: rgba(143,216,255,.85); stroke-width: 3px; filter: drop-shadow(0 0 6px rgba(201,182,255,.7)); }
html.cosmos #syms img, html.cosmos #bone img, html.cosmos #crown-plain img { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
html.cosmos #mc { background: #05060C; }
html.cosmos #q::placeholder { color: rgba(242,236,224,.85) !important; } html.cosmos #q { color: #F2ECE0 !important; background-color: transparent !important; }
.cz-lamp-slot svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 14px rgba(201,182,255,.5)); }
html.cosmos main > .cz-art { max-width: 760px; margin: 0 auto 21px; }
html.cosmos main > .cz-art.band img { max-height: 46svh; width: auto; max-width: 100%; margin: 0 auto; }