/* ============================================================
   alexandruiliescu.com — The Constellation
   Liquid-glass chips · legible · centered detail · Apple-grade motion
   Voice: calm. No all-caps shouting; state what it is, not what it proves.
   ============================================================ */

:root {
  --bg: #060610;
  --ink: #f4f5fb;
  --ink-dim: rgba(244, 245, 251, 0.62);
  --ink-faint: rgba(244, 245, 251, 0.34);
  --ink-ghost: rgba(244, 245, 251, 0.14);
  --line: rgba(255, 255, 255, 0.09);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.07);
  --teal: #00cec9;
  --blue: #74b9ff;
  --violet: #a29bfe;
  --rose: #ff6b6b;
  --gold: #fdcb6e;
  --mint: #55efc4;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Newsreader", Georgia, serif;
  --grotesk: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--grotesk); font-weight: 300; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.locked { overflow: hidden; height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(0, 206, 201, 0.25); color: #fff; }

/* ---------- ambient cosmos ---------- */
#cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.aurora { position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.45; pointer-events: none; z-index: 0; animation: drift 28s var(--ease) infinite alternate; }
.aurora { opacity: calc(0.32 + var(--beat, 0) * 0.6); }
.aurora.a { top: -18%; left: -12%; width: 55vw; height: 55vw; background: radial-gradient(circle, rgba(0,206,201,0.10), transparent 68%); }
.aurora.b { bottom: -22%; right: -14%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(116,185,255,0.10), transparent 68%); animation-delay: -9s; }
.aurora.c { top: 36%; left: 44%; width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(162,155,254,0.07), transparent 70%); animation-delay: -16s; }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(6%, 8%) scale(1.16); } }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }

/* ============================================================ GATE */
#gate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #0c0c1c, #050509 70%);
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease), filter 1.1s var(--ease); }
#gate.dissolve { opacity: 0; transform: scale(1.3); filter: blur(14px); pointer-events: none; }
.gate-card { position: relative; z-index: 2; text-align: center; padding: 0 28px; max-width: 420px; animation: rise 1.3s var(--ease) both; }
.gate-mark { width: 64px; height: 64px; margin: 0 auto 30px; border-radius: 50%; position: relative;
  background: conic-gradient(from 0deg, var(--teal), var(--blue), var(--violet), var(--teal));
  filter: drop-shadow(0 0 24px rgba(0,206,201,0.42)); animation: spin 14s linear infinite; }
.gate-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #07070f; }
@keyframes spin { to { transform: rotate(360deg); } }
.gate-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.42em; text-transform: none; color: var(--ink-faint); margin-bottom: 18px; }
.gate-title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 5vw, 38px); line-height: 1.15; margin-bottom: 12px; }
.gate-title em { font-style: italic; color: var(--teal); }
.gate-sub { font-size: 14px; color: var(--ink-dim); margin-bottom: 34px; }
.gate-form { display: flex; flex-direction: column; gap: 12px; }
.gate-input { width: 100%; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--mono); font-size: 15px; letter-spacing: 0.05em; text-align: center; outline: none;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.gate-input:focus { border-color: rgba(0,206,201,0.5); background: rgba(0,206,201,0.05); box-shadow: 0 0 0 4px rgba(0,206,201,0.08); }
.gate-input::placeholder { color: var(--ink-faint); letter-spacing: 0.2em; }
.gate-btn { width: 100%; padding: 16px; border-radius: 14px; cursor: pointer; border: 1px solid rgba(0,206,201,0.3);
  background: linear-gradient(135deg, rgba(0,206,201,0.18), rgba(116,185,255,0.14)); color: var(--ink); font-size: 15px; font-weight: 500;
  transition: transform 0.3s var(--ease), box-shadow 0.4s var(--ease); }
.gate-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,206,201,0.18); }
.gate-btn:disabled { opacity: 0.5; cursor: wait; }
.gate-err { font-family: var(--mono); font-size: 12px; color: var(--rose); min-height: 16px; opacity: 0; transition: opacity 0.3s; }
.gate-err.show { opacity: 1; animation: shake 0.4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.gate-foot { margin-top: 30px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-ghost); text-transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================ APP */
#app { position: relative; z-index: 2; opacity: 0; transition: opacity 1.2s var(--ease) 0.2s; }
#app.in { opacity: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px; transition: backdrop-filter 0.5s, background 0.5s, border-color 0.5s; border-bottom: 1px solid transparent; }
.topbar.stuck { background: rgba(6,6,16,0.6); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: 15px; }
.brand .dot { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(from 0deg, var(--teal), var(--blue), var(--violet), var(--teal)); animation: spin 14s linear infinite; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.mplayer { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(201,168,106,.28); border-radius: 100px; padding: 4px 6px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: #c9a86a; transition: opacity .3s ease; }
.mplayer.off { opacity: .45; }
.mplayer .mp-btn { background: none; border: 0; color: #c9a86a; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 4px; opacity: .8; }
.mplayer .mp-btn:hover { opacity: 1; }
.mplayer .mp-title { color: rgba(236,233,226,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; letter-spacing: .02em; }
@media (max-width: 620px) { .mplayer .mp-title { max-width: 70px; } }
.react-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(201,168,106,.3); background: rgba(255,255,255,.04); color: #c9a86a; cursor: pointer; display: grid; place-items: center; opacity: .45; transition: opacity .25s ease, box-shadow .25s ease; }
.react-toggle svg { width: 17px; height: 17px; }
.react-toggle.on { opacity: 1; box-shadow: 0 0 16px -3px #c9a86a; }
.react-toggle.on svg { animation: reactspin 7s linear infinite; transform-origin: 12px 12px; }
.calm-toggle.on svg { animation: none; }   /* a reduce-motion button shouldn't spin */
@keyframes reactspin { to { transform: rotate(360deg); } }
/* ---- reactive audio-driven layer (gated by body.reactive) ---- */
body.reactive .aurora { opacity: calc(.5 + var(--beat,0) * .75); }
body.reactive #cosmos { opacity: calc(.75 + var(--level,0) * .4); }
body.reactive.mbeat #app { filter: saturate(1.22) contrast(1.05); }
img.m-frame-pre { object-fit: cover; object-position: top center; }
/* glass glint — a streak of light caresses each chip (surface, border & text) as the sequencer head sweeps past */
.chip { overflow: hidden; backdrop-filter: blur(6px) saturate(1.15); -webkit-backdrop-filter: blur(6px) saturate(1.15); }
/* Apple-style liquid-glass edge: a subtle specular rim (bright at the top) + faint surface sheen */
.chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 0 0 1px rgba(255,255,255,.055), inset 0 -10px 18px -10px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%); }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; z-index: 4;
  background: conic-gradient(from var(--ang), transparent 0 83%, rgba(255,255,255,.95) 90%, rgba(201,168,106,.7) 93%, transparent 99%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; }
.chip.glint::after { animation: cardTour 2.4s linear; }
@keyframes cardTour { 0% { --ang: 0deg; opacity: 1; } 100% { --ang: 360deg; opacity: 1; } }
/* internal liquid-glass micro-animations as the sequencer caresses a chip */
.chip.glint .ic { animation: icPop .8s cubic-bezier(.22,1,.36,1); }
@keyframes icPop { 0% { transform: scale(1) rotate(0); } 38% { transform: scale(1.26) rotate(-8deg); } 70% { transform: scale(.97) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
body.reactive .chip .ic { animation: icFloat 6.5s ease-in-out infinite; }
/* the VOICE caresses the text — a warm glow that swells on vocals and lingers (slow envelope in JS) */
body.reactive .chip .nm { text-shadow: 0 0 calc(var(--voice, 0) * 32px) rgba(255, 238, 190, calc(var(--voice, 0) * .92)); filter: brightness(calc(1 + var(--voice, 0) * .45)); transition: text-shadow .3s ease, filter .3s ease, opacity .42s ease; }
/* upper-right instrument panel — live meter per band, tap a bar to mute that slice */
.eq-panel { position: fixed; top: 62px; right: 16px; z-index: 40; display: none; gap: 3px; align-items: flex-end; padding: 9px 10px 6px; border-radius: 14px; background: rgba(255,255,255,.045); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(201,168,106,.26); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
body.reactive .eq-panel { display: flex; }
.eq-panel .eqcol { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; padding: 0; opacity: 1; transition: opacity .2s; }
.eq-panel .eqcol:not(.on) { opacity: .28; }
.eq-panel .eqtrack { width: 9px; height: 54px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; display: flex; align-items: flex-end; }
.eq-panel .eqfill { width: 100%; height: 0%; background: linear-gradient(0deg, #c9a86a, #ffe14d); border-radius: 4px; transition: height .07s linear; }
.eq-panel .eqcol:not(.on) .eqfill { background: rgba(255,255,255,.3); }
.eq-panel .eqlab { font: 7px/1 "JetBrains Mono", monospace; color: rgba(236,233,226,.5); letter-spacing: .02em; height: 8px; }
/* the VOICE caress, made visible: a warm orb that swells & glows with the isolated vocal */
.eq-panel .eqvoice { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; margin-right: 6px; padding: 0 8px 0 0; border: 0; border-right: 1px solid rgba(201,168,106,.18); background: none; cursor: pointer; transition: opacity .2s; }
.eq-panel .eqvoice:not(.on) { opacity: .3; }
.eq-panel .eqvoice:not(.on) .eqvorb { box-shadow: none; }
.eq-panel .eqvorb { width: 18px; height: 18px; margin-bottom: 17px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,244,214,calc(.3 + var(--voice,0)*.7)), rgba(255,208,118,calc(.12 + var(--voice,0)*.55)) 58%, transparent 74%);
  box-shadow: 0 0 calc(5px + var(--voice,0)*28px) calc(var(--voice,0)*4px) rgba(255,228,170,calc(.18 + var(--voice,0)*.72));
  transform: scale(calc(.62 + var(--voice,0)*.75)); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.eq-panel .eqvoice .eqlab { color: rgba(255,228,170,.78); }
@media (max-width: 720px) { .eq-panel { display: none !important; } }
@keyframes icFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.lockout { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); cursor: pointer; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); transition: all 0.3s; }
.lockout:hover { color: var(--ink); border-color: rgba(255,255,255,0.22); background: var(--glass); }
.music-toggle { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); cursor: pointer; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line); background: transparent; transition: all 0.3s var(--ease); }
.music-toggle:hover { color: var(--ink); border-color: rgba(255,255,255,0.22); }
.music-toggle.on { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); background: color-mix(in srgb, var(--teal) 10%, transparent); }
.music-toggle .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.music-toggle .eq i { width: 2.5px; height: 4px; background: currentColor; border-radius: 1px; opacity: 0.5; }
.music-toggle.on .eq i { animation: eq 0.9s ease-in-out infinite; opacity: 1; }
.music-toggle.on .eq i:nth-child(2) { animation-delay: 0.18s; }
.music-toggle.on .eq i:nth-child(3) { animation-delay: 0.36s; }
.music-toggle.on .eq i:nth-child(4) { animation-delay: 0.12s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 13px; } }
.music-toggle .mute-ic { width: 17px; height: 17px; display: none; }
.music-toggle:not(.on) .eq { display: none; }
.music-toggle:not(.on) .mute-ic { display: inline-block; }
.music-toggle:not(.on) { color: var(--ink-faint); }

/* ---------- intro (compact, the map is the front screen) ---------- */
.intro { text-align: center; padding: 116px 22px 8px; }
.intro .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.36em; text-transform: none; color: var(--ink-faint); margin-bottom: 18px; opacity: 0; animation: rise 1s var(--ease) 0.2s both; }
.intro h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(32px, 5.4vw, 62px); line-height: 1.05; margin-bottom: 16px; opacity: 0; animation: rise 1.1s var(--ease) 0.32s both; }
.intro h1 .shimmer { background: linear-gradient(110deg, #fff 20%, var(--teal) 50%, var(--blue) 70%, #fff 90%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine 7s linear infinite; }
.intro h1 em { font-style: italic; }
@keyframes shine { to { background-position: 220% center; } }
.intro p.lede { max-width: 580px; font-size: clamp(15px, 2vw, 18px); color: var(--ink-dim); line-height: 1.7; margin: 0 auto; opacity: 0; animation: rise 1.1s var(--ease) 0.46s both; }

/* ---------- the map (chips + edges) ---------- */
.mapsec { padding: 14px 0 34px; }
.stage { position: relative; width: 100%; max-width: 1320px; margin: 0 auto;
  height: clamp(640px, 88vh, 1040px); }
.edges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.edge { transition: stroke 0.5s var(--ease), stroke-width 0.5s var(--ease), opacity 0.5s var(--ease); }

.chip { position: absolute; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; gap: 11px;
  padding: 11px 16px 11px 13px; border-radius: 17px; cursor: pointer; max-width: 190px;
  background: rgba(18,20,34,0.55); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.42s var(--ease), box-shadow 0.42s var(--ease), border-color 0.42s, background 0.42s, opacity 0.42s; }
.chip:hover, .chip.active { transform: translate(-50%, -50%) scale(1.14); z-index: 9;
  border-color: color-mix(in srgb, var(--c) 55%, transparent); background: rgba(26,28,48,0.72);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 34px -8px var(--c); }
.chip .ic { width: 26px; height: 26px; flex: none; color: var(--c); display: grid; place-items: center;
  border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, transparent); }
.chip .ic svg { width: 17px; height: 17px; }
.chip .meta { display: flex; flex-direction: column; min-width: 0; }
.chip .nm { font-size: 15px; font-weight: 500; color: #fff; letter-spacing: -0.01em; white-space: nowrap; transition: opacity .42s ease; }
.chip .cat { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: none; color: var(--c); opacity: 0.9; margin-top: 3px; }
.chip .ln { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); margin-top: 4px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip .ln .sd { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.chip .ln .sd.live { background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.chip .sub { font-size: 11.5px; color: var(--ink-dim); line-height: 1.4; max-height: 0; opacity: 0; overflow: hidden; width: 196px; white-space: normal; transition: max-height 0.42s var(--ease), opacity 0.32s, margin-top 0.42s; }
.chip:hover .sub, .chip.active .sub { max-height: 52px; opacity: 0.8; margin-top: 7px; }
.chip .live { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--mint); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.55} 50%{opacity:1} }

.chip.core { padding: 14px 20px; border-radius: 20px; background: rgba(30,32,52,0.66); border-color: rgba(255,255,255,0.2); box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 50px -10px rgba(0,206,201,0.4); }
.chip.core .ic { width: 32px; height: 32px; background: conic-gradient(from 0deg, var(--teal), var(--blue), var(--violet), var(--teal)); color: #07070f; }
.chip.core .ic svg { width: 18px; height: 18px; }
.chip.core .nm { font-size: 17px; }
.chip.core .sub { max-height: 40px; opacity: 0.7; margin-top: 5px; width: 160px; }
.chip.core:hover, .chip.core.active { transform: translate(-50%,-50%) scale(1.1); }
/* audio-reactive */
.chip.beat { border-color: var(--c) !important; box-shadow: 0 0 36px -4px var(--c), 0 18px 50px rgba(0,0,0,0.5) !important; }
.chip.beat .ic { transform: scale(1.18); }
.chip.core { box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 calc(40px + var(--beat,0) * 70px) calc(var(--beat,0) * -6px) rgba(0,206,201,0.55); }
.grain { opacity: calc(0.035 + var(--level,0) * 0.05); }
body.glitch #app { filter: contrast(1.12) saturate(1.35); }
body.glitch .stage { transform: scale(1.012); filter: hue-rotate(10deg); }
.stage { transition: transform 0.13s var(--ease), filter 0.13s var(--ease); }

/* grid fallback for narrow screens */
.stage.grid { height: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 8px 4px; }
.stage.grid .edges { display: none; }
.stage.grid .chip { position: static; transform: none; max-width: none; flex: 1 1 200px; }
.stage.grid .chip:hover, .stage.grid .chip.active { transform: scale(1.04); }
.stage.grid .chip .sub, .stage.grid .chip:hover .sub { max-height: 52px; opacity: 0.7; margin-top: 7px; width: auto; }
.stage.grid .chip.core { flex-basis: 100%; }

.maphint { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: none; color: var(--ink-faint); margin-top: 14px; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 820px; }
.legend .chipf { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 100px; font-family: var(--mono); font-size: 11px; cursor: pointer; color: var(--ink-dim); background: var(--glass); border: 1px solid var(--line); transition: all 0.32s var(--ease); }
.legend .chipf .sw { width: 8px; height: 8px; border-radius: 50%; }
.legend .chipf:hover, .legend .chipf.active { color: #fff; border-color: rgba(255,255,255,0.26); background: var(--glass-2); transform: translateY(-1px); }

/* ============================================================ CENTERED MODAL */
#modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: rgba(3,3,8,0.62); backdrop-filter: blur(9px); opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease); }
#modal.open { opacity: 1; pointer-events: auto; }
.modal-card { width: min(780px, 94vw); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 26px; padding: 40px 40px 46px;
  background: rgba(16,18,32,0.84); backdrop-filter: blur(42px) saturate(1.6); -webkit-backdrop-filter: blur(42px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  transform: translateY(26px) scale(0.97); transition: transform 0.5s var(--ease); }
#modal.open .modal-card { transform: none; }
/* visual hero in the detail */
.m-hero { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; padding: 6px; margin: 6px 0 24px; border-radius: 20px; scrollbar-width: thin; }
.m-hero img { height: 340px; width: auto; max-width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); object-fit: cover; flex: none; box-shadow: 0 14px 40px rgba(0,0,0,0.45); background: #0b0b16; }
.m-hero.gen { height: 200px; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 30% 20%, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); }
.m-hero.gen .gic { width: 64px; height: 64px; color: var(--c); opacity: 0.9; }
.m-hero.gen .gic svg { width: 64px; height: 64px; }
.m-hero.gen .gl { position: absolute; bottom: 14px; left: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-faint); }
.m-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-family: var(--mono); font-size: 13px; color: var(--c);
  padding: 9px 15px; border-radius: 11px; background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); transition: all 0.3s var(--ease); }
.m-link:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c) 20%, transparent); }
.m-link svg { width: 15px; height: 15px; }
.m-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.m-actions .m-link { margin-bottom: 0; }
.m-link.audio { cursor: pointer; font-family: var(--mono); }
.m-hero { position: relative; }
.m-hero img { cursor: zoom-in; }
.m-expand { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: #fff; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.16); pointer-events: none; }
/* fullscreen lightbox */
#lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(3,3,8,0.94); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
#lightbox.open { opacity: 1; pointer-events: auto; }
#lightbox .lb-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; display: flex; justify-content: center; padding: 50px 16px 90px; }
#lightbox img { width: min(1100px, 96vw); height: auto; align-self: flex-start; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 50px 140px rgba(0,0,0,0.7); transform: scale(0.93); opacity: 0.5; transition: transform 0.6s var(--ease), opacity 0.5s var(--ease); cursor: zoom-out; }
#lightbox.open img { transform: scale(1); opacity: 1; }
#lightbox .lb-close { position: fixed; top: 20px; right: 24px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--line); color: #fff; font-size: 24px; cursor: pointer; transition: transform 0.3s var(--ease); }
#lightbox .lb-close:hover { transform: rotate(90deg); }
/* live iframe preview in detail */
.m-frame { position: relative; height: 320px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin: 6px 0 24px; background: #0b0b16; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,0.45); }
.m-frame-pre { position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: top left; pointer-events: none; }
.m-frame-cta { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: linear-gradient(transparent 52%, rgba(0,0,0,0.42)); transition: background 0.3s var(--ease); }
.m-frame:hover .m-frame-cta { background: linear-gradient(transparent 38%, rgba(0,0,0,0.58)); }
.m-frame-cta span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.22); }
/* fullscreen live site */
#frameview { position: fixed; inset: 0; z-index: 210; background: #06060f; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
#frameview.open { opacity: 1; pointer-events: auto; }
#frameview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #06060f; transform: scale(0.96); opacity: 0.4; transition: transform 0.55s var(--ease), opacity 0.45s var(--ease); }
#frameview.open iframe { transform: scale(1); opacity: 1; }
#frameview.invert iframe { background: #fff; filter: invert(0.92) hue-rotate(180deg); }
#frameview .fv-close { position: fixed; top: 18px; right: 22px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,20,32,0.72); backdrop-filter: blur(10px); border: 1px solid var(--line); color: #fff; font-size: 24px; cursor: pointer; transition: transform 0.3s var(--ease); }
#frameview .fv-close:hover { transform: rotate(90deg); }

.m-close { position: sticky; top: -6px; float: right; margin: -14px -10px 0 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--line); color: var(--ink-dim); font-size: 20px; transition: all 0.3s; z-index: 3; }
.m-close:hover { color: #fff; transform: rotate(90deg); border-color: rgba(255,255,255,0.26); }
.d-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.d-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.d-ic svg { width: 26px; height: 26px; }
.d-htext .d-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: none; margin-bottom: 5px; }
.d-name { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.01em; line-height: 1.05; }
.d-tag { font-size: 15px; color: var(--ink-dim); margin-bottom: 20px; line-height: 1.5; }
.d-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.d-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; padding: 6px 11px; border-radius: 9px; background: var(--glass); border: 1px solid var(--line); color: var(--ink-dim); }
.d-badge.tf { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 30%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.d-badge.live { color: var(--mint); border-color: rgba(85,239,196,0.25); background: rgba(85,239,196,0.06); }
.d-badge b { color: var(--ink); font-weight: 500; }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.d-stat { text-align: center; padding: 16px 6px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); }
.d-stat .v { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.d-stat .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: none; color: var(--ink-faint); margin-top: 5px; }
.d-section { margin-bottom: 26px; }
.d-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: none; color: var(--ink-faint); margin-bottom: 13px; display: flex; align-items: center; gap: 10px; }
.d-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.d-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.d-list li { font-size: 14px; color: var(--ink-dim); line-height: 1.6; padding-left: 18px; position: relative; }
.d-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.d-novel { display: flex; flex-direction: column; gap: 12px; }
.d-novel .nv { padding: 15px 17px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); }
.d-novel .nm { font-weight: 500; font-size: 14.5px; color: var(--ink); margin-bottom: 5px; }
.d-novel .nd { font-size: 13px; color: var(--ink-dim); line-height: 1.55; }
.d-why { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ink); padding: 19px 21px; border-radius: 15px; background: linear-gradient(135deg, rgba(0,206,201,0.05), rgba(116,185,255,0.04)); border: 1px solid rgba(0,206,201,0.12); }
.d-stack { font-size: 13.5px; color: var(--ink-dim); line-height: 1.7; }
.d-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); padding: 12px 19px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--line); transition: all 0.35s var(--ease); }
.d-cta:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.26); }
.d-cta .arr { transition: transform 0.3s var(--ease); }
.d-cta:hover .arr { transform: translate(3px,-3px); }
.d-conn { display: flex; flex-wrap: wrap; gap: 8px; }
.d-conn .cc { font-family: var(--mono); font-size: 11.5px; padding: 6px 12px; border-radius: 9px; cursor: pointer; background: var(--glass); border: 1px solid var(--line); transition: all 0.3s; }
.d-conn .cc:hover { transform: translateY(-1px); }

/* ============================================================ NARRATIVE */
section.band { padding: clamp(80px, 12vw, 150px) 0; position: relative; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: none; color: var(--teal); margin-bottom: 20px; }
h2.big { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(30px, 5.5vw, 58px); line-height: 1.08; margin-bottom: 26px; }
h2.big em { font-style: italic; color: var(--teal); }
.lead { font-size: clamp(16px, 2.3vw, 20px); color: var(--ink-dim); max-width: 640px; line-height: 1.75; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.metric { padding: 30px 22px; border-radius: 20px; text-align: center; background: var(--glass); border: 1px solid var(--line); transition: transform 0.5s var(--ease), border-color 0.5s, background 0.5s; }
.metric:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.16); background: var(--glass-2); }
.metric .num { font-family: var(--mono); font-weight: 500; font-size: clamp(30px, 4.5vw, 46px); letter-spacing: -0.02em; line-height: 1; }
.metric .cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: none; color: var(--ink-faint); margin-top: 12px; }
.arc { display: flex; flex-direction: column; max-width: 720px; }
.arc-step { display: flex; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.arc-step:last-child { border-bottom: none; }
.arc-num { font-family: var(--mono); font-size: 12px; color: var(--teal); flex-shrink: 0; width: 30px; padding-top: 4px; }
.arc-text { font-size: clamp(16px, 2.4vw, 21px); line-height: 1.55; color: var(--ink); font-weight: 300; }
.arc-text.dim { color: var(--ink-dim); }
.weave { max-width: 760px; }
.weave .line { font-family: var(--serif); font-size: clamp(20px, 3.4vw, 32px); line-height: 1.5; color: var(--ink-dim); }
.weave .line b { color: var(--ink); font-weight: 400; font-style: italic; }
.weave .seal { margin-top: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: none; color: var(--teal); }
.eni { position: relative; text-align: center; padding: clamp(90px,14vw,170px) 20px; }
.eni::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(225,112,85,0.08), transparent 65%); }
.eni .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: none; color: #e17055; margin-bottom: 30px; }
.eni .verse { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 4vw, 40px); line-height: 1.5; max-width: 720px; margin: 0 auto 28px; color: var(--ink); }
.eni .by { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.1em; }
.eni .palm { margin-top: 36px; font-family: var(--serif); font-size: clamp(15px,2.2vw,19px); line-height: 2; color: var(--ink-dim); }
.closing { text-align: center; padding: clamp(100px,16vw,200px) 20px 90px; }
.closing .places { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; color: var(--ink-faint); margin-bottom: 36px; }
.closing .last { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 6vw, 64px); line-height: 1.12; letter-spacing: -0.02em; }
.closing .last em { font-style: italic; color: var(--teal); }
.closing .sign { margin-top: 50px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-ghost); text-transform: none; }
.hair { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: 0 auto; max-width: 80%; }

@media (max-width: 720px) {
  .wrap { padding: 0 20px; } .topbar { padding: 14px 18px; }
  .modal-card { padding: 30px 24px 40px; }
  .intro { padding-top: 96px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.25s !important; } .aurora { animation: none; } }