:root { color-scheme: dark; --bg:#06080d; --text:#eff5f3; --muted:#99a9b8; --line:#c7deff20; --aqua:#a9ffdc; --purple:#b6a2ff; --font:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; touch-action:pan-x pan-y pinch-zoom; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.6 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:calc(126px + env(safe-area-inset-bottom,0px)); }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--aqua); outline-offset:6px; }
svg { display:block; }
img { max-width:100%; }
.icon { width:21px; height:21px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.wrap { width:min(1320px,calc(100% - 112px)); margin-inline:auto; }
.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--aqua),#8fbaff,var(--purple)); transform:scaleX(0); transform-origin:left; z-index:60; }
.hero-shell { overflow:clip; background:radial-gradient(ellipse at 81% 35%,#1d345d30,transparent 48%),radial-gradient(ellipse at 60% 5%,#4a27661b,transparent 50%); position:relative; isolation:isolate; }
.hero-shell::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.16; background-image:radial-gradient(#a4d8ff75 .55px,transparent .55px); background-size:6px 6px; mask-image:linear-gradient(transparent,#0004,transparent); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:30px; min-height:102px; border-bottom:1px solid var(--line); position:relative; z-index:8; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:23px; letter-spacing:5px; line-height:1; font-weight:500; }
.brand > span { display:flex; flex-direction:column; gap:10px; }
.brand small { font-size:7px; letter-spacing:3px; color:#71859b; }
.site-header nav { display:flex; gap:32px; font-size:12px; color:#a5b6c8; }
.site-header nav a { padding-block:16px; position:relative; }
.site-header nav a::after { content:''; position:absolute; bottom:10px; left:0; width:100%; height:1px; transform:scaleX(0); transform-origin:left; background:var(--aqua); transition:transform .3s; }
.site-header nav a:hover { color:#f4fff9; }
.site-header nav a:hover::after { transform:scaleX(1); }
.header-actions { display:flex; align-items:center; gap:22px; }
.header-listen { display:flex; align-items:center; gap:22px; padding:12px 18px; border:1px solid #b1d8f83b; border-radius:40px; font-size:12px; transition:background .25s,border-color .25s; }
.header-listen .icon { width:17px; height:17px; }
.header-listen:hover { background:#a9ffdc0c; border-color:#a9ffdc7d; }
.hero { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,1fr); align-items:center; min-height:650px; padding-block:30px 80px; position:relative; }
.hero-copy { position:relative; z-index:3; padding-top:0; }
.eyebrow { display:flex; align-items:center; gap:12px; color:#a7bacf; font-size:10px; letter-spacing:2.4px; font-weight:400; line-height:1.8; }
.eyebrow-dot { height:5px; width:5px; border-radius:50%; background:var(--aqua); box-shadow:0 0 12px #a9ffdc77; }
.section-number { font:11px monospace; color:#6389a1; margin-right:4px; letter-spacing:0; }
h1 { font-size:clamp(80px,8.3vw,124px); line-height:.97; letter-spacing:-.08em; margin:29px 0 28px; font-weight:600; }
.title-line { display:block; }
.title-gradient { background:linear-gradient(100deg,#beffe1 0%,#a4ede6 38%,#9fa7ff 85%); color:var(--aqua); background-clip:text; -webkit-text-fill-color:transparent; }
.hero-description { margin:0; max-width:375px; color:#a0b1c5; font-size:15px; line-height:1.9; }
.hero-description::first-line { color:#d1dce8; }
.hero-actions { display:flex; align-items:center; gap:27px; margin-top:31px; }
.button-primary { position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:13px; border:1px solid transparent; border-radius:40px; background:var(--aqua); color:#123029; font-size:13px; font-weight:600; padding:18px 25px; min-width:180px; min-height:58px; transition:background .25s,box-shadow .25s,transform .25s; }
.button-primary:hover:not(:disabled) { background:#c6ffe9; box-shadow:0 0 35px #a9ffdc30; transform:translateY(-2px); }
.button-primary::before { content:''; position:absolute; inset:-7px; border:1px solid #a9ffdc22; border-radius:inherit; z-index:-1; }
.button-primary:disabled { background:#a0b8b4; color:#223736; }
.play-symbol { width:22px; height:22px; fill:currentColor; }
.explore-link { display:flex; align-items:center; gap:13px; color:#b8c7d8; font-size:11px; }
.explore-link .icon { width:17px; height:17px; color:#6f8da8; transition:transform .3s; }
.explore-link:hover .icon { transform:translate(2px,-2px); color:var(--aqua); }
.hero-note { display:flex; align-items:center; gap:13px; color:#688198; margin-top:45px; font:8px monospace; letter-spacing:1.5px; }
.note-line { width:28px; height:1px; background:#5b8299; }
.hero-art { width:64%; aspect-ratio:1; position:absolute; right:-5%; top:-14px; margin-left:0; display:grid; place-items:center; isolation:isolate; z-index:1; --scene-x:0px; --scene-y:0px; --scene-rx:0deg; --scene-ry:0deg; }
.portal-glow { position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle,#6ed5e616,transparent 68%); box-shadow:0 0 100px #6f64cb08; z-index:-1; }
#sound-field { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.portal-core { position:relative; width:42%; max-width:280px; transform:perspective(800px) translate3d(var(--scene-x),var(--scene-y),0) rotateX(var(--scene-rx)) rotateY(var(--scene-ry)); transition:transform .7s cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 0 28px #78dff43b); }
.hero-mark { width:100%; display:block; }
.portal-core::after { content:''; position:absolute; inset:9%; border-radius:50%; background:radial-gradient(circle,#6fb3e517,transparent 68%); z-index:-1; }
.portal-orbit { position:absolute; inset:12%; border:1px solid #9bc2ee13; border-radius:50%; pointer-events:none; transform:rotate(-20deg); }
.portal-orbit span { position:absolute; width:5px; height:5px; border-radius:50%; background:#d8fbff; top:12%; left:17%; box-shadow:0 0 12px #96efff; }
.portal-coordinate { position:absolute; top:9%; right:13%; font:8px monospace; color:#68849d; letter-spacing:1.5px; }
.portal-caption { position:absolute; right:3%; top:48%; writing-mode:vertical-rl; font:7px monospace; letter-spacing:2.2px; color:#5f7a96; }
.hero-nowplaying { position:absolute; width:65%; max-width:370px; bottom:27%; left:18%; padding:18px 22px 16px; background:linear-gradient(135deg,#182232e8,#111522df); border:1px solid #bcdfff29; border-radius:14px; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:0 22px 70px #0006; transform:translate3d(calc(var(--scene-x)*-.35),calc(var(--scene-y)*-.35),0); transition:transform .7s ease; }
.np-heading { display:flex; align-items:center; gap:10px; color:#8da6bf; font-size:7px; letter-spacing:2px; }
.np-indicator { width:4px; height:4px; border-radius:50%; background:#7292a3; margin-left:auto; }
body.is-playing .np-indicator { background:var(--aqua); box-shadow:0 0 10px #a9ffdc7c; }
.np-copy { display:flex; flex-direction:column; gap:4px; margin-top:12px; min-width:0; }
.np-copy > * { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-copy strong { font-size:13px; font-weight:400; color:#e6f2fa; }
.np-copy > span { color:#8196b0; font-size:10px; }
.np-footnote { display:block; margin-top:12px; color:#5f778f; font-size:8px; }
.signal-bars { display:inline-flex; align-items:center; gap:2px; height:16px; }
.signal-bars i { width:2px; height:5px; border-radius:1px; background:#a9ffdc; }
.signal-bars i:nth-child(2n) { height:11px; }
.signal-bars i:nth-child(3n) { height:16px; }
.hero-scroll { position:absolute; bottom:30px; left:0; display:flex; gap:14px; align-items:center; font:8px monospace; letter-spacing:1.6px; color:#8295ad; z-index:4; }
.scroll-capsule { width:18px; height:29px; border:1px solid #9fbcd43d; border-radius:14px; display:flex; justify-content:center; padding-top:6px; }
.scroll-capsule i { width:2px; height:5px; border-radius:1px; background:var(--aqua); }
.hero-edition { position:absolute; right:0; bottom:37px; font:7px monospace; letter-spacing:1.7px; color:#546e88; }
.frequency-strip { overflow:hidden; border-block:1px solid #c8e3ff24; background:#adffe007; color:#c2d9dc; padding-block:25px; }
.marquee-track { display:flex; width:max-content; }
.marquee-group { display:flex; align-items:center; flex-shrink:0; gap:54px; padding-right:54px; font-size:15px; letter-spacing:3px; }
.strip-star { color:var(--aqua); }
.strip-star .icon { width:22px; height:22px; stroke-width:1; }
.sound-section { padding-block:115px 108px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:47px; }
h2 { font-size:clamp(37px,4vw,58px); font-weight:400; letter-spacing:-2.4px; line-height:1.12; margin:19px 0 0; }
h2 em { font-style:normal; color:#8198ad; }
.section-heading > p { max-width:290px; margin:0 0 5px; color:#90a4ba; font-size:13px; line-height:1.9; }
.sound-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.card-visual { height:350px; border-radius:18px; border:1px solid #b9deef1e; position:relative; overflow:hidden; isolation:isolate; transition:border-color .4s,box-shadow .4s; }
.sound-card:hover .card-visual { border-color:#c3e8ff65; box-shadow:0 18px 60px #0005; }
.card-number,.card-genre,.card-code { position:absolute; z-index:4; color:#b8d3df9c; font:8px monospace; letter-spacing:1.6px; }
.card-number { top:24px; left:23px; }
.card-genre { bottom:22px; left:23px; font-size:7px; }
.card-code { right:18px; bottom:55px; writing-mode:vertical-rl; font-size:6px; letter-spacing:2px; opacity:.5; }
.visual-deep { background:radial-gradient(ellipse at 50% 70%,#19756c55,transparent 80%),#0a2429; }
.deep-sphere { position:absolute; width:210px; height:210px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background:repeating-radial-gradient(ellipse at 35% 20%,transparent 0 5px,#acffe066 6px,transparent 7px 11px),radial-gradient(circle at 30% 18%,#9fcfba,#296b62 32%,#0a2c33 68%,#051018); box-shadow:18px 30px 45px #0006,inset 0 0 25px #afffe326; }
.deep-orbit { position:absolute; width:290px; height:290px; border:1px solid #a6ffe226; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-35deg) scaleY(.44); z-index:2; box-shadow:0 0 20px #72f5d709; }
.deep-orbit::after { content:''; position:absolute; width:7px; height:7px; border-radius:50%; background:#ceffe5; top:36px; left:34px; box-shadow:0 0 16px #a9ffdc; }
.visual-melodic { background:radial-gradient(ellipse at 50% 70%,#965bea42,transparent 70%),#221936; }
.melodic-rings { position:absolute; inset:17%; perspective:450px; transform:rotate(-28deg); transform-style:preserve-3d; }
.melodic-rings i { position:absolute; inset:4%; border:2px solid #bc99ff; border-radius:50%; box-shadow:0 0 14px #ae6aff29,inset 0 0 14px #ae6aff0d; transform:rotateY(60deg); }
.melodic-rings i:nth-child(2) { inset:11%; border-color:#d1b4ff; }
.melodic-rings i:nth-child(3) { inset:18%; border-color:#cca4ff; }
.melodic-rings i:nth-child(4) { inset:25%; border-color:#e0c3ff; }
.melodic-rings i:nth-child(5) { inset:32%; border-color:#d7c6ff; }
.melodic-rings i:nth-child(6) { inset:39%; border-color:#f0dfff; }
.visual-night { background:radial-gradient(ellipse at 50% 50%,#a3615436,transparent 80%),linear-gradient(#1d1c32,#3e2a37 65%,#161c31); }
.night-sun { position:absolute; top:26%; left:50%; width:145px; height:145px; border-radius:50%; transform:translateX(-50%); background:linear-gradient(145deg,#fbdab5,#df8a9d 45%,#8466b5 85%); box-shadow:0 0 60px #eea1b02a; }
.night-horizon { position:absolute; top:65%; left:0; right:0; height:1px; background:#b599ab55; box-shadow:0 -10px 55px 20px #392b3e; }
.night-reflection { position:absolute; top:64%; left:27%; right:27%; height:140px; background:repeating-linear-gradient(0deg,transparent 0 4px,#ffbfd06b 5px,transparent 7px 12px); transform:perspective(170px) rotateX(42deg); filter:blur(1px); mask-image:linear-gradient(#0009,transparent); }
.card-copy { display:flex; gap:13px; padding:25px 2px 0; }
.card-dot { width:5px; height:5px; border-radius:50%; background:#a9ffdc; flex:0 0 auto; margin-top:11px; }
.sound-card:nth-child(2) .card-dot { background:#c4abff; }
.sound-card:nth-child(3) .card-dot { background:#f2b2ba; }
.card-copy h3 { font-size:24px; font-weight:400; line-height:1.3; letter-spacing:-.6px; margin:0 0 11px; }
.card-copy p { font-size:12px; line-height:1.9; color:#849ab1; margin:0; max-width:300px; }
.manifesto-shell { position:relative; overflow:hidden; border-block:1px solid var(--line); background:radial-gradient(ellipse at 100% 50%,#1a3d3a24,transparent 65%),#0b1015; }
.manifesto { display:grid; grid-template-columns:1fr 1.8fr; gap:48px 75px; padding-block:90px 34px; }
.manifesto-intro { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:36px; }
.manifesto-intro > span { font:8px/1.9 monospace; letter-spacing:1.8px; color:#638292; }
.manifesto-symbol { display:grid; place-items:center; height:100px; width:100px; border-radius:50%; border:1px solid #93eec12b; color:#b0fbdc; background:radial-gradient(circle,#a9ffdc08,transparent); }
.manifesto-symbol .icon { width:42px; height:42px; stroke-width:1; }
.manifesto-copy h2 { font-size:clamp(58px,6.7vw,95px); line-height:1; letter-spacing:-4.8px; margin:0 0 38px; }
.manifesto-copy h2 em { color:#a5c9bf; }
.manifesto-prose { display:grid; grid-template-columns:1fr 1.2fr; gap:30px; }
.manifesto-prose p { font-size:13px; line-height:1.95; color:#92a8b5; margin:0; }
.text-link { display:inline-flex; align-items:center; gap:40px; padding-block:6px; margin-top:30px; color:#b8f1d9; font-size:12px; }
.text-link .icon { width:20px; height:20px; }
.manifesto-bottom { grid-column:1/-1; display:flex; align-items:center; gap:32px; border-top:1px solid var(--line); margin-top:14px; padding-top:24px; color:#819aa9; font-size:10px; }
.manifesto-bottom > span { display:flex; align-items:center; gap:10px; }
.manifesto-bottom > span:last-child { margin-left:auto; font:7px monospace; letter-spacing:1.6px; color:#567184; }
.manifesto-bottom .icon { width:17px; height:17px; color:#88b2ab; }
.faq-section { display:grid; grid-template-columns:1fr 1.8fr; gap:75px; padding-block:105px; }
.faq-section h2 { font-size:51px; }
.faq-intro { font-size:12px; color:#7f95ac; margin-top:24px; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 0; font-size:15px; list-style:none; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary .icon { width:18px; height:18px; color:#849eb4; transition:transform .3s; }
.faq-list details[open] summary .icon { transform:rotate(180deg); color:var(--aqua); }
.faq-list p { font-size:13px; line-height:1.9; color:#96aabd; margin:0 30px 25px 0; }
.closing { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:60px 64px; margin-bottom:76px; border:1px solid #9bc5dd2b; border-radius:22px; background:radial-gradient(ellipse at 82% 120%,#325b5140,transparent 65%),#0e171b; }
.closing h2 { font-size:clamp(58px,6.5vw,88px); line-height:.99; letter-spacing:-4px; margin-top:18px; }
.closing h2 em { color:#a7d3bf; }
.closing p { font-size:12px; color:#78988f; margin:23px 0 0; }
.closing-play { display:flex; flex-direction:column; gap:13px; align-items:center; justify-content:center; flex:0 0 auto; width:150px; height:150px; border-radius:50%; border:1px solid #b2f2d454; background:#a9ffdc0b; color:#b8ffdf; font-size:11px; transition:background .3s,box-shadow .3s; z-index:2; }
.closing-play .play-symbol { width:34px; height:34px; }
.closing-play:hover:not(:disabled) { background:#a9ffdc18; box-shadow:0 0 60px #a9ffdc10; }
.closing-play:disabled { color:#6a8680; }
.closing-orbit { position:absolute; right:-100px; top:-170px; width:550px; height:550px; border:1px solid #a9ffdc0d; border-radius:50%; pointer-events:none; }
.site-footer { padding-block:0 25px; color:#8297ab; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-bottom:32px; }
.footer-brand { font-size:26px; letter-spacing:5px; color:#c4d9df; }
.footer-top > span { font-size:12px; }
.share-button { display:flex; align-items:center; gap:20px; color:#c1dbd7; border:0; border-bottom:1px solid #a9ffdc3a; padding:10px 0; background:none; font-size:12px; }
.share-button .icon { width:18px; height:18px; color:var(--aqua); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:22px; font-size:10px; color:#526e86; }
.footer-bottom a { display:flex; align-items:center; gap:10px; }
.footer-bottom .icon { width:14px; height:14px; }
.reveal { opacity:1; transform:none; }
.motion-ready[data-motion=on] .reveal { transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1); }
.motion-ready[data-motion=on] .reveal:not(.is-visible) { opacity:0; transform:translateY(28px); }
.motion-ready[data-motion=on] .sound-card:nth-child(2) { transition-delay:.12s; }
.motion-ready[data-motion=on] .sound-card:nth-child(3) { transition-delay:.24s; }
html[data-motion=on] .hero-enter { animation:enter-stage 1s cubic-bezier(.2,.7,.2,1) both; }
html[data-motion=on] .title-line:first-child { animation-delay:.08s; }
html[data-motion=on] .title-line:nth-child(2) { animation-delay:.18s; }
html[data-motion=on] .hero-description { animation-delay:.28s; }
html[data-motion=on] .hero-actions { animation-delay:.38s; }
html[data-motion=on] .hero-note { animation-delay:.48s; }
html[data-motion=on] .portal-core img { animation:core-float 10s ease-in-out infinite; }
html[data-motion=on] .portal-orbit { animation:orbit-turn 40s linear infinite; }
html[data-motion=on] .marquee-track { animation:marquee-flow 32s linear infinite; }
html[data-motion=on] .deep-sphere { animation:sphere-drift 11s ease-in-out infinite; }
html[data-motion=on] .melodic-rings { animation:ring-turn 16s ease-in-out infinite; }
html[data-motion=on] .night-sun { animation:sun-float 12s ease-in-out infinite; }
html[data-motion=on] .scroll-capsule i { animation:scroll-hint 2.5s ease-in-out infinite; }
html[data-motion=on] body.is-playing .signal-bars i { animation:equalize 1s ease-in-out infinite alternate; }
html[data-motion=on] body.is-playing .signal-bars i:nth-child(2n) { animation-delay:-.4s; }
html[data-motion=on] body.is-playing .signal-bars i:nth-child(3n) { animation-delay:-.7s; }
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after { animation-play-state:paused!important; }
@keyframes enter-stage { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes core-float { 0%,100% { transform:translateY(-5px) rotate(-7deg); } 50% { transform:translateY(7px) rotate(-3deg); } }
@keyframes orbit-turn { to { transform:rotate(340deg); } }
@keyframes marquee-flow { to { transform:translateX(-50%); } }
@keyframes sphere-drift { 0%,100% { transform:translate(-50%,-50%) rotate(-8deg); } 50% { transform:translate(-50%,-54%) rotate(8deg); } }
@keyframes ring-turn { 0%,100% { transform:rotate(-28deg) rotateY(-12deg); } 50% { transform:rotate(18deg) rotateY(18deg); } }
@keyframes sun-float { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,-10px); } }
@keyframes scroll-hint { 0%,100% { transform:translateY(0); opacity:.3; } 50% { transform:translateY(9px); opacity:1; } }
@keyframes equalize { to { transform:scaleY(.4); } }
.player { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom,0px)); left: 24px; right: 24px; width: min(1328px,calc(100% - 48px)); margin-inline: auto; border: 1px solid #bedbff26; border-radius: 16px; background: #101722f0; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 12px 50px #0006; z-index: 10; }
.player-inner { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 26px; min-height: 86px; padding: 14px 23px; }
.track-info { display: flex; gap: 13px; align-items: center; min-width: 0; }
.track-art { width: 48px; height: 48px; border: 1px solid #b4d5f720; border-radius: 9px; background: #080f1b; display: grid; place-items: center; flex: 0 0 auto; position: relative; }
.track-art img { width: 38px; height: 38px; }
.track-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.track-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-caption { font-size: 6px; letter-spacing: 1.6px; color: #6e839f; }
.track-text strong { font-size: 11px; font-weight: 400; color: #e0e8f6; }
.track-text > #track-artist { font-size: 9px; color: #8092ac; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.player-play { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border: 0; border-radius: 50%; background: #d7efea; color: #142c31; transition: background .2s,box-shadow .2s; }
.player-play:hover:not(:disabled) { background: #a7f8e8; box-shadow: 0 0 22px #98f0e21c; }
.player-play:disabled { background: #3b4758; color: #aab6c8; }
.player-status { display: flex; align-items: center; gap: 8px; min-width: 108px; max-width: 125px; font-size: 9px; color: #9cabc2; letter-spacing: .2px; }
.status-dot { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #7989a1; }
.status-dot.live { background: var(--aqua); box-shadow: 0 0 9px #98f0e26e; }
.player-extras { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.local-clock { font: 9px monospace; color: #71839f; letter-spacing: 1px; }
.volume-control { display: flex; align-items: center; gap: 10px; }
.volume-control button { background: transparent; border: 0; color: #9aacc5; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 6px; }
.volume-control svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.volume-control input { width: 76px; height: 44px; accent-color: #98d9ce; cursor: pointer; font-size: 16px; touch-action: pan-y; }
.playing-bars { display: none; position: absolute; bottom: 2px; right: 2px; gap: 2px; align-items: flex-end; background: #101722; border-radius: 2px; padding: 3px; }
.playing-bars i { width: 2px; height: 6px; background: var(--aqua); animation: equalize .8s ease-in-out infinite alternate; }
.playing-bars i:nth-child(2) { height: 10px; animation-delay: -.4s; }
.playing-bars i:nth-child(3) { height: 4px; animation-delay: -.2s; }
body.is-playing .playing-bars { display: flex; }
body.is-playing .mini-wave i { animation: equalize 1s ease-in-out infinite alternate; }
body.is-playing .mini-wave i:nth-child(3n) { animation-delay: -.5s; }
.toast { position: fixed; left: 50%; bottom: calc(125px + env(safe-area-inset-bottom,0px)); transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); text-align: center; padding: 15px 24px; border: 1px solid #98f0e247; border-radius: 10px; background: #1d3338; color: #e3f1f4; font-size: 13px; box-shadow: 0 10px 35px #0004; }
.skip-link { position: fixed; top: -70px; left: 20px; z-index: 50; padding: 12px; background: var(--aqua); color: #142b2c; }
.skip-link:focus { top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript-message { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: #263a44; padding: 12px; text-align: center; font-size: 13px; }

.player { border-color:#b7dbe82e; background:#111b22ed; }
.track-text strong { font-size:12px; }
.track-text > #track-artist { font-size:10px; }
.track-caption { font-size:7px; }
.player-play { background:#c2f7dd; color:#19372d; }
.player-status { font-size:10px; }
@media (min-width:1500px) { .hero { min-height:800px; } }
@media (max-width:1100px) {
 .wrap { width:calc(100% - 72px); }
 .site-header nav { gap:24px; }
 .hero { min-height:660px; }
 h1 { font-size:clamp(66px,8.3vw,91px); }
 .hero-description { font-size:13px; max-width:315px; }
 .hero-actions { gap:21px; }
 .button-primary { min-width:160px; padding-inline:21px; }
 .explore-link { font-size:10px; gap:9px; }
 .hero-nowplaying { padding:15px 18px; }
 .card-visual { height:310px; }
 .deep-sphere { width:175px; height:175px; }
 .deep-orbit { width:245px; height:245px; }
 .manifesto,.faq-section { column-gap:45px; }
 .manifesto-prose { gap:24px; }
 .local-clock { display:none; }
}
@media (max-width:850px) {
 .site-header nav { display:none; }
 .header-actions { gap:20px; }
 .hero { min-height:640px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .hero-description { max-width:270px; }
 .hero-actions { gap:18px; }
 .explore-link { font-size:9px; }
 .button-primary { min-width:145px; font-size:12px; padding-inline:18px; }
 .hero-note { font-size:6px; letter-spacing:1px; }
 .hero-nowplaying { left:12%; width:72%; padding:13px 15px; }
 .np-heading { font-size:6px; letter-spacing:1.4px; }
 .np-copy strong { font-size:11px; }
 .portal-caption { right:0; }
 .portal-coordinate { font-size:6px; }
 .hero-edition { font-size:6px; }
 .sound-grid { gap:18px; }
 .card-visual { height:270px; }
 .card-number { font-size:6px; }
 .card-genre { font-size:5px; }
 .deep-sphere { width:155px; height:155px; }
 .deep-orbit { width:210px; height:210px; }
 .night-sun { width:116px; height:116px; }
 .card-copy { gap:10px; }
 .card-copy h3 { font-size:20px; }
 .card-copy p { font-size:11px; }
 .section-heading > p { max-width:220px; font-size:11px; }
 .manifesto-prose { grid-template-columns:1fr; gap:15px; }
 .manifesto-copy h2 { font-size:65px; }
 .faq-section h2 { font-size:43px; }
 .closing { padding:44px; }
 .volume-control input { width:60px; }
 .player-inner { gap:18px; padding-inline:20px; }
}
@media (max-width:700px) {
 .wrap { width:calc(100% - 40px); }
 .site-header { min-height:84px; gap:15px; }
 .brand { font-size:17px; letter-spacing:3.5px; gap:8px; }
 .brand img { width:33px; height:33px; }
 .brand small { font-size:5px; letter-spacing:2px; }
 .brand > span { gap:8px; }
 .header-actions { gap:14px; }
 .header-listen { padding:10px 12px; gap:12px; font-size:10px; }
 .header-listen .icon { width:15px; height:15px; }
 .hero { grid-template-columns:1fr; min-height:0; padding:52px 0 58px; }
 .hero-copy { z-index:3; }
 .eyebrow { font-size:7px; letter-spacing:1.6px; gap:10px; }
 h1 { font-size:clamp(68px,16.3vw,112px); margin:26px 0 25px; letter-spacing:-.075em; }
 .hero-description { font-size:13px; max-width:300px; }
 .hero-actions { gap:25px; margin-top:28px; }
 .button-primary { min-width:165px; min-height:55px; padding:16px 21px; font-size:12px; }
 .explore-link { font-size:10px; gap:10px; }
 .hero-note { display:none; }
 .hero-art { position:relative; top:auto; right:auto; width:117%; margin:0 0 -5px -8.5%; }
 .portal-core { width:38%; }
 .portal-coordinate { top:10%; right:15%; font-size:6px; }
 .portal-caption { right:6%; font-size:6px; }
 .hero-nowplaying { width:69%; max-width:345px; left:16%; bottom:3%; padding:15px 19px; }
 .np-heading { font-size:7px; }
 .np-copy strong { font-size:12px; }
 .np-copy > span { font-size:9px; }
 .np-footnote { font-size:7px; margin-top:9px; }
 .hero-scroll { bottom:18px; font-size:6px; gap:10px; }
 .scroll-capsule { width:14px; height:23px; padding-top:4px; }
 .hero-edition { bottom:25px; font-size:5px; letter-spacing:1px; }
 .frequency-strip { padding-block:21px; }
 .marquee-group { font-size:11px; letter-spacing:2.3px; gap:32px; padding-right:32px; }
 .strip-star .icon { width:18px; height:18px; }
 .sound-section { padding-block:70px; }
 .section-heading { display:block; margin-bottom:32px; }
 h2 { font-size:35px; letter-spacing:-1.5px; }
 .section-heading > p { max-width:none; font-size:12px; margin-top:22px; }
 .sound-grid { grid-template-columns:1fr; gap:34px; }
 .card-visual { height:350px; border-radius:15px; }
 .card-number { font-size:8px; }
 .card-genre { font-size:7px; }
 .deep-sphere { width:210px; height:210px; }
 .deep-orbit { width:285px; height:285px; }
 .night-sun { width:150px; height:150px; }
 .card-copy { padding-top:21px; gap:13px; }
 .card-copy h3 { font-size:24px; }
 .card-copy p { font-size:12px; max-width:none; }
 .manifesto { grid-template-columns:1fr; gap:30px; padding-block:60px 27px; }
 .manifesto-intro { flex-direction:row; align-items:center; }
 .manifesto-intro > span { display:none; }
 .manifesto-symbol { width:42px; height:42px; }
 .manifesto-symbol .icon { width:22px; height:22px; }
 .manifesto-copy h2 { font-size:64px; letter-spacing:-3.8px; margin-bottom:27px; }
 .manifesto-prose { gap:15px; }
 .manifesto-prose p { font-size:13px; }
 .manifesto-bottom { flex-wrap:wrap; gap:17px 26px; padding-top:22px; margin-top:0; font-size:10px; }
 .manifesto-bottom > span:last-child { margin-left:0; width:100%; font-size:6px; }
 .faq-section { grid-template-columns:1fr; gap:27px; padding-block:70px; }
 .faq-section h2 { font-size:45px; }
 .faq-intro { margin-top:20px; }
 .faq-list summary { font-size:14px; padding-block:24px; }
 .faq-list p { font-size:12px; }
 .closing { padding:36px 27px; margin-bottom:50px; border-radius:17px; gap:20px; }
 .closing h2 { font-size:52px; letter-spacing:-3px; }
 .closing .eyebrow { font-size:6px; letter-spacing:1.4px; }
 .closing p { font-size:10px; max-width:160px; }
 .closing-play { width:90px; height:90px; font-size:8px; gap:7px; }
 .closing-play .play-symbol { width:25px; height:25px; }
 .closing-orbit { width:350px; height:350px; right:-200px; top:-50px; }
 .site-footer { padding-bottom:23px; }
 .footer-top { flex-wrap:wrap; gap:20px; padding-bottom:25px; }
 .footer-brand { font-size:22px; }
 .footer-top > span { font-size:10px; }
 .share-button { width:100%; justify-content:space-between; font-size:11px; }
 .footer-bottom { font-size:8px; gap:20px; }
 .footer-bottom a { gap:5px; }
 .player { left:0; right:0; bottom:0; width:100%; border-inline:0; border-bottom:0; border-radius:0; padding-bottom:env(safe-area-inset-bottom,0px); }
 .player-inner { min-height:82px; padding:12px 20px; grid-template-columns:minmax(0,1fr) auto; gap:14px; }
 .player-extras { display:none; }
 .player-controls { gap:10px; flex-direction:row-reverse; }
 .player-play { width:44px; height:44px; }
 .player-status { min-width:0; max-width:74px; font-size:8px; gap:6px; line-height:1.5; }
 .track-info { gap:9px; }
 .track-art { width:39px; height:39px; border-radius:6px; }
 .track-art img { width:31px; height:31px; }
 .track-caption { font-size:5px; letter-spacing:1.3px; }
 .track-text strong { font-size:10px; }
 .track-text > #track-artist { font-size:8px; }
 body { padding-bottom:calc(82px + env(safe-area-inset-bottom,0px)); }
 .toast { bottom:calc(99px + env(safe-area-inset-bottom,0px)); font-size:12px; }
}
@media (max-width:365px) {
 .wrap { width:calc(100% - 32px); }
 .brand { font-size:14px; letter-spacing:2.7px; gap:6px; }
 .brand small { font-size:5px; letter-spacing:1.2px; }
 .header-actions { gap:12px; }
 .header-listen { font-size:9px; padding-inline:10px; gap:9px; }
 .hero { padding-top:43px; }
 h1 { font-size:59px; }
 .hero-description { font-size:12px; }
 .hero-actions { gap:17px; }
 .button-primary { min-width:145px; padding-inline:18px; }
 .explore-link { font-size:9px; gap:7px; }
 .hero-nowplaying { padding:12px 16px; }
 .np-heading { font-size:6px; letter-spacing:1.2px; }
 .np-copy strong { font-size:11px; }
 .np-footnote { display:none; }
 h2 { font-size:30px; }
 .card-visual { height:310px; }
 .manifesto-copy h2 { font-size:58px; }
 .closing { padding-inline:21px; gap:10px; }
 .closing h2 { font-size:44px; }
 .closing-play { width:77px; height:77px; }
 .player-inner { padding-inline:14px; gap:9px; }
 .player-status { max-width:54px; font-size:7px; }
 .track-info { gap:7px; }
 .track-art { width:35px; height:35px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
html[data-motion=off] .hero-enter { opacity:1!important; transform:none!important; }
html[data-motion=off] .reveal { opacity:1!important; transform:none!important; transition:none!important; }
html[data-motion=off] { scroll-behavior:auto; }
html[data-motion=off] .portal-core,html[data-motion=off] .hero-nowplaying { transition:none; }


/* Recent tracks use the same metadata refresh as the player. */
.history-section { padding-top:88px; }
.history-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:30px; }
.history-heading h2 { font-size:45px; letter-spacing:-1.9px; margin-top:13px; }
.history-dot { width:5px; height:5px; border-radius:50%; background:#8bc4b3; }
.history-description { text-align:right; padding-bottom:3px; }
.history-description p { margin:0 0 10px; color:#8ba3b8; font-size:12px; }
.history-description > span { display:flex; justify-content:flex-end; align-items:center; gap:8px; color:#5d7b92; font-size:9px; }
.history-description .icon { width:14px; height:14px; }
.history-panel { border:1px solid #a0d0e426; border-radius:17px; overflow:hidden; background:linear-gradient(110deg,#101a228c,#0a1017b3); }
.history-list { list-style:none; margin:0; padding:0 25px; }
.history-list:empty { display:none; }
.history-item { display:grid; grid-template-columns:42px minmax(0,1fr) 80px; gap:18px; align-items:center; min-height:88px; padding:18px 5px; }
.history-item + .history-item { border-top:1px solid #a0d0e414; }
.history-index { display:grid; place-items:center; width:32px; height:32px; border:1px solid #a9ffdc20; border-radius:50%; color:#8cafb1; font:10px monospace; }
.history-item:first-child .history-index { color:#baffdf; background:#a9ffdc0a; border-color:#a9ffdc3b; }
.history-song { min-width:0; display:flex; flex-direction:column; gap:6px; }
.history-track-title { display:block; font-size:14px; line-height:1.5; font-weight:400; color:#e0ecee; overflow-wrap:anywhere; }
.history-track-artist { display:block; font-size:11px; line-height:1.6; color:#8099b1; overflow-wrap:anywhere; }
.history-stamp { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.history-time-label { color:#4f6a81; font:6px monospace; letter-spacing:1.2px; }
.history-stamp time { font:12px monospace; color:#9eb9c4; letter-spacing:.6px; }
.history-message { margin:0; padding:35px 30px; font-size:13px; line-height:1.8; color:#8ca9b9; }
.history-panel-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 29px; border-top:1px solid #a0d0e417; color:#4e6b82; font:7px monospace; letter-spacing:1.1px; background:#a9ffdc02; }
.history-panel-footer > span:last-child { color:#6b8b98; font:9px var(--font); letter-spacing:0; }
@media (max-width:850px) { .history-heading h2 { font-size:39px; } .history-description p { font-size:11px; } }
@media (max-width:700px) {
 .history-section { padding-top:62px; }
 .history-heading { display:block; margin-bottom:25px; }
 .history-heading h2 { font-size:35px; }
 .history-description { margin-top:18px; text-align:left; }
 .history-description p { font-size:12px; margin-bottom:9px; }
 .history-description > span { justify-content:flex-start; }
 .history-panel { border-radius:13px; }
 .history-list { padding-inline:16px; }
 .history-item { grid-template-columns:28px minmax(0,1fr) 47px; gap:11px; padding:19px 0; min-height:90px; }
 .history-index { width:26px; height:26px; font-size:8px; }
 .history-track-title { font-size:12px; }
 .history-track-artist { font-size:10px; }
 .history-time-label { display:none; }
 .history-stamp { align-self:start; padding-top:4px; }
 .history-stamp time { font-size:10px; letter-spacing:0; }
 .history-panel-footer { padding:14px 16px; gap:16px; }
 .history-panel-footer > span:first-child { font-size:5px; letter-spacing:.7px; }
 .history-panel-footer > span:last-child { font-size:8px; }
 .history-message { padding:26px 20px; font-size:12px; }
}
@media (max-width:365px) {
 .history-heading h2 { font-size:32px; }
 .history-list { padding-inline:13px; }
 .history-item { grid-template-columns:24px minmax(0,1fr) 39px; gap:9px; }
 .history-index { width:23px; height:23px; }
 .history-track-title { font-size:11px; }
 .history-track-artist { font-size:9px; }
 .history-stamp time { font-size:9px; }
}

/* Keep standalone iOS content below the status bar. */
body { padding-top:env(safe-area-inset-top,0px); }

/* Installation stays in the footer so the listening controls remain primary. */
.install-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 15px; border:1px solid #a9ffdc45; border-radius:24px; background:#a9ffdc08; color:#b9f7dc; font-size:11px; }
.install-button[hidden] { display:none; }
.install-button .icon { width:16px; height:16px; }
.install-button:hover { background:#a9ffdc15; }
.install-dialog { position:fixed; width:min(440px,calc(100% - 40px)); max-height:calc(100svh - 60px); overflow:auto; padding:38px 30px 30px; border:1px solid #a9ffdc35; border-radius:20px; background:#0c131f; color:var(--text); text-align:center; box-shadow:0 20px 90px #0009; }
.install-dialog::backdrop { background:#03060bd9; backdrop-filter:blur(8px); }
.install-dialog img { display:block; margin:0 auto 25px; border-radius:18px; }
.install-dialog .eyebrow { justify-content:center; font-size:8px; letter-spacing:1.4px; }
.install-dialog h2 { margin:15px 0; font-size:29px; line-height:1.2; }
#install-instructions { color:#b2c2d5; font-size:14px; line-height:1.9; }
.install-note { color:#8096ae; font-size:11px; margin-top:22px; }
.install-close { position:absolute; top:8px; right:11px; width:36px; height:36px; border:0; border-radius:50%; background:none; color:#b2c2d5; font-size:26px; line-height:1; }
.footer-top { flex-wrap:wrap; }
.listening-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 15px; border:1px solid #a9ffdc35; border-radius:24px; background:transparent; color:#b9d8d5; font-size:11px; }
.listening-button:hover { background:#a9ffdc0c; }
.listening-button .icon { width:17px; height:17px; }
.listening-dialog { position:fixed; width:min(460px,calc(100% - 32px)); max-height:calc(100svh - 48px); overflow:auto; padding:38px 28px 24px; border:1px solid #a9ffdc35; border-radius:20px; background:#0c131f; color:var(--text); box-shadow:0 20px 90px #0009; }
.listening-dialog::backdrop { background:#03060bd9; backdrop-filter:blur(8px); }
.listening-dialog .eyebrow { font-size:8px; letter-spacing:1.5px; }
.listening-dialog h2 { margin:14px 0 24px; font-size:30px; line-height:1.2; }
.listening-setting { padding:20px 0; border-top:1px solid var(--line); }
.listening-setting > label { display:block; font-size:14px; color:#e1eeef; }
.listening-setting .data-saver-label { display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; }
.data-saver-label small { display:block; margin-top:4px; color:#9daec2; font-size:12px; }
#data-saver { flex:0 0 auto; width:24px; height:24px; accent-color:var(--aqua); cursor:pointer; }
#sleep-timer { width:100%; min-height:48px; margin-top:12px; padding:10px 12px; border:1px solid #aacfe747; border-radius:9px; background:#101d29; color:var(--text); font:inherit; }
.setting-note { margin:12px 0 0; color:#9daec2; font-size:12px; line-height:1.7; }
.sleep-status { flex:0 0 auto; min-width:40px; min-height:44px; padding:4px 8px; border:1px solid #a9ffdc35; border-radius:10px; background:#a9ffdc08; color:var(--aqua); font:11px monospace; }
.sleep-status[hidden] { display:none; }
select:focus-visible { outline:2px solid var(--aqua); outline-offset:4px; }
@media (max-width:760px) {
  .sleep-status { min-width:36px; padding-inline:5px; font-size:10px; }
  .listening-dialog { padding-inline:22px; }
}
@media (max-width:760px) { .footer-top { flex-wrap:wrap; } .install-button { font-size:10px; padding:10px 12px; } }

/* Song timing is read-only: this is the shared live broadcast. */
body { padding-bottom:calc(154px + env(safe-area-inset-bottom,0px)); }
.song-progress { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:0 23px 13px; }
.song-progress[hidden] { display:none; }
.song-time { min-width:5ch; color:#a9bccd; font:10px/1.2 monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
#song-remaining { text-align:right; color:#b3ead8; }
#song-progress-meter { display:block; width:100%; height:3px; border:0; border-radius:3px; overflow:hidden; appearance:none; -webkit-appearance:none; background:#a6c8e51f; accent-color:var(--aqua); }
#song-progress-meter::-webkit-progress-bar { border-radius:3px; background:#a6c8e51f; }
#song-progress-meter::-webkit-progress-value { border-radius:3px; background:linear-gradient(90deg,#a9ffdc,#87c4ee,#b6a2ff); transition:width .8s linear; }
#song-progress-meter::-moz-progress-bar { border-radius:3px; background:linear-gradient(90deg,#a9ffdc,#87c4ee,#b6a2ff); }
.toast { bottom:calc(153px + env(safe-area-inset-bottom,0px)); }
@media (max-width:760px) {
  body { padding-bottom:calc(110px + env(safe-area-inset-bottom,0px)); }
  .song-progress { gap:10px; padding:0 20px 12px; }
  .song-time { font-size:9px; }
  .toast { bottom:calc(127px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:365px) { .song-progress { padding-inline:14px; } }
@media (prefers-reduced-motion:reduce) { #song-progress-meter::-webkit-progress-value { transition:none; } }

.track-text { flex:1 1 auto; }
.favorite-toggle { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:11px; border:0; border-radius:50%; background:transparent; color:#9aacc2; transition:color .2s,background .2s; }
.favorite-toggle svg,.favorites-open svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.favorite-toggle:hover:not(:disabled) { color:var(--aqua); background:#a9ffdc0c; }
.favorite-toggle[aria-pressed=true] { color:var(--aqua); }
.favorite-toggle[aria-pressed=true] svg { fill:currentColor; }
.favorite-toggle:disabled { opacity:.35; }
.favorites-open { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 15px; border:1px solid #a9ffdc35; border-radius:24px; background:transparent; color:#b9d8d5; font-size:11px; }
.favorites-open:hover { background:#a9ffdc0c; }
.favorites-open svg { width:16px; height:16px; }
.favorites-count { display:inline-grid; place-items:center; min-width:20px; height:20px; padding-inline:5px; border-radius:12px; background:#a9ffdc13; color:#c2f7dd; font:10px monospace; }
.favorites-dialog { position:fixed; width:min(560px,calc(100% - 32px)); max-height:calc(100svh - 48px); overflow:auto; padding:38px 28px 24px; border:1px solid #a9ffdc35; border-radius:20px; background:#0c131f; color:var(--text); box-shadow:0 20px 90px #0009; }
.favorites-dialog[open] { display:flex; flex-direction:column; }
.favorites-dialog::backdrop { background:#03060bd9; backdrop-filter:blur(8px); }
.favorites-dialog .eyebrow { margin:0; font-size:8px; letter-spacing:1.5px; }
.favorites-dialog h2 { margin:14px 0 10px; font-size:32px; line-height:1.2; }
.favorites-note { color:#9daec2; font-size:12px; margin:0 0 22px; }
.favorites-list { min-height:0; overflow:auto; overscroll-behavior:contain; margin:0; padding:0; list-style:none; }
.favorites-item { display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); padding:14px 0; }
.favorites-song { flex:1 1 auto; min-width:0; }
.favorites-song strong { display:block; color:#e1eeef; font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.favorites-song > span { display:block; margin-top:4px; color:#95a9c1; font-size:12px; overflow-wrap:anywhere; }
.favorites-remove { display:grid; place-items:center; flex:0 0 auto; min-width:44px; min-height:44px; border:1px solid #a9c7e326; border-radius:50%; background:transparent; color:#9daec2; font-size:23px; }
.favorites-remove:hover { background:#a9ffdc0c; border-color:#a9ffdc55; color:#c2f7dd; }
.favorites-empty { margin:8px 0 16px; padding:28px 20px; border:1px dashed #a9c7e32b; border-radius:12px; color:#a9bacd; text-align:center; font-size:14px; }
.favorites-empty[hidden],.favorites-storage-note[hidden] { display:none; }
.favorites-storage-note { color:#e8c89f; font-size:12px; margin:16px 0 0; }
@media (max-width:760px) {
  .favorite-toggle { margin-left:0; }
  .favorites-dialog { padding-inline:22px; }
  .favorites-dialog h2 { font-size:29px; }
}
@media (max-width:760px) {
  /* Keep song names readable when both the heart and sleep timer are visible. */
  .player-controls { display:grid; grid-template-columns:auto 44px; gap:0 10px; }
  .player-play { grid-column:2; grid-row:1 / span 2; }
  .player-status { grid-column:1; grid-row:1; }
  .sleep-status { grid-column:1; grid-row:2; justify-self:start; }
  body { padding-bottom:calc(124px + env(safe-area-inset-bottom,0px)); }
  .toast { bottom:calc(141px + env(safe-area-inset-bottom,0px)); }
}