*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0d0705;font-family:"Trebuchet MS",Arial,sans-serif}body{min-height:100dvh;overflow-x:hidden}.stage{min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;background:radial-gradient(circle at 50% 35%,#3b1609 0,#0d0705 65%)}.machine{container-type:inline-size;position:relative;width:min(100vw,971px);aspect-ratio:971/1619;overflow:hidden;isolation:isolate;background:#120906}.jukebox-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;user-select:none;pointer-events:none}

.catalogue-shell{position:absolute;left:17.0%;top:16.15%;width:66.0%;height:34.05%;z-index:5;background:#120c08;border-radius:1.2%;overflow:hidden}.catalogue{position:absolute;left:.4%;top:.2%;width:91.7%;height:99.4%;display:grid;grid-template-rows:repeat(10,1fr);gap:.65%;overflow:hidden;touch-action:pan-y}.song{border:0;border-radius:7px;background:linear-gradient(180deg,#fffaf0 0,#eadcc6 100%);box-shadow:inset 0 0 0 1px #7a5634,0 1px 3px #000a;color:#18120e;display:grid;grid-template-columns:11.5% 1fr 11.5%;align-items:center;padding:0 .6%;font-family:"Arial Narrow","Avenir Next Condensed","Trebuchet MS",Arial,sans-serif;font-weight:700;font-size:clamp(10px,2.62cqw,25px);letter-spacing:-.02em;cursor:pointer;text-align:left;min-height:0}.song .n{width:70%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;justify-self:center;color:#fff7dc;background:radial-gradient(circle at 35% 25%,#ff4a3e,#b0050d 63%,#4b0005);border:1px solid #f0bd54;box-shadow:0 1px 4px #0008;font-size:.82em}.song .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:1.3%}.song.selected{background:linear-gradient(#fff1b2,#efc857);box-shadow:0 0 11px #ffc94d,inset 0 0 0 2px #d79312}.song:active{transform:scale(.993)}.scrollrail{position:absolute;right:2.8%;top:2%;width:1.6%;height:96%;border-radius:999px;border:1px solid #b27a33;background:#24150b;box-shadow:inset 0 0 5px #000}.scrollthumb{position:absolute;left:-62%;top:0;width:224%;height:15%;border-radius:999px;background:linear-gradient(90deg,#f7b824,#fff3ab,#e7a117);box-shadow:0 0 7px #ffd65a;touch-action:none;cursor:ns-resize}

.display-panel{position:absolute;z-index:8;left:17.0%;top:51.25%;width:66.0%;height:31.6%;padding:2.1% 4.4% 2.2%;color:#f6ead0;background:linear-gradient(180deg,rgba(4,4,4,.985),rgba(7,5,4,.99) 74%,rgba(28,12,7,.99));border:1px solid #744a28;border-radius:2.4%;box-shadow:inset 0 0 0 2px #170c07,inset 0 0 25px #000,0 0 4px #000;overflow:hidden}.display-header{height:14%;display:flex;align-items:center;gap:2%;border-bottom:1px solid #9a6b2d55}.display-header h1{margin:0;flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(13px,2.55cqw,29px);letter-spacing:.005em;color:#fff0c5;text-shadow:0 1px 3px #000,0 0 9px #85501f}.info-button{width:8.2%;aspect-ratio:1;border:1px solid #e4ab3f;border-radius:18%;background:linear-gradient(#2d1a0e,#0d0805);color:#ffd868;font-family:Georgia,serif;font-size:clamp(11px,2.1cqw,24px);font-weight:700;box-shadow:inset 0 0 0 1px #5b371b,0 0 8px #f6a42444;cursor:pointer}.display-main{height:53%;display:grid;grid-template-columns:31% 1fr;gap:4.5%;align-items:center;padding-top:2.7%}.cover-art{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3%;border:1px solid #59442b;box-shadow:0 5px 14px #000b}.lyrics{height:100%;display:flex;flex-direction:column;justify-content:center;overflow:hidden;font-family:"Avenir Next",Arial,sans-serif;font-size:clamp(8px,1.62cqw,18px);line-height:1.42}.lyric-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d9d0c1;opacity:.56;transition:.18s}.lyric-line.active{color:#ffd85a;opacity:1;font-weight:700;text-shadow:0 0 7px #9a6100;transform:translateX(1.5%)}.progress-row{height:12%;display:grid;grid-template-columns:auto 1fr auto;gap:2.2%;align-items:center;font-family:"Arial Narrow",Arial,sans-serif;font-size:clamp(7px,1.25cqw,14px);font-weight:600}.progress{position:relative;height:100%;cursor:pointer;touch-action:none}.progress:before{content:"";position:absolute;left:0;right:0;top:43%;height:16%;border-radius:999px;background:#3e4959;box-shadow:inset 0 1px 2px #000}.progress-fill{position:absolute;left:0;top:43%;height:16%;width:0;border-radius:999px;background:#f0d252;box-shadow:0 0 5px #ffc426}.progress-knob{position:absolute;left:0;top:14%;width:4.2%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:#ffe87c;box-shadow:0 0 7px #ffc426}.transport-row{height:19%;display:flex;align-items:center;justify-content:center;gap:5%}.transport{height:62%;min-width:20%;padding:0 4%;border:1px solid #ce9137;border-radius:10px;background:linear-gradient(#2b1b12,#0b0806);color:#ffe168;box-shadow:inset 0 0 0 1px #5b3a1f,0 2px 5px #0009,0 0 7px #d88d2633;font-family:Arial,sans-serif;font-size:clamp(11px,2.05cqw,24px);font-weight:900;cursor:pointer;touch-action:manipulation}.transport.play{min-width:23%;font-size:clamp(13px,2.3cqw,28px)}.transport:active{transform:translateY(1px);box-shadow:inset 0 0 7px #000}

.side-button{position:absolute;z-index:10;border:1px solid #8d5a2f;border-radius:15%;background:linear-gradient(180deg,rgba(44,24,14,.96),rgba(17,9,5,.98));box-shadow:inset 0 0 0 2px #3a2318,0 0 8px #ff8b2533;color:#f4d878;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;text-shadow:0 1px 2px #000}.side-button span{white-space:nowrap;font-family:"Arial Narrow",Arial,sans-serif;font-size:clamp(6px,1.18cqw,13px);font-weight:700;letter-spacing:.045em}.side-button b{font-family:Georgia,serif;font-size:clamp(13px,2.45cqw,27px);font-weight:600;line-height:1;margin-top:6%}.playlist-button{left:2.8%;top:84.35%;width:13.3%;height:8.75%}.about-button{right:2.9%;top:84.35%;width:13.3%;height:8.75%}

.light-sweep{position:absolute;z-index:3;top:0;left:-28%;width:22%;height:90%;background:linear-gradient(90deg,transparent,#fff3,transparent);filter:blur(10px);transform:skewX(-12deg);mix-blend-mode:screen;pointer-events:none;animation:sweep 7.5s ease-in-out infinite}.tube-glow{position:absolute;z-index:2;top:1%;height:76%;width:8%;filter:blur(12px);opacity:.25;pointer-events:none;background:#ffb52f;border-radius:999px;animation:tube 2.2s ease-in-out infinite alternate}.glow-left{left:6%}.glow-right{right:6%;animation-delay:.65s}.bulb-run{position:absolute;inset:0;z-index:4;pointer-events:none}.bulb-run i{position:absolute;left:var(--x);top:var(--y);width:1.3%;aspect-ratio:1;border-radius:50%;background:#fff2a6;box-shadow:0 0 10px #fff4a0,0 0 24px #ff8d18;opacity:.10;animation:bulbChase 2.8s linear infinite;animation-delay:calc(var(--d)*-.18s)}.machine:not(.playing) .bulb-run i{animation-duration:6.5s;opacity:.08}@keyframes bulbChase{0%,80%,100%{opacity:.07;transform:scale(.65)}7%,19%{opacity:1;transform:scale(1.35)}}@keyframes sweep{0%,55%{left:-28%;opacity:0}63%{opacity:.8}88%{left:110%;opacity:.18}100%{left:110%;opacity:0}}@keyframes tube{from{opacity:.16}to{opacity:.44}}

.speaker-live{position:absolute;z-index:6;left:19.57%;top:84.00%;width:61.28%;height:10.50%;object-fit:fill;transform-origin:50% 60%;pointer-events:none;will-change:transform,filter}.speaker-glow{position:absolute;z-index:7;left:45.7%;top:87.0%;width:8.6%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffdf83 0,#ff3b1f 30%,#b00000 54%,transparent 72%);mix-blend-mode:screen;opacity:.25;filter:blur(3px);will-change:transform,opacity}

.panel-dialog{width:min(80%,540px);max-height:76%;overflow:auto;border:2px solid #c48a40;border-radius:20px;background:linear-gradient(#24130a,#0a0604);color:#f7e3aa;box-shadow:0 0 35px #000,0 0 24px #f59b2633;padding:5% 5% 4%;font-family:"Trebuchet MS",Arial,sans-serif}.panel-dialog::backdrop{background:#000c}.panel-dialog h2{text-align:center;margin:0 0 5%;font-family:Georgia,serif;font-weight:600;letter-spacing:.025em}.panel-dialog h3{margin:5% 0 2%;color:#f4cf63}.close{position:absolute;right:4%;top:2%;border:0;background:transparent;color:#ffe47c;font-size:34px;cursor:pointer}.info-dialog{width:min(86%,650px)}.info-grid{display:grid;grid-template-columns:36% 1fr;gap:6%;align-items:start}.info-art{width:100%;border-radius:10px;border:1px solid #91642f}.info-meta p{margin:0 0 10%}.info-meta strong{color:#e9c45b}.full-lyrics{width:100%;padding:12px;border:1px solid #a87531;border-radius:10px;background:#120b07;color:#f4d56d;font-weight:700;cursor:pointer}.full-lyrics-text{line-height:1.65;white-space:pre-wrap;color:#eee1c9}.full-lyrics-text .active-full{color:#ffd65a;font-weight:700}.playlist-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.playlist-choice{border:1px solid #956533;border-radius:999px;background:#180c07;color:#f2d16f;padding:12px 10px;font-weight:700;text-transform:capitalize;cursor:pointer}.playlist-choice.active{background:#7e160f;color:#fff0b0}.panel-dialog p{line-height:1.5}
@media(max-width:600px){.machine{width:100vw}.song{font-size:clamp(10px,2.85cqw,17px)}.display-header h1{font-size:clamp(12px,2.65cqw,18px)}.lyrics{font-size:clamp(8px,1.68cqw,13px)}.transport{border-radius:7px}.side-button span{font-size:clamp(7px,1.45cqw,12px)}.playlist-choices{grid-template-columns:1fr}.panel-dialog{width:90%}.info-grid{grid-template-columns:32% 1fr}}
@media(min-aspect-ratio:1/1){.stage{align-items:center;padding:12px}.machine{height:min(98dvh,1619px);width:auto}}
@media(prefers-reduced-motion:reduce){.light-sweep,.tube-glow,.bulb-run i{animation:none!important}}

@property --flow-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.neon-flow{
 position:absolute; z-index:3; left:5.4%; top:.5%; width:89.2%; height:95.1%;
 border-radius:48% 48% 8% 8% / 18% 18% 4% 4%; padding:1.05%; pointer-events:none;
 background:conic-gradient(from var(--flow-angle),
 transparent 0 34deg, rgba(255,244,167,.08) 43deg, rgba(255,244,167,.95) 54deg,
 rgba(255,151,24,.72) 65deg, transparent 82deg 160deg,
 rgba(255,225,111,.08) 171deg, rgba(255,244,181,.9) 184deg,
 rgba(255,120,16,.66) 197deg, transparent 214deg 302deg,
 rgba(255,240,151,.08) 315deg, rgba(255,247,193,.92) 326deg,
 rgba(255,139,24,.68) 338deg, transparent 353deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor; mask-composite:exclude;
 filter:blur(.8px) drop-shadow(0 0 5px rgba(255,170,42,.5));
 mix-blend-mode:screen; opacity:.34; animation:flowAround 8.5s linear infinite;
}
.neon-flow::after{content:"";position:absolute;inset:-1.5%;border-radius:inherit;box-shadow:0 0 12px rgba(255,185,62,.25),0 0 25px rgba(255,100,15,.15)}
.machine.playing .neon-flow{opacity:.64;animation-duration:4.8s;filter:blur(.7px) drop-shadow(0 0 7px rgba(255,190,60,.72))}
@keyframes flowAround{to{--flow-angle:360deg}}
.machine.playing .tube-glow{animation-duration:1.55s}.machine.playing .light-sweep{animation-duration:5.4s}

.panel-dialog{
 width:min(62cqw,640px); max-width:92cqw; max-height:62dvh; overflow:auto;
 border:1px solid rgba(232,180,81,.72); border-radius:14px;
 background:linear-gradient(180deg,rgba(24,13,8,.83),rgba(7,5,4,.76));
 color:#f7e3aa; box-shadow:0 14px 46px rgba(0,0,0,.72),0 0 20px rgba(245,155,38,.18);
 padding:3.5% 4% 3%; backdrop-filter:blur(15px) saturate(115%); -webkit-backdrop-filter:blur(15px) saturate(115%);
 scrollbar-width:none;
}
.panel-dialog::-webkit-scrollbar{display:none}.panel-dialog::backdrop{background:rgba(0,0,0,.58);backdrop-filter:blur(2px)}
.panel-dialog h2{font-size:clamp(17px,2.25cqw,28px);margin:0 0 3.5%}.panel-dialog h3{margin:3.5% 0 1.5%}.panel-dialog p{line-height:1.4;margin:.5em 0}
.close{right:3%;top:1.5%;font-size:28px}.info-dialog{width:min(68cqw,700px);max-height:68dvh}.lyrics-dialog{width:min(64cqw,660px);max-height:70dvh}
#playlistDialog{width:min(50cqw,500px);max-height:55dvh;padding:3.2% 3.5% 3%}#aboutDialog{width:min(50cqw,500px);max-height:52dvh;text-align:center}
.playlist-choices{grid-template-columns:1fr 1fr;gap:7px}.playlist-choice{padding:8px 8px;border-radius:9px;font-size:clamp(10px,1.35cqw,14px);letter-spacing:.01em}
.info-grid{grid-template-columns:29% 1fr;gap:4%}.info-meta p{margin:0 0 5%}.full-lyrics{padding:9px;border-radius:8px}
.contact-button{display:inline-flex;align-items:center;justify-content:center;margin:5% auto 0;padding:9px 16px;border:1px solid rgba(228,171,63,.8);border-radius:8px;background:rgba(18,11,7,.72);color:#f4d56d;text-decoration:none;font-weight:700;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(91,55,27,.5)}
@media(max-width:600px){.panel-dialog{width:78cqw;max-width:88cqw;padding:4%}.info-dialog{width:82cqw}.lyrics-dialog{width:82cqw}#playlistDialog,#aboutDialog{width:70cqw}.playlist-choices{grid-template-columns:1fr 1fr}.playlist-choice{padding:7px 6px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.neon-flow{animation:none!important}}

.catalogue-shell{top:15.9%;height:34.5%}
.catalogue{gap:.42%}
.song{
 border-radius:8px;
 grid-template-columns:12% 1fr;
 font-size:clamp(11px,2.78cqw,27px);
 padding:0 .5%;
 box-shadow:inset 0 0 0 1px #76502f,0 1px 3px #000a;
}
.song .n{width:73%;font-size:.80em}


.display-panel{top:51.15%;height:31.25%;padding:2.0% 4.1% 2.1%}
.display-header{height:13.5%;border-bottom:0}
.display-header h1{
 font-family:Georgia,"Times New Roman",serif;
 font-size:clamp(13px,2.42cqw,27px);
 font-weight:600;letter-spacing:.002em;
}
.info-button{width:7.5%;border-radius:9px;font-size:clamp(10px,1.9cqw,21px)}
.display-main{height:54.5%;grid-template-columns:27.5% 1fr;gap:4.2%;padding-top:2.0%}
.cover-art{width:100%;border-radius:2%}
.lyrics{font-size:clamp(8px,1.66cqw,18px);line-height:1.46}
.lyric-line{opacity:.48}
.lyric-line.active{transform:none}
.progress-row{height:11.5%;font-size:clamp(7px,1.2cqw,13px)}
.transport-row{height:20%;gap:3.5%}
.transport{
 height:55%; min-width:18%; padding:0 3.2%; border-radius:7px;
 border:1px solid #c88e36;
 background:linear-gradient(180deg,rgba(40,24,14,.96),rgba(9,6,4,.98));
 color:#ffe06a; font-size:clamp(10px,1.82cqw,20px);
 box-shadow:inset 0 0 0 1px #53351d,0 2px 5px #000b,0 0 6px #e39a2a22;
}
.transport.play{min-width:20%;font-size:clamp(12px,2.02cqw,23px);box-shadow:inset 0 0 0 1px #6a421e,0 2px 5px #000b,0 0 9px #ffc03d44}

.neon-flow{
 left:5.0%;top:.35%;width:90%;height:95.4%;padding:.9%;opacity:.42;
 background:conic-gradient(from var(--flow-angle),
 transparent 0 18deg,
 rgba(255,225,120,.05) 24deg,
 rgba(255,250,205,.98) 31deg,
 rgba(255,187,55,.86) 40deg,
 rgba(255,92,12,.40) 51deg,
 transparent 66deg 198deg,
 rgba(255,217,105,.05) 206deg,
 rgba(255,249,196,.96) 214deg,
 rgba(255,160,37,.78) 224deg,
 rgba(255,74,6,.32) 236deg,
 transparent 252deg 360deg);
 filter:blur(.65px) drop-shadow(0 0 7px rgba(255,176,42,.58));
 animation:flowAround 7.2s linear infinite;
}
.machine.playing .neon-flow{opacity:.76;animation-duration:3.9s;filter:blur(.55px) drop-shadow(0 0 9px rgba(255,196,70,.78))}
.machine.playing .bulb-run i{animation-duration:2.05s}
.machine.playing .light-sweep{animation-duration:4.6s}

.speaker-live{transform-origin:50% 58%;transition:filter .06s linear}

.panel-dialog{
 width:min(72cqw,700px);max-width:78cqw;max-height:66dvh;
 padding:3.1% 3.4% 2.8%;
 border:1px solid rgba(238,191,91,.70);border-radius:16px;
 background:linear-gradient(180deg,rgba(15,10,8,.60),rgba(8,6,5,.54));
 box-shadow:0 14px 44px rgba(0,0,0,.62),inset 0 0 30px rgba(255,189,72,.025),0 0 16px rgba(236,157,48,.18);
 backdrop-filter:blur(18px) saturate(122%);-webkit-backdrop-filter:blur(18px) saturate(122%);
}
.panel-dialog::backdrop{background:rgba(0,0,0,.42);backdrop-filter:blur(3px)}
.panel-dialog h2{font-size:clamp(16px,2.0cqw,24px);margin:0 0 2.7%;letter-spacing:.02em}
.panel-dialog h3{font-size:clamp(12px,1.55cqw,18px);margin:2.8% 0 1.2%}
.panel-dialog p{font-size:clamp(10px,1.25cqw,15px);line-height:1.38}
.close{right:2.5%;top:1%;font-size:26px}
.info-dialog{width:min(74cqw,720px);max-height:68dvh}
.lyrics-dialog{width:min(72cqw,700px);max-height:70dvh}
#playlistDialog{width:min(72cqw,700px);max-height:58dvh;padding:3% 3.4% 2.8%}
#aboutDialog{width:min(72cqw,700px);max-height:58dvh;padding:3% 4%;text-align:center}
.playlist-choices{grid-template-columns:1fr 1fr 1fr;gap:7px}
.playlist-choice{padding:7px 6px;border-radius:8px;font-size:clamp(9px,1.12cqw,13px);font-weight:700;background:rgba(19,12,8,.48)}
.playlist-choice.active{background:linear-gradient(180deg,rgba(171,35,19,.88),rgba(101,15,10,.86));box-shadow:0 0 8px rgba(255,96,34,.22)}
.info-grid{grid-template-columns:24% 1fr;gap:4%}
.info-meta p{font-size:clamp(9px,1.15cqw,13px);margin:0 0 3.5%}
.full-lyrics{padding:7px 10px;font-size:clamp(9px,1.15cqw,13px);background:rgba(18,11,7,.48)}
.full-lyrics-text{font-size:clamp(10px,1.2cqw,14px);line-height:1.48}
.contact-button{padding:7px 13px;font-size:clamp(9px,1.15cqw,13px);background:rgba(18,11,7,.48)}

@media(max-width:600px){
 .song{font-size:clamp(11px,2.95cqw,18px)}
 .panel-dialog,.info-dialog,.lyrics-dialog,#playlistDialog,#aboutDialog{width:78cqw;max-width:82cqw}
 .playlist-choices{grid-template-columns:1fr 1fr}
 .playlist-choice{padding:7px 5px;font-size:9.5px}
 .display-main{grid-template-columns:26.5% 1fr}
}

.song{font-size:clamp(10px,2.48cqw,23px);letter-spacing:-.025em}
.song.title-long{font-size:clamp(9.5px,2.18cqw,20px)}
.song.title-xlong{font-size:clamp(9px,1.92cqw,18px);letter-spacing:-.035em}
.song .t{text-overflow:clip}

#playlistDialog,#aboutDialog{width:min(82cqw,760px);max-width:86cqw;max-height:64dvh}
#playlistDialog{padding:2.7% 3.2% 2.6%}
#aboutDialog{padding:3.2% 4.2% 3.3%}
.playlist-choices{grid-template-columns:1fr 1fr 1fr;gap:6px 8px}
.playlist-choice{padding:5px 5px;min-height:30px;border-radius:7px;font-size:clamp(8px,.98cqw,11.5px);font-weight:650;letter-spacing:0}
.panel-dialog{background:linear-gradient(180deg,rgba(14,10,8,.48),rgba(7,5,4,.44));border-color:rgba(242,198,106,.62);backdrop-filter:blur(16px) saturate(118%);-webkit-backdrop-filter:blur(16px) saturate(118%)}
.panel-dialog::backdrop{background:rgba(0,0,0,.34);backdrop-filter:blur(2px)}
#aboutDialog p{max-width:92%;margin:1.8% auto;font-size:clamp(9px,1.08cqw,13px);line-height:1.42}

.transport-row{gap:2.7%}
.transport{height:49%;min-width:16.5%;padding:0 2.5%;border-radius:6px;font-size:clamp(9px,1.55cqw,17px)}
.transport.play{min-width:18%;font-size:clamp(11px,1.72cqw,20px)}

@media(max-width:600px){
 .song{font-size:clamp(10px,2.55cqw,16px)}
 .song.title-long{font-size:clamp(9.2px,2.28cqw,14.5px)}
 .song.title-xlong{font-size:clamp(8.5px,2.02cqw,13px)}
 #playlistDialog,#aboutDialog{width:86cqw;max-width:88cqw}
 .playlist-choices{grid-template-columns:1fr 1fr}
 .playlist-choice{padding:5px 4px;min-height:28px;font-size:8.7px}
}

.song{font-size:clamp(9px,2.0cqw,18px);letter-spacing:-.01em}
.song.title-long{font-size:clamp(8px,1.75cqw,16px)}
.song.title-xlong{font-size:clamp(7px,1.52cqw,14px)}
.display-header h1{font-size:clamp(12px,2.0cqw,23px);letter-spacing:.01em}
.transport-row{height:19%;gap:3.2%}
.transport{height:52%;min-width:17.5%;padding:0 2.4%;border:1px solid #d7a04d;border-radius:999px;background:linear-gradient(180deg,rgba(46,31,21,.98),rgba(9,7,6,.99));color:#ffe790;box-shadow:inset 0 1px 0 #fff2,inset 0 0 0 1px #6b4526,0 2px 7px #000b,0 0 8px #e5a33b22;font-size:clamp(10px,1.62cqw,18px)}
.transport.play{min-width:19%;height:58%;font-size:clamp(12px,1.9cqw,22px);box-shadow:inset 0 1px 0 #fff3,inset 0 0 0 1px #7b522d,0 2px 8px #000b,0 0 12px #ffc84f33}
.transport-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;transform:translateY(-1px)}
.transport:focus-visible{outline:2px solid #ffe27a;outline-offset:2px}
#playlistDialog{width:min(78cqw,760px);max-width:86cqw;max-height:66dvh;padding:3.0% 3.4% 3.0%;background:linear-gradient(180deg,rgba(26,18,13,.70),rgba(8,6,5,.76));backdrop-filter:blur(12px) saturate(1.12);-webkit-backdrop-filter:blur(12px) saturate(1.12)}
.playlist-choices{grid-template-columns:repeat(3,1fr);gap:7px 9px}
.playlist-choice{padding:5px 5px;min-height:28px;border-radius:9px;font-size:clamp(8px,.95cqw,11px);background:rgba(19,12,8,.38)}
#aboutDialog,.info-dialog,.lyrics-dialog{background:linear-gradient(180deg,rgba(26,18,13,.70),rgba(8,6,5,.78));backdrop-filter:blur(12px) saturate(1.12);-webkit-backdrop-filter:blur(12px) saturate(1.12)}
@media(max-width:600px){.song{font-size:clamp(9px,2.3cqw,15px)}.song.title-long{font-size:clamp(8px,2.0cqw,13px)}.song.title-xlong{font-size:clamp(7px,1.72cqw,12px)}#playlistDialog{width:88cqw;max-width:90cqw}.playlist-choices{grid-template-columns:1fr 1fr}.playlist-choice{font-size:9px;min-height:27px}}


/* v22 — elegant jukebox controls */
.song{
  grid-template-columns:12% 1fr;
  padding-right:2.2%;
}
.song .t{
  padding-right:1%;
}



.transport-row{
  position:relative;
  gap:3%;
  align-items:center;
  justify-content:center;
}
.transport{
  position:relative;
  height:56%;
  min-width:18%;
  padding:0 3%;
  border:1px solid #d8a64a;
  border-radius:999px;
  background:
    linear-gradient(180deg,#2d2118 0%,#15100c 42%,#090706 100%);
  color:#ffd966;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 4px rgba(0,0,0,.72),
    0 2px 8px rgba(0,0,0,.65),
    0 0 8px rgba(231,165,54,.16);
  overflow:visible;
}
.transport::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  border:1px solid rgba(255,205,91,.24);
  pointer-events:none;
}
.transport.play{
  min-width:17%;
  width:17%;
  aspect-ratio:1;
  height:auto;
  border-radius:50%;
  padding:0;
  border:2px solid #e6b85a;
  background:
    radial-gradient(circle at 50% 36%,#3b2a1b 0 12%,#17110d 48%,#080605 76%);
  box-shadow:
    inset 0 0 0 2px rgba(122,77,28,.72),
    inset 0 2px 2px rgba(255,255,255,.12),
    0 3px 10px rgba(0,0,0,.72),
    0 0 10px rgba(255,183,56,.32);
  z-index:2;
}
.transport.play::after{
  content:"";
  position:absolute;
  left:-16%;
  right:-16%;
  top:50%;
  height:22%;
  transform:translateY(-50%);
  z-index:-1;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 7%,
      rgba(215,151,48,.58) 7% 9%,
      transparent 9% 14%);
  opacity:.75;
}
.transport-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-family:Georgia,"Times New Roman",serif;
  color:#ffd45b;
  text-shadow:0 0 6px rgba(255,176,40,.42);
  letter-spacing:-.12em;
}
.transport.play .transport-icon{
  font-family:Arial,sans-serif;
  letter-spacing:0;
  font-weight:900;
  font-size:1.25em;
}
.transport:active{
  transform:translateY(1px) scale(.985);
}
.transport:focus-visible{
  outline:2px solid #ffe27a;
  outline-offset:3px;
}


/* v24 — subtle speaker movement. Native audio playback remains untouched. */
.speaker-live{
  transform-origin:50% 58%;
  will-change:transform;
}
.speaker-glow{
  will-change:transform,opacity;
}
@media(prefers-reduced-motion:reduce){
  .speaker-live,.speaker-glow{transform:none!important}
}

/* v25 — speaker movement made visibly perceptible while remaining subtle */
.machine.playing .speaker-live{
  filter:brightness(1.025);
}


/* v26 — reliable speaker movement and balanced playlist layout */

/* The speaker movement is now CSS-only, so it works on Safari, Chrome and local file:// pages.
   It activates only while the audio element has put the machine into .playing state. */
.machine.playing .speaker-live{
  animation:speakerPulseV26 .46s ease-in-out infinite alternate !important;
  transform-origin:50% 58%;
  will-change:transform,filter;
}
.machine.playing .speaker-glow{
  animation:speakerGlowV26 .46s ease-in-out infinite alternate !important;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
@keyframes speakerPulseV26{
  0%{
    transform:scale(1,1);
    filter:brightness(1);
  }
  100%{
    transform:scale(1.004,1.012);
    filter:brightness(1.045);
  }
}
@keyframes speakerGlowV26{
  0%{
    transform:scale(.985);
    opacity:.24;
  }
  100%{
    transform:scale(1.055);
    opacity:.50;
  }
}

/* Playlist buttons: equal size, centred, and the incomplete final row centres itself. */
#playlistDialog{
  width:min(76cqw,720px);
  max-width:86cqw;
  padding:3.2% 3.8% 3.5%;
}
#playlistDialog h2{
  margin-bottom:4%;
}
.playlist-choices{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 12px;
  width:100%;
  margin:0 auto;
}
.playlist-choice{
  flex:0 0 calc(33.333% - 12px);
  max-width:150px;
  min-width:92px;
  min-height:34px;
  padding:7px 10px;
  border-radius:10px;
  text-align:center;
  line-height:1.15;
}
@media(max-width:600px){
  .playlist-choices{
    gap:8px;
  }
  .playlist-choice{
    flex-basis:calc(50% - 8px);
    min-width:0;
    max-width:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .machine.playing .speaker-live,
  .machine.playing .speaker-glow{
    animation:none !important;
  }
}


/* v27 — remove decorative song dots and neutralise iOS native blue button styling */
.song,
.transport,
.side-button,
.info-button,
.playlist-choice,
.full-lyrics,
.close{
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}

.transport,
.transport:link,
.transport:visited,
.transport:hover,
.transport:focus,
.transport:active{
  color:#ffd45b !important;
  background-color:#0b0806;
}

.transport-icon,
.transport *{
  color:inherit !important;
  -webkit-text-fill-color:currentColor;
}

button{
  font:inherit;
}


/* v28 — clean mobile controls: no stray bulbs, no emoji glyphs */
.bulb-run{display:none !important;}

.transport-icon{
  position:relative;
  display:block;
  width:28px;
  height:22px;
  color:#ffd45b !important;
  -webkit-text-fill-color:#ffd45b !important;
  transform:none !important;
}

/* CSS triangles avoid iOS converting Unicode playback symbols into blue emoji. */
.icon-previous::before,
.icon-previous::after,
.icon-next::before,
.icon-next::after,
.icon-playpause::before{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  filter:drop-shadow(0 0 3px rgba(255,183,55,.35));
}

.icon-previous::before,
.icon-previous::after{
  border-right:10px solid #ffd45b;
}
.icon-previous::before{left:2px;}
.icon-previous::after{left:12px;}

.icon-next::before,
.icon-next::after{
  border-left:10px solid #ffd45b;
}
.icon-next::before{left:5px;}
.icon-next::after{left:15px;}

.icon-playpause::before{
  left:10px;
  border-left:12px solid #ffd45b;
}

/* When playing, central icon becomes two gold pause bars. */
.icon-playpause.is-pause::before{
  width:5px;
  height:16px;
  left:6px;
  border:0;
  background:#ffd45b;
  box-shadow:10px 0 0 #ffd45b,0 0 4px rgba(255,183,55,.35);
  transform:translateY(-50%);
}

@media(max-width:600px){
  .transport-icon{width:24px;height:20px;}
  .icon-previous::before,.icon-previous::after,
  .icon-next::before,.icon-next::after,
  .icon-playpause::before{
    border-top-width:6px;
    border-bottom-width:6px;
  }
  .icon-previous::before,.icon-previous::after{border-right-width:9px;}
  .icon-next::before,.icon-next::after{border-left-width:9px;}
  .icon-playpause::before{border-left-width:11px;left:8px;}
  .icon-playpause.is-pause::before{
    width:4px;height:14px;left:5px;border:0;
    box-shadow:9px 0 0 #ffd45b,0 0 4px rgba(255,183,55,.35);
  }
}

/* v29 — plural playlist label */
.playlist-button span{
  font-size:clamp(5.5px,1.02cqw,11.5px);
  letter-spacing:.025em;
}
@media(max-width:600px){
  .playlist-button span{
    font-size:clamp(6px,1.18cqw,10px);
  }
}


/* v30 — transport controls scaled to sit comfortably inside the jukebox panel */
.transport-row{
  height:18%;
  gap:2.2%;
  padding:0 5%;
}

.transport{
  height:46%;
  min-width:15%;
  padding:0 2%;
  border-width:1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 3px rgba(0,0,0,.68),
    0 2px 5px rgba(0,0,0,.55),
    0 0 6px rgba(231,165,54,.12);
}

.transport::before{
  inset:2px;
}

.transport.play{
  min-width:14%;
  width:14%;
  height:auto;
  border-width:1.5px;
  box-shadow:
    inset 0 0 0 1px rgba(122,77,28,.68),
    inset 0 1px 2px rgba(255,255,255,.10),
    0 2px 7px rgba(0,0,0,.65),
    0 0 7px rgba(255,183,56,.24);
}

.transport.play::after{
  left:-11%;
  right:-11%;
  height:16%;
}

.transport-icon{
  width:22px;
  height:18px;
}

.icon-previous::before,
.icon-previous::after,
.icon-next::before,
.icon-next::after,
.icon-playpause::before{
  border-top-width:5px;
  border-bottom-width:5px;
}

.icon-previous::before,
.icon-previous::after{
  border-right-width:8px;
}
.icon-previous::before{left:2px;}
.icon-previous::after{left:10px;}

.icon-next::before,
.icon-next::after{
  border-left-width:8px;
}
.icon-next::before{left:4px;}
.icon-next::after{left:12px;}

.icon-playpause::before{
  left:7px;
  border-left-width:10px;
}

.icon-playpause.is-pause::before{
  width:3px;
  height:12px;
  left:5px;
  border:0;
  box-shadow:8px 0 0 #ffd45b,0 0 3px rgba(255,183,55,.30);
}

@media(max-width:600px){
  .transport-row{
    height:17.5%;
    gap:2%;
    padding:0 7%;
  }

  .transport{
    height:42%;
    min-width:14%;
    padding:0 1.5%;
  }

  .transport.play{
    width:13%;
    min-width:13%;
  }

  .transport-icon{
    width:18px;
    height:16px;
  }

  .icon-previous::before,
  .icon-previous::after,
  .icon-next::before,
  .icon-next::after,
  .icon-playpause::before{
    border-top-width:4px;
    border-bottom-width:4px;
  }

  .icon-previous::before,
  .icon-previous::after{border-right-width:7px;}
  .icon-next::before,
  .icon-next::after{border-left-width:7px;}

  .icon-previous::before{left:1px;}
  .icon-previous::after{left:8px;}
  .icon-next::before{left:3px;}
  .icon-next::after{left:10px;}

  .icon-playpause::before{
    left:5px;
    border-left-width:9px;
  }

  .icon-playpause.is-pause::before{
    width:3px;
    height:11px;
    left:4px;
    border:0;
    box-shadow:7px 0 0 #ffd45b,0 0 3px rgba(255,183,55,.28);
  }
}


/* v31 — compact SVG transport icons, centred inside their borders */
.transport-row{
  height:17%;
  gap:2.3%;
  padding:0 8%;
}

.transport{
  display:flex;
  align-items:center;
  justify-content:center;
  height:40%;
  min-width:13.5%;
  padding:0;
  overflow:hidden;
}

.transport.play{
  width:12.5%;
  min-width:12.5%;
  aspect-ratio:1;
  height:auto;
  padding:0;
}

.transport-svg{
  width:22px;
  height:14px;
  display:block;
  fill:#ffd45b;
  filter:drop-shadow(0 0 2px rgba(255,183,55,.35));
}

.transport.play .transport-icon{
  width:18px;
  height:18px;
  display:block;
  position:relative;
}

.transport.play .transport-svg{
  position:absolute;
  inset:0;
  width:18px;
  height:18px;
}

.pause-svg{display:none !important;}
.icon-playpause.is-pause .play-svg{display:none !important;}
.icon-playpause.is-pause .pause-svg{display:block !important;}

.transport.play::after{
  left:-7%;
  right:-7%;
  height:12%;
}

@media(max-width:600px){
  .transport-row{
    height:16.5%;
    gap:2.2%;
    padding:0 10%;
  }

  .transport{
    height:38%;
    min-width:12.5%;
  }

  .transport.play{
    width:11.5%;
    min-width:11.5%;
  }

  .transport-svg{
    width:18px;
    height:12px;
  }

  .transport.play .transport-icon,
  .transport.play .transport-svg{
    width:16px;
    height:16px;
  }
}


/* v32 — jukebox-style moulded transport cluster */
.transport-row{
  position:relative;
  height:22%;
  gap:4.8%;
  padding:0 12%;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

/* one moulded backing piece behind all three controls */
.transport-row::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:18%;
  bottom:16%;
  border-radius:999px;
  background:
    linear-gradient(180deg,
      rgba(255,223,145,.18) 0%,
      rgba(93,56,19,.10) 10%,
      rgba(23,16,11,.82) 26%,
      rgba(9,7,6,.96) 54%,
      rgba(30,18,11,.92) 100%);
  border:1.5px solid rgba(223,171,83,.72);
  box-shadow:
    inset 0 2px 0 rgba(255,244,200,.18),
    inset 0 -5px 10px rgba(0,0,0,.65),
    0 6px 18px rgba(0,0,0,.52),
    0 0 18px rgba(224,145,32,.10);
  z-index:-2;
}
.transport-row::after{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  bottom:24%;
  height:18%;
  border-radius:999px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,206,92,.12) 0 2.6%,
      transparent 2.6% 5.3%
    );
  opacity:.6;
  z-index:-1;
}

.transport{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:44%;
  min-width:18%;
  padding:0;
  border:1.5px solid #d9a64b;
  border-radius:999px;
  background:
    linear-gradient(180deg,#2d2219 0%,#18120d 44%,#090706 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 4px rgba(0,0,0,.72),
    0 3px 8px rgba(0,0,0,.45),
    0 0 10px rgba(230,162,48,.10);
  overflow:hidden;
}
.transport::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  border:1px solid rgba(255,220,130,.24);
  pointer-events:none;
}
.transport.previous,
.transport.next{
  min-width:20%;
  height:42%;
}
.transport.play{
  width:16%;
  min-width:16%;
  aspect-ratio:1;
  height:auto;
  border-radius:50%;
  border-width:2px;
  background:
    radial-gradient(circle at 50% 35%, #46331f 0 10%, #24170e 36%, #0a0705 77%);
  box-shadow:
    inset 0 0 0 2px rgba(118,74,27,.78),
    inset 0 2px 2px rgba(255,255,255,.12),
    0 4px 12px rgba(0,0,0,.65),
    0 0 12px rgba(255,184,56,.22);
}
.transport.play::after{
  content:"";
  position:absolute;
  inset:16%;
  border-radius:50%;
  border:1px solid rgba(255,216,118,.28);
  pointer-events:none;
}
.transport-svg{
  width:24px;
  height:16px;
  display:block;
  fill:#ffd55d;
  filter:drop-shadow(0 0 3px rgba(255,184,60,.32));
}
.transport.play .transport-icon{
  width:20px;
  height:20px;
}
.transport.play .transport-svg{
  width:20px;
  height:20px;
}

.transport:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 4px rgba(0,0,0,.72),
    0 4px 10px rgba(0,0,0,.48),
    0 0 12px rgba(255,184,56,.16);
}
.transport:active{
  transform:translateY(1px) scale(.985);
}

@media (max-width: 600px){
  .transport-row{
    height:20.5%;
    gap:5.5%;
    padding:0 11%;
  }
  .transport-row::before{
    left:9%;
    right:9%;
    top:20%;
    bottom:18%;
  }
  .transport-row::after{
    left:14%;
    right:14%;
    bottom:25%;
    height:15%;
  }
  .transport.previous,
  .transport.next{
    min-width:19%;
    height:39%;
  }
  .transport.play{
    width:15.5%;
    min-width:15.5%;
  }
  .transport-svg{
    width:20px;
    height:14px;
  }
  .transport.play .transport-icon,
  .transport.play .transport-svg{
    width:17px;
    height:17px;
  }
}

@media (prefers-reduced-motion: reduce){
  .transport,
  .transport.play{
    transition:none;
  }
}


/* v36 — requested layout refinement only. */
.catalogue-shell{
  height:37.0%;
}

.display-panel{
  top:54.20%;
  height:28.65%;
}

.display-header{
  height:19%;
  display:grid;
  grid-template-columns:8.2% 1fr 8.2%;
  align-items:center;
  gap:2%;
}

.display-header .cover-art{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:8%;
  border:1px solid #59442b;
  box-shadow:0 2px 7px #000b;
  justify-self:start;
}

.display-header h1{
  text-align:center;
}

.info-button{
  width:100%;
  justify-self:end;
}

.display-main{
  height:42%;
  display:block;
  padding-top:2.2%;
}

.lyrics{
  width:100%;
  height:100%;
  justify-content:center;
  font-size:clamp(9px,1.76cqw,19px);
  line-height:1.48;
}

.lyric-line{
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.progress-row{
  height:13%;
}

.transport-row{
  height:24%;
}

@media(max-width:600px){
  .display-header{
    grid-template-columns:8.5% 1fr 8.5%;
  }

  .lyrics{
    font-size:clamp(9px,1.82cqw,14px);
  }
}


/* v37 — match approved visual draft: sizing/spacing only. */
.catalogue-shell{height:35.55%}
.song{font-size:clamp(12px,3.12cqw,30px)}
.display-header{grid-template-columns:10.5% 1fr 8.5%;gap:2%}
.display-header .cover-art{width:100%}
.display-main{padding-top:1.2%}

@media(max-width:600px){
  .song{font-size:clamp(12px,3.18cqw,20px)}
  .display-header{grid-template-columns:10.8% 1fr 8.8%}
}


/* v38 — orientation handling only. Portrait remains v37. */
@media (orientation: landscape) and (max-height: 600px){
  .song{
    font-size:clamp(9px,1.72cqh,14px);
    line-height:1.05;
  }
}

/* Prevent browser text inflation after rotation. */
html, body{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}


/* v51 — phone landscape splash.
   Portrait and desktop remain exactly as Master 40. */
.phone-landscape-splash{
  display:none;
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  html, body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
    background:#000;
  }

  .stage{
    display:none !important;
  }

  .phone-landscape-splash{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
  }

  .phone-landscape-splash-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    text-align:center;
  }

  .phone-landscape-splash img{
    width:min(22vh,120px);
    height:min(22vh,120px);
    object-fit:cover;
    border-radius:50%;
    border:2px solid rgba(255,204,102,.75);
    box-shadow:0 0 24px rgba(255,153,51,.28);
  }

  .phone-landscape-splash-title{
    font-family:"Trebuchet MS",Arial,sans-serif;
    font-size:clamp(24px,8vh,48px);
    font-weight:800;
    letter-spacing:.12em;
    color:#f5d58b;
    text-shadow:
      0 0 8px rgba(255,170,60,.55),
      0 0 18px rgba(255,110,20,.25);
  }
}


/* v52 — richer phone landscape view:
   Marty Tunes + Marty image + live scrolling/synchronised lyrics. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  .phone-landscape-splash{
    padding:18px 24px;
  }

  .phone-landscape-splash-inner{
    width:min(92vw,900px);
    height:100%;
    display:grid;
    grid-template-columns:minmax(150px,28%) 1fr;
    align-items:center;
    gap:clamp(20px,4vw,48px);
  }

  .phone-landscape-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
  }

  .phone-landscape-splash img{
    width:min(24vh,126px);
    height:min(24vh,126px);
  }

  .phone-landscape-splash-title{
    font-size:clamp(22px,6.2vh,42px);
    letter-spacing:.11em;
    white-space:nowrap;
  }

  .phone-landscape-lyrics{
    width:100%;
    max-height:72vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.45em;
    font-family:"Trebuchet MS",Arial,sans-serif;
    font-size:clamp(20px,5.2vh,38px);
    line-height:1.22;
    text-align:center;
    color:rgba(255,255,255,.55);
    text-shadow:0 2px 7px rgba(0,0,0,.9);
  }

  .phone-landscape-lyrics .lyric-line{
    width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    transition:opacity .22s ease, transform .22s ease, color .22s ease;
  }

  .phone-landscape-lyrics .lyric-line.active{
    color:#f5d58b;
    opacity:1;
    transform:scale(1.03);
    text-shadow:
      0 0 8px rgba(255,190,80,.42),
      0 2px 8px rgba(0,0,0,.95);
  }
}


/* v53 — landscape Now Playing details. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  .phone-landscape-now-playing{
    width:100%;
    text-align:center;
    margin-top:2px;
  }

  .phone-landscape-song-title{
    font-size:clamp(16px,4.2vh,28px);
    line-height:1.1;
    font-weight:800;
    color:#fff4cf;
    text-shadow:0 2px 8px rgba(0,0,0,.9);
  }

  .phone-landscape-artist{
    margin-top:4px;
    font-size:clamp(11px,2.8vh,18px);
    letter-spacing:.08em;
    color:rgba(245,213,139,.82);
  }
}


/* v57 — landscape reuses the exact portrait transport classes and SVG artwork. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  .phone-landscape-lyrics-area{
    min-width:0;
    width:100%;
    height:100%;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    align-items:center;
    gap:6px;
  }

  .phone-landscape-lyrics{
    max-height:none;
    height:100%;
    min-height:0;
  }

  /* Only set the available footprint.
     The actual buttons keep the portrait .transport-row/.transport styling. */
  .landscape-transport-row{
    width:min(54vw,430px);
    height:clamp(52px,12vh,74px);
    margin:0 auto 2px;
    container-type:inline-size;
  }
}