:root {
  --cream: #fbf8df;
  --paper: #ede1b8;
  --ink: #08110f;
  --dark: #0b1512;
  --ruin-black: #050706;
  --ruin-green: #101c17;
  --ruin-rust: #6b3228;
  --rain-blue: #7ea8c6;
  --sodium: #c49c55;
  --green: #4fa073;
  --blue: #2177a6;
  --cyan: #22c8bd;
  --yellow: #d9d018;
  --coral: #dd766c;
  --line: rgba(8, 17, 15, .15);
  --light-line: rgba(251, 248, 223, .18);
  --shadow: rgba(8, 17, 15, .28);
  --daylight: .6;
  --night: .4;
  --day-progress: 0;
  --age: 0;
  --ruin: 0;
  --contact-ruin: 0;
  --world-decay: 0;
  --worldline-depth: 0;
  --time-mark-load: 0;
  --memory-load: 0;
  --memory-pressure: 0;
  --memory-sediment: 0;
  --archive-load: 0;
  --draw-load: 0;
  --draw-ruin: 0;
  --sound-load: 0;
  --sound-ruin: 0;
  --audio-pulse: 0;
  --audio-progress: 0;
  --audio-room: 0;
  --touch-density: 0;
  --last-touch-x: 50vw;
  --last-touch-y: 50vh;
  --scroll-velocity: 0;
  --scroll-depth: 0;
  --idle-depth: 0;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  --cursor-wet: 0;
  --place-rain: .06;
  --place-humidity: .08;
  --place-decay: 0;
  --place-light: .04;
  --place-rain-scale: 1;
  --place-rain-angle: -8deg;
  --place-noise: .08;
  --place-resonance: .18;
  --current-place-visits: 0;
  --hour-shadow: 0;
  --waterline: .18;
  --rot-warmth: 0;
  --after-rain: 0;
  --rain-strength: .32;
  --storm-load: 0;
  --rain-skew: -8deg;
  --rust: 0;
  --fog-shift: 0px;
  --drip: .25;
  --font-jp: "A1明朝", "A1 Mincho", "A-OTF A1 Mincho Std", "A-OTF A1明朝 Std", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "游明朝体", serif;
  --font-en: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "YuKyokasho", "YuKyokasho Yoko", "Klee", "Hannotate SC", "Tsukushi A Round Gothic", "Hiragino Mincho ProN", serif;
  --font-memo-en: "Times New Roman", Times, serif;
  --font-bit: "Osaka-Mono", "Osaka", "Monaco", "SF Mono", "Courier New", "Hiragino Kaku Gothic ProN", "Yu Gothic", monospace;
  --font-mix: var(--font-jp);
  color-scheme: light dark;
  font-family: var(--font-mix);
}

* {
  box-sizing: border-box;
}

html,
body,
body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

::selection {
  background: transparent;
}

img,
svg,
a,
button {
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: auto;
  overflow-x: clip;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

body {
  margin: 0;
  color: rgba(251,248,223,.9);
  background:
    radial-gradient(circle at 18% 8%, rgba(126, 168, 198, .18), transparent 28vw),
    radial-gradient(circle at 76% 22%, rgba(107, 50, 40, .18), transparent 34vw),
    radial-gradient(circle at 48% 82%, rgba(34, 200, 189, .08), transparent 40vw),
    linear-gradient(180deg, #111713 0%, #070b09 42%, #020302 100%);
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(196, 156, 85, calc(.18 * var(--daylight))), transparent 22vw),
    radial-gradient(circle at var(--moon-x, 22vw) var(--moon-y, 82vh), rgba(126, 168, 198, calc(.22 * var(--night))), transparent 24vw),
    radial-gradient(ellipse at 50% 52%, rgba(34,200,189, calc(var(--memory-load) * .08)), transparent 32vw),
    radial-gradient(ellipse at 52% 82%, rgba(196,156,85, calc(var(--archive-load) * .1)), transparent 38vw),
    radial-gradient(ellipse at 24% 64%, rgba(8,17,15, calc(var(--draw-load) * .16)), transparent 26vw),
    radial-gradient(ellipse at 72% 46%, rgba(126,168,198, calc(var(--place-rain) * .18)), transparent 34vw),
    radial-gradient(ellipse at 22% 72%, rgba(107,50,40, calc(var(--place-decay) * 2.2)), transparent 28vw),
    linear-gradient(115deg, rgba(255,255,255,.08), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(251,248,223,.018) 96px 97px),
    repeating-linear-gradient(0deg, transparent 0 96px, rgba(251,248,223,.014) 96px 97px);
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0, calc(.035 + var(--hour-shadow) * .08)), rgba(0,0,0, calc(.22 + var(--night) * .18 + var(--age) * .12 + var(--world-decay) * .22 + var(--hour-shadow) * .18))),
    radial-gradient(circle at 50% 110%, rgba(126,168,198,.12), transparent 36vw),
    radial-gradient(ellipse at 50% calc(104% - var(--waterline) * 28%), rgba(126,168,198, calc(.06 + var(--waterline) * .12 + var(--memory-sediment) * .06)), transparent calc(26vw + var(--waterline) * 18vw)),
    radial-gradient(ellipse at 18% 22%, rgba(107,50,40, calc(var(--rot-warmth) * .12)), transparent 36vw),
    radial-gradient(ellipse at 32% 78%, rgba(8,17,15, calc(var(--draw-load) * .14)), transparent 30vw),
    linear-gradient(90deg, transparent 0%, rgba(126,168,198, calc((var(--drip) + var(--place-humidity) + var(--scroll-velocity)) * .045)) 42%, transparent 72%),
    radial-gradient(ellipse at 50% 50%, transparent calc(42% - var(--memory-pressure) * 8% - var(--memory-sediment) * 4%), rgba(0,0,0, calc(var(--place-decay) * 1.8 + var(--archive-load) * .08 + var(--scroll-depth) * .08 + var(--idle-depth) * .12 + var(--audio-room) * .1 + var(--memory-pressure) * .12 + var(--memory-sediment) * .1)) 100%);
}

body.place-shift main {
  animation: placeShift .52s cubic-bezier(.16,.84,.2,1) both;
}

body[data-place="archive"]::before {
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(196,156,85, calc(.1 * var(--daylight))), transparent 20vw),
    radial-gradient(ellipse at 42% 34%, rgba(107,50,40,.13), transparent 34vw),
    radial-gradient(ellipse at 68% 82%, rgba(126,168,198,.08), transparent 42vw),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(251,248,223,.022) 72px 73px),
    repeating-linear-gradient(0deg, transparent 0 112px, rgba(107,50,40,.032) 112px 113px);
}

body[data-place="music"]::before {
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(126,168,198, calc(.16 * var(--daylight))), transparent 24vw),
    radial-gradient(ellipse at 50% 50%, rgba(34,200,189,.09), transparent 30vw),
    radial-gradient(ellipse at 72% 78%, rgba(196,156,85,.08), transparent 38vw),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(126,168,198,.026) 54px 55px),
    repeating-linear-gradient(0deg, transparent 0 144px, rgba(251,248,223,.018) 144px 145px);
}

body[data-place="room"]::before {
  background:
    radial-gradient(circle at var(--moon-x, 22vw) var(--moon-y, 82vh), rgba(126,168,198, calc(.22 * var(--night))), transparent 26vw),
    radial-gradient(ellipse at 24% 34%, rgba(79,160,115,.1), transparent 28vw),
    radial-gradient(ellipse at 78% 64%, rgba(107,50,40,.11), transparent 34vw),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(251,248,223,.02) 88px 89px),
    repeating-linear-gradient(0deg, transparent 0 68px, rgba(79,160,115,.026) 68px 69px);
}

body[data-place="links"]::before {
  background:
    radial-gradient(circle at var(--moon-x, 22vw) var(--moon-y, 82vh), rgba(126,168,198, calc(.26 * var(--night))), transparent 22vw),
    radial-gradient(ellipse at 82% 22%, rgba(126,168,198,.16), transparent 28vw),
    radial-gradient(ellipse at 18% 84%, rgba(8,17,15,.26), transparent 38vw),
    repeating-linear-gradient(104deg, transparent 0 38px, rgba(126,168,198,.032) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 120px, rgba(251,248,223,.018) 120px 121px);
}

body.site-idle main {
  filter:
    saturate(calc(1 - var(--idle-depth) * .1))
    brightness(calc(1 - var(--idle-depth) * .08))
    blur(calc(var(--idle-depth) * .28px));
}

body.site-idle .site-header,
body.site-idle .rain-toggle,
body.site-idle .site-clock,
body.site-idle .toybox {
  opacity: calc(1 - var(--idle-depth) * .22);
}

body.scrolling-rain main {
  filter:
    blur(calc(var(--scroll-velocity) * .42px))
    saturate(calc(1 - var(--scroll-velocity) * .08))
    contrast(calc(1 + var(--scroll-velocity) * .05));
}

.cursor-weather {
  position: fixed;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  opacity: calc(var(--cursor-wet) * (.26 + var(--rain-strength) * .18 + var(--world-decay) * .12));
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(251,248,223,.16), transparent 4vw),
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(126,168,198,.18), transparent 14vw),
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(8,17,15,.28), transparent 22vw);
  filter:
    blur(calc(2px + var(--cursor-wet) * 5px))
    contrast(calc(1 + var(--cursor-wet) * .22));
  mix-blend-mode: screen;
  transition: opacity .32s ease;
}

body.site-idle .cursor-weather {
  opacity: calc(.025 + var(--idle-depth) * .08);
}

body.pointer-known .cursor-weather {
  opacity: calc(.035 + var(--cursor-wet) * (.24 + var(--rain-strength) * .16 + var(--world-decay) * .12));
}

.cursor-weather::before,
.cursor-weather::after {
  content: "";
  position: fixed;
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: calc(84px + var(--cursor-wet) * 84px);
  height: calc(42px + var(--cursor-wet) * 58px);
  translate: -50% -50%;
  pointer-events: none;
  border-radius: 52% 48% 56% 44%;
}

.cursor-weather::before {
  background:
    repeating-linear-gradient(100deg, transparent 0 9px, rgba(251,248,223,.12) 9px 10px),
    radial-gradient(ellipse at 50% 50%, rgba(126,168,198,.24), transparent 62%);
  filter: blur(2px);
  mix-blend-mode: color-dodge;
}

.cursor-weather::after {
  width: calc(38px + var(--cursor-wet) * 54px);
  height: calc(130px + var(--cursor-wet) * 90px);
  background: linear-gradient(180deg, rgba(126,168,198,.18), transparent 72%);
  filter: blur(5px);
  opacity: calc(.26 + var(--place-humidity) * .42);
  mix-blend-mode: screen;
  transform: rotate(8deg);
}

body.pointer-wet .rain-drops {
  filter:
    blur(calc(.2px + var(--cursor-wet) * .65px + var(--scroll-velocity) * 1.05px))
    contrast(calc(1 + var(--cursor-wet) * .16));
}

.audio-field {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% calc(88% - var(--sound-load) * 18%), rgba(126,168,198, calc(var(--sound-load) * .16)), transparent calc(20vw + var(--sound-load) * 16vw)),
    radial-gradient(ellipse at calc(50% + var(--audio-progress) * 10%) 42%, rgba(251,248,223, calc(var(--audio-room) * .14)), transparent calc(18vw + var(--audio-room) * 10vw)),
    radial-gradient(ellipse at 50% 78%, rgba(126,168,198,.2), transparent calc(22vw + var(--audio-pulse) * 12vw)),
    radial-gradient(circle at calc(28% + var(--audio-progress) * 44%) 54%, rgba(196,156,85,.12), transparent calc(12vw + var(--audio-pulse) * 8vw)),
    repeating-radial-gradient(ellipse at 50% 88%, transparent 0 calc(22px + var(--audio-pulse) * 9px), rgba(251,248,223,.045) calc(23px + var(--audio-pulse) * 9px) calc(24px + var(--audio-pulse) * 9px));
  filter:
    blur(calc(1.4px + var(--audio-pulse) * 3.2px + var(--audio-room) * 2px + var(--sound-load) * 1.4px))
    saturate(calc(.9 + var(--audio-pulse) * .35 + var(--audio-room) * .22 + var(--sound-load) * .14));
  mix-blend-mode: screen;
  transition: opacity .4s ease;
}

.water-memory {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(.035 + var(--touch-density) * .22 + var(--time-mark-load) * .08 + var(--memory-load) * .05 + var(--ruin) * .08 + var(--waterline) * .08);
  background:
    radial-gradient(ellipse at var(--last-touch-x) var(--last-touch-y), rgba(251,248,223, calc(.1 + var(--touch-density) * .18)), transparent calc(8vw + var(--touch-density) * 14vw)),
    radial-gradient(ellipse at var(--last-touch-x) var(--last-touch-y), rgba(107,50,40, calc(.08 + var(--world-decay) * .12)), transparent calc(18vw + var(--world-decay) * 18vw)),
    radial-gradient(ellipse at 18% calc(82% - var(--day-progress) * 14%), rgba(126,168,198, calc(.08 + var(--place-humidity) * .18)), transparent 26vw),
    radial-gradient(ellipse at 78% calc(74% + var(--day-progress) * 12%), rgba(196,156,85, calc(var(--ruin) * .12)), transparent 30vw),
    linear-gradient(180deg, transparent 0 calc(72% - var(--waterline) * 18%), rgba(126,168,198, calc(.035 + var(--waterline) * .08)) calc(78% - var(--waterline) * 16%), rgba(8,17,15, calc(.08 + var(--world-decay) * .12 + var(--hour-shadow) * .1)) 100%),
    repeating-linear-gradient(92deg, transparent 0 23px, rgba(126,168,198, calc(.018 + var(--rain-strength) * .018)) 23px 24px);
  filter:
    blur(calc(1.2px + var(--place-humidity) * 2.2px + var(--world-decay) * 1.4px + var(--after-rain) * .8px))
    saturate(calc(.88 + var(--night) * .22 + var(--rot-warmth) * .12))
    contrast(calc(1 + var(--world-decay) * .16 + var(--hour-shadow) * .08));
  mix-blend-mode: multiply;
  transform:
    translate3d(calc(var(--scroll-velocity) * -8px), calc(var(--scroll-depth) * -10px), 0)
    scale(calc(1 + var(--idle-depth) * .018));
  transition: opacity .6s ease, filter .8s ease;
}

.water-memory::before,
.water-memory::after {
  content: "";
  position: fixed;
  inset: -8vh -8vw;
  pointer-events: none;
}

.water-memory::before {
  opacity: calc(.18 + var(--touch-density) * .3 + var(--archive-load) * .16);
  background:
    radial-gradient(ellipse at 12% 22%, rgba(126,168,198,.12), transparent 1.8px),
    radial-gradient(ellipse at 46% 72%, rgba(251,248,223,.09), transparent 1.4px),
    radial-gradient(ellipse at 82% 34%, rgba(107,50,40,.1), transparent 1.6px);
  background-size: 167px 211px, 221px 283px, 307px 359px;
  animation: waterMemoryFloat 19s ease-in-out infinite alternate;
}

.water-memory::after {
  opacity: calc(.14 + var(--world-decay) * .26 + var(--ruin) * .18 + var(--waterline) * .18);
  background:
    linear-gradient(180deg, transparent 0 calc(48% - var(--waterline) * 8%), rgba(8,17,15,.22) 68%, rgba(8,17,15,.42) 100%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(196,156,85,.035) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(126,168,198,.028) 71px 72px);
  mask-image: linear-gradient(180deg, transparent 0 28%, #000 58% 100%);
  animation: drownedGrid 24s linear infinite;
}

body.time-jump .water-memory {
  opacity: calc(.12 + var(--touch-density) * .34 + var(--world-decay) * .18);
  filter: blur(.75px) contrast(1.22) saturate(1.05);
}

body.site-idle .water-memory {
  opacity: calc(.07 + var(--idle-depth) * .18 + var(--world-decay) * .12);
}

body.day-100 .water-memory {
  opacity: .34;
  mix-blend-mode: normal;
  filter: blur(3px) grayscale(.48) contrast(1.35);
}

body.site-idle .audio-field {
  opacity: calc(var(--idle-depth) * .05 + var(--sound-load) * .035);
}

body.audio-playing .audio-field {
  opacity: calc(.12 + var(--audio-pulse) * .24 + var(--audio-room) * .32 + var(--night) * .08 + var(--sound-load) * .12);
}

.time-orbit {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(92vw, 760px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  opacity: calc(.08 + var(--time-mark-load) * .18 + var(--ruin) * .12);
  filter:
    blur(calc(.25px + var(--world-decay) * .35px))
    saturate(calc(.9 + var(--night) * .18));
  mix-blend-mode: screen;
}

.time-orbit-ring,
.time-orbit-hand,
.time-orbit-rust {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.time-orbit-ring {
  border: 1px solid rgba(126,168,198,.18);
  background:
    radial-gradient(circle, transparent 0 55%, rgba(126,168,198,.05) 56%, transparent 61%),
    conic-gradient(
      from calc(var(--day-progress) * 360deg),
      rgba(126,168,198,.24),
      transparent 9%,
      rgba(251,248,223,.12) 16%,
      transparent 28%,
      rgba(107,50,40,.14) 58%,
      transparent 72%,
      rgba(196,156,85,.18),
      rgba(126,168,198,.24)
    );
  mask: radial-gradient(circle, transparent 0 43%, #000 44% 58%, transparent 59%);
  animation: timeRingBreathe 7.6s ease-in-out infinite alternate;
}

.time-orbit-hand {
  transform: rotate(calc(var(--day-progress) * 360deg));
}

.time-orbit-hand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7%;
  width: 1px;
  height: 43%;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(251,248,223,.42), rgba(126,168,198,.14), transparent);
  box-shadow:
    0 0 14px rgba(126,168,198,.24),
    0 0 34px rgba(196,156,85,.08);
}

.time-orbit-rust {
  opacity: calc(.16 + var(--time-mark-load) * .34 + var(--ruin) * .38);
  background:
    conic-gradient(
      from calc(var(--day-progress) * -180deg),
      transparent 0 12%,
      rgba(107,50,40,.28) 13% 15%,
      transparent 16% 38%,
      rgba(196,156,85,.16) 39% 40%,
      transparent 41% 66%,
      rgba(126,168,198,.2) 67% 69%,
      transparent 70% 100%
    );
  mask: radial-gradient(circle, transparent 0 49%, #000 50% 54%, transparent 55%);
  filter: blur(1.6px);
}

body.time-jump .time-orbit {
  opacity: calc(.18 + var(--time-mark-load) * .26 + var(--world-decay) * .12);
  filter: blur(.15px) contrast(1.24);
}

body.day-100 .time-orbit {
  opacity: .42;
  mix-blend-mode: multiply;
  filter: blur(2.4px) grayscale(.6) contrast(1.4);
}

@keyframes timeRingBreathe {
  from { scale: .985; opacity: .72; }
  to { scale: 1.025; opacity: 1; }
}

body.worldline-touched::before {
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(196, 156, 85, calc(.16 * var(--daylight))), transparent 22vw),
    radial-gradient(circle at var(--moon-x, 22vw) var(--moon-y, 82vh), rgba(126, 168, 198, calc(.22 * var(--night))), transparent 24vw),
    radial-gradient(ellipse at 50% 52%, rgba(34,200,189, calc(var(--memory-load) * .08)), transparent 32vw),
    radial-gradient(ellipse at 52% 82%, rgba(196,156,85, calc(var(--archive-load) * .1)), transparent 38vw),
    radial-gradient(circle at 12% 72%, rgba(var(--worldline-rgb, 126,168,198), calc(.1 + var(--worldline-depth) * .08)), transparent 30vw),
    radial-gradient(ellipse at 84% 20%, rgba(var(--worldline-rgb, 126,168,198), calc(var(--worldline-depth) * .08)), transparent 26vw),
    radial-gradient(ellipse at 72% 46%, rgba(126,168,198, calc(var(--place-rain) * .18)), transparent 34vw),
    radial-gradient(ellipse at 22% 72%, rgba(107,50,40, calc(var(--place-decay) * 2.2)), transparent 28vw),
    linear-gradient(115deg, rgba(255,255,255,.08), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(251,248,223,.018) 96px 97px),
    repeating-linear-gradient(0deg, transparent 0 96px, rgba(251,248,223,.014) 96px 97px);
}

body.worldline-0 { --worldline-rgb: 126,168,198; }
body.worldline-1 { --worldline-rgb: 107,50,40; }
body.worldline-2 { --worldline-rgb: 79,160,115; }
body.worldline-3 { --worldline-rgb: 196,156,85; }

body.worldline-1 .weather-layer {
  filter: sepia(.12) hue-rotate(-14deg) contrast(1.08);
}

body.worldline-2 .weather-layer {
  filter: hue-rotate(24deg) saturate(1.1);
}

body.worldline-3 .weather-layer {
  filter: sepia(.18) brightness(1.06);
}

body.worldline-deep .site-clock {
  border-color: rgba(var(--worldline-rgb, 126,168,198), .34);
  box-shadow: 0 0 24px rgba(var(--worldline-rgb, 126,168,198), .12);
}

body.worldline-touched .section {
  background-blend-mode: screen, multiply, normal;
}

body.world-persisted .water-memory {
  opacity: calc(.055 + var(--touch-density) * .24 + var(--time-mark-load) * .08 + var(--memory-load) * .05 + var(--ruin) * .08);
}

body.world-persisted .grain {
  background-size:
    calc(5px - var(--contact-ruin) * 1px) calc(5px - var(--contact-ruin) * 1px),
    4px 4px;
}

body.world-persisted .site-clock::after {
  opacity: calc(.18 + var(--contact-ruin) * .7);
}

body.worldline-touched .release-card,
body.worldline-touched .featured-cover,
body.worldline-touched .room-photo,
body.worldline-touched .profile img,
body.worldline-touched .link-list a {
  border-color: rgba(var(--worldline-rgb, 126,168,198), calc(.13 + var(--worldline-depth) * .12));
}

body.worldline-touched .release-card::before,
body.worldline-touched .featured-cover::before,
body.worldline-touched .room-photo::before {
  opacity: calc(.28 + var(--worldline-depth) * .2);
}

body.worldline-1 .release-card,
body.worldline-1 .featured-cover,
body.worldline-1 .room-photo {
  box-shadow:
    0 24px 78px rgba(0,0,0,.58),
    0 0 64px rgba(107,50,40, calc(.08 + var(--worldline-depth) * .12));
}

body.worldline-2 .release-card img,
body.worldline-2 .featured-cover img,
body.worldline-2 .room-photo img,
body.worldline-2 .profile img {
  filter:
    saturate(calc(.78 - var(--world-decay) * .22))
    contrast(calc(1.05 + var(--world-decay) * .24))
    brightness(calc(.8 - var(--world-decay) * .16))
    hue-rotate(calc(var(--worldline-depth) * 12deg));
}

body.worldline-3 .hero-actions a,
body.worldline-3 .play-inline,
body.worldline-3 .music-copy a,
body.worldline-3 .toybox-toggle {
  box-shadow:
    inset 0 0 0 1px rgba(196,156,85,.18),
    0 0 32px rgba(196,156,85, calc(.08 + var(--worldline-depth) * .12));
}

body.time-aged main::before,
body.world-touched main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(var(--world-decay) * .46 + var(--after-rain) * .18);
  background:
    radial-gradient(circle at 12% 18%, rgba(107,50,40, calc(.16 + var(--rot-warmth) * .18)), transparent 18vw),
    radial-gradient(circle at 82% 76%, rgba(196,156,85, calc(.1 + var(--rot-warmth) * .12)), transparent 22vw),
    radial-gradient(ellipse at calc(50% + var(--fog-shift)) 38%, rgba(126,168,198,.08), transparent 34vw),
    linear-gradient(180deg, transparent 0 calc(66% - var(--waterline) * 18%), rgba(8,17,15, calc(.06 + var(--waterline) * .18)) calc(82% - var(--waterline) * 18%), rgba(8,17,15, calc(.16 + var(--hour-shadow) * .18)) 100%),
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(196,156,85,.025) 19px 20px);
  mix-blend-mode: multiply;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

.brand span,
.rain-toggle,
.site-clock,
.toybox-toggle,
.toy > span,
.hero-title p,
.hero-actions a,
.play-inline,
.section-head p,
.section-head > span,
.music-copy p,
.music-copy a,
.profile p,
.links > p,
.drawbook small,
.drawbook-tools,
.drawbook-clear,
.player,
dt,
dd,
footer {
  font-family: var(--font-en);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: calc(.12 + var(--world-decay) * .18 + var(--archive-load) * .08 + var(--scroll-velocity) * .06 + var(--scroll-depth) * .035 + var(--place-noise) * .08 + var(--audio-room) * .08);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 5px),
    repeating-radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 0 1px, transparent 1px 4px);
  background-size: 5px 5px, 4px 4px;
  mix-blend-mode: screen;
}

body.memory-saturated .grain {
  mix-blend-mode: color-dodge;
}

body.archive-heavy .grain {
  background-size: 4px 4px, 3px 3px;
}

body.archive-sunk main {
  filter: saturate(.86) contrast(1.08);
}

.weather-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  filter:
    contrast(calc(1 + var(--storm-load) * .14 + var(--draw-load) * .06 + var(--sound-load) * .04))
    saturate(calc(.92 + var(--storm-load) * .16 - var(--draw-load) * .08 + var(--sound-load) * .12));
}

.rain-sheet {
  position: absolute;
  inset: -20vh -10vw;
  opacity: calc(.06 + var(--rain-strength) * .12 + var(--place-rain) * .12 + var(--archive-load) * .08 + var(--scroll-velocity) * .1 + var(--scroll-depth) * .035 + var(--storm-load) * .1);
  background:
    linear-gradient(106deg, transparent 0 36%, rgba(174,203,219,.12) 36.2%, transparent 36.7%),
    linear-gradient(101deg, transparent 0 62%, rgba(251,248,223,.07) 62.2%, transparent 62.6%);
  background-size: 460px 760px, 680px 940px;
  filter: blur(calc(.35px + var(--scroll-velocity) * .8px + var(--storm-load) * .42px));
  transform: translateX(calc(var(--scroll-velocity) * -10px + var(--storm-load) * -8px)) skewX(var(--rain-skew));
  animation: rainSheetDrift calc(5.2s - var(--place-rain) * 8s - var(--storm-load) * 1.4s) linear infinite;
}

.rain-sheet-b {
  opacity: calc(.04 + var(--rain-strength) * .08 + var(--scroll-velocity) * .06);
  background:
    linear-gradient(104deg, transparent 0 22%, rgba(126,168,198,.1) 22.2%, transparent 22.6%),
    linear-gradient(108deg, transparent 0 79%, rgba(251,248,223,.06) 79.2%, transparent 79.5%);
  background-size: 720px 880px, 520px 680px;
  animation-duration: 6.4s;
}

.rain-drops {
  position: absolute;
  inset: -25vh 0;
  opacity: calc(.18 + var(--rain-strength) * .4 + var(--place-rain) * .22 + var(--scroll-velocity) * .18 + var(--scroll-depth) * .06 + var(--storm-load) * .18 + var(--sound-load) * .06);
  background-repeat: repeat;
  background-image:
    radial-gradient(ellipse at center, rgba(210,226,233,.46) 0 1px, transparent 1.4px),
    radial-gradient(ellipse at center, rgba(126,168,198,.34) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(210,226,233,.22) 0 10px, transparent 10px),
    linear-gradient(180deg, rgba(8,17,15, calc(var(--draw-load) * .16)) 0 calc(8px + var(--draw-load) * 14px), transparent calc(8px + var(--draw-load) * 14px));
  background-size:
    calc(137px - var(--storm-load) * 34px) calc(241px - var(--storm-load) * 60px),
    calc(211px - var(--storm-load) * 52px) calc(319px - var(--storm-load) * 78px),
    calc(173px - var(--storm-load) * 42px) calc(281px - var(--storm-load) * 70px),
    calc(220px - var(--draw-load) * 70px) calc(360px - var(--draw-load) * 90px);
  background-position: 11px 19px, 71px 103px, 43px 57px;
  filter: blur(calc(.15px + var(--scroll-velocity) * 1.05px + var(--audio-room) * .32px + var(--storm-load) * .5px));
  transform: skewX(calc(var(--rain-skew) - var(--scroll-velocity) * 6deg + var(--audio-room) * 4deg)) translateX(calc(var(--scroll-velocity) * -12px + var(--audio-room) * -4px + var(--storm-load) * -10px));
  animation: dropsFall calc(1.55s - var(--place-rain) * 1.6s - var(--storm-load) * .42s) linear infinite;
}

.rain-drops-b {
  opacity: calc(.1 + var(--rain-strength) * .22 + var(--scroll-velocity) * .1);
  background-size: 233px 353px, 157px 269px, 281px 421px;
  background-position: 93px 41px, 23px 151px, 117px 11px;
  filter: blur(.6px);
  animation-duration: 2.1s;
}

body.time-jump .rain-drops {
  filter: blur(.45px) contrast(1.35);
  transform: skewX(-10deg) translateX(-4px);
}

body.audio-playing .rain-drops {
  animation-duration: 1.08s;
  opacity: calc(.2 + var(--rain-strength) * .44 + var(--place-rain) * .22 + var(--audio-pulse) * .12 + var(--audio-room) * .16);
}

body.audio-playing .rain-sheet {
  opacity: calc(.09 + var(--rain-strength) * .16 + var(--audio-pulse) * .06 + var(--audio-room) * .14);
}

body.memory-saturated .rain-drops {
  animation-duration: 1.06s;
}

body.memory-overflow .rain-sheet {
  filter: blur(.7px) contrast(1.22);
}

body.storm-heavy .weather-layer::before,
body.storm-heavy .weather-layer::after {
  content: "";
  position: absolute;
  inset: -10vh -8vw;
  pointer-events: none;
}

body.storm-heavy .weather-layer::before {
  opacity: calc(.08 + var(--storm-load) * .16);
  background:
    linear-gradient(106deg, transparent 0 28%, rgba(251,248,223,.09) 28.2% 28.5%, transparent 28.8%),
    linear-gradient(102deg, transparent 0 74%, rgba(126,168,198,.12) 74.2% 74.5%, transparent 74.8%);
  background-size:
    calc(260px - var(--storm-load) * 80px) calc(620px - var(--storm-load) * 120px),
    calc(390px - var(--storm-load) * 110px) calc(760px - var(--storm-load) * 140px);
  filter: blur(calc(.5px + var(--storm-load) * .8px));
  transform: skewX(var(--rain-skew));
  animation: rainSheetDrift calc(3.9s - var(--storm-load) * 1.2s) linear infinite;
}

body.storm-heavy .weather-layer::after {
  opacity: calc(.06 + var(--storm-load) * .18);
  background:
    radial-gradient(ellipse at 18% 24%, rgba(126,168,198,.16), transparent 18vw),
    radial-gradient(ellipse at 78% 72%, rgba(8,17,15,.28), transparent 26vw),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(126,168,198,.036) 42px 43px);
  mix-blend-mode: screen;
  filter: blur(calc(8px + var(--storm-load) * 8px));
}

body.storm-buried main {
  filter:
    saturate(calc(.92 - var(--storm-load) * .08))
    contrast(calc(1.02 + var(--storm-load) * .08))
    brightness(calc(1 - var(--storm-load) * .05));
}

.wet-glass {
  position: absolute;
  inset: 0;
  opacity: calc(.08 + var(--rain-strength) * .16 + var(--place-humidity) * .24 + var(--archive-load) * .12 + var(--scroll-velocity) * .12 + var(--scroll-depth) * .05 + var(--storm-load) * .14);
  background:
    radial-gradient(ellipse at 12% 20%, rgba(251,248,223,.16) 0 1px, transparent 2px),
    radial-gradient(ellipse at 31% 74%, rgba(126,168,198,.16) 0 1px, transparent 2px),
    radial-gradient(ellipse at 68% 38%, rgba(251,248,223,.1) 0 1px, transparent 2px),
    radial-gradient(ellipse at 84% 66%, rgba(126,168,198,.12) 0 1px, transparent 2px),
    radial-gradient(ellipse at 45% 58%, rgba(8,17,15, calc(var(--draw-load) * .24)) 0 1px, transparent 2.4px),
    linear-gradient(180deg, transparent 0 22%, rgba(251,248,223,.035) 22% 22.4%, transparent 23%),
    linear-gradient(180deg, transparent 0 62%, rgba(126,168,198,.04) 62% 62.5%, transparent 63%),
    linear-gradient(180deg, transparent 0 76%, rgba(8,17,15, calc(var(--draw-load) * .07)) 76% 76.6%, transparent 77%);
  background-size: 280px 360px, 360px 420px, 420px 520px, 240px 310px, 190px 260px, 100% 260px, 100% 420px, 100% 360px;
  mix-blend-mode: screen;
  animation: wetCrawl calc(9s - var(--storm-load) * 3s) ease-in-out infinite alternate;
  transform: translateY(calc(var(--scroll-depth) * -12px));
}

body.time-jump .wet-glass {
  filter: blur(1.2px) contrast(1.24);
}

.puddle-glow {
  position: absolute;
  left: 8vw;
  right: 8vw;
  bottom: -7vh;
  height: 29vh;
  opacity: calc(.16 + var(--night) * .24 + var(--world-decay) * .2 + var(--place-humidity) * .18 + var(--storm-load) * .14);
  background:
    radial-gradient(ellipse at 45% 48%, rgba(8,17,15, calc(var(--draw-load) * .24)), transparent 36%),
    radial-gradient(ellipse at 28% 48%, rgba(126,168,198,.28), transparent 34%),
    radial-gradient(ellipse at 68% 42%, rgba(196,156,85,.16), transparent 32%),
    linear-gradient(180deg, transparent, rgba(126,168,198,.12));
  filter: blur(calc(18px + var(--place-humidity) * 18px + var(--storm-load) * 14px)) saturate(calc(1 + var(--storm-load) * .24));
  transform: perspective(520px) rotateX(62deg);
  animation: puddlePulse 5.6s ease-in-out infinite alternate;
}

body.audio-playing .puddle-glow {
  opacity: calc(.28 + var(--night) * .3 + var(--world-decay) * .22);
  filter: blur(calc(22px + var(--audio-pulse) * 9px + var(--audio-room) * 12px)) saturate(calc(1.28 + var(--audio-pulse) * .25 + var(--audio-room) * .24));
  animation-duration: 3.8s;
}

body.sound-marked .puddle-glow {
  box-shadow: 0 0 calc(var(--sound-load) * 80px) rgba(126,168,198,.08);
}

body.sound-saturated .rain-drops {
  filter:
    blur(calc(.28px + var(--storm-load) * .5px + var(--sound-load) * .55px))
    contrast(calc(1.05 + var(--sound-load) * .14));
}

.rain-impact-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.rain-impact {
  position: absolute;
  width: calc(12px + var(--impact-size, 1) * 26px);
  height: calc(5px + var(--impact-size, 1) * 10px);
  translate: -50% -50%;
  rotate: var(--impact-r, 0deg);
  pointer-events: none;
  border-radius: 50%;
  opacity: calc(.16 + var(--rain-strength) * .2 + var(--world-decay) * .08 + var(--storm-load) * .12);
  border: 1px solid rgba(174,203,219, calc(.16 + var(--rain-strength) * .18 + var(--storm-load) * .12));
  background:
    radial-gradient(ellipse at 50% 50%, rgba(251,248,223,.12), transparent 48%),
    linear-gradient(90deg, transparent, rgba(126,168,198,.22), transparent);
  box-shadow:
    0 0 calc(8px + var(--impact-size, 1) * 14px) rgba(126,168,198,.12),
    0 calc(4px + var(--impact-size, 1) * 6px) calc(10px + var(--impact-size, 1) * 12px) rgba(8,17,15,.18);
  filter:
    blur(calc(.15px + var(--world-decay) * .45px))
    saturate(calc(.9 - var(--world-decay) * .08));
  mix-blend-mode: screen;
  animation: rainImpact .92s ease-out forwards;
}

body.day-7 .rain-impact {
  border-color: rgba(196,156,85,.22);
  mix-blend-mode: multiply;
}

body.audio-playing .rain-impact {
  animation-duration: .62s;
  opacity: calc(.24 + var(--audio-room) * .28);
}

body.audio-playing main {
  filter:
    saturate(calc(1 - var(--world-decay) * .08 + var(--audio-room) * .06))
    contrast(calc(1 + var(--audio-room) * .035));
}

body.audio-playing .section.in-view > * {
  transform: translate3d(0, calc(var(--audio-room) * -2px), 0);
}

body.audio-playing .release-card,
body.audio-playing .featured-cover,
body.audio-playing .room-photo,
body.audio-playing .profile img {
  box-shadow:
    0 24px 78px rgba(0,0,0,.58),
    0 0 calc(34px + var(--audio-room) * 54px) rgba(126,168,198, calc(.05 + var(--audio-room) * .16));
}

body.sound-marked .music {
  box-shadow:
    inset 0 0 calc(var(--sound-load) * 110px) rgba(126,168,198, calc(var(--sound-load) * .08)),
    inset 0 calc(var(--sound-load) * -36px) calc(var(--sound-load) * 100px) rgba(8,17,15, calc(var(--sound-load) * .12));
}

body.sound-saturated .music-copy ol {
  text-shadow:
    1px 0 rgba(126,168,198,.16),
    -1px 0 rgba(107,50,40,.12),
    0 0 calc(var(--sound-load) * 26px) rgba(126,168,198,.16);
}

body[data-place="archive"] .weather-layer {
  filter: sepia(.12) saturate(.88) contrast(1.06);
}

body[data-place="archive"] .rain-drops {
  background-size: 178px 313px, 274px 415px, 225px 365px;
}

body[data-place="music"] .rain-drops {
  background-size: 107px 188px, 165px 249px, 135px 219px;
}

body[data-place="room"] .rain-drops {
  background-size: 162px 284px, 249px 376px, 204px 332px;
}

body[data-place="links"] .rain-drops {
  background-size: 200px 352px, 308px 466px, 253px 410px;
}

body[data-place="music"].audio-playing .rain-drops {
  animation-duration: .84s;
}

body[data-place="room"].audio-playing .rain-drops {
  animation-duration: .98s;
}

body[data-place="music"] .puddle-glow {
  opacity: calc(.22 + var(--night) * .32 + var(--world-decay) * .22);
  filter: blur(20px) hue-rotate(8deg);
}

body[data-place="room"] .wet-glass {
  opacity: calc(.14 + var(--rain-strength) * .24);
}

body[data-place="links"] .rain-sheet {
  opacity: calc(.08 + var(--rain-strength) * .14);
}

body[data-place="top"] .hero {
  box-shadow: inset 0 -18vh 26vh rgba(0,0,0, calc(.16 + var(--night) * .12));
}

body[data-place="archive"] .release-card {
  filter: sepia(.06) contrast(calc(1.02 + var(--world-decay) * .08));
  translate: 0 calc(var(--current-place-visits) * 10px);
}

body[data-place="music"] .featured-cover,
body[data-place="music"] .player {
  box-shadow:
    0 0 0 1px rgba(126,168,198,.14),
    0 0 54px rgba(126,168,198, calc(.1 + var(--night) * .08)),
    0 34px 90px rgba(0,0,0,.58);
}

body[data-place="music"] .music-copy ol {
  text-shadow: 0 0 calc(8px + var(--current-place-visits) * 18px) rgba(126,168,198,.14);
}

body[data-place="room"] .room-photo {
  filter:
    saturate(calc(.92 - var(--world-decay) * .18))
    contrast(calc(1.08 + var(--world-decay) * .18))
    brightness(calc(.82 - var(--place-humidity) * .32));
  translate: calc(var(--current-place-visits) * -8px) calc(var(--current-place-visits) * 7px);
}

body[data-place="profile"] .profile img {
  filter:
    grayscale(calc(var(--world-decay) * .18))
    saturate(.78)
    contrast(1.14)
    brightness(calc(.9 + var(--place-light) * .8));
  opacity: calc(1 - var(--current-place-visits) * .16);
}

body[data-place="links"] .link-list a {
  background:
    radial-gradient(circle at 24% 18%, rgba(126,168,198, calc(.05 + var(--place-rain) * .12)), transparent 34%),
    radial-gradient(circle at 84% 86%, rgba(107,50,40, calc(.06 + var(--world-decay) * .1)), transparent 38%),
    repeating-linear-gradient(0deg, rgba(231,230,216,.018) 0 1px, transparent 1px 18px),
    linear-gradient(145deg, rgba(20,32,27,.5), rgba(5,8,7,.74));
}

@keyframes rainSheetDrift {
  from { background-position: 0 -760px, 90px -940px; transform: translate3d(0, 0, 0); }
  to { background-position: -120px 0, -20px 0; transform: translate3d(-1.5vw, 1vh, 0); }
}

@keyframes dropsFall {
  from { background-position: 11px -241px, 71px -319px, 43px -281px; }
  to { background-position: -12px 0, 49px 0, 21px 0; }
}

@keyframes wetCrawl {
  from { transform: translateY(-1vh); filter: blur(.2px); }
  to { transform: translateY(1.4vh); filter: blur(.8px); }
}

@keyframes puddlePulse {
  from { scale: 1 1; opacity: calc(.12 + var(--night) * .18); }
  to { scale: 1.04 .92; opacity: calc(.2 + var(--night) * .28 + var(--world-decay) * .2); }
}

@keyframes rainImpact {
  0% {
    transform: scale(.28, .42);
    opacity: 0;
  }
  22% {
    opacity: calc(.2 + var(--rain-strength) * .22);
  }
  100% {
    transform: scale(1.8, .72);
    opacity: 0;
  }
}

@keyframes waterMemoryFloat {
  from { background-position: 0 0, 30px 60px, 80px 20px; transform: translate3d(-.8vw, -.6vh, 0); }
  to { background-position: 24px 48px, -26px 120px, 120px -38px; transform: translate3d(.8vw, .9vh, 0); }
}

@keyframes placeShift {
  0% {
    filter:
      blur(.4px)
      saturate(.86)
      contrast(1.08);
    transform: translate3d(0, 4px, 0);
  }
  48% {
    filter:
      blur(.9px)
      saturate(1.05)
      contrast(1.16);
  }
  100% {
    filter: none;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes drownedGrid {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 96px, -72px 0; }
}

.light-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.light-field::before,
.light-field::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, filter .45s ease;
}

.light-field::before {
  background:
    radial-gradient(circle at 14% 12%, var(--lamp-a), transparent 18vw),
    radial-gradient(circle at 86% 88%, var(--lamp-b), transparent 22vw),
    linear-gradient(120deg, transparent 0 42%, var(--lamp-soft) 52%, transparent 62%);
  mix-blend-mode: screen;
  filter: blur(10px) saturate(1.08);
}

.light-field::after {
  background:
    linear-gradient(90deg, var(--lamp-border), transparent 10% 90%, var(--lamp-border)),
    linear-gradient(180deg, var(--lamp-border), transparent 12% 88%, var(--lamp-border)),
    repeating-linear-gradient(90deg, transparent 0 120px, var(--lamp-border) 120px 121px),
    repeating-linear-gradient(0deg, transparent 0 150px, var(--lamp-border) 150px 151px);
  mix-blend-mode: screen;
  filter: blur(.8px);
}

body.lamp-on .light-field {
  z-index: 2;
}

body.lamp-on .light-field::before {
  opacity: .28;
}

body.lamp-on .light-field::after {
  opacity: .18;
}

body.lamp-on .sun,
body.lamp-on .moon {
  opacity: .18;
}

.sun,
.moon {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.sun {
  left: var(--sun-x, 60vw);
  top: var(--sun-y, 18vh);
  background: #fff4a8;
  opacity: calc(.15 + var(--daylight) * .75);
  box-shadow: 0 0 80px rgba(255, 244, 168, .5);
}

.moon {
  left: var(--moon-x, 25vw);
  top: var(--moon-y, 80vh);
  background: #dce8ff;
  opacity: calc(.08 + var(--night) * .55);
  box-shadow: 0 0 70px rgba(180, 208, 255, .3);
}

.site-header,
.rain-toggle,
.site-clock,
.toybox,
.drawbook,
.player,
main,
footer {
  position: relative;
  z-index: 3;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  color: rgba(251,248,223,.86);
  background:
    linear-gradient(90deg, rgba(5,7,6,.76), rgba(16,28,23,.42)),
    linear-gradient(180deg, rgba(126,168,198,.08), transparent);
  border-bottom: 1px solid rgba(251,248,223,.14);
  backdrop-filter: blur(18px) saturate(.9);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.brand strong {
  font-family: var(--font-jp);
  font-weight: 400;
}

.brand span {
  font-size: .82rem;
}

.rain-toggle {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 60;
  min-width: 58px;
  min-height: 38px;
  padding: 10px 12px;
  color: rgba(251,248,223,.62);
  background:
    linear-gradient(180deg, rgba(126,168,198,.1), transparent),
    rgba(3,5,4,.82);
  border: 1px solid rgba(251,248,223,.2);
  border-radius: 999px;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 calc(var(--memory-load) * 34px) rgba(126,168,198,.12),
    inset 0 0 calc(var(--memory-load) * 18px) rgba(251,248,223,.04);
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .18s ease;
}

.rain-toggle::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 9px;
  border-radius: 50%;
  background: rgba(251,248,223,.28);
  box-shadow: none;
  vertical-align: middle;
  transition: background .18s ease, box-shadow .18s ease;
}

.rain-toggle.is-on {
  color: rgba(251,248,223,.9);
  border-color: rgba(126,168,198,.42);
  box-shadow:
    0 0 20px rgba(126,168,198,.12),
    inset 0 0 18px rgba(251,248,223,.045);
}

.rain-toggle.is-on::after {
  background: rgba(126,168,198,.82);
  box-shadow: 0 0 12px rgba(126,168,198,.55);
}

.rain-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(251,248,223,.34);
}

.site-clock {
  position: fixed !important;
  left: auto !important;
  right: 18px !important;
  top: 18px !important;
  bottom: auto !important;
  z-index: 55;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  width: 72px;
  height: 72px;
  min-width: 0;
  padding: 9px;
  color: rgba(251,248,223,.72);
  background:
    radial-gradient(circle at 50% calc(86% - var(--world-decay, 0) * 28%), rgba(111,154,117,.22) 0 calc(var(--world-decay, 0) * 28%), transparent calc(var(--world-decay, 0) * 29% + 2px)),
    linear-gradient(0deg, rgba(111,154,117, calc(.06 + var(--world-decay, 0) * .26)) 0 calc(var(--world-decay, 0) * 100%), transparent calc(var(--world-decay, 0) * 100%)),
    radial-gradient(circle at 50% 50%, rgba(3,5,4,.88) 0 52%, transparent 53%),
    conic-gradient(
      from -90deg,
      rgba(126,168,198,.58) 0 calc(var(--day-progress, 0) * 1turn),
      rgba(251,248,223,.09) 0 1turn
    );
  border: 1px solid rgba(251,248,223,.18);
  border-radius: 50%;
  backdrop-filter: blur(12px);
  font-size: .48rem;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(251,248,223,.045),
    inset 0 0 22px rgba(0,0,0,.52),
    0 10px 28px rgba(0,0,0,.3),
    0 0 18px rgba(126,168,198,.06);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .28s ease;
}

.site-clock > * {
  position: relative;
  z-index: 2;
}

.site-clock::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(251,248,223,.12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(251,248,223,.035) 35% 36%, transparent 37%),
    radial-gradient(circle at 50% 48%, rgba(251,248,223,.045), transparent 34%),
    radial-gradient(circle, rgba(8,17,15,.1), rgba(3,5,4,.56));
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.5),
    0 0 14px rgba(126,168,198,.07);
  pointer-events: none;
}

.site-clock.time-tick {
  border-color: rgba(126,168,198,.56);
  box-shadow:
    inset 0 0 0 1px rgba(251,248,223,.05),
    inset 0 0 22px rgba(0,0,0,.54),
    0 0 0 1px rgba(126,168,198,.12),
    0 0 20px rgba(126,168,198,.18),
    0 10px 28px rgba(0,0,0,.32);
  transform: translateY(-2px) scale(1.015);
}

.clock-label {
  display: none;
}

.timecode {
  display: grid;
  gap: 1px;
  color: rgba(251,248,223,.9);
  max-width: 5.8em;
  font-family: var(--font-bit);
  font-size: .56rem;
  letter-spacing: .08em;
  line-height: 1.2;
  -webkit-font-smoothing: none;
}

.timecode span:last-child {
  color: rgba(126,168,198,.76);
  font-size: .48rem;
  letter-spacing: .12em;
}

.clickcode,
.stagecode {
  display: none;
}

.day-progress {
  position: absolute;
  inset: 5px;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  margin: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from -90deg,
      rgba(126,168,198,.8) 0 calc(var(--day-progress, 0) * 1turn),
      rgba(251,248,223,.08) 0 1turn
    );
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  pointer-events: none;
}

.day-progress b {
  display: none;
}

.site-clock::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 90deg,
      rgba(196,156,85,.5) 0 calc(var(--world-decay, 0) * 1turn),
      transparent 0 1turn
    );
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  pointer-events: none;
}

.trash-bin {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 57;
  display: grid;
  place-items: center;
  width: 64px;
  height: 42px;
  border: 1px solid rgba(251,248,223,.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(126,168,198,.09), transparent),
    rgba(3,5,4,.76);
  opacity: .2;
  transform: translateY(8px) scale(.92);
  pointer-events: none;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 calc(var(--memory-load) * 24px) rgba(126,168,198,.12),
    inset 0 0 calc(var(--memory-load) * 14px) rgba(251,248,223,.04);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.trash-bin::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(251,248,223,.06), transparent 62%);
  opacity: 0;
  transition: opacity .18s ease;
}

.trash-bin span {
  position: relative;
  display: block;
  width: 30px;
  height: 18px;
  margin-top: 3px;
  border: 1px solid rgba(251,248,223,.52);
  border-top: 0;
  border-radius: 2px 2px 5px 5px;
  background:
    linear-gradient(90deg, rgba(14,47,34,.78), rgba(47,82,58,.86), rgba(14,47,34,.78));
  box-shadow: inset 0 -5px 0 rgba(3,5,4,.28);
}

.trash-bin span::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -8px;
  width: 36px;
  height: 5px;
  border-radius: 999px 999px 2px 2px;
  background: rgba(251,248,223,.58);
  box-shadow: 0 3px 0 rgba(3,5,4,.54);
  transform: rotate(-4deg);
}

.trash-bin span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 16px;
  height: 7px;
  background:
    linear-gradient(135deg, transparent 0 36%, rgba(231,213,102,.78) 37% 49%, transparent 50% 61%, rgba(231,213,102,.78) 62% 74%, transparent 75%),
    rgba(34,41,54,.58);
  border-radius: 1px;
  box-shadow: 0 12px 0 -5px rgba(3,5,4,.84);
}

body.grab-mode .trash-bin {
  opacity: .72;
  transform: none;
  pointer-events: auto;
}

body.grabbing .trash-bin {
  opacity: .94;
}

.trash-bin.is-hot {
  border-color: rgba(231,213,102,.58);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(231,213,102,.12),
    0 0 24px rgba(231,213,102,.2),
    inset 0 0 18px rgba(251,248,223,.05);
  transform: scale(1.06);
}

.trash-bin.is-hot::before {
  opacity: 1;
}

.trash-bin.is-hot span,
.trash-bin.is-hot span::before {
  border-color: rgba(251,248,223,.78);
}

.toybox {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  rotate: 0deg;
  transition:
    right .34s cubic-bezier(.2,.76,.2,1),
    bottom .34s cubic-bezier(.2,.76,.2,1);
}

.toybox.is-open,
.toybox.is-closing {
  right: 18px;
  bottom: 18px;
}

.toybox-toggle {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 38px;
  min-width: 0;
  min-height: 0;
  padding: 0 12px;
  color: rgba(251,248,223,.86);
  background:
    linear-gradient(180deg, rgba(126,168,198,.1), transparent),
    rgba(3,5,4,.82);
  border: 1px solid rgba(251,248,223,.28);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 calc(var(--memory-load) * 34px) rgba(126,168,198,.16),
    inset 0 0 calc(var(--memory-load) * 18px) rgba(251,248,223,.05);
  transition:
    width .34s cubic-bezier(.2,.76,.2,1),
    height .34s cubic-bezier(.2,.76,.2,1),
    padding .34s cubic-bezier(.2,.76,.2,1),
    border-radius .34s cubic-bezier(.2,.76,.2,1),
    letter-spacing .34s cubic-bezier(.2,.76,.2,1),
    transform .34s cubic-bezier(.2,.76,.2,1),
    box-shadow .24s ease,
    background .24s ease;
}

.toybox.is-open .toybox-toggle {
  width: 46px;
  height: 32px;
  padding: 0 10px;
  border-radius: 18px;
  letter-spacing: .08em;
  font-size: .6rem;
  transform: scale(.92);
  background:
    radial-gradient(circle at 50% 110%, rgba(251,248,223,.12), transparent 58%),
    rgba(3,5,4,.66);
  box-shadow:
    0 10px 30px rgba(0,0,0,.22),
    inset 0 0 18px rgba(251,248,223,.06);
}

.toybox.is-closing .toybox-toggle {
  animation: toyToggleClose .58s cubic-bezier(.34,.02,.16,1) both;
}

body.memory-saturated .toybox-toggle::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-radius: 50%;
  background: rgba(126,168,198,.78);
  box-shadow: 0 0 12px rgba(126,168,198,.5);
  vertical-align: middle;
}

.toybox-panel {
  position: absolute;
  right: 50%;
  bottom: calc(100% - 2px);
  z-index: 2;
  width: 36px;
  height: 152px;
  --toy-stack-step: 33px;
  display: block;
  transform: translateX(50%);
  rotate: 0deg;
  padding: 0;
  color: rgba(251,248,223,.88);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.toybox-panel[hidden] {
  display: none;
}

.toybox.is-open .toybox-panel {
  pointer-events: auto;
}

.toybox.is-closing .toybox-panel {
  pointer-events: none;
}

.toy {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 0;
  --toy-x: 0px;
  --toy-y: 0px;
  --toy-rotate: 0deg;
  --toy-scale: .12;
  --toy-hover-y: 0px;
  --toy-hover-scale: 1;
  --toy-scale-final: calc(var(--toy-scale) * var(--toy-hover-scale));
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  overflow: hidden;
  color: rgba(251,248,223,.88);
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,245,.22), transparent 32%),
    color-mix(in srgb, var(--toy-color, rgba(251,248,223,.36)) 58%, rgba(5,7,6,.34));
  cursor: pointer;
	  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    0 0 10px color-mix(in srgb, var(--toy-color, rgba(251,248,223,.5)) 22%, transparent);
  text-align: center;
  opacity: 0;
  filter: saturate(.9) brightness(.82);
  transform:
    translate(
      calc(-50% + var(--toy-x)),
      calc(var(--toy-y) + var(--toy-hover-y))
    )
    rotate(var(--toy-rotate))
    scale(var(--toy-scale-final));
  rotate: 0deg;
  transform-origin: 50% 110%;
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .46s cubic-bezier(.18,.82,.16,1.12),
    background .18s ease,
    color .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.toy::before {
  content: none;
}

.toy > span {
  position: static;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 2;
  letter-spacing: 0;
  font-family: var(--font-jp);
  font-size: .74rem;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(0,0,0,.42),
    0 0 8px color-mix(in srgb, var(--toy-color, rgba(251,248,223,.5)) 60%, transparent);
}

.toy:hover {
  color: #fff;
  --toy-hover-y: -1px;
  --toy-hover-scale: 1.08;
  filter: saturate(1.1) brightness(1.08);
  box-shadow:
    inset 0 0 14px color-mix(in srgb, var(--toy-color, rgba(251,248,223,.5)) 28%, transparent),
    0 0 18px color-mix(in srgb, var(--toy-color, rgba(251,248,223,.5)) 38%, transparent);
}

.toy:active,
.toy.toy-pressed {
  --toy-hover-y: 1px;
  --toy-hover-scale: .9;
  filter: saturate(1.3) brightness(1.22);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.34),
    0 0 22px color-mix(in srgb, var(--toy-color, rgba(251,248,223,.5)) 52%, transparent);
}

.toy:last-child {
  border-color: transparent;
}

.toy-lamp {
  --toy-color: rgba(96,169,255,.82);
}

.toy-grab {
  --toy-color: rgba(255,77,72,.86);
}

.toy-jackets {
  --toy-color: rgba(89,210,112,.78);
}

.toy-shuffle {
  --toy-color: rgba(245,211,76,.86);
}

.toybox.is-open .toy,
.toybox.is-closing .toy {
  opacity: 1;
}

.toybox.is-open .toy {
  --toy-scale: 1;
  pointer-events: auto;
}

.toybox.is-open .toy-lamp {
  --toy-x: 0px;
  --toy-y: calc(var(--toy-stack-step) * -3.45);
  --toy-rotate: 0deg;
  transition-delay: .02s;
}

.toybox.is-open .toy-grab {
  --toy-x: 0px;
  --toy-y: calc(var(--toy-stack-step) * -2.45);
  --toy-rotate: 0deg;
  transition-delay: .06s;
}

.toybox.is-open .toy-jackets {
  --toy-x: 0px;
  --toy-y: calc(var(--toy-stack-step) * -1.45);
  --toy-rotate: 0deg;
  transition-delay: .1s;
}

.toybox.is-open .toy-shuffle {
  --toy-x: 0px;
  --toy-y: calc(var(--toy-stack-step) * -.45);
  --toy-rotate: 0deg;
  transition-delay: .14s;
}

.toybox.is-closing .toy {
  --toy-x: 0px;
  --toy-y: 0px;
  --toy-scale: .18;
  opacity: 0;
  pointer-events: none;
  transition:
    transform .54s cubic-bezier(.55,-.18,.2,1),
    opacity .18s ease .32s,
    filter .18s ease,
    box-shadow .18s ease;
  transition-delay: .1s, .28s, 0s, 0s;
}

.toy-grab[aria-pressed="true"] {
  color: #fff;
  filter: saturate(1.35) brightness(1.2);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,245,.22), transparent 32%),
    color-mix(in srgb, var(--toy-color) 76%, rgba(5,7,6,.58));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,245,.18),
    inset 0 0 18px rgba(255,255,245,.08),
    0 0 26px color-mix(in srgb, var(--toy-color) 62%, transparent);
  animation: toyGrabActive 1.05s ease-in-out infinite alternate;
}

.toy-grab[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px var(--toy-color);
}

@keyframes toyGrabActive {
  from {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,245,.18),
      inset 0 0 14px rgba(255,255,245,.06),
      0 0 20px color-mix(in srgb, var(--toy-color) 52%, transparent);
  }
  to {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,245,.22),
      inset 0 0 20px rgba(255,255,245,.1),
      0 0 30px color-mix(in srgb, var(--toy-color) 68%, transparent);
  }
}

@keyframes toyToggleClose {
  0%, 42% {
    width: 46px;
    height: 32px;
    padding: 0 10px;
    border-radius: 18px;
    letter-spacing: .08em;
    font-size: .6rem;
    transform: scale(.92);
  }
  100% {
    width: 58px;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    letter-spacing: .18em;
    font-size: .68rem;
    transform: scale(1);
  }
}

.toy-memory {
  display: none;
  color: rgba(126,168,198,.9);
}

body.memory-saturated .toy-memory {
  display: block;
}

.toy-rebuild {
  display: none;
  color: rgba(251,248,223,.94);
  background:
    linear-gradient(90deg, rgba(126,168,198,.1), transparent),
    rgba(196,156,85,.035);
}

body.day-100 .toy-rebuild {
  display: block;
}

body.memory-overflow .toybox-panel {
  border-color: rgba(126,168,198,.26);
  box-shadow:
    inset 0 0 0 1px rgba(126,168,198,.14),
    0 0 46px rgba(126,168,198,.18),
    0 24px 80px rgba(0,0,0,.54);
}

body.rebuilding-world::after {
  background:
    radial-gradient(circle at 50% 40%, rgba(251,248,223,.18), transparent 28vw),
    radial-gradient(circle at 50% 110%, rgba(126,168,198,.22), transparent 36vw),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.28));
}

body.rebuilding-world main > .section {
  opacity: .72;
}

body.rebuilding-world .hero-image,
body.rebuilding-world .featured-cover,
body.rebuilding-world .room-photo,
body.rebuilding-world .release-card {
  filter: saturate(.92) contrast(1.08) brightness(.72);
}

body.rebuilding-world .release-card strong,
body.rebuilding-world .music-copy h2,
body.rebuilding-world .profile h2,
body.rebuilding-world h1 {
  color: rgba(251,248,223,.68);
  text-shadow:
    0 0 18px rgba(126,168,198,.26),
    0 0 44px rgba(251,248,223,.1);
}

body.rebuilding-world .toybox-toggle {
  border-color: rgba(251,248,223,.64);
  box-shadow:
    0 0 58px rgba(126,168,198,.34),
    inset 0 0 26px rgba(251,248,223,.08);
}

body.rebuilding-world.worldline-0 .rebuild-shard {
  background:
    linear-gradient(180deg, rgba(251,248,223,.88), rgba(126,168,198,.42)),
    rgba(126,168,198,.2);
}

body.rebuilding-world.worldline-1 .rebuild-shard {
  background:
    linear-gradient(180deg, rgba(251,248,223,.82), rgba(107,50,40,.46)),
    rgba(107,50,40,.22);
}

body.rebuilding-world.worldline-2 .rebuild-shard {
  background:
    linear-gradient(180deg, rgba(251,248,223,.86), rgba(79,160,115,.46)),
    rgba(79,160,115,.2);
}

body.rebuilding-world.worldline-3 .rebuild-shard {
  background:
    linear-gradient(180deg, rgba(251,248,223,.9), rgba(196,156,85,.5)),
    rgba(196,156,85,.2);
}

.section {
  position: relative;
  min-height: 100vh;
  padding: clamp(90px, 12vw, 150px) clamp(22px, 6vw, 86px);
  overflow: hidden;
  --section-visits: 0;
  --section-depth: .12;
  box-shadow:
    inset 0 calc(var(--section-visits) * -26px) calc(34px + var(--section-visits) * 86px) rgba(126,168,198, calc(var(--section-visits) * .08)),
    inset 0 calc(var(--section-visits) * 18px) calc(28px + var(--section-visits) * 54px) rgba(8,17,15, calc(var(--section-visits) * .12)),
    inset 0 calc(var(--memory-pressure) * 22px) calc(var(--memory-pressure) * 90px) rgba(8,17,15, calc(var(--memory-pressure) * .16));
}

#top { --section-depth: .04; }
#archive { --section-depth: .18; }
#music { --section-depth: .26; }
#room { --section-depth: .36; }
#profile { --section-depth: .48; }
#links { --section-depth: .58; }

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: calc(var(--section-visits) * .32 + var(--archive-load) * .08 + var(--ruin) * var(--section-depth) * .18 + var(--memory-pressure) * .16);
  background:
    radial-gradient(ellipse at calc(16% + var(--memory-pressure) * 12%) calc(24% + var(--section-depth) * 20%), rgba(126,168,198, calc(var(--memory-pressure) * .16)), transparent 32vw),
    linear-gradient(180deg, transparent 0 58%, rgba(8,17,15, calc(var(--section-visits) * .22)) 100%),
    radial-gradient(ellipse at 18% 24%, rgba(107,50,40,.22), transparent 30vw),
    radial-gradient(ellipse at 78% 74%, rgba(126,168,198,.18), transparent 34vw),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(251,248,223,.035) 17px 18px),
    linear-gradient(180deg, rgba(8,17,15,.08), rgba(8,17,15,.2));
  mix-blend-mode: multiply;
  filter: blur(calc(var(--section-visits) * .7px));
}

.section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: calc(var(--world-decay) * .24 + var(--archive-load) * .06 + var(--section-visits) * .18 + var(--ruin) * var(--section-depth) * .14 + var(--waterline) * .06);
  background:
    linear-gradient(0deg, rgba(126,168,198, calc(var(--section-visits) * .18 + var(--waterline) * .08)) 0 calc(4vh + var(--section-visits) * 16vh + var(--waterline) * 8vh), transparent calc(14vh + var(--section-visits) * 18vh + var(--waterline) * 9vh)),
    radial-gradient(ellipse at 50% 96%, rgba(251,248,223, calc(var(--section-visits) * .12 + var(--memory-pressure) * .05)), transparent 42vw),
    repeating-linear-gradient(90deg, transparent 0 calc(84px - var(--memory-pressure) * 28px), rgba(126,168,198, calc(var(--memory-pressure) * .034)) calc(84px - var(--memory-pressure) * 28px) calc(85px - var(--memory-pressure) * 28px)),
    linear-gradient(180deg, transparent 0 62%, rgba(8,17,15,.28)),
    repeating-linear-gradient(96deg, transparent 0 38px, rgba(126,168,198,.045) 38px 39px),
    radial-gradient(ellipse at calc(50% + var(--fog-shift)) 16%, rgba(251,248,223,.06), transparent 36vw);
  mix-blend-mode: multiply;
}

.section.in-view::after {
  opacity: calc(var(--world-decay) * .34 + var(--section-visits) * .22 + .035);
}

.section.in-view::before {
  opacity: calc(var(--section-visits) * .38 + var(--current-place-visits) * .08);
}

.place-residue {
  position: absolute;
  z-index: 1;
  width: calc(90px * var(--place-residue-s, 1));
  height: calc(38px * var(--place-residue-s, 1));
  translate: -50% -50%;
  rotate: var(--place-residue-r, 0deg);
  pointer-events: none;
  border-radius: 54% 46% 58% 42%;
  opacity: calc(var(--place-residue-o, .12) + var(--world-decay) * .08);
  background:
    radial-gradient(ellipse at 42% 52%, rgba(8,17,15,.34), transparent 62%),
    radial-gradient(ellipse at 70% 28%, rgba(126,168,198,.16), transparent 45%),
    radial-gradient(ellipse at 26% 74%, rgba(107,50,40,.16), transparent 48%);
  filter:
    blur(calc(2.6px + var(--section-visits) * 4px))
    saturate(calc(.82 + var(--archive-load) * .24));
  mix-blend-mode: multiply;
  transform: scale(calc(.86 + var(--section-visits) * .28));
}

.place-residue::after {
  content: "";
  position: absolute;
  inset: 42% -18%;
  opacity: calc(.16 + var(--section-visits) * .32);
  background:
    repeating-linear-gradient(90deg, rgba(126,168,198,.12) 0 1px, transparent 1px 15px),
    linear-gradient(90deg, transparent, rgba(251,248,223,.1), transparent);
  filter: blur(5px);
}

.time-stratum {
  position: absolute;
  z-index: 1;
  width: var(--stratum-w, 38vw);
  height: 1px;
  translate: -50% var(--stratum-y, 0);
  rotate: var(--stratum-r, 0deg);
  pointer-events: none;
  opacity: calc(var(--stratum-o, .08) + var(--ruin) * .08);
  background:
    linear-gradient(90deg, transparent, rgba(126,168,198,.28), rgba(251,248,223,.16), rgba(107,50,40,.18), transparent);
  box-shadow:
    0 0 calc(10px + var(--ruin) * 26px) rgba(126,168,198,.12),
    0 calc(8px + var(--ruin) * 20px) calc(18px + var(--ruin) * 42px) rgba(8,17,15,.32);
  filter:
    blur(calc(.45px + var(--ruin) * 1.4px))
    saturate(calc(.78 - var(--world-decay) * .12));
  mix-blend-mode: screen;
}

.time-stratum::after {
  content: "";
  position: absolute;
  inset: -9px 8%;
  opacity: calc(.2 + var(--ruin) * .28);
  background:
    repeating-linear-gradient(90deg, rgba(251,248,223,.08) 0 1px, transparent 1px 19px),
    linear-gradient(180deg, transparent, rgba(8,17,15,.18), transparent);
  filter: blur(6px);
  mix-blend-mode: multiply;
}

.section > * {
  position: relative;
  z-index: 2;
}

.scroll-ruin-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}

.scroll-ruin {
  position: absolute;
  display: block;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  opacity: calc(var(--o, .18) + var(--stage-crack, 0) * .12 + var(--stage-moss, 0) * .08);
  transform:
    translate3d(-50%, -50%, 0)
    rotate(var(--rot, 0deg))
    scale(var(--s, 1));
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
  filter: saturate(.72) contrast(.96);
}

.ruin-column {
  border-left: 1px solid rgba(231,230,216,.16);
  border-right: 1px solid rgba(111,154,117,.13);
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(231,230,216,.07) 22% 24%, transparent 28% 70%, rgba(111,154,117,.08) 72% 74%, transparent 78%),
    repeating-linear-gradient(180deg, rgba(231,230,216,.06) 0 1px, transparent 1px 34px);
}

.ruin-column::before,
.ruin-column::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 170%;
  height: 16px;
  translate: -50% 0;
  border: 1px solid rgba(231,230,216,.13);
  background: rgba(111,154,117,.035);
}

.ruin-column::before { top: -12px; }
.ruin-column::after { bottom: -12px; }

.ruin-arch-scroll {
  border: 1px solid rgba(231,230,216,.14);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(111,154,117,.11), transparent 58%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(231,230,216,.05) 22px 23px);
}

.ruin-arch-scroll::after {
  content: "";
  position: absolute;
  inset: 16% 15% -1px;
  border: 1px solid rgba(231,230,216,.09);
  border-bottom: 0;
  border-radius: inherit;
}

.ruin-fracture {
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(231,230,216,.18), rgba(111,154,117,.11), transparent);
  box-shadow:
    0 9px 0 rgba(231,230,216,.055),
    0 -13px 0 rgba(111,154,117,.045);
}

.ruin-vault {
  border: 1px solid rgba(231,230,216,.12);
  border-radius: 46% 54% 42% 58%;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 0 42%, rgba(111,154,117,.08) 44% 46%, transparent 48%),
    radial-gradient(ellipse at 45% 48%, rgba(231,230,216,.06), transparent 55%);
}

.ruin-word {
  width: auto;
  height: auto;
  color: rgba(231,230,216,.26);
  font-family: var(--font-bit);
  font-size: clamp(.58rem, .78vw, .78rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(111,154,117,.16);
}

.ruin-word-c {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .2em;
}

.ruin-column-a { --x: 9%; --y: 8%; --w: clamp(36px, 4vw, 72px); --h: clamp(260px, 34vh, 460px); --rot: 4deg; --o: .1; }
.ruin-arch-scroll-a { --x: 82%; --y: 18%; --w: clamp(180px, 21vw, 360px); --h: clamp(150px, 18vw, 280px); --rot: -7deg; --o: .12; }
.ruin-fracture-a { --x: 54%; --y: 27%; --w: clamp(220px, 32vw, 560px); --h: 1px; --rot: -11deg; --o: .12; }
.ruin-word-a { --x: 18%; --y: 34%; --w: auto; --h: auto; --rot: -6deg; --o: .16; }
.ruin-column-b { --x: 88%; --y: 44%; --w: clamp(42px, 5vw, 96px); --h: clamp(330px, 42vh, 620px); --rot: -3deg; --o: .12; }
.ruin-arch-scroll-b { --x: 21%; --y: 56%; --w: clamp(200px, 28vw, 470px); --h: clamp(170px, 21vw, 340px); --rot: 8deg; --o: .11; }
.ruin-fracture-b { --x: 62%; --y: 65%; --w: clamp(260px, 36vw, 640px); --h: 1px; --rot: 7deg; --o: .13; }
.ruin-word-b { --x: 74%; --y: 72%; --w: auto; --h: auto; --rot: 3deg; --o: .15; }
.ruin-vault-a { --x: 34%; --y: 82%; --w: clamp(160px, 24vw, 430px); --h: clamp(120px, 18vw, 310px); --rot: -10deg; --o: .11; }
.ruin-column-c { --x: 12%; --y: 91%; --w: clamp(32px, 4vw, 78px); --h: clamp(240px, 30vh, 520px); --rot: 10deg; --o: .1; }
.ruin-word-c { --x: 93%; --y: 86%; --w: auto; --h: auto; --rot: 4deg; --o: .16; }
.ruin-fracture-c { --x: 48%; --y: 95%; --w: clamp(260px, 46vw, 780px); --h: 1px; --rot: -4deg; --o: .11; }

.section > .place-residue,
.section > .time-stratum {
  position: absolute;
  z-index: 1;
}

.section[data-visits]:not([data-visits="0"]) > *:not(.place-residue):not(.time-stratum) {
  filter:
    saturate(calc(1 - var(--section-visits) * .08))
    brightness(calc(1 - var(--section-visits) * .035));
}

.dark {
  color: var(--cream);
  background:
    radial-gradient(circle at 18% 18%, rgba(126,168,198,.13), transparent 30vw),
    radial-gradient(circle at 82% 74%, rgba(107,50,40,.18), transparent 34vw),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(251,248,223,.025) 88px 89px),
    linear-gradient(180deg, #050706, #0b1512);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(300px, 1fr);
  align-items: center;
  gap: 4vw;
  color: rgba(251,248,223,.9);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(126,168,198,.12), transparent 28vw),
    radial-gradient(circle at 74% 22%, rgba(107,50,40,.18), transparent 30vw),
    linear-gradient(180deg, #111713, #050706);
}

.hero-image {
  position: relative;
  align-self: center;
  max-width: 520px;
  --object-age: 0;
  --object-touches: 0;
  filter:
    saturate(calc(.7 - var(--ruin) * .24 - var(--object-age, 0) * .22))
    contrast(calc(1.1 + var(--ruin) * .28 + var(--object-age, 0) * .16))
    brightness(calc(.82 - var(--world-decay) * .22 - var(--object-age, 0) * .1));
  box-shadow:
    0 34px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(251,248,223,.11);
  transform: rotate(-2deg);
}

.hero-image::before,
.featured-cover::before,
.room-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0, calc(.28 + var(--object-age, 0) * .22))),
    linear-gradient(calc(90deg + var(--object-scar-r, 0deg)), transparent 0 46%, rgba(251,248,223, calc(var(--object-age, 0) * .16)) 46.2% 46.6%, transparent 47%),
    radial-gradient(ellipse at var(--object-scar-x, 42%) var(--object-scar-y, 34%), rgba(107,50,40, calc(.08 + var(--object-age, 0) * .22)), transparent 18%),
    radial-gradient(ellipse at 22% 18%, rgba(174,203,219,.18) 0 1px, transparent 2px),
    radial-gradient(ellipse at 74% 42%, rgba(251,248,223,.12) 0 1px, transparent 2px),
    linear-gradient(100deg, transparent 0 54%, rgba(174,203,219,.08) 54.2%, transparent 55%);
  background-size: auto, 180px 260px, 260px 340px, 520px 620px;
  mix-blend-mode: screen;
  opacity: .42;
}

.hero-image::after,
.room-photo::after,
.featured-cover::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(251,248,223,.82);
  pointer-events: none;
  opacity: calc(.82 - var(--object-age, 0) * .24);
}

.hero-collage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cover {
  position: absolute;
  width: clamp(110px, 16vw, 220px);
  border: 8px solid rgba(196,176,123,.5);
  box-shadow: 0 18px 54px rgba(0,0,0,.42);
  opacity: .42;
  filter:
    saturate(calc(.62 - var(--ruin) * .2))
    contrast(calc(1.08 + var(--ruin) * .22))
    brightness(calc(.78 - var(--world-decay) * .16));
}

.cover-a { right: 21vw; top: 15vh; transform: rotate(8deg); }
.cover-b { right: 8vw; top: 28vh; transform: rotate(-7deg); }
.cover-c { right: 28vw; bottom: 12vh; transform: rotate(-4deg); }
.cover-d { right: 8vw; bottom: 13vh; transform: rotate(6deg); }

.hero-title {
  position: relative;
  z-index: 2;
  padding-bottom: 8vh;
}

.hero-title p,
.section-head p,
.music-copy p,
.profile p,
.links > p,
.drawbook small {
  margin: 0 0 16px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .76rem;
  opacity: .72;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  line-height: .95;
}

h1 {
  font-size: clamp(5rem, 15vw, 15rem);
}

h2 {
  font-size: clamp(3rem, 8vw, 7rem);
}

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

.hero-actions a,
.play-inline,
.music-copy a {
  color: rgba(251,248,223,.86);
  border: 1px solid rgba(251,248,223,.22);
  background:
    linear-gradient(180deg, rgba(126,168,198,.08), transparent),
    rgba(251,248,223,.035);
  padding: 14px 18px;
  cursor: pointer;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.play-inline[data-top-random-play] {
  display: grid;
  place-items: center;
  width: clamp(24px, 2.2vw, 32px);
  height: clamp(24px, 2.2vw, 32px);
  padding: 0;
  border-radius: 50%;
  color: rgba(231,230,216,.88);
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(145deg, rgba(231,230,216,.18), rgba(126,168,198,.08)),
    rgba(231,236,226,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26),
    inset -3px -4px 8px rgba(8,17,15,.18),
    inset 3px 3px 8px rgba(255,255,255,.14),
    0 7px 14px rgba(0,0,0,.18),
    4px 7px 14px rgba(67,88,91,.14);
  font-size: 0;
  line-height: 0;
  transform-origin: center;
  animation: play-button-float 4.8s ease-in-out infinite;
}

.play-inline[data-top-random-play]:hover {
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.28), transparent 36%),
    linear-gradient(145deg, rgba(231,230,216,.22), rgba(126,168,198,.12)),
    rgba(231,236,226,.15);
  transform: translateY(-1px);
}

.play-mark {
  width: 62%;
  height: 62%;
  overflow: visible;
}

.play-mark-face {
  fill: rgba(239,243,237,.78);
  stroke: rgba(255,255,255,.8);
  stroke-width: 6;
  stroke-linejoin: round;
  filter: drop-shadow(2px 3px 3px rgba(54,71,78,.28));
}

.play-mark-inner {
  fill: rgba(190,204,205,.4);
  opacity: .48;
}

.play-mark-shadow {
  fill: rgba(75,92,98,.24);
  transform: translate(6px, 6px);
  filter: blur(1px);
}

.play-inline.is-floating-play {
  position: absolute;
  z-index: 8;
  margin: 0;
  transition:
    opacity .32s ease,
    filter .32s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.play-inline.is-pressed {
  animation: none;
  translate: 0 0;
  rotate: 0deg;
  transform: translateY(1px) scale(.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 3px 4px 9px rgba(8,17,15,.28),
    0 3px 7px rgba(0,0,0,.14);
  filter: brightness(.86) saturate(.92);
}

.play-inline.is-dissolving {
  animation: none;
  translate: 0 0;
  rotate: 0deg;
  opacity: 0;
  pointer-events: none;
  transform: scale(.08) rotate(12deg);
  filter: blur(7px) brightness(1.25);
}

.play-inline.is-reforming {
  animation:
    play-button-reform .62s cubic-bezier(.16, .82, .22, 1) both,
    play-button-float 4.8s ease-in-out .62s infinite;
}

.play-particle-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}

.play-particle {
  position: absolute;
  width: var(--p-size, 3px);
  height: var(--p-size, 3px);
  border-radius: 50%;
  background: rgba(237,242,236,.72);
  box-shadow:
    0 0 5px rgba(231,230,216,.28),
    0 0 12px rgba(126,168,198,.14);
  opacity: .7;
  will-change: transform, opacity, filter;
}

.play-particle.is-out {
  transform: translate(-50%, -50%) scale(1);
  animation: play-particle-out .86s cubic-bezier(.2, .04, .58, 1) forwards;
}

.play-particle.is-in {
  opacity: 0;
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.14);
  animation: play-particle-in .62s cubic-bezier(.12, .82, .18, 1) forwards;
}

@keyframes play-particle-out {
  0% {
    opacity: .82;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
  34% {
    opacity: .62;
    filter: blur(.7px);
    transform: translate(calc(-50% + var(--drift) * .18), calc(-50% + var(--dy) * .18)) scale(.72);
  }
  72% {
    opacity: .26;
    filter: blur(2.4px);
    transform: translate(calc(-50% + var(--dx) + var(--drift) * .55), calc(-50% + var(--dy) * .76)) scale(.32);
  }
  100% {
    opacity: 0;
    filter: blur(7px);
    transform: translate(calc(-50% + var(--dx) + var(--drift)), calc(-50% + var(--dy))) scale(.04);
  }
}

@keyframes play-particle-in {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.08);
  }
  64% {
    opacity: .88;
    filter: blur(.7px);
  }
  100% {
    opacity: 0;
    filter: blur(2px);
    transform: translate(-50%, -50%) scale(.92);
  }
}

@keyframes play-button-reform {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(1.35);
    transform: scale(.08);
  }
  58% {
    opacity: 1;
    filter: blur(.6px) brightness(1.12);
    transform: scale(1.22);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
  }
}

@keyframes play-button-float {
  0%,
  100% {
    translate: 0 0;
    rotate: -.8deg;
  }
  28% {
    translate: 1px -2.2px;
    rotate: .7deg;
  }
  58% {
    translate: -1.2px 1px;
    rotate: -.35deg;
  }
  78% {
    translate: .6px -1.4px;
    rotate: .45deg;
  }
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--light-line);
  padding-bottom: 16px;
}

.section-head > span {
  opacity: .62;
}

.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
}

.release-card {
  position: relative;
  display: block;
  padding: 14px;
  align-self: start;
  min-height: clamp(318px, 34vw, 420px);
  min-width: 0;
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(126,168,198,.055), rgba(107,50,40,.035)),
    rgba(251,248,223,.04);
  border: 1px solid var(--light-line);
  transform: rotate(var(--r));
  transform-origin: 50% 12%;
  transition: transform .22s ease, background .22s ease;
  translate: 0 calc(var(--world-decay) * 18px + var(--object-touches, 0) * 12px);
  overflow: hidden;
  --object-touches: 0;
  --object-age: 0;
  --object-sink: 0;
  --object-fray: 0;
  perspective: 1100px;
}

.release-card-inner {
  position: relative;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.2,.7,.16,1), filter .28s ease;
}

.release-card.is-flipped .release-card-inner {
  transform: rotateY(180deg);
}

.release-face {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 13px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.release-front {
  grid-template-rows: auto auto auto;
  overflow: hidden;
}

.release-front::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(6,10,8,.42) 46%, rgba(6,10,8,.68));
  z-index: 1;
}

.release-back {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  transform: rotateY(180deg);
  padding: 10px;
  color: rgba(251,248,223,.86);
  background:
    radial-gradient(circle at 18% 18%, rgba(126,168,198,.12), transparent 32%),
    radial-gradient(circle at 94% 84%, rgba(107,50,40,.2), transparent 36%),
    repeating-linear-gradient(0deg, rgba(251,248,223,.025) 0 1px, transparent 1px 18px),
    linear-gradient(145deg, rgba(14,24,20,.86), rgba(5,7,6,.94));
  border: 1px solid rgba(251,248,223,.12);
  overflow: hidden;
}

.release-back-label {
  color: rgba(126,168,198,.82);
  font-family: var(--font-en);
  font-size: .64rem;
  letter-spacing: .2em;
}

.release-track-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;
  max-height: clamp(170px, 22vw, 286px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(126,168,198,.46) rgba(251,248,223,.06);
}

.release-track-list::-webkit-scrollbar {
  width: 4px;
}

.release-track-list::-webkit-scrollbar-track {
  background: rgba(251,248,223,.06);
}

.release-track-list::-webkit-scrollbar-thumb {
  background: rgba(126,168,198,.46);
}

.release-track-list li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid rgba(251,248,223,.08);
  padding-bottom: 7px;
}

.release-track-number {
  color: rgba(126,168,198,.7);
  font-family: var(--font-en);
  font-size: .62rem;
  letter-spacing: .12em;
}

.release-track-title {
  min-width: 0;
  appearance: none;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: rgba(251,248,223,.88);
  font: inherit;
  font-size: clamp(.72rem, 1.2vw, .94rem);
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.release-track-title:hover,
.release-track-title:focus-visible {
  color: rgba(209,232,238,.96);
  border-bottom-color: rgba(126,168,198,.55);
  outline: 0;
  text-shadow: 0 0 12px rgba(126,168,198,.2);
}

.release-lyrics-card {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 18% 18%, rgba(126,168,198,.1), transparent 32%),
    radial-gradient(circle at 94% 84%, rgba(107,50,40,.16), transparent 36%),
    repeating-linear-gradient(0deg, rgba(251,248,223,.025) 0 1px, transparent 1px 18px),
    linear-gradient(145deg, rgba(14,24,20,.95), rgba(5,7,6,.98));
  color: rgba(251,248,223,.86);
  cursor: default;
  scrollbar-width: thin;
  scrollbar-color: rgba(126,168,198,.46) rgba(251,248,223,.06);
}

.release-lyrics-card[hidden] {
  display: none;
}

.release-lyrics-card::-webkit-scrollbar {
  width: 4px;
}

.release-lyrics-card::-webkit-scrollbar-track {
  background: rgba(251,248,223,.06);
}

.release-lyrics-card::-webkit-scrollbar-thumb {
  background: rgba(126,168,198,.46);
}

.release-lyrics-text {
  margin: 0;
  padding: 0;
  color: rgba(251,248,223,.88);
  font-family: var(--font-jp);
  font-size: clamp(.72rem, 1.2vw, .94rem);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .04em;
  white-space: pre-wrap;
}

.release-card.is-showing-lyrics .release-back-label,
.release-card.is-showing-lyrics .release-track-list,
.release-card.is-showing-lyrics .release-disc,
.release-card.is-showing-lyrics .release-link {
  pointer-events: none;
  opacity: 0;
}

.release-disc {
  align-self: end;
  justify-self: end;
  display: grid;
  place-items: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(205,229,239,.88) 0 5%, rgba(33,44,42,.94) 6% 14%, transparent 15%),
    repeating-radial-gradient(circle at center, rgba(251,248,223,.1) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 32% 24%, rgba(251,248,223,.2), transparent 24%),
    radial-gradient(circle, #121615 0%, #050706 68%, #000 100%);
  cursor: grab;
  filter: grayscale(.08) brightness(.94);
  overflow: hidden;
  color: transparent;
  touch-action: none;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease, box-shadow .16s ease;
}

.release-disc.has-cover,
.disc-drag-ghost.has-cover {
  background:
    radial-gradient(circle at center, rgba(3,5,5,.94) 0 4%, rgba(210,224,214,.82) 4.6% 6.4%, transparent 7%),
    repeating-radial-gradient(circle at center, rgba(251,248,223,.16) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 30% 22%, rgba(255,255,245,.24), transparent 22%),
    linear-gradient(135deg, rgba(0,0,0,.16), rgba(0,0,0,.52)),
    var(--record-cover) center / cover no-repeat,
    radial-gradient(circle, #101412 0%, #020403 100%);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.46),
    0 0 12px rgba(126,168,198,.12);
}

.release-disc::before,
.disc-drag-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(0,0,0,.18) 19% 20%, transparent 21% 100%),
    linear-gradient(110deg, transparent 0 34%, rgba(255,255,245,.08) 42%, transparent 54%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.44);
  mix-blend-mode: screen;
  pointer-events: none;
}

.release-disc .record-label,
.disc-drag-ghost .record-label {
  position: relative;
  z-index: 2;
  display: block;
  width: 23%;
  height: 23%;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(5,7,6,.94) 0 22%, rgba(215,226,218,.82) 23% 33%, rgba(30,39,36,.92) 34% 100%);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.42),
    0 0 8px rgba(126,168,198,.1);
  pointer-events: none;
}

.release-disc:hover {
  transform: translateY(-2px) rotate(12deg);
  filter: brightness(1.18);
  box-shadow: 0 0 18px rgba(126,168,198,.24);
}

.release-disc-album {
  margin-top: auto;
}

.release-disc.is-empty {
  opacity: .32;
  cursor: not-allowed;
  filter: grayscale(1) brightness(.62);
}

.release-disc.is-rejected {
  animation: discReject .32s ease;
}

.release-disc.is-dragging {
  opacity: .2;
}

.release-card:has(.release-disc.is-grabbed),
.release-card:has(.release-disc.is-grabbed) .release-back,
body.grab-mode .release-card,
body.grab-mode .release-card-inner,
body.grab-mode .release-face,
body.grab-mode .release-back,
.release-card:has(.has-grab-offset),
.release-card:has(.has-grab-offset) .release-card-inner,
.release-card:has(.has-grab-offset) .release-face,
.release-card:has(.has-grab-offset) .release-back {
  overflow: visible;
}

body.grab-mode .release-front,
.release-card:has(.has-grab-offset) .release-front {
  overflow: hidden;
}

body.grab-mode .release-front::after,
.release-card:has(.has-grab-offset) .release-front::after {
  inset: auto 0 0;
  height: 42%;
}

body.grab-mode .release-year,
body.grab-mode .release-title,
.release-card:has(.has-grab-offset) .release-year,
.release-card:has(.has-grab-offset) .release-title {
  max-width: calc(100% - clamp(20px, 9.2%, 36px));
  overflow: hidden;
}

.release-link {
  align-self: end;
  justify-self: start;
  margin-top: auto;
  border-bottom: 1px solid rgba(251,248,223,.38);
  padding-bottom: 4px;
  color: rgba(251,248,223,.9);
  font-family: var(--font-en);
  font-size: .72rem;
  letter-spacing: .18em;
  cursor: pointer;
}

.release-link:hover {
  color: #fff;
  border-color: rgba(126,168,198,.75);
}

.disc-drag-ghost {
  position: fixed;
  z-index: 220;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(205,229,239,.88) 0 5%, rgba(33,44,42,.94) 6% 14%, transparent 15%),
    repeating-radial-gradient(circle at center, rgba(251,248,223,.12) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 32% 24%, rgba(251,248,223,.22), transparent 24%),
    radial-gradient(circle, #121615 0%, #050706 68%, #000 100%);
  pointer-events: none;
  translate: -50% -50%;
  filter:
    drop-shadow(0 0 16px rgba(126,168,198,.44))
    drop-shadow(0 18px 28px rgba(0,0,0,.52));
  animation: discFloat .62s ease-in-out infinite alternate;
}

.loose-record {
  position: absolute;
  z-index: 66;
  width: 58px;
  height: 58px;
  translate: -50% -50%;
  box-shadow:
    0 0 18px rgba(126,168,198,.12),
    0 14px 30px rgba(0,0,0,.42);
}

.loose-record:hover {
  transform: translateY(-2px) rotate(18deg) scale(1.04);
}

@keyframes discFloat {
  from { transform: rotate(-10deg) scale(.98); }
  to { transform: rotate(12deg) scale(1.08); }
}

@keyframes discReject {
  0%,
  100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.release-card::after,
.featured-cover::after,
.room-photo::after,
.profile img {
  transition: filter .4s ease, opacity .4s ease;
}

.release-card::after,
.featured-cover::after,
.room-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--world-decay) * .5 + var(--memory-load) * .1 + var(--memory-pressure) * .16 + var(--object-touches, 0) * .2 + var(--object-age, 0) * .38);
  background:
    radial-gradient(ellipse at 50% calc(96% - var(--memory-pressure) * 12%), rgba(8,17,15, calc(var(--memory-pressure) * .2)), transparent 40%),
    linear-gradient(180deg, rgba(8,17,15,0), rgba(8,17,15, calc(.16 + var(--object-age, 0) * .2))),
    linear-gradient(calc(76deg + var(--object-scar-r, 0deg)), transparent 0 48%, rgba(251,248,223, calc(var(--object-age, 0) * .13)) 48.2% 48.7%, transparent 49%),
    radial-gradient(ellipse at var(--object-scar-x, 22%) var(--object-scar-y, 8%), rgba(196,156,85, calc(.12 + var(--object-age, 0) * .2)), transparent 34%),
    radial-gradient(ellipse at 78% 74%, rgba(107,50,40, calc(.18 + var(--object-age, 0) * .2)), transparent 42%),
    repeating-linear-gradient(98deg, transparent 0 22px, rgba(126,168,198, calc(.045 + var(--object-age, 0) * .08)) 22px 23px);
  mix-blend-mode: multiply;
}

.release-card img,
.featured-cover img,
.hero-image img,
.room-photo img {
  transform-origin: 50% 18%;
  transition: filter .5s ease, opacity .5s ease, transform .5s ease;
}

.release-card::before,
.featured-cover::before,
.hero-image::before,
.room-photo::before {
  opacity: calc(.24 + var(--object-touches, 0) * .24 + var(--object-age, 0) * .22);
}

.release-card.object-wet,
.featured-cover.object-wet,
.hero-image.object-wet,
.room-photo.object-wet,
.profile img.object-wet,
.link-list a.object-wet {
  border-color: rgba(126,168,198, calc(.18 + var(--object-touches, 0) * .2));
  box-shadow:
    0 calc(18px + var(--object-sink, 0) * 20px) calc(54px + var(--object-sink, 0) * 46px) rgba(0,0,0, calc(.46 + var(--object-age, 0) * .18)),
    0 0 0 1px rgba(126,168,198, calc(.08 + var(--object-touches, 0) * .16)),
    inset 0 calc(var(--object-fray, 0) * -22px) calc(38px + var(--object-fray, 0) * 30px) rgba(8,17,15, calc(.1 + var(--object-age, 0) * .2));
}

.release-card.object-ruined,
.featured-cover.object-ruined,
.hero-image.object-ruined,
.room-photo.object-ruined,
.profile img.object-ruined,
.link-list a.object-ruined {
  filter:
    saturate(calc(.72 - var(--object-age, 0) * .18))
    contrast(calc(1.08 + var(--object-age, 0) * .18))
    brightness(calc(.86 - var(--object-age, 0) * .16));
}

.release-card.object-ruined img,
.featured-cover.object-ruined img,
.hero-image.object-ruined img,
.room-photo.object-ruined img {
  transform:
    translate3d(0, calc(var(--object-sink, 0) * 8px), 0)
    rotate(calc(var(--object-scar-r, 0deg) * .06));
  filter:
    saturate(calc(.62 - var(--object-age, 0) * .18))
    contrast(calc(1.18 + var(--object-age, 0) * .26))
    brightness(calc(.74 - var(--object-age, 0) * .16))
    blur(calc(var(--object-age, 0) * .34px));
}

.release-card.object-near,
.featured-cover.object-near,
.hero-image.object-near,
.room-photo.object-near,
.profile img.object-near,
.link-list a.object-near {
  box-shadow:
    0 0 0 1px rgba(126,168,198, calc(.1 + var(--object-touches, 0) * .2)),
    0 0 calc(24px + var(--object-touches, 0) * 42px) rgba(126,168,198,.12),
    0 24px 78px rgba(0,0,0,.52);
}

.release-card.object-touched-now,
.featured-cover.object-touched-now,
.hero-image.object-touched-now,
.room-photo.object-touched-now,
.profile img.object-touched-now,
.link-list a.object-touched-now {
  animation: objectWetPulse .72s ease-out both;
}

.release-card[data-touches]:not([data-touches="0"]) img,
.featured-cover[data-touches]:not([data-touches="0"]) img,
.hero-image[data-touches]:not([data-touches="0"]) img,
.room-photo[data-touches]:not([data-touches="0"]) img,
.profile img[data-touches]:not([data-touches="0"]) {
  filter:
    saturate(calc(.74 - var(--object-touches, 0) * .18 - var(--object-age, 0) * .22))
    contrast(calc(1.08 + var(--object-touches, 0) * .16 + var(--world-decay) * .14 + var(--object-age, 0) * .18))
    brightness(calc(.82 - var(--object-touches, 0) * .12 - var(--world-decay) * .08 - var(--object-age, 0) * .12))
    sepia(calc(var(--object-age, 0) * .22));
}

.release-card[data-touches]:not([data-touches="0"]) strong,
.release-card[data-touches]:not([data-touches="0"]) > span,
.link-list a[data-touches]:not([data-touches="0"]) > span,
.link-list a[data-touches]:not([data-touches="0"]) b {
  text-shadow:
    1px 0 rgba(126,168,198, calc(var(--object-touches, 0) * .22)),
    -1px 0 rgba(107,50,40, calc(var(--object-touches, 0) * .18));
}

.link-list a[data-touches]:not([data-touches="0"]) {
  color: rgba(251,248,223, calc(.84 - var(--object-touches, 0) * .22));
  background:
    linear-gradient(90deg, rgba(107,50,40, calc(.08 + var(--object-touches, 0) * .18)), transparent 54%),
    linear-gradient(180deg, rgba(126,168,198, calc(var(--object-touches, 0) * .07)), transparent);
}

.release-card.object-wet::after,
.featured-cover.object-wet::after,
.room-photo.object-wet::after,
.hero-image.object-wet::before {
  background-size:
    auto,
    calc(140px - var(--object-fray, 0) * 32px) calc(240px - var(--object-fray, 0) * 48px),
    calc(220px - var(--object-fray, 0) * 40px) calc(300px - var(--object-fray, 0) * 52px),
    calc(30px - var(--object-fray, 0) * 8px) calc(30px - var(--object-fray, 0) * 8px);
}

.link-list a.object-wet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(.08 + var(--object-touches, 0) * .22);
  background:
    radial-gradient(ellipse at var(--object-scar-x, 48%) var(--object-scar-y, 44%), rgba(126,168,198,.34), transparent 24%),
    linear-gradient(calc(88deg + var(--object-scar-r, 0deg)), transparent 0 48%, rgba(251,248,223,.12) 48.2% 48.6%, transparent 49%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(107,50,40,.08) 28px 29px);
  mix-blend-mode: screen;
}

body.memory-saturated .release-card::before,
body.memory-saturated .featured-cover::before,
body.memory-saturated .room-photo::before {
  opacity: calc(.34 + var(--memory-load) * .2 + var(--memory-pressure) * .18);
}

body.memory-overflow .hero-title h1,
body.memory-overflow .music-copy h2,
body.memory-overflow .profile h2 {
  text-shadow:
    1px 0 rgba(126,168,198,.18),
    -1px 0 rgba(107,50,40,.16),
    0 0 24px rgba(126,168,198,.12);
}

body.memory-saturated .release-card,
body.memory-saturated .featured-cover,
body.memory-saturated .room-photo,
body.memory-saturated .link-list a {
  border-color: rgba(126,168,198, calc(.16 + var(--memory-pressure) * .18));
  box-shadow:
    0 24px calc(68px + var(--memory-pressure) * 46px) rgba(0,0,0, calc(.44 + var(--memory-pressure) * .12)),
    inset 0 calc(var(--memory-pressure) * -18px) calc(var(--memory-pressure) * 46px) rgba(8,17,15, calc(.12 + var(--memory-pressure) * .16));
}

body.memory-overflow .release-card,
body.memory-overflow .featured-cover,
body.memory-overflow .room-photo {
  translate: 0 calc(var(--memory-pressure) * 14px);
}

body.memory-overflow .link-list a {
  letter-spacing: calc(.01em + var(--memory-pressure) * .018em);
}

.release-card:hover {
  transform: rotate(0deg) translateY(-7px);
  background: rgba(251,248,223,.1);
}

.release-card.large {
  grid-row: auto;
}

.release-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter:
    saturate(calc(.68 - var(--ruin) * .25))
    contrast(calc(1.12 + var(--ruin) * .28))
    brightness(calc(.82 - var(--world-decay) * .24));
}

.release-card > span {
  font-family: var(--font-en);
  color: #8abce8;
  letter-spacing: .16em;
}

.release-year {
  position: absolute;
  left: clamp(10px, 4.6%, 18px);
  right: clamp(10px, 4.6%, 18px);
  bottom: clamp(54px, 13%, 66px);
  z-index: 2;
  width: auto !important;
  color: rgba(178,206,219,.9);
  line-height: 1;
  pointer-events: none;
}

.release-card strong {
  font-family: var(--font-jp);
  font-size: clamp(1.05rem, 2.25vw, 1.68rem);
  font-weight: 400;
}

.release-title {
  position: absolute;
  left: clamp(10px, 4.6%, 18px);
  right: clamp(10px, 4.6%, 18px);
  bottom: clamp(14px, 4.6%, 20px);
  z-index: 2;
  display: block;
  width: auto !important;
  max-width: calc(100% - clamp(20px, 9.2%, 36px));
  max-height: 2.4em;
  overflow: hidden;
  color: rgba(231,230,216,.92);
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-shadow:
    0 1px 16px rgba(0,0,0,.48),
    0 0 18px rgba(111,154,117,.12);
  pointer-events: none;
}

.music {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(280px, 1fr);
  gap: 5vw;
  align-items: center;
}

.featured-cover {
  position: relative;
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(0,0,0,.58);
  transform: rotate(-2deg);
  --object-age: 0;
  --object-touches: 0;
}

.featured-cover img,
.room-photo img,
.profile img {
  filter:
    saturate(calc(.7 - var(--world-decay) * .28))
    contrast(calc(1.08 + var(--world-decay) * .26))
    brightness(calc(.84 - var(--world-decay) * .2));
}

.play-button {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px solid rgba(251,248,223,.76);
  background: rgba(8,17,15,.64);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.play-button::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 25px;
  border-left: 22px solid var(--cream);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.music-copy ol {
  list-style: decimal-leading-zero;
  margin: 34px 0;
  padding: 0 0 0 28px;
  display: grid;
  gap: 14px;
  font-family: var(--font-jp);
  font-size: clamp(1rem, 2vw, 1.45rem);
}

.music-copy a {
  color: var(--cream);
  border-color: var(--light-line);
  background: rgba(251,248,223,.06);
}

.room {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 5vw;
  align-items: center;
  min-width: 0;
  color: rgba(251,248,223,.88);
  background:
    radial-gradient(circle at 25% 20%, rgba(126,168,198,.13), transparent 30vw),
    radial-gradient(circle at 82% 70%, rgba(107,50,40,.18), transparent 34vw),
    linear-gradient(145deg, #101c17, #050706);
}

.room > * {
  min-width: 0;
}

.room-photo {
  position: relative;
  inline-size: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 32px 90px var(--shadow);
  --object-age: 0;
  --object-touches: 0;
}

.room-photo img {
  display: block;
  inline-size: 100%;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: center;
}

.room-tags > span {
  padding: 12px 14px;
  border: 1px solid rgba(251,248,223,.15);
  border-radius: 999px;
  background: rgba(251,248,223,.045);
  translate: 0 calc(var(--world-decay) * 12px);
}

.daily-log {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(8px, 2vw, 24px);
  padding-top: clamp(18px, 3vw, 34px);
  border-top: 1px solid rgba(251,248,223,.13);
}

.daily-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(251,248,223,.76);
  font-family: var(--font-bit);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.daily-log-head a {
  color: rgba(126,168,198,.78);
}

.daily-log-grid {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.daily-log-grid::-webkit-scrollbar {
  display: none;
}

.daily-log:has(.daily-log-card.is-grabbed),
.daily-log-grid:has(.daily-log-card.is-grabbed),
body.grab-mode .daily-log,
body.grab-mode .daily-log-grid,
body.grab-mode .daily-log-card,
body.grab-mode .daily-log-stage,
.daily-log:has(.has-grab-offset),
.daily-log-grid:has(.has-grab-offset),
.daily-log-card:has(.has-grab-offset) {
  overflow: visible;
}

.daily-log-scrollbar {
  position: relative;
  width: min(100%, 360px);
  height: 34px;
  margin: 2px auto 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(126,168,198,.08), transparent),
    rgba(251,248,223,.035);
  box-shadow:
    inset 0 0 0 1px rgba(251,248,223,.045),
    inset 0 0 18px rgba(0,0,0,.16);
}

.daily-log-orb {
  position: absolute;
  left: 0;
  top: 3px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  translate: var(--orb-x, 0) 0;
  background:
    radial-gradient(circle at 36% 26%, rgba(255,255,245,.32), transparent 32%),
    radial-gradient(circle at 58% 64%, rgba(126,168,198,.28), transparent 44%),
    rgba(5,7,6,.66);
  cursor: grab;
  touch-action: none;
  box-shadow:
    0 8px 18px rgba(0,0,0,.24),
    0 0 13px rgba(126,168,198,.16),
    inset 0 0 0 1px rgba(251,248,223,.18);
  filter: saturate(.86) brightness(.9);
  transition: filter .16s ease, scale .16s ease, box-shadow .16s ease;
}

.daily-log-orb::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: rgba(251,248,223,.36);
  box-shadow: 0 0 8px rgba(126,168,198,.22);
}

.daily-log-orb:hover,
.daily-log-orb.is-dragging {
  scale: 1.08;
  filter: saturate(1) brightness(1.05);
  box-shadow:
    0 10px 22px rgba(0,0,0,.3),
    0 0 20px rgba(126,168,198,.26),
    inset 0 0 0 1px rgba(251,248,223,.26);
}

.daily-log-orb.is-dragging {
  cursor: grabbing;
}

.daily-log-orb.is-disabled {
  opacity: .34;
  pointer-events: none;
}

.daily-log-card {
  position: relative;
  flex: 0 0 clamp(220px, 28vw, 340px);
  min-width: 0;
  border: 1px solid rgba(251,248,223,.12);
  background:
    linear-gradient(180deg, rgba(126,168,198,.055), rgba(111,154,117,.035)),
    rgba(5,7,6,.32);
  box-shadow:
    inset 0 0 0 1px rgba(251,248,223,.025),
    0 18px 44px rgba(0,0,0,.24);
  overflow: hidden;
  scroll-snap-align: start;
}

.daily-log-card[data-log-type="thinking"] {
  border-color: rgba(126,168,198,.22);
  background:
    linear-gradient(180deg, rgba(126,168,198,.085), rgba(37,55,45,.04)),
    rgba(5,7,6,.34);
}

.daily-log-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #050706;
  cursor: pointer;
  overflow: hidden;
}

.daily-log-stage img,
.daily-log-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body.grab-mode .daily-log-stage iframe {
  pointer-events: none;
}

body.grab-mode .daily-log-play {
  opacity: 0;
  pointer-events: none;
}

.daily-log-embed-notice {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 18px;
  color: rgba(251,248,223,.78);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(126,168,198,.12), transparent 58%),
    rgba(5,7,6,.82);
  font-family: var(--font-bit);
  font-size: .62rem;
  letter-spacing: .14em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

.daily-log-embed-notice a {
  color: rgba(126,168,198,.9);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.daily-log-stage img {
  object-fit: cover;
  filter: saturate(.64) contrast(1.16) brightness(.72);
  transition: filter .18s ease, scale .18s ease;
}

.daily-log-stage:hover img {
  filter: saturate(.78) contrast(1.2) brightness(.9);
  scale: 1.025;
}

.daily-log-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  translate: -50% -50%;
  border: 1px solid rgba(251,248,223,.28);
  border-radius: 50%;
  color: rgba(251,248,223,.86);
  background: rgba(5,7,6,.42);
  font-family: var(--font-bit);
  font-size: .52rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(126,168,198,.12);
}

.daily-log-meta {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.daily-log-meta time {
  color: rgba(126,168,198,.7);
  font-family: var(--font-bit);
  font-size: .54rem;
  letter-spacing: .16em;
}

.daily-log-meta strong {
  min-width: 0;
  color: rgba(251,248,223,.84);
  font-size: clamp(.75rem, 1vw, .9rem);
  font-weight: 400;
  line-height: 1.45;
}

.daily-log-status {
  margin: 0;
  color: rgba(251,248,223,.5);
  font-family: var(--font-bit);
  font-size: .62rem;
  letter-spacing: .18em;
}

dl {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
}

dl div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  border-top: 1px solid rgba(251,248,223,.14);
  padding-top: 14px;
}

dt {
  opacity: .58;
  letter-spacing: .16em;
  text-transform: uppercase;
}

dd {
  margin: 0;
}

.link-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: clamp(12px, 1.8vw, 22px);
  margin-top: 36px;
}

.link-list a {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  aspect-ratio: 1;
  min-height: 0;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--light-line);
  font-family: var(--font-en);
  font-size: clamp(.74rem, 1.2vw, .92rem);
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  color: rgba(231,230,216,.82);
  background:
    radial-gradient(circle at 24% 18%, rgba(231,230,216,.06), transparent 34%),
    radial-gradient(circle at 84% 86%, rgba(107,50,40, calc(.06 + var(--world-decay) * .1)), transparent 38%),
    repeating-linear-gradient(0deg, rgba(231,230,216,.018) 0 1px, transparent 1px 18px),
    linear-gradient(145deg, rgba(20,32,27,.5), rgba(5,8,7,.74));
  overflow: hidden;
  pointer-events: auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,232,.025),
    0 18px 46px rgba(0,0,0,.2);
  transform: rotate(var(--link-card-r, 0deg));
  transition: transform .22s ease, border-color .22s ease, color .22s ease;
  --link-card-r: 0deg;
}

.link-list a:nth-child(3n + 1) { --link-card-r: -.7deg; }
.link-list a:nth-child(3n + 2) { --link-card-r: .55deg; }
.link-list a:nth-child(3n) { --link-card-r: -.25deg; }

.link-list a:hover,
.link-list a:focus-visible {
  outline: 0;
  border-color: rgba(158,180,177,.36);
  color: rgba(245,244,229,.96);
  transform: rotate(0deg) translateY(-3px);
}

.link-list .service-icon {
  position: relative;
  z-index: 2;
  width: clamp(42px, 8vw, 76px);
  height: clamp(42px, 8vw, 76px);
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .86;
}

.link-list .service-icon path,
.link-list .service-icon circle,
.link-list .service-icon rect {
  vector-effect: non-scaling-stroke;
}

.link-list a[href*="x.com"] .service-icon path,
.link-list a[href*="music.apple"] .service-icon path {
  fill: currentColor;
  stroke: none;
}

.link-list a[href*="youtube"] .service-icon rect,
.link-list a[href*="spotify"] .service-icon circle,
.link-list a[href*="tunecore"] .service-icon circle {
  fill: none;
}

.link-list a[href*="youtube"] .service-icon path {
  fill: currentColor;
  stroke: none;
}

.link-list .service-name {
  position: relative;
  z-index: 2;
  cursor: pointer;
  line-height: 1.2;
}

.link-list a::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px 12px;
  height: 1px;
  pointer-events: none;
  opacity: calc(.22 + var(--world-decay) * .2);
  background: rgba(231,230,216,.34);
}

body.time-aged .section {
  filter:
    saturate(calc(1 - var(--ruin) * .1))
    brightness(calc(1 - var(--ruin) * var(--section-depth) * .08));
  box-shadow:
    inset 0 calc(var(--world-decay) * 90px) calc(var(--world-decay) * 120px) rgba(0,0,0,.2),
    inset 0 calc(var(--world-decay) * -80px) calc(var(--world-decay) * 120px) rgba(0,0,0,.28);
}

body.day-1 .release-card,
body.day-1 .featured-cover,
body.day-1 .room-photo,
body.day-1 .profile img {
  border-color: rgba(196,156,85,.28);
}

body.day-7 .hero-title,
body.day-7 .music-copy,
body.day-7 .profile div,
body.day-7 .link-list a {
  filter: blur(.15px);
  text-shadow: 0 0 8px rgba(126,168,198,.12);
}

body.day-7 .memo-note {
  --wet: .44;
}

body.day-7 .release-card img,
body.day-7 .featured-cover img,
body.day-7 .room-photo img {
  filter:
    saturate(calc(.54 - var(--ruin) * .12))
    contrast(calc(1.18 + var(--ruin) * .22))
    brightness(calc(.74 - var(--ruin) * .08));
}

body.day-7 .release-card strong,
body.day-7 .music-copy li,
body.day-7 .room-tags > span {
  text-shadow:
    1px 0 rgba(126,168,198,.16),
    -1px 0 rgba(107,50,40,.12);
}

body.day-30 .release-card:nth-child(odd),
body.day-30 .room-tags > span:nth-child(odd),
body.day-30 .link-list a:nth-child(odd) {
  translate: calc(var(--ruin) * -16px) calc(var(--ruin) * 16px);
  rotate: calc(var(--ruin) * -.7deg);
}

body.day-30 .release-card:nth-child(even),
body.day-30 .room-tags > span:nth-child(even),
body.day-30 .link-list a:nth-child(even) {
  translate: calc(var(--ruin) * 14px) calc(var(--ruin) * 10px);
  rotate: calc(var(--ruin) * .62deg);
}

body.day-30 .release-card,
body.day-30 .featured-cover,
body.day-30 .room-photo,
body.day-30 .profile img {
  border-color: rgba(126,168,198, calc(.14 + var(--waterline) * .14));
  background:
    linear-gradient(180deg, rgba(126,168,198, calc(.06 + var(--after-rain) * .1)), rgba(8,17,15, calc(.08 + var(--hour-shadow) * .08))),
    rgba(251,248,223,.032);
  box-shadow:
    0 22px 76px rgba(0,0,0,.62),
    0 calc(var(--ruin) * 18px) calc(var(--ruin) * 52px) rgba(107,50,40,.2),
    inset 0 0 0 1px rgba(196,156,85,.1);
}

body.day-30 .release-card::before,
body.day-30 .link-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(.18 + var(--ruin) * .24);
  background:
    radial-gradient(ellipse at 48% 94%, rgba(8,17,15, calc(.2 + var(--waterline) * .14)), transparent 44%),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(251,248,223,.035) 9px 10px),
    linear-gradient(90deg, rgba(126,168,198,.08), transparent 36%, rgba(107,50,40,.08));
  mix-blend-mode: screen;
}

body.day-30 .release-card img,
body.day-30 .featured-cover img,
body.day-30 .room-photo img {
  transform:
    translate3d(0, calc(var(--waterline) * 5px), 0)
    rotate(calc(var(--ruin) * .45deg));
}

body.day-30 main > .section::before {
  background:
    linear-gradient(180deg, rgba(8,17,15, calc(var(--ruin) * .16)), transparent 26%, rgba(8,17,15, calc(var(--ruin) * .28)) 100%),
    radial-gradient(ellipse at 20% 22%, rgba(107,50,40,.26), transparent 34vw),
    radial-gradient(ellipse at 82% 82%, rgba(126,168,198,.2), transparent 38vw),
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(251,248,223,.028) 11px 12px);
}

body.day-30 .hero-title,
body.day-30 .section-head,
body.day-30 .music-copy,
body.day-30 .profile div,
body.day-30 .link-list {
  opacity: calc(1 - var(--ruin) * .34 - var(--memory-sediment) * .12);
  transform: translate3d(0, calc(var(--memory-sediment) * 10px), 0);
}

body.day-30 .hero-collage .cover {
  opacity: calc(.38 - var(--ruin) * .2);
  filter:
    grayscale(calc(var(--ruin) * .34))
    blur(calc(var(--ruin) * .42px))
    brightness(calc(.76 - var(--ruin) * .1));
}

body.day-100 main > .section {
  opacity: .22;
  transform: translate3d(0, calc(var(--waterline) * 16px), 0);
}

body.day-100::before {
  opacity: .42;
  filter: grayscale(.42) contrast(1.18);
}

body.day-100 .hero-image,
body.day-100 .featured-cover,
body.day-100 .room-photo,
body.day-100 .profile img,
body.day-100 .release-card {
  filter: grayscale(.86) contrast(1.58) brightness(.34) blur(.42px);
}

body.day-100 .hero-image img,
body.day-100 .featured-cover img,
body.day-100 .room-photo img,
body.day-100 .release-card img {
  opacity: .36;
  mix-blend-mode: screen;
  transform:
    translate3d(0, calc(var(--waterline) * 14px), 0)
    rotate(calc(var(--rot-warmth) * .9deg));
}

body.day-100 .release-card strong,
body.day-100 .music-copy h2,
body.day-100 .profile h2 {
  color: rgba(251,248,223,.38);
  text-shadow:
    0 0 18px rgba(126,168,198,.28),
    0 0 42px rgba(251,248,223,.1);
}

body.day-100 .release-card > span,
body.day-100 .music-copy li,
body.day-100 .room-tags > span,
body.day-100 dt,
body.day-100 dd {
  color: rgba(251,248,223,.28);
}

body.day-100 .room-photo {
  opacity: .46;
  box-shadow:
    0 0 0 1px rgba(126,168,198,.1),
    0 0 86px rgba(126,168,198,.1);
}

body.day-100 .room-tags > span {
  border-color: rgba(126,168,198,.16);
  background: rgba(8,17,15,.18);
  filter: blur(.18px);
}

body.day-100 .link-list a {
  color: rgba(251,248,223,.3);
  border-color: rgba(126,168,198,.12);
  font-size: clamp(.68rem, 1vw, .84rem);
  filter: saturate(.64) blur(.12px);
  background:
    linear-gradient(180deg, rgba(8,17,15,.18), rgba(8,17,15,.34)),
    linear-gradient(90deg, rgba(107,50,40,.08), transparent 52%, rgba(126,168,198,.05));
}

body.day-100 .link-list .service-icon {
  opacity: .22;
}

body.day-100 .hero-title,
body.day-100 .section-head,
body.day-100 .music-copy,
body.day-100 .profile div,
body.day-100 .room-tags,
body.day-100 .link-list {
  opacity: calc(.18 - var(--memory-sediment) * .08);
  filter:
    blur(calc(.72px + var(--memory-sediment) * .7px))
    grayscale(.42)
    contrast(1.22);
  transform: translate3d(0, calc(var(--memory-sediment) * 18px), 0);
}

body.day-100 .hero-collage,
body.day-100 .cover-drop,
body.day-100 .place-residue,
body.day-100 .time-stratum,
body.day-100 .memory-residue,
body.day-100 .memory-fragment {
  opacity: .18;
  filter:
    blur(1.4px)
    grayscale(.5)
    contrast(1.28);
}

body.day-100 .memory-pool,
body.day-100 .site-stain,
body.day-100 .rust-trace,
body.day-100 .time-fossil {
  opacity: calc(.42 + var(--memory-sediment) * .12);
  filter:
    blur(calc(7px + var(--memory-sediment) * 3px))
    grayscale(.35)
    contrast(1.2);
}

body.day-100 main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
  opacity: .46;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(8,17,15,.66), transparent 48vw),
    linear-gradient(180deg, transparent 0 38%, rgba(8,17,15,.52) 100%),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(126,168,198,.045) 42px 43px);
  mix-blend-mode: multiply;
}

body.day-100 .site-header,
body.day-100 footer {
  opacity: .48;
}

body.day-100 .toybox,
body.day-100 .site-clock,
body.day-100 .drawbook,
body.day-100 .player,
body.day-100 .memo-note,
body.day-100 .predator {
  opacity: 1;
}

body.day-100 .toybox,
body.day-100 .site-clock,
body.day-100 .player {
  filter: none;
}

body.day-100 .memo-note {
  --wet: .72;
  color: rgba(8,17,15,.64);
  background:
    linear-gradient(180deg, rgba(126,168,198,.1), rgba(98,74,42,.13)),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(8,17,15,.13) 15px 16px),
    var(--memo-color, #d6c69e);
}

body.day-100 .drawbook {
  box-shadow:
    0 0 0 1px rgba(126,168,198,.14),
    0 34px 110px rgba(0,0,0,.7);
}

body.day-100 .predator {
  opacity: calc(.32 + var(--world-decay) * .22);
}

body.day-100 .memory-fragment {
  opacity: .32;
  color: rgba(251,248,223,.22);
  border-color: rgba(126,168,198,.1);
  filter: blur(.72px) grayscale(.35);
}

body.day-100 .toybox-toggle {
  border-color: rgba(251,248,223,.42);
  box-shadow:
    0 0 0 1px rgba(126,168,198,.12),
    0 0 42px rgba(126,168,198,.18);
}

body.day-100.rebuilding-world main > .section {
  opacity: .72;
}

body.day-100.rebuilding-world .hero-image,
body.day-100.rebuilding-world .featured-cover,
body.day-100.rebuilding-world .room-photo,
body.day-100.rebuilding-world .profile img,
body.day-100.rebuilding-world .release-card {
  filter: saturate(.92) contrast(1.08) brightness(.72);
}

body.day-100.rebuilding-world .hero-image img,
body.day-100.rebuilding-world .featured-cover img,
body.day-100.rebuilding-world .room-photo img,
body.day-100.rebuilding-world .release-card img {
  opacity: .72;
}

body.day-100.rebuilding-world .release-card strong,
body.day-100.rebuilding-world .music-copy h2,
body.day-100.rebuilding-world .profile h2,
body.day-100.rebuilding-world h1 {
  color: rgba(251,248,223,.68);
  text-shadow:
    0 0 18px rgba(126,168,198,.26),
    0 0 44px rgba(251,248,223,.1);
}

body.day-100.worldline-touched .toybox-toggle::before {
  content: attr(data-worldline);
  display: inline-block;
  margin-right: 10px;
  color: rgba(var(--worldline-rgb, 126,168,198), .78);
  font-size: .62rem;
  letter-spacing: .12em;
}

.link-list a:last-child {
  border-bottom: 1px solid var(--light-line);
}

.floating-layer {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}

.trace-layer {
  position: absolute;
  inset: 0;
  z-index: 42;
  pointer-events: none;
}

.touch-trace {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(circle, rgba(251,248,223,.16), transparent 34%),
    radial-gradient(circle, rgba(126,168,198,.16), transparent 56%);
  mix-blend-mode: screen;
  animation: traceFade 1.8s ease-out forwards;
}

.place-echo {
  position: absolute;
  z-index: 41;
  translate: -50% -50%;
  rotate: var(--echo-r, 0deg);
  pointer-events: none;
  max-width: 180px;
  padding: 5px 8px;
  border: 1px solid rgba(251,248,223,.1);
  color: rgba(251,248,223,.48);
  background:
    linear-gradient(180deg, rgba(8,17,15,.34), rgba(8,17,15,.08)),
    rgba(126,168,198, calc(.04 + var(--after-rain) * .06));
  font-family: var(--font-en);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: lowercase;
  white-space: nowrap;
  filter:
    blur(calc(var(--world-decay) * .18px))
    saturate(calc(.8 + var(--waterline) * .18));
  mix-blend-mode: screen;
  animation: placeEcho 4.2s cubic-bezier(.16,.84,.2,1) forwards;
}

.place-echo-archive {
  color: rgba(196,156,85,.54);
  border-color: rgba(196,156,85,.12);
}

.place-echo-music {
  color: rgba(126,168,198,.58);
}

.place-echo-room {
  color: rgba(79,160,115,.5);
}

.place-echo-links {
  color: rgba(251,248,223,.42);
  border-color: rgba(126,168,198,.12);
}

.rust-trace {
  position: absolute;
  width: 96px;
  height: 46px;
  translate: -50% -50%;
  rotate: var(--trace-r, 0deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(107,50,40,.28), transparent 68%),
    radial-gradient(ellipse at 68% 48%, rgba(196,156,85,.14), transparent 56%);
  filter: blur(3px);
  mix-blend-mode: multiply;
  animation: rustSettle 8s ease-out forwards;
}

.site-stain {
  position: absolute;
  width: var(--stain-size, 120px);
  height: calc(var(--stain-size, 120px) * (.5 + var(--waterline) * .18));
  translate: -50% -50%;
  rotate: var(--stain-r, 0deg);
  border-radius: 52% 48% 58% 42%;
  opacity: calc(var(--stain-alpha, .12) + var(--world-decay) * .06 + var(--after-rain) * .04);
  background:
    radial-gradient(ellipse at 44% 46%, rgba(107,50,40, calc(.48 + var(--rot-warmth) * .18)), transparent 58%),
    radial-gradient(ellipse at 66% 30%, rgba(196,156,85, calc(.22 + var(--rot-warmth) * .1)), transparent 42%),
    radial-gradient(ellipse at 30% 72%, rgba(126,168,198, calc(.12 + var(--waterline) * .12)), transparent 46%);
  filter: blur(calc(4px + var(--waterline) * 2px));
  mix-blend-mode: multiply;
}

.site-stain::after {
  content: "";
  position: absolute;
  left: 44%;
  top: 50%;
  width: calc(12px + var(--waterline) * 18px);
  height: calc(46px + var(--after-rain) * 90px);
  translate: -50% 0;
  border-radius: 999px;
  opacity: calc(.12 + var(--after-rain) * .22);
  background: linear-gradient(180deg, rgba(8,17,15,.28), transparent);
  filter: blur(5px);
}

.time-fossil {
  position: absolute;
  z-index: 39;
  width: calc(38px + var(--time-age, 0) * 42px);
  height: calc(14px + var(--time-age, 0) * 22px);
  translate: -50% -50%;
  rotate: var(--time-r, 0deg);
  pointer-events: none;
  opacity: calc(var(--time-o, .1) + var(--world-decay) * .045 + var(--memory-sediment) * .08);
  border-radius: 55% 45% 52% 48%;
  background:
    radial-gradient(ellipse at 46% 54%, rgba(8,17,15,.42), transparent 60%),
    radial-gradient(ellipse at 68% 28%, rgba(126,168,198,.18), transparent 42%),
    radial-gradient(ellipse at 32% 74%, rgba(196,156,85,.14), transparent 48%);
  filter:
    blur(calc(1.2px + var(--time-age, 0) * 2.6px + var(--memory-sediment) * 1.8px))
    saturate(calc(.78 + var(--world-decay) * .42 - var(--memory-sediment) * .12));
  mix-blend-mode: multiply;
}

.time-fossil::after {
  content: "";
  position: absolute;
  inset: 38% -18%;
  opacity: calc(.18 + var(--time-age, 0) * .22);
  background:
    linear-gradient(90deg, transparent, rgba(126,168,198,.18), transparent);
  filter: blur(4px);
}

body.day-7 .time-fossil {
  background:
    radial-gradient(ellipse at 46% 54%, rgba(8,17,15,.5), transparent 58%),
    radial-gradient(ellipse at 62% 26%, rgba(107,50,40,.2), transparent 44%),
    radial-gradient(ellipse at 32% 74%, rgba(196,156,85,.16), transparent 50%);
}

body.day-100 .time-fossil {
  opacity: calc(var(--time-o, .1) + .08 + var(--memory-sediment) * .1);
  filter: blur(calc(2px + var(--time-age, 0) * 3px + var(--memory-sediment) * 2px)) grayscale(calc(.45 + var(--memory-sediment) * .18));
}

.worldline-scar {
  position: absolute;
  z-index: 40;
  height: 1px;
  translate: -50% -50%;
  rotate: var(--scar-r, 0deg);
  pointer-events: none;
  opacity: var(--scar-o, .08);
  background:
    linear-gradient(90deg, transparent, rgba(var(--worldline-rgb, 126,168,198), .86), transparent);
  filter: blur(.45px);
  mix-blend-mode: screen;
}

.worldline-scar::after {
  content: "";
  position: absolute;
  inset: -12px 8%;
  background:
    radial-gradient(ellipse, rgba(var(--worldline-rgb, 126,168,198), .22), transparent 68%);
  filter: blur(9px);
}

.worldline-scar-1 {
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent, rgba(107,50,40,.72), rgba(196,156,85,.38), transparent);
}

.worldline-scar-2 {
  background:
    linear-gradient(90deg, transparent, rgba(79,160,115,.72), rgba(126,168,198,.46), transparent);
}

.worldline-scar-3 {
  background:
    linear-gradient(90deg, transparent, rgba(196,156,85,.72), rgba(251,248,223,.34), transparent);
}

.unlock-mark {
  position: absolute;
  z-index: 47;
  width: 90px;
  height: 90px;
  translate: -50% -50%;
  pointer-events: none;
  border: 1px solid rgba(126,168,198,.24);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(126,168,198,.2) 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 0 48%, rgba(251,248,223,.14) 48% 52%, transparent 52%),
    radial-gradient(circle, rgba(126,168,198,.18), transparent 58%);
  mix-blend-mode: screen;
  animation: unlockMark 1.2s steps(4, end) forwards;
}

.memory-fragment {
  position: absolute;
  z-index: 41;
  max-width: 180px;
  translate: -50% -50%;
  rotate: var(--memory-r, 0deg);
  padding: 5px 8px;
  color: rgba(251,248,223, calc(.18 + var(--world-decay) * .18));
  border: 1px solid rgba(126,168,198, calc(.08 + var(--world-decay) * .12));
  background:
    linear-gradient(180deg, rgba(126,168,198,.055), rgba(8,17,15,.06)),
    rgba(8,17,15, calc(.08 + var(--world-decay) * .16));
  font-family: var(--font-en);
  font-size: clamp(.52rem, 1vw, .72rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.35;
  opacity: calc(.24 + var(--world-decay) * .34 + var(--memory-load) * .18 - var(--memory-age, 0) * .1);
  filter:
    blur(calc(var(--memory-age, 0) * .42px + var(--world-decay) * .14px))
    saturate(calc(.86 - var(--world-decay) * .18));
  mix-blend-mode: screen;
  pointer-events: none;
}

body.memory-overflow .memory-fragment {
  letter-spacing: .24em;
  filter:
    blur(calc(var(--memory-age, 0) * .52px + var(--world-decay) * .2px))
    contrast(1.18)
    saturate(.72);
}

.memory-echo {
  position: absolute;
  z-index: 48;
  max-width: 220px;
  translate: -50% -50%;
  rotate: var(--memory-r, 0deg);
  padding: 7px 10px;
  color: rgba(251,248,223,.68);
  border: 1px solid rgba(126,168,198,.2);
  background: rgba(8,17,15,.28);
  font-family: var(--font-en);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: memoryEcho 3.2s ease-out forwards;
}

.memory-residue {
  position: absolute;
  z-index: 38;
  max-width: 240px;
  translate: -50% -50%;
  rotate: var(--residue-r, 0deg);
  pointer-events: none;
  color: rgba(251,248,223, calc(var(--residue-o, .12) + var(--world-decay) * .08));
  font-family: var(--font-jp);
  font-size: clamp(.72rem, 1.4vw, 1.05rem);
  letter-spacing: .22em;
  line-height: 1.5;
  opacity: calc(var(--residue-o, .12) + var(--memory-load) * .14);
  text-shadow:
    0 0 12px rgba(126,168,198, calc(.08 + var(--memory-load) * .08)),
    1px 0 rgba(107,50,40, calc(var(--world-decay) * .16));
  filter:
    blur(calc(.45px + var(--memory-load) * .8px + var(--world-decay) * .6px))
    saturate(calc(.76 - var(--world-decay) * .16));
  mix-blend-mode: screen;
  animation: memoryResidueDrift 9s ease-in-out infinite alternate;
  animation-delay: var(--residue-delay, 0s);
}

.memory-residue::after {
  content: "";
  position: absolute;
  inset: -18px -24px;
  z-index: -1;
  pointer-events: none;
  opacity: calc(.08 + var(--memory-load) * .18);
  background:
    radial-gradient(ellipse, rgba(126,168,198,.18), transparent 58%),
    linear-gradient(90deg, transparent, rgba(251,248,223,.06), transparent);
  filter: blur(14px);
}

.memory-pool {
  position: absolute;
  z-index: 37;
  width: var(--pool-w, 180px);
  height: var(--pool-h, 80px);
  translate: -50% -50%;
  rotate: var(--pool-r, 0deg);
  pointer-events: none;
  border-radius: 55% 45% 52% 48%;
  opacity: calc(var(--pool-o, .08) + var(--world-decay) * .045 + var(--memory-pressure) * .08 + var(--memory-sediment) * .06);
  background:
    radial-gradient(ellipse at 44% 48%, rgba(8,17,15,.38), transparent 58%),
    radial-gradient(ellipse at 68% 28%, rgba(126,168,198,.18), transparent 44%),
    radial-gradient(ellipse at 28% 72%, rgba(107,50,40,.16), transparent 48%),
    repeating-linear-gradient(92deg, transparent 0 18px, rgba(251,248,223,.045) 18px 19px);
  filter:
    blur(calc(5px + var(--pool-age, 0) * 6px + var(--world-decay) * 3px + var(--memory-pressure) * 2px + var(--memory-sediment) * 3px))
    saturate(calc(.78 - var(--world-decay) * .14 + var(--memory-pressure) * .08 - var(--memory-sediment) * .1));
  mix-blend-mode: multiply;
  animation: memoryPoolSink 13s ease-in-out infinite alternate;
}

.memory-pool::after {
  content: "";
  position: absolute;
  inset: 34% -18%;
  opacity: calc(.16 + var(--memory-load) * .22 + var(--memory-pressure) * .16);
  background:
    linear-gradient(90deg, transparent, rgba(126,168,198,.2), rgba(251,248,223,.08), transparent);
  filter: blur(6px);
  mix-blend-mode: screen;
}

.memory-pool-sound {
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 48% 52%, rgba(126,168,198,.18), transparent 58%),
    radial-gradient(ellipse at 72% 24%, rgba(34,200,189,.16), transparent 42%),
    radial-gradient(ellipse at 24% 74%, rgba(8,17,15,.38), transparent 52%);
}

.memory-pool-hidden,
.memory-pool-rebuild {
  background:
    radial-gradient(ellipse at 44% 48%, rgba(8,17,15,.42), transparent 58%),
    radial-gradient(ellipse at 62% 30%, rgba(196,156,85,.18), transparent 46%),
    radial-gradient(ellipse at 30% 72%, rgba(107,50,40,.2), transparent 48%);
}

body.memory-overflow .memory-pool {
  opacity: calc(var(--pool-o, .08) + .08 + var(--memory-sediment) * .08);
  filter:
    blur(calc(7px + var(--pool-age, 0) * 7px + var(--world-decay) * 4px + var(--memory-sediment) * 4px))
    contrast(1.12)
    saturate(.68);
}

.rebuild-shard {
  position: absolute;
  z-index: 49;
  translate: -50% -50%;
  rotate: var(--shard-r, 0deg);
  padding: 10px 12px;
  color: rgba(8,17,15,.8);
  border: 1px solid rgba(251,248,223,.5);
  background:
    linear-gradient(180deg, rgba(251,248,223,.88), rgba(196,156,85,.42)),
    rgba(126,168,198,.2);
  font-family: var(--font-jp);
  font-size: clamp(.82rem, 2vw, 1.12rem);
  letter-spacing: .12em;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(126,168,198,.12),
    0 20px 64px rgba(126,168,198,.18);
  animation: rebuildShard 4.6s cubic-bezier(.16,.84,.2,1) forwards;
}

.memory-fragment::after {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
  opacity: calc(.12 + var(--world-decay) * .22);
  background:
    radial-gradient(ellipse, rgba(126,168,198,.38), transparent 56%),
    radial-gradient(ellipse at 70% 74%, rgba(107,50,40,.18), transparent 46%);
  filter: blur(12px);
  z-index: -1;
}

.memory-sound {
  color: rgba(126,168,198, calc(.34 + var(--world-decay) * .18));
}

.memory-memo {
  color: rgba(251,248,223, calc(.24 + var(--world-decay) * .16));
  font-family: var(--font-jp);
  letter-spacing: .08em;
}

.memory-draw {
  border-style: dashed;
}

.memory-hidden {
  color: rgba(34,200,189, calc(.26 + var(--world-decay) * .2));
  clip-path: inset(0);
  animation: memoryGlitch 5.8s steps(2, end) infinite;
}

body.memory-room-open::before {
  filter: saturate(1.18) contrast(1.08);
}

body.memory-room-open .weather-layer {
  filter: hue-rotate(8deg) contrast(1.16);
}

body.memory-room-open .toybox-toggle {
  border-color: rgba(126,168,198,.58);
  box-shadow:
    0 0 42px rgba(126,168,198,.28),
    inset 0 0 22px rgba(251,248,223,.06);
}

@keyframes traceFade {
  from { opacity: .9; scale: .28; filter: blur(0); }
  to { opacity: 0; scale: 1.35; filter: blur(8px); }
}

@keyframes rustSettle {
  from { opacity: 0; scale: .2; }
  16% { opacity: .72; }
  to { opacity: .26; scale: 1; }
}

@keyframes placeEcho {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.94);
  }
  16% {
    opacity: calc(.4 + var(--waterline) * .16);
  }
  68% {
    opacity: calc(.18 + var(--after-rain) * .16);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--fog-shift) * .18), calc(-18px - var(--waterline) * 18px), 0) scale(.98);
  }
}

@keyframes unlockMark {
  0% { opacity: 0; scale: .4; clip-path: inset(0); }
  20% { opacity: .9; scale: 1; clip-path: inset(0 30% 0 0); }
  40% { clip-path: inset(42% 0 12% 0); translate: calc(-50% + 3px) calc(-50% - 2px); }
  70% { opacity: .45; clip-path: inset(0); }
  100% { opacity: 0; scale: 1.4; }
}

@keyframes memoryGlitch {
  0%, 91%, 100% { clip-path: inset(0); transform: translate3d(0,0,0); }
  93% { clip-path: inset(0 22% 48% 0); transform: translate3d(2px,-1px,0); }
  96% { clip-path: inset(44% 0 0 18%); transform: translate3d(-2px,1px,0); }
}

@keyframes memoryEcho {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.92);
    filter: blur(1px);
  }
  18% {
    opacity: .92;
  }
  68% {
    opacity: .46;
    transform: translateY(-14px) scale(1.08);
    filter: blur(.2px);
  }
  100% {
    opacity: 0;
    transform: translateY(-34px) scale(1.18);
    filter: blur(4px);
  }
}

@keyframes memoryResidueDrift {
  from {
    transform: translate3d(-4px, 3px, 0) skew(-1deg);
    clip-path: inset(0 0 0 0);
  }
  48% {
    clip-path: inset(0 4% 0 0);
  }
  to {
    transform: translate3d(5px, -5px, 0) skew(1.4deg);
    clip-path: inset(0 0 0 3%);
  }
}

@keyframes memoryPoolSink {
  from {
    transform: translate3d(-3px, 2px, 0) scale(.98, 1.02);
  }
  52% {
    transform: translate3d(2px, -1px, 0) scale(1.04, .96);
  }
  to {
    transform: translate3d(4px, 3px, 0) scale(1.02, 1.04);
  }
}

@keyframes objectWetPulse {
  0% {
    filter: brightness(1.08) saturate(1.08);
    transform: rotate(var(--r, 0deg)) translateY(-2px);
  }
  48% {
    filter: brightness(.78) saturate(.74) contrast(1.18);
  }
  100% {
    filter: none;
    transform: rotate(var(--r, 0deg));
  }
}

@keyframes rebuildShard {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(.72);
    filter: blur(4px) saturate(.4);
  }
  18% {
    opacity: .92;
    transform: translateY(0) scale(1);
    filter: blur(.2px) saturate(1);
  }
  68% {
    opacity: .62;
    transform: translateY(-12px) scale(1.04);
  }
  100% {
    opacity: 0;
    transform: translateY(-46px) scale(.86);
    filter: blur(5px) saturate(.3);
  }
}

.cover-drop {
  position: fixed;
  left: var(--drop-x, 50vw);
  top: calc(-1 * var(--drop-size, 96px) - 22px);
  z-index: var(--drop-z, 44);
  width: var(--drop-size, 96px);
  aspect-ratio: 1;
  object-fit: cover;
  border: clamp(3px, .55vw, 7px) solid rgba(251,248,223,.86);
  background: rgba(251,248,223,.12);
  box-shadow:
    0 18px 48px rgba(8,17,15,.38),
    0 0 0 1px rgba(8,17,15,.18);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 46%;
  animation: jacketFall var(--drop-duration, 6.8s) linear var(--drop-delay, 0s) forwards;
  will-change: transform, opacity;
}

.cover-drop.is-picked {
  animation: jacketPicked .24s ease-out forwards;
}

body.jacket-rain-on .toy-jackets {
  color: #fff;
  background: rgba(126,168,198,.14);
}

@keyframes jacketFall {
  0% {
    opacity: 0;
    transform:
      translate3d(0, -12vh, 0)
      rotate(calc(var(--drop-r, 0deg) - 26deg))
      scale(.92);
  }
  10% {
    opacity: .92;
  }
  58% {
    opacity: .86;
    transform:
      translate3d(calc(var(--drop-drift, 0px) * .55), 58vh, 0)
      rotate(calc(var(--drop-r, 0deg) + 90deg))
      scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--drop-drift, 0px), 112vh, 0)
      rotate(calc(var(--drop-r, 0deg) + 190deg))
      scale(.96);
  }
}

@keyframes jacketPicked {
  to {
    opacity: 0;
    transform:
      translate3d(0, -18px, 0)
      rotate(calc(var(--drop-r, 0deg) + 18deg))
      scale(.72);
    filter: blur(2px) saturate(.62);
  }
}

.memo-note,
.memo-cursor {
  position: absolute;
  z-index: 46;
  width: min(var(--memo-w, 196px), calc(100vw - 36px));
  min-height: 78px;
  max-height: 268px;
  padding: 19px 18px 18px;
  color: rgba(29,24,18,var(--ink-fade, .78));
  background:
    radial-gradient(ellipse at 15% 8%, rgba(255,255,255,.42), transparent 36%),
    radial-gradient(ellipse at 88% 86%, rgba(98,74,42,.18), transparent 45%),
    radial-gradient(ellipse at 8% 84%, rgba(8,17,15,.075), transparent 38%),
    radial-gradient(ellipse at 70% 22%, rgba(196,156,85,.105), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 22%, rgba(98,74,42,.06) 100%),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(74,64,42,.092) 17px 18px),
    repeating-linear-gradient(92deg, rgba(72,58,36,.031) 0 1px, transparent 1px 8px),
    var(--memo-color, #eee5c6);
  border: 1px solid rgba(72,58,36,.14);
  border-radius: 1px 5px 3px 6px;
  box-shadow:
    0 1px 0 rgba(251,248,223,.12) inset,
    0 18px 42px rgba(0,0,0,.26),
    0 2px 9px rgba(8,17,15,.18),
    inset 0 -20px 34px rgba(98,74,42,.105),
    inset 0 0 38px rgba(255,255,255,.12);
  clip-path: polygon(
    1.5% 1.2%,
    98.2% 0,
    99.4% 16%,
    98.6% 99%,
    3% 98.6%,
    .2% 84%,
    0 18%
  );
  font-family: var(--font-hand);
  font-size: var(--memo-fs, .88rem);
  font-weight: 400;
  letter-spacing: .018em;
  line-height: 1.9;
  transform:
    rotate(var(--memo-rotate, -3deg))
    skewY(var(--hand-slant, 0deg));
  pointer-events: auto;
  overflow: visible;
  animation: memoDrop .28s cubic-bezier(.2,.9,.25,1.2);
}

.memo-note {
  --wet: 0;
  --bleed: 0;
  filter:
    saturate(calc(1 - var(--wet) * .28))
    contrast(calc(1 + var(--wet) * .16))
    brightness(calc(1 - var(--wet) * .08))
    blur(calc(var(--bleed) * .18px));
  text-shadow:
    .18px .22px 0 rgba(251,248,223,.24),
    .3px .1px .35px rgba(29,24,18,.18),
    calc(var(--bleed) * .9px) calc(var(--bleed) * .5px) calc(var(--bleed) * 1.7px) rgba(8,17,15,.26),
    calc(var(--bleed) * -.6px) calc(var(--bleed) * 1.1px) calc(var(--bleed) * 1.2px) rgba(107,50,40,.22);
}

.memo-text {
  position: relative;
  z-index: 2;
  display: block;
  max-height: 13.4em;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  hyphens: auto;
}

.memo-char {
  --gx: 0px;
  --gy: 0px;
  --gr: 0deg;
  --g-skew: 0deg;
  --g-opacity: 1;
  display: inline-block;
  min-width: .18em;
  touch-action: none;
  transform:
    translate3d(var(--gx, 0px), var(--gy, 0px), 0)
    translateY(var(--memo-latin-y, 0))
    rotate(var(--gr, 0deg))
    skewX(var(--g-skew, 0deg));
  transform-origin: 50% 62%;
  opacity: var(--g-opacity, 1);
  transition:
    transform .22s cubic-bezier(.2,.8,.22,1),
    opacity .24s ease,
    filter .24s ease;
  will-change: transform, opacity;
}

.memo-char.is-latin {
  font-family: var(--font-memo-en);
  font-style: normal;
  font-size: 1.08em;
  letter-spacing: .012em;
  --memo-latin-y: .02em;
}

.memo-cursor .memo-text {
  font-family: var(--font-memo-en), var(--font-hand);
  font-style: normal;
}

.memo-note::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: calc(.34 + var(--wet) * .32 + var(--bleed) * .18);
  background:
    linear-gradient(calc(178deg + var(--paper-warp, 0) * 8deg), rgba(255,255,255,.22), transparent 18%, rgba(8,17,15,.06) 86%, transparent),
    linear-gradient(180deg, rgba(196,156,85,.09), transparent 38%),
    linear-gradient(180deg, transparent 0 48%, rgba(8,17,15, calc(var(--bleed) * .16)) 100%),
    radial-gradient(ellipse at 22% 70%, rgba(8,17,15,.1), transparent 46%),
    radial-gradient(ellipse at 78% 24%, rgba(98,74,42, calc(.07 + var(--bleed) * .1)), transparent 38%),
    radial-gradient(ellipse at 50% 0%, rgba(82,62,38,.08), transparent 52%),
    repeating-linear-gradient(100deg, transparent 0 24px, rgba(8,17,15,.043) 24px 25px);
  mix-blend-mode: multiply;
}

.memo-note::before {
  filter:
    saturate(calc(1 - var(--bleed) * .3))
    brightness(calc(1 - var(--wet) * .1));
  opacity: calc(.78 - var(--bleed) * .18);
}

.memo-note::before,
.memo-cursor::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 3;
  width: 68px;
  height: 18px;
  background:
    linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.24) 6px 7px, transparent 7px 14px),
    rgba(138,118,82,.42);
  border: 1px solid rgba(72,58,36,.08);
  box-shadow: 0 2px 8px rgba(8,17,15,.09);
  transform: translateX(-50%) rotate(calc(-2deg + var(--paper-warp, 0) * 2deg));
}

.memo-cursor {
  position: fixed;
  z-index: 90;
  opacity: .72;
  pointer-events: none;
  filter: saturate(.84) brightness(.96);
  transform:
    translate(-18px, -18px)
    rotate(var(--memo-rotate, -3deg))
    skewY(var(--hand-slant, 0deg))
    scale(.88);
}

body.placing-memo {
  cursor: copy;
}

@keyframes memoDrop {
  from {
    opacity: 0;
    transform:
      translateY(-14px)
      rotate(var(--memo-rotate, -3deg))
      skewY(var(--hand-slant, 0deg))
      scale(.94);
  }
  to {
    opacity: 1;
    transform:
      translateY(0)
      rotate(var(--memo-rotate, -3deg))
      skewY(var(--hand-slant, 0deg))
      scale(1);
  }
}

.predator {
  position: absolute;
  z-index: 43;
  width: var(--predator-w, 34px);
  height: var(--predator-h, 24px);
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  border-radius: 47% 53% 51% 49% / 44% 37% 63% 56%;
  opacity: calc(.18 + var(--world-decay) * .16 + var(--rain-strength) * .08);
  background:
    radial-gradient(ellipse at 36% 42%, rgba(251,248,223,.2), transparent 26%),
    radial-gradient(ellipse at 66% 64%, rgba(126,168,198,.22), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(251,248,223,.13) 2px 3px);
  filter:
    blur(calc(.45px + var(--world-decay) * .42px))
    contrast(calc(1.4 + var(--world-decay) * .6))
    saturate(calc(1.05 - var(--world-decay) * .18));
  mix-blend-mode: color-dodge;
  backdrop-filter: blur(5px) contrast(1.9) saturate(1.4) hue-rotate(16deg);
  transform: rotate(var(--predator-r, 0deg));
  animation:
    predator 5.1s steps(2, end) infinite,
    drift 14s ease-in-out infinite alternate,
    predatorBreath 3.6s ease-in-out infinite alternate;
  animation-delay: var(--predator-delay, 0s), var(--predator-delay, 0s), 0s;
}

.predator:hover {
  opacity: .62;
  box-shadow:
    0 0 5px rgba(126,168,198,.18),
    inset 0 0 8px rgba(251,248,223,.08);
}

.predator.is-relocating {
  opacity: 0 !important;
  pointer-events: none;
}

.predator::before,
.predator::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(251,248,223,.11) 4px 5px),
    linear-gradient(115deg, rgba(126,168,198,.16), transparent 56%, rgba(107,50,40,.12));
  opacity: .45;
  mix-blend-mode: screen;
}

.predator::after {
  inset: 2px -4px -2px 4px;
  opacity: .28;
  filter: blur(1.4px);
}

@keyframes predator {
  0%, 91%, 100% {
    clip-path: ellipse(52% 46% at 50% 50%);
    transform: rotate(var(--predator-r, 0deg)) translate3d(0,0,0) skew(0deg);
  }
  92% {
    clip-path: polygon(0 14%, 100% 0, 86% 28%, 100% 42%, 6% 54%, 100% 68%, 82% 100%, 0 86%);
    transform: rotate(var(--predator-r, 0deg)) translate3d(2px,-1px,0) skew(10deg);
  }
  94% {
    clip-path: polygon(8% 0, 100% 16%, 76% 38%, 100% 54%, 4% 48%, 0 100%, 88% 84%, 0 72%);
    transform: rotate(var(--predator-r, 0deg)) translate3d(-2px,1px,0) skew(-12deg);
  }
  96% {
    clip-path: ellipse(62% 32% at 52% 56%);
    transform: rotate(var(--predator-r, 0deg)) translate3d(1px,2px,0) skew(6deg);
  }
}

@keyframes drift {
  from { translate: -5px -8px; }
  to { translate: 7px 6px; }
}

@keyframes predatorBreath {
  from { scale: .92; }
  to { scale: 1.08; }
}

.drawbook {
  position: fixed;
  z-index: 80;
  left: 50%;
  top: 50%;
  width: min(760px, calc(100vw - 28px));
  transform: translate(-50%, -50%) rotate(-1deg);
  padding: 24px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 48% 74%, rgba(8,17,15, calc(var(--draw-load) * .16)), transparent 38%),
    radial-gradient(ellipse at 16% 22%, rgba(126,168,198,.1), transparent 32%),
    radial-gradient(ellipse at 84% 78%, rgba(107,50,40,.08), transparent 36%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(8,17,15,.1) 18px 19px),
    #ebe2be;
  border: 1px solid rgba(8,17,15,.2);
  box-shadow: 0 34px 100px rgba(0,0,0,.42);
  filter:
    saturate(calc(1 - var(--world-decay) * .18 - var(--draw-load) * .08))
    brightness(calc(1 - var(--world-decay) * .08 - var(--draw-load) * .04));
}

.drawbook::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--world-decay) * .34 + var(--draw-load) * .28);
  background:
    radial-gradient(ellipse at 48% 76%, rgba(8,17,15, calc(var(--draw-load) * .28)), transparent 36%),
    linear-gradient(180deg, rgba(126,168,198,.12), transparent 36%),
    radial-gradient(ellipse at 18% 78%, rgba(107,50,40,.12), transparent 38%),
    repeating-linear-gradient(96deg, transparent 0 26px, rgba(8,17,15,.05) 26px 27px);
  mix-blend-mode: multiply;
}

.drawbook-close {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.drawbook h2 {
  font-size: 2.4rem;
  margin-bottom: 18px;
}

.drawbook-canvas {
  width: 100%;
  height: min(52vh, 520px);
  display: block;
  background:
    radial-gradient(ellipse at 46% 88%, rgba(8,17,15, calc(var(--draw-load) * .12)), transparent 36%),
    radial-gradient(ellipse at 18% 18%, rgba(126,168,198,.08), transparent 30%),
    radial-gradient(ellipse at 76% 82%, rgba(107,50,40,.07), transparent 34%),
    rgba(235,226,190,.96);
  border: 1px solid rgba(8,17,15,.16);
  cursor: crosshair;
  touch-action: none;
  filter:
    contrast(calc(1 + var(--world-decay) * .08))
    brightness(calc(1 - var(--world-decay) * .05 - var(--draw-load) * .04));
}

body.drawbook-marked .toy-book {
  box-shadow:
    inset 0 0 calc(10px + var(--draw-load) * 20px) rgba(8,17,15,.16),
    0 0 calc(var(--draw-load) * 24px) rgba(126,168,198,.12);
}

.drawbook-tools {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.drawbook-clear {
  border: 1px solid var(--line);
  background: transparent;
  padding: 9px 13px;
  cursor: pointer;
}

.player {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 70;
  display: flex;
  width: min(78vw, 560px);
  gap: 16px;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  padding: 0;
  color: var(--cream);
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.34));
}

.player.active {
  display: flex;
}

.player.disc-drop-target {
  display: flex;
  filter:
    drop-shadow(0 0 14px rgba(126,168,198,.32))
    drop-shadow(0 14px 22px rgba(0,0,0,.34));
}

.player.disc-drop-target .player-toggle {
  border-color: rgba(251,248,223,.48);
  box-shadow: 0 0 22px rgba(126,168,198,.26);
}

.player.disc-over .player-toggle {
  transform: scale(1.08);
  background: transparent;
  box-shadow: 0 0 34px rgba(126,168,198,.42);
}

body.audio-playing .player {
  filter:
    drop-shadow(0 0 calc(8px + var(--sound-load) * 16px) rgba(126,168,198,.2))
    drop-shadow(0 14px 22px rgba(0,0,0,.34));
}

body.sound-marked .player small::after {
  content: " / remembered";
  color: rgba(126,168,198,.72);
}

.player-toggle {
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.player-toggle {
  position: relative;
  width: 64px;
  height: 64px;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.player-toggle::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(205,229,239,.9) 0 5%, rgba(35,48,45,.96) 6% 14%, transparent 15%),
    repeating-radial-gradient(circle at center, rgba(251,248,223,.12) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 33% 24%, rgba(251,248,223,.18), transparent 25%),
    radial-gradient(circle, #151a18 0%, #050706 68%, #000 100%);
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.68),
    0 4px 14px rgba(0,0,0,.46);
  opacity: 0;
  scale: .72;
  transform-origin: center;
  transition: opacity .24s ease, scale .24s ease, filter .24s ease;
}

.player-toggle.has-record::before {
  opacity: 1;
  scale: 1;
}

.player-toggle.has-cover::before {
  background:
    radial-gradient(circle at center, rgba(3,5,5,.96) 0 4%, rgba(211,226,218,.84) 4.7% 6.8%, transparent 7.4%),
    repeating-radial-gradient(circle at center, rgba(251,248,223,.15) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 30% 22%, rgba(255,255,245,.26), transparent 23%),
    linear-gradient(135deg, rgba(0,0,0,.12), rgba(0,0,0,.5)),
    var(--record-cover) center / cover no-repeat,
    radial-gradient(circle, #111512 0%, #020403 100%);
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.48),
    0 5px 14px rgba(0,0,0,.44);
}

.player-toggle::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 15px;
  width: 23px;
  height: 3px;
  border-radius: 999px;
  background: rgba(251,248,223,.62);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18),
    -2px 7px 0 -1px rgba(126,168,198,.42);
  transform: rotate(-30deg);
  transform-origin: right center;
}

.player-toggle span {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: block;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(4,6,5,.94) 0 22%, rgba(218,229,220,.84) 23% 33%, rgba(30,39,36,.92) 34% 100%);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.42),
    0 0 10px rgba(126,168,198,.13);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.player-toggle.has-record span {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.player-toggle.playing::before {
  animation: recordSpin 1.8s linear infinite;
}

.player-toggle.is-dragging::before {
  opacity: .34;
  animation-play-state: paused;
}

.grab-mode .player-toggle.playing {
  cursor: grab;
}

@keyframes recordSpin {
  to { rotate: 360deg; }
}

.player small {
  display: block;
  margin-bottom: 3px;
  color: rgba(155,195,157,.68);
  font-family: var(--font-bit);
  font-size: .58rem;
  font-weight: 300;
  letter-spacing: .3em;
  line-height: 1.1;
  opacity: .9;
  text-transform: uppercase;
  text-align: center;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  text-shadow:
    1px 0 rgba(126,168,198,.18),
    -1px 0 rgba(120,84,64,.12),
    0 0 6px rgba(126,168,198,.1);
}

.player strong {
  display: block;
  max-width: min(54vw, 360px);
  min-height: 1.2em;
  color: rgba(236,244,218,.94);
  font-family: var(--font-bit);
  font-size: clamp(.96rem, 1.95vw, 1.18rem);
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1.22;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  text-shadow:
    1px 0 rgba(126,168,198,.22),
    -1px 0 rgba(120,84,64,.16),
    0 0 7px rgba(126,168,198,.12);
  filter: contrast(1.18);
  transition: opacity .28s ease, letter-spacing .28s ease, filter .28s ease;
}

.player.empty-turntable strong {
  opacity: 0;
  letter-spacing: .42em;
  filter: blur(4px);
}

.player.empty-turntable .player-toggle {
  border-color: transparent;
  box-shadow: none;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 30px;
  color: var(--cream);
  background: #08110f;
}

.site-version {
  display: inline-block;
  margin-left: .9em;
  color: rgba(155,195,157,.72);
  font-family: inherit;
  font-size: .72em;
  font-weight: 300;
  letter-spacing: inherit;
  line-height: 1.1;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
}

.chaos-piece {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px))
    calc(var(--cy, 0px) + var(--grab-y, 0px));
  rotate: var(--cr, 0deg);
  transition: translate .24s cubic-bezier(.2,.8,.22,1), rotate .24s cubic-bezier(.2,.8,.22,1), filter .24s ease;
  will-change: translate, rotate, filter;
}

.chaos-on .chaos-piece {
  filter: saturate(1.08) contrast(1.04);
}

.grab-target {
  --grab-x: 0px;
  --grab-y: 0px;
  touch-action: none;
}

.grab-target:not(.rain-toggle):not(.trash-bin):not(.site-header):not(.site-clock):not(.player):not(.predator) {
  position: relative;
}

.grab-target:not(.chaos-piece):not(.chaos-glyph) {
  translate: var(--grab-x, 0px) var(--grab-y, 0px);
  transition: translate .14s ease, filter .16s ease;
  will-change: translate, filter;
}

.grab-overflow-open,
.grab-overflow-open * {
  overflow: visible !important;
}

body.grab-mode .room-photo,
.grab-overflow-open .room-photo,
.room-photo.grab-overflow-open,
.room-photo.has-grab-offset,
.room-photo.has-grab-offset-child {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.grab-mode .room-photo img,
.grab-overflow-open .room-photo img,
.room-photo.grab-overflow-open img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

body.grab-mode .release-track-list,
.release-card.grab-overflow-open .release-track-list,
.grab-overflow-open .release-track-list,
.release-card:has(.has-grab-offset) .release-track-list {
  max-height: clamp(170px, 22vw, 286px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

body.grab-mode .release-lyrics-card,
.release-card.grab-overflow-open .release-lyrics-card,
.grab-overflow-open .release-lyrics-card,
.release-card:has(.has-grab-offset) .release-lyrics-card {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.release-card.chaos-piece {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px))
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 18px + var(--object-touches, 0) * 12px);
}

body[data-place="archive"] .release-card.chaos-piece {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px))
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--current-place-visits) * 10px);
}

body.ruin-bloom .release-card.chaos-piece {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px))
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 16px + var(--stage-sink) * 12px);
}

body.ruin-bloom .release-card.chaos-piece:nth-child(4n + 1) {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px) + var(--stage-tilt) * -5px)
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 16px + var(--stage-sink) * 16px);
}

body.ruin-bloom .release-card.chaos-piece:nth-child(4n + 2) {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px) + var(--stage-tilt) * 6px)
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 14px + var(--stage-sink) * 10px);
}

body.ruin-bloom .release-card.chaos-piece:nth-child(4n + 3) {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px) + var(--stage-tilt) * -3px)
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 20px + var(--stage-sink) * 18px);
}

/* Final archive/shader override. Keep as the last block. */
.release-card,
body.audio-playing .release-card,
body.memory-saturated .release-card,
body.ruin-bloom .release-card,
body.lamp-on .release-card,
body.lamp-mode-blackout .release-card,
body.day-stage-10 .release-card,
body.ruin-bloom.day-stage-10 .release-card {
  padding: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1.36;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  filter:
    drop-shadow(var(--world-shadow-x, 0px) var(--world-shadow-y, 18px) var(--world-shadow-blur, 34px) rgba(0,0,0,var(--world-shadow-alpha, .3))) !important;
}

.release-card::before,
.release-card::after,
.release-front::after,
body.grab-mode .release-front::after,
.release-card:has(.has-grab-offset) .release-front::after,
body.ruin-bloom .release-card::before,
body.ruin-bloom .release-card::after,
body.day-stage-10 .release-card::after,
body.ruin-bloom.day-stage-10 .release-card::after {
  content: none !important;
  display: none !important;
}

.release-card:hover {
  background: transparent !important;
}

.release-card-inner,
body.grab-mode .release-card-inner,
.release-card:has(.has-grab-offset) .release-card-inner,
.release-face,
body.grab-mode .release-face,
.release-card:has(.has-grab-offset) .release-face {
  min-height: 0 !important;
  height: 100%;
  overflow: visible !important;
}

/* Final archive/shader override. Keep this physically last. */
/* The following selector is repeated with the parent class so it wins over older
   `.release-card .release-front { overflow: hidden !important; }` rules. */
.release-card .release-front,
.release-front,
body.grab-mode .release-front,
.release-card:has(.has-grab-offset) .release-front {
  display: grid !important;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: clamp(6px, 1.2vw, 13px);
  background: transparent !important;
  overflow: visible !important;
}

.release-card img,
body.ruin-bloom .release-card img,
body.day-100 .release-card img,
body.ruin-bloom.day-100 .release-card img {
  box-shadow:
    var(--world-shadow-x, 0px) var(--world-shadow-y, 18px) calc(var(--world-shadow-blur, 34px) * .72) rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .72));
}

.release-card .release-year,
.release-card .release-year.grab-target,
body.grab-mode .release-year,
.release-card:has(.has-grab-offset) .release-year,
body.ruin-bloom .release-year {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block;
  width: fit-content !important;
  max-width: 100% !important;
  margin: clamp(8px, 1.5vw, 14px) 0 0 !important;
  overflow: visible !important;
  color: rgba(231,230,216,.68) !important;
  font-size: clamp(.72rem, 1.06vw, .96rem);
  line-height: 1;
  pointer-events: auto;
  text-shadow:
    calc(var(--world-shadow-x, 0px) * .34)
    calc(var(--world-shadow-y, 18px) * .22)
    calc(var(--world-shadow-blur, 34px) * .36)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24));
}

.release-card .release-title,
.release-card .release-title.grab-target,
body.grab-mode .release-title,
.release-card:has(.has-grab-offset) .release-title,
body.ruin-bloom .release-title {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block;
  width: fit-content !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: rgba(231,230,216,.88) !important;
  font-size: clamp(1.02rem, 2.04vw, 1.58rem);
  line-height: 1.12;
  pointer-events: auto;
  text-shadow:
    calc(var(--world-shadow-x, 0px) * .34)
    calc(var(--world-shadow-y, 18px) * .22)
    calc(var(--world-shadow-blur, 34px) * .36)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24));
}

.release-back,
body.grab-mode .release-back,
.release-card:has(.has-grab-offset) .release-back,
body.ruin-bloom .release-back {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(7px, 1.1vw, 10px);
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.release-back-cover {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(7,14,12,.36), rgba(5,8,7,.68)),
    var(--release-cover) center / cover no-repeat,
    rgba(8,17,15,.42);
  box-shadow:
    inset 0 0 0 1px rgba(251,248,223,.07),
    inset 0 0 80px rgba(0,0,0,.42),
    var(--world-shadow-x, 0px) var(--world-shadow-y, 18px) calc(var(--world-shadow-blur, 34px) * .72) rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .72));
  filter:
    saturate(.72)
    contrast(1.08)
    brightness(calc(.7 + var(--world-light-power, .72) * .08));
}

.release-back-cover .release-disc {
  align-self: center;
  justify-self: center;
  z-index: 2;
  width: clamp(66px, 37%, 124px);
  height: clamp(66px, 37%, 124px);
  margin: 0;
}

.release-back-title {
  position: absolute !important;
  left: clamp(12px, 7%, 22px);
  right: clamp(12px, 7%, 22px);
  bottom: clamp(12px, 7%, 22px);
  z-index: 3;
  display: block;
  max-width: none;
  color: rgba(231,230,216,.92);
  font-family: var(--font-jp);
  font-size: clamp(1rem, 2vw, 1.42rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .02em;
  pointer-events: none;
  text-shadow:
    0 2px 20px rgba(0,0,0,.68),
    calc(var(--world-shadow-x, 0px) * .26)
    calc(var(--world-shadow-y, 18px) * .18)
    calc(var(--world-shadow-blur, 34px) * .28)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24));
}

.release-back-label {
  margin-top: clamp(8px, 1.4vw, 12px);
}

.release-track-list {
  max-height: clamp(92px, 12.5vw, 158px);
}

.release-card.is-showing-lyrics .release-back-cover,
.release-card.is-showing-lyrics .release-back-label,
.release-card.is-showing-lyrics .release-track-list,
.release-card.is-showing-lyrics .release-link {
  pointer-events: none;
  opacity: 0;
}

.release-card.is-showing-lyrics .release-lyrics-card {
  inset: 0 auto auto 0;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  padding: clamp(12px, 4.8%, 18px);
}

@media (max-width: 760px) {
  .release-card,
  body.audio-playing .release-card,
  body.memory-saturated .release-card,
  body.ruin-bloom .release-card,
  body.lamp-on .release-card,
  body.lamp-mode-blackout .release-card {
    aspect-ratio: 1 / 1.28;
  }

  .release-card .release-year,
  .release-card .release-year.grab-target {
    font-size: .66rem;
    margin-top: 7px !important;
  }

  .release-card .release-title,
  .release-card .release-title.grab-target {
    font-size: clamp(.92rem, 5vw, 1.2rem);
  }

  .release-back-cover .release-disc {
    width: clamp(50px, 34%, 82px);
    height: clamp(50px, 34%, 82px);
  }

  .release-back-title {
    font-size: clamp(.82rem, 4.7vw, 1.06rem);
  }

  .release-track-list {
    max-height: 92px;
  }
}

/* Archive frameless pass + time-linked world shadows.
   Keep this block at the end: earlier archive/ruin/grab rules are intentionally overridden here. */
:root {
  --world-shadow-x: 0px;
  --world-shadow-y: 18px;
  --world-shadow-blur: 34px;
  --world-shadow-alpha: .3;
  --world-text-shadow-alpha: .24;
  --world-light-power: .72;
  --world-light-x: 50vw;
  --world-light-y: 24vh;
}

body::after {
  background:
    radial-gradient(
      circle at var(--world-light-x) var(--world-light-y),
      rgba(242,244,221, calc(var(--world-light-power) * .09)),
      rgba(242,244,221, calc(var(--world-light-power) * .025)) 17vw,
      transparent 46vw
    ),
    radial-gradient(
      ellipse at calc(100vw - var(--world-light-x)) calc(100vh - var(--world-light-y)),
      rgba(0,0,0, calc(.08 + (1 - var(--world-light-power)) * .12)),
      transparent 46vw
    );
  mix-blend-mode: soft-light;
}

.hero-image,
.hero-collage .cover,
.room-photo,
.profile img,
.daily-log-card,
.player,
.rain-toggle,
.site-clock,
.trash-bin,
.drawbook,
.memo-note,
.toybox-toggle,
.toy-action,
.link-list .service-link {
  box-shadow:
    var(--world-shadow-x) var(--world-shadow-y) var(--world-shadow-blur) rgba(0,0,0,var(--world-shadow-alpha)),
    inset calc(var(--world-shadow-x) * -.08) calc(var(--world-shadow-y) * -.08) 28px rgba(245,245,224,calc(var(--world-light-power) * .018));
}

.hero-title,
.section-head,
.daily-log-head,
.profile,
.release-year,
.release-title,
.release-back-title,
.link-list .service-name,
footer {
  text-shadow:
    calc(var(--world-shadow-x) * .34)
    calc(var(--world-shadow-y) * .22)
    calc(var(--world-shadow-blur) * .36)
    rgba(0,0,0,var(--world-text-shadow-alpha));
}

.release-card,
body.audio-playing .release-card,
body.memory-saturated .release-card,
body.ruin-bloom .release-card,
body.lamp-on .release-card,
body.lamp-mode-blackout .release-card,
body.day-stage-10 .release-card,
body.ruin-bloom.day-stage-10 .release-card {
  padding: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1.36;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  filter:
    drop-shadow(var(--world-shadow-x) var(--world-shadow-y) var(--world-shadow-blur) rgba(0,0,0,var(--world-shadow-alpha)));
}

.release-card::before,
.release-card::after,
.release-front::after,
body.grab-mode .release-front::after,
.release-card:has(.has-grab-offset) .release-front::after,
body.ruin-bloom .release-card::before,
body.ruin-bloom .release-card::after,
body.day-stage-10 .release-card::after,
body.ruin-bloom.day-stage-10 .release-card::after {
  content: none !important;
  display: none !important;
}

.release-card:hover {
  background: transparent !important;
}

.release-card-inner,
body.grab-mode .release-card-inner,
.release-card:has(.has-grab-offset) .release-card-inner {
  min-height: 0 !important;
  height: 100%;
  overflow: visible !important;
}

.release-face,
body.grab-mode .release-face,
.release-card:has(.has-grab-offset) .release-face {
  inset: 0;
  height: 100%;
  overflow: visible !important;
}

.release-front,
body.grab-mode .release-front,
.release-card:has(.has-grab-offset) .release-front {
  display: grid !important;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: clamp(6px, 1.2vw, 13px);
  background: transparent !important;
  overflow: visible !important;
}

.release-card img,
body.ruin-bloom .release-card img,
body.day-100 .release-card img,
body.ruin-bloom.day-100 .release-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  opacity: calc(.9 - var(--stage-fade, 0) * .18);
  filter:
    saturate(calc(.7 - var(--ruin) * .18))
    contrast(calc(1.08 + var(--ruin) * .16))
    brightness(calc(.86 - var(--world-decay) * .14 + var(--world-light-power) * .06));
  box-shadow:
    var(--world-shadow-x) var(--world-shadow-y) calc(var(--world-shadow-blur) * .72) rgba(0,0,0,calc(var(--world-shadow-alpha) * .72));
}

.release-card .release-year,
.release-card .release-year.grab-target,
body.grab-mode .release-year,
.release-card:has(.has-grab-offset) .release-year {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
  display: block;
  width: fit-content !important;
  max-width: 100% !important;
  margin: clamp(8px, 1.5vw, 14px) 0 0 !important;
  overflow: visible !important;
  color: rgba(231,230,216,.68) !important;
  font-size: clamp(.72rem, 1.06vw, .96rem);
  line-height: 1;
  pointer-events: auto;
}

.release-card .release-title,
.release-card .release-title.grab-target,
body.grab-mode .release-title,
.release-card:has(.has-grab-offset) .release-title {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
  display: block;
  width: fit-content !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: rgba(231,230,216,.88) !important;
  font-size: clamp(1.02rem, 2.04vw, 1.58rem);
  line-height: 1.12;
  pointer-events: auto;
}

.release-back,
body.grab-mode .release-back,
.release-card:has(.has-grab-offset) .release-back,
body.ruin-bloom .release-back {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(7px, 1.1vw, 10px);
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.release-back-cover {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(7,14,12,.36), rgba(5,8,7,.68)),
    var(--release-cover) center / cover no-repeat,
    rgba(8,17,15,.42);
  box-shadow:
    inset 0 0 0 1px rgba(251,248,223,.07),
    inset 0 0 80px rgba(0,0,0,.42),
    var(--world-shadow-x) var(--world-shadow-y) calc(var(--world-shadow-blur) * .72) rgba(0,0,0,calc(var(--world-shadow-alpha) * .72));
  filter:
    saturate(.72)
    contrast(1.08)
    brightness(calc(.7 + var(--world-light-power) * .08));
}

.release-back-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(122deg, rgba(255,255,235,.18), transparent 22% 68%, rgba(0,0,0,.2)),
    radial-gradient(circle at var(--world-light-x) var(--world-light-y), rgba(255,255,235,.11), transparent 34%);
  mix-blend-mode: screen;
  opacity: .46;
}

.release-back-cover .release-disc {
  align-self: center;
  justify-self: center;
  z-index: 2;
  width: clamp(66px, 37%, 124px);
  height: clamp(66px, 37%, 124px);
  margin: 0;
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.46),
    var(--world-shadow-x) var(--world-shadow-y) calc(var(--world-shadow-blur) * .42) rgba(0,0,0,calc(var(--world-shadow-alpha) * .6));
}

.release-back-title {
  position: absolute;
  left: clamp(12px, 7%, 22px);
  right: clamp(12px, 7%, 22px);
  bottom: clamp(12px, 7%, 22px);
  z-index: 3;
  display: block;
  max-width: none;
  color: rgba(231,230,216,.92);
  font-family: var(--font-jp);
  font-size: clamp(1rem, 2vw, 1.42rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .02em;
  pointer-events: none;
  text-shadow:
    0 2px 20px rgba(0,0,0,.68),
    calc(var(--world-shadow-x) * .26) calc(var(--world-shadow-y) * .18) calc(var(--world-shadow-blur) * .28) rgba(0,0,0,var(--world-text-shadow-alpha));
}

.release-back-label {
  margin-top: clamp(8px, 1.4vw, 12px);
}

.release-track-list {
  max-height: clamp(92px, 12.5vw, 158px);
}

.release-card.is-showing-lyrics .release-back-cover,
.release-card.is-showing-lyrics .release-back-label,
.release-card.is-showing-lyrics .release-track-list,
.release-card.is-showing-lyrics .release-link {
  pointer-events: none;
  opacity: 0;
}

.release-card.is-showing-lyrics .release-lyrics-card {
  inset: 0 auto auto 0;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  padding: clamp(12px, 4.8%, 18px);
  background:
    linear-gradient(145deg, rgba(231,230,216,.78), rgba(186,199,182,.66)),
    var(--release-cover, none) center / cover no-repeat;
  background-blend-mode: screen, normal;
  color: rgba(12,19,16,.86);
  box-shadow:
    inset 0 0 0 1px rgba(251,248,223,.2),
    var(--world-shadow-x) var(--world-shadow-y) calc(var(--world-shadow-blur) * .72) rgba(0,0,0,calc(var(--world-shadow-alpha) * .72));
}

.release-card.is-showing-lyrics .release-lyrics-text {
  color: rgba(12,19,16,.82);
  text-shadow: none;
}

@media (max-width: 760px) {
  .release-card,
  body.audio-playing .release-card,
  body.memory-saturated .release-card,
  body.ruin-bloom .release-card,
  body.lamp-on .release-card,
  body.lamp-mode-blackout .release-card {
    aspect-ratio: 1 / 1.28;
  }

  .release-card .release-year,
  .release-card .release-year.grab-target {
    font-size: .66rem;
    margin-top: 7px !important;
  }

  .release-card .release-title,
  .release-card .release-title.grab-target {
    font-size: clamp(.92rem, 5vw, 1.2rem);
  }

  .release-back-cover .release-disc {
    width: clamp(50px, 34%, 82px);
    height: clamp(50px, 34%, 82px);
  }

  .release-back-title {
    font-size: clamp(.82rem, 4.7vw, 1.06rem);
  }

  .release-track-list {
    max-height: 92px;
  }
}

/* Mobile touch pass.
   Keep the desktop world intact, but make the beta usable on phones:
   smaller archive cards, safer fixed controls, and less sticky hover behavior. */
@media (hover: none) and (pointer: coarse) {
  .release-card:hover {
    transform: rotate(var(--r));
    background:
      linear-gradient(180deg, rgba(126,168,198,.055), rgba(107,50,40,.035)),
      rgba(251,248,223,.04);
  }

  .release-disc:hover,
  .loose-record:hover,
  .daily-log-stage:hover img {
    transform: none;
    scale: 1;
    filter: inherit;
  }
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 72px;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  .section {
    min-height: auto;
    padding: clamp(72px, 16vw, 108px) clamp(14px, 4.8vw, 30px);
  }

  .hero {
    min-height: 100svh;
    align-content: center;
    gap: clamp(18px, 5vw, 34px);
    overflow: hidden;
  }

  .hero-image {
    justify-self: start;
    width: min(76vw, 420px);
    max-width: none;
    margin-top: 5svh;
    transform: rotate(-1.5deg);
  }

  .hero-image::after {
    inset: 10px;
  }

  .hero-title {
    padding-bottom: 12svh;
  }

  .hero-title p {
    margin-bottom: 10px;
    font-size: .62rem;
    letter-spacing: .18em;
  }

  h1 {
    font-size: clamp(4.2rem, 25vw, 9rem);
  }

  .hero-collage .cover {
    width: clamp(76px, 22vw, 130px);
    border-width: 4px;
    opacity: .24;
  }

  .release-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 3.4vw, 20px);
  }

  .release-card {
    min-height: clamp(236px, 42vw, 330px);
    padding: clamp(8px, 2vw, 12px);
    transform: rotate(calc(var(--r) * .72));
    perspective: 900px;
    touch-action: manipulation;
  }

  .release-card-inner {
    min-height: inherit;
  }

  .release-face {
    gap: 9px;
  }

  .release-back {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    padding: 8px;
  }

  .release-card .release-year,
  .release-card .release-year.grab-target {
    left: 9px;
    right: 9px;
    bottom: 43px;
    max-width: calc(100% - 18px);
    font-size: .64rem;
    letter-spacing: .13em;
  }

  .release-card .release-title,
  .release-card .release-title.grab-target {
    left: 9px;
    right: 9px;
    bottom: 10px;
    max-width: calc(100% - 18px);
    max-height: 2.25em;
    font-size: clamp(.88rem, 4.2vw, 1.18rem);
    line-height: 1.08;
  }

  .release-front::after,
  body.grab-mode .release-front::after,
  .release-card:has(.has-grab-offset) .release-front::after {
    height: 44%;
  }

  .release-track-list {
    max-height: clamp(132px, 30vw, 190px);
    gap: 5px;
    -webkit-overflow-scrolling: touch;
  }

  .release-track-list li {
    grid-template-columns: 2.05em minmax(0, 1fr);
    gap: 6px;
    min-height: 25px;
    padding-bottom: 5px;
  }

  .release-track-number {
    font-size: .54rem;
  }

  .release-track-title {
    min-height: 24px;
    font-size: clamp(.64rem, 2.7vw, .82rem);
    line-height: 1.32;
  }

  .release-back-label,
  .release-link {
    font-size: .56rem;
  }

  .release-disc {
    width: 38px;
    height: 38px;
  }

  .release-lyrics-card {
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .release-lyrics-text {
    font-size: clamp(.66rem, 2.7vw, .8rem);
    line-height: 1.7;
  }

  .daily-log {
    margin-top: 0;
  }

  .daily-log-head {
    align-items: flex-start;
    font-size: .56rem;
    letter-spacing: .18em;
  }

  .daily-log-grid {
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .daily-log-card {
    flex-basis: min(78vw, 330px);
  }

  .daily-log-play {
    width: 48px;
    height: 48px;
  }

  .rain-toggle,
  .toybox-toggle,
  .trash-bin,
  .player-toggle {
    touch-action: manipulation;
  }

  .rain-toggle {
    min-width: 58px;
    min-height: 38px;
  }

  .site-clock {
    width: 58px;
    height: 58px;
    padding: 7px;
  }

  .timecode {
    font-size: .46rem;
  }

  .trash-bin {
    width: 54px;
    height: 38px;
  }

  .toybox {
    right: 14px;
    bottom: 14px;
  }

  .toybox-toggle {
    width: 50px;
    height: 38px;
    min-width: 50px;
    min-height: 38px;
  }

  .toybox-panel {
    right: 0;
    bottom: 0;
  }

  .player {
    bottom: 66px;
    width: calc(100vw - 30px);
    max-width: 420px;
    gap: 9px;
  }

  .player-toggle {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }

  .player-toggle::after {
    right: 7px;
    top: 13px;
    width: 20px;
  }

  .player strong {
    max-width: calc(100vw - 130px);
    font-size: .82rem;
    letter-spacing: .08em;
  }

  .player small {
    font-size: .48rem;
    letter-spacing: .22em;
  }
}

@media (max-width: 540px) {
  .section {
    padding: 68px 12px 92px;
  }

  .hero {
    min-height: 100svh;
    grid-template-rows: auto auto;
  }

  .hero-image {
    width: min(78vw, 310px);
    margin-top: 7svh;
  }

  .hero-title {
    padding-bottom: 15svh;
  }

  h1 {
    font-size: clamp(3.5rem, 27vw, 6.6rem);
  }

  .play-inline[data-top-random-play] {
    width: 30px;
    height: 30px;
  }

  .section-head {
    margin-bottom: 24px;
    padding-bottom: 12px;
    gap: 12px;
  }

  .section-head p {
    font-size: .6rem;
    letter-spacing: .18em;
  }

  .section-head > span {
    font-size: .68rem;
  }

  .release-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .release-card {
    min-height: clamp(206px, 62vw, 252px);
    padding: 7px;
    transform: rotate(calc(var(--r) * .48));
  }

  .release-card .release-year,
  .release-card .release-year.grab-target {
    left: 8px;
    right: 8px;
    bottom: 38px;
    max-width: calc(100% - 16px);
    font-size: .58rem;
  }

  .release-card .release-title,
  .release-card .release-title.grab-target {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    max-height: 2.18em;
    font-size: clamp(.82rem, 5vw, 1.04rem);
  }

  .release-back {
    padding: 7px;
  }

  .release-track-list {
    max-height: 136px;
    gap: 4px;
  }

  .release-track-list li {
    grid-template-columns: 1.9em minmax(0, 1fr);
    min-height: 22px;
    padding-bottom: 4px;
  }

  .release-track-title {
    min-height: 23px;
    font-size: .62rem;
    line-height: 1.24;
  }

  .release-track-number,
  .release-back-label,
  .release-link {
    font-size: .5rem;
  }

  .release-disc {
    width: 34px;
    height: 34px;
  }

  .release-lyrics-card {
    padding: 8px;
  }

  .release-lyrics-text {
    font-size: .62rem;
    line-height: 1.62;
  }

  .daily-log-card {
    flex-basis: min(82vw, 300px);
  }

  .daily-log-meta {
    padding: 10px;
  }

  .daily-log-meta strong {
    font-size: .78rem;
  }

  .daily-log-scrollbar {
    width: min(100%, 240px);
    height: 30px;
  }

  .daily-log-orb {
    width: 24px;
    height: 24px;
  }

  .rain-toggle {
    left: 10px;
    top: 10px;
  }

  .site-clock {
    right: 10px !important;
    top: 10px !important;
    width: 54px;
    height: 54px;
  }

  .trash-bin {
    left: 10px;
    bottom: 10px;
    width: 50px;
    height: 36px;
  }

  .toybox {
    right: 10px;
    bottom: 10px;
  }

  .toybox-toggle {
    width: 48px;
    height: 36px;
    min-width: 48px;
    min-height: 36px;
    font-size: .76rem;
  }

  .toybox-panel {
    --toy-stack-step: 30px;
  }

  .toy {
    width: 25px;
    height: 25px;
  }

  .player {
    bottom: 60px;
    width: calc(100vw - 22px);
    max-width: none;
  }

  .player-toggle {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .player strong {
    max-width: calc(100vw - 112px);
    font-size: .76rem;
  }
}

@media (max-width: 360px) {
  .release-grid {
    gap: 9px;
  }

  .release-card {
    min-height: 198px;
  }

  .release-track-list {
    max-height: 118px;
  }

  .release-track-title {
    font-size: .58rem;
  }
}

/* Final links minimal pass.
   The links section should not behave like large cards: only the icon + label
   is clickable/selectable, and no card frame/background remains. */
.links .link-list {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  justify-items: center;
  align-items: start;
  gap: clamp(24px, 4vw, 46px) clamp(20px, 3.4vw, 40px);
}

.links .link-list a,
body.lamp-on .links .link-list a,
body.ruin-bloom .links .link-list a,
body.lamp-mode-blackout .links .link-list a {
  justify-self: center;
  align-self: start;
  display: inline-grid;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 3px 6px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
  transform: rotate(var(--link-card-r, 0deg));
  filter: none;
}

.links .link-list a::before,
.links .link-list a::after,
body.ruin-bloom .links .link-list a::before,
body.ruin-bloom .links .link-list a::after,
body.lamp-on .links .link-list a::before,
body.lamp-on .links .link-list a::after {
  content: none;
  display: none;
}

.links .link-list a:hover,
.links .link-list a:focus-visible,
.links .link-list a:has(.service-icon:hover),
.links .link-list a:has(.service-name:hover) {
  color: rgba(245,244,229,.96);
  transform: rotate(0deg) translateY(-2px);
  outline: 0;
  text-shadow: 0 0 12px rgba(126,168,198,.18);
}

.links .link-list a:focus-visible {
  outline: 1px solid rgba(231,230,216,.5);
  outline-offset: 8px;
  border-radius: 999px;
}

.links .link-list .service-icon {
  width: clamp(38px, 7vw, 66px);
  height: clamp(38px, 7vw, 66px);
  pointer-events: auto;
  cursor: pointer;
}

.links .link-list .service-name {
  max-width: 8.4em;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: auto;
  cursor: pointer;
}

.links .link-list .service-icon *,
.links .link-list .service-name * {
  pointer-events: auto;
}

body.lamp-on .links .link-list a > span,
body.ruin-bloom .links .link-list a > span {
  text-shadow:
    0 0 7px var(--lamp-glow, rgba(126,168,198,.18));
}

@media (max-width: 540px) {
  .links .link-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 10px;
  }

  .links .link-list a {
    padding: 2px 4px 4px;
    gap: 7px;
  }

  .links .link-list .service-icon {
    width: 42px;
    height: 42px;
  }

  .links .link-list .service-name {
    font-size: .68rem;
  }
}

/* Final archive title frame overrides.
   Release titles are also grab targets, so keep their layout pinned inside the card. */
.release-card .release-front {
  overflow: hidden !important;
}

.release-card .release-year,
.release-card .release-year.grab-target {
  position: absolute !important;
  left: clamp(10px, 4.6%, 18px);
  right: clamp(10px, 4.6%, 18px);
  bottom: clamp(54px, 13%, 66px);
  z-index: 2;
  width: auto !important;
  max-width: calc(100% - clamp(20px, 9.2%, 36px));
  overflow: hidden;
}

.release-card .release-title,
.release-card .release-title.grab-target {
  position: absolute !important;
  left: clamp(10px, 4.6%, 18px);
  right: clamp(10px, 4.6%, 18px);
  bottom: clamp(14px, 4.6%, 20px);
  z-index: 2;
  width: auto !important;
  max-width: calc(100% - clamp(20px, 9.2%, 36px));
  max-height: 2.4em;
  overflow: hidden;
}

body.grab-mode .hero-image,
body.grab-mode .hero-collage,
body.grab-mode .profile,
body.grab-mode .link-list,
.hero-image:has(.has-grab-offset),
.hero-collage:has(.has-grab-offset),
.profile:has(.has-grab-offset),
.link-list:has(.has-grab-offset) {
  overflow: visible;
}

.memo-note.grab-target {
  position: absolute;
}

.memo-note .memo-char.grab-target {
  position: relative;
}

.memo-note.grab-target.is-grabbed {
  z-index: 120;
}

.memo-note .memo-char.grab-target.is-grabbed {
  z-index: 5;
  color: rgba(14,18,15,.92);
  text-shadow:
    0 0 8px rgba(126,168,198,.24),
    .4px .2px .2px rgba(29,24,18,.22);
}

body.grab-mode .memo-note,
body.grab-mode .memo-note .memo-char {
  cursor: grab;
}

body.grabbing .memo-note,
body.grabbing .memo-note .memo-char {
  cursor: grabbing;
}

body.grab-mode {
  cursor: grab;
  user-select: none;
}

body.grab-mode .grab-target {
  cursor: grab;
}

body.grabbing,
body.grabbing .grab-target,
body.grab-mode .grab-target.is-grabbed {
  cursor: grabbing;
}

body.grab-mode .grab-target:hover {
  filter: drop-shadow(0 0 10px rgba(126,168,198,.2));
}

.grab-target.is-grabbed {
  z-index: 88;
  transition: none;
  filter:
    drop-shadow(0 0 18px rgba(126,168,198,.34))
    saturate(1.12);
}

.chaos-text {
  --gx: 0px;
  --gy: 0px;
  --gr: 0deg;
  --g-skew: 0deg;
  --g-opacity: 1;
}

.chaos-glyph {
  display: inline-block;
  position: relative;
  translate: 0 0;
  transform:
    translate3d(var(--gx, 0px), var(--gy, 0px), 0)
    rotate(var(--gr, 0deg))
    skewX(var(--g-skew, 0deg));
  transform-origin: 50% 62%;
  opacity: var(--g-opacity, 1);
  transition:
    transform .22s cubic-bezier(.2,.8,.22,1),
    opacity .24s ease,
    filter .24s ease;
  will-change: transform, opacity;
}

.chaos-space {
  min-width: .28em;
}

body.chaos-on .chaos-glyph,
body.chaos-on .memo-note .memo-char {
  filter: saturate(1.08) contrast(1.06);
  animation: glyphTremor 1.18s steps(2, end) infinite;
  animation-delay: var(--g-delay, 0ms);
}

@keyframes glyphTremor {
  0%,
  100% {
    transform:
      translate3d(calc(var(--gx, 0px) - .38px), calc(var(--gy, 0px) + .22px), 0)
      rotate(calc(var(--gr, 0deg) - .12deg))
      skewX(var(--g-skew, 0deg));
  }

  48% {
    transform:
      translate3d(calc(var(--gx, 0px) + .42px), calc(var(--gy, 0px) - .28px), 0)
      rotate(calc(var(--gr, 0deg) + .16deg))
      skewX(calc(var(--g-skew, 0deg) + .36deg));
  }
}

@media (max-width: 900px) {
  .hero,
  .music,
  .room,
  .profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .release-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  h1 {
    font-size: clamp(4rem, 22vw, 8rem);
  }

  .toybox-panel {
    width: 34px;
    height: 142px;
    --toy-stack-step: 32px;
  }

  .toy {
    width: 26px;
    height: 26px;
  }

  .rain-toggle {
    left: 12px;
    top: 12px;
    min-width: 54px;
    min-height: 34px;
    padding: 8px 10px;
    font-size: .54rem;
  }

  .site-clock {
    left: auto !important;
    right: 12px !important;
    top: 12px !important;
    bottom: auto !important;
    width: 64px;
    height: 64px;
    min-width: 0;
    padding: 8px;
    font-size: .44rem;
  }

  .timecode {
    font-size: .5rem;
  }

  .clickcode {
    display: none;
  }

  .stagecode,
  .clock-label {
    display: none;
  }

  .trash-bin {
    left: 12px;
    bottom: 12px;
    width: 58px;
    height: 38px;
  }

  .player {
    width: min(86vw, 460px);
  }

  .player strong {
    max-width: 48vw;
  }
}

@media (max-width: 540px) {
  .release-grid {
    grid-template-columns: 1fr;
  }

  .player {
    gap: 10px;
    width: calc(100vw - 34px);
  }

  .player-toggle {
    width: 54px;
    height: 54px;
  }

  .player strong {
    max-width: 52vw;
    font-size: .86rem;
  }

  .player small {
    font-size: .5rem;
  }
}

/* Lightweight living mode.
   Keeps the site responsive by disabling the earlier dense ambience system. */
body.site-light {
  --memory-load: 0;
  --memory-pressure: 0;
  --memory-sediment: 0;
  --archive-load: 0;
  --audio-pulse: 0;
  --audio-progress: 0;
  --audio-room: 0;
  --scroll-velocity: 0;
  --idle-depth: 0;
  --storm-load: 0;
  --place-rain: .04;
  --place-humidity: .04;
  --place-decay: 0;
  --lamp-core: rgba(126,168,198,.64);
  --lamp-a: rgba(126,168,198,.24);
  --lamp-b: rgba(251,248,223,.16);
  --lamp-soft: rgba(126,168,198,.08);
  --lamp-border: rgba(126,168,198,.26);
  --lamp-glow: rgba(126,168,198,.16);
}

body.site-light::before {
  opacity: .72;
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(196,156,85, calc(.16 * var(--daylight))), transparent 20vw),
    radial-gradient(circle at var(--moon-x, 22vw) var(--moon-y, 82vh), rgba(126,168,198, calc(.22 * var(--night))), transparent 22vw),
    linear-gradient(115deg, rgba(251,248,223,.045), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(251,248,223,.012) 120px 121px);
  mix-blend-mode: screen;
}

body.site-light.lamp-on::before {
  opacity: .44;
  background:
    radial-gradient(circle at 12% 14%, var(--lamp-a), transparent 24vw),
    radial-gradient(circle at 88% 82%, var(--lamp-b), transparent 24vw),
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(196,156,85, calc(.14 * var(--daylight))), transparent 18vw),
    radial-gradient(circle at var(--moon-x, 22vw) var(--moon-y, 82vh), rgba(126,168,198, calc(.18 * var(--night))), transparent 20vw);
}

body.lamp-on {
  background:
    radial-gradient(circle at 18% 8%, rgba(126, 168, 198, .14), transparent 28vw),
    radial-gradient(circle at 76% 22%, rgba(107, 50, 40, .14), transparent 34vw),
    linear-gradient(180deg, #111713 0%, #070b09 42%, #020302 100%);
}

body.lamp-on .section-head,
body.lamp-on .release-card,
body.lamp-on .room-photo,
body.lamp-on .profile img,
body.lamp-on .link-list a,
body.lamp-on .site-clock,
body.lamp-on .toybox-toggle {
  border-color: var(--lamp-border);
  box-shadow:
    inset 0 0 0 1px var(--lamp-glow),
    inset 0 0 26px rgba(251,248,223,.018),
    0 0 18px var(--lamp-glow),
    0 18px 60px rgba(0,0,0,.44);
}

body.lamp-on .site-header {
  background:
    linear-gradient(90deg, rgba(8,17,15,.72), rgba(8,17,15,.56), rgba(8,17,15,.72));
  border-bottom-color: var(--lamp-border);
  box-shadow: 0 1px 18px var(--lamp-glow);
}

body.lamp-on .hero-title h1,
body.lamp-on .brand strong,
body.lamp-on .section-head p,
body.lamp-on .release-card strong,
body.lamp-on .link-list a > span {
  text-shadow:
    0 0 7px var(--lamp-glow);
}

body.lamp-on .toy-lamp {
  color: #fff;
  border-color: var(--lamp-border);
  background:
    radial-gradient(circle at 50% 50%, var(--lamp-soft), transparent 64%),
    rgba(251,248,223,.045);
  box-shadow:
    inset 0 0 16px var(--lamp-glow),
    0 0 16px var(--lamp-glow);
}

body.lamp-on .toybox-toggle::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--lamp-core);
  box-shadow: 0 0 12px var(--lamp-core);
  vertical-align: .08em;
}

body.site-light::after {
  background:
    linear-gradient(180deg, rgba(0,0,0, calc(.05 + var(--night) * .14)), rgba(0,0,0, calc(.18 + var(--night) * .18 + var(--ruin) * .22))),
    radial-gradient(ellipse at 50% 104%, rgba(126,168,198, calc(.05 + var(--rain-strength) * .06)), transparent 34vw);
}

body.site-light .cursor-weather,
body.site-light .audio-field,
body.site-light .water-memory,
body.site-light .time-orbit,
body.site-light .rain-drops,
body.site-light .rain-sheet-b,
body.site-light .puddle-glow,
body.site-light .rain-impact-layer,
body.site-light .place-residue,
body.site-light .time-stratum,
body.site-light .time-fossil,
body.site-light .memory-fragment,
body.site-light .memory-residue,
body.site-light .memory-pool,
body.site-light .memory-echo,
body.site-light .worldline-scar,
body.site-light .rebuild-shard,
body.site-light .unlock-mark,
body.site-light .rust-trace {
  display: none !important;
}

body.site-light .weather-layer {
  opacity: calc(.28 + var(--rain-strength) * .28);
  filter: none;
}

body.site-light .rain-sheet {
  inset: -25vh -18vw;
  opacity: calc(.1 + var(--rain-strength) * .2);
  background:
    repeating-linear-gradient(104deg, transparent 0 27px, rgba(174,203,219,.12) 27px 28px, transparent 29px 90px);
  background-size: 360px 580px;
  filter: none;
  transform: skewX(-8deg);
  animation: lightRain 10s linear infinite;
}

body.site-light .wet-glass {
  opacity: calc(.06 + var(--rain-strength) * .08);
  filter: none;
  mix-blend-mode: screen;
}

body.site-light .hero-collage {
  opacity: .28;
  pointer-events: none;
}

body.site-light .cover,
body.site-light .release-card img,
body.site-light .hero-image img,
body.site-light .featured-cover img,
body.site-light .room-photo img,
body.site-light .profile img {
  filter: saturate(.92) contrast(1.02);
}

body.site-light .predator {
  opacity: calc(.2 + var(--rain-strength) * .16);
  background:
    radial-gradient(ellipse at 40% 45%, rgba(251,248,223,.18), transparent 34%),
    radial-gradient(ellipse at 62% 62%, rgba(126,168,198,.2), transparent 52%);
  filter: blur(.18px) contrast(1.35);
  backdrop-filter: none;
  box-shadow: none;
  animation: lightPredatorSignal 5s steps(1, end) infinite;
  transition: opacity .18s ease;
  will-change: opacity, clip-path, filter, transform;
}

body.site-light .predator::before,
body.site-light .predator::after {
  display: none;
}

body.site-light .predator:hover {
  opacity: .66;
  box-shadow: 0 0 8px rgba(126,168,198,.18);
}

body.site-light .predator.just-relocated {
  opacity: .72;
  filter: blur(.05px) contrast(2.05) saturate(1.15);
  box-shadow: 0 0 10px rgba(126,168,198,.22);
}

body.site-light .memo-note {
  filter:
    saturate(calc(.92 - var(--wet) * .18))
    contrast(calc(1 + var(--wet) * .1))
    brightness(calc(.98 - var(--wet) * .04))
    blur(calc(var(--bleed) * .12px));
}

body.site-light .memo-cursor {
  filter: saturate(.84) brightness(.96);
  backdrop-filter: none;
}

body.site-light .touch-trace {
  animation-duration: 1.2s;
}

body.site-light .player {
  backdrop-filter: none;
}

/* Ruin bloom alternate direction: grey/green, overgrown industrial air. */
body.ruin-bloom {
  --cream: #e7e6d8;
  --paper: #d5cfaa;
  --dark: #111714;
  --ruin-black: #060908;
  --ruin-green: #25372d;
  --rain-blue: #9eb4b1;
  --sodium: #b6aa75;
  --green: #6f9a75;
  color: rgba(231,230,216,.86);
  background:
    radial-gradient(ellipse at 18% 6%, rgba(214,226,216,.22), transparent 32vw),
    radial-gradient(ellipse at 72% 18%, rgba(98,124,105,.2), transparent 38vw),
    radial-gradient(ellipse at 46% 76%, rgba(42,67,52,.28), transparent 46vw),
    linear-gradient(180deg, #d8ddd3 0%, #768277 18%, #27352e 48%, #0a0f0d 100%);
}

body.ruin-bloom::before {
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(231,230,216, calc(.28 * var(--daylight))), transparent 24vw),
    radial-gradient(circle at var(--moon-x, 22vw) var(--moon-y, 82vh), rgba(156,178,174, calc(.2 * var(--night))), transparent 24vw),
    linear-gradient(112deg, rgba(231,230,216,.18) 0 8%, transparent 28%),
    linear-gradient(74deg, transparent 0 56%, rgba(164,184,164,.12) 58%, transparent 72%),
    radial-gradient(ellipse at 20% 80%, rgba(67,98,72,.28), transparent 34vw),
    radial-gradient(ellipse at 84% 92%, rgba(21,32,26,.42), transparent 46vw),
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(231,230,216,.018) 92px 93px),
    repeating-linear-gradient(0deg, transparent 0 118px, rgba(111,154,117,.02) 118px 119px);
  mix-blend-mode: screen;
}

body.ruin-bloom::after {
  background:
    linear-gradient(180deg, rgba(231,230,216, calc(.08 * var(--daylight))) 0%, transparent 20%, rgba(5,8,7, calc(.26 + var(--night) * .22 + var(--world-decay) * .18)) 100%),
    radial-gradient(ellipse at 48% 92%, rgba(64,92,70, calc(.18 + var(--waterline) * .08)), transparent 44vw),
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(2,4,3, calc(.1 + var(--hour-shadow) * .2 + var(--world-decay) * .18)) 100%),
    repeating-linear-gradient(100deg, transparent 0 54px, rgba(231,230,216,.018) 54px 55px);
}

body.ruin-bloom .ruin-ambience {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: calc(.52 + var(--night) * .1);
  filter: saturate(.86) contrast(1.08);
}

body.ruin-bloom .ruin-ambience span {
  position: absolute;
  display: block;
  pointer-events: none;
}

body.ruin-bloom .ruin-beam {
  width: 18vw;
  height: 125vh;
  top: -18vh;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(235,238,218,.26), rgba(161,184,160,.08) 42%, transparent 86%);
  filter: blur(18px);
  mix-blend-mode: screen;
  transform-origin: top center;
  animation: ruinBeamDrift 18s ease-in-out infinite alternate;
}

body.ruin-bloom .beam-a {
  left: 12vw;
  transform: rotate(15deg);
}

body.ruin-bloom .beam-b {
  right: 18vw;
  width: 12vw;
  opacity: .58;
  transform: rotate(-11deg);
  animation-delay: -7s;
}

body.ruin-bloom .ruin-arch {
  width: 58vw;
  height: 58vw;
  border: 1px solid rgba(231,230,216,.08);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  opacity: .46;
  filter: blur(.2px);
  background:
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 32px, rgba(231,230,216,.028) 33px 35px),
    radial-gradient(ellipse at 50% 100%, transparent 0 58%, rgba(5,8,7,.28) 59%, transparent 62%);
}

body.ruin-bloom .arch-a {
  left: -16vw;
  top: 16vh;
  rotate: -8deg;
}

body.ruin-bloom .arch-b {
  right: -22vw;
  top: 34vh;
  opacity: .34;
  rotate: 12deg;
}

body.ruin-bloom .ruin-vine {
  width: 1px;
  height: 52vh;
  background:
    linear-gradient(180deg, rgba(95,132,85,.02), rgba(95,132,85,.42), rgba(20,34,23,.16)),
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(154,179,123,.4) 34px 38px, transparent 38px 62px);
  filter: drop-shadow(0 0 8px rgba(111,154,117,.18));
  transform-origin: top center;
  animation: vineSway 9s ease-in-out infinite alternate;
}

body.ruin-bloom .vine-a {
  left: 21vw;
  top: -2vh;
}

body.ruin-bloom .vine-b {
  right: 13vw;
  top: 5vh;
  height: 44vh;
  opacity: .66;
  animation-delay: -3s;
}

body.ruin-bloom .ruin-mote {
  inset: -20vh -10vw;
  opacity: .26;
  background-image:
    radial-gradient(circle, rgba(231,230,216,.34) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(111,154,117,.24) 0 1px, transparent 1.7px);
  background-size: 180px 240px, 260px 320px;
  animation: ruinMotes 26s linear infinite;
}

body.ruin-bloom .mote-b {
  opacity: .18;
  background-size: 310px 220px, 190px 360px;
  animation-duration: 38s;
  animation-direction: reverse;
}

body.ruin-bloom .grain {
  opacity: calc(.1 + var(--world-decay) * .14 + var(--archive-load) * .05);
  mix-blend-mode: multiply;
}

body.ruin-bloom.site-light .weather-layer {
  opacity: .8;
  filter: saturate(.65) contrast(1.05);
}

body.ruin-bloom.site-light .rain-sheet {
  opacity: calc(.08 + var(--rain-strength) * .16);
  background:
    repeating-linear-gradient(104deg, transparent 0 34px, rgba(198,215,209,.1) 34px 35px, transparent 36px 108px),
    linear-gradient(104deg, transparent, rgba(231,230,216,.055), transparent);
  filter: blur(.2px);
}

body.ruin-bloom .wet-glass {
  opacity: calc(.12 + var(--rain-strength) * .1);
  background:
    radial-gradient(ellipse at 26% 20%, rgba(231,230,216,.1), transparent 32%),
    radial-gradient(ellipse at 78% 70%, rgba(111,154,117,.12), transparent 36%),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(231,230,216,.012) 7px 8px);
  mix-blend-mode: screen;
}

body.ruin-bloom .site-header {
  color: rgba(231,230,216,.82);
  background:
    linear-gradient(90deg, rgba(7,10,9,.78), rgba(30,47,37,.38)),
    linear-gradient(180deg, rgba(231,230,216,.08), transparent);
  border-bottom-color: rgba(231,230,216,.12);
  box-shadow: 0 16px 46px rgba(0,0,0,.22);
}

body.ruin-bloom .section {
  background:
    radial-gradient(ellipse at 16% 14%, rgba(231,230,216,.045), transparent 28%),
    radial-gradient(ellipse at 86% 78%, rgba(111,154,117,.09), transparent 34%),
    linear-gradient(180deg, rgba(231,230,216,.02), rgba(5,8,7,.1));
}

body.ruin-bloom .hero {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(231,230,216,.1), transparent 30vw),
    linear-gradient(180deg, rgba(164,184,164,.09), transparent 62%);
}

body.ruin-bloom .hero-image {
  border: 1px solid rgba(231,230,216,.13);
  box-shadow:
    0 0 0 1px rgba(111,154,117,.08),
    0 30px 120px rgba(4,8,6,.58),
    0 0 80px rgba(111,154,117,.12);
}

body.ruin-bloom .hero-image::after,
body.ruin-bloom .room-photo::after {
  background:
    linear-gradient(180deg, rgba(231,230,216,.14), transparent 30%, rgba(8,14,11,.46)),
    radial-gradient(ellipse at 40% 82%, rgba(111,154,117,.18), transparent 42%);
  mix-blend-mode: screen;
}

body.ruin-bloom .hero-image img,
body.ruin-bloom .release-card img,
body.ruin-bloom .room-photo img,
body.ruin-bloom .profile img {
  filter: grayscale(.24) saturate(.82) contrast(1.05) brightness(.88) hue-rotate(18deg);
}

body.ruin-bloom .hero-collage {
  opacity: .18;
  filter: grayscale(.55) saturate(.7) contrast(1.12);
}

body.ruin-bloom .hero-title h1,
body.ruin-bloom .release-title,
body.ruin-bloom .profile h2,
body.ruin-bloom .link-list a > span {
  color: rgba(231,230,216,.9);
  text-shadow:
    0 0 20px rgba(231,230,216,.08),
    0 0 34px rgba(111,154,117,.08);
}

body.ruin-bloom .play-inline,
body.ruin-bloom .hero-actions a,
body.ruin-bloom .release-card,
body.ruin-bloom .room-photo,
body.ruin-bloom .profile img,
body.ruin-bloom .drawbook,
body.ruin-bloom .toybox-toggle {
  border-color: rgba(231,230,216,.14);
  background-color: rgba(13,20,16,.5);
  box-shadow:
    inset 0 0 0 1px rgba(111,154,117,.055),
    0 20px 70px rgba(0,0,0,.34);
}

body.ruin-bloom .release-card {
  background:
    radial-gradient(ellipse at 14% 12%, rgba(231,230,216,.055), transparent 36%),
    radial-gradient(ellipse at 86% 92%, rgba(111,154,117,.12), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(231,230,216,.012) 38px 39px),
    rgba(10,15,13,.52);
  border-color: rgba(231,230,216,.12);
}

body.ruin-bloom .release-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(130deg, rgba(231,230,216,.12), transparent 22%),
    radial-gradient(ellipse at 8% 96%, rgba(111,154,117,.16), transparent 38%);
  mix-blend-mode: screen;
}

body.ruin-bloom .release-back {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(231,230,216,.07), transparent 34%),
    radial-gradient(ellipse at 92% 84%, rgba(111,154,117,.18), transparent 38%),
    repeating-linear-gradient(0deg, rgba(231,230,216,.02) 0 1px, transparent 1px 19px),
    linear-gradient(145deg, rgba(23,33,27,.9), rgba(4,7,6,.96));
}

body.ruin-bloom .release-track-number,
body.ruin-bloom .release-back-label {
  color: rgba(168,192,164,.78);
}

body.ruin-bloom .release-disc,
body.ruin-bloom .player-toggle::before,
body.ruin-bloom .disc-drag-ghost {
  filter: grayscale(.18) saturate(.78) brightness(.92);
}

body.ruin-bloom .room {
  background:
    radial-gradient(ellipse at 24% 16%, rgba(231,230,216,.08), transparent 34vw),
    radial-gradient(ellipse at 66% 76%, rgba(64,92,70,.18), transparent 42vw);
}

body.ruin-bloom .room-tags > span,
body.ruin-bloom .memo-note {
  border-color: rgba(80,92,68,.22);
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    inset 0 -18px 34px rgba(78,92,58,.1);
}

body.ruin-bloom .link-list a {
  border-color: rgba(231,230,216,.12);
  background:
    linear-gradient(90deg, rgba(111,154,117,.06), transparent 42%),
    linear-gradient(180deg, transparent, rgba(5,8,7,.12));
}

body.ruin-bloom .site-clock,
body.ruin-bloom .toybox-toggle,
body.ruin-bloom .toybox-panel {
  border-color: rgba(231,230,216,.14);
}

body.ruin-bloom .toybox-panel {
  background: transparent;
}

body.ruin-bloom .site-clock {
  background:
    radial-gradient(circle at 50% 50%, rgba(5,9,7,.9) 0 55%, transparent 56%),
    conic-gradient(from -90deg, rgba(134,164,138,.58) 0 calc(var(--day-progress, 0) * 1turn), rgba(231,230,216,.08) 0 1turn);
}

body.ruin-bloom .predator {
  background:
    radial-gradient(ellipse at 46% 48%, rgba(231,230,216,.14), transparent 36%),
    radial-gradient(ellipse at 62% 62%, rgba(111,154,117,.18), transparent 52%);
}

@keyframes ruinBeamDrift {
  from { translate: -1.2vw -1vh; opacity: .55; }
  to { translate: 1.6vw 2vh; opacity: .82; }
}

@keyframes vineSway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(3deg); }
}

@keyframes ruinMotes {
  from { transform: translate3d(0, -4vh, 0); }
  to { transform: translate3d(-6vw, 12vh, 0); }
}

/* Lightweight ruin rendering pass.
   Keep the grey/green degraded mood, but avoid large blurred animated layers. */
body.ruin-bloom {
  background:
    radial-gradient(ellipse at 20% 8%, rgba(224,231,220,.2), transparent 34vw),
    radial-gradient(ellipse at 78% 24%, rgba(104,129,107,.16), transparent 42vw),
    linear-gradient(180deg, #cfd6cc 0%, #758176 22%, #26352d 55%, #070b09 100%);
}

body.ruin-bloom::before {
  opacity: .78;
  mix-blend-mode: normal;
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(234,233,212, calc(.22 * var(--daylight))), transparent 24vw),
    linear-gradient(112deg, rgba(231,230,216,.12) 0 9%, transparent 27%),
    linear-gradient(76deg, transparent 0 58%, rgba(137,165,133,.1) 60%, transparent 73%),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(231,230,216,.022) 120px 121px);
}

body.ruin-bloom::after {
  opacity: .86;
  background:
    linear-gradient(180deg, rgba(231,230,216, calc(.06 * var(--daylight))) 0%, transparent 24%, rgba(4,8,6, calc(.22 + var(--night) * .2 + var(--world-decay) * .16)) 100%),
    radial-gradient(ellipse at 50% 92%, rgba(64,92,70, calc(.15 + var(--waterline) * .06)), transparent 44vw),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(2,4,3, calc(.11 + var(--hour-shadow) * .18 + var(--world-decay) * .15)) 100%);
}

body.ruin-bloom .ruin-ambience {
  opacity: calc(.34 + var(--night) * .08);
  filter: none;
  contain: paint;
}

body.ruin-bloom .ruin-ambience span {
  display: none;
}

body.ruin-bloom .ruin-ambience::before,
body.ruin-bloom .ruin-ambience::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.ruin-bloom .ruin-ambience::before {
  background:
    linear-gradient(104deg, transparent 0 14%, rgba(234,233,212,.11) 18%, transparent 34%),
    linear-gradient(72deg, transparent 0 58%, rgba(108,145,104,.09) 62%, transparent 76%),
    repeating-linear-gradient(90deg, transparent 0 9vw, rgba(231,230,216,.025) 9vw calc(9vw + 1px)),
    repeating-linear-gradient(0deg, transparent 0 14vh, rgba(111,154,117,.02) 14vh calc(14vh + 1px));
}

body.ruin-bloom .ruin-ambience::after {
  opacity: .46;
  background-image:
    radial-gradient(circle, rgba(231,230,216,.22) 0 1px, transparent 1.5px),
    linear-gradient(180deg, transparent, rgba(40,62,46,.18));
  background-size: 220px 280px, 100% 100%;
  animation: ruinMotesLite 46s linear infinite;
}

body.ruin-bloom.site-light .weather-layer,
body.ruin-bloom.site-light .rain-sheet,
body.ruin-bloom .wet-glass {
  filter: none;
}

body.ruin-bloom.site-light .rain-sheet {
  opacity: calc(.06 + var(--rain-strength) * .12);
  background:
    repeating-linear-gradient(104deg, transparent 0 48px, rgba(198,215,209,.08) 48px 49px, transparent 50px 148px);
  animation-duration: 18s;
}

body.ruin-bloom .wet-glass {
  opacity: calc(.08 + var(--rain-strength) * .08);
  background:
    radial-gradient(ellipse at 28% 22%, rgba(231,230,216,.08), transparent 32%),
    radial-gradient(ellipse at 78% 72%, rgba(111,154,117,.1), transparent 38%);
}

body.ruin-bloom .hero-image img,
body.ruin-bloom .release-card img,
body.ruin-bloom .room-photo img,
body.ruin-bloom .profile img {
  filter: none;
  opacity: .9;
}

body.ruin-bloom .hero-collage {
  filter: none;
  opacity: .14;
}

body.ruin-bloom .hero-title h1,
body.ruin-bloom .release-title,
body.ruin-bloom .profile h2,
body.ruin-bloom .link-list a > span {
  text-shadow: 0 0 20px rgba(111,154,117,.08);
}

body.ruin-bloom .play-inline,
body.ruin-bloom .hero-actions a,
body.ruin-bloom .release-card,
body.ruin-bloom .room-photo,
body.ruin-bloom .profile img,
body.ruin-bloom .drawbook,
body.ruin-bloom .toybox-toggle {
  box-shadow:
    inset 0 0 0 1px rgba(111,154,117,.05),
    0 18px 48px rgba(0,0,0,.28);
}

body.ruin-bloom .site-header {
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

body.ruin-bloom .release-card::before {
  opacity: .34;
  background:
    linear-gradient(130deg, rgba(231,230,216,.1), transparent 18%),
    radial-gradient(ellipse at 8% 96%, rgba(111,154,117,.12), transparent 34%);
}

@keyframes ruinMotesLite {
  from { transform: translate3d(0, -3vh, 0); }
  to { transform: translate3d(-4vw, 8vh, 0); }
}

/* Day-by-day decay system: CSS-only visuals driven by JS variables.
   No extra images, no large blur filters, and only one slow transform animation. */
body.ruin-bloom {
  --stage-rust: 0;
  --stage-crack: 0;
  --stage-moss: 0;
  --stage-plant: 0;
  --stage-fade: 0;
  --stage-tilt: 0;
  --stage-sink: 0;
  --ruin-plant: #5f7f50;
  --ruin-moss: #8aa36f;
  background:
    radial-gradient(ellipse at 20% 8%, rgba(224,231,220, calc(.2 - var(--collapse) * .08)), transparent 34vw),
    radial-gradient(ellipse at 78% 24%, rgba(104,129,107, calc(.16 + var(--growth) * .12)), transparent 42vw),
    radial-gradient(ellipse at 52% 96%, rgba(69,101,62, calc(var(--overgrowth) * .3)), transparent 54vw),
    linear-gradient(180deg, rgba(5,8,6, calc(var(--collapse) * .08)), transparent 26%, rgba(41,71,44, calc(var(--growth) * .18)) 100%),
    linear-gradient(180deg,
      #cfd6cc 0%,
      #758176 22%,
      #26352d 55%,
      #070b09 100%);
}

body.ruin-bloom[data-day-stage="1"] { --stage-rust: .08; --stage-crack: .04; --stage-moss: .02; --stage-plant: .00; --stage-fade: .02; --stage-tilt: .04; --stage-sink: .02; }
body.ruin-bloom[data-day-stage="2"] { --stage-rust: .15; --stage-crack: .10; --stage-moss: .06; --stage-plant: .04; --stage-fade: .05; --stage-tilt: .10; --stage-sink: .06; }
body.ruin-bloom[data-day-stage="3"] { --stage-rust: .22; --stage-crack: .16; --stage-moss: .12; --stage-plant: .10; --stage-fade: .08; --stage-tilt: .16; --stage-sink: .12; }
body.ruin-bloom[data-day-stage="4"] { --stage-rust: .30; --stage-crack: .23; --stage-moss: .22; --stage-plant: .18; --stage-fade: .12; --stage-tilt: .24; --stage-sink: .20; }
body.ruin-bloom[data-day-stage="5"] { --stage-rust: .38; --stage-crack: .30; --stage-moss: .34; --stage-plant: .30; --stage-fade: .17; --stage-tilt: .34; --stage-sink: .30; }
body.ruin-bloom[data-day-stage="6"] { --stage-rust: .45; --stage-crack: .37; --stage-moss: .48; --stage-plant: .44; --stage-fade: .23; --stage-tilt: .46; --stage-sink: .42; }
body.ruin-bloom[data-day-stage="7"] { --stage-rust: .52; --stage-crack: .44; --stage-moss: .62; --stage-plant: .58; --stage-fade: .30; --stage-tilt: .60; --stage-sink: .56; }
body.ruin-bloom[data-day-stage="8"] { --stage-rust: .58; --stage-crack: .50; --stage-moss: .76; --stage-plant: .74; --stage-fade: .38; --stage-tilt: .76; --stage-sink: .72; }
body.ruin-bloom[data-day-stage="9"] { --stage-rust: .62; --stage-crack: .55; --stage-moss: .88; --stage-plant: .88; --stage-fade: .45; --stage-tilt: .90; --stage-sink: .88; }
body.ruin-bloom[data-day-stage="10"] { --stage-rust: .66; --stage-crack: .60; --stage-moss: 1; --stage-plant: 1; --stage-fade: .52; --stage-tilt: 1; --stage-sink: 1; }

body.ruin-bloom::before {
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(234,233,212, calc(.22 * var(--daylight))), transparent calc(24vw + var(--growth) * 8vw)),
    linear-gradient(112deg, rgba(231,230,216, calc(.12 - var(--collapse) * .04)) 0 9%, transparent 27%),
    linear-gradient(76deg, transparent 0 58%, rgba(137,165,133, calc(.1 + var(--growth) * .08)) 60%, transparent 73%),
    repeating-linear-gradient(90deg, transparent 0 calc(120px - var(--stage-crack) * 42px), rgba(231,230,216,.022) calc(120px - var(--stage-crack) * 42px) calc(121px - var(--stage-crack) * 42px)),
    repeating-linear-gradient(118deg, transparent 0 90px, rgba(72,57,42, calc(var(--stage-crack) * .035)) 90px 91px);
}

body.ruin-bloom .ruin-ambience::before {
  opacity: calc(.62 + var(--stage-plant) * .26);
  background:
    linear-gradient(104deg, transparent 0 14%, rgba(234,233,212, calc(.11 - var(--collapse) * .03)) 18%, transparent 34%),
    linear-gradient(72deg, transparent 0 58%, rgba(108,145,104, calc(.09 + var(--growth) * .08)) 62%, transparent 76%),
    repeating-linear-gradient(92deg, transparent 0 calc(9vw - var(--stage-crack) * 2vw), rgba(231,230,216,.023) calc(9vw - var(--stage-crack) * 2vw) calc(9vw - var(--stage-crack) * 2vw + 1px)),
    repeating-linear-gradient(178deg, transparent 0 15vh, rgba(95,127,80, calc(var(--stage-plant) * .055)) 15vh calc(15vh + 2px)),
    repeating-linear-gradient(34deg, transparent 0 132px, rgba(83,105,63, calc(var(--stage-plant) * .05)) 132px 134px, transparent 134px 180px);
}

body.ruin-bloom .ruin-ambience::after {
  opacity: calc(.28 + var(--stage-moss) * .42);
  background-image:
    radial-gradient(circle, rgba(231,230,216,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(138,163,111, calc(.16 + var(--stage-moss) * .38)) 0 1px, transparent 1.8px),
    linear-gradient(180deg, transparent, rgba(40,62,46, calc(.16 + var(--overgrowth) * .18)));
  background-size:
    240px 300px,
    calc(170px - var(--stage-moss) * 54px) calc(190px - var(--stage-moss) * 48px),
    100% 100%;
  animation-duration: calc(52s - var(--stage-plant) * 18s);
}

body.ruin-bloom main {
  position: relative;
}

body.ruin-bloom main::before,
body.ruin-bloom main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

body.ruin-bloom main::before {
  opacity: calc(var(--stage-plant) * .58);
  background:
    linear-gradient(180deg, transparent 0 64%, rgba(44,73,42, calc(.12 + var(--overgrowth) * .16)) 100%),
    repeating-linear-gradient(96deg, transparent 0 22px, rgba(95,127,80,.34) 22px 24px, transparent 24px 62px),
    repeating-linear-gradient(72deg, transparent 0 36px, rgba(138,163,111,.24) 36px 38px, transparent 38px 86px);
  background-position: 0 calc(100vh - var(--stage-plant) * 28vh), 0 calc(100vh - var(--stage-plant) * 34vh), 0 calc(100vh - var(--stage-plant) * 24vh);
  mix-blend-mode: multiply;
}

body.ruin-bloom main::after {
  opacity: calc(var(--overgrowth) * .42);
  background:
    repeating-linear-gradient(178deg, transparent 0 18vw, rgba(74,101,59,.22) 18vw calc(18vw + 2px), transparent calc(18vw + 2px) 26vw),
    radial-gradient(ellipse at 16% 92%, rgba(95,127,80,.24), transparent 30vw),
    radial-gradient(ellipse at 86% 88%, rgba(138,163,111,.16), transparent 32vw);
  mix-blend-mode: multiply;
}

body.ruin-bloom .section {
  opacity: calc(1 - var(--stage-fade) * .28);
  background:
    radial-gradient(ellipse at 20% 18%, rgba(231,230,216, calc(.038 - var(--collapse) * .012)), transparent 28%),
    radial-gradient(ellipse at 86% 86%, rgba(95,127,80, calc(var(--stage-moss) * .1)), transparent 36%),
    linear-gradient(180deg, rgba(231,230,216,.018), rgba(5,8,7, calc(.08 + var(--collapse) * .06)));
  box-shadow:
    inset 0 calc(var(--stage-sink) * 34px) calc(70px + var(--stage-sink) * 60px) rgba(4,8,6, calc(.05 + var(--collapse) * .18)),
    inset 0 calc(var(--stage-sink) * -36px) calc(80px + var(--stage-sink) * 90px) rgba(37,55,45, calc(.08 + var(--growth) * .12));
}

body.ruin-bloom .section::before {
  filter: none;
  opacity: calc(.06 + var(--stage-rust) * .24 + var(--stage-crack) * .18);
  background:
    radial-gradient(ellipse at 18% 24%, rgba(111,63,45, calc(var(--stage-rust) * .32)), transparent 30vw),
    radial-gradient(ellipse at 86% 76%, rgba(95,127,80, calc(var(--stage-moss) * .24)), transparent 34vw),
    repeating-linear-gradient(114deg, transparent 0 calc(82px - var(--stage-crack) * 30px), rgba(71,61,45, calc(var(--stage-crack) * .07)) calc(82px - var(--stage-crack) * 30px) calc(83px - var(--stage-crack) * 30px)),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(231,230,216,.022) 17px 18px);
  mix-blend-mode: multiply;
}

body.ruin-bloom .section::after {
  filter: none;
  opacity: calc(.04 + var(--stage-moss) * .28 + var(--stage-plant) * .16);
  background:
    radial-gradient(circle at 18% 86%, rgba(95,127,80, calc(var(--stage-moss) * .28)) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 22%, rgba(138,163,111, calc(var(--stage-moss) * .22)) 0 1px, transparent 2px),
    repeating-linear-gradient(86deg, transparent 0 46px, rgba(95,127,80, calc(var(--stage-plant) * .08)) 46px 48px, transparent 48px 92px),
    linear-gradient(180deg, transparent 0 68%, rgba(40,62,46, calc(var(--stage-plant) * .22)) 100%);
  background-size: 160px 140px, 210px 190px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
}

body.ruin-bloom .release-card,
body.ruin-bloom .room-photo,
body.ruin-bloom .profile img,
body.ruin-bloom .drawbook {
  border-color: rgba(231,230,216, calc(.14 - var(--stage-fade) * .05));
  background-color: rgba(10,15,13, calc(.5 + var(--collapse) * .1));
}

body.ruin-bloom .release-card {
  translate: 0 calc(var(--world-decay) * 16px + var(--stage-sink) * 12px);
  rotate: calc(var(--stage-tilt) * .36deg);
}

body.ruin-bloom .release-card:nth-child(even) {
  rotate: calc(var(--stage-tilt) * -.42deg);
}

body.ruin-bloom .release-card::before {
  opacity: calc(.26 + var(--stage-moss) * .34);
  background:
    linear-gradient(130deg, rgba(231,230,216, calc(.1 - var(--collapse) * .02)), transparent 18%),
    radial-gradient(ellipse at 12% 96%, rgba(95,127,80, calc(.1 + var(--stage-moss) * .28)), transparent 38%),
    repeating-linear-gradient(106deg, transparent 0 64px, rgba(82,68,44, calc(var(--stage-crack) * .06)) 64px 65px);
}

body.ruin-bloom .release-card::after,
body.ruin-bloom .room-photo::before,
body.ruin-bloom .profile img::before {
  filter: none;
}

body.ruin-bloom .release-card img,
body.ruin-bloom .hero-image img,
body.ruin-bloom .room-photo img,
body.ruin-bloom .profile img {
  filter: none;
  opacity: calc(.9 - var(--stage-fade) * .24);
}

body.ruin-bloom .release-title,
body.ruin-bloom .release-card strong,
body.ruin-bloom .link-list a > span,
body.ruin-bloom .profile h2 {
  color: rgba(231,230,216, calc(.9 - var(--stage-fade) * .3));
}

body.ruin-bloom .release-year,
body.ruin-bloom .release-card > span,
body.ruin-bloom .room-tags > span,
body.ruin-bloom .profile dt,
body.ruin-bloom .profile dd {
  color: rgba(231,230,216, calc(.72 - var(--stage-fade) * .32));
}

body.ruin-bloom.day-100 main > .section {
  opacity: .72;
  transform: none;
}

body.ruin-bloom.day-100::before,
body.ruin-bloom.day-100 .hero-image,
body.ruin-bloom.day-100 .featured-cover,
body.ruin-bloom.day-100 .room-photo,
body.ruin-bloom.day-100 .profile img,
body.ruin-bloom.day-100 .release-card,
body.ruin-bloom.day-100 .hero-image img,
body.ruin-bloom.day-100 .featured-cover img,
body.ruin-bloom.day-100 .room-photo img,
body.ruin-bloom.day-100 .release-card img,
body.ruin-bloom.day-100 .hero-title,
body.ruin-bloom.day-100 .section-head,
body.ruin-bloom.day-100 .music-copy,
body.ruin-bloom.day-100 .profile div,
body.ruin-bloom.day-100 .room-tags,
body.ruin-bloom.day-100 .link-list {
  filter: none;
}

body.ruin-bloom.day-100 .release-card img,
body.ruin-bloom.day-100 .room-photo img,
body.ruin-bloom.day-100 .hero-image img {
  opacity: .5;
  mix-blend-mode: normal;
  transform: none;
}

body.ruin-bloom.day-100 main::after {
  z-index: 39;
  opacity: .52;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(31,58,35,.28) 100%),
    repeating-linear-gradient(178deg, transparent 0 11vw, rgba(76,109,62,.26) 11vw calc(11vw + 2px), transparent calc(11vw + 2px) 18vw),
    radial-gradient(ellipse at 18% 92%, rgba(95,127,80,.34), transparent 32vw),
    radial-gradient(ellipse at 82% 88%, rgba(138,163,111,.24), transparent 34vw);
  mix-blend-mode: multiply;
}

body.ruin-bloom.day-100 .site-header,
body.ruin-bloom.day-100 footer {
  opacity: .72;
}

body.ruin-bloom.day-100 .toybox,
body.ruin-bloom.day-100 .site-clock,
body.ruin-bloom.day-100 .drawbook,
body.ruin-bloom.day-100 .player,
body.ruin-bloom.day-100 .memo-note,
body.ruin-bloom.day-100 .predator {
  filter: none;
  opacity: 1;
}

/* Vegetation density pass.
   This is intentionally paint-only: no image assets, no canvas, no layout scripts. */
body.ruin-bloom .site-header {
  overflow: hidden;
}

body.ruin-bloom .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(2px + var(--stage-moss) * 10px);
  pointer-events: none;
  opacity: calc(var(--stage-moss) * .62);
  background:
    radial-gradient(circle at 8% 100%, rgba(138,163,111,.48) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 100%, rgba(95,127,80,.46) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 100%, rgba(138,163,111,.4) 0 1px, transparent 2px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(95,127,80,.42) 32px 34px, transparent 34px 58px);
  background-size: 120px 100%, 150px 100%, 190px 100%, 100% 100%;
  mix-blend-mode: screen;
}

body.ruin-bloom .release-card::after,
body.ruin-bloom .hero-image::after,
body.ruin-bloom .room-photo::after {
  opacity: calc(.12 + var(--stage-rust) * .16 + var(--stage-moss) * .34 + var(--stage-plant) * .18);
  background:
    linear-gradient(180deg, transparent 0 calc(55% - var(--stage-plant) * 10%), rgba(42,69,42, calc(var(--stage-plant) * .34)) 100%),
    radial-gradient(ellipse at 16% 92%, rgba(95,127,80, calc(.08 + var(--stage-moss) * .36)), transparent 38%),
    radial-gradient(ellipse at 86% 16%, rgba(92,71,47, calc(var(--stage-rust) * .24)), transparent 32%),
    repeating-linear-gradient(103deg, transparent 0 calc(88px - var(--stage-crack) * 34px), rgba(57,63,44, calc(var(--stage-crack) * .08)) calc(88px - var(--stage-crack) * 34px) calc(89px - var(--stage-crack) * 34px)),
    repeating-linear-gradient(178deg, transparent 0 calc(82px - var(--stage-plant) * 46px), rgba(82,113,62, calc(var(--stage-plant) * .12)) calc(82px - var(--stage-plant) * 46px) calc(84px - var(--stage-plant) * 46px), transparent calc(84px - var(--stage-plant) * 46px) 110px);
  mix-blend-mode: multiply;
}

body.ruin-bloom .release-card:nth-child(3n)::after {
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(42,69,42, calc(var(--stage-plant) * .3)) 100%),
    radial-gradient(ellipse at 78% 86%, rgba(138,163,111, calc(.1 + var(--stage-moss) * .32)), transparent 42%),
    repeating-linear-gradient(62deg, transparent 0 calc(104px - var(--stage-plant) * 54px), rgba(82,113,62, calc(var(--stage-plant) * .13)) calc(104px - var(--stage-plant) * 54px) calc(106px - var(--stage-plant) * 54px), transparent calc(106px - var(--stage-plant) * 54px) 132px);
}

body.ruin-bloom .release-card:nth-child(4n + 1) {
  translate:
    calc(var(--stage-tilt) * -5px)
    calc(var(--world-decay) * 16px + var(--stage-sink) * 16px);
}

body.ruin-bloom .release-card:nth-child(4n + 2) {
  translate:
    calc(var(--stage-tilt) * 6px)
    calc(var(--world-decay) * 14px + var(--stage-sink) * 10px);
}

body.ruin-bloom .release-card:nth-child(4n + 3) {
  translate:
    calc(var(--stage-tilt) * -3px)
    calc(var(--world-decay) * 20px + var(--stage-sink) * 18px);
}

body.ruin-bloom .release-card:nth-child(5n) {
  opacity: calc(1 - var(--stage-fade) * .18);
}

body.ruin-bloom .release-back {
  box-shadow:
    inset 0 calc(var(--stage-sink) * -28px) calc(32px + var(--stage-sink) * 54px) rgba(42,69,42, calc(var(--stage-plant) * .18)),
    inset 0 0 0 1px rgba(138,163,111, calc(var(--stage-moss) * .08));
}

body.ruin-bloom .release-track-list li {
  border-bottom-color: rgba(231,230,216, calc(.08 - var(--stage-fade) * .035));
}

body.ruin-bloom .room-tags > span,
body.ruin-bloom .link-list a {
  background:
    linear-gradient(90deg, rgba(95,127,80, calc(var(--stage-moss) * .08)), transparent 46%),
    linear-gradient(180deg, transparent, rgba(5,8,7, calc(.1 + var(--collapse) * .08)));
}

body.ruin-bloom.day-stage-6 .release-card::after,
body.ruin-bloom.day-stage-7 .release-card::after,
body.ruin-bloom.day-stage-8 .release-card::after,
body.ruin-bloom.day-stage-9 .release-card::after,
body.ruin-bloom.day-stage-10 .release-card::after {
  opacity: calc(.28 + var(--stage-moss) * .42);
}

body.ruin-bloom.day-stage-8 main::before,
body.ruin-bloom.day-stage-9 main::before,
body.ruin-bloom.day-stage-10 main::before {
  opacity: calc(.38 + var(--overgrowth) * .36);
}

body.ruin-bloom.day-stage-10 .release-card,
body.ruin-bloom.day-stage-10 .room-photo,
body.ruin-bloom.day-stage-10 .profile img {
  border-color: rgba(138,163,111,.18);
  box-shadow:
    inset 0 0 0 1px rgba(95,127,80,.08),
    0 18px 52px rgba(0,0,0,.38);
}

body.ruin-bloom.day-stage-10 .release-card strong,
body.ruin-bloom.day-stage-10 .release-card > span,
body.ruin-bloom.day-stage-10 .section-head,
body.ruin-bloom.day-stage-10 .room-tags,
body.ruin-bloom.day-stage-10 .link-list {
  opacity: .62;
}

body.ruin-bloom.day-stage-8 .release-card::after,
body.ruin-bloom.day-stage-9 .release-card::after {
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, transparent 0 52%, rgba(66,104,54,.2) 100%),
    radial-gradient(ellipse at 18% 92%, rgba(138,163,111,.22), transparent 38%),
    repeating-linear-gradient(176deg, transparent 0 42px, rgba(116,150,87,.12) 42px 44px, transparent 44px 86px),
    repeating-linear-gradient(68deg, transparent 0 94px, rgba(82,113,62,.14) 94px 96px, transparent 96px 128px);
}

body.ruin-bloom.day-stage-10 .release-card::after,
body.ruin-bloom.day-stage-10 .hero-image::after,
body.ruin-bloom.day-stage-10 .room-photo::after {
  opacity: .68;
  mix-blend-mode: normal;
  background:
    linear-gradient(180deg, transparent 0 36%, rgba(52,88,46,.16) 68%, rgba(87,124,65,.22) 100%),
    radial-gradient(ellipse at 16% 92%, rgba(138,163,111,.24), transparent 40%),
    radial-gradient(circle at 24% 72%, rgba(153,176,102,.2) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 18%, rgba(116,150,87,.18) 0 2px, transparent 3px),
    repeating-linear-gradient(176deg, transparent 0 28px, rgba(138,163,111,.12) 28px 30px, transparent 30px 72px),
    repeating-linear-gradient(62deg, transparent 0 72px, rgba(74,109,62,.13) 72px 74px, transparent 74px 116px);
  background-size:
    100% 100%,
    100% 100%,
    92px 116px,
    140px 160px,
    100% 100%,
    100% 100%;
}

body.ruin-bloom.day-stage-10 main::before {
  z-index: 38;
  opacity: .36;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(35,70,38,.18) 100%),
    radial-gradient(circle at 12% 84%, rgba(153,176,102,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 68%, rgba(138,163,111,.18) 0 2px, transparent 3px),
    repeating-linear-gradient(86deg, transparent 0 18px, rgba(116,150,87,.18) 18px 20px, transparent 20px 62px),
    repeating-linear-gradient(106deg, transparent 0 34px, rgba(76,109,62,.16) 34px 36px, transparent 36px 82px);
  background-size: 100% 100%, 120px 140px, 170px 210px, 100% 100%, 100% 100%;
  mix-blend-mode: normal;
}

body.ruin-bloom.day-stage-10 main::after {
  opacity: .54;
  background:
    linear-gradient(180deg, transparent 0 34%, rgba(88,122,74,.1) 55%, rgba(54,91,49,.38) 100%),
    radial-gradient(ellipse at 18% 90%, rgba(154,179,104,.28), transparent 32vw),
    radial-gradient(ellipse at 82% 88%, rgba(95,127,80,.34), transparent 34vw),
    radial-gradient(circle at 18% 74%, rgba(168,192,112,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 68%, rgba(138,163,111,.2) 0 2px, transparent 3px),
    repeating-linear-gradient(176deg, transparent 0 42px, rgba(154,179,104,.22) 42px 45px, transparent 45px 86px),
    repeating-linear-gradient(68deg, transparent 0 112px, rgba(76,109,62,.18) 112px 115px, transparent 115px 166px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    120px 150px,
    180px 220px,
    100% 100%,
    100% 100%;
  mix-blend-mode: normal;
}

body.ruin-bloom.day-stage-10 .release-card::after {
  opacity: .74;
  background:
    linear-gradient(180deg, transparent 0 34%, rgba(57,91,48,.16) 66%, rgba(92,126,66,.28) 100%),
    radial-gradient(ellipse at 14% 92%, rgba(154,179,104,.28), transparent 42%),
    radial-gradient(ellipse at 84% 18%, rgba(95,127,80,.2), transparent 34%),
    radial-gradient(circle at 20% 74%, rgba(168,192,112,.18) 0 2px, transparent 3px),
    repeating-linear-gradient(176deg, transparent 0 24px, rgba(154,179,104,.14) 24px 27px, transparent 27px 68px),
    repeating-linear-gradient(62deg, transparent 0 68px, rgba(74,109,62,.14) 68px 71px, transparent 71px 112px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 96px 120px, 100% 100%, 100% 100%;
}

/* Reuse the existing decorative spans as late-stage ruins/vines.
   They stay hidden before day60, so early pages remain cheap and clean. */
body.ruin-bloom.day-stage-6 .ruin-arch,
body.ruin-bloom.day-stage-7 .ruin-arch,
body.ruin-bloom.day-stage-8 .ruin-arch,
body.ruin-bloom.day-stage-9 .ruin-arch,
body.ruin-bloom.day-stage-10 .ruin-arch,
body.ruin-bloom.day-stage-6 .ruin-vine,
body.ruin-bloom.day-stage-7 .ruin-vine,
body.ruin-bloom.day-stage-8 .ruin-vine,
body.ruin-bloom.day-stage-9 .ruin-vine,
body.ruin-bloom.day-stage-10 .ruin-vine {
  display: block;
}

body.ruin-bloom.day-stage-6 .ruin-arch,
body.ruin-bloom.day-stage-7 .ruin-arch,
body.ruin-bloom.day-stage-8 .ruin-arch,
body.ruin-bloom.day-stage-9 .ruin-arch,
body.ruin-bloom.day-stage-10 .ruin-arch {
  filter: none;
  opacity: calc(.08 + var(--overgrowth) * .16);
  border-color: rgba(231,230,216, calc(.08 - var(--overgrowth) * .02));
  background:
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 36px, rgba(231,230,216,.025) 36px 37px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(95,127,80, calc(var(--stage-plant) * .055)) 44px 46px, transparent 46px 96px),
    radial-gradient(ellipse at 50% 100%, transparent 0 56%, rgba(5,8,7,.22) 58%, transparent 62%);
}

body.ruin-bloom.day-stage-6 .arch-a,
body.ruin-bloom.day-stage-7 .arch-a,
body.ruin-bloom.day-stage-8 .arch-a,
body.ruin-bloom.day-stage-9 .arch-a,
body.ruin-bloom.day-stage-10 .arch-a {
  left: -12vw;
  top: 10vh;
}

body.ruin-bloom.day-stage-6 .arch-b,
body.ruin-bloom.day-stage-7 .arch-b,
body.ruin-bloom.day-stage-8 .arch-b,
body.ruin-bloom.day-stage-9 .arch-b,
body.ruin-bloom.day-stage-10 .arch-b {
  right: -18vw;
  top: 22vh;
}

body.ruin-bloom.day-stage-6 .ruin-vine,
body.ruin-bloom.day-stage-7 .ruin-vine,
body.ruin-bloom.day-stage-8 .ruin-vine,
body.ruin-bloom.day-stage-9 .ruin-vine,
body.ruin-bloom.day-stage-10 .ruin-vine {
  width: calc(1px + var(--overgrowth) * 1px);
  filter: none;
  opacity: calc(.18 + var(--stage-plant) * .34);
  background:
    linear-gradient(180deg, rgba(95,132,85,.02), rgba(95,132,85,.58), rgba(20,34,23,.2)),
    repeating-linear-gradient(180deg, transparent 0 24px, rgba(154,179,123,.5) 24px 28px, transparent 28px 48px);
  animation-duration: 15s;
}

body.ruin-bloom.day-stage-8 .ruin-beam,
body.ruin-bloom.day-stage-9 .ruin-beam,
body.ruin-bloom.day-stage-10 .ruin-beam {
  display: block;
  filter: none;
  opacity: calc(.08 + var(--daylight) * .14);
  background: linear-gradient(180deg, rgba(235,238,218,.18), rgba(161,184,160,.045) 48%, transparent 88%);
  animation-duration: 28s;
}

body.ruin-bloom.day-stage-10 .ruin-mote {
  display: block;
  opacity: .18;
  filter: none;
  background-image:
    radial-gradient(circle, rgba(153,176,102,.28) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(231,230,216,.12) 0 1px, transparent 1.5px);
  background-size: 126px 158px, 240px 300px;
  animation-duration: 60s;
}

.track-list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 248, 223, .28);
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}

.track-list a:hover {
  color: var(--rain-blue);
  border-color: rgba(126, 168, 198, .68);
}

.listen-page {
  min-height: 100vh;
}

.listen-page .weather-layer {
  position: fixed;
}

.listen-main {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: clamp(88px, 12vw, 150px) clamp(20px, 7vw, 96px);
}

.listen-hero,
.listen-card {
  width: min(920px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(251, 248, 223, .18);
  background:
    linear-gradient(145deg, rgba(251, 248, 223, .08), rgba(5, 13, 12, .44)),
    rgba(8, 18, 16, .72);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
}

.listen-hero {
  padding: clamp(28px, 5vw, 54px);
}

.listen-hero p,
.listen-card span {
  margin: 0 0 10px;
  font-family: var(--font-latin);
  color: var(--rain-blue);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.listen-hero h1 {
  margin: 0;
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: .95;
}

.listen-hero > span {
  display: block;
  max-width: 34em;
  margin-top: 18px;
  color: rgba(251, 248, 223, .68);
  line-height: 1.9;
}

.listen-back {
  display: inline-block;
  margin-bottom: 30px;
  color: rgba(251, 248, 223, .72);
  text-decoration: none;
}

.listen-card {
  display: grid;
  grid-template-columns: minmax(180px, .62fr) 1fr;
  gap: clamp(18px, 4vw, 44px);
  align-items: end;
  margin-top: 18px;
  padding: clamp(20px, 4vw, 42px);
}

.listen-card h2 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1;
}

.listen-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.listen-links a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid rgba(251, 248, 223, .22);
  padding: 10px 14px;
  color: rgba(251, 248, 223, .82);
  text-decoration: none;
  background: rgba(251, 248, 223, .035);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.listen-links a:hover {
  border-color: rgba(126, 168, 198, .72);
  background: rgba(126, 168, 198, .12);
  transform: translateY(-1px);
}

.listen-card:target {
  border-color: rgba(126, 168, 198, .72);
  box-shadow: 0 28px 90px rgba(126, 168, 198, .12), 0 24px 80px rgba(0, 0, 0, .32);
}

@media (max-width: 720px) {
  .listen-card {
    grid-template-columns: 1fr;
  }

  .listen-links {
    justify-content: flex-start;
  }
}

@keyframes lightRain {
  from { background-position: 0 -240px; }
  to { background-position: -120px 340px; }
}

@keyframes lightPredatorSignal {
  0%, 84%, 100% {
    opacity: calc(.2 + var(--rain-strength) * .16);
    filter: blur(.18px) contrast(1.35);
    box-shadow: none;
    transform: rotate(var(--predator-r, 0deg)) translate3d(0,0,0);
    clip-path: ellipse(54% 46% at 50% 50%);
  }
  88% {
    opacity: .78;
    filter: blur(.05px) contrast(2.25) saturate(1.12);
    box-shadow: 0 0 8px rgba(126,168,198,.24);
    transform: rotate(var(--predator-r, 0deg)) translate3d(2px,-1px,0) skew(10deg);
    clip-path: polygon(0 14%, 100% 0, 86% 30%, 100% 46%, 6% 56%, 100% 70%, 82% 100%, 0 86%);
  }
  90% {
    opacity: .34;
    filter: blur(.35px) contrast(1.55);
    transform: rotate(var(--predator-r, 0deg)) translate3d(-2px,1px,0) skew(-12deg);
    clip-path: polygon(8% 0, 100% 16%, 76% 38%, 100% 54%, 4% 48%, 0 100%, 88% 84%, 0 72%);
  }
  92% {
    opacity: .7;
    filter: blur(.08px) contrast(2);
    box-shadow: 0 0 10px rgba(251,248,223,.12);
    transform: rotate(var(--predator-r, 0deg)) translate3d(1px,2px,0) skew(6deg);
    clip-path: ellipse(62% 32% at 52% 56%);
  }
}

/* Lightweight lamp toggle.
   Normal is the default page state; flashlight and blackout are cursor-following light modes. */
body.lamp-on {
  --lamp-x: 50vw;
  --lamp-y: 50vh;
}

body.lamp-on main {
  filter:
    brightness(var(--lamp-brightness, 1))
    contrast(var(--lamp-contrast, 1))
    saturate(var(--lamp-saturate, 1));
}

body.lamp-on .light-field {
  z-index: 4;
}

body.lamp-on .light-field::before {
  opacity: var(--lamp-layer-a, .45);
  background:
    radial-gradient(circle at var(--lamp-origin-a, 22% 16%), var(--lamp-a), transparent var(--lamp-spread-a, 32vw)),
    radial-gradient(circle at var(--lamp-origin-b, 84% 78%), var(--lamp-b), transparent var(--lamp-spread-b, 34vw)),
    linear-gradient(var(--lamp-angle, 120deg), transparent 0 28%, var(--lamp-soft) 48%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(var(--lamp-blur, 11px)) saturate(var(--lamp-layer-sat, 1.06));
}

body.lamp-on .light-field::after {
  opacity: var(--lamp-layer-b, .22);
  background:
    linear-gradient(var(--lamp-rim-angle, 90deg), var(--lamp-border), transparent 12% 88%, var(--lamp-border)),
    repeating-linear-gradient(var(--lamp-grid-angle, 90deg), transparent 0 120px, var(--lamp-border) 120px 121px);
  mix-blend-mode: screen;
  filter: blur(.6px);
}

body.lamp-on .section-head,
body.lamp-on .release-card,
body.lamp-on .room-photo,
body.lamp-on .profile img,
body.lamp-on .link-list a,
body.lamp-on .site-clock,
body.lamp-on .toybox-toggle {
  border-color: var(--lamp-border);
  box-shadow:
    inset var(--lamp-inset-x, 0) var(--lamp-inset-y, 0) 0 1px var(--lamp-glow),
    inset 0 0 var(--lamp-inset-blur, 26px) rgba(251,248,223,.018),
    var(--lamp-shadow-x, 0) var(--lamp-shadow-y, 16px) var(--lamp-shadow-blur, 46px) rgba(0,0,0,var(--lamp-shadow-alpha, .42)),
    0 0 var(--lamp-glow-blur, 18px) var(--lamp-glow);
}

body.lamp-on .toy-lamp {
  --toy-color: var(--lamp-core);
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,245,.22), transparent 38%),
    color-mix(in srgb, var(--lamp-core) 72%, rgba(5,7,6,.38));
  box-shadow:
    inset 0 0 18px var(--lamp-glow),
    0 0 22px var(--lamp-core);
}

body.lamp-on .toy-lamp::after {
  content: attr(data-lamp-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  translate: -50% 0;
  color: rgba(231,230,216,.72);
  font-family: var(--font-bit);
  font-size: .48rem;
  letter-spacing: .08em;
  white-space: nowrap;
  text-shadow: 0 0 8px var(--lamp-glow);
}

body.lamp-mode-flashlight {
  --lamp-brightness: .86;
  --lamp-contrast: 1.13;
  --lamp-saturate: .92;
  --lamp-layer-a: .78;
  --lamp-layer-b: .62;
  --lamp-shadow-alpha: .62;
}

body.lamp-mode-flashlight .light-field::before {
  opacity: .95;
  background:
    radial-gradient(circle at var(--lamp-x, 50vw) var(--lamp-y, 50vh), rgba(255,249,214,.46) 0 7vw, rgba(247,239,203,.16) 12vw, transparent 22vw);
  mix-blend-mode: screen;
  filter: blur(1px) saturate(1.05);
}

body.lamp-mode-flashlight .light-field::after {
  opacity: .72;
  background:
    radial-gradient(circle at var(--lamp-x, 50vw) var(--lamp-y, 50vh), transparent 0 12vw, rgba(0,0,0,.24) 22vw, rgba(0,0,0,.58) 100%);
  mix-blend-mode: multiply;
  filter: none;
}

body.lamp-mode-blackout {
  --lamp-brightness: .9;
  --lamp-contrast: 1.1;
  --lamp-saturate: .78;
  --lamp-layer-a: .72;
  --lamp-layer-b: .98;
  --lamp-shadow-alpha: .72;
}

body.lamp-mode-blackout main {
  filter:
    brightness(.9)
    contrast(1.08)
    saturate(.78);
}

body.lamp-mode-blackout .light-field {
  z-index: 58;
}

body.lamp-mode-blackout .light-field::before {
  opacity: .58;
  background:
    radial-gradient(circle at var(--lamp-x, 50vw) var(--lamp-y, 50vh),
      rgba(255, 255, 244, .72) 0 2.7vw,
      rgba(235, 240, 224, .48) 5.4vw,
      rgba(189, 207, 184, .2) 8.7vw,
      rgba(126, 153, 132, .08) 12vw,
      transparent 16.7vw),
    radial-gradient(circle at var(--lamp-x, 50vw) var(--lamp-y, 50vh),
      rgba(255, 255, 248, .24) 0 6vw,
      transparent 18vw);
  mix-blend-mode: screen;
  filter: blur(1.4px) saturate(.9) contrast(1.06);
  animation: blackoutLampFlicker 6.4s infinite;
}

body.lamp-mode-blackout .light-field::after {
  opacity: .98;
  background:
    radial-gradient(circle at var(--lamp-x, 50vw) var(--lamp-y, 50vh),
      rgba(0, 0, 0, 0) 0 5.4vw,
      rgba(0, 0, 0, .18) 9.4vw,
      rgba(0, 0, 0, .72) 16vw,
      rgba(0, 0, 0, .985) 25.4vw);
  mix-blend-mode: normal;
  filter: none;
  animation: blackoutShadeFlicker 6.4s infinite;
}

body.lamp-mode-blackout .release-card,
body.lamp-mode-blackout .room-photo,
body.lamp-mode-blackout .profile img,
body.lamp-mode-blackout .link-list a,
body.lamp-mode-blackout .daily-log-card {
  filter:
    brightness(.96)
    contrast(1.06)
    saturate(.78);
}

@keyframes blackoutLampFlicker {
  0%, 8%, 21%, 37%, 54%, 71%, 100% { opacity: .42; }
  9% { opacity: .86; }
  10% { opacity: .28; }
  11% { opacity: .68; }
  22% { opacity: .76; }
  23% { opacity: .32; }
  38% { opacity: .9; }
  39% { opacity: .36; }
  55% { opacity: .74; }
  56% { opacity: .32; }
  72% { opacity: .86; }
  73% { opacity: .36; }
}

@keyframes blackoutShadeFlicker {
  0%, 8%, 21%, 37%, 54%, 71%, 100% { opacity: .995; }
  9%, 11%, 22%, 38%, 55%, 72% { opacity: .91; }
  10%, 23%, 39%, 56%, 73% { opacity: .98; }
}

@media (prefers-reduced-motion: reduce) {
  body.site-light .rain-sheet,
	  body.site-light .predator,
	  body.site-light .touch-trace,
	  body.site-light .memo-note,
	  body.site-light .cover-drop,
	  body.lamp-mode-blackout .light-field::before,
	  body.lamp-mode-blackout .light-field::after {
	    animation: none !important;
	  }
	}

/* Final grab overrides: release cards have many world-aging translate rules. */
.release-card.chaos-piece {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px))
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 18px + var(--object-touches, 0) * 12px);
}

body[data-place="archive"] .release-card.chaos-piece {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px))
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--current-place-visits) * 10px);
}

body.ruin-bloom .release-card.chaos-piece {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px))
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 16px + var(--stage-sink) * 12px);
}

body.ruin-bloom .release-card.chaos-piece:nth-child(4n + 1) {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px) + var(--stage-tilt) * -5px)
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 16px + var(--stage-sink) * 16px);
}

body.ruin-bloom .release-card.chaos-piece:nth-child(4n + 2) {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px) + var(--stage-tilt) * 6px)
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 14px + var(--stage-sink) * 10px);
}

body.ruin-bloom .release-card.chaos-piece:nth-child(4n + 3) {
  translate:
    calc(var(--cx, 0px) + var(--grab-x, 0px) + var(--stage-tilt) * -3px)
    calc(var(--cy, 0px) + var(--grab-y, 0px) + var(--world-decay) * 20px + var(--stage-sink) * 18px);
}

/* Final archive/shader override. Keep this physically last. */
.release-card,
body.audio-playing .release-card,
body.memory-saturated .release-card,
body.ruin-bloom .release-card,
body.lamp-on .release-card,
body.lamp-mode-blackout .release-card,
body.day-stage-10 .release-card,
body.ruin-bloom.day-stage-10 .release-card {
  padding: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1.36;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  filter:
    drop-shadow(var(--world-shadow-x, 0px) var(--world-shadow-y, 18px) var(--world-shadow-blur, 34px) rgba(0,0,0,var(--world-shadow-alpha, .3))) !important;
}

.release-card::before,
.release-card::after,
.release-front::after,
body.grab-mode .release-front::after,
.release-card:has(.has-grab-offset) .release-front::after,
body.ruin-bloom .release-card::before,
body.ruin-bloom .release-card::after,
body.day-stage-10 .release-card::after,
body.ruin-bloom.day-stage-10 .release-card::after {
  content: none !important;
  display: none !important;
}

.release-card:hover {
  background: transparent !important;
}

.release-card-inner,
body.grab-mode .release-card-inner,
.release-card:has(.has-grab-offset) .release-card-inner,
.release-face,
body.grab-mode .release-face,
.release-card:has(.has-grab-offset) .release-face {
  min-height: 0 !important;
  height: 100%;
  overflow: visible !important;
}

.release-front,
body.grab-mode .release-front,
.release-card:has(.has-grab-offset) .release-front {
  display: grid !important;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: clamp(6px, 1.2vw, 13px);
  background: transparent !important;
  overflow: visible !important;
}

.release-card img,
body.ruin-bloom .release-card img,
body.day-100 .release-card img,
body.ruin-bloom.day-100 .release-card img {
  box-shadow:
    var(--world-shadow-x, 0px) var(--world-shadow-y, 18px) calc(var(--world-shadow-blur, 34px) * .72) rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .72));
}

.release-card .release-year,
.release-card .release-year.grab-target,
body.grab-mode .release-year,
.release-card:has(.has-grab-offset) .release-year,
body.ruin-bloom .release-year {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block;
  width: fit-content !important;
  max-width: 100% !important;
  margin: clamp(8px, 1.5vw, 14px) 0 0 !important;
  overflow: visible !important;
  color: rgba(231,230,216,.68) !important;
  font-size: clamp(.72rem, 1.06vw, .96rem);
  line-height: 1;
  pointer-events: auto;
  text-shadow:
    calc(var(--world-shadow-x, 0px) * .34)
    calc(var(--world-shadow-y, 18px) * .22)
    calc(var(--world-shadow-blur, 34px) * .36)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24));
}

.release-card .release-title,
.release-card .release-title.grab-target,
body.grab-mode .release-title,
.release-card:has(.has-grab-offset) .release-title,
body.ruin-bloom .release-title {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block;
  width: fit-content !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: rgba(231,230,216,.88) !important;
  font-size: clamp(1.02rem, 2.04vw, 1.58rem);
  line-height: 1.12;
  pointer-events: auto;
  text-shadow:
    calc(var(--world-shadow-x, 0px) * .34)
    calc(var(--world-shadow-y, 18px) * .22)
    calc(var(--world-shadow-blur, 34px) * .36)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24));
}

.release-back,
body.grab-mode .release-back,
.release-card:has(.has-grab-offset) .release-back,
body.ruin-bloom .release-back {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(7px, 1.1vw, 10px);
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.release-back-cover {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(7,14,12,.36), rgba(5,8,7,.68)),
    var(--release-cover) center / cover no-repeat,
    rgba(8,17,15,.42);
  box-shadow:
    inset 0 0 0 1px rgba(251,248,223,.07),
    inset 0 0 80px rgba(0,0,0,.42),
    var(--world-shadow-x, 0px) var(--world-shadow-y, 18px) calc(var(--world-shadow-blur, 34px) * .72) rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .72));
  filter:
    saturate(.72)
    contrast(1.08)
    brightness(calc(.7 + var(--world-light-power, .72) * .08));
}

.release-back-cover .release-disc {
  align-self: center;
  justify-self: center;
  z-index: 2;
  width: clamp(66px, 37%, 124px);
  height: clamp(66px, 37%, 124px);
  margin: 0;
}

.release-back-title {
  position: absolute !important;
  left: clamp(12px, 7%, 22px);
  right: clamp(12px, 7%, 22px);
  bottom: clamp(12px, 7%, 22px);
  z-index: 3;
  display: block;
  max-width: none;
  color: rgba(231,230,216,.92);
  font-family: var(--font-jp);
  font-size: clamp(1rem, 2vw, 1.42rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .02em;
  pointer-events: none;
  text-shadow:
    0 2px 20px rgba(0,0,0,.68),
    calc(var(--world-shadow-x, 0px) * .26)
    calc(var(--world-shadow-y, 18px) * .18)
    calc(var(--world-shadow-blur, 34px) * .28)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24));
}

.release-back-label {
  margin-top: clamp(8px, 1.4vw, 12px);
}

.release-track-list {
  max-height: clamp(92px, 12.5vw, 158px);
}

.release-card.is-showing-lyrics .release-back-cover,
.release-card.is-showing-lyrics .release-back-label,
.release-card.is-showing-lyrics .release-track-list,
.release-card.is-showing-lyrics .release-link {
  pointer-events: none;
  opacity: 0;
}

.release-card.is-showing-lyrics .release-lyrics-card {
  inset: 0 auto auto 0;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  padding: clamp(12px, 4.8%, 18px);
}

@media (max-width: 760px) {
  .release-card,
  body.audio-playing .release-card,
  body.memory-saturated .release-card,
  body.ruin-bloom .release-card,
  body.lamp-on .release-card,
  body.lamp-mode-blackout .release-card {
    aspect-ratio: 1 / 1.28;
  }

  .release-card .release-year,
  .release-card .release-year.grab-target {
    font-size: .66rem;
    margin-top: 7px !important;
  }

  .release-card .release-title,
  .release-card .release-title.grab-target {
    font-size: clamp(.92rem, 5vw, 1.2rem);
  }

  .release-back-cover .release-disc {
    width: clamp(50px, 34%, 82px);
    height: clamp(50px, 34%, 82px);
  }

  .release-back-title {
    font-size: clamp(.82rem, 4.7vw, 1.06rem);
  }

  .release-track-list {
    max-height: 92px;
  }
}

.release-card .release-front {
  overflow: visible !important;
}

/* Archive back track-list refinement. */
.release-card,
body.audio-playing .release-card,
body.memory-saturated .release-card,
body.ruin-bloom .release-card,
body.lamp-on .release-card,
body.lamp-mode-blackout .release-card,
body.day-stage-10 .release-card,
body.ruin-bloom.day-stage-10 .release-card {
  aspect-ratio: 1 / 1.5;
}

.release-back,
body.grab-mode .release-back,
.release-card:has(.has-grab-offset) .release-back,
body.ruin-bloom .release-back {
  grid-template-rows: auto minmax(78px, 1fr) auto !important;
}

.release-back-label {
  display: none !important;
}

.release-track-list {
  min-height: 78px;
  max-height: clamp(78px, 15vw, 176px);
}

.release-track-list li {
  min-height: 30px;
  padding-bottom: 7px;
}

@media (max-width: 760px) {
  .release-card,
  body.audio-playing .release-card,
  body.memory-saturated .release-card,
  body.ruin-bloom .release-card,
  body.lamp-on .release-card,
  body.lamp-mode-blackout .release-card {
    aspect-ratio: 1 / 1.42;
  }

  .release-back,
  body.grab-mode .release-back,
  .release-card:has(.has-grab-offset) .release-back,
  body.ruin-bloom .release-back {
    grid-template-rows: auto minmax(72px, 1fr) auto !important;
  }

  .release-track-list {
    min-height: 72px;
    max-height: 96px;
  }
}

/* Aquarium world pass.
   Lightweight CSS-only water tank layer: surface, depth, bubbles and plants. */
:root {
  --aquarium-depth: 0;
  --aquarium-dark: 0;
  --aquarium-surface-shift: 0px;
}

body {
  background:
    linear-gradient(
      180deg,
      #c7d2c2 0%,
      #9cb594 15%,
      #4f846e 37%,
      #183f4d 68%,
      #061427 100%
    ) !important;
}

.aquarium-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
  opacity: calc(.72 + var(--aquarium-depth) * .18);
  filter:
    saturate(calc(1.08 - var(--aquarium-dark) * .18))
    contrast(calc(.98 + var(--aquarium-dark) * .1));
}

.aquarium-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 48% 2%, rgba(247,255,228,.44), transparent 18vh),
    radial-gradient(ellipse at 17% 18%, rgba(94,177,122,.24), transparent 34vw),
    radial-gradient(ellipse at 82% 45%, rgba(26,89,100,.2), transparent 38vw),
    linear-gradient(
      180deg,
      rgba(221,232,204,.44) 0%,
      rgba(131,175,119,.32) calc(18% + var(--aquarium-depth) * 7%),
      rgba(45,112,94,.24) 44%,
      rgba(11,48,65, calc(.36 + var(--aquarium-dark) * .22)) 74%,
      rgba(2,12,27, calc(.64 + var(--aquarium-dark) * .22)) 100%
    );
}

.aquarium-layer::after {
  content: "";
  position: absolute;
  inset: -8vh -10vw;
  opacity: calc(.16 + (1 - var(--aquarium-dark)) * .13);
  background:
    repeating-linear-gradient(102deg, transparent 0 38px, rgba(247,255,228,.08) 39px 41px, transparent 42px 116px),
    repeating-linear-gradient(78deg, transparent 0 52px, rgba(126,202,179,.055) 53px 55px, transparent 56px 148px);
  mix-blend-mode: screen;
  filter: blur(calc(.7px + var(--aquarium-depth) * 1.2px));
  transform: translate3d(var(--aquarium-surface-shift), calc(var(--scroll-velocity) * -8px), 0) skewY(-2deg);
  animation: aquariumCaustics 13s ease-in-out infinite alternate;
}

.aquarium-surface {
  position: fixed;
  left: -6vw;
  right: -6vw;
  top: calc(-12px + var(--aquarium-depth) * -18px);
  height: clamp(76px, 13vh, 150px);
  opacity: calc(.48 - var(--aquarium-dark) * .2);
  background:
    radial-gradient(ellipse at 42% 12%, rgba(255,255,238,.58), transparent 26%),
    repeating-linear-gradient(176deg, rgba(255,255,238,.36) 0 2px, rgba(126,202,179,.14) 3px 6px, transparent 7px 18px),
    linear-gradient(180deg, rgba(255,255,238,.32), transparent 68%);
  filter: blur(.55px);
  transform: translateX(var(--aquarium-surface-shift));
  animation: aquariumSurface 8.5s ease-in-out infinite alternate;
}

.aquarium-caustic {
  position: fixed;
  width: 34vw;
  height: 22vh;
  border-radius: 999px;
  opacity: calc(.12 - var(--aquarium-dark) * .035);
  background: radial-gradient(ellipse, rgba(244,255,220,.34), rgba(126,202,179,.14) 42%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(18px);
  animation: aquariumGlow 17s ease-in-out infinite alternate;
}

.caustic-a {
  left: 4vw;
  top: 12vh;
}

.caustic-b {
  right: 6vw;
  top: 46vh;
  animation-delay: -6s;
  opacity: calc(.1 - var(--aquarium-dark) * .04);
}

.aquarium-bubble {
  position: fixed;
  bottom: -8vh;
  width: var(--bubble-size, 8px);
  height: var(--bubble-size, 8px);
  border: 1px solid rgba(236,249,232,.38);
  border-radius: 50%;
  opacity: calc(.14 + (1 - var(--aquarium-dark)) * .16);
  box-shadow:
    inset 1px 1px 4px rgba(255,255,255,.28),
    0 0 10px rgba(126,202,179,.1);
  animation: aquariumBubble var(--bubble-speed, 18s) linear infinite;
}

.bubble-a { left: 13vw; --bubble-size: 5px; --bubble-speed: 23s; animation-delay: -4s; }
.bubble-b { left: 31vw; --bubble-size: 9px; --bubble-speed: 19s; animation-delay: -12s; }
.bubble-c { left: 48vw; --bubble-size: 4px; --bubble-speed: 26s; animation-delay: -7s; }
.bubble-d { left: 68vw; --bubble-size: 7px; --bubble-speed: 21s; animation-delay: -16s; }
.bubble-e { left: 86vw; --bubble-size: 6px; --bubble-speed: 24s; animation-delay: -9s; }

.aquarium-fish {
  position: fixed;
  width: 22px;
  height: 7px;
  border-radius: 50% 58% 58% 50%;
  opacity: calc(.16 - var(--aquarium-dark) * .04);
  background:
    radial-gradient(circle at 78% 45%, rgba(247,255,228,.72) 0 1px, transparent 2px),
    linear-gradient(90deg, rgba(247,168,111,.52), rgba(247,255,228,.18));
  filter: blur(.1px);
  animation: aquariumFish 34s linear infinite;
}

.aquarium-fish::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 1px;
  border-left: 7px solid rgba(247,168,111,.42);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.fish-a { top: 28vh; left: -8vw; }
.fish-b { top: 56vh; left: -18vw; transform: scale(.72); animation-duration: 46s; animation-delay: -19s; }

.aquarium-scroll-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}

.aquarium-scroll-layer::before,
.aquarium-scroll-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aquarium-scroll-layer::before {
  opacity: calc(.16 + var(--aquarium-depth) * .08);
  background:
    repeating-linear-gradient(87deg, transparent 0 38px, rgba(118,202,92,.13) 39px 42px, transparent 43px 76px),
    repeating-linear-gradient(94deg, transparent 0 52px, rgba(21,82,49,.16) 53px 56px, transparent 57px 92px),
    linear-gradient(90deg, rgba(18,72,43,.24), transparent 19%, transparent 81%, rgba(18,72,43,.24));
  mask-image: linear-gradient(180deg, transparent 0 8%, #000 18%, #000 100%);
  mix-blend-mode: screen;
  filter: blur(.2px) saturate(1.18);
}

.aquarium-scroll-layer::after {
  opacity: calc(.12 + var(--aquarium-dark) * .1);
  background:
    radial-gradient(ellipse at 16% 21%, rgba(7,28,21,.52), transparent 18%),
    radial-gradient(ellipse at 84% 58%, rgba(7,28,21,.5), transparent 20%),
    radial-gradient(ellipse at 42% 90%, rgba(7,28,21,.58), transparent 24%);
  mix-blend-mode: multiply;
  filter: blur(18px);
}

.aqua-root,
.aqua-stem,
.aqua-plant,
.aqua-grass {
  position: absolute;
  display: block;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  opacity: calc(var(--o, .18) + var(--growth) * .1 - var(--aquarium-dark) * .01);
  transform:
    translate3d(-50%, -50%, 0)
    rotate(var(--r, 0deg))
    scale(var(--s, 1));
  transform-origin: 50% 100%;
  filter:
    saturate(calc(1.08 - var(--aquarium-dark) * .2))
    brightness(calc(.82 - var(--aquarium-dark) * .24));
  mix-blend-mode: screen;
}

.aqua-root {
  border-radius: 54% 46% 50% 50%;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(18,25,17,.72) 14% 26%, transparent 32% 44%, rgba(18,25,17,.58) 48% 60%, transparent 68%),
    radial-gradient(ellipse at 50% 50%, rgba(18,25,17,.52), transparent 64%);
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
  mix-blend-mode: multiply;
}

.aqua-root::before,
.aqua-root::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 6%;
  height: 18%;
  border-radius: 999px;
  border-top: 2px solid rgba(15,23,15,.62);
  transform: rotate(var(--branch-r, -14deg));
}

.aqua-root::before { top: 24%; }
.aqua-root::after { top: 58%; --branch-r: 18deg; }

.aqua-stem {
  width: var(--w);
  background:
    repeating-linear-gradient(180deg, rgba(7,47,31,.5) 0 8px, rgba(126,202,102,.18) 9px 10px, transparent 11px 22px),
    linear-gradient(90deg, transparent, rgba(10,63,41,.48), transparent);
  border-radius: 999px;
  transform-origin: 50% 100%;
  animation: aquariumPlantSway calc(9s + var(--sway, 0) * 1s) ease-in-out infinite alternate;
}

.aqua-stem::before,
.aqua-stem::after,
.aqua-plant::before,
.aqua-plant::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 9px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(90deg, rgba(111,190,91,.42), rgba(38,94,64,.2));
  transform-origin: 0 50%;
}

.aqua-stem::before { left: 52%; top: 26%; transform: rotate(28deg); }
.aqua-stem::after { right: 52%; top: 57%; transform: scaleX(-1) rotate(22deg); }

.aqua-plant {
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(27,86,52,.5), transparent 68%),
    repeating-linear-gradient(100deg, transparent 0 10px, rgba(151,219,97,.22) 11px 14px, transparent 15px 28px);
  animation: aquariumPlantSway 11s ease-in-out infinite alternate;
}

.aqua-plant::before { left: 46%; top: 36%; transform: rotate(-44deg); }
.aqua-plant::after { left: 46%; top: 58%; transform: rotate(38deg); }

.aqua-grass {
  background:
    repeating-linear-gradient(86deg, transparent 0 8px, rgba(85,170,80,.34) 9px 11px, transparent 12px 20px),
    linear-gradient(180deg, transparent, rgba(5,24,20,.38));
  filter: blur(.15px) saturate(1.1);
}

.root-a { --x: 16%; --y: 20%; --w: clamp(280px, 34vw, 540px); --h: clamp(90px, 12vw, 190px); --r: -12deg; --o: .24; }
.root-b { --x: 82%; --y: 58%; --w: clamp(300px, 38vw, 620px); --h: clamp(110px, 15vw, 220px); --r: 9deg; --o: .22; }
.root-c { --x: 38%; --y: 88%; --w: clamp(260px, 36vw, 580px); --h: clamp(100px, 14vw, 210px); --r: -7deg; --o: .24; }

.stem-a { --x: 8%; --y: 34%; --w: 8px; --h: clamp(340px, 48vh, 620px); --r: -6deg; --o: .31; --sway: 1; }
.stem-b { --x: 91%; --y: 26%; --w: 7px; --h: clamp(420px, 58vh, 760px); --r: 4deg; --o: .29; --sway: 2; }
.stem-c { --x: 74%; --y: 76%; --w: 9px; --h: clamp(300px, 44vh, 560px); --r: -3deg; --o: .31; --sway: 3; }
.stem-d { --x: 24%; --y: 68%; --w: 6px; --h: clamp(360px, 52vh, 680px); --r: 8deg; --o: .27; --sway: 4; }

.plant-a { --x: 19%; --y: 41%; --w: clamp(130px, 15vw, 240px); --h: clamp(130px, 16vw, 260px); --r: -12deg; --o: .28; }
.plant-b { --x: 83%; --y: 18%; --w: clamp(110px, 14vw, 220px); --h: clamp(150px, 17vw, 280px); --r: 8deg; --o: .26; }
.plant-c { --x: 68%; --y: 91%; --w: clamp(150px, 18vw, 280px); --h: clamp(120px, 15vw, 250px); --r: 15deg; --o: .28; }
.plant-d { --x: 38%; --y: 53%; --w: clamp(110px, 13vw, 210px); --h: clamp(110px, 14vw, 230px); --r: -4deg; --o: .24; }

.grass-a { --x: 50%; --y: 31%; --w: 108vw; --h: clamp(84px, 10vh, 160px); --r: -1deg; --o: .23; }
.grass-b { --x: 50%; --y: 65%; --w: 110vw; --h: clamp(92px, 12vh, 180px); --r: 2deg; --o: .25; }
.grass-c { --x: 50%; --y: 97%; --w: 112vw; --h: clamp(120px, 16vh, 230px); --r: 0deg; --o: .29; }

.section,
.hero,
.archive,
.room,
.links {
  background:
    linear-gradient(
      180deg,
      rgba(201,220,190, calc(.11 - var(--section-depth, .12) * .04)),
      rgba(35,92,78, calc(.08 + var(--section-depth, .12) * .08)) 42%,
      rgba(2,14,27, calc(.18 + var(--section-depth, .12) * .2 + var(--aquarium-dark) * .18))
    ) !important;
}

.hero-image img,
.release-card img,
.daily-log-card img,
.link-list .service-name,
.player strong {
  filter:
    saturate(calc(.92 - var(--aquarium-dark) * .12))
    brightness(calc(.94 - var(--aquarium-dark) * .1));
}

@keyframes aquariumSurface {
  0% { transform: translate3d(calc(var(--aquarium-surface-shift) - 18px), -2px, 0) scaleY(.96); }
  100% { transform: translate3d(calc(var(--aquarium-surface-shift) + 18px), 3px, 0) scaleY(1.04); }
}

@keyframes aquariumCaustics {
  0% { transform: translate3d(calc(var(--aquarium-surface-shift) - 20px), -4px, 0) skewY(-2deg); }
  100% { transform: translate3d(calc(var(--aquarium-surface-shift) + 26px), 8px, 0) skewY(2deg); }
}

@keyframes aquariumGlow {
  0% { transform: translate3d(-4vw, -2vh, 0) scale(.92); }
  100% { transform: translate3d(4vw, 3vh, 0) scale(1.08); }
}

@keyframes aquariumBubble {
  0% {
    transform: translate3d(0, 0, 0) scale(.82);
    opacity: 0;
  }
  12% { opacity: calc(.12 + (1 - var(--aquarium-dark)) * .18); }
  100% {
    transform: translate3d(18px, -114vh, 0) scale(1.1);
    opacity: 0;
  }
}

@keyframes aquariumFish {
  0% { transform: translate3d(-8vw, 0, 0) scale(.82); }
  48% { transform: translate3d(56vw, -3vh, 0) scale(.82); }
  100% { transform: translate3d(116vw, 2vh, 0) scale(.82); }
}

@keyframes aquariumPlantSway {
  0% { transform: translate3d(-50%, -50%, 0) rotate(calc(var(--r, 0deg) - 1.8deg)) scale(var(--s, 1)); }
  100% { transform: translate3d(-50%, -50%, 0) rotate(calc(var(--r, 0deg) + 1.8deg)) scale(var(--s, 1)); }
}

@media (max-width: 760px) {
  .aquarium-layer {
    opacity: calc(.64 + var(--aquarium-depth) * .14);
  }

  .aquarium-scroll-layer {
    opacity: .72;
  }

  .aquarium-caustic,
  .aquarium-fish {
    display: none;
  }

  .aqua-root,
  .aqua-plant {
    transform: translate3d(-50%, -50%, 0) rotate(var(--r, 0deg)) scale(.72);
  }
}

/* Continuous aquarium gradient.
   The whole page is treated as one tall tank, so sections no longer carry
   separate background panels or boundary-darkening bands. */
html {
  background: #061427;
}

body {
  background:
    linear-gradient(
      180deg,
      #c7d2c2 0%,
      #96b18d 14%,
      #4d826f 36%,
      #1d4d5e 63%,
      #07172d 100%
    ) !important;
}

main {
  background:
    radial-gradient(ellipse at 18% 10%, rgba(229,240,209,.32), transparent 24vw),
    radial-gradient(ellipse at 86% 36%, rgba(84,141,97,.22), transparent 34vw),
    radial-gradient(ellipse at 48% 77%, rgba(24,85,104,.3), transparent 42vw),
    linear-gradient(
      180deg,
      rgba(203,217,193,.82) 0%,
      rgba(148,181,135,.78) 12%,
      rgba(76,131,109,.76) 34%,
      rgba(24,75,92,.8) 62%,
      rgba(4,16,36,.9) 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section,
.hero,
.archive,
.room,
.links,
.dark {
  background: transparent !important;
}

.section {
  box-shadow:
    inset 0 calc(var(--section-visits) * -14px) calc(28px + var(--section-visits) * 54px) rgba(126,168,198, calc(var(--section-visits) * .04)),
    inset 0 calc(var(--section-visits) * 10px) calc(22px + var(--section-visits) * 38px) rgba(8,17,15, calc(var(--section-visits) * .06)),
    inset 0 calc(var(--memory-pressure) * 10px) calc(var(--memory-pressure) * 42px) rgba(8,17,15, calc(var(--memory-pressure) * .08));
}

.section::before {
  opacity: calc(var(--section-visits) * .12 + var(--archive-load) * .03 + var(--ruin) * var(--section-depth) * .06 + var(--memory-pressure) * .07);
  background:
    radial-gradient(ellipse at calc(18% + var(--section-depth) * 18%) calc(20% + var(--section-depth) * 34%), rgba(246,255,224,.16), transparent 28vw),
    radial-gradient(ellipse at calc(78% - var(--section-depth) * 14%) calc(82% - var(--section-depth) * 18%), rgba(40,103,89,.18), transparent 34vw),
    repeating-linear-gradient(92deg, transparent 0 88px, rgba(236,249,232,.018) 88px 89px);
  mix-blend-mode: screen;
  filter: blur(calc(var(--section-visits) * .35px));
}

.section::after {
  opacity: calc(var(--world-decay) * .08 + var(--archive-load) * .02 + var(--section-visits) * .06 + var(--ruin) * var(--section-depth) * .04 + var(--waterline) * .025);
  background:
    radial-gradient(ellipse at 50% 96%, rgba(3,18,27,.24), transparent 38vw),
    repeating-linear-gradient(96deg, transparent 0 48px, rgba(126,168,198,.024) 48px 49px),
    radial-gradient(ellipse at calc(50% + var(--fog-shift)) 18%, rgba(251,248,223,.04), transparent 34vw);
  mix-blend-mode: multiply;
}

.section.in-view::after {
  opacity: calc(var(--world-decay) * .12 + var(--section-visits) * .08 + .012);
}

.section.in-view::before {
  opacity: calc(var(--section-visits) * .14 + var(--current-place-visits) * .025);
}

body[data-place="archive"]::before,
body[data-place="music"]::before,
body[data-place="room"]::before,
body[data-place="profile"]::before,
body[data-place="links"]::before {
  background:
    radial-gradient(circle at var(--sun-x, 55vw) var(--sun-y, 20vh), rgba(246,255,224, calc(.12 * var(--daylight))), transparent 24vw),
    radial-gradient(circle at var(--moon-x, 22vw) var(--moon-y, 82vh), rgba(126,168,198, calc(.18 * var(--night))), transparent 28vw),
    radial-gradient(ellipse at 22% 28%, rgba(92,153,108,.12), transparent 34vw),
    radial-gradient(ellipse at 74% 72%, rgba(13,63,82,.16), transparent 42vw),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(251,248,223,.014) 96px 97px),
    repeating-linear-gradient(0deg, transparent 0 96px, rgba(251,248,223,.01) 96px 97px) !important;
}

.section-head {
  border-bottom-color: transparent !important;
}

/* Mobile archive/touch/lightweight pass.
   Phones get a stacked archive and vertical pan priority; desktop layout stays unchanged. */
@media (max-width: 640px) {
  html,
  body,
  main,
  .section,
  .archive,
  .release-grid,
  .release-card {
    touch-action: pan-y pinch-zoom;
  }

  .archive {
    overflow: visible !important;
  }

  .release-grid {
    display: block !important;
    padding: 2vh 0 74px !important;
  }

  .release-card,
  body.audio-playing .release-card,
  body.memory-saturated .release-card,
  body.ruin-bloom .release-card,
  body.lamp-on .release-card,
  body.lamp-mode-blackout .release-card,
  body.day-stage-10 .release-card,
  body.ruin-bloom.day-stage-10 .release-card {
    width: min(72vw, 292px) !important;
    min-height: auto !important;
    aspect-ratio: 1 / 1.3 !important;
    margin: 0 auto !important;
    padding: 8px !important;
    transform:
      translate3d(var(--mobile-stack-x, 0), 0, 0)
      rotate(var(--mobile-stack-r, var(--r))) !important;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease !important;
    will-change: auto;
  }

  .release-card + .release-card {
    margin-top: -58px !important;
  }

  .release-card:nth-child(3n + 1) {
    --mobile-stack-x: -6vw;
    --mobile-stack-r: -2.4deg;
  }

  .release-card:nth-child(3n + 2) {
    --mobile-stack-x: 5.5vw;
    --mobile-stack-r: 2deg;
  }

  .release-card:nth-child(3n) {
    --mobile-stack-x: -.8vw;
    --mobile-stack-r: -.9deg;
  }

  .release-card.is-flipped,
  .release-card.is-showing-lyrics {
    z-index: 20;
  }

  .release-card .release-front,
  body.grab-mode .release-card .release-front,
  .release-card:has(.has-grab-offset) .release-front {
    overflow: visible !important;
  }

  .release-front::after,
  body.grab-mode .release-front::after,
  .release-card:has(.has-grab-offset) .release-front::after {
    height: 36%;
  }

  .release-card img {
    transform: none !important;
  }

  .release-card .release-year,
  .release-card .release-year.grab-target {
    font-size: .58rem !important;
    margin-top: 5px !important;
  }

  .release-card .release-title,
  .release-card .release-title.grab-target {
    font-size: clamp(.78rem, 4.1vw, 1rem) !important;
    line-height: 1.06 !important;
  }

  .release-back,
  body.grab-mode .release-back,
  .release-card:has(.has-grab-offset) .release-back,
  body.ruin-bloom .release-back {
    grid-template-rows: auto minmax(72px, 1fr) auto !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .release-track-list,
  .release-lyrics-card {
    min-height: 72px;
    max-height: 96px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
  }

  .release-track-list li {
    min-height: 29px;
  }

  .release-disc {
    width: 34px;
    height: 34px;
    touch-action: manipulation;
  }

  .aquarium-layer {
    opacity: calc(.5 + var(--aquarium-depth) * .1);
  }

  .aquarium-layer::after,
  .aquarium-surface,
  .aqua-stem,
  .aqua-plant {
    animation: none !important;
  }

  .bubble-d,
  .bubble-e,
  .aquarium-caustic,
  .aquarium-fish {
    display: none !important;
  }

  .aqua-root,
  .aqua-plant {
    filter: none !important;
    transform: translate3d(-50%, -50%, 0) rotate(var(--r, 0deg)) scale(.62) !important;
  }

  body.scrolling-rain main,
  body.site-idle main,
  .section::before,
  .section::after {
    filter: none !important;
  }
}

/* Object-level world shadow pass.
   The player shell stays invisible; only the record, text and small objects cast time-linked shadows. */
.player,
body.audio-playing .player,
body.sound-marked .player,
body.site-light .player,
body.ruin-bloom.day-100 .player {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.player-toggle,
.release-disc,
.loose-record {
  filter:
    drop-shadow(
      calc(var(--world-shadow-x, 0px) * .42)
      calc(var(--world-shadow-y, 18px) * .44)
      calc(var(--world-shadow-blur, 34px) * .34)
      rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .82))
    );
}

.player-toggle.has-record::before,
.player-toggle.has-cover::before {
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.48),
    calc(var(--world-shadow-x, 0px) * .24)
    calc(var(--world-shadow-y, 18px) * .24)
    calc(var(--world-shadow-blur, 34px) * .24)
    rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .72));
}

.player small,
.player strong,
h1,
.hero-title p,
.section-head,
.daily-log-head,
.daily-log-card time,
.daily-log-card strong,
.release-track-number,
.release-track-title,
.release-year,
.release-title,
.release-back-title,
.link-list,
.service-name,
.memo-note,
.toybox-toggle,
.toy-action,
.rain-toggle,
.site-clock,
.trash-bin {
  text-shadow:
    calc(var(--world-shadow-x, 0px) * .28)
    calc(var(--world-shadow-y, 18px) * .2)
    calc(var(--world-shadow-blur, 34px) * .26)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24)),
    0 0 calc(4px + var(--world-light-power, .72) * 5px)
    rgba(245,245,224,calc(var(--world-light-power, .72) * .055)) !important;
}

.hero-image,
.cover,
.release-card img,
.release-back-cover,
.daily-log-card,
.room-photo,
.profile img,
.drawbook,
.memo-note,
.rain-toggle,
.site-clock,
.trash-bin,
.toybox-toggle,
.toy-action,
.link-list a,
.predator {
  box-shadow:
    calc(var(--world-shadow-x, 0px) * .55)
    calc(var(--world-shadow-y, 18px) * .58)
    calc(var(--world-shadow-blur, 34px) * .58)
    rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .68)),
    inset
    calc(var(--world-shadow-x, 0px) * -.04)
    calc(var(--world-shadow-y, 18px) * -.04)
    calc(var(--world-shadow-blur, 34px) * .18)
    rgba(245,245,224,calc(var(--world-light-power, .72) * .018)) !important;
}

.hero-image img,
.cover img,
.release-card img,
.daily-log-card img,
.room-photo img,
.profile img {
  box-shadow:
    calc(var(--world-shadow-x, 0px) * .42)
    calc(var(--world-shadow-y, 18px) * .42)
    calc(var(--world-shadow-blur, 34px) * .48)
    rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .58)) !important;
}

@media (max-width: 640px) {
  .player {
    width: auto !important;
    max-width: calc(100vw - 60px);
  }
}

/* Archive lyrics cards are disabled: track names are display text only. */
.release-track-title,
.release-track-title:hover,
.release-track-title:focus-visible {
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  color: rgba(251,248,223,.88) !important;
  cursor: default !important;
  outline: 0 !important;
  text-decoration: none !important;
  text-shadow:
    calc(var(--world-shadow-x, 0px) * .28)
    calc(var(--world-shadow-y, 18px) * .2)
    calc(var(--world-shadow-blur, 34px) * .26)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24)) !important;
}

/* Links stay frameless: no rectangular hit shadow, only icon/text carry light. */
.links .link-list a,
body.lamp-on .links .link-list a,
body.ruin-bloom .links .link-list a,
body.lamp-mode-blackout .links .link-list a {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

.links .link-list .service-icon,
.links .link-list .service-name {
  pointer-events: auto !important;
}

.links .link-list .service-icon {
  filter:
    drop-shadow(
      calc(var(--world-shadow-x, 0px) * .34)
      calc(var(--world-shadow-y, 18px) * .34)
      calc(var(--world-shadow-blur, 34px) * .28)
      rgba(0,0,0,calc(var(--world-shadow-alpha, .3) * .7))
    );
}

.links .link-list .service-name {
  text-shadow:
    calc(var(--world-shadow-x, 0px) * .28)
    calc(var(--world-shadow-y, 18px) * .2)
    calc(var(--world-shadow-blur, 34px) * .26)
    rgba(0,0,0,var(--world-text-shadow-alpha, .24)) !important;
}

/* Mobile interaction pass: keep page scrolling natural, while records remain draggable. */
@media (max-width: 640px) {
  html,
  body,
  main,
  .section,
  .archive,
  .release-grid,
  .release-card,
  .release-face {
    touch-action: pan-y pinch-zoom !important;
  }

  .grain,
  .weather-layer,
  .aquarium-layer,
  .floating-layer,
  .trace-layer {
    pointer-events: none !important;
  }

  .release-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
    padding: 0 8px 64px !important;
    align-items: start !important;
  }

  .release-card,
  body.audio-playing .release-card,
  body.memory-saturated .release-card,
  body.ruin-bloom .release-card,
  body.lamp-on .release-card,
  body.lamp-mode-blackout .release-card,
  body.day-stage-10 .release-card,
  body.ruin-bloom.day-stage-10 .release-card {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1.22 !important;
    padding: 5px !important;
    margin: 0 !important;
    transform:
      translate3d(0, 0, 0)
      rotate(calc(var(--r) * .42)) !important;
    will-change: transform;
  }

  .release-card + .release-card {
    margin-top: 0 !important;
  }

  .release-card.is-flipped {
    z-index: 90 !important;
  }

  .release-card:nth-child(3n + 1) {
    --mobile-stack-x: 0;
  }

  .release-card:nth-child(3n + 2) {
    --mobile-stack-x: 0;
  }

  .release-card:nth-child(3n) {
    --mobile-stack-x: 0;
  }

  .release-front::after,
  body.grab-mode .release-front::after,
  .release-card:has(.has-grab-offset) .release-front::after {
    height: 32% !important;
  }

  .release-card .release-year,
  .release-card .release-year.grab-target {
    font-size: .5rem !important;
  }

  .release-card .release-title,
  .release-card .release-title.grab-target {
    font-size: clamp(.68rem, 4.4vw, .92rem) !important;
    line-height: 1.02 !important;
  }

  .release-back,
  body.grab-mode .release-back,
  .release-card:has(.has-grab-offset) .release-back,
  body.ruin-bloom .release-back {
    grid-template-rows: auto minmax(54px, 1fr) auto !important;
    gap: 5px !important;
    padding: 6px !important;
  }

  .release-track-list {
    min-height: 52px !important;
    max-height: 68px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom !important;
  }

  .release-track-list li {
    min-height: 24px !important;
  }

  .release-back-cover .release-disc {
    width: clamp(32px, 18%, 54px) !important;
    height: clamp(32px, 18%, 54px) !important;
  }

  .release-disc,
  .release-back-cover .release-disc,
  .loose-record,
  .disc-drag-ghost {
    touch-action: none !important;
  }

  .toybox-panel {
    right: 50% !important;
    bottom: calc(100% + 8px) !important;
    width: 34px !important;
    height: 118px !important;
    transform: translateX(50%) !important;
    --toy-stack-step: 28px !important;
  }

  .toybox.is-open .toy-lamp {
    --toy-y: calc(var(--toy-stack-step) * -3);
  }

  .toybox.is-open .toy-grab {
    --toy-y: calc(var(--toy-stack-step) * -2);
  }

  .toybox.is-open .toy-jackets {
    --toy-y: calc(var(--toy-stack-step) * -1);
  }

  .toybox.is-open .toy-shuffle {
    --toy-y: 0px;
  }
}

/* Mobile touch priority: vertical swipes should scroll the page even over controls. */
@media (hover: none) and (pointer: coarse), (max-width: 640px) {
  html,
  body,
  main,
  .section,
  .hero,
  .links,
  .link-list,
  .link-list a,
  .links .link-list a,
  .links .link-list .service-icon,
  .links .link-list .service-name,
  .play-inline,
  .play-inline[data-top-random-play],
  .player,
  .player-toggle,
  .rain-toggle,
  .toybox-toggle,
  .toybox,
  .site-clock,
  .trash-bin,
  .memo-note,
  .memo-char,
  .grab-target {
    touch-action: pan-y pinch-zoom !important;
  }

  body.grabbing .grab-target,
  body.grab-mode .grab-target.is-grabbed,
  .release-disc,
  .release-back-cover .release-disc,
  .loose-record,
  .disc-drag-ghost,
  .drawbook-canvas {
    touch-action: none !important;
  }

  .links .link-list a,
  body.lamp-on .links .link-list a,
  body.ruin-bloom .links .link-list a,
  body.lamp-mode-blackout .links .link-list a {
    pointer-events: auto !important;
    touch-action: pan-y pinch-zoom !important;
  }

  .links .link-list .service-icon,
  .links .link-list .service-name,
  .links .link-list .service-icon *,
  .links .link-list .service-name * {
    pointer-events: none !important;
  }
}

/* v1.3 background direction:
   Keep the site objects and controls, but make the page backdrop only a soft
   blue/green gradient field. Decorative background objects are disabled here. */
body,
body.site-light,
body.ruin-bloom,
body.lamp-on {
  background:
    linear-gradient(
      132deg,
      #d9e1da 0%,
      #a7c6c4 18%,
      #4e8682 36%,
      #0f5f63 51%,
      #0a3a4f 68%,
      #163322 84%,
      #d3ded7 100%
    ) !important;
  background-size: 220% 220% !important;
  animation: none !important;
}

body::before,
body.site-light::before,
body.ruin-bloom::before,
body.lamp-on::before,
body[data-place="archive"]::before,
body[data-place="music"]::before,
body[data-place="room"]::before,
body[data-place="profile"]::before,
body[data-place="links"]::before {
  opacity: .86 !important;
  z-index: 0 !important;
  background:
    radial-gradient(ellipse at 16% 18%, rgba(199,222,216,.72), transparent 30vw),
    radial-gradient(ellipse at 62% 20%, rgba(9,72,94,.64), transparent 34vw),
    radial-gradient(ellipse at 48% 48%, rgba(0,141,126,.52), transparent 38vw),
    radial-gradient(ellipse at 28% 76%, rgba(21,58,44,.52), transparent 42vw),
    radial-gradient(ellipse at 84% 76%, rgba(206,219,218,.68), transparent 36vw) !important;
  background-size: 145% 145%, 160% 160%, 150% 150%, 170% 170%, 140% 140% !important;
  background-position: 0% 10%, 74% 8%, 46% 48%, 16% 86%, 100% 86% !important;
  mix-blend-mode: soft-light !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

body::after,
body.site-light::after,
body.ruin-bloom::after,
body.lamp-on::after {
  z-index: 1 !important;
  opacity: .44 !important;
  background:
    linear-gradient(104deg, transparent 0 24%, rgba(205,230,224,.16) 34%, transparent 52%),
    linear-gradient(78deg, rgba(7,61,74,.18), transparent 28% 72%, rgba(192,211,211,.22)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px) !important;
  background-size: 180% 180%, 150% 150%, 5px 5px !important;
  background-position: 0% 30%, 100% 60%, 0 0 !important;
  mix-blend-mode: overlay !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

.predator {
  animation: none !important;
  will-change: auto !important;
}

.release-card,
body.audio-playing .release-card,
body.memory-saturated .release-card,
body.ruin-bloom .release-card,
body.lamp-on .release-card,
body.lamp-mode-blackout .release-card,
body.day-stage-10 .release-card,
body.ruin-bloom.day-stage-10 .release-card {
  filter: none !important;
}

.grain,
.weather-layer,
.aquarium-layer,
.ruin-ambience,
.scroll-ruin-layer,
.aquarium-scroll-layer,
.cursor-weather,
.water-memory,
.rain-impact-layer,
.site-stain,
.time-fossil,
.memory-fragment,
.memory-residue,
.memory-pool,
.hero-collage {
  display: none !important;
}

.light-field .sun,
.light-field .moon {
  display: none !important;
}

.section::before,
.section::after,
body.ruin-bloom main::before,
body.ruin-bloom main::after {
  display: none !important;
}

@media (max-width: 640px) {
  .release-card,
  body.audio-playing .release-card,
  body.memory-saturated .release-card,
  body.ruin-bloom .release-card,
  body.lamp-on .release-card,
  body.lamp-mode-blackout .release-card,
  body.day-stage-10 .release-card,
  body.ruin-bloom.day-stage-10 .release-card {
    transform: rotate(calc(var(--r) * .42)) !important;
    will-change: auto !important;
  }
}

/* v1.6.4: fourth lamp state — a dim deep-sea floor revealed by drifting light. */
body.lamp-mode-deepsea {
  --lamp-brightness: 1;
  --lamp-contrast: 1;
  --lamp-saturate: 1;
  --lamp-layer-a: 1;
  --lamp-layer-b: 1;
  --lamp-shadow-alpha: .78;
  background:
    radial-gradient(ellipse at 50% 112%, rgba(16, 74, 76, .34), transparent 44%),
    radial-gradient(ellipse at 16% 62%, rgba(8, 45, 60, .22), transparent 34%),
    linear-gradient(180deg, #07141d 0%, #03101a 42%, #01060d 74%, #000308 100%) !important;
  background-size: 100% 100% !important;
}

body.lamp-mode-deepsea main {
  filter: none !important;
}

body.lamp-mode-deepsea::before,
body.site-light.lamp-mode-deepsea::before,
body.ruin-bloom.lamp-mode-deepsea::before {
  opacity: 1 !important;
  background:
    radial-gradient(ellipse at 50% 108%, rgba(47, 117, 99, .18), transparent 38%),
    linear-gradient(180deg, rgba(3, 15, 26, .16), rgba(0, 3, 9, .58)) !important;
  mix-blend-mode: normal !important;
}

body.lamp-mode-deepsea::after,
body.site-light.lamp-mode-deepsea::after,
body.ruin-bloom.lamp-mode-deepsea::after {
  opacity: .62 !important;
  background:
    radial-gradient(ellipse at 50% 106%, transparent 0 18%, rgba(0, 4, 10, .5) 56%, rgba(0, 2, 7, .86) 100%) !important;
  mix-blend-mode: normal !important;
}

body.lamp-mode-deepsea .light-field {
  z-index: 58;
  overflow: hidden;
}

body.lamp-mode-deepsea .light-field::before,
body.lamp-mode-deepsea .light-field::after {
  inset: -24vmax;
  width: auto;
  height: auto;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform;
}

body.lamp-mode-deepsea .light-field::before {
  opacity: .9;
  background:
    radial-gradient(ellipse at 30% 31%, rgba(154, 240, 225, .22) 0 3%, rgba(75, 186, 188, .11) 9%, transparent 24%),
    radial-gradient(ellipse at 69% 62%, rgba(101, 190, 215, .18) 0 2%, rgba(45, 125, 155, .09) 10%, transparent 25%),
    radial-gradient(ellipse at 45% 82%, rgba(102, 205, 175, .12), transparent 20%);
  mix-blend-mode: screen;
  filter: none;
  animation: deepseaLightDrift 19s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

body.lamp-mode-deepsea .light-field::after {
  opacity: 1;
  background:
    radial-gradient(
      ellipse at 38% 40%,
      rgba(0, 3, 10, .08) 0 5%,
      rgba(0, 5, 13, .38) 16%,
      rgba(0, 3, 10, .77) 39%,
      rgba(0, 2, 8, .94) 72%,
      rgba(0, 1, 5, .98) 100%
    );
  mix-blend-mode: multiply;
  filter: none;
  animation: deepseaShadowDrift 23s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

body.lamp-mode-deepsea .aquarium-layer {
  display: block !important;
  z-index: 59;
  opacity: 1;
  background: transparent;
  filter: none;
}

body.lamp-mode-deepsea .aquarium-layer::before,
body.lamp-mode-deepsea .aquarium-layer::after,
body.lamp-mode-deepsea .aquarium-surface,
body.lamp-mode-deepsea .aquarium-caustic,
body.lamp-mode-deepsea .aquarium-fish {
  display: none !important;
}

body.lamp-mode-deepsea .aquarium-bubble {
  display: block !important;
  bottom: -9vh;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  opacity: .34;
  appearance: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-y pinch-zoom;
  animation: deepseaSilt var(--bubble-speed, 22s) linear infinite !important;
}

body.lamp-mode-deepsea .aquarium-bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bubble-size, 8px);
  height: var(--bubble-size, 8px);
  border-radius: 50%;
  background: rgba(157, 231, 218, .76);
  box-shadow:
    0 0 5px rgba(133, 226, 217, .62),
    0 0 18px rgba(75, 171, 184, .22);
  transform: translate(-50%, -50%) scale(1);
}

body.lamp-mode-deepsea .aquarium-bubble:focus-visible {
  outline: 1px solid rgba(187, 247, 237, .76);
  outline-offset: 2px;
}

body.lamp-mode-deepsea .aquarium-bubble.is-popped {
  pointer-events: none;
}

body.lamp-mode-deepsea .aquarium-bubble.is-popped::before {
  animation: deepseaBubblePop .36s ease-out forwards;
}

body.lamp-mode-deepsea .toy-lamp {
  color: rgba(228, 255, 247, .96);
  background:
    radial-gradient(circle at 50% 46%, rgba(172, 248, 232, .22), transparent 38%),
    rgba(3, 24, 31, .9);
  box-shadow:
    inset 0 0 16px rgba(106, 224, 213, .16),
    0 0 22px rgba(77, 203, 201, .2);
}

@keyframes deepseaLightDrift {
  0% { transform: translate3d(-5vw, -2vh, 0) rotate(-1.5deg) scale(.98); }
  48% { transform: translate3d(4vw, 3vh, 0) rotate(1deg) scale(1.03); }
  100% { transform: translate3d(8vw, -3vh, 0) rotate(2deg) scale(1); }
}

@keyframes deepseaShadowDrift {
  0% { transform: translate3d(7vw, 3vh, 0) scale(1.02); }
  52% { transform: translate3d(-3vw, -4vh, 0) scale(.98); }
  100% { transform: translate3d(-8vw, 2vh, 0) scale(1.04); }
}

@keyframes deepseaSilt {
  0% { transform: translate3d(0, 8vh, 0) scale(.55); opacity: 0; }
  14% { opacity: .28; }
  54% { transform: translate3d(2.5vw, -48vh, 0) scale(.82); opacity: .4; }
  100% { transform: translate3d(-1.5vw, -112vh, 0) scale(1.08); opacity: 0; }
}

@keyframes deepseaBubblePop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  48% {
    opacity: .82;
    transform: translate(-50%, -50%) scale(2.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.2);
  }
}

@media (max-width: 640px) {
  body.lamp-mode-deepsea .light-field::before,
  body.lamp-mode-deepsea .light-field::after {
    inset: -30vmax;
  }

  body.lamp-mode-deepsea .bubble-d,
  body.lamp-mode-deepsea .bubble-e {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  body.lamp-mode-deepsea .light-field::before,
  body.lamp-mode-deepsea .light-field::after,
  body.lamp-mode-deepsea .aquarium-bubble {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  body.lamp-mode-deepsea .aquarium-bubble.is-popped::before {
    opacity: 0 !important;
    animation: none !important;
  }
}