@font-face { font-family: 'Tilt Neon'; src: url('/neon/fonts/TiltNeon-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { color-scheme: dark; font-family: 'Tilt Neon', sans-serif; color: #efedf6; background: #030305; --energy: 0; --bass: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; overflow-x: hidden; background: #030305; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, #03030555, #03030544 60%, #030305), url('/home/brick-wall-v2.png') center / cover no-repeat; opacity: .38; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 1px solid #ae8bff; outline-offset: 6px; border-radius: 4px; }
button { border: 0; background: none; }
button:disabled { cursor: wait; opacity: .45; }
[hidden] { display: none !important; }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
main { position: relative; z-index: 1; min-height: 100svh; }
.hero { text-align: center; }
.brand { position: fixed; inset: 0; width: 100%; height: 100%; padding: 0; display: block; }
.brand:focus-visible { outline: none; }
.brand:focus-visible .wordmark { text-decoration: underline; text-underline-offset: 8px; }
.logo-stage { position: fixed; left: 50%; top: 32%; width: clamp(140px, 28vh, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); transition: left 1.4s cubic-bezier(.65,0,.35,1), top 1.4s cubic-bezier(.65,0,.35,1), width 1.4s cubic-bezier(.65,0,.35,1); }
.logo-stage::before { content: ''; position: absolute; inset: -56%; z-index: -1; background: url('/neon/images/neon-graffiti-wall-v3.png') center / contain no-repeat; mask-image: radial-gradient(ellipse, #000 48%, transparent 72%); filter: brightness(.7) saturate(.75); opacity: .48; pointer-events: none; }
.poison-logo, .wordmark { color: #fff; filter: url(#skull-morph) drop-shadow(0 0 1px #ffffff44) drop-shadow(0 0 var(--logo-glow, 4px) color-mix(in srgb, var(--neon-color, #fff) 40%, transparent)) drop-shadow(0 0 var(--logo-aura, 8px) color-mix(in srgb, var(--neon-color, #fff) 22%, transparent)); }
.wordmark { filter: url(#letter-morph) drop-shadow(0 0 1px #ffffff44) drop-shadow(0 0 var(--logo-glow, 4px) color-mix(in srgb, var(--neon-color, #fff) 40%, transparent)) drop-shadow(0 0 var(--logo-aura, 8px) color-mix(in srgb, var(--neon-color, #fff) 22%, transparent)); }
.poison-logo { display: block; position: absolute; left: -12.5%; top: -12.5%; width: 125%; height: 125%; overflow: visible; transform: scale(var(--skull-x, 1), var(--skull-y, 1)) rotate(var(--skull-tilt, 0deg)); }
h1 { position: fixed; left: 50%; top: 57%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; font: 400 clamp(36px, 7.8vw, 108px)/1.1 'Tilt Neon', sans-serif; letter-spacing: .055em; color: #fff; transition: left 1.4s cubic-bezier(.65,0,.35,1), top 1.4s cubic-bezier(.65,0,.35,1), transform 1.4s cubic-bezier(.65,0,.35,1), font-size 1.4s cubic-bezier(.65,0,.35,1); }
.sub { position: fixed; left: 50%; top: 66%; transform: translateX(-50%); margin: 0; width: 320px; max-width: 85vw; color: #8b8798; font-size: 12px; line-height: 1.8; letter-spacing: .06em; transition: opacity .35s; pointer-events: none; }
.content { position: fixed; z-index: 2; left: 50%; top: 104px; bottom: 120px; transform: translate(-50%, 8px); width: min(680px, calc(100% - 48px)); display: flex; flex-direction: column; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .5s, transform .7s; }
.content h2 { font-weight: 400; font-size: clamp(26px, 3.5vw, 32px); margin: 0 0 14px; }
.content p { font-size: 13px; line-height: 1.4; color: #aaa5b9; margin: 0 0 10px; }
.riddle p:last-child { margin-bottom: 0; }
.rows { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 5px 12px; margin: 18px 0 0; font-size: 11px; }
.rows dt { color: #817b91; }.rows dd { margin: 0; }
.content a { color: #e2d6fc; text-decoration-color: #7f58b6; text-underline-offset: 5px; }
body.docked .logo-stage { left: 62px; top: 60px; width: 64px; }
body.docked h1 { left: 114px; top: 60px; transform: translate(0, -50%); font-size: 26px; }
body.docked .sub { opacity: 0; }
body.docked .content { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-delay: .7s; }
.music-player { position: fixed; z-index: 4; inset: auto 24px max(22px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.music-controls { display: grid; grid-template-columns: 44px minmax(0, 260px) 44px; gap: 14px; align-items: center; width: min(100%, 376px); padding: 10px 12px; border-top: 1px solid #ae94d124; background: linear-gradient(180deg, #08060d00, #08060d88); }
.music-controls button { width: 44px; height: 44px; padding: 12px; display: grid; place-items: center; color: #c9b4ef; border-radius: 50%; }
.music-controls button:hover { color: #fff; filter: drop-shadow(0 0 7px #c181ff); }
.music-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.track-info { min-width: 0; text-align: center; }
.track-name { display: block; font-size: 13px; white-space: nowrap; }
.track-time { display: block; margin-top: 7px; font-size: 11px; color: #777083; font-variant-numeric: tabular-nums; }
.player-status { color: #aaa2bb; margin: 0; min-height: 15px; font-size: 11px; }
.screening { width: min(1100px, 94vw); max-width: 94vw; padding: 0; border: 1px solid #342c43; background: #08060c; color: #eee; font: 14px 'Tilt Neon', sans-serif; }
.screening::backdrop { background: #030206f5; }.screening video { display: block; width: 100%; max-height: 80vh; background: #000; }
.screening header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }.screening button { padding: 10px 14px; }.screening .play-prompt { display: block; margin: 16px auto; }
@media (max-width: 540px) { .logo-stage { top: 33%; width: min(46vw, 220px); } h1 { top: 56%; font-size: 10vw; }.music-player { left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); } .music-controls { gap: 4px; } .rows { grid-template-columns: 60px 1fr; gap: 6px 12px; margin-top: 18px; } .content { top: 90px; bottom: 110px; } .sub { font-size: 11px; max-width: 240px; top: 63%; } body.docked .logo-stage { left: 47px; top: 48px; width: 50px; } body.docked h1 { left: 88px; top: 48px; font-size: 22px; } .content p { font-size: 13px; } }
@media (max-height: 560px) and (min-width: 600px) { .logo-stage { width: 110px; top: 28%; } h1 { top: 51%; font-size: 44px; } .sub { top: 62%; font-size: 10px; }.music-player { bottom: 3px; } .content { top: 100px; bottom: 96px; } .content h2 { font-size: 28px; margin-bottom: 10px; } .content p { font-size: 13px; line-height: 1.35; margin-bottom: 6px; } .rows { margin-top: 12px; gap: 5px 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .poison-logo, .wordmark { transform: none; filter: drop-shadow(0 0 4px #ffffff33); } }

/* Audio changes the tube width, light intensity and bloom independently. */
.wordmark { display: block; -webkit-text-stroke: var(--letter-stroke, 0px) currentColor; transform: scale(var(--letter-x, 1), var(--letter-y, 1)) skewX(var(--letter-skew, 0deg)); }
.poison-logo, .wordmark { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wordmark { transform: none; -webkit-text-stroke: 0; text-shadow: none; } }

@media (prefers-reduced-motion: reduce) { .poison-logo, .wordmark { transform: none; color: #fff; filter: drop-shadow(0 0 4px #ffffff33); } }

@media (max-width: 540px) and (max-height: 700px) { .content p { font-size: 12px; line-height: 1.4; margin-bottom: 8px; } .content h2 { font-size: 26px; margin-bottom: 10px; } .rows { margin-top: 12px; font-size: 11px; } }

/* Keep the answer with the verse; the unlocked playlist uses minimal controls. */
.content h2 { margin-bottom: 10px; }
.riddle p { margin-bottom: 8px; }
.rows { margin-top: 12px; }
#riddle-answer { width: min(100%, 330px); margin-top: 12px; }
.answer-controls { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ffffff40; }
.answer-controls input { width: 100%; min-width: 0; background: transparent; border: 0; color: #fff; font: inherit; font-size: 13px; padding: 8px 0; outline-offset: 3px; }
.answer-controls input::placeholder { color: #94909e; }
.answer-controls button { padding: 8px 2px; font-size: 12px; }
.answer-controls button:hover { text-shadow: 0 0 8px #ffffff88; }
.content #answer-status { min-height: 15px; font-size: 11px; line-height: 15px; margin: 4px 0 0; }
.secret-playing .content { visibility: hidden; }
.secret-playing .logo-stage { top: 50%; }
.secret-playing .brand { pointer-events: none; }
.secret-playing .music-controls { grid-template-columns: 44px 32px 44px; width: auto; gap: 10px; border: 0; background: none; }
.secret-playing .track-name { font-size: 18px; font-variant-numeric: tabular-nums; }
.secret-playing .track-time { display: none; }
@media (max-width: 540px) and (max-height: 700px) { #riddle-answer { margin-top: 6px; } .rows { margin-top: 6px; } }

/* The longer verse still fits above the answer and music player. */
.content h2 { font-size: 28px; margin-bottom: 8px; }
.riddle p { font-size: 12.5px; line-height: 1.35; margin-bottom: 6px; }
.riddle-question { color: #efedf6; }
.riddle-question strong { font-weight: 400; }
@media (min-width: 700px) { .rows { grid-template-columns: 38px 1.45fr 44px 1fr 50px 1fr; gap: 6px 10px; } }
@media (max-width: 540px) and (max-height: 700px) { .riddle p { font-size: 11.5px; line-height: 1.3; margin-bottom: 5px; } .content h2 { font-size: 24px; } }

.content .about-kicker { font-size: 11px; line-height: 1.3; color: #c2bdcc; margin: 0 0 10px; }
@media (min-width: 700px) and (min-height: 561px) { .content { top: 96px; bottom: 112px; } }
.riddle p { margin-bottom: 4px; }

/* Only the riddle answer accepts text selection. */
body, body * { -webkit-user-select: none; user-select: none; }
#answer { -webkit-user-select: text; user-select: text; }