/* Empty insets in the room's surface: no glazed layer or floating rim. */
body.spatial-room { --recess-shadow: inset 0 2px 7px #00000026, inset 0 -1px 0 rgba(var(--interface-ink), .035); }
.spatial-room :is(.track-select, .active-player, .auth-hint, .theme-hint, .chat-hint, .street-link, .transport-skip) {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: #00000006;
  border-color: #0000000c;
  box-shadow: var(--recess-shadow);
}
.spatial-room .track-select { border-bottom-color: rgba(var(--interface-ink), .065); box-shadow: inset 0 2px 6px #00000012; }
.spatial-room .track-select:hover { background: rgba(var(--interface-ink), .025); border-color: rgba(var(--interface-ink), .12); }
.spatial-room .track-item.is-playing .track-select {
  background: rgba(var(--tile-accent), .035); border-color: rgba(var(--tile-accent), .16);
  box-shadow: inset 2px 0 rgba(var(--tile-accent), .65), inset 0 3px 10px #00000021;
}
.spatial-room .room-toolbar, .spatial-room .catalog-heading { background: transparent; border-bottom-color: rgba(var(--interface-ink), .08); }
.spatial-room .release-content { box-shadow: inset 1px 0 rgba(var(--interface-ink), .09); }
.spatial-room .room-toolbar :is(.auth-hint, .theme-hint, .chat-hint) { border-color: #00000012; border-bottom-width: 1px; background: #00000006; box-shadow: var(--recess-shadow); }
.spatial-room .room-toolbar [aria-expanded="true"] { background: #0000000a; border-bottom-color: rgba(var(--interface-accent), .45); }
html[data-theme] .spatial-room .street-link { background: #00000006; border-color: rgba(var(--interface-ink), .1); box-shadow: var(--recess-shadow); }
.spatial-room .active-player .transport-play { color: rgb(var(--interface-ink)); background: #00000008; border-color: rgba(var(--interface-ink), .09); box-shadow: inset 0 3px 8px #00000035, inset 0 -1px 0 rgba(var(--interface-ink), .05); }
.spatial-room .active-player .transport-play:hover:not(:disabled) { color: rgb(var(--interface-accent)); background: #00000010; box-shadow: inset 0 3px 8px #00000035; }
.spatial-room .transport-skip:hover:not(:disabled) { background: #0000000c; }
.spatial-room :is(.auth-panel, .theme-panel, .chat-panel) {
  background: var(--theme-bg); border-color: rgba(var(--interface-ink), .1);
  box-shadow: inset 0 5px 18px #0000002b, inset 0 -1px 0 rgba(var(--interface-ink), .08);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.spatial-room :is(.theme-select, .auth-input, .chat-input, .auth-submit, .chat-send, .theme-random) {
  background: #00000008; color: rgb(var(--interface-ink)); border-color: rgba(var(--interface-ink), .12); box-shadow: inset 0 2px 5px #0000001c;
}
.spatial-room .theme-select option, .spatial-room .theme-select optgroup { background: var(--theme-bg); color: rgb(var(--interface-ink)); }
body.spatial-room.is-interlude.scene-energy .active-player { --interface-ink: 235, 239, 220; --interface-muted: 195, 202, 180; --interface-accent: 218, 243, 149; --ui-ink: 235, 239, 220; --theme-text-rgb: 235, 239, 220; }
body.spatial-room.is-interlude.scene-dawn .active-player :is(.now-playing-title, .active-track-artist, .transport-skip, .transport-play, .transport-time) { transition: color 10s, opacity 10s, background-color 10s; }
@media (max-width: 800px) and (min-height: 501px), (max-width: 500px) { .spatial-room .release-content { box-shadow: none; } }

/* Frosted, grain-filled tiles dissolve across the right-hand listening zone. */
.spatial-room .playlist-shell {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 33.333%, rgba(0,0,0,.48) 46.667%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 0%, #000 33.333%, rgba(0,0,0,.48) 46.667%, transparent 60%);
}
.spatial-room .track-select {
  isolation: isolate; border-radius: 22px;
  border: 1px solid rgba(var(--theme-text-rgb), .10);
  background: linear-gradient(125deg, rgba(var(--theme-text-rgb), .095), rgba(var(--theme-text-rgb), .035) 72%), rgba(var(--theme-panel-rgb), .34);
  backdrop-filter: blur(8px) saturate(.75);
  -webkit-backdrop-filter: blur(8px) saturate(.75);
  box-shadow: inset 0 1px 0 rgba(var(--theme-text-rgb), .10), inset 0 -1px 0 #0002;
}
.spatial-room .track-select::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: url('assets/player-glass-grain.svg') repeat; opacity: .75;
}
.spatial-room .track-item.is-playing .track-select {
  border-color: rgba(var(--theme-accent-rgb), .32);
  background: linear-gradient(115deg, rgba(var(--theme-accent-rgb), .13), rgba(var(--theme-text-rgb), .045)), rgba(var(--theme-panel-rgb), .34);
  box-shadow: inset 3px 0 rgba(var(--theme-accent-rgb), .72), inset 0 1px 0 rgba(var(--theme-text-rgb), .12);
}
@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .spatial-room .track-select { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}

.spatial-room .track-item { padding-top: 3px; padding-bottom: 3px; }
.spatial-room .track-select { height: calc(var(--tile-height) - 6px); margin-left: 8px; width: calc(100% - 8px); }

@media (max-width: 500px) {
  .spatial-room .track-item { padding-block: 2px; }
  .spatial-room .track-select { height: calc(var(--tile-height) - 4px); padding-block: 2px; }
  .spatial-room .track-meta { gap: 2px; }
  .spatial-room .track-title { line-height: 1.15; }
  .spatial-room .track-artist { font-size: 11px; line-height: 1.15; }
}

/* Tile outlines float in the glass; the right-hand space has no dividing rules. */
.spatial-room .release-content { box-shadow: none; border-color: transparent; }
.spatial-room :is(.room-toolbar, .catalog-heading) { border-color: transparent; box-shadow: none; }
.spatial-room .catalog-heading h2::after,
.spatial-room .track-art::after { content: none; }
.spatial-room .track-select { border: 1px solid rgba(var(--interface-ink), .12); box-shadow: none; }
.spatial-room .track-select:hover { border-color: rgba(var(--interface-ink), .24); }
.spatial-room .track-item.is-playing .track-select { border-color: rgba(var(--interface-accent), .32); box-shadow: none; }

/* Always-present conversation, resting just above the player. */
.spatial-room :is(.page, .hero, .release-stage, .release-card, .listening-intro) { pointer-events: none; }
.spatial-room :is(.release-content, .active-player, .logo-wrap) { pointer-events: auto; }
html[data-theme] body.spatial-room #chat-panel.chat-inline {
  --chat-row: clamp(12px, 1.65dvh, 16px);
  position: fixed; inset: auto auto var(--inline-chat-bottom, 164px) var(--inline-chat-left, 20px);
  width: var(--inline-chat-width, calc(50vw - 40px)); max-width: none;
  height: auto; max-height: none; display: flex; flex-direction: column; gap: 8px;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: none; animation: none; filter: none; opacity: 1; z-index: 1; pointer-events: none;
}
html[data-theme] .chat-inline::before, .chat-inline .chat-aura { display: none; }
html[data-theme] .chat-inline .chat-stream {
  display: block; height: calc(var(--chat-row) * 20); min-height: 0; max-height: none;
  padding: 0 4px; margin: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; transform: none; pointer-events: auto; overscroll-behavior: contain;
}
html[data-theme] .chat-inline .chat-line {
  display: block; margin: 0; padding: 0; min-height: var(--chat-row);
  font: 12px/var(--chat-row) ui-monospace, Consolas, monospace;
  color: rgba(var(--interface-ink), .78); text-align: left; overflow-wrap: anywhere;
  transform: none; text-shadow: none;
}
html[data-theme] .chat-inline .chat-meta {
  display: inline; width: auto; margin-right: 9px; font: inherit; letter-spacing: 0;
  text-transform: none; color: rgba(var(--interface-accent), .5);
}
.chat-inline .chat-line:nth-last-child(-n+2) { animation: chat-inline-drift 9s ease-in-out infinite; }
@keyframes chat-inline-drift { 50% { transform: translateY(-.4px); opacity: .88; } }
html[data-theme] .chat-inline .chat-compose { position: relative; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; border: 1px solid rgba(var(--interface-ink), .18); border-radius: 6px; background: rgba(var(--theme-panel-rgb), .42); pointer-events: auto; transition: border-color .2s, box-shadow .2s; }
html[data-theme] .chat-inline .chat-compose:focus-within { border-color: rgba(var(--interface-accent), .65); box-shadow: 0 0 0 2px rgba(var(--interface-accent), .06); }
.chat-inline .chat-prompt { position: absolute; left: 12px; color: rgb(var(--interface-accent)); font: 14px/1 Consolas, 'Cascadia Code', monospace; pointer-events: none; opacity: .8; }
html[data-theme] .chat-inline .chat-input { flex: 1; min-width: 0; height: 42px; min-height: 42px; padding: 0 10px 0 42px; border: 0; border-radius: 0; font: 13px Consolas, 'Cascadia Code', ui-monospace, monospace; letter-spacing: .015em; background: transparent; box-shadow: none; caret-color: rgb(var(--interface-accent)); }
html[data-theme] .chat-inline .chat-input:focus { outline: none; box-shadow: none; }
html[data-theme] .chat-inline .chat-input::placeholder { color: rgba(var(--interface-ink), .48); }
html[data-theme] .chat-inline .chat-send { width: 44px; min-width: 44px; height: 30px; min-height: 30px; margin-right: 5px; padding: 0; border: 0; border-left: 1px solid rgba(var(--interface-ink), .14); border-radius: 0; background: transparent; box-shadow: none; color: rgba(var(--interface-accent), .8); font: 20px/1 Consolas, monospace; }
html[data-theme] .chat-inline .chat-send:hover { background: rgba(var(--interface-accent), .08); color: rgb(var(--interface-accent)); }
@media (min-width: 801px) and (min-height: 541px) {
  body.spatial-room .logo-wrap.release-logo { top: 47%; width: 80%; left: 10%; }
  .spatial-room .listening-intro .label { top: 9vh; }
  .spatial-room .listening-intro h1 { top: calc(14vh + 44px); font-size: clamp(34px, 4.2vw, 86px); }
}
@media (max-width: 800px) and (min-height: 501px), (max-width: 500px) {
  .spatial-room .listening-intro h1 { top: 83px; font-size: clamp(24px, 7vw, 32px); }
  html[data-theme] body.spatial-room #chat-panel.chat-inline { --chat-row: 14px; }
  html[data-theme] .chat-inline .chat-stream { height: min(28dvh, 280px); }
  html[data-theme] .chat-inline .chat-input { font-size: 16px; }
  .spatial-room .release-content { padding-bottom: calc(min(28dvh, 280px) + 56px); }
}
@media (max-height: 540px) and (min-width: 501px) {
  html[data-theme] .chat-inline .chat-stream { height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .chat-inline .chat-line { animation: none !important; } }

@media (min-width: 801px) and (min-height: 541px) {
  .spatial-room .room-presence { top: 27%; left: auto; right: 24px; }
}

.mobile-sections { display: none; }
.spatial-room .track-fold { grid-template-columns: 58px minmax(0, 1fr); }
.spatial-room .track-art { width: 58px; font-size: 10px; letter-spacing: -.04em; }
@media (max-width: 800px) and (min-height: 501px), (max-width: 500px) { .spatial-room .track-fold { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; } .spatial-room .track-art { width: 52px; font-size: 9px; } }
@media (max-width: 800px) and (min-height: 501px), (max-width: 500px) {
  .spatial-room { --room-top: 212px; }
  body.spatial-room .logo-wrap.release-logo { top: 126px; }
  .mobile-sections { position: fixed; top: 172px; left: 12px; right: 12px; height: 32px; z-index: 28; display: flex; gap: 6px; }
  .mobile-sections button { flex: 1; border: 1px solid rgba(var(--interface-ink), .12); border-radius: 10px; background: transparent; color: rgba(var(--interface-ink), .6); font: 13px system-ui, sans-serif; cursor: pointer; }
  .mobile-sections button[aria-pressed="true"] { color: rgb(var(--interface-ink)); background: rgba(var(--theme-panel-rgb), .3); border-color: rgba(var(--interface-accent), .4); }
  .spatial-room .release-content { padding-bottom: 0; }
  body[data-mobile-section="chat"] .release-content { visibility: hidden; }
  html[data-theme] body.spatial-room #chat-panel.chat-inline { inset: 212px 12px calc(var(--dock-height) + var(--room-bottom) + 8px) 12px; width: auto; height: auto; z-index: 3; }
  html[data-theme] body.spatial-room #chat-panel.chat-inline[hidden] { display: none; }
  html[data-theme] .chat-inline .chat-stream { flex: 1; height: auto; min-height: 0; overflow-y: auto; }
  html[data-theme] .chat-inline .chat-compose { flex-shrink: 0; }
  html[data-theme] body.spatial-room[data-mobile-section="chat"] #chat-panel.chat-inline { bottom: max(calc(var(--dock-height) + var(--room-bottom) + 8px), calc(var(--mobile-keyboard, 0px) + 8px)); }
}

@media (max-width: 800px) and (min-height: 501px), (max-width: 500px) {
  .spatial-room { --catalog-row-min: 44; overflow-x: clip; }
  .spatial-room .playlist-shell { mask-image: none; -webkit-mask-image: none; }
  .mobile-sections { gap: 0; align-items: center; border: 1px solid rgba(var(--interface-ink), .14); border-radius: 10px; overflow: hidden; }
  .mobile-sections > span:not(.mobile-section-thumb) { position: relative; flex: 1; text-align: center; font: 13px system-ui, sans-serif; color: rgb(var(--interface-ink)); pointer-events: none; }
  .mobile-section-thumb { position: absolute; inset: 2px auto 2px 2px; width: calc(50% - 4px); border-radius: 7px; background: rgba(var(--theme-panel-rgb), .4); border: 1px solid rgba(var(--interface-accent), .38); transform: translateX(calc(var(--mobile-section-progress, 0) * 100%)); }
  #mobile-section-slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: none; }
  .mobile-sections:focus-within { outline: 1px solid rgba(var(--interface-accent), .7); outline-offset: 2px; }
  .spatial-room .release-content, body[data-mobile-section="chat"] .release-content { visibility: visible; }
  html[data-theme] body.spatial-room :is(.playlist-shell, .catalog-heading) { transform: translateX(calc(var(--mobile-section-progress, 0) * -100vw)); }
  .spatial-room .track-select { padding: 4px 10px; border-radius: 12px; }
  .spatial-room .track-meta { gap: 1px; }
  .spatial-room .track-title { font-size: 12px; line-height: 1.15; }
  .spatial-room .track-artist { font-size: 10px; line-height: 1.1; }
  html[data-theme] body.spatial-room #chat-panel.chat-inline { transform: translateX(calc((1 - var(--mobile-section-progress, 0)) * 100vw)); }
  .spatial-room:not(.mobile-section-dragging) :is(.playlist-shell, .catalog-heading, .mobile-section-thumb) { transition: transform .22s ease; }
  html[data-theme] body.spatial-room:not(.mobile-section-dragging) #chat-panel.chat-inline { transition: transform .22s ease; }
}
@media (prefers-reduced-motion: reduce) { .spatial-room :is(.release-content, .mobile-section-thumb, #chat-panel.chat-inline) { transition: none !important; } }

@media (min-width: 801px) and (min-height: 541px) {
  .spatial-room { --theme-menu-width: clamp(190px, 22vw, 300px); }
  html[data-theme] .spatial-room :is(.theme-panel, .auth-panel) { left: auto; right: calc(50vw + 18px); top: 78px; bottom: auto; width: var(--theme-menu-width); max-height: min(250px, 28vh); overflow-y: auto; z-index: 70 !important; }
  html[data-theme] .spatial-room .auth-panel { max-height: calc(100dvh - 100px); }
  .spatial-room .listening-intro :is(.label, h1) { transition: right .18s ease, font-size .18s ease; }
  .spatial-room:is(.is-theme-menu-open, .is-auth-menu-open) .listening-intro :is(.label, h1) { right: calc(var(--theme-menu-width) + 36px); }
  .spatial-room:is(.is-theme-menu-open, .is-auth-menu-open) .listening-intro h1 { font-size: clamp(18px, calc((50vw - var(--theme-menu-width) - 60px) / 8.4), 86px); }
}
/* Separate the pigment from nearby background shades without a broad glow. */
body.spatial-room .logo-vector { filter: contrast(1.12) drop-shadow(0 2px 2px #0009); }
body.spatial-room .reactive-logo { filter: brightness(var(--logo-brightness)) contrast(1.08); }
body.spatial-room .reactive-logo { animation-name: logoContrastBreath; }
@keyframes logoContrastBreath {
  0%, 100% { opacity: .7; }
  48% { opacity: .8; }
  53% { opacity: .5; }
  58% { opacity: .74; }
}

/* Counters follow the street sign in the toolbar, leaving its motion intact. */
.spatial-room .room-toolbar .visit-counter {
  position: static; inset: auto; display: grid; flex: 0 0 auto; gap: 3px;
  margin-left: 4px; min-width: 58px; color: rgba(var(--interface-ink), .65);
  font: 11px/1.2 Consolas, ui-monospace, monospace; font-variant-numeric: tabular-nums;
}
.spatial-room .visit-counter span { white-space: nowrap; }
.spatial-room .visit-counter b { margin-left: 3px; font-weight: 600; }
.chat-inline .chat-status { margin: 0; color: rgba(var(--interface-ink), .7); font: 12px/1.4 Consolas, ui-monospace, monospace; }
.chat-inline .chat-status[hidden] { display: none; }
.can-moderate .chat-line { cursor: pointer; touch-action: manipulation; }
.chat-inline .can-moderate .chat-line { animation: none; }
.chat-delete-dialog { max-width: min(360px, calc(100vw - 48px)); padding: 24px; border: 1px solid rgba(var(--interface-ink), .5); background: var(--theme-bg, #151515); color: rgb(var(--interface-ink)); font: 16px/1.5 Consolas, monospace; }
.chat-delete-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.chat-delete-dialog p { margin: 0 0 18px; }
#chat-delete-error:empty { display: none; }
.chat-delete-actions { display: flex; gap: 16px; justify-content: flex-end; }
.chat-delete-actions button { min-width: 72px; padding: 10px 16px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.chat-delete-actions button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.spatial-room .auth-panel [hidden] { display: none; }
html[data-theme] .spatial-room :is(.auth-panel, .theme-panel) {
  background: var(--theme-bg);
}
/* Reduced motion keeps a gentle opacity cycle instead of freezing the room. */
@keyframes ambient-logo-opacity { 0%,100% { opacity:1; } 50% { opacity:.92; } }
@keyframes ambient-light-opacity { 0%,100% { opacity:.3; } 50% { opacity:.4; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.spatial-room .reactive-logo { animation: ambient-logo-opacity 16s ease-in-out infinite !important; }
  html[data-theme] body.spatial-room .theme-light { animation: ambient-light-opacity 24s ease-in-out infinite alternate !important; }
}
/* Suspend ambient CSS motion only while the document is away. */
html[data-home-effects-suspended="true"] .spatial-room :is(.theme-light, .reactive-logo, .logo-vector, .logo-vector-core, .logo-vector-outline, .logo-ink-base, .logo-grain, .logo-grain *),
html[data-home-effects-suspended="true"] .spatial-room .logo-wrap::before,
html[data-home-effects-suspended="true"] .room-resident:not(.is-detonating) * {
  animation-play-state: paused !important;
}
@media (min-width: 801px) and (max-height: 540px) {
  html[data-theme] .spatial-room :is(.auth-panel, .theme-panel) {
    left: auto; right: calc(50vw + 10px); top: 58px; bottom: auto;
    width: min(300px, calc(50vw - 20px)); max-height: calc(100dvh - 74px);
    overflow-y: auto; z-index: 70 !important;
  }
}
@media (max-width: 500px) {
  .spatial-room .room-toolbar { gap: 4px; padding-inline: 8px; }
  .spatial-room .room-toolbar :is(.auth-hint, .theme-hint) { min-width: 42px; padding-inline: 8px; }
  .spatial-room .room-toolbar .visit-counter { min-width: 52px; margin-left: 2px; font-size: 10px; }
  html[data-theme] .spatial-room .street-link { padding-inline: 10px; font-size: 12px; gap: 7px; }
}

.theme-picker { position:relative; width:100%; }
.theme-picker-toggle { width:100%; padding:10px; border:1px solid rgba(var(--interface-ink),.22); border-radius:5px; background:rgba(var(--theme-panel-rgb),.65); color:rgb(var(--theme-text-rgb)); text-align:left; font:12px/1.4 Consolas,monospace; cursor:pointer; }
.theme-options { max-height:min(210px,35vh); overflow-y:auto; margin-top:5px; padding:7px; border:1px solid rgba(var(--theme-accent-rgb),.32); border-radius:6px; background:rgb(var(--theme-panel-rgb)); scrollbar-color:rgba(var(--theme-accent-rgb),.65) rgba(var(--theme-text-rgb),.06); scrollbar-width:thin; }
.theme-options[hidden], #theme-select[hidden] { display:none !important; }
.theme-options button { display:block; width:100%; padding:8px; border:0; border-radius:3px; background:transparent; color:rgb(var(--theme-text-rgb)); text-align:left; font:11px/1.4 Consolas,monospace; cursor:pointer; }
.theme-options button:is(:hover,:focus-visible,[aria-selected="true"]) { background:rgba(var(--theme-accent-rgb),.14); }
.theme-options::-webkit-scrollbar { width:5px; }
.theme-options::-webkit-scrollbar-track { background:rgba(var(--theme-text-rgb),.06); border-radius:8px; }
.theme-options::-webkit-scrollbar-thumb { background:rgba(var(--theme-accent-rgb),.65); border-radius:8px; border:1px solid rgb(var(--theme-panel-rgb)); }
html[data-theme] .spatial-room .theme-panel { max-height:calc(100dvh - 100px); }
body.spatial-room .logo-wrap.release-logo::before { inset:-85% -22%; background:radial-gradient(ellipse at 43% 49%, #02060888, #050a0a55 30%, #070c0c20 53%, transparent 72%); border-radius:50%; filter:none; }
@keyframes logo-darkness { 0%,19%,68%,100% { opacity:0; transform:scale(.92) rotate(-3deg); } 34%,48% { opacity:.7; transform:scale(1.07) rotate(2deg); } }
/* A theme update paints once; these two browser snapshots blend on the GPU. */
html.is-theme-crossfading .spatial-room .perception-visual { transition: none !important; }
html.is-theme-crossfading::view-transition { pointer-events: none; }
html.is-theme-crossfading::view-transition-group(root) { animation: none; }
html.is-theme-crossfading::view-transition-image-pair(root) { isolation: auto; }
html.is-theme-crossfading::view-transition-old(root),
html.is-theme-crossfading::view-transition-new(root) {
  pointer-events: none; mix-blend-mode: normal; animation-duration: 4000ms;
}
html.is-theme-crossfading::view-transition-old(root) {
  z-index: 2; animation: theme-snapshot-fade 4000ms ease both;
}
html.is-theme-crossfading::view-transition-new(root) { z-index: 1; animation: none; opacity: 1; }
@keyframes theme-snapshot-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.is-theme-crossfading::view-transition-old(root) { animation-duration: 0s; }
}

/* Keep catalogue labels aligned to the card edge, without ordinal badges. */
body.spatial-room .track-art { display:none; }
body.spatial-room .track-item .track-fold { grid-template-columns:minmax(0,1fr); gap:0; }
body.spatial-room .logo-vector-core { filter:none; }
body.spatial-room .logo-vector { filter:none; }
body.spatial-room .logo-grain { opacity:.15; }
body.spatial-room .logo-wrap.is-ink-rebuilt .logo-vector-core { opacity:1; }
@keyframes reactiveLogoBreath { 0%,100% {opacity:1;} 48% {opacity:.96;} 53% {opacity:.9;} 58% {opacity:1;} }
@keyframes logoVectorDissolve { 0%,37%,100% {opacity:1;} 44% {opacity:.94;} 47% {opacity:.78;} 51%,72% {opacity:1;} }

/* A short, quiet comic bubble above the resident. */
.resident-speech { position: fixed; z-index: 39; pointer-events: none; padding: 9px 14px; border: 1px solid rgba(var(--theme-accent-rgb), .4); border-radius: 15px 15px 15px 5px; background: rgb(var(--theme-panel-rgb)); color: rgb(var(--theme-text-rgb)); font: 13px/1.4 Consolas, ui-monospace, monospace; box-shadow: 0 4px 16px #0003; }
.resident-speech[hidden] { display: none; }
.resident-speech::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1px solid rgba(var(--theme-accent-rgb), .4); border-bottom: 1px solid rgba(var(--theme-accent-rgb), .4); transform: rotate(45deg); }

/* Pinned palette controls change color only when the live room transition ends. */
#theme-panel.is-palette-pinned, #theme-panel.is-palette-pinned * { transition: none !important; }

/* Shared room design for every palette and every scene. Keep component styling here. */
@media (min-width: 801px) and (min-height: 541px) {
  html[data-theme] body.spatial-room {
    --catalog-edge-gap: clamp(12px, 1.2vw, 36px);
    --reference-play-size: clamp(36px, min(4.8vw, 7dvh), 156px);
    --reference-icon-scale: clamp(1, min(calc(100vw / 1150px), calc(100dvh / 750px)), 3);
  }
  html[data-theme] body.spatial-room .release-card { grid-template-columns: 60.4% 39.6%; }
  html[data-theme] body.spatial-room .release-content { height: 81dvh; }
  html[data-theme] body.spatial-room .catalog-heading { flex-basis: max(64px, 11dvh); padding: 0 2vw .7dvh; }
  html[data-theme] body.spatial-room .playlist-shell {
    --catalog-bottom-space: 0;
    mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,.68) 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,.68) 84%, transparent 100%);
  }
  html[data-theme] body.spatial-room .track-item { padding: 0; }
  html[data-theme] body.spatial-room .track-select {
    height: calc(var(--tile-height) - .75dvh); width: 100%; margin: 0;
    padding: .7dvh 2.1vw; border-radius: clamp(10px, 1.35vw, 46px);
    background: linear-gradient(110deg, rgba(var(--theme-text-rgb), .07), rgba(var(--theme-text-rgb), .014)), rgba(var(--theme-panel-rgb), .24);
    border: 1px solid rgba(var(--theme-text-rgb), .12);
    box-shadow: inset 0 1px 0 rgba(var(--theme-text-rgb), .055);
  }
  html[data-theme] body.spatial-room .track-select::before { opacity: .24; }
  html[data-theme] body.spatial-room .track-item.is-playing .track-select {
    background: linear-gradient(110deg, rgba(var(--theme-accent-rgb), .21), rgba(var(--theme-panel-rgb), .2));
    border-color: rgba(var(--theme-accent-rgb), .35); box-shadow: inset 0 1px 0 rgba(var(--theme-accent-rgb), .12);
  }
  html[data-theme] body.spatial-room .track-meta { gap: .45dvh; }
  html[data-theme] body.spatial-room .track-title { font-size: clamp(14px, min(1.48vw, 2.6dvh), 50px); line-height: 1.13; font-weight: 550; }
  html[data-theme] body.spatial-room .track-artist { font-size: clamp(10px, min(1.05vw, 1.8dvh), 35px); line-height: 1.1; letter-spacing: .1em; opacity: .75; }
  html[data-theme] body.spatial-room .listening-intro h1 {
    top: 23dvh; right: var(--catalog-edge-gap); width: auto; max-width: 56vw;
    text-align: right; font-size: clamp(34px, 5vw, 170px); line-height: 1.1;
  }
  html[data-theme] body.spatial-room #logo-wrap { left: 50%; top: 49%; width: 79.8%; transform: translate(-50%, -50%); }
  html[data-theme] body.spatial-room #active-player {
    left: 2.5vw; right: auto; top: 85dvh; bottom: auto; width: 73vw;
    height: 13dvh; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    display: block;
  }
  html[data-theme] body.spatial-room #active-player .active-track-copy {
    position: absolute; left: 0; top: .9dvh; width: 25vw; gap: .65dvh;
  }
  html[data-theme] body.spatial-room #active-player .now-playing-title { font-size: clamp(16px, min(2.3vw, 3.5dvh), 72px); line-height: 1.16; max-height: none; padding-bottom: .12em; }
  html[data-theme] body.spatial-room #active-player .active-track-artist { font-size: clamp(10px, min(1.05vw, 1.8dvh), 35px); line-height: 1.2; letter-spacing: .025em; }
  html[data-theme] body.spatial-room #active-player .transport {
    position: absolute; left: 26.5vw; top: 0; width: 41.4vw;
    grid-template-columns: 1fr var(--reference-play-size) 1fr;
    grid-template-rows: var(--reference-play-size) max(24px, min(3vw, 4dvh)); gap: 0 2.2vw;
  }
  html[data-theme] body.spatial-room #active-player .transport-play {
    width: var(--reference-play-size); height: var(--reference-play-size); min-width: 0; min-height: 0;
    border-radius: 50%; border: 1px solid rgba(var(--theme-text-rgb), .18);
    color: rgb(var(--theme-text-rgb)); background: rgba(var(--theme-panel-rgb), .16); box-shadow: none;
  }
  html[data-theme] body.spatial-room #active-player .transport-play:hover:not(:disabled) { background: rgba(var(--theme-accent-rgb), .12); border-color: rgba(var(--theme-accent-rgb), .5); }
  html[data-theme] body.spatial-room #active-player .transport-skip {
    width: 4vw; min-width: 32px; height: var(--reference-play-size); min-height: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  html[data-theme] body.spatial-room #active-player :is(.play-mark, .skip-mark) { transform: scale(var(--reference-icon-scale)); }
  html[data-theme] body.spatial-room #active-player .play-mark[data-state="paused"]::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
  html[data-theme] body.spatial-room #active-player .skip-mark::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
  html[data-theme] body.spatial-room #active-player .transport-seek-field { margin-inline: 4vw; height: max(24px, min(3vw, 4dvh)); }
  html[data-theme] body.spatial-room #active-player .transport-time { font-size: clamp(9px, 1vw, 30px); }
  html[data-theme] body.spatial-room #active-player .volume-control { position: absolute; left: 69.5vw; top: 1.5dvh; width: 5vw; opacity: .65; }
  html[data-theme] body.spatial-room #active-player .playback-status { bottom: 0; left: 0; width: 100%; }
  html[data-theme] body.spatial-room #chat-panel.chat-inline {
    left: 2vw; right: auto; bottom: 17.3dvh; width: 54vw;
  }
  html[data-theme] body.spatial-room .chat-inline .chat-compose { border-radius: .6vw; background: rgba(var(--theme-panel-rgb), .18); }
  html[data-theme] body.spatial-room .chat-inline .chat-input { height: max(42px, 6dvh); font-size: clamp(12px, 1.35vw, 40px); padding-left: 4vw; }
  html[data-theme] body.spatial-room .chat-inline .chat-prompt { left: 1.2vw; font-size: clamp(14px, 1.5vw, 44px); }
  html[data-theme] body.spatial-room .chat-inline .chat-send { width: 4vw; min-width: 40px; height: max(32px, 4dvh); font-size: clamp(20px, 2vw, 56px); border-left: 0; }
  html[data-theme] body.spatial-room .room-toolbar { width: 39.6%; padding-left: 0; }
  html[data-theme] body.spatial-room :is(.theme-panel, .auth-panel) {
    right: calc(39.6vw + var(--catalog-edge-gap)); left: auto;
    top: max(78px, 11dvh); width: var(--theme-menu-width);
  }
  html[data-theme] body.spatial-room .listening-intro .label { right: var(--catalog-edge-gap); }
  html[data-theme] body.spatial-room:is(.is-theme-menu-open, .is-auth-menu-open) .listening-intro :is(h1, .label) {
    right: calc(var(--theme-menu-width) + var(--catalog-edge-gap) * 2);
  }
  html[data-theme] body.spatial-room:is(.is-theme-menu-open, .is-auth-menu-open) .listening-intro h1 {
    font-size: min(clamp(22px, calc((60.4vw - var(--theme-menu-width) - var(--catalog-edge-gap) * 2 - 24px) / 8.4), 170px), clamp(24px, 3.5vw, 119px));
  }
}

/* Local code typography retains each artist's original spelling and case. */
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
html[data-theme] body.spatial-room :is(.track-artist, #active-player .active-track-artist) {
  font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  font-weight: 400; text-transform: none; letter-spacing: .025em;
}
/* A recycled cycle must not inherit a browser's animated scroll behavior. */
.spatial-room .track-list { scroll-behavior: auto; overflow-anchor: none; }

html[data-theme] body.spatial-room.is-chat-open::after,
html[data-theme] body.spatial-room.is-chat-open .theme-light { animation-play-state: running; }

/* Explicit compact width is shared too, so changing its scene anchor cannot
   trigger shrink-to-fit and silently change the internal grid. */
@media (min-width: 501px) and (max-height: 540px) {
  html[data-theme] body.spatial-room #active-player { width: calc(50vw - 20px); }
}

/* Scene choreography only: reuse the complete player above, with no second set
   of typography, controls, cards or internal grids to maintain. */
html[data-theme] body.spatial-room.is-interlude.scene-energy {
  --scene-logo-width: min(58vw, 1250px);
  --scene-logo-top: 46dvh;
  --scene-player-scale: .7;
}
html[data-theme] body.spatial-room.is-interlude.scene-energy #logo-wrap {
  position: fixed; left: 50%; top: var(--scene-logo-top); width: var(--scene-logo-width); height: auto;
  margin: 0; transform: translate(-50%, -50%);
}
html[data-theme] body.spatial-room.is-interlude.scene-energy #active-player {
  left: 50%; right: auto; top: calc(var(--scene-logo-top) + var(--scene-logo-width) * .1002 + 28px); bottom: auto;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--scene-player-scale));
}
@media (max-width: 800px), (max-height: 540px) {
  html[data-theme] body.spatial-room.is-interlude.scene-energy {
    --scene-logo-width: 80vw; --scene-logo-top: 36dvh; --scene-player-scale: 1;
  }
}
@media (max-width: 500px) {
  html[data-theme] body.spatial-room.is-interlude.scene-energy {
    --scene-logo-width: 90vw; --scene-logo-top: 42dvh;
  }
}

/* Fade only the message history; the composer remains fully readable. */
html[data-theme] .chat-inline .chat-stream {
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.55) 55%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.55) 55%, #000 100%);
}
html[data-theme] .spatial-room .auth-kicker { color: rgb(var(--theme-accent-rgb)); }
html[data-theme] .spatial-room .auth-status { color: rgba(var(--theme-text-rgb), .8); overflow-wrap: anywhere; }

/* Change only the control artwork; retain the shared player layout and palette. */
html[data-theme] body.spatial-room #active-player :is(.transport-play, .transport-skip) {
  border-color: transparent; background: transparent; box-shadow: none;
  color: rgb(var(--theme-text-rgb));
}
html[data-theme] body.spatial-room #active-player :is(.transport-play, .transport-skip):hover:not(:disabled) {
  background: transparent; border-color: transparent; box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(var(--theme-text-rgb), .25));
}
html[data-theme] body.spatial-room #active-player :is(.play-mark, .skip-mark) {
  display: block; width: min(40px, 100%); height: min(40px, 100%);
  background: currentColor; rotate: none; transform: none;
  mask: url('assets/player-tags/next.svg') center / contain no-repeat;
}
html[data-theme] body.spatial-room #active-player :is(.play-mark, .skip-mark) { scale: .55; }
html[data-theme] body.spatial-room #active-player .skip-mark-previous { transform: scaleX(-1); }
html[data-theme] body.spatial-room #active-player .play-mark[data-state="playing"] { mask-image: url('assets/player-tags/pause.svg'); }
html[data-theme] body.spatial-room #active-player .play-mark[data-state="paused"] { mask-image: url('assets/player-tags/play.svg'); }
html[data-theme] body.spatial-room #active-player :is(.play-mark, .skip-mark)::before,
html[data-theme] body.spatial-room #active-player :is(.play-mark, .skip-mark)::after { content: none; }
html[data-theme] body.spatial-room #active-player .volume-control::before {
  width: 16px; height: 20px; scale: 2.5; transform-origin: right center; clip-path: none; background: rgb(var(--theme-text-rgb));
  mask: url('assets/player-tags/speaker.svg') center / contain no-repeat;
}
@media (min-width: 801px) and (min-height: 541px) {
  html[data-theme] body.spatial-room #active-player :is(.play-mark, .skip-mark) {
    width: min(var(--reference-play-size), 100%); height: var(--reference-play-size);
  }
}

/* Static chalk rails share one texture and one hand-drawn cross in every scene. */
html[data-theme] body.spatial-room #active-player .transport-seek-field::before,
html[data-theme] body.spatial-room #active-player .volume-rail {
  height: 6px; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(to right, rgb(var(--theme-accent-rgb)) var(--seek, 80%), rgba(var(--theme-text-rgb), .38) var(--seek, 80%));
  mask: url('assets/player-tags/chalk-line.svg') left center / 128px 6px repeat-x;
  animation: none; transition: none; pointer-events: none;
}
html[data-theme] body.spatial-room #active-player .volume-rail { grid-area: 1 / 2; align-self: center; width: 100%; }
html[data-theme] body.spatial-room #active-player #track-volume { grid-area: 1 / 2; z-index: 1; }
html[data-theme] body.spatial-room #active-player .volume-control:has(#track-volume[hidden]) .volume-rail { display: none; }
html[data-theme] body.spatial-room #active-player :is(.transport-progress, #track-volume) { animation: none; transition: none; }
html[data-theme] body.spatial-room #active-player .transport-progress { height: 100%; margin: 0; padding: 0; box-sizing: border-box; }
html[data-theme] body.spatial-room #active-player :is(.transport-progress, #track-volume)::-webkit-slider-runnable-track { height: 6px; background: transparent; border: 0; }
html[data-theme] body.spatial-room #active-player :is(.transport-progress, #track-volume)::-moz-range-track { height: 6px; background: transparent; border: 0; }
html[data-theme] body.spatial-room #active-player :is(.transport-progress, #track-volume)::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 24px; margin-top: -9px;
  border: 0; border-radius: 0; background: rgb(var(--theme-text-rgb));
  mask: url('assets/player-tags/chalk-cross.svg') center / contain no-repeat;
  box-shadow: none; transform: none; animation: none; transition: none;
}
html[data-theme] body.spatial-room #active-player :is(.transport-progress, #track-volume)::-moz-range-thumb {
  appearance: none; width: 18px; height: 24px;
  border: 0; border-radius: 0; background: rgb(var(--theme-text-rgb));
  mask: url('assets/player-tags/chalk-cross.svg') center / contain no-repeat;
  box-shadow: none; transform: none; animation: none; transition: none;
}
html[data-theme] body.spatial-room #active-player .transport-time {
  font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* White shards invert the actual logo beneath them instead of washing it out. */
html[data-theme] body.spatial-room .logo-wrap.release-logo:not(.is-assembled) .logo-particles {
  mix-blend-mode: difference; filter: none;
}
html[data-theme] body.spatial-room .logo-wrap.release-logo:not(.is-assembled) .logo-particle {
  opacity: var(--shard-opacity, .82); filter: brightness(0) invert(1);
}

/* Crisp contours, restrained light and continuous near/middle/far separation. */
html[data-theme] body.spatial-room .logo-wrap.release-logo { isolation: isolate; }
html[data-theme] body.spatial-room .logo-wrap.release-logo::after { background: none; filter: none; }
html[data-theme] body.spatial-room .logo-wrap.release-logo.is-charging { filter: none; }
html[data-theme] body.spatial-room .reactive-logo { filter: brightness(clamp(0, var(--logo-brightness), 1)) contrast(1.03); }
html[data-theme] body.spatial-room .logo-vector { filter: none; }
html[data-theme] body.spatial-room .logo-vector-ghost { opacity: .035; }
html[data-theme] body.spatial-room .logo-vector-outline { animation: none; opacity: calc(.09 + var(--logo-high) * .12); }
html[data-theme] body.spatial-room .logo-vector-slices { mix-blend-mode: normal; opacity: calc(.18 + var(--logo-high) * .22); }
html[data-theme] body.spatial-room .logo-ripples { filter: none; opacity: .78; z-index: 1; }
html[data-theme] body.spatial-room .logo-reactive-canvas { filter: none; mix-blend-mode: normal; opacity: .65; z-index: -1; }
html[data-theme] body.spatial-room .logo-symbol-echo { filter: none; mix-blend-mode: normal; }
html[data-theme] body.spatial-room .logo-wrap.release-logo:not(.is-assembled) .reactive-logo { filter: brightness(calc(clamp(0, var(--logo-brightness), 1) * .94)); }
@keyframes logoContrastBreath {
  0%, 100% { opacity: .8; }
  48% { opacity: .88; }
  53% { opacity: .74; }
  58% { opacity: .83; }
}
html[data-theme] body.spatial-room .logo-storm-sky { z-index: 0; }
html[data-theme] body.spatial-room .logo-storm-bolts { z-index: 1; filter: drop-shadow(0 0 3px #9baeff66); }
html[data-theme] body.spatial-room .logo-storm-piece { z-index: 2; }

/* Fine chalk corner marks follow the heading when a menu pushes it aside. */
html[data-theme] body.spatial-room .listening-intro h1::before {
  content: ''; position: absolute; inset: -.18em -.16em; pointer-events: none;
  background: rgb(var(--theme-accent-rgb)); opacity: .65;
  mask: url('assets/player-tags/heading-corners.svg') center / 100% 100% no-repeat;
}
.theme-options button[aria-selected="true"] { box-shadow: inset 2px 0 currentColor; }
body.is-debug-interlude .scene-curtain,
body.is-debug-interlude .scene-digits,
body.is-debug-interlude :is(.hero-intro, .listening-intro, .catalog-heading, .active-player, .track-item) {
  transition-duration: .3s !important;
}

/* Reuse the heading's drawn corners, with a crisp offset for shallow relief. */
html[data-theme] body.spatial-room .track-select {
  border-color: transparent; box-shadow: none;
}
html[data-theme] body.spatial-room .track-select::before {
  content: ''; position: absolute; inset: 0; width: auto; height: auto;
  border: 0; border-radius: 0; transform: none; pointer-events: none;
  background: rgba(var(--theme-text-rgb), .48); opacity: 1;
  mask: url('assets/player-tags/playlist-double-contour.svg') center / 100% 100% no-repeat;
}
html[data-theme] body.spatial-room .track-item.is-playing .track-select {
  border-color: transparent; box-shadow: none;
}
html[data-theme] body.spatial-room .track-item.is-playing .track-select::before,
html[data-theme] body.spatial-room .track-select:hover::before {
  background: rgb(var(--theme-accent-rgb));
}
.room-resident[data-state="angry"] .resident-body { transform: scale(1.1); }
.room-resident[data-state="angry"] .resident-face i { width: 7px; height: 2px; border-radius: 0; }
.room-resident[data-state="angry"] .resident-face i:first-child { transform: rotate(25deg); }
.room-resident[data-state="angry"] .resident-face i:last-child { transform: rotate(-25deg); }
.room-resident[data-state="angry"] .resident-mark { opacity: 0; }
html[data-theme] body.spatial-room .chat-inline .chat-compose {
  border-color: transparent; border-radius: 0; box-shadow: none;
  background: rgba(var(--theme-panel-rgb), .18);
}
html[data-theme] body.spatial-room .chat-inline .chat-compose::before,
html[data-theme] body.spatial-room .chat-inline .chat-compose::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background: rgb(var(--theme-accent-rgb));
  mask: url('assets/player-tags/heading-corners.svg') center / 100% 100% no-repeat;
  transition: background-color .2s ease;
}
html[data-theme] body.spatial-room .chat-inline .chat-compose::before {
  inset: 0 -2px -2px 0;
  background: rgba(var(--theme-text-rgb), .35);
}
html[data-theme] body.spatial-room .chat-inline .chat-compose:focus-within {
  border-color: transparent; box-shadow: none;
}
html[data-theme] body.spatial-room .chat-inline .chat-compose:focus-within::after {
  background: rgb(var(--theme-accent-rgb));
}

/* Explicit, visible material motion; the same animations serve automatic and debug playback. */
html[data-theme] body.spatial-room .logo-wrap.release-logo::before {
  background: rgb(var(--theme-accent-rgb)); border-radius: 0;
  mask: url('assets/logo-ink-blot.svg') center / 100% 100% no-repeat;
  inset: -32% -8%; filter: none;
}
@keyframes logo-darkness {
  0%,19%,68%,100% { opacity:0; transform:scale(.72) rotate(-5deg); }
  23% { opacity:.18; transform:scale(.96) rotate(-1deg); }
  34%,48% { opacity:.28; transform:scale(1.02) rotate(1deg); }
}
@keyframes logoVectorDissolve {
  0%,37%,72%,100% { opacity:1; }
  43% { opacity:.8; }
  49%,53% { opacity:.6; }
  63% { opacity:.9; }
}
@keyframes logoContrastBreath {
  0%,100% { transform:scale(1); opacity:1; }
  25% { transform:translateY(-1px) scale(1.012,1.018); opacity:1; }
  50% { transform:translateY(-2px) scale(1.025,1.035); opacity:1; }
  75% { transform:translateY(-1px) scale(1.012,1.018); opacity:1; }
}
html[data-theme] body.spatial-room .reactive-logo { animation-duration:6s; }
html[data-theme] body.spatial-room .logo-veins { display:none; }
html[data-theme] body.spatial-room .logo-wrap[data-material-preview="breath"] .logo-ripples { visibility:hidden; }
html[data-theme] .sky-clouds {
  color: rgb(var(--theme-text-rgb)); mix-blend-mode:normal;
  mask-image:radial-gradient(ellipse at 45% 35%, #000 25%, transparent 75%);
}
@keyframes sky-cloud-passage {
  0% { opacity:0; transform:translate(-9%, -8%) scale(.94); }
  5% { opacity:.3; }
  25% { opacity:.48; }
  55% { opacity:.42; }
  100% { opacity:0; transform:translate(12%, 4%) scale(1.08); }
}
html[data-theme] body.spatial-room .logo-wrap.release-logo:not(.is-assembled) .logo-particles {
  z-index:5; opacity:1; mix-blend-mode:difference;
}
html[data-theme] body.spatial-room .logo-wrap.release-logo:not(.is-assembled) .logo-particle {
  opacity:1; filter:brightness(0) invert(1);
  mix-blend-mode:difference;
  transition: transform 4400ms cubic-bezier(.16,.72,.12,1);
}
html[data-theme] body.spatial-room .logo-wrap.release-logo:not(.is-assembled) .reactive-logo { opacity:.82; }
html[data-theme] body.spatial-room .logo-ripples { opacity:1; z-index:4; filter:none; }

/* Each material gets a clean stage; no common dotted contour or competing fragments. */
html[data-theme] body.spatial-room .logo-wrap[data-material-preview] :is(.logo-ripples,.logo-reactive-canvas,.logo-symbol-echo,.logo-grain,.logo-vector-slices,.logo-vector-outline,.logo-vector-ghost,.logo-particles) { visibility:hidden; }
html[data-theme] body.spatial-room .logo-wrap[data-material-preview]::before { visibility:hidden; }
html[data-theme] body.spatial-room .logo-wrap[data-material-preview="dissolve"] .reactive-logo { visibility:hidden; }
.logo-material-preview { position:absolute;left:-8%;top:-30%;width:116%;height:160%;z-index:4;pointer-events:none; }
html[data-theme] body.spatial-room .logo-wrap[data-material-preview="ink"] .logo-material-preview { z-index:0; }

/* Ink restored from HEAD; only the mask override is cleared. */
html[data-theme] body.spatial-room .logo-wrap.release-logo::before {
  inset:-85% -22%; background:radial-gradient(ellipse at 43% 49%, #02060888, #050a0a55 30%, #070c0c20 53%, transparent 72%);
  border-radius:50%; filter:none; mask:none;
}
@keyframes logo-darkness {
  0%,19%,68%,100% { opacity:0; transform:scale(.92) rotate(-3deg); }
  34%,48% { opacity:.7; transform:scale(1.07) rotate(2deg); }
}
html[data-theme] body.spatial-room .logo-wrap[data-material-preview="ink"]::before { visibility:visible; }
html[data-theme] body.spatial-room .logo-wrap[data-material-preview="breath"] .reactive-logo { visibility:hidden; }
.logo-material-preview { left:-20%;top:-100%;width:140%;height:300%; }

html[data-theme] body.spatial-room .logo-wrap:is([data-material-preview="breath"],[data-material-preview="dissolve"]) .logo-ink-base { visibility:hidden; }

/* Restore the blurred ink texture from before the hard-edge experiment. */
html[data-theme] body.spatial-room .logo-wrap.release-logo::before {
  inset:-85% -22%;border-radius:0;background:rgb(var(--theme-accent-rgb));
  mask:url('assets/logo-ink-blot.svg') center / 100% 100% no-repeat;filter:none;
}
.logo-material-preview { left:-16.854%;top:-65.421%;width:133.708%;height:230.841%;overflow:visible; }
html[data-theme] body.spatial-room .logo-wrap:is([data-material-preview="breath"],[data-material-preview="dissolve"]) .reactive-logo { opacity:0 !important; }

/* Clouds are a separate background layer, including during scene transitions. */
body.is-interlude .sky-clouds { visibility:visible; }
@media (max-width:800px), (pointer:coarse) {
  html[data-theme] body.spatial-room .track-select::before { background:rgba(var(--theme-text-rgb),.19); }
  html[data-theme] body.spatial-room .track-select:hover::before { background:rgba(var(--theme-text-rgb),.24); }
  html[data-theme] body.spatial-room .track-item.is-playing .track-select::before { background:rgba(var(--theme-accent-rgb),.44); }
  html[data-theme] body.spatial-room .track-select { background:rgba(var(--theme-panel-rgb),.12); box-shadow:none; }
  html[data-theme] body.spatial-room .logo-wrap.release-logo::before { display:none; }
  html[data-theme] body.spatial-room .reactive-logo { animation: reactiveLogoBreath 11s ease-in-out infinite; }
  html[data-theme] body.spatial-room .logo-vector { animation: logoVectorDissolve 10.5s ease-in-out infinite; }
  html[data-theme] body.spatial-room .logo-grain rect { animation:none; }
  html[data-theme] body.spatial-room :is(.logo-ripples,.logo-symbol-echo,.logo-vector-slices) { display:none; }
  .mobile-logo-shards { position:absolute;inset:0;z-index:5;pointer-events:none; }
  .mobile-logo-shards i { position:absolute;background-image:url('assets/logo-wordmark.svg');background-repeat:no-repeat;will-change:transform,opacity; }
}
@media (max-width:800px) and (min-height:501px), (max-width:500px) {
  html[data-theme] .mobile-sections { left:12px;right:auto;width:148px;height:26px;border:0;border-radius:0;overflow:visible;background:none; }
  html[data-theme] .mobile-sections > span:not(.mobile-section-thumb) { font:10px 'JetBrains Mono',monospace;color:rgba(var(--theme-text-rgb),.5); }
  html[data-theme] .mobile-section-thumb { inset:auto auto 2px 0;width:74px;height:2px;border:0;border-radius:0;background:rgba(var(--theme-accent-rgb),.6);mask:url('assets/player-tags/chalk-line.svg') center / 100% 100% no-repeat; }
  html[data-theme] #mobile-section-slider { top:-7px;height:40px; }
}

/* Ink darkens the scene instead of adding light. */
html[data-theme] body.spatial-room .logo-wrap.release-logo::before {
  background:#090d12;mix-blend-mode:multiply;
}
body.spatial-room.is-interlude.scene-peek .track-list .track-item.scene-peek-track {
  transition:opacity .65s ease var(--return-delay,0ms) !important;
}

.breath-screen {position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:40;}

/* Dark ink on light surfaces, brighter translucent pigment on dark surfaces. */
html[data-theme] body.spatial-room .logo-wrap.release-logo::before {
  background:rgba(var(--theme-text-rgb),.9);mix-blend-mode:normal;
}
html[data-theme="cobalt-tile"] body.spatial-room .logo-wrap.release-logo::before { background:#142344;mix-blend-mode:multiply; }

.storm-inversion-shards {position:fixed;inset:0;z-index:41;pointer-events:none;overflow:hidden;mix-blend-mode:difference;}
.storm-inversion-shards .logo-storm-piece {opacity:1;}
html[data-theme] body.spatial-room .logo-wrap.release-logo::before {
  background:rgb(var(--theme-accent-rgb));filter:brightness(1.35);mix-blend-mode:screen;
}
html[data-theme="cobalt-tile"] body.spatial-room .logo-wrap.release-logo::before {background:#142344;filter:none;mix-blend-mode:multiply;}

/* Ink is black in every palette, with no lightening blend or brightness filter. */
html[data-theme] body.spatial-room .logo-wrap.release-logo::before {background:#000;filter:none;mix-blend-mode:multiply;}
html[data-logo-snapshot]::view-transition-old(root) {
  mask:url('assets/logo-wordmark.svg') var(--logo-snapshot-x) var(--logo-snapshot-y) / var(--logo-snapshot-w) var(--logo-snapshot-h) no-repeat;
  animation:logo-background-dissolve 3.2s ease-in-out both;
}
html[data-logo-snapshot]::view-transition-new(root) {animation:none;}
@keyframes logo-background-dissolve {0%,99%{opacity:1;filter:url(#snapshot-ink-erosion);}100%{opacity:0;filter:url(#snapshot-ink-erosion);}}

/* Compact mobile composition: header, exactly seven rows, then the player. */
@media (max-width:800px) and (min-height:501px), (max-width:500px) {
  html[data-theme] body.spatial-room { --room-top:clamp(140px,26dvh,190px); --dock-height:118px; --room-bottom:calc(18px + env(safe-area-inset-bottom,0px)); --tile-gap:0px; }
  html[data-theme] body.spatial-room .hero { padding-top:var(--room-top); }
  html[data-theme] body.spatial-room .room-toolbar { height:48px; padding:0 10px; gap:4px; }
  html[data-theme] body.spatial-room .room-toolbar :is(.auth-hint,.theme-hint) { min-width:36px;padding-inline:7px;font-size:10px; }
  html[data-theme] body.spatial-room .hero-intro { left:35%;top:31px; }
  html[data-theme] body.spatial-room .listening-intro .label { position:fixed;left:35%;right:auto;top:18px;font-size:6px; }
  html[data-theme] body.spatial-room .listening-intro h1 { top:calc(var(--room-top) - 82px);right:10px;left:auto;max-width:calc(100vw - 140px);font-size:clamp(18px,6vw,32px);line-height:1.1; }
  html[data-theme] body.spatial-room .mobile-sections { top:calc(var(--room-top) - 82px);left:10px;width:120px;height:26px; }
  html[data-theme] body.spatial-room .mobile-section-thumb { width:60px; }
  html[data-theme] body.spatial-room #logo-wrap { left:10px;top:calc(var(--room-top) - 52px);width:60%;max-width:310px;transform:none; }
  html[data-theme] body.spatial-room .catalog-heading { position:fixed;top:calc(var(--room-top) - 108px);right:10px;height:12px;padding:0; }
  html[data-theme] body.spatial-room .catalog-heading h2 { display:none; }
  html[data-theme] body.spatial-room .catalog-heading .ours { font-size:7px;white-space:nowrap;width:auto;max-width:none; }
  html[data-theme] body.spatial-room .playlist-shell { --catalog-bottom-space:0; --catalog-slots:7; margin:0 10px;width:calc(100% - 20px); }
  html[data-theme] body.spatial-room .track-item { padding:2px 0; }
  html[data-theme] body.spatial-room .track-select { margin:0;width:100%;height:calc(var(--tile-height) - 4px);padding:2px 10px; }
  html[data-theme] body.spatial-room .track-meta { gap:1px; }
  html[data-theme] body.spatial-room .track-title { font-size:12px;line-height:1.15; }
  html[data-theme] body.spatial-room .track-artist { font-size:11px;line-height:1.1; }
  html[data-theme] body.spatial-room #active-player { height:var(--dock-height);padding:6px 14px;grid-template-rows:28px 72px;gap:4px 12px; }
  html[data-theme] body.spatial-room #active-player .transport { grid-template-rows:44px 28px; }
  html[data-theme] body.spatial-room #active-player :is(.transport-seek-field,.transport-progress) { height:28px; }
  html[data-theme] body.spatial-room #chat-panel.chat-inline { top:var(--room-top); }
}
@media (max-width:360px) {
  html[data-theme] body.spatial-room .street-link { font-size:12px;padding-inline:8px;gap:6px; }
  html[data-theme] body.spatial-room .room-toolbar .visit-counter { min-width:42px;font-size:8px; }
  html[data-theme] body.spatial-room .listening-intro .label { font-size:5px; }
  html[data-theme] body.spatial-room .hero-intro .topline { font-size:5px; }
}

@media (max-width:800px) and (min-height:501px), (max-width:500px) {
  html[data-theme] body.spatial-room .room-toolbar { height:38px;align-items:center; }
  html[data-theme] body.spatial-room .room-toolbar :is(.auth-hint,.theme-hint) { height:26px;min-height:26px;min-width:32px;padding-inline:6px;font-size:9px; }
  html[data-theme] body.spatial-room .room-toolbar .street-return { margin-top:0; }
  html[data-theme] body.spatial-room .street-link { min-height:26px;height:26px;padding:0 8px;font-size:12px; }
  html[data-theme] body.spatial-room .catalog-heading { left:auto;right:10px;width:max-content;min-width:max-content;max-width:none;display:block; }
  html[data-theme] body.spatial-room .catalog-heading .ours { display:block;white-space:nowrap;word-break:normal;overflow-wrap:normal; }
}

/* Effect geometry shares the live logo surface, including its inset and perspective. */
html[data-theme] body.spatial-room .logo-wrap:is([data-material-preview="breath"],[data-material-preview="dissolve"]) .reactive-logo { visibility:visible;opacity:var(--material-surface-opacity,1) !important; }
html[data-theme] body.spatial-room .logo-wrap[data-material-preview="breath"] .logo-ink-base { visibility:visible; }
html[data-theme] body.spatial-room .logo-wrap[data-material-preview="dissolve"] .logo-vector { opacity:var(--material-return,0) !important; }
html[data-theme] body.spatial-room .logo-wrap[data-material-preview="dissolve"] .logo-ink-base { visibility:visible; }
html[data-theme] body.spatial-room .reactive-logo > .logo-material-preview { inset:0;width:100%;height:100%;overflow:visible; }
/* Mobile composition follows the compact reference from left to right. */
@media (max-width:800px) and (min-height:501px), (max-width:500px) {
  html[data-theme] body.spatial-room { --room-top:clamp(132px,calc(26dvh - 8px),182px); }
  html[data-theme] body.spatial-room .catalog-heading { top:36px;left:10px;right:auto; }
  html[data-theme] body.spatial-room .listening-intro h1 { top:calc(var(--room-top) - 90px); }
  html[data-theme] body.spatial-room .mobile-sections { top:calc(var(--room-top) - 90px);width:min(30vw,120px); }
  html[data-theme] body.spatial-room .mobile-section-thumb { width:50%; }
  html[data-theme] body.spatial-room #logo-wrap { top:calc(var(--room-top) - 49px);width:56%; }
  html[data-theme] body.spatial-room .room-presence { top:calc(var(--room-top) - 100px);left:calc(38vw - 19px);right:auto;width:38px;height:40px; }
}
/* Touch devices retain seven tracks when rotated to landscape. */
@media (pointer:coarse) {
  html[data-theme] body.spatial-room .playlist-shell { --catalog-slots:7; }
}
@media (pointer:coarse) and (min-width:501px) and (max-height:500px) {
  html[data-theme] body.spatial-room .track-select { min-height:0;padding:2px 12px; }
  html[data-theme] body.spatial-room .track-meta { gap:1px; }
  html[data-theme] body.spatial-room .track-title { font-size:11px;line-height:1.1;-webkit-line-clamp:1; }
  html[data-theme] body.spatial-room .track-artist { font-size:10px;line-height:1.1; }
}