@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&family=Syne:wght@700;800&family=Share+Tech+Mono&display=swap");

:root{
  --void:#10080e;
  --void-2:#1d1019;
  --void-3:#2a1424;
  --paper:#fff4fb;
  --muted:#e8bdd3;
  --hot:#ff3f9f;
  --hot-2:#ff7abc;
  --bubble:#ffc8df;
  --acid:#f8ff7a;
  --blue:#9ce8ff;
  --line:rgba(255,200,223,.22);
  --panel:rgba(35,16,30,.78);
  --shadow:0 28px 90px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--paper);
  font-family:"Space Grotesk", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,63,159,.36), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(255,122,188,.22), transparent 26%),
    radial-gradient(circle at 52% 92%, rgba(248,255,122,.12), transparent 28%),
    linear-gradient(140deg, #11070f 0%, #24101d 46%, #0b090d 100%);
  overflow-x:hidden;
}

body.secret-open{
  overflow:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(rgba(16,8,14,.34), rgba(16,8,14,.9)),
    url("assets/display/background.jpg") center/cover no-repeat;
  filter:saturate(.9) contrast(1.18) brightness(.55);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,63,159,.08), transparent 18%, transparent 82%, rgba(255,63,159,.08)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
}

a{color:inherit}
img{display:block;max-width:100%;height:auto}

.static-layer{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,63,159,.14) 8px 9px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 14px);
  mask-image:linear-gradient(180deg, #000, rgba(0,0,0,.55), #000);
}

.signal-lines{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
}

.signal-lines::before,
.signal-lines::after{
  content:"";
  position:absolute;
  left:-12vw;
  width:124vw;
  height:64px;
  opacity:0;
  background-repeat:no-repeat;
  background-size:100% 100%;
  filter:drop-shadow(0 0 10px rgba(255,63,159,.72));
  transform-origin:center;
}

.signal-lines::before{
  top:28vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' viewBox='0 0 1200 64'%3E%3Cg fill='none' stroke='%23ff5aad' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='-40,32 64,32 92,19 128,44 178,28 260,28 294,42 342,20 430,32 510,32 548,18 584,47 662,31 760,31 800,20 836,43 920,30 1010,30 1052,17 1094,45 1240,32' stroke-width='4.5' opacity='.88'/%3E%3Cpolyline points='-40,38 88,38 116,30 148,48 240,37 330,37 364,49 404,31 512,38 624,38 656,30 694,47 812,36 940,36 974,46 1018,28 1240,38' stroke-width='1.6' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  animation:signalStrikeOne 8.6s steps(1,end) infinite;
}

.signal-lines::after{
  top:62vh;
  height:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='46' viewBox='0 0 1200 46'%3E%3Cg fill='none' stroke='%23ff8fc8' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='-40,24 72,24 100,11 126,34 210,23 304,23 334,35 370,13 468,24 560,24 592,12 628,36 720,22 826,22 858,12 890,34 984,23 1068,23 1102,12 1134,34 1240,23' stroke-width='3.2' opacity='.78'/%3E%3C/g%3E%3C/svg%3E");
  animation:signalStrikeTwo 8.6s steps(1,end) infinite;
}

.site-header{
  position:absolute;
  top:24px;
  right:max(14px, calc((100vw - 1200px) / 2));
  z-index:20;
  width:auto;
}

.site-header-inner{
  display:flex;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  color:#fff;
  text-decoration:none;
  font-family:"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight:900;
  letter-spacing:.03em;
  text-shadow:
    0 0 8px rgba(255,63,159,.82),
    0 0 18px rgba(255,63,159,.42);
}

.brand::before{
  content:none;
}

.brand img{
  width:38px;
  height:38px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.32);
  border-radius:12px;
  box-shadow:0 0 24px rgba(255,63,159,.36);
}

main,
footer{
  position:relative;
  z-index:2;
  width:min(1200px, calc(100% - 28px));
  margin-inline:auto;
}

.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.78fr);
  column-gap:48px;
  row-gap:22px;
  align-items:center;
  padding:34px 0 24px;
}

.kicker,
.mini-kicker,
.label{
  margin:0 0 14px;
  color:var(--bubble);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.72rem;
  font-weight:900;
}

.hero-copy .kicker{
  margin-bottom:4px;
}

.hero-copy .kicker + .kicker{
  margin-top:0;
  margin-bottom:14px;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h1{
  position:relative;
  max-width:760px;
  margin:0 0 20px;
  color:#fff;
  font-family:"Syne", "Space Grotesk", system-ui, sans-serif;
  font-size:clamp(4rem, 11vw, 9.6rem);
  line-height:.82;
  letter-spacing:0;
  text-transform:uppercase;
  text-shadow:
    5px 0 0 rgba(255,63,159,.72),
    -3px 2px 0 rgba(156,232,255,.38),
    0 20px 60px rgba(0,0,0,.55);
}

h1::before,
h1::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
}

h1::before{
  color:var(--hot);
  transform:translate(-9px, 4px);
  clip-path:polygon(0 0, 100% 0, 100% 38%, 0 51%);
  opacity:.55;
}

h1::after{
  color:var(--acid);
  transform:translate(8px, 10px);
  clip-path:polygon(0 58%, 100% 46%, 100% 100%, 0 100%);
  opacity:.46;
  z-index:-1;
}

h2{
  margin-bottom:14px;
  color:#fff;
  font-family:"Syne", "Space Grotesk", system-ui, sans-serif;
  font-size:clamp(2.15rem, 5vw, 4.65rem);
  line-height:.95;
  letter-spacing:0;
}

h3{
  margin-bottom:8px;
  color:#fff;
  font-size:1.25rem;
}

.intro,
.section-heading p,
.world-card p{
  color:var(--muted);
  line-height:1.7;
}

.intro{
  max-width:680px;
  font-size:1.15rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.voice-signal{
  width:min(100%, 520px);
  margin-top:16px;
  padding:10px 12px 9px;
  border:1px solid rgba(255,143,200,.62);
  background:
    repeating-linear-gradient(180deg, rgba(255,63,159,.12) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(24,7,18,.92), rgba(64,18,46,.72), rgba(12,5,11,.88));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 22px rgba(255,63,159,.12),
    0 0 28px rgba(255,63,159,.2);
  clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  color:var(--paper);
  font-family:"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.voice-signal-top,
.voice-signal-bottom{
  display:grid;
  align-items:center;
  gap:8px;
}

.voice-signal-top{
  grid-template-columns:minmax(0,1fr) auto auto;
  margin-bottom:8px;
}

.voice-signal-top span,
.voice-signal-bottom,
.voice-signal-top button{
  text-transform:uppercase;
  letter-spacing:.08em;
}

.voice-signal-top span{
  color:var(--hot-2);
  font-size:.76rem;
  font-weight:900;
  text-shadow:0 0 12px rgba(255,63,159,.72);
}

.voice-signal-top strong{
  min-width:76px;
  color:#fff;
  font-size:.95rem;
  text-align:right;
  text-shadow:
    1px 0 0 rgba(255,63,159,.85),
    -1px 0 0 rgba(156,232,255,.4),
    0 0 12px rgba(255,63,159,.72);
}

.voice-signal-top button{
  min-height:28px;
  padding:5px 12px;
  border:1px solid rgba(255,143,200,.78);
  border-radius:0;
  color:#fff;
  background:rgba(255,63,159,.18);
  font:inherit;
  font-size:.75rem;
  cursor:pointer;
  box-shadow:inset 0 0 12px rgba(255,63,159,.18);
  clip-path:polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.voice-signal-top button:hover,
.voice-signal-top button:focus-visible{
  background:rgba(255,63,159,.32);
  border-color:rgba(255,240,249,.95);
}

.voice-signal-top button:focus-visible{
  outline:2px solid var(--bubble);
  outline-offset:2px;
}

.voice-scale{
  position:relative;
  height:18px;
  overflow:hidden;
  border:1px solid rgba(255,200,223,.28);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 20px),
    rgba(7,2,6,.78);
}

.voice-band,
.voice-needle,
.voice-tick{
  position:absolute;
  top:0;
  bottom:0;
}

.voice-band.lower{
  left:0;
  width:38.6%;
  background:
    linear-gradient(90deg, rgba(86,190,255,.42), rgba(156,232,255,.28)),
    rgba(30,102,170,.24);
}

.voice-band.overlap{
  left:38.6%;
  width:18.2%;
  background:
    linear-gradient(90deg, rgba(156,232,255,.26), rgba(255,200,223,.22), rgba(255,122,188,.28)),
    rgba(248,255,122,.1);
}

.voice-band.higher{
  left:56.8%;
  right:0;
  background:
    linear-gradient(90deg, rgba(255,122,188,.32), rgba(255,63,159,.5)),
    rgba(160,22,103,.28);
}

.voice-tick{
  width:1px;
  color:rgba(255,244,251,.72);
  font-size:.62rem;
  line-height:16px;
  text-shadow:0 0 8px rgba(255,63,159,.8);
}

.voice-tick::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:1px;
  background:rgba(255,244,251,.44);
}

.voice-tick.low{left:2.2%}
.voice-tick.mid{left:38.6%}
.voice-tick.high{left:79.5%}

.voice-needle{
  left:0;
  width:3px;
  opacity:0;
  background:#fff;
  box-shadow:
    0 0 0 1px rgba(255,63,159,.7),
    0 0 14px rgba(255,63,159,.95),
    0 0 24px rgba(156,232,255,.52);
  transform:translateX(-1px);
  transition:left .14s ease, opacity .14s ease;
}

.voice-signal.is-listening .voice-needle{
  opacity:1;
}

.voice-signal-bottom{
  grid-template-columns:repeat(3, auto) minmax(0,1fr);
  margin-top:6px;
  color:rgba(255,244,251,.62);
  font-size:.62rem;
}

.voice-signal-bottom em{
  justify-self:end;
  overflow:hidden;
  max-width:100%;
  color:var(--bubble);
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.voice-signal-bottom span:first-child{
  color:var(--blue);
  text-shadow:0 0 8px rgba(156,232,255,.7);
}

.voice-signal-bottom span:nth-child(2){
  color:var(--bubble);
}

.voice-signal-bottom span:nth-child(3){
  color:var(--hot-2);
  text-shadow:0 0 8px rgba(255,63,159,.72);
}

.button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 22px;
  border:1px solid rgba(255,63,159,.9);
  border-radius:10px;
  color:#fff;
  background:
    repeating-linear-gradient(180deg, rgba(255,63,159,.18) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(255,63,159,.22), rgba(12,5,11,.7) 42%, rgba(255,63,159,.12)),
    rgba(12,5,11,.86);
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  text-decoration:none;
  font-family:"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight:900;
  letter-spacing:.03em;
  text-shadow:
    2px 0 0 rgba(255,63,159,.85),
    -1px 0 0 rgba(156,232,255,.38),
    0 0 10px rgba(255,63,159,.8);
  box-shadow:
    inset 0 0 0 1px rgba(255,200,223,.16),
    inset 0 0 18px rgba(255,63,159,.16),
    0 0 18px rgba(255,63,159,.32);
  transition:transform .12s steps(2,end), border-color .12s ease, box-shadow .12s ease, color .12s ease;
}

.button::before,
.button::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.button::before{
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,.58) 14% 16%, transparent 16% 72%, rgba(255,63,159,.48) 72% 74%, transparent 74%);
  opacity:.34;
  mix-blend-mode:screen;
}

.button::after{
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--hot), transparent);
  opacity:.86;
}

.button.primary{
  border-color:rgba(255,143,200,.98);
  color:#fff;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, #ff3f9f, #a80962 58%, #1a0714);
  text-shadow:
    2px 0 0 rgba(156,232,255,.38),
    -2px 0 0 rgba(255,200,223,.42),
    0 0 13px rgba(255,63,159,.95);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 20px rgba(255,255,255,.12),
    0 0 22px rgba(255,63,159,.62),
    0 0 52px rgba(255,63,159,.26);
}

.button:hover,
.button:focus-visible{
  color:#fff;
  border-color:rgba(255,240,249,.98);
  transform:translate(2px, -1px);
  animation:buttonGlitch .34s steps(2,end);
  box-shadow:
    inset 0 0 18px rgba(255,63,159,.28),
    0 0 24px rgba(255,63,159,.68),
    0 0 64px rgba(255,63,159,.3);
}

.button:hover::before,
.button:focus-visible::before{
  opacity:.68;
  animation:buttonGlitchSlice .34s steps(2,end);
}

.button:focus-visible{
  outline:2px solid var(--bubble);
  outline-offset:3px;
}

.hero-collage{
  position:relative;
  min-height:540px;
}

.hero-collage::before{
  content:"";
  position:absolute;
  inset:36px 0 40px 56px;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 1px, transparent 1px 12px),
    rgba(255,63,159,.09);
  transform:rotate(-4deg);
}

.hero-collage::after{
  content:"";
  position:absolute;
  left:18px;
  top:70px;
  width:92%;
  height:72%;
  border:1px dashed rgba(255,200,223,.48);
  transform:rotate(3deg);
  pointer-events:none;
}

.hero-avatar{
  position:absolute;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.hero-avatar.main{
  right:4%;
  top:34px;
  width:min(420px, 82%);
  aspect-ratio:1;
  border-radius:28px;
  transform:rotate(3deg);
}

.hero-avatar.main:hover{
  transform:translateY(-12px) rotate(3deg) scale(1.015);
  animation:imageGlitchMain .42s steps(2,end);
  box-shadow:
    var(--shadow),
    0 0 34px rgba(255,63,159,.34);
}

.hero-avatar.real{
  left:0;
  bottom:34px;
  width:min(190px, 38%);
  aspect-ratio:1;
  border-radius:22px;
  transform:rotate(-8deg);
  filter:saturate(.9) contrast(1.05);
}

.hero-avatar.real:hover{
  transform:translateY(-12px) rotate(-8deg) scale(1.025);
  animation:imageGlitchReal .42s steps(2,end);
  filter:saturate(1.02) contrast(1.08);
  box-shadow:
    var(--shadow),
    0 0 30px rgba(255,63,159,.34);
}

.glitch-card{
  position:absolute;
  right:0;
  bottom:80px;
  z-index:2;
  width:min(270px, 68%);
  padding:16px;
  border:1px solid rgba(255,200,223,.42);
  border-radius:16px;
  background:rgba(20,7,17,.84);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}

.glitch-card span{
  display:block;
  color:var(--hot-2);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.68rem;
  font-weight:900;
}

.glitch-card strong{
  display:block;
  margin-top:6px;
  font-family:"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing:.02em;
}

.glitch-card strong::after{
  content:"_";
  display:inline-block;
  margin-left:3px;
  color:var(--hot-2);
  animation:cursorBlink .85s steps(1,end) infinite;
}

.ticker{
  position:relative;
  z-index:3;
  grid-column:1 / -1;
  align-self:end;
  overflow:hidden;
  margin:0;
  border-block:1px solid rgba(255,63,159,.42);
  background:
    radial-gradient(circle, rgba(255,63,159,.18) 0 1px, transparent 1.5px) 0 0/10px 10px,
    linear-gradient(180deg, #050205, #10080e);
  box-shadow:
    inset 0 0 28px rgba(255,63,159,.14),
    0 0 30px rgba(255,63,159,.12);
  color:var(--hot-2);
}

.ticker div{
  display:flex;
  width:max-content;
  min-width:200%;
  gap:18px;
  padding:11px 0;
  animation:ticker 72s linear infinite;
}

.ticker span{
  padding-inline:12px;
  color:var(--hot-2);
  text-shadow:
    0 0 4px rgba(255,63,159,.95),
    0 0 12px rgba(255,63,159,.58),
    1px 0 0 rgba(255,200,223,.45);
  text-transform:uppercase;
  letter-spacing:.16em;
  white-space:nowrap;
  font-size:.9rem;
  font-weight:900;
}

.showcase,
.music-showcase{
  content-visibility:auto;
  contain-intrinsic-size:900px;
  display:grid;
  grid-template-columns:minmax(250px,.42fr) minmax(0,1fr);
  gap:28px;
  align-items:start;
  padding:62px 0;
}

.showcase{
  gap:58px;
  padding-bottom:20px;
}

.section-heading{
  position:sticky;
  top:104px;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  grid-auto-flow:dense;
  gap:0;
  padding:36px 0 32px;
  perspective:900px;
}

.gallery-card,
.secret-card,
.world-card,
.smol-player{
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,63,159,.08), transparent 42%),
    var(--panel);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.gallery-card,
.secret-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,200,223,.24);
}

.gallery-card img,
.secret-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gallery-card::after,
.secret-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, transparent 32%, rgba(16,8,14,.92)),
    linear-gradient(90deg, rgba(255,63,159,.18), transparent 44%),
    repeating-linear-gradient(180deg, rgba(255,63,159,.16) 0 1px, transparent 1px 7px);
  mix-blend-mode:screen;
}

.gallery-card{
  grid-column:span 2;
  min-height:330px;
  margin:-10px;
  transform:rotate(-2.8deg) translateY(18px);
  transition:transform .18s steps(2,end), box-shadow .18s ease, filter .18s ease;
}

.gallery-card::before{
  content:"";
  position:absolute;
  inset:12px;
  z-index:1;
  border:1px dashed rgba(255,200,223,.34);
  opacity:.72;
  pointer-events:none;
}

.gallery-card.tall{
  grid-column:span 2;
  grid-row:span 2;
  min-height:620px;
  transform:rotate(3.4deg) translateY(-20px);
}

.gallery-card.wide{
  grid-column:span 3;
  transform:rotate(-1.2deg) translate(14px, -10px);
}

.gallery-card:nth-child(2){
  transform:rotate(2deg) translate(-26px, 30px);
}

.gallery-card:nth-child(3){
  transform:rotate(-4.8deg) translate(18px, -12px);
}

.gallery-card:nth-child(5){
  transform:rotate(4.2deg) translate(-28px, 18px);
}

.gallery-card:nth-child(6){
  transform:rotate(-2.2deg) translate(24px, -34px);
}

.gallery-card:nth-child(7){
  transform:rotate(2.8deg) translate(-30px, -6px);
}

.gallery-card:nth-child(8){
  transform:rotate(-3.6deg) translate(22px, -28px);
}

.gallery-card:nth-child(9){
  transform:rotate(4.6deg) translate(-22px, 8px);
}

.gallery-card:nth-child(10){
  transform:rotate(-1.8deg) translate(22px, -42px);
}

.gallery-card:nth-child(11){
  transform:rotate(3.1deg) translate(-30px, -18px);
}

.gallery-card:nth-child(12){
  grid-column:span 3;
  transform:rotate(-4deg) translate(18px, -48px);
}

.gallery-card:hover{
  z-index:4;
  filter:saturate(1.12) contrast(1.08);
  transform:rotate(0deg) translateY(-12px) scale(1.035);
  animation:galleryGlitch .34s steps(2,end);
  box-shadow:
    var(--shadow),
    0 0 34px rgba(255,63,159,.34);
}

.gallery-card h3{
  position:absolute;
  left:14px;
  right:14px;
  bottom:10px;
  z-index:1;
  margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}

.mystery-card{
  display:grid;
  place-items:center;
  border-style:dashed;
  color:#fff;
  font:inherit;
  cursor:pointer;
  background:
    repeating-linear-gradient(180deg, rgba(255,63,159,.24) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 50% 36%, rgba(255,63,159,.34), transparent 38%),
    linear-gradient(135deg, rgba(10,4,10,.95), rgba(60,8,42,.86));
}

.mystery-card::after{
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.16) 18% 20%, transparent 20% 62%, rgba(255,63,159,.32) 62% 65%, transparent 65%),
    repeating-linear-gradient(180deg, rgba(255,63,159,.28) 0 1px, transparent 1px 6px);
}

.mystery-card span{
  position:relative;
  z-index:2;
  font-family:"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size:clamp(3.4rem, 8vw, 7rem);
  line-height:1;
  text-shadow:
    3px 0 0 rgba(156,232,255,.44),
    -3px 0 0 rgba(255,63,159,.82),
    0 0 28px rgba(255,63,159,.82);
}

.mystery-card em{
  position:relative;
  z-index:2;
  margin-top:-42px;
  color:var(--hot-2);
  font-style:normal;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.mystery-card:hover,
.mystery-card:focus-visible,
.mystery-card[aria-expanded="true"]{
  animation:galleryGlitch .34s steps(2,end);
  filter:saturate(1.35) contrast(1.16);
  box-shadow:
    var(--shadow),
    0 0 38px rgba(255,63,159,.48),
    inset 0 0 28px rgba(255,63,159,.18);
}

.mystery-card:focus-visible{
  outline:2px solid var(--bubble);
  outline-offset:4px;
}

.secret-gallery{
  position:fixed;
  inset:0;
  z-index:20;
  display:grid;
  place-items:start center;
  min-height:100dvh;
  padding:clamp(74px, 8vh, 104px) clamp(18px, 4vw, 48px) clamp(44px, 6vh, 72px);
  overflow:auto;
  overscroll-behavior:contain;
  background:
    repeating-linear-gradient(180deg, rgba(255,63,159,.1) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 50% 20%, rgba(255,63,159,.22), transparent 38%),
    rgba(3,0,3,.78);
  backdrop-filter:blur(12px) saturate(1.2);
  opacity:0;
  transform:scale(.98);
}

.secret-gallery[hidden]{
  display:none;
}

.secret-gallery.is-open{
  opacity:1;
  transform:scale(1);
  animation:drawerReveal .36s steps(3,end);
}

.secret-close{
  position:fixed;
  right:clamp(18px, 4vw, 48px);
  top:clamp(18px, 4vw, 42px);
  z-index:2;
  width:48px;
  height:48px;
  border:1px solid rgba(255,200,223,.54);
  border-radius:0;
  color:#fff;
  background:
    repeating-linear-gradient(180deg, rgba(255,63,159,.24) 0 1px, transparent 1px 6px),
    rgba(28,4,20,.86);
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 0 24px rgba(255,63,159,.34);
}

.secret-close:hover,
.secret-close:focus-visible{
  animation:buttonGlitch .32s steps(2,end);
  outline:2px solid var(--bubble);
  outline-offset:3px;
}

.secret-grid{
  width:min(1060px, 100%);
  overflow:visible;
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:0;
  padding:58px 28px 72px;
  border:1px solid rgba(255,63,159,.42);
  background:
    linear-gradient(135deg, rgba(255,63,159,.12), transparent 38%),
    repeating-linear-gradient(180deg, rgba(255,63,159,.14) 0 1px, transparent 1px 8px),
    rgba(10,3,9,.86);
  box-shadow:
    inset 0 0 44px rgba(255,63,159,.16),
    0 0 64px rgba(255,63,159,.22),
    0 34px 80px rgba(0,0,0,.58);
}

.secret-card{
  grid-column:span 2;
  min-height:230px;
  margin:-8px;
  transform:rotate(-2deg);
}

.secret-card.wide{
  grid-column:span 3;
}

.secret-card.tall{
  grid-row:span 2;
  min-height:440px;
}

.secret-card:nth-child(2){
  transform:rotate(2.8deg) translate(-18px, 18px);
}

.secret-card:nth-child(3){
  transform:rotate(-4deg) translate(16px, -8px);
}

.secret-card:nth-child(4){
  transform:rotate(3.5deg) translate(-20px, -10px);
}

.secret-card:nth-child(5){
  transform:rotate(-1.4deg) translate(18px, 22px);
}

.secret-card:nth-child(6){
  transform:rotate(2deg) translate(-12px, -18px);
}

.secret-card:nth-child(7){
  transform:rotate(-3.2deg) translate(20px, -6px);
}

.secret-card:hover{
  z-index:4;
  filter:saturate(1.2) contrast(1.12);
  animation:galleryGlitch .34s steps(2,end);
}

.secret-card h3{
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  z-index:1;
  margin:0;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.82);
}

.label{
  display:inline-flex;
  width:max-content;
  margin-bottom:16px;
  padding:8px 12px;
  border:1px solid rgba(255,63,159,.88);
  border-radius:0;
  color:var(--hot-2);
  background:
    repeating-linear-gradient(180deg, rgba(255,63,159,.18) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(4,1,4,.96), rgba(26,4,18,.9));
  box-shadow:
    inset 0 0 0 1px rgba(255,200,223,.08),
    0 0 16px rgba(255,63,159,.2);
  font-family:"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing:.12em;
  text-shadow:
    1px 0 0 rgba(156,232,255,.32),
    0 0 10px rgba(255,63,159,.58);
}

.world-card:hover .label{
  animation:galleryGlitch .3s steps(2,end);
  border-color:rgba(255,200,223,.95);
  box-shadow:
    inset 0 0 18px rgba(255,63,159,.14),
    0 0 22px rgba(255,63,159,.32);
}

.smol-player{
  overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,63,159,.32), transparent 32%),
    radial-gradient(circle at 92% 20%, rgba(255,200,223,.16), transparent 28%),
    rgba(22,8,18,.86);
}

.now-playing{
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 72px;
  gap:20px;
  align-items:center;
  padding:24px;
  border-bottom:1px solid var(--line);
}

.now-cover{
  width:132px;
  height:132px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.22);
  border-radius:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.36);
}

.now-copy h3{
  margin:0 0 8px;
  color:#fff;
  font-family:"Syne", "Space Grotesk", system-ui, sans-serif;
  font-size:clamp(1.75rem, 4vw, 3.5rem);
  line-height:.96;
}

.now-copy p{
  color:var(--muted);
  font-weight:800;
}

.big-play{
  width:62px;
  height:62px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  color:#210b18;
  background:linear-gradient(135deg, var(--hot), var(--bubble));
  font-size:1.2rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 30px rgba(255,63,159,.34);
}

.player-controls{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  gap:12px;
  align-items:center;
  padding:18px 24px 20px;
  border-bottom:1px solid var(--line);
}

.time{
  color:var(--muted);
  font-size:.92rem;
  font-weight:900;
  text-align:center;
}

.seek{
  width:100%;
  accent-color:var(--hot);
}

.song-list{
  display:grid;
  max-height:318px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,63,159,.78) rgba(255,255,255,.08);
}

.song-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  width:100%;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.song-button{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 48px;
  gap:15px;
  align-items:center;
  width:100%;
  min-width:0;
  padding:14px 12px 14px 20px;
  border:0;
  color:#fff;
  background:transparent;
  text-align:left;
  cursor:pointer;
  font:inherit;
}

.song-row:has(.song-button:hover),
.song-row:has(.song-button.active){
  background:rgba(255,63,159,.13);
}

.song-button.active{
  box-shadow:inset 4px 0 0 var(--hot);
}

.song-thumb{
  width:50px;
  height:50px;
  border-radius:12px;
  object-fit:cover;
}

.song-meta strong,
.song-meta span{
  display:block;
}

.song-meta{
  min-width:0;
}

.song-meta strong{
  color:#fff;
  font-size:1rem;
  overflow-wrap:anywhere;
}

.song-meta span,
.song-duration{
  color:var(--muted);
  font-weight:800;
}

.song-duration{
  justify-self:end;
}

.song-download{
  display:inline-grid;
  min-height:34px;
  align-items:center;
  margin-right:18px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.09);
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
}

.song-download:hover,
.song-download:focus-visible{
  border-color:rgba(255,63,159,.82);
  background:rgba(255,63,159,.22);
}

.worlds{
  content-visibility:auto;
  contain-intrinsic-size:700px;
  padding:24px 0 62px;
}

.world-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

.world-card{
  min-height:320px;
  padding:22px;
  position:relative;
  overflow:hidden;
}

.world-card::after{
  content:"";
  position:absolute;
  inset:auto -70px -80px auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(255,63,159,.3), transparent 66%);
}

.role{
  color:var(--bubble)!important;
  font-weight:900;
}

footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:18px;
  padding:28px 0 46px;
  border-top:1px solid var(--line);
  color:var(--muted);
}

footer p{
  margin:0;
  font-weight:800;
}

.floaties{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  overflow:hidden;
}

.floaty{
  position:absolute;
  bottom:-40px;
  color:var(--bubble);
  opacity:.52;
  text-shadow:0 0 18px rgba(255,63,159,.9);
  animation:floatUp linear forwards;
}

@keyframes floatUp{
  from{transform:translateY(0) rotate(0)}
  to{transform:translateY(-115vh) rotate(24deg)}
}

@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@keyframes signalStrikeOne{
  0%, 11%, 12%, 13%, 44%, 45%, 46%, 76%, 77%, 100%{opacity:0}
  11.35%{opacity:.92; translate:18px -2px; rotate:0deg; scale:1.02 1}
  12.15%{opacity:.34; translate:-24px 1px; rotate:-7deg; scale:1.1 1}
  44.4%{opacity:.78; translate:-36px 2px; rotate:9deg; scale:1.12 1}
  76.45%{opacity:.86; translate:28px -1px; rotate:-3deg; scale:1.06 1}
}

@keyframes signalStrikeTwo{
  0%, 11.8%, 12.1%, 31%, 32%, 45.2%, 45.8%, 77.4%, 78%, 100%{opacity:0}
  12%{opacity:.66; translate:-14px 1px; rotate:6deg; scale:1.02 1}
  31.5%{opacity:.74; translate:34px -2px; rotate:0deg; scale:1.05 1}
  45.55%{opacity:.58; translate:16px 2px; rotate:-11deg; scale:1.16 1}
  77.72%{opacity:.7; translate:-30px 1px; rotate:4deg; scale:1.04 1}
}

@keyframes cursorBlink{
  0%, 52%{opacity:1}
  53%, 100%{opacity:0}
}

@keyframes imageGlitchMain{
  0%, 100%{transform:translateY(-12px) rotate(3deg) scale(1.015); filter:none}
  18%{transform:translate(-5px, -14px) rotate(3deg) scale(1.018); filter:saturate(1.35) contrast(1.08) hue-rotate(-8deg)}
  30%{transform:translate(6px, -10px) rotate(2.2deg) scale(1.012); filter:saturate(.75) contrast(1.18)}
  48%{transform:translate(-2px, -13px) rotate(3.8deg) scale(1.02); filter:saturate(1.2) contrast(1.05)}
}

@keyframes imageGlitchReal{
  0%, 100%{transform:translateY(-12px) rotate(-8deg) scale(1.025)}
  18%{transform:translate(5px, -14px) rotate(-9deg) scale(1.028); filter:saturate(1.35) contrast(1.12)}
  32%{transform:translate(-6px, -10px) rotate(-7deg) scale(1.02); filter:saturate(.8) contrast(1.18)}
  52%{transform:translate(2px, -13px) rotate(-8.8deg) scale(1.03); filter:saturate(1.15) contrast(1.08)}
}

@keyframes buttonGlitch{
  0%, 100%{transform:translate(2px, -1px)}
  18%{transform:translate(6px, -2px)}
  32%{transform:translate(-4px, 1px)}
  52%{transform:translate(3px, -3px)}
}

@keyframes buttonGlitchSlice{
  0%, 100%{translate:0 0; clip-path:inset(0)}
  22%{translate:8px 0; clip-path:inset(0 0 62% 0)}
  42%{translate:-6px 0; clip-path:inset(38% 0 28% 0)}
  64%{translate:4px 0; clip-path:inset(72% 0 0 0)}
}

@keyframes galleryGlitch{
  0%, 100%{translate:0 0}
  22%{translate:6px -2px}
  44%{translate:-7px 1px}
  66%{translate:3px -1px}
}

@keyframes drawerReveal{
  0%{clip-path:inset(0 0 100% 0); filter:hue-rotate(-14deg)}
  38%{clip-path:inset(0 0 36% 0); filter:hue-rotate(10deg)}
  62%{clip-path:inset(0 0 52% 0); filter:hue-rotate(-8deg)}
  100%{clip-path:inset(0); filter:none}
}

@media (max-width:980px){
  .hero,
  .showcase,
  .music-showcase{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:0;
    padding-top:28px;
    padding-bottom:20px;
  }

  .hero-collage{
    min-height:clamp(500px, 82vw, 720px);
  }

  .section-heading{
    position:static;
  }

  .gallery{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .gallery-card{
    grid-column:span 2;
  }

  .gallery-card.wide{
    grid-column:span 3;
  }

  .world-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  main,
  footer{
    width:min(100% - 20px, 1200px);
  }

  .site-header{
    display:none;
  }

  h1{
    font-size:3.45rem;
  }

  .intro{
    font-size:1.03rem;
  }

  .hero-collage{
    min-height:clamp(480px, 98vw, 640px);
    margin-top:8px;
  }

  .hero-avatar.main{
    right:0;
    top:24px;
    width:min(92%, 560px);
  }

  .hero-avatar.real{
    width:38%;
    bottom:18px;
  }

  .glitch-card{
    right:6px;
    bottom:42px;
  }

  .showcase,
  .music-showcase,
  .worlds{
    padding:44px 0;
  }

  .gallery{
    grid-template-columns:1fr;
    gap:0;
    padding-top:16px;
  }

  .gallery-card.tall,
  .gallery-card.wide{
    margin:0;
    grid-column:auto;
    grid-row:auto;
  }

  .gallery-card,
  .gallery-card.tall{
    margin:0;
    min-height:clamp(280px, 58vw, 380px);
  }

  .gallery-card:not(:first-child){
    margin-top:clamp(-210px, -40vw, -130px);
  }

  .gallery-card,
  .gallery-card.tall,
  .gallery-card.wide,
  .gallery-card:nth-child(2),
  .gallery-card:nth-child(3),
  .gallery-card:nth-child(5),
  .gallery-card:nth-child(6),
  .gallery-card:nth-child(7),
  .gallery-card:nth-child(8),
  .gallery-card:nth-child(9),
  .gallery-card:nth-child(10),
  .gallery-card:nth-child(11),
  .gallery-card:nth-child(12){
    transform:rotate(-1.5deg);
  }

  .gallery-card:nth-child(even){
    transform:rotate(1.5deg);
  }

  .gallery-card:nth-child(2){
    transform:rotate(1.5deg) translateY(-18px);
  }

  .gallery-card:nth-child(3){
    transform:rotate(-1.8deg) translateY(-34px);
  }

  .gallery-card:nth-child(4){
    transform:rotate(1.3deg) translateY(-50px);
  }

  .gallery-card:nth-child(5){
    transform:rotate(-1.4deg) translateY(-66px);
  }

  .gallery-card:nth-child(6){
    transform:rotate(1.6deg) translateY(-82px);
  }

  .mystery-card em{
    margin-top:-24px;
  }

  .secret-gallery{
    padding:68px 16px 28px;
    align-items:start;
  }

  .secret-close{
    right:16px;
    top:14px;
    width:42px;
    height:42px;
    font-size:1.75rem;
  }

  .secret-grid{
    grid-template-columns:1fr;
    max-height:none;
    overflow:visible;
    padding:34px 0 46px;
  }

  .secret-card,
  .secret-card.wide,
  .secret-card.tall{
    grid-column:auto;
    grid-row:auto;
    min-height:clamp(260px, 58vw, 360px);
    margin:0;
  }

  .secret-card:not(:first-child){
    margin-top:clamp(-190px, -36vw, -112px);
  }

  .secret-card,
  .secret-card.wide,
  .secret-card.tall,
  .secret-card:nth-child(2),
  .secret-card:nth-child(3),
  .secret-card:nth-child(4),
  .secret-card:nth-child(5),
  .secret-card:nth-child(6),
  .secret-card:nth-child(7){
    transform:rotate(-1.3deg);
  }

  .secret-card:nth-child(even){
    transform:rotate(1.4deg);
  }

  .now-playing{
    grid-template-columns:82px minmax(0,1fr) 50px;
    gap:14px;
    padding:18px;
  }

  .now-cover{
    width:82px;
    height:82px;
  }

  .big-play{
    width:46px;
    height:46px;
    font-size:1rem;
  }

  .player-controls{
    grid-template-columns:42px minmax(0,1fr) 42px;
    padding:14px 18px;
  }

  .song-row{
    grid-template-columns:minmax(0,1fr);
  }

  .song-button{
    grid-template-columns:48px minmax(0,1fr);
    padding:14px 18px 8px;
  }

  .song-thumb{
    width:44px;
    height:44px;
  }

  .song-duration{
    display:none;
  }

  .song-download{
    justify-self:start;
    margin:0 0 14px 84px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
  }
  .hero-avatar.main:hover,
  .hero-avatar.main{
    transform:rotate(3deg);
  }
  .hero-avatar.real:hover{
    transform:rotate(-8deg);
  }
  .floaties,
  .signal-lines{display:none}
}