:root {
--bg-start: #f7f4ef;
--bg-end: #eadcc9;
--panel: rgba(255, 253, 250, 0.72);
--panel-border: rgba(115, 84, 58, 0.18);
--ink: #2f241d;
--muted: #6a5649;
--accent: #8f5d40;
--accent-soft: #f2c7a8;
--glow-a: #f6dcc5;
--glow-b: #d8b390;
--steam-intensity: 1;
--steam-color: rgba(255, 255, 255, 0.84);
--liquid-start: #9b5d30;
--liquid-end: #5f361f;
--viz-top: rgba(252, 245, 232, 0.9);
--viz-bottom: rgba(214, 186, 156, 0.82);
--pixel-canvas-filter: none;
--shadow: 0 20px 60px rgba(96, 64, 40, 0.2);
--radius-xl: 28px;
--radius-lg: 18px;
--scene-control-border: rgba(255, 226, 187, 0.34);
--scene-control-panel-bg:
linear-gradient(145deg, rgba(53, 37, 27, 0.62), rgba(23, 25, 28, 0.44)),
rgba(38, 28, 21, 0.34);
--scene-control-player-bg:
linear-gradient(180deg, rgba(116, 72, 44, 0.88), rgba(45, 30, 23, 0.9)),
rgba(40, 28, 23, 0.9);
--scene-control-button-bg: rgba(255, 246, 229, 0.13);
--scene-control-button-active-bg: linear-gradient(145deg, rgba(255, 225, 178, 0.34), rgba(139, 92, 57, 0.32));
--scene-control-primary-bg: linear-gradient(145deg, rgba(255, 210, 150, 0.42), rgba(132, 76, 47, 0.72));
--scene-control-text: rgba(255, 245, 229, 0.94);
--scene-control-muted: rgba(255, 232, 200, 0.72);
--scene-control-accent: rgba(255, 214, 154, 0.78);
--scene-control-glow: rgba(255, 190, 112, 0.24);
--scene-control-ridge: linear-gradient(90deg, transparent, rgba(255, 210, 144, 0.5), transparent);
--scene-control-motif: repeating-linear-gradient(90deg, rgba(255, 233, 190, 0.08) 0 2px, transparent 2px 16px);
--scene-control-motif-opacity: 0.42;
--scene-player-material:
repeating-linear-gradient(90deg, rgba(255, 221, 156, 0.1) 0 2px, transparent 2px 15px),
radial-gradient(circle at 92% 18%, rgba(255, 231, 182, 0.1), transparent 24%);
--scene-player-material-opacity: 0.48;
--scene-control-panel-radius: 8px;
--scene-control-panel-cut: 8px;
--scene-control-panel-edge: rgba(255, 232, 188, 0.16);
--scene-control-player-radius: 18px 18px 10px 10px;
--scene-control-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -8px 18px rgba(0, 0, 0, 0.18),
0 12px 28px rgba(18, 12, 9, 0.22);
--scene-top-top: 18px;
--scene-top-left: auto;
--scene-top-right: 18px;
--scene-top-width: min(520px, calc(100vw - 36px));
--scene-travel-top: 18px;
--scene-travel-left: 18px;
--scene-travel-right: auto;
--scene-travel-width: min(264px, calc(100vw - 36px));
--scene-player-left: 50%;
--scene-player-right: auto;
--scene-player-bottom: 18px;
--scene-player-width: min(760px, calc(100vw - 36px));
--scene-player-transform: translateX(-50%);
--scene-reset-left: 18px;
--scene-reset-right: auto;
--scene-reset-bottom: 18px;
}
body[data-scene-skin="forest"] {
--scene-control-border: rgba(219, 190, 118, 0.42);
--scene-control-panel-edge: rgba(236, 186, 93, 0.2);
--scene-control-panel-bg:
linear-gradient(145deg, rgba(78, 57, 32, 0.76), rgba(21, 48, 33, 0.56)),
repeating-linear-gradient(90deg, rgba(139, 89, 45, 0.2) 0 4px, rgba(54, 38, 22, 0.04) 4px 12px);
--scene-control-player-bg:
linear-gradient(180deg, rgba(91, 62, 35, 0.92), rgba(24, 42, 30, 0.92)),
repeating-linear-gradient(90deg, rgba(239, 185, 92, 0.12) 0 3px, transparent 3px 15px);
--scene-control-button-bg: rgba(244, 210, 135, 0.13);
--scene-control-button-active-bg: linear-gradient(145deg, rgba(247, 205, 122, 0.36), rgba(80, 128, 70, 0.24));
--scene-control-primary-bg: linear-gradient(145deg, rgba(251, 193, 97, 0.44), rgba(70, 92, 44, 0.7));
--scene-control-muted: rgba(244, 218, 164, 0.76);
--scene-control-accent: rgba(246, 201, 108, 0.84);
--scene-control-glow: rgba(238, 176, 75, 0.24);
--scene-control-ridge: linear-gradient(90deg, transparent, rgba(250, 199, 97, 0.58), transparent);
--scene-control-motif:
radial-gradient(circle at 14px 11px, rgba(156, 209, 118, 0.2) 0 2px, transparent 3px),
repeating-linear-gradient(90deg, rgba(236, 178, 91, 0.1) 0 2px, transparent 2px 18px);
--scene-control-motif-opacity: 0.5;
--scene-player-material:
radial-gradient(circle at 18% 92%, rgba(126, 178, 91, 0.22), transparent 22%),
repeating-linear-gradient(92deg, rgba(240, 183, 94, 0.16) 0 2px, transparent 2px 10px),
repeating-linear-gradient(176deg, rgba(23, 16, 9, 0.18) 0 1px, transparent 1px 13px);
--scene-player-material-opacity: 0.58;
}
body[data-scene-skin="pixie"] {
--scene-control-border: rgba(238, 210, 126, 0.46);
--scene-control-panel-edge: rgba(255, 225, 148, 0.22);
--scene-control-panel-bg:
linear-gradient(145deg, rgba(84, 45, 51, 0.74), rgba(29, 58, 52, 0.58)),
radial-gradient(circle at 22% 24%, rgba(255, 218, 122, 0.16), transparent 34%);
--scene-control-player-bg:
linear-gradient(180deg, rgba(98, 48, 58, 0.92), rgba(28, 50, 48, 0.92)),
radial-gradient(circle at 82% 18%, rgba(247, 219, 126, 0.14), transparent 32%);
--scene-control-button-bg: rgba(255, 238, 184, 0.14);
--scene-control-button-active-bg: linear-gradient(145deg, rgba(248, 206, 120, 0.38), rgba(93, 138, 108, 0.3));
--scene-control-primary-bg: linear-gradient(145deg, rgba(255, 199, 112, 0.48), rgba(122, 66, 82, 0.7));
--scene-control-muted: rgba(251, 226, 168, 0.76);
--scene-control-accent: rgba(249, 217, 129, 0.86);
--scene-control-glow: rgba(245, 204, 112, 0.28);
--scene-control-ridge: linear-gradient(90deg, transparent, rgba(255, 229, 139, 0.62), transparent);
--scene-control-motif:
radial-gradient(circle at 10px 9px, rgba(255, 235, 171, 0.22) 0 2px, transparent 3px),
radial-gradient(circle at 32px 25px, rgba(157, 223, 166, 0.16) 0 2px, transparent 3px);
--scene-control-motif-opacity: 0.56;
--scene-player-material:
radial-gradient(circle at 80% 16%, rgba(255, 226, 134, 0.24), transparent 22%),
radial-gradient(circle at 18px 12px, rgba(255, 236, 174, 0.22) 0 2px, transparent 3px),
radial-gradient(circle at 42px 32px, rgba(162, 227, 172, 0.16) 0 1px, transparent 3px),
repeating-linear-gradient(116deg, rgba(98, 48, 58, 0.2) 0 7px, transparent 7px 18px);
--scene-player-material-opacity: 0.62;
}
body[data-scene-skin="picnic"] {
--scene-control-border: rgba(255, 226, 185, 0.46);
--scene-control-panel-edge: rgba(255, 224, 178, 0.24);
--scene-control-panel-bg:
linear-gradient(145deg, rgba(93, 54, 45, 0.72), rgba(49, 80, 52, 0.52)),
repeating-linear-gradient(90deg, rgba(255, 239, 218, 0.12) 0 10px, transparent 10px 20px),
repeating-linear-gradient(0deg, rgba(218, 74, 69, 0.1) 0 10px, transparent 10px 20px);
--scene-control-player-bg:
linear-gradient(180deg, rgba(108, 64, 47, 0.9), rgba(55, 71, 45, 0.92)),
repeating-linear-gradient(90deg, rgba(255, 235, 209, 0.13) 0 12px, transparent 12px 24px);
--scene-control-button-bg: rgba(255, 239, 218, 0.15);
--scene-control-button-active-bg: linear-gradient(145deg, rgba(255, 220, 169, 0.38), rgba(189, 82, 73, 0.28));
--scene-control-primary-bg: linear-gradient(145deg, rgba(255, 211, 151, 0.48), rgba(156, 73, 58, 0.68));
--scene-control-muted: rgba(255, 232, 204, 0.78);
--scene-control-accent: rgba(255, 219, 164, 0.86);
--scene-control-glow: rgba(255, 188, 120, 0.25);
--scene-control-ridge: linear-gradient(90deg, transparent, rgba(255, 229, 177, 0.62), transparent);
--scene-control-motif:
repeating-linear-gradient(90deg, rgba(255, 248, 228, 0.14) 0 8px, transparent 8px 16px),
repeating-linear-gradient(0deg, rgba(199, 78, 70, 0.11) 0 8px, transparent 8px 16px);
--scene-control-motif-opacity: 0.5;
--scene-player-material:
repeating-linear-gradient(90deg, rgba(255, 241, 215, 0.16) 0 7px, transparent 7px 15px),
repeating-linear-gradient(0deg, rgba(196, 77, 67, 0.12) 0 6px, transparent 6px 14px),
repeating-linear-gradient(45deg, rgba(78, 50, 31, 0.14) 0 1px, transparent 1px 8px);
--scene-player-material-opacity: 0.56;
}
body[data-scene-skin="space"],
body[data-scene-skin="street"],
body[data-scene-skin="cliff"] {
--scene-control-border: rgba(214, 226, 255, 0.32);
--scene-control-panel-edge: rgba(202, 223, 255, 0.16);
--scene-control-panel-bg:
linear-gradient(145deg, rgba(39, 45, 65, 0.72), rgba(22, 28, 42, 0.56)),
linear-gradient(90deg, rgba(106, 137, 174, 0.12), transparent);
--scene-control-player-bg:
linear-gradient(180deg, rgba(54, 61, 82, 0.9), rgba(28, 30, 43, 0.92)),
repeating-linear-gradient(90deg, rgba(194, 214, 255, 0.08) 0 2px, transparent 2px 18px);
--scene-control-button-bg: rgba(221, 232, 255, 0.11);
--scene-control-button-active-bg: linear-gradient(145deg, rgba(220, 232, 255, 0.28), rgba(92, 125, 163, 0.25));
--scene-control-primary-bg: linear-gradient(145deg, rgba(201, 220, 255, 0.32), rgba(76, 94, 132, 0.72));
--scene-control-muted: rgba(224, 235, 255, 0.72);
--scene-control-accent: rgba(211, 229, 255, 0.78);
--scene-control-glow: rgba(140, 184, 255, 0.2);
--scene-control-ridge: linear-gradient(90deg, transparent, rgba(211, 229, 255, 0.46), transparent);
--scene-control-motif: repeating-linear-gradient(90deg, rgba(214, 232, 255, 0.08) 0 2px, transparent 2px 14px);
--scene-control-motif-opacity: 0.44;
--scene-player-material:
linear-gradient(90deg, transparent 0 22%, rgba(220, 235, 255, 0.1) 22% 23%, transparent 23% 58%, rgba(220, 235, 255, 0.08) 58% 59%, transparent 59%),
repeating-linear-gradient(0deg, rgba(211, 229, 255, 0.08) 0 1px, transparent 1px 12px);
--scene-player-material-opacity: 0.5;
}
body[data-scene-skin="cliff"] {
--scene-player-material:
radial-gradient(circle at 76% 28%, rgba(246, 232, 198, 0.16) 0 1px, transparent 3px),
radial-gradient(circle at 32% 74%, rgba(246, 232, 198, 0.12) 0 1px, transparent 2px),
repeating-linear-gradient(106deg, rgba(236, 216, 176, 0.1) 0 2px, transparent 2px 13px),
repeating-linear-gradient(0deg, rgba(31, 37, 47, 0.18) 0 1px, transparent 1px 16px);
--scene-player-material-opacity: 0.54;
}
body[data-scene-skin="street"] {
--scene-player-material:
radial-gradient(circle at 84% 22%, rgba(255, 157, 208, 0.16), transparent 18%),
linear-gradient(90deg, rgba(160, 220, 255, 0.12) 0 2px, transparent 2px 36px),
repeating-linear-gradient(176deg, rgba(226, 239, 255, 0.13) 0 1px, transparent 1px 10px);
--scene-player-material-opacity: 0.52;
}
body[data-scene-skin="space"] {
--scene-player-material:
linear-gradient(90deg, transparent 0 19%, rgba(180, 214, 255, 0.14) 19% 20%, transparent 20% 62%, rgba(180, 214, 255, 0.1) 62% 63%, transparent 63%),
linear-gradient(0deg, transparent 0 44%, rgba(180, 214, 255, 0.1) 44% 45%, transparent 45%),
radial-gradient(circle at 88% 18%, rgba(151, 190, 255, 0.18), transparent 20%);
--scene-player-material-opacity: 0.56;
}
body[data-scene-placement="forest"] {
--scene-top-top: 22px;
--scene-top-right: 22px;
--scene-top-width: min(500px, calc(100vw - 44px));
--scene-travel-top: 22px;
--scene-travel-left: 22px;
--scene-player-bottom: 20px;
--scene-player-width: min(720px, calc(100vw - 44px));
--scene-reset-left: 22px;
--scene-reset-bottom: 22px;
}
body[data-scene-placement="room"] {
--scene-top-top: 14px;
--scene-top-right: 16px;
--scene-top-width: min(470px, calc(100vw - 32px));
--scene-player-bottom: 10px;
--scene-player-width: min(560px, calc(100vw - 32px));
}
body[data-scene-placement="pixie"] {
--scene-top-top: 16px;
--scene-top-right: 20px;
--scene-top-width: min(520px, calc(100vw - 40px));
--scene-travel-top: 20px;
--scene-travel-left: 18px;
--scene-player-bottom: 18px;
--scene-player-width: min(720px, calc(100vw - 40px));
}
body[data-scene-placement="picnic"],
body[data-scene-placement="street"] {
--scene-top-left: 18px;
--scene-top-right: auto;
--scene-travel-left: auto;
--scene-travel-right: 18px;
}
body[data-scene-placement="picnic"] {
--scene-player-width: min(720px, calc(100vw - 40px));
--scene-player-bottom: 20px;
}
body[data-scene-placement="cliff"],
body[data-scene-placement="space"] {
--scene-top-top: 20px;
--scene-player-left: 54%;
--scene-player-bottom: 18px;
--scene-player-width: min(740px, calc(100vw - 42px));
}
* {
box-sizing: border-box;
}
:where(button, input, textarea, select):focus {
outline: none;
}
:where(.mood-btn, .mini-btn, .weather-btn, .btn, .scene-travel-btn, .scene-reset-btn, .review-notes, .hud-icon-btn, .audio-hud-track-btn, .audio-hud-source-link, .audio-hud-info-popover a, #volumeRange):focus-visible {
outline: 3px solid rgba(255, 244, 224, 0.92);
outline-offset: 3px;
box-shadow:
0 0 0 1px rgba(95, 58, 35, 0.26),
0 0 0 6px rgba(197, 133, 72, 0.24),
0 12px 26px rgba(74, 50, 33, 0.16);
}
:where(.mood-btn, .mini-btn, .weather-btn, .btn):disabled:focus-visible {
box-shadow: 0 0 0 4px rgba(117, 82, 56, 0.12);
}
.skip-link {
position: fixed;
left: 18px;
top: 14px;
z-index: 20;
transform: translateY(-160%);
border: 1px solid rgba(103, 72, 50, 0.3);
border-radius: 999px;
background: rgba(255, 252, 246, 0.94);
color: var(--ink);
font-weight: 800;
padding: 10px 14px;
box-shadow: 0 12px 30px rgba(74, 50, 33, 0.18);
text-decoration: none;
transition: transform 140ms ease;
}
.skip-link:focus-visible {
transform: translateY(0);
outline: 3px solid rgba(255, 244, 224, 0.92);
outline-offset: 3px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#stageRoot:focus {
outline: none;
}
body {
margin: 0;
min-height: 100vh;
font-family: "Manrope", "Segoe UI", sans-serif;
color: var(--ink);
background: radial-gradient(circle at 12% 12%, var(--bg-start) 0%, var(--bg-end) 70%);
overflow: hidden;
}
.ambient {
position: fixed;
border-radius: 999px;
filter: blur(58px);
opacity: 0.7;
pointer-events: none;
z-index: 0;
animation: drift 18s ease-in-out infinite alternate;
}
.ambient-a {
width: 40vw;
height: 40vw;
min-width: 240px;
min-height: 240px;
top: -10vh;
right: -12vw;
background: var(--glow-a);
}
.ambient-b {
width: 35vw;
height: 35vw;
min-width: 220px;
min-height: 220px;
bottom: -14vh;
left: -12vw;
background: var(--glow-b);
animation-duration: 22s;
}
.grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: radial-gradient(rgba(62, 42, 28, 0.1) 0.4px, transparent 0.4px);
background-size: 3px 3px;
opacity: 0.09;
}
.app-shell {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 320px 1fr;
min-height: 100vh;
}
.mood-nav {
position: relative;
z-index: 4;
padding: 34px 22px;
border-right: 1px solid var(--panel-border);
background: linear-gradient(170deg, rgba(255, 252, 248, 0.75), rgba(245, 236, 227, 0.62));
backdrop-filter: blur(9px);
display: flex;
flex-direction: column;
gap: 24px;
}
.brand-block h1 {
margin: 0;
font-family: "Fraunces", serif;
font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}
.eyebrow {
margin: 0 0 8px;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
font-size: 0.72rem;
}
.lead {
margin: 12px 0 0;
color: var(--muted);
line-height: 1.45;
font-size: 0.94rem;
}
.mood-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mood-btn {
border: 1px solid transparent;
border-radius: 14px;
background: rgba(255, 255, 255, 0.62);
color: var(--ink);
text-align: left;
padding: 12px 12px;
font: inherit;
cursor: pointer;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.mood-btn strong {
display: block;
font-size: 0.94rem;
}
.mood-btn span {
color: var(--muted);
font-size: 0.78rem;
}
.mood-btn:hover {
transform: translateY(-1px);
border-color: var(--panel-border);
box-shadow: 0 8px 20px rgba(64, 44, 27, 0.1);
}
.mood-btn.active {
border-color: var(--accent);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(242, 223, 204, 0.84));
box-shadow: 0 10px 28px rgba(77, 49, 31, 0.18);
}
.hint {
margin-top: auto;
font-size: 0.78rem;
line-height: 1.45;
color: var(--muted);
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 10px 12px;
}
.hint code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.74rem;
}
.ranking-panel {
border: 1px solid var(--panel-border);
background: rgba(255, 255, 255, 0.55);
border-radius: 14px;
padding: 10px 12px;
}
.ranking-list {
margin: 0;
padding-left: 18px;
display: grid;
gap: 8px;
color: var(--ink);
}
.ranking-list li {
font-size: 0.8rem;
line-height: 1.34;
}
.ranking-item-title {
display: inline-block;
max-width: 21ch;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
}
.ranking-item-meta {
display: block;
color: var(--muted);
font-size: 0.72rem;
margin-top: 2px;
}
.ranking-empty {
list-style: none;
margin-left: -18px;
color: var(--muted);
}
.ranking-export {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.mini-btn {
border: 1px solid rgba(103, 72, 50, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.64);
color: var(--ink);
cursor: pointer;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.02em;
padding: 7px 10px;
transition:
transform 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
background 180ms ease;
}
.mini-btn:hover {
transform: translateY(-1px);
border-color: var(--accent);
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 8px 16px rgba(74, 50, 33, 0.12);
}
.stage {
position: relative;
z-index: 3;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.top-strip {
position: fixed;
top: 14px;
left: var(--main-overlay-left, 344px);
right: var(--main-overlay-right, 20px);
z-index: 4;
background: rgba(255, 252, 248, 0.62);
border: 1px solid var(--panel-border);
border-radius: var(--radius-lg);
box-shadow: 0 10px 28px rgba(28, 19, 14, 0.16);
backdrop-filter: blur(4px);
padding: 8px 10px;
display: grid;
gap: 6px;
}
.top-strip h2 {
margin: 0;
font-family: "Fraunces", serif;
font-size: clamp(1.3rem, 3vw, 2rem);
}
.mood-meta {
display: none;
}
.top-tools {
display: grid;
grid-template-columns:
minmax(210px, 0.8fr)
minmax(250px, 1fr)
minmax(230px, 0.88fr)
minmax(250px, 1fr)
minmax(220px, 0.82fr);
gap: 8px;
align-items: stretch;
}
.pill-row {
grid-column: 5;
grid-row: 1;
align-self: center;
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: flex-end;
}
.tag {
border: 1px solid rgba(120, 84, 56, 0.25);
color: var(--muted);
border-radius: 999px;
padding: 5px 8px;
font-size: 0.72rem;
background: rgba(255, 255, 255, 0.68);
}
.weather-panel {
border: 1px solid rgba(120, 84, 56, 0.22);
background: rgba(255, 255, 255, 0.62);
border-radius: 11px;
padding: 6px 8px;
display: grid;
grid-template-columns: auto 1fr;
gap: 6px;
align-items: center;
justify-items: stretch;
min-width: 0;
width: 100%;
}
.weather-label {
margin: 0;
color: var(--muted);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
white-space: nowrap;
}
.weather-toggle {
display: flex;
gap: 5px;
flex-wrap: wrap;
justify-content: flex-end;
}
.weather-btn {
border: 1px solid rgba(107, 72, 45, 0.25);
background: rgba(255, 255, 255, 0.78);
color: var(--ink);
border-radius: 999px;
padding: 4px 8px;
font: inherit;
font-size: 0.68rem;
font-weight: 700;
cursor: pointer;
transition: transform 120ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.weather-btn:hover {
transform: translateY(-1px);
border-color: var(--accent);
}
.weather-btn.is-active {
border-color: var(--accent);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 220, 201, 0.92));
box-shadow: 0 6px 14px rgba(72, 46, 30, 0.16);
}
.sky-panel {
background: rgba(247, 244, 255, 0.7);
}
.quality-panel {
background: rgba(246, 249, 238, 0.7);
}
.performance-panel {
background: rgba(238, 246, 249, 0.7);
}
.performance-readout {
margin: 0;
color: var(--ink);
font-size: 0.66rem;
line-height: 1.25;
font-weight: 800;
text-align: right;
font-variant-numeric: tabular-nums;
}
.performance-readout[data-health="roomy"] {
color: #496f52;
}
.performance-readout[data-health="steady"] {
color: var(--ink);
}
.performance-readout[data-health="tight"] {
color: #8a4b33;
}
.hero-panel {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
position: relative;
z-index: 3;
}
.hero-copy,
.visual-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
}
.hero-copy {
position: fixed;
z-index: 5;
left: var(--main-overlay-left, 344px);
right: var(--main-overlay-right, 20px);
bottom: 16px;
padding: 6px 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4px;
max-width: none;
max-height: min(17vh, 172px);
overflow: auto;
background: rgba(255, 252, 248, 0.68);
border-radius: 16px;
backdrop-filter: blur(4px);
}
#moodDescription {
display: none;
}
.player-box {
border-radius: 14px;
border: 1px solid rgba(118, 82, 54, 0.18);
background: rgba(255, 255, 255, 0.62);
padding: 7px 8px;
display: grid;
gap: 7px 10px;
grid-template-columns: minmax(170px, 1fr) auto minmax(260px, 1.08fr) minmax(116px, 0.5fr) minmax(150px, 0.62fr);
grid-template-areas: "track controls review volume visualizer";
align-items: center;
}
.track-meta {
grid-area: track;
}
.track-meta h3 {
margin: 2px 0 4px;
font-family: "Fraunces", serif;
font-size: 1rem;
}
.track-meta .label {
margin: 0;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
#trackStatus {
margin: 0;
color: var(--muted);
font-size: 0.78rem;
}
.controls {
grid-area: controls;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.shortcut-hint {
display: none;
}
.review-box {
grid-area: review;
border-radius: 11px;
border: 1px solid rgba(115, 84, 58, 0.2);
background: rgba(255, 255, 255, 0.57);
padding: 6px 7px;
display: grid;
grid-template-columns: auto minmax(128px, 1fr);
gap: 5px 7px;
align-items: center;
margin: 0;
}
.review-box .label {
margin: 0;
font-size: 0.72rem;
}
.review-actions {
justify-self: stretch;
display: flex;
gap: 6px;
flex-wrap: nowrap;
}
.review-btn {
flex: 1;
min-width: 0;
font-size: 0.7rem;
line-height: 1.12;
padding: 6px 7px;
}
.review-btn.is-active {
border-color: var(--accent);
box-shadow: 0 7px 16px rgba(77, 49, 31, 0.18);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 220, 202, 0.88));
}
.review-btn:disabled {
opacity: 0.56;
cursor: not-allowed;
}
.review-note-wrap {
grid-column: 1 / -1;
display: grid;
grid-template-columns: auto 1fr;
gap: 6px;
align-items: center;
color: var(--muted);
font-size: 0.78rem;
font-weight: 800;
}
.review-notes {
width: 100%;
min-height: 28px;
height: 30px;
resize: none;
border: 1px solid rgba(103, 72, 50, 0.2);
border-radius: 9px;
background: rgba(255, 252, 246, 0.78);
color: var(--ink);
font: inherit;
font-size: 0.74rem;
line-height: 1.25;
padding: 6px 8px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.review-notes:focus {
border-color: rgba(143, 93, 64, 0.42);
}
.review-notes:disabled {
opacity: 0.56;
cursor: not-allowed;
}
.review-note-status {
display: none;
margin: 0;
color: rgba(74, 55, 43, 0.64);
font-size: 0.74rem;
line-height: 1.3;
}
.review-summary {
grid-column: 1 / -1;
margin: 0;
font-size: 0.72rem;
line-height: 1.2;
color: var(--muted);
}
.btn {
border: 1px solid rgba(103, 72, 50, 0.28);
background: rgba(255, 255, 255, 0.7);
border-radius: 10px;
color: var(--ink);
font: inherit;
font-weight: 700;
cursor: pointer;
padding: 7px 10px;
transition: transform 120ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(74, 50, 33, 0.16);
border-color: var(--accent);
}
.btn.primary {
background: linear-gradient(140deg, var(--accent), #6f422a);
color: #fff;
border-color: transparent;
}
.volume-wrap {
grid-area: volume;
display: grid;
gap: 6px;
font-size: 0.8rem;
color: var(--muted);
margin: 0;
}
#volumeRange {
accent-color: var(--accent);
}
.visualizer-shell {
grid-area: visualizer;
border-radius: 10px;
border: 1px solid rgba(117, 82, 56, 0.22);
background: rgba(255, 255, 255, 0.48);
padding: 3px 5px 4px;
}
.visual-card {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
display: block;
padding: 0;
min-height: 100vh;
border: 0;
border-radius: 0;
box-shadow: none;
background: linear-gradient(165deg, rgba(255, 252, 248, 0.42), rgba(219, 193, 166, 0.22));
touch-action: none;
}
.visual-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-color: #d9ecff;
background-image:
linear-gradient(180deg, rgba(255, 252, 246, 0.08), rgba(44, 29, 23, 0.1)),
none;
background-position: center, center;
background-size: cover, auto 112%;
opacity: 0;
transform: translateZ(0) scale(1.12);
transition: opacity 220ms ease;
}
body[data-first-paint-scene="winter-coffee-corner"] .visual-card::before {
opacity: 1;
}
body[data-scene-base-ready="true"] .visual-card::before {
opacity: 0;
}
.first-paint-preview {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
background: #d9ecff;
opacity: 1;
transform: translateZ(0);
transition: opacity 220ms ease;
}
body[data-first-paint-scene="winter-coffee-corner"] .first-paint-preview {
opacity: 1;
}
body[data-scene-base-ready="true"] .first-paint-preview,
body:not([data-first-paint-scene="winter-coffee-corner"]) .first-paint-preview {
opacity: 0;
}
.visual-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: 0;
pointer-events: none;
background:
repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.012) 0px,
rgba(255, 255, 255, 0.012) 1px,
rgba(0, 0, 0, 0.018) 2px,
rgba(0, 0, 0, 0.018) 3px
);
mix-blend-mode: soft-light;
opacity: 0.1;
}
.pulse {
position: absolute;
z-index: 0;
width: 78%;
aspect-ratio: 1;
background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(245, 204, 174, 0.16));
border-radius: 50%;
pointer-events: none;
animation: breathe 7.6s ease-in-out infinite;
bottom: -22%;
}
.pixel-scene-canvas {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 320px;
height: 180px;
border-radius: 0;
border: 0;
background: transparent;
box-shadow: inset 0 -30px 80px rgba(0, 0, 0, 0.22);
image-rendering: auto;
filter: var(--pixel-canvas-filter);
opacity: 0;
transition: opacity 220ms ease;
cursor: grab;
touch-action: none;
}
body[data-scene-ready="true"] .pixel-scene-canvas {
opacity: 1;
}
body[data-scene-skin="room"] .pixel-scene-canvas {
image-rendering: auto;
}
.scene-travel {
position: fixed;
left: var(--scene-travel-left);
right: var(--scene-travel-right);
top: var(--scene-travel-top);
z-index: 7;
display: grid;
grid-template-columns: 38px minmax(118px, 1fr) 38px;
align-items: center;
gap: 7px;
width: var(--scene-travel-width);
min-height: 54px;
padding: 7px 8px;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--scene-control-border);
border-radius: var(--scene-control-panel-radius);
background: var(--scene-control-panel-bg);
color: var(--scene-control-text);
box-shadow: var(--scene-control-shadow);
backdrop-filter: blur(2px);
}
.scene-travel > * {
position: relative;
z-index: 2;
}
.scene-travel::before {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 5px;
height: 2px;
z-index: 1;
background: var(--scene-control-ridge);
opacity: 0.72;
}
.scene-travel::after {
content: "";
position: absolute;
inset: 4px;
z-index: 0;
border-radius: calc(var(--scene-control-panel-radius) - 3px);
background: var(--scene-control-motif);
opacity: var(--scene-control-motif-opacity);
pointer-events: none;
}
.scene-travel-btn {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
border: 1px solid var(--scene-control-border);
border-radius: 999px;
background: var(--scene-control-button-bg);
color: var(--scene-control-text);
box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.18);
font-size: 0;
line-height: 0;
cursor: pointer;
}
.scene-travel-btn::before {
content: attr(data-icon);
font-size: 0.92rem;
line-height: 1;
font-weight: 900;
}
.scene-travel-btn:hover {
border-color: var(--scene-control-accent);
background: var(--scene-control-button-active-bg);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
0 0 16px var(--scene-control-glow);
}
.scene-travel-meta {
min-width: 0;
display: grid;
gap: 1px;
}
.scene-travel-label {
color: var(--scene-control-muted);
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.scene-travel-meta strong {
min-width: 0;
overflow: hidden;
color: #fff2dd;
font-family: "Fraunces", Georgia, serif;
font-size: 0.96rem;
line-height: 1.08;
text-overflow: ellipsis;
white-space: nowrap;
}
.scene-travel-meta small {
color: var(--scene-control-muted);
font-size: 0.68rem;
font-weight: 700;
}
.scene-reset-btn {
position: fixed;
left: var(--scene-reset-left);
right: var(--scene-reset-right);
bottom: var(--scene-reset-bottom);
z-index: 7;
width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border: 1px solid var(--scene-control-border);
border-radius: 999px;
background:
radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--scene-control-accent) 34%, transparent), transparent 46%),
var(--scene-control-button-bg),
rgba(43, 29, 22, 0.78);
color: var(--scene-control-text);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -7px 12px rgba(0, 0, 0, 0.22),
0 12px 28px rgba(18, 12, 9, 0.24);
font-size: 0;
line-height: 0;
cursor: pointer;
}
.scene-reset-btn::before {
content: attr(data-icon);
font-size: 1.15rem;
line-height: 1;
font-weight: 900;
}
.scene-reset-btn:hover {
border-color: var(--scene-control-accent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.26),
0 0 18px var(--scene-control-glow),
0 12px 28px rgba(18, 12, 9, 0.24);
}
.cozy-scene {
display: none;
}
.mantra {
display: none;
}
.mood-visualizer {
width: 100%;
height: 36px;
display: block;
border-radius: 9px;
border: 1px solid rgba(117, 82, 56, 0.26);
background: linear-gradient(180deg, var(--viz-top), var(--viz-bottom));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px rgba(69, 42, 27, 0.14);
margin-top: 0;
}
@media (min-width: 1051px) {
body {
overflow: hidden;
}
.app-shell {
display: block;
min-height: 100vh;
}
.mood-nav {
position: fixed;
top: 18px;
left: 18px;
bottom: 18px;
z-index: 6;
width: 286px;
max-height: calc(100vh - 36px);
overflow: auto;
border: 1px solid rgba(255, 246, 236, 0.5);
border-radius: 20px;
background:
linear-gradient(165deg, rgba(255, 252, 248, 0.72), rgba(239, 226, 211, 0.48)),
rgba(70, 48, 34, 0.1);
box-shadow: 0 18px 54px rgba(36, 25, 18, 0.24);
backdrop-filter: blur(7px);
padding: 18px;
}
.brand-block h1 {
font-size: 1.95rem;
}
.lead {
font-size: 0.88rem;
}
.mood-btn {
background: rgba(255, 255, 255, 0.54);
}
.stage,
.hero-panel {
min-height: 100vh;
}
.top-strip {
top: 18px;
left: var(--main-overlay-left, 328px);
right: 18px;
}
.hero-copy {
left: var(--main-overlay-left, 328px);
right: 18px;
bottom: 18px;
}
}
@keyframes breathe {
0%,
100% {
transform: scale(0.91);
opacity: 0.54;
}
50% {
transform: scale(1.03);
opacity: 0.84;
}
}
@keyframes drift {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-18px, 22px, 0);
}
}
@media (max-width: 1050px) {
.app-shell {
grid-template-columns: 1fr;
}
.stage {
order: 1;
}
.mood-nav {
order: 2;
border-right: 0;
border-top: 1px solid var(--panel-border);
border-bottom: 0;
padding: 20px;
}
.mood-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.hint {
margin-top: 0;
}
.stage {
padding: 12px;
}
.hero-panel {
grid-template-columns: 1fr;
gap: 12px;
}
.hero-copy {
position: static;
left: auto;
right: auto;
bottom: auto;
max-width: 100%;
max-height: none;
overflow: visible;
margin-top: 0;
}
.visual-card {
position: relative;
inset: auto;
z-index: 3;
order: -1;
width: 100%;
min-height: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--panel-border);
border-radius: 18px;
box-shadow: var(--shadow);
background: rgba(255, 252, 248, 0.42);
}
.visual-card::after {
border-radius: 18px;
}
.pixel-scene-canvas {
inset: 0;
width: 100%;
height: 100%;
}
.top-strip {
position: static;
left: auto;
right: auto;
top: auto;
}
.top-tools {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.pill-row {
grid-column: 1 / -1;
grid-row: auto;
justify-content: flex-start;
}
.weather-panel {
grid-template-columns: 1fr;
justify-items: start;
}
.weather-toggle {
justify-content: flex-start;
}
.player-box {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"track track"
"controls volume"
"review review"
"visualizer visualizer";
}
.track-meta,
.review-box,
.visualizer-shell {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.hero-copy {
padding: 6px;
border-radius: 14px;
}
.top-strip {
align-items: flex-start;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 8px;
}
.mood-meta {
grid-column: 2;
grid-row: 3;
min-width: 0;
width: 100%;
display: grid;
align-content: center;
gap: 2px;
border: 1px solid rgba(120, 84, 56, 0.22);
border-radius: 11px;
background: rgba(255, 255, 255, 0.62);
padding: 6px 8px;
}
.mood-meta .eyebrow {
margin: 0;
font-size: 0.58rem;
}
.top-strip h2 {
font-size: 1rem;
line-height: 1.05;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-tools {
display: contents;
}
.pill-row {
grid-column: 1 / -1;
grid-row: 1;
justify-content: flex-start;
}
.weather-panel {
min-width: 0;
width: 100%;
}
.weather-panel:not(.sky-panel):not(.quality-panel):not(.performance-panel) {
grid-column: 1;
grid-row: 2;
}
.sky-panel {
grid-column: 2;
grid-row: 2;
}
.quality-panel {
grid-column: 1;
grid-row: 3;
}
.performance-panel {
grid-column: 1 / -1;
grid-row: 4;
}
.weather-btn {
padding: 4px 7px;
font-size: 0.66rem;
}
.tag {
font-size: 0.68rem;
padding: 5px 8px;
}
.player-box {
grid-template-columns: 1fr;
grid-template-areas:
"track"
"controls"
"volume"
"review"
"visualizer";
gap: 6px;
padding: 14px 6px 6px;
border-radius: 12px;
}
.track-meta {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1px 8px;
align-items: baseline;
}
.track-meta .label {
font-size: 0.66rem;
}
.track-meta h3 {
margin: 0;
font-size: 1rem;
}
#trackStatus {
grid-column: 1 / -1;
font-size: 0.74rem;
line-height: 1.25;
}
.review-box {
grid-template-columns: auto minmax(0, 1fr);
gap: 4px 6px;
padding: 5px 6px;
border-radius: 10px;
}
.review-actions {
width: 100%;
gap: 5px;
}
.review-note-wrap {
grid-template-columns: auto minmax(0, 1fr);
gap: 4px 6px;
font-size: 0.72rem;
}
.review-notes {
height: 28px;
min-height: 28px;
padding: 5px 7px;
}
.review-summary {
font-size: 0.7rem;
}
.controls {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.controls .btn {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 8px 6px;
font-size: 0.9rem;
line-height: 1.12;
}
.review-actions .btn {
min-height: 40px;
padding: 7px 6px;
}
.volume-wrap {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
font-size: 0.74rem;
}
.mood-visualizer {
height: 34px;
width: 100%;
}
}
.app-shell {
display: block;
}
.mood-nav {
display: none;
}
.stage,
.hero-panel {
min-height: 100vh;
}
.stage {
padding: 0;
}
.top-strip {
top: var(--scene-top-top);
left: var(--scene-top-left);
right: var(--scene-top-right);
width: var(--scene-top-width);
z-index: 6;
isolation: isolate;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.top-strip::before {
content: "";
position: absolute;
inset: -7px -8px -9px;
z-index: 0;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 62%, transparent);
border-radius: 13px;
background:
radial-gradient(circle at 18px 12px, color-mix(in srgb, var(--scene-control-accent) 18%, transparent), transparent 24px),
radial-gradient(circle at calc(100% - 18px) calc(100% - 12px), color-mix(in srgb, var(--scene-control-accent) 13%, transparent), transparent 26px),
linear-gradient(180deg, rgba(12, 10, 8, 0.16), rgba(12, 10, 8, 0.26));
box-shadow:
inset 0 1px 0 rgba(255, 245, 220, 0.1),
0 14px 34px rgba(12, 8, 6, 0.2);
opacity: 0.78;
pointer-events: none;
}
.top-tools {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.pill-row,
.performance-panel {
display: none;
}
.mood-meta {
display: none;
}
.weather-panel {
position: relative;
min-height: 54px;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--scene-control-border);
border-radius: var(--scene-control-panel-radius);
clip-path: polygon(
0 var(--scene-control-panel-cut),
var(--scene-control-panel-cut) var(--scene-control-panel-cut),
var(--scene-control-panel-cut) 0,
calc(100% - var(--scene-control-panel-cut)) 0,
calc(100% - var(--scene-control-panel-cut)) var(--scene-control-panel-cut),
100% var(--scene-control-panel-cut),
100% calc(100% - var(--scene-control-panel-cut)),
calc(100% - var(--scene-control-panel-cut)) calc(100% - var(--scene-control-panel-cut)),
calc(100% - var(--scene-control-panel-cut)) 100%,
var(--scene-control-panel-cut) 100%,
var(--scene-control-panel-cut) calc(100% - var(--scene-control-panel-cut)),
0 calc(100% - var(--scene-control-panel-cut))
);
background: var(--scene-control-panel-bg);
color: var(--scene-control-text);
box-shadow:
var(--scene-control-shadow),
inset 4px 0 0 color-mix(in srgb, var(--scene-control-panel-edge) 82%, transparent),
inset -4px 0 0 color-mix(in srgb, var(--scene-control-panel-edge) 54%, transparent);
backdrop-filter: blur(2px);
padding: 7px 8px;
}
body[data-scene-placement="room"] .quality-panel {
display: none;
}
.weather-panel > * {
position: relative;
z-index: 2;
}
.weather-panel::before {
content: "";
position: absolute;
inset: 4px 6px;
z-index: 1;
background:
radial-gradient(circle at 4px 4px, var(--scene-control-accent) 0 1.3px, transparent 1.8px),
radial-gradient(circle at calc(100% - 4px) 4px, var(--scene-control-accent) 0 1.3px, transparent 1.8px),
linear-gradient(var(--scene-control-ridge)) center calc(100% - 1px) / calc(100% - 18px) 2px no-repeat,
linear-gradient(90deg, var(--scene-control-panel-edge), transparent 24%, transparent 76%, var(--scene-control-panel-edge));
opacity: 0.78;
pointer-events: none;
}
.weather-panel::after {
content: "";
position: absolute;
inset: 4px;
z-index: 0;
border-radius: calc(var(--scene-control-panel-radius) - 2px);
background: var(--scene-control-motif);
opacity: var(--scene-control-motif-opacity);
pointer-events: none;
}
.weather-label {
color: var(--scene-control-muted);
font-size: 0.58rem;
}
.weather-toggle {
justify-content: flex-end;
}
.weather-btn {
min-width: 34px;
min-height: 28px;
border-color: color-mix(in srgb, var(--scene-control-border) 82%, transparent);
background: var(--scene-control-button-bg);
color: var(--scene-control-text);
box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.14);
}
.weather-btn.is-active {
border-color: var(--scene-control-accent);
background: var(--scene-control-button-active-bg);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 0 18px var(--scene-control-glow);
}
.hero-copy {
left: var(--scene-player-left);
right: var(--scene-player-right);
bottom: var(--scene-player-bottom);
width: var(--scene-player-width);
max-height: none;
overflow: visible;
transform: var(--scene-player-transform);
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
isolation: isolate;
}
.hero-copy::before {
content: "";
position: absolute;
inset: -8px -10px -11px;
z-index: 0;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 56%, transparent);
border-radius: 22px 22px 14px 14px;
background:
radial-gradient(ellipse at 18% 92%, color-mix(in srgb, var(--scene-control-accent) 16%, transparent), transparent 42%),
radial-gradient(ellipse at 82% 10%, color-mix(in srgb, var(--scene-control-accent) 12%, transparent), transparent 34%),
linear-gradient(180deg, rgba(16, 12, 9, 0.18), rgba(8, 6, 5, 0.32));
box-shadow:
inset 0 1px 0 rgba(255, 245, 220, 0.1),
0 20px 48px rgba(12, 8, 6, 0.22);
opacity: 0.82;
pointer-events: none;
}
.player-box {
position: relative;
z-index: 2;
grid-template-columns: minmax(150px, 1fr) auto auto minmax(120px, 0.55fr) minmax(132px, 0.66fr);
grid-template-areas: "track controls review volume visualizer";
gap: 8px 10px;
align-items: center;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--scene-control-border);
border-radius: var(--scene-control-player-radius);
background:
var(--scene-player-material),
var(--scene-control-player-bg);
box-shadow: var(--scene-control-shadow), 0 18px 44px rgba(20, 12, 8, 0.26);
color: var(--scene-control-text);
padding: 14px 12px 9px;
}
body[data-scene-placement="room"] .player-box {
grid-template-columns: minmax(130px, 1fr) auto auto minmax(112px, 0.5fr);
grid-template-areas: "track controls review volume";
gap: 7px 8px;
padding: 13px 10px 8px;
}
body[data-scene-placement="room"] .player-box::before {
max-width: 132px;
}
body[data-scene-placement="room"] .visualizer-shell {
display: none;
}
body[data-scene-placement="room"] .controls {
grid-template-columns: repeat(3, 38px);
gap: 5px;
}
body[data-scene-placement="room"] .transport-btn {
width: 38px;
height: 38px;
}
body[data-scene-placement="room"] .review-actions {
grid-template-columns: repeat(2, 34px);
gap: 5px;
}
body[data-scene-placement="room"] .review-btn {
width: 34px;
height: 34px;
}
.player-box > * {
position: relative;
z-index: 2;
}
.player-box::before {
content: attr(data-player-label);
position: absolute;
left: 14px;
top: 4px;
z-index: 3;
max-width: min(150px, 32vw);
padding: 1px 7px 2px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 78%, transparent);
background: rgba(20, 12, 8, 0.42);
color: var(--scene-control-muted);
font-size: 0.54rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.player-box::after {
content: "";
position: absolute;
inset: 5px 8px;
z-index: 0;
border-radius: 14px 14px 8px 8px;
background:
var(--scene-player-material),
var(--scene-control-motif);
opacity: max(var(--scene-control-motif-opacity), var(--scene-player-material-opacity));
pointer-events: none;
}
@keyframes player-resonance-ping {
0% {
filter: brightness(1);
box-shadow: var(--scene-control-shadow), 0 18px 44px rgba(20, 12, 8, 0.26);
}
38% {
filter: brightness(1.07);
box-shadow:
var(--scene-control-shadow),
0 18px 44px rgba(20, 12, 8, 0.26),
0 0 0 1px color-mix(in srgb, var(--scene-control-accent) 64%, transparent),
0 0 24px var(--scene-control-glow);
}
100% {
filter: brightness(1);
box-shadow: var(--scene-control-shadow), 0 18px 44px rgba(20, 12, 8, 0.26);
}
}
.player-box.is-player-resonating {
animation: player-resonance-ping 960ms ease-out 1;
box-shadow:
var(--scene-control-shadow),
0 18px 44px rgba(20, 12, 8, 0.26),
0 0 0 1px color-mix(in srgb, var(--scene-control-accent) 54%, transparent),
0 0 18px var(--scene-control-glow);
}
.player-box.is-player-resonating::before {
border-color: color-mix(in srgb, var(--scene-control-accent) 72%, transparent);
color: #fff5df;
box-shadow: 0 0 12px color-mix(in srgb, var(--scene-control-accent) 28%, transparent);
}
.player-box.is-player-resonating::after {
background:
radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--scene-control-accent) 32%, transparent), transparent 34%),
radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--scene-control-accent) 22%, transparent), transparent 28%),
var(--scene-player-material),
var(--scene-control-motif);
opacity: calc(var(--scene-control-motif-opacity) + 0.14);
}
.player-box[data-player-resonance-group="transport"].is-player-resonating .controls,
.player-box[data-player-resonance-group="track"].is-player-resonating .track-meta,
.player-box[data-player-resonance-group="review"].is-player-resonating .review-actions,
.player-box[data-player-resonance-group="volume"].is-player-resonating .volume-wrap,
.player-box[data-player-resonance-group="volume"].is-player-resonating .visualizer-shell {
filter: drop-shadow(0 0 9px var(--scene-control-glow));
}
.track-meta .label {
display: none;
}
.track-meta h3 {
color: #fff2dd;
font-size: 0.96rem;
}
#trackStatus {
color: var(--scene-control-muted);
font-size: 0.72rem;
}
.controls {
display: grid;
grid-template-columns: repeat(3, 42px);
gap: 7px;
}
.transport-btn,
.review-btn {
display: inline-grid;
place-items: center;
min-width: 0;
min-height: 0;
border-radius: 999px;
font-size: 0;
line-height: 0;
overflow: hidden;
padding: 0;
}
.controls .transport-btn,
.review-actions .review-btn {
font-size: 0;
line-height: 0;
}
.transport-btn {
width: 42px;
height: 42px;
}
.transport-btn::before,
.review-btn::before {
content: attr(data-icon);
font-family: "Manrope", "Segoe UI", sans-serif;
font-size: 0.92rem;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
}
#playPauseBtn::before {
font-size: 1.08rem;
}
.btn,
.btn.primary {
border-color: var(--scene-control-border);
background: var(--scene-control-button-bg);
color: var(--scene-control-text);
box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.18);
}
.btn.primary {
background: var(--scene-control-primary-bg);
}
.review-box {
border: 0;
background: transparent;
padding: 0;
grid-template-columns: 1fr;
}
.review-box .label,
.review-note-wrap,
.review-note-status,
.review-summary {
display: none;
}
.review-actions {
display: grid;
grid-template-columns: repeat(2, 38px);
gap: 7px;
}
.review-btn {
width: 38px;
height: 38px;
}
.review-btn.is-active {
border-color: var(--scene-control-accent);
background: var(--scene-control-button-active-bg);
box-shadow: 0 0 16px var(--scene-control-glow);
}
.volume-wrap {
color: var(--scene-control-muted);
font-size: 0;
min-height: 28px;
display: flex;
align-items: center;
}
.volume-wrap span {
display: none;
}
#volumeRange {
width: 100%;
min-height: 28px;
accent-color: color-mix(in srgb, var(--scene-control-accent) 80%, #ffffff 20%);
}
.visualizer-shell {
border-color: color-mix(in srgb, var(--scene-control-border) 72%, transparent);
background: rgba(255, 245, 225, 0.11);
}
.mood-visualizer {
height: 30px;
border-color: color-mix(in srgb, var(--scene-control-border) 68%, transparent);
background: linear-gradient(180deg, rgba(255, 232, 190, 0.2), rgba(30, 28, 24, 0.34));
}
@media (max-width: 1050px) {
body {
--scene-top-top: 12px;
--scene-top-left: auto;
--scene-top-right: 12px;
--scene-top-width: min(330px, calc(100vw - 24px));
--scene-travel-top: 112px;
--scene-travel-left: 10px;
--scene-travel-right: auto;
--scene-travel-width: min(202px, calc(100vw - 20px));
--scene-player-left: 50%;
--scene-player-right: auto;
--scene-player-bottom: 10px;
--scene-player-width: min(350px, calc(100vw - 20px));
--scene-player-transform: translateX(-50%);
--scene-reset-left: 10px;
--scene-reset-right: auto;
--scene-reset-bottom: calc(env(safe-area-inset-bottom, 0px) + 148px);
}
body[data-scene-placement="picnic"],
body[data-scene-placement="street"] {
--scene-top-left: 10px;
--scene-top-right: auto;
--scene-travel-left: auto;
--scene-travel-right: 10px;
}
body[data-scene-placement="forest"] {
--scene-travel-top: 116px;
--scene-player-bottom: 12px;
--scene-reset-bottom: calc(env(safe-area-inset-bottom, 0px) + 158px);
}
body[data-scene-placement="cliff"],
body[data-scene-placement="space"] {
--scene-player-left: 52%;
}
body {
min-height: 100vh;
overflow: hidden;
}
.app-shell,
.stage,
.hero-panel {
min-height: 100vh;
}
.stage {
padding: 0;
}
.top-strip {
position: fixed;
top: var(--scene-top-top);
right: var(--scene-top-right);
left: var(--scene-top-left);
width: var(--scene-top-width);
z-index: 6;
}
.scene-travel {
left: var(--scene-travel-left);
right: var(--scene-travel-right);
top: var(--scene-travel-top);
width: var(--scene-travel-width);
min-height: 46px;
grid-template-columns: 32px minmax(66px, 1fr) 32px;
gap: 5px;
padding: 6px;
}
.scene-travel-btn {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
}
.scene-travel-btn::before {
font-size: 0.8rem;
}
.scene-travel-label {
display: none;
}
.scene-travel-meta strong {
font-size: 0.82rem;
}
.scene-travel-meta small {
font-size: 0.62rem;
}
.top-tools {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.weather-panel {
min-height: 48px;
padding: 6px;
}
.quality-panel {
display: none;
}
.weather-panel:not(.sky-panel):not(.quality-panel):not(.performance-panel),
.sky-panel {
grid-column: auto;
grid-row: auto;
}
.visual-card {
position: fixed;
inset: 0;
z-index: 0;
width: 100vw;
height: 100vh;
min-height: 100vh;
aspect-ratio: auto;
border: 0;
border-radius: 0;
box-shadow: none;
}
.visual-card::after {
border-radius: 0;
}
.hero-copy {
position: fixed;
left: var(--scene-player-left);
right: var(--scene-player-right);
bottom: var(--scene-player-bottom);
width: var(--scene-player-width);
transform: var(--scene-player-transform);
margin: 0;
padding: 0;
z-index: 7;
}
.scene-reset-btn {
left: var(--scene-reset-left);
right: var(--scene-reset-right);
bottom: var(--scene-reset-bottom);
z-index: 8;
width: 36px;
height: 36px;
}
.player-box {
grid-template-columns: auto minmax(0, 1fr) minmax(74px, 0.45fr);
grid-template-areas:
"track controls controls"
"review volume visualizer";
gap: 7px;
padding: 15px 9px 9px;
border-radius: 16px 16px 10px 10px;
}
.track-meta {
grid-area: track;
grid-column: auto;
display: block;
}
.track-meta h3 {
max-width: 16ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#trackStatus {
max-width: 16ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.controls {
grid-area: controls;
width: auto;
justify-content: end;
grid-template-columns: repeat(3, 36px);
gap: 5px;
}
.review-box {
grid-area: review;
grid-column: auto;
}
.transport-btn {
width: 36px;
height: 36px;
}
.controls .transport-btn,
.review-actions .review-btn {
font-size: 0;
line-height: 0;
}
.transport-btn::before {
font-size: 0.82rem;
}
.review-btn::before {
font-size: 0.74rem;
}
.review-actions {
grid-template-columns: repeat(2, 32px);
gap: 5px;
}
.review-btn {
width: 32px;
height: 32px;
}
.volume-wrap {
grid-area: volume;
display: block;
min-height: 32px;
}
.visualizer-shell {
grid-area: visualizer;
grid-column: auto;
padding: 2px 4px;
}
.mood-visualizer {
height: 22px;
}
}
@media (max-width: 640px) {
.top-strip {
align-items: stretch;
grid-template-columns: 1fr;
padding: 0;
}
.mood-meta,
.pill-row,
.performance-panel,
.quality-panel {
display: none;
}
.weather-toggle {
justify-content: flex-end;
}
.weather-btn {
padding: 4px 6px;
font-size: 0.62rem;
}
}
.mood-nav[hidden],
.top-tools[hidden],
.player-box[hidden],
.hero-copy,
.scene-travel,
.scene-reset-btn {
display: none !important;
}
.top-strip {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 14px);
left: 50%;
right: auto;
width: min(540px, calc(100vw - 32px));
transform: translateX(-50%);
z-index: 12;
pointer-events: none;
}
.top-strip::before {
display: none;
}
.audio-hud {
pointer-events: auto;
position: relative;
display: grid;
grid-template-columns: minmax(150px, 1fr) auto;
gap: 8px;
align-items: center;
min-height: 46px;
padding: 6px 8px 6px 12px;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 46%, transparent);
border-radius: 8px;
background:
radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--scene-control-accent) 12%, transparent), transparent 48%),
linear-gradient(180deg, rgba(20, 15, 12, 0.46), rgba(12, 9, 8, 0.34));
box-shadow:
0 12px 28px rgba(7, 5, 4, 0.16),
inset 0 1px 0 rgba(255, 244, 220, 0.12);
color: var(--scene-control-text);
opacity: 0.74;
backdrop-filter: blur(6px);
transition: opacity 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.audio-hud:hover,
.audio-hud:focus-within,
.audio-hud.is-playlist-open,
.audio-hud.is-info-open {
opacity: 0.96;
border-color: color-mix(in srgb, var(--scene-control-border) 62%, transparent);
background:
radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--scene-control-accent) 16%, transparent), transparent 48%),
linear-gradient(180deg, rgba(20, 15, 12, 0.62), rgba(12, 9, 8, 0.48));
box-shadow:
0 16px 34px rgba(7, 5, 4, 0.22),
inset 0 1px 0 rgba(255, 244, 220, 0.15);
}
.audio-hud::after {
content: "";
position: absolute;
inset: 4px;
z-index: 0;
border-radius: 6px;
background: var(--scene-control-motif);
opacity: 0.12;
pointer-events: none;
}
.audio-hud > * {
position: relative;
z-index: 1;
}
.audio-hud-track {
display: grid;
gap: 1px;
min-width: 0;
}
.audio-hud-label {
color: var(--scene-control-muted);
font-size: 0.58rem;
font-weight: 800;
text-transform: uppercase;
}
.audio-hud-track strong {
overflow: hidden;
color: #fff3df;
font-size: 0.96rem;
line-height: 1.08;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-hud-track small {
overflow: hidden;
color: var(--scene-control-muted);
font-size: 0.7rem;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-hud-scene-status {
display: none;
color: color-mix(in srgb, #ffe8bf 86%, var(--scene-control-muted));
letter-spacing: 0;
}
body[data-scene-warmup="warming"] .audio-hud-scene-status {
display: block;
}
.audio-hud-controls {
display: grid;
grid-template-columns: repeat(3, 34px) minmax(136px, 152px) repeat(2, 34px);
gap: 6px;
align-items: center;
}
.hud-icon-btn,
.hud-playlist-toggle,
.audio-hud-track-btn,
.audio-hud-source-link {
border: 1px solid color-mix(in srgb, var(--scene-control-border) 78%, transparent);
background: var(--scene-control-button-bg);
color: var(--scene-control-text);
box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.18);
}
.hud-icon-btn {
display: inline-grid;
width: 34px;
height: 34px;
min-width: 34px;
min-height: 34px;
place-items: center;
padding: 0;
overflow: hidden;
border-radius: 999px;
font-size: 0;
line-height: 0;
}
.hud-icon {
width: 18px;
height: 18px;
fill: currentColor;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.26));
}
.hud-volume-wrap {
display: grid;
grid-template-columns: minmax(78px, 1fr) minmax(42px, max-content);
gap: 8px;
align-items: center;
min-width: 0;
height: 34px;
padding: 0 10px 0 8px;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 54%, transparent);
border-radius: 999px;
background: rgba(13, 9, 7, 0.22);
box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.14);
}
.hud-volume-wrap:focus-within {
border-color: var(--scene-control-accent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 18px var(--scene-control-glow);
}
.hud-volume-wrap output {
color: color-mix(in srgb, var(--scene-control-text) 86%, transparent);
font-size: 0.62rem;
font-weight: 800;
line-height: 1;
min-width: 34px;
padding-inline-end: 2px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
white-space: nowrap;
}
.hud-volume-wrap #volumeRange {
width: 100%;
min-width: 0;
min-height: 22px;
margin: 0;
accent-color: color-mix(in srgb, var(--scene-control-accent) 78%, #ffffff 22%);
cursor: pointer;
}
.hud-volume-wrap #volumeRange::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--scene-control-muted) 35%, transparent);
}
.hud-volume-wrap #volumeRange::-webkit-slider-thumb {
margin-top: -5px;
}
.hud-volume-wrap #volumeRange::-moz-range-track {
height: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--scene-control-muted) 35%, transparent);
}
.hud-volume-wrap #volumeRange::-moz-range-progress {
height: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--scene-control-accent) 72%, #ffffff 18%);
}
.hud-icon-btn[data-muted="true"] .icon-volume,
.hud-icon-btn[data-muted="false"] .icon-muted {
display: none;
}
.hud-icon-btn.is-muted {
border-color: var(--scene-control-accent);
background: var(--scene-control-button-active-bg);
}
.audio-hud-info {
position: relative;
display: inline-grid;
}
.audio-hud-info-popover {
position: absolute;
top: calc(100% + 8px);
right: 0;
display: grid;
gap: 9px;
width: min(328px, calc(100vw - 32px));
padding: 10px 11px;
visibility: hidden;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 58%, transparent);
border-radius: 8px;
background: linear-gradient(180deg, rgba(18, 13, 10, 0.86), rgba(12, 9, 8, 0.74));
box-shadow:
0 18px 38px rgba(7, 5, 4, 0.28),
inset 0 1px 0 rgba(255, 244, 220, 0.14);
color: var(--scene-control-text);
font-size: 0.72rem;
line-height: 1.3;
opacity: 0;
pointer-events: none;
text-align: left;
transform: translateY(-3px);
transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.audio-hud-info-popover[hidden] {
display: none;
}
.audio-hud-info-section {
display: grid;
gap: 4px;
}
.audio-hud-info-section + .audio-hud-info-section {
padding-top: 8px;
border-top: 1px solid color-mix(in srgb, var(--scene-control-border) 38%, transparent);
}
.audio-hud-info.is-open .audio-hud-info-popover {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.audio-hud-info-popover strong {
color: #fff3df;
font-size: 0.76rem;
line-height: 1.1;
}
.audio-hud-info-popover span {
color: var(--scene-control-muted);
}
.audio-hud-info-popover a {
width: fit-content;
color: #ffe0ad;
text-decoration: none;
}
.audio-hud-info-popover a:hover {
text-decoration: underline;
}
.audio-hud-legal-links {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
}
.audio-hud-legal-links a {
padding-inline: 0;
white-space: nowrap;
}
.legal-reader {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: clamp(16px, 4vw, 48px);
}
.legal-reader[hidden] {
display: none;
}
.legal-reader-backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 18%, rgba(255, 218, 156, 0.12), transparent 32rem),
rgba(10, 7, 5, 0.56);
backdrop-filter: blur(5px);
}
.legal-reader-panel {
position: relative;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 16px;
width: min(920px, calc(100vw - 32px));
max-height: min(82vh, 760px);
overflow: hidden;
padding: clamp(18px, 2.4vw, 26px);
border: 1px solid color-mix(in srgb, var(--scene-control-border) 66%, transparent);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(36, 27, 20, 0.88), rgba(17, 12, 9, 0.82)),
repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 18px);
box-shadow:
0 26px 60px rgba(5, 3, 2, 0.42),
inset 0 1px 0 rgba(255, 244, 222, 0.16);
color: #f8ead7;
}
.legal-reader-header {
display: flex;
gap: 12px 18px;
align-items: flex-start;
justify-content: space-between;
min-width: 0;
}
.legal-reader-heading {
min-width: 0;
}
.legal-reader-header .eyebrow {
margin: 0 0 3px;
color: var(--scene-control-muted);
min-width: 0;
}
.legal-reader-header h2 {
margin: 0;
font-family: "Fraunces", Georgia, serif;
font-size: clamp(1.45rem, 3vw, 2.25rem);
line-height: 1.05;
letter-spacing: 0;
min-width: 0;
overflow-wrap: anywhere;
}
.legal-reader-meta {
margin: 6px 0 0;
color: color-mix(in srgb, var(--scene-control-muted) 82%, transparent);
font-size: 0.78rem;
line-height: 1.28;
}
.legal-reader-actions {
display: inline-flex;
align-items: flex-start;
gap: 8px;
flex: 0 0 auto;
}
.legal-reader-language {
display: inline-flex;
gap: 4px;
padding: 3px;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 40%, transparent);
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
}
.legal-reader-language button {
min-width: 34px;
min-height: 28px;
padding: 5px 8px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: #f8ead7;
font: inherit;
font-size: 0.76rem;
cursor: pointer;
}
.legal-reader-language button.is-active,
.legal-reader-language button:hover {
border-color: var(--scene-control-accent);
background: var(--scene-control-button-active-bg);
}
.legal-reader-close {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 58%, transparent);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #fff2df;
cursor: pointer;
flex: 0 0 auto;
}
.legal-reader-close svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.legal-reader-tabs {
display: flex;
flex-wrap: wrap;
gap: 7px;
min-width: 0;
}
.legal-reader-tabs button {
min-height: 32px;
padding: 7px 11px;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 52%, transparent);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: #f8ead7;
font: inherit;
font-size: 0.82rem;
cursor: pointer;
}
.legal-reader-tabs button.is-active,
.legal-reader-tabs button:hover,
.legal-reader-close:hover {
border-color: var(--scene-control-accent);
background: var(--scene-control-button-active-bg);
}
.legal-reader-copy {
display: grid;
gap: 10px;
min-width: 0;
overflow: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding-right: 8px;
padding-top: 4px;
border-top: 1px solid color-mix(in srgb, var(--scene-control-border) 34%, transparent);
}
.legal-reader-copy section {
display: grid;
gap: 10px;
}
.legal-reader-copy section[hidden] {
display: none;
}
.legal-reader-copy p,
.legal-reader-copy li {
margin: 0;
color: color-mix(in srgb, #f8ead7 78%, transparent);
font-size: 0.92rem;
line-height: 1.52;
overflow-wrap: anywhere;
}
.legal-reader-copy ul {
display: grid;
gap: 7px;
margin: 0;
padding-left: 18px;
}
.legal-reader-copy a {
color: #ffe0ad;
}
@media (max-width: 680px) {
.legal-reader {
align-items: end;
padding: 10px;
}
.legal-reader-panel {
width: min(100%, calc(100vw - 20px));
max-height: min(88vh, 720px);
}
.legal-reader-header h2 {
font-size: clamp(1.35rem, 8vw, 1.9rem);
}
.legal-reader-header {
flex-wrap: wrap;
}
.legal-reader-actions {
width: 100%;
justify-content: space-between;
}
.legal-reader-copy {
padding-right: 4px;
}
}
.hud-playlist-toggle {
border-color: color-mix(in srgb, var(--scene-control-border) 62%, transparent);
}
.hud-icon-btn:hover,
.hud-playlist-toggle:hover,
.audio-hud-source-link:hover,
.audio-hud-source-link:focus-visible,
.audio-hud-track-btn:hover,
.audio-hud-track-btn[aria-current="true"] {
border-color: var(--scene-control-accent);
background: var(--scene-control-button-active-bg);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
0 0 18px var(--scene-control-glow);
}
.audio-hud-playlist {
position: absolute;
top: calc(100% + 7px);
left: 0;
right: 0;
display: grid;
gap: 5px;
max-height: min(58vh, 392px);
padding: 7px;
overflow-y: auto;
border: 1px solid color-mix(in srgb, var(--scene-control-border) 54%, transparent);
border-radius: 8px;
background: linear-gradient(180deg, rgba(18, 13, 10, 0.72), rgba(12, 9, 8, 0.56));
box-shadow: 0 16px 36px rgba(7, 5, 4, 0.24);
backdrop-filter: blur(8px);
}
.audio-hud-playlist[hidden] {
display: none;
}
.audio-hud-track-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
gap: 5px;
}
.audio-hud-track-btn {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
width: 100%;
min-height: 34px;
padding: 6px 8px;
border-radius: 7px;
text-align: left;
}
.audio-hud-source-link {
display: inline-grid;
width: 34px;
min-width: 34px;
min-height: 34px;
place-items: center;
border-radius: 7px;
text-decoration: none;
}
.audio-hud-track-btn strong,
.audio-hud-track-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-hud-track-btn strong {
font-size: 0.82rem;
}
.audio-hud-track-btn span {
color: var(--scene-control-muted);
font-size: 0.68rem;
}
.visual-card {
touch-action: pan-y;
}
.scene-edge-nav {
position: fixed;
top: 0;
bottom: 0;
z-index: 9;
display: grid;
width: min(12vw, 92px);
min-width: 52px;
place-items: center;
border: 0;
opacity: 0;
color: rgba(255, 245, 226, 0.9);
transition: opacity 180ms ease, background 180ms ease;
}
.scene-edge-nav-prev {
left: 0;
background: linear-gradient(90deg, rgba(7, 6, 5, 0.42), transparent);
}
.scene-edge-nav-next {
right: 0;
background: linear-gradient(270deg, rgba(7, 6, 5, 0.42), transparent);
}
.scene-edge-nav::before {
content: attr(data-icon);
display: grid;
width: 42px;
height: 42px;
place-items: center;
border: 1px solid rgba(255, 235, 200, 0.28);
border-radius: 999px;
background: rgba(20, 14, 10, 0.45);
box-shadow: 0 14px 34px rgba(7, 5, 4, 0.22);
font-size: 1.05rem;
font-weight: 900;
}
.scene-travel[hidden],
.scene-edge-nav[hidden] {
display: none !important;
}
.scene-edge-nav:hover,
.scene-edge-nav:focus-visible {
opacity: 1;
}
@media (hover: none) and (pointer: coarse) {
.scene-edge-nav {
display: none;
}
}
@media (max-width: 640px) {
.top-strip {
top: calc(env(safe-area-inset-top, 0px) + 10px);
width: min(430px, calc(100vw - 18px));
}
.audio-hud {
grid-template-columns: 1fr;
gap: 7px;
padding: 8px;
}
.audio-hud-controls {
grid-template-columns: repeat(3, 34px) minmax(126px, 1fr) repeat(2, 34px);
gap: 6px;
justify-content: end;
}
.hud-icon-btn {
width: 34px;
height: 34px;
min-width: 34px;
min-height: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.ambient,
.pulse {
animation: none !important;
}
}