/* ═══ KAHALANOS OS — the phone shell (≤959px) ══════════════════════════════
   One stylesheet for one screen. The desktop composition (#showcase, rails,
   dock, bar) is retired on phones and replaced by #mHome, a home screen
   that the existing engines drive: playback, lyrics, i18n, About,
   Accessibility, backgrounds. Nothing in here touches ≥960px.

   Height is the first responsive input: the cover takes a share of the
   viewport and the fixed chrome (header · title · seek · transport ·
   widgets) is budgeted so the whole home fits one screen without scrolling.
   Three tiers — roomy (>700px), compact (≤700px), tight (≤600px). Home only
   scrolls when the shell has measured that a viewport truly cannot hold it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* pieces the shell injects into shared overlays: invisible off the phone */
.mos-viewbar,.mos-return,.mos-lo-prev,.mos-lo-next,.mos-lo-band,.mos-a11y-row,.mos-about-script,#mHome,.mos-scrim,.mos-sheet,.mos-menu,.mos-view,.mos-pip{display:none}

@media (max-width:959px){

/* ── tokens: one light, luminous glass language for every song world ─────── */
body.mos{--m-ink:#133a63;--m-ink-2:#345a82;--m-mute:#5f7a98;--m-glass:rgba(245,250,255,.76);--m-glass-2:rgba(255,255,255,.82);--m-bd:rgba(255,255,255,.38);--m-tile:rgba(19,58,99,.08);--m-tile-2:rgba(19,58,99,.15);--m-view-bg:rgba(238,245,252,.84);--m-shadow:0 6px 22px rgba(20,50,80,.1);--m-text-glow:0 1px 0 var(--m-edge),0 -1px 0 var(--m-edge),1px 0 0 var(--m-edge),-1px 0 0 var(--m-edge)}
/* a night world (Tokyo) keeps the same OS: the glass gets denser, the ink keeps a
   brighter halo, the borders read against the dark — never white-on-black */
body.mos.song-night{
  --m-ink-2:#24496f; --m-mute:#4a6789;
  --m-glass:rgba(245,250,255,.8); --m-glass-2:rgba(255,255,255,.92); --m-bd:rgba(255,255,255,.5);
  --m-tile:rgba(19,58,99,.09); --m-tile-2:rgba(19,58,99,.17);
  --m-view-bg:rgba(240,246,253,.9);
  --m-shadow:0 10px 30px rgba(5,15,35,.3);
}
/* a block the sampler found over a dark patch of photo: pale artwork tint, dark rim */
body.mos .ink-light{
  --m-ink:var(--m-ink-l,#f4f8fc);--m-ink-2:var(--m-ink-2-l,rgba(244,248,252,.88));--m-mute:var(--m-mute-l,rgba(244,248,252,.72));
  --m-edge:rgba(6,14,26,.5);
  --m-text-glow:0 1px 0 var(--m-edge),0 -1px 0 var(--m-edge),1px 0 0 var(--m-edge),-1px 0 0 var(--m-edge)}

/* ── floating text: the desktop's bare-panel treatment — sky ink (white by night, navy
   by day), its soft shadow, and a small local haze pooled under each text block.
   No artwork tint on type; the artwork colours stay on buttons and glass. ── */
body.mos{--sat:calc(env(safe-area-inset-top,0px) + 12px);--sab:calc(env(safe-area-inset-bottom,0px) + 16px);--m-dz:#f3f7fb;--m-dir:1;--m-vh:calc(100svh - var(--sat) - var(--sab));--m-gap:clamp(8px,1.5svh,14px);--m-wrow:clamp(58px,7.6svh,74px);--m-play:clamp(64px,8.6svh,76px);--m-ctl:clamp(44px,5.8svh,50px);/* the cover and the player are the same object, so they are the same width:
     the cover spans the panel's inner width, still capped by the room left
     after the chrome so the transport is never pushed off the screen */
  --m-panel-w:calc(min(100vw,520px) - 2 * clamp(12px,4vw,20px) - 28px);--m-art:clamp(200px,min(var(--m-panel-w),var(--m-vh) - 460px),400px);--m-peek:.78;--m-ghost-o:.55;--m-ghost-s:.92;--m-r:22px;--m-r-art:18px;--m-r-in:14px;/* hairline edge: a crisp 1px contrast rim, subtitle-style — never a glow */
  --m-edge:rgba(255,255,255,.55);--m-accent:var(--theme,#2f70d8);--m-ui:var(--ui,'Work Sans',system-ui,sans-serif);--m-serif:'GFS Didot','Frank Ruhl Libre','Cormorant Garamond',Georgia,serif;/* Didot carries Greek only; Latin titles take Frank Ruhl's real medium weight instead of hairline Cormorant */
  --m-lyric:'Cormorant Garamond',Georgia,serif;--m-script:'Caveat','Segoe Script',cursive;overflow:hidden;height:100svh;--m-haze:.5;--m-float:rgba(255,255,255,.98);--m-float-2:rgba(255,255,255,.88);--m-float-3:rgba(255,255,255,.74);
  --m-float-sh:0 1px 3px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.45)}
body.mos:not(.mos-dark){--m-haze:.44;--m-float:#0d2b47;--m-float-2:rgba(13,43,71,.9);--m-float-3:rgba(13,43,71,.76);
  --m-float-sh:0 0 2px rgba(255,255,255,.7),0 1px 16px rgba(255,255,255,.75)}
body.mos :is(.mh-brand,.mh-song,#mHome .cp-timeline,.mh-status){
  --m-ink:var(--m-float);--m-ink-2:var(--m-float-2);--m-mute:var(--m-float-3);--m-text-glow:var(--m-float-sh);position:relative;isolation:isolate}
/* the fog is the desktop's own bare-panel haze: neutral navy pools by night (never the
   song's accent), pale luminous pools by day, each drifting slowly; one faint white wisp
   rides on top so the type sits in light rather than shadow */
body.mos :is(.mh-brand,.mh-song,#mHome .cp-timeline,.mh-status)::before{content:'';position:absolute;inset:-28px -56px;z-index:-1;pointer-events:none;filter:blur(14px);
  animation:railBloom 22s ease-in-out infinite alternate;
  background:
    radial-gradient(112% 60% at 44% 26%,rgba(6,16,32,calc(var(--m-haze) * 1.05)) 0%,rgba(6,16,32,calc(var(--m-haze) * .7)) 40%,rgba(6,16,32,0) 78%),
    radial-gradient(84% 52% at 60% 80%,rgba(12,30,58,calc(var(--m-haze) * .8)) 0%,rgba(12,30,58,0) 74%),
    radial-gradient(58% 40% at 16% 58%,rgba(44,30,78,calc(var(--m-haze) * .5)) 0%,rgba(44,30,78,0) 72%)}
body.mos :is(.mh-brand,.mh-song,#mHome .cp-timeline,.mh-status)::after{content:'';position:absolute;inset:-18px -40px;z-index:-1;pointer-events:none;filter:blur(26px);
  animation:mosWisp 17s ease-in-out infinite alternate;
  background:radial-gradient(50% 60% at 62% 40%,rgba(255,255,255,.14) 0%,transparent 100%)}
@keyframes mosWisp{from{transform:translate3d(10px,-6px,0) scale(1);opacity:.7}to{transform:translate3d(-14px,8px,0) scale(1.12);opacity:1}}
html.rm body.mos :is(.mh-brand,.mh-song,#mHome .cp-timeline,.mh-status)::before,
html.rm body.mos :is(.mh-brand,.mh-song,#mHome .cp-timeline,.mh-status)::after{animation:none}
/* day (day-sky songs in light theme): no text fog at all — the desktop's whole-photo
   daylight veil and its bright top & bottom bands carry the navy type */
body.mos:not(.mos-dark) :is(.mh-brand,.mh-song,#mHome .cp-timeline,.mh-status)::before,
body.mos:not(.mos-dark) :is(.mh-brand,.mh-song,#mHome .cp-timeline,.mh-status)::after{content:none}
/* day: no veil — the photo shows clean behind the white panels */
html body.mos:not(.mos-dark) #bgTint{background:none !important}
html body.mos:not(.mos-dark) #bgTint::before{background:none !important}
/* night worlds in light theme = dawn: the same photo under a cool indigo-to-lavender veil,
   pale ink on the open scene, the light palette's glass for the panels */
html body.mos:not(.mos-dark).song-night #bgTint{background:
    linear-gradient(180deg,rgba(54,60,118,.58) 0%,rgba(88,84,148,.5) 42%,rgba(150,118,168,.52) 100%) !important}
html body.mos:not(.mos-dark).song-night #bgTint::before{background:
    linear-gradient(180deg,rgba(236,232,255,.28) 0%,rgba(236,232,255,.1) 20%,rgba(236,232,255,.08) 60%,rgba(236,232,255,.22) 100%) !important}
body.mos:not(.mos-dark).song-night{--m-float:rgba(255,255,255,.97);--m-float-2:rgba(255,255,255,.86);--m-float-3:rgba(255,255,255,.72);
  --m-float-sh:0 1px 3px rgba(20,16,50,.45),0 2px 16px rgba(20,16,50,.4)}
/* the sun / moon serves every song now */

body.mos .mh-brand::before{inset:-16px -30px}
/* seek track: one value per theme, whatever the song */
html body.mos.mos-dark #mHome .cp-signal-track{background:rgba(255,255,255,.34)}
html body.mos:not(.mos-dark) #mHome .cp-signal-track{background:var(--m-tile-2)}

/* ── DARK THEME: the desktop's night language on the phone — slate glass, pale ink,
   and its scene scrim back as fog behind the type (the one place fog is welcome) ── */
body.mos.mos-dark{
  --m-dz:#0c1420;
  --m-ink:#eef3f8; --m-ink-2:rgba(238,243,248,.88); --m-mute:rgba(238,243,248,.7);
  --m-ink-l:#eef3f8; --m-ink-2-l:rgba(238,243,248,.88); --m-mute-l:rgba(238,243,248,.7);
  --m-glass:rgba(14,15,18,.62); --m-glass-2:rgba(16,27,42,.9); --m-bd:rgba(255,255,255,.1);
  --m-tile:rgba(255,255,255,.09); --m-tile-2:rgba(255,255,255,.17);
  --m-view-bg:rgba(12,20,34,.92); --m-shadow:0 10px 30px rgba(0,0,0,.5);
  --m-edge:rgba(0,0,0,.45);
  --m-text-glow:0 1px 0 var(--m-edge),0 -1px 0 var(--m-edge),1px 0 0 var(--m-edge),-1px 0 0 var(--m-edge)}
/* dark theme veil: top/bottom depth only — the desktop's 90deg side washes drew a lit
   straight-edged column down the middle of a portrait screen; the sides deepen in the vignette below */
html body.mos.mos-dark #bgTint,html body.mos.mos-dark.song-night #bgTint{background:linear-gradient(180deg, rgba(4,7,11,.56) 0%, rgba(4,7,11,.4) 34%, rgba(4,7,11,.72) 100%) !important}
/* night-only worlds (Japón): a brighter, busier photo shows through the glass unevenly —
   a flatter, deeper scrim and denser glass keep every panel one colour */
body.mos.mos-dark.song-night :is(.mh-card,.mh-w,.mh-panel){background:color-mix(in srgb,var(--m-glass) 65%,var(--m-glass-2))}
html body.mos.mos-dark #vignette{opacity:1 !important}
/* phone vignette: one soft oval that follows the screen — the middle stays open, sides and corners deepen with no straight edges */
html body.mos.mos-dark #vignette::before{background:radial-gradient(ellipse 78% 72% at 50% 46%, transparent 38%, rgba(3,9,18,.36) 72%, rgba(3,9,18,.64) 100%)}
body.mos.mos-dark #mHome .cp-bub{color:#0b1220}
body.mos.mos-dark #mHome .cp-signal-head{box-shadow:0 1px 6px rgba(0,0,0,.5)}
body.mos.mos-dark .mh-slot{background:linear-gradient(135deg,#243244,#0f1722)}
/* header sun / moon: the icon shows the mode that is ON (sun = light, moon = dark) */

/* menu: the theme row is a labelled radiogroup, not a link */
.mos-mi-theme{cursor:default;flex-wrap:wrap;row-gap:6px;min-height:56px;padding-block:6px}
.mos-mi-theme:active{background:none}
.mos-seg{display:flex;flex:0 0 auto;margin-inline-start:auto;border-radius:999px;background:var(--m-tile)}
.mos-seg button{min-width:52px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--m-ink-2);
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.mos-seg button[aria-checked="true"]{background:color-mix(in srgb,var(--m-accent) 75%,#000);color:#fff}
body.mos .ink-light .cp-signal-track{background:rgba(255,255,255,.32)}
body.mos .mh-brand.ink-light img{filter:drop-shadow(0 0 1px rgba(6,14,26,.6))}
html[dir="rtl"] body.mos{--m-dir:-1}

/* ── the desktop composition steps off the phone ─────────────────────────── */
body.mos :is(.wbar,#showcase,#dock,#wayfinder,.arrow,#sideRail,#startRail,#listenBar,#mNav,#mShadeTab,#mLinks,#grid,#upnext,#mHint,#langMenu,#heartPrompt){display:none !important}
/* #hero is NOT in the list above: on the phone the desktop lyrics window migrates into
   home (js/mobile.js adoptLyrics) and wears its stage look further down. #lyricsPanel
   stays desktop-only (it never leaves the hidden #startRail on the phone). */

/* ── the scene: the photograph, unveiled. The desktop rail wash and the bare-mode
   scene veil (both white, both #bgTint) were outranking these rules by
   specificity and fogging the phone — pinned with !important so the photo stays clean. */
body.mos #bgTint,body.mos.song-night #bgTint{background:none !important}
body.mos #bgTint::before,body.mos.song-night #bgTint::before{background:none !important}
body.mos #bgTint::after,body.mos.song-night #bgTint::after{opacity:0 !important}
body.mos .bg-img{background-position:var(--m-focus,42% center)}
body.mos #vignette,body.mos.song-night #vignette{opacity:0 !important}

/* the scene, quieted: on the phone the photograph sits far behind the glass —
   softened and de-saturated so it reads as atmosphere, never as competition for
   the covers, the lyric and the transport. */
/* the card is a panel like the widgets: one glass colour, no cover-art lining —
   the blurred square underneath read as a black slab next to the tiles */
html body.mos .mh-card{position:relative;overflow:hidden;isolation:isolate}

/* ═══ HOME ══════════════════════════════════════════════════════════════════ */
#mHome{display:block;position:fixed;inset:0;z-index:10;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;color:var(--m-ink);font-family:var(--m-ui);
  -webkit-user-select:none;user-select:none}
#mHome.mh-scroll{overflow-y:auto;overflow-x:hidden}   /* measured fallback only (js/mobile.js fitHome) */
/* up/down: three full screens that lock in place — About · player · Connect */
#mHome{scroll-snap-type:y mandatory}
#mHome :is(.mh-about,.mh-first,.mh-disc){scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--sat)}
/* the lyrics window belongs to the player screen: a stop that shows it whole */
#mHome > .mh-wrap > #hero{scroll-snap-align:end;scroll-margin-bottom:calc(8px + var(--sab))}
.mh-about{min-height:var(--m-vh);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:28px 22px;box-sizing:border-box;text-align:start;
  background:#fff;border-radius:0;--m-ink:#0b2742;--m-ink-2:#3b5874;--m-bd:rgba(11,39,66,.16);--m-glass:rgba(11,39,66,.06);color:#0b2742}
/* the brand opens the About screen as a proper masthead: large K over the wordmark */
.mh-ab-hero{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:18px}
.mh-ab-hero img{width:56px;height:56px;object-fit:contain}
.mh-ab-hero span{font:600 15px/1 var(--m-ui);letter-spacing:.34em}
.mh-ab-k{margin:10px 0 0;font:500 clamp(26px,7.4vw,34px)/1.1 var(--k-disp);color:var(--m-ink);text-wrap:balance}
.mh-ab-k2{font-size:clamp(21px,6vw,26px)}
.mh-ab-bio{font:400 15.5px/1.6 var(--m-ui);color:var(--m-ink-2);text-wrap:pretty}
.mh-ab-bio p{margin:0 0 .7em}
.mh-ab-down{align-self:center;display:flex;align-items:center;gap:6px;min-height:44px;margin-top:14px;padding:0 18px;border:1px solid var(--m-bd);border-radius:999px;
  background:var(--m-glass);color:var(--m-ink);font:600 14px/1 var(--m-ui);white-space:nowrap;cursor:pointer}
.mh-ab-down svg{width:18px;height:18px;fill:currentColor}
.mh-disc{min-height:var(--m-vh);box-sizing:border-box}
#mHome::-webkit-scrollbar{display:none}
.mh-wrap{min-height:100%;display:flex;flex-direction:column;gap:var(--m-gap);
  padding:calc(6px + var(--sat)) clamp(12px,4vw,20px) calc(12px + var(--sab));max-width:520px;margin:0 auto}

/* header: brand · language · menu */
.mh-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:48px}
.mh-brand{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;min-height:44px;padding-inline-start:2px;
  text-decoration:none;color:var(--m-ink)}
.mh-brand img{width:22px;height:22px;display:block;flex:0 0 auto;filter:drop-shadow(0 1px 6px rgba(210,39,48,.35))}
.mh-brand span{font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:var(--m-text-glow)}
.mh-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:44px;height:44px;padding:0 10px 0 12px;border:1px solid var(--m-bd);border-radius:999px;background:var(--m-glass);color:var(--m-ink);font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.1em;cursor:pointer;flex:0 0 auto;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:transform .12s ease,background .3s ease,color .3s ease}
.mh-btn svg{width:20px;height:20px;fill:currentColor;display:block}
.mh-btn .mh-down{width:16px;height:16px;opacity:.7}
.mh-btn.mh-ic{width:44px;padding:0}
.mh-btn:active{transform:scale(.94)}

/* the stage now sits INSIDE the player panel: cover art and transport are one
   object, so the cover no longer floats alone above the glass */
.mh-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.8svh,18px);min-height:0;width:100%}
/* the home screen never scrolls vertically, so the cover strip takes the whole gesture:
   with pan-y the browser could still claim a slightly diagonal drag and cancel the pointer
   mid-swipe, which snapped the strip back for no visible reason */
.mh-flow{position:relative;width:100%;height:var(--m-art);touch-action:pan-y;cursor:pointer}
.mh-flow.mh-drag{cursor:grabbing}
.mh-strip{position:absolute;left:50%;top:0;width:var(--m-art);height:var(--m-art);margin-left:calc(var(--m-art) / -2);
  transform:translate3d(var(--m-x,0px),0,0);will-change:transform}
.mh-strip.mh-anim{transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.mh-slot{position:absolute;inset:0;z-index:2;border-radius:var(--m-r-art);overflow:hidden;background:linear-gradient(135deg,#d9e6f2,#9db8d2);cursor:pointer;
  box-shadow:0 12px 30px -18px rgba(10,30,60,.5),0 0 0 1px rgba(255,255,255,.4);
  /* card stack: as the strip travels (--m-p 0→1) the current cover recedes to the neighbours'
     size and fade, while the incoming one rises to full — so at the hand-off nothing pops */
  transform:scale(calc(1 - (1 - var(--m-ghost-s)) * var(--m-p,0)));opacity:calc(1 - (1 - var(--m-ghost-o)) * var(--m-p,0));will-change:transform,opacity}
body.mos.song-night .mh-slot{box-shadow:0 12px 30px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.35)}
#mHome[data-video="1"] .mh-slot{cursor:auto}
/* the adopted cover never scales or eases into place: neighbours slide in at full size,
   and the swap into the slot is instant — no zoom pop */
body.mos .mh-slot .art{transform:none !important;transition:none !important;animation:none !important;border-radius:0 !important}
body.mos .mh-slot .art :is(img,.art-video,iframe){border-radius:0 !important}
body.mos .mh-slot .art img{transition:none !important;opacity:1 !important}
.mh-ghost{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:var(--m-r-art);display:none;
  opacity:var(--m-ghost-o);cursor:pointer;
  transform:translate3d(calc(var(--d) * var(--m-art) * var(--m-peek) * var(--m-dir)),0,0) scale(var(--m-ghost-s));
  box-shadow:0 18px 40px -24px rgba(10,30,60,.5)}
/* the cover being pulled in rides on top and grows to full as it arrives */
.mh-strip[data-in="-1"] .mh-ghost[data-d="-1"],.mh-strip[data-in="1"] .mh-ghost[data-d="1"]{z-index:3;
  opacity:calc(var(--m-ghost-o) + (1 - var(--m-ghost-o)) * var(--m-p,0));
  transform:translate3d(calc(var(--d) * var(--m-art) * var(--m-peek) * var(--m-dir)),0,0) scale(calc(var(--m-ghost-s) + (1 - var(--m-ghost-s)) * var(--m-p,0)))}
.mh-strip.mh-anim .mh-slot,.mh-strip.mh-anim .mh-ghost{transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .38s cubic-bezier(.22,.61,.36,1)}
.mh-ghost[data-d="-1"]{--d:-1}
.mh-ghost[data-d="1"]{--d:1}
.mh-ghost[hidden]{display:none}

/* the cover is the card's own .art, adopted into the slot (the YouTube surface lives inside it) */
#mHome .art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;border-radius:18px;overflow:hidden;
  box-shadow:none;background:#0a1420;transform:none;transition:none}
#mHome .art>img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .45s ease}
#mHome .art :is(.art-play,.art-lyric,.k-fs-exit,.card-badge){display:none !important}
#mHome .art .art-video{position:absolute;inset:0;z-index:-1;opacity:0;visibility:hidden;pointer-events:none;background:#000;transition:opacity .45s ease}
/* the phone owns every gesture on the cover: the video plays through the JS API and has no
   chrome of its own, so the surface never takes pointer events — an iframe that did would
   swallow the swipe whole and strand you on the playing song */
#mHome[data-video="1"] .art .art-video{z-index:3;opacity:1;visibility:visible;pointer-events:none}
#mHome[data-video="1"] .art>img{opacity:0}
/* loading: play flips the card into video mode the instant it is pressed, so the empty
   YouTube surface used to sit on the cover. While the song is still loading the artwork
   stays visible; the video fades in the moment playback actually starts. */
body.mos #mHome[data-state="pending"] .art .art-video{opacity:0}
body.mos #mHome[data-state="pending"] .art>img{opacity:1}

/* the phone keeps its own video surface in the cover slot (js/mobile.js): the artwork is
   moved in and out on every swipe, and an iframe that travelled with it would reload */
#mHome .mh-vid{position:absolute;inset:0;z-index:-1;opacity:0;visibility:hidden;pointer-events:none;
  background:#0a1420 center/cover no-repeat;transition:opacity .45s ease}
#mHome[data-video="1"] .mh-vid{z-index:3;opacity:1;visibility:visible}
body.mos #mHome[data-state="pending"] .mh-vid{opacity:0}

/* the card's own video box stays empty on the phone — the shell owns the one surface —
   so it must not paint its black square over the artwork in video mode */
body.mos #mHome .art .art-video{background:transparent}
#mHome .art-video :is(iframe,div){position:absolute;inset:0;width:100%;height:100%;border:0}

.mh-song{position:relative;isolation:isolate;text-align:center;padding:0 8px;max-width:100%}
/* the floating type carries the desktop's bare-panel haze (see below) — no extra pool here */
.mh-title{margin:0;font-family:var(--m-serif);font-weight:500;font-size:clamp(20px,5.8vw,27px);line-height:1.18;letter-spacing:.06em;
  min-height:2.36em;display:grid;place-items:center;
  color:var(--m-ink);text-wrap:balance;overflow-wrap:anywhere;unicode-bidi:plaintext;text-shadow:var(--m-text-glow)}
.mh-title:lang(el){-webkit-text-stroke:.34px currentColor} /* Didot ships one hairline weight: a thin stroke lifts the Greek title to match the Latin medium */
.mh-sub{margin:4px 0 0;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--m-mute);text-shadow:var(--m-text-glow)}

/* the line now rides in the About row: no block margin, and it keeps the hint's own size rules */

/* player: seek rail + transport */
/* cover art and video are the same square, so nothing resizes when playback starts */
/* the card: title, seek rail and transport share one glass rectangle — the type sits on
   glass, so no haze pools or glow shadows inside it */
.mh-card{display:flex;flex-direction:column;gap:clamp(6px,1svh,10px);padding:clamp(10px,1.5svh,14px) 14px clamp(8px,1.2svh,12px);border-radius:var(--m-r);background:var(--m-glass);border:1px solid var(--m-bd);color:var(--m-ink);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--m-shadow);transition:background .3s ease,color .3s ease}
/* same ink as the widgets: the artwork palette, not the floating-text ink */

body.mos .mh-card{--m-ink-w:var(--m-ink);--m-ink-2-w:var(--m-ink-2);--m-mute-w:var(--m-mute)}
body.mos .mh-card :is(.mh-song,#mHome .cp-timeline,.mh-status){--m-ink:var(--m-ink-w);--m-ink-2:var(--m-ink-2-w);--m-mute:var(--m-mute-w);--m-text-glow:none}
body.mos .mh-card :is(.mh-song,#mHome .cp-timeline,.mh-status)::before,
body.mos .mh-card :is(.mh-song,#mHome .cp-timeline,.mh-status)::after{content:none}
.mh-card .mh-tb:not(.mh-play){background:var(--m-tile);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
/* light theme: panel type goes near-black for legibility on the pale glass; icons and
   the play button keep the artwork accent, the glass keeps its tint */
body.mos:not(.mos-dark) :is(.mh-w,.mh-card,.mh-btn,.mh-panel){--m-ink:#10161c;--m-ink-2:rgba(16,22,28,.9);--m-mute:rgba(16,22,28,.74);--m-tile:rgba(16,22,28,.08);--m-tile-2:rgba(16,22,28,.16)}
body.mos:not(.mos-dark) .mh-btn{background:#dfe3e6;border-color:#c4c9ce;color:#10161c}
body.mos:not(.mos-dark) .mh-card{--m-ink-w:#10161c;--m-ink-2-w:rgba(16,22,28,.9);--m-mute-w:rgba(16,22,28,.74);background:rgba(234,238,242,.92);border-color:rgba(16,22,28,.1)}
body.mos:not(.mos-dark) .mh-card .mh-sub{color:rgba(16,22,28,.86)}
body.mos:not(.mos-dark) .mh-card :is(.mh-prev,.mh-next).mh-tb{opacity:1;color:#10161c}
/* menu, sheets and library wear the same ink as the panels in light theme */
body.mos:not(.mos-dark) :is(.mos-menu,.mos-sheet,.mos-view){--m-ink:#10161c;--m-ink-2:rgba(16,22,28,.9);--m-mute:rgba(16,22,28,.74);--m-tile:rgba(16,22,28,.08);--m-tile-2:rgba(16,22,28,.16);--m-bd:rgba(16,22,28,.12)}
/* the brand line on the open scene: black in day, white at dawn / night */
body.mos:not(.mos-dark):not(.song-night) .mh-brand{--m-ink:#10161c;--m-float:#10161c}
/* night worlds at dawn: the neon photo is busier than a beach — denser glass keeps the type clean */
body.mos:not(.mos-dark).song-night :is(.mh-w,.mh-panel){background:color-mix(in srgb,var(--m-glass) 55%,var(--m-glass-2))}
.mh-player{flex:0 0 auto;display:flex;flex-direction:column;position:relative}
#mHome .cp-timeline{position:relative;display:flex;align-items:center;gap:10px;direction:ltr}
#mHome :is(.cp-cur,.cp-rem){flex:0 0 auto;min-width:36px;font-family:var(--m-ui);font-size:11px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--m-ink-2);text-shadow:var(--m-text-glow)}
#mHome .cp-cur{text-align:right}
#mHome .cp-rem{text-align:left;color:var(--m-mute)}
#mHome .cp-progress{position:relative;flex:1 1 auto;height:32px;display:flex;align-items:center;cursor:pointer;touch-action:none;direction:ltr}
#mHome .cp-progress:focus-visible{outline:none}
#mHome .cp-progress:focus-visible .cp-signal-track{box-shadow:0 0 0 2px color-mix(in srgb,var(--m-accent) 60%,transparent)}
#mHome .cp-signal-track{position:relative;display:block;width:100%;height:4px;border-radius:2px;background:var(--m-tile-2);transition:height .16s ease}
#mHome .cp-progress.scrubbing .cp-signal-track{height:7px}
#mHome .cp-signal-fill{position:absolute;inset:0 auto 0 0;width:100%;transform-origin:left center;transform:scaleX(var(--p,0));
  border-radius:inherit;background:var(--m-accent)}
#mHome .cp-signal-head{position:absolute;left:0;top:50%;margin-left:-7px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 6px rgba(10,30,60,.35),0 0 0 1px rgba(19,58,99,.08);transform:translate(var(--hx,0px),-50%);opacity:1;transition:none}
#mHome .cp-bub{position:absolute;bottom:calc(50% + 12px);transform:translateX(-50%);pointer-events:none;padding:3px 8px;border-radius:7px;
  font-size:11px;font-variant-numeric:tabular-nums;color:#fff;background:var(--m-ink);opacity:0;visibility:hidden;transition:opacity .14s}
#mHome .cp-bub.on{opacity:1;visibility:visible}

.mh-transport{display:flex;align-items:center;justify-content:center;direction:ltr}
.mh-tb{display:inline-flex;align-items:center;justify-content:center;width:var(--m-ctl);height:var(--m-ctl);padding:0;flex:0 0 auto;
  border:1px solid var(--m-bd);border-radius:50%;background:var(--m-glass);color:var(--m-ink);cursor:pointer;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--m-shadow);
  transition:transform .12s ease,opacity .2s ease,background .3s ease,color .3s ease}
.mh-tb svg{width:22px;height:22px;fill:currentColor;display:block}
.mh-tb:active{transform:scale(.92)}
.mh-tb[disabled]{opacity:.32;pointer-events:none}
/* the desktop transport, at phone scale: prev and next carry the neighbouring song's cover
   behind a darkened veil, so the glyph stays white and legible on any artwork */
:is(.mh-prev,.mh-next){position:relative;overflow:hidden;border:0}
/* no disc of their own: bare glyph, or the neighbour's cover when there is one */
.mh-card :is(.mh-prev,.mh-next).mh-tb{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.mh-cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.5) saturate(.85);transition:filter .18s ease}
:is(.mh-prev,.mh-next):active .mh-cov{filter:brightness(.85) saturate(1)}
:is(.mh-prev,.mh-next) svg{position:relative;z-index:1}
/* the arrows carry the same ink as the rest of the transport — no white, no glyph shadow */
.mh-end .mh-cov{display:none}
/* the ±10s pair, as on the desktop: bare glyphs at .75 opacity — no disc, border or shadow.
   the 44px box stays for the touch target */
body.mos #mHome :is(.mh-b10,.mh-f10){border:0;background:transparent;box-shadow:none}
/* always visible, like the desktop transport */
:is(.mh-b10,.mh-f10){opacity:.75;pointer-events:auto;transition:transform .12s ease,opacity .15s ease}
:is(.mh-b10,.mh-f10):active{opacity:1}
:is(.mh-b10,.mh-f10) svg{width:20px;height:20px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
/* the desktop play button: a light face with a dark glyph, not an accent-filled disc */
.mh-play{position:relative;width:var(--m-play);height:var(--m-play);border:0;background:#eef3f8;color:#0b1220;
  box-shadow:0 14px 36px -14px rgba(0,0,0,.55),0 2px 10px -4px rgba(0,0,0,.35),inset 0 -1px 0 rgba(11,18,32,.12)}
.mh-play:active{background:#fff}

.mh-play .mh-i-play{margin-left:3px}
.mh-play .mh-i-pause{display:none}
#mHome[data-state="playing"] .mh-play .mh-i-play{display:none}
#mHome[data-state="playing"] .mh-play .mh-i-pause{display:block}
#mHome[data-state="pending"] .mh-play::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--m-accent);animation:mhspin .8s linear infinite}
#mHome[data-state="pending"] .mh-play svg{opacity:.55}
@keyframes mhspin{to{transform:rotate(360deg)}}
/* the status line floats over the seek rail (never in the flow), so "loading" or an error
   can appear and vanish without the panel changing height */
body.mos #mHome .mh-status{position:absolute;left:0;right:0;top:0;height:100%;max-height:44px;z-index:2;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 6px;text-align:center;font-size:12px;line-height:1.35;color:var(--m-ink-2);text-shadow:var(--m-text-glow);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s}

/* loading keeps its seek rail: the song's time and progress stay in place, and the spinner
   ring on the play button is what says "loading" — so the floating load line (which sits
   over the rail) is dropped on the phone. An error still takes the rail: there is nothing
   to seek, and the message needs the room. */

#mHome[data-state="error"] .cp-timeline{opacity:0;transition:opacity .6s ease}
#mHome .cp-timeline{isolation:isolate;transition:opacity .7s ease}
/* before the song has ever played there is nothing to seek: the rail stays folded */
/* the seek rail stays put at all times — pausing or scrubbing must never make it
   disappear and fade back in */
/* idle transport: play, previous and next stay; the ±10 s nudges and the seek rail wake with the song —
   quick in, slow out, sliding a few px toward the play button, staggered so the player "wakes up" */
/* every transport button stays on screen at all times — nothing waits for playback */

/* a swipe hands the song over — it is not the player going to sleep and waking again.
   While the switch is in flight the transport holds its shape and the new palette lands
   at once, instead of the nudges fading out and every button crawling to a new colour. */
body.mos.mos-switch #mHome :is(.mh-b10,.mh-f10){opacity:.55 !important;transform:none !important;transition:none !important}
body.mos.mos-switch #mHome :is(.mh-tb,.mh-play,.mh-w,.mh-btn){transition:transform .12s ease !important}
body.mos #mHome[data-state="playing"] .cp-timeline{transition:opacity .35s ease-out .12s}

.mh-status a{color:var(--m-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── first screen: cover · title · play, then one lyric line. Discovery waits below. ── */
.mh-first{display:flex;flex-direction:column;gap:var(--m-gap)}
/* the transport, by weight: play is the one obvious action; skip and seek are quiet satellites */
.mh-card :is(.mh-prev,.mh-next).mh-tb{opacity:.7}
/* phone: no Previous / Next buttons anywhere (card, lyrics bar, floating player) */
body.mos :is(.mh-prev,.mh-next,.mos-lo-prev,.mos-lo-next,.mos-pip-prev,.mos-pip-next){display:none !important}
.mh-card :is(.mh-prev,.mh-next) svg{width:19px;height:19px}
body.mos #mHome :is(.mh-b10,.mh-f10){-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:auto;opacity:.55}
body.mos #mHome :is(.mh-b10,.mh-f10) svg{width:18px;height:18px}

.mh-play svg{width:34px;height:34px}
body.mos:not(.mos-dark) .mh-play{background:var(--m-accent);color:#fff;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--m-accent) 14%,transparent),0 14px 30px -14px color-mix(in srgb,var(--m-accent) 80%,transparent)}
body.mos:not(.mos-dark) .mh-play:active{background:color-mix(in srgb,var(--m-accent) 82%,#000)}
/* ── the lyrics window on the phone: the same #hero node is adopted into home by
   js/mobile.js (adoptLyrics). Its LOOK lives in css/lyrics-follow.css — one shared
   block for stage + phone (body:where(.stage,.mos)); only phone PLACEMENT is here. ── */
body.mos #mHome #hero{display:flex;flex-direction:column;flex:0 0 auto;height:min(64vh,580px);height:min(64svh,580px);outline:none;border-radius:24px}
body.mos #mHome #hero.hero-none-mos{display:none}   /* a song with no words yet */
body.mos.no-borders #mHome #hero{border-color:transparent}
body.mos #mHome #hero .hero-lyrhead{display:flex}
body.mos #mHome #hero .lyr-mode{display:inline-flex}
/* Panel borders OFF (Settings → Panels) reaches the phone glass too */
body.mos.no-borders :is(.mh-card,.mh-w,.mh-btn,.mh-panel,.mos-sheet,.mos-menu,.mos-view,.mh-tb,.mh-pill,.mh-va){border-color:transparent}
/* below the fold: More music → Listen on → Connect → About, each on calm glass */
.mh-disc{display:flex;flex-direction:column;justify-content:center;gap:12px;padding-top:4px}
.mh-panel{padding:4px 12px 14px;border:1px solid var(--m-bd);border-radius:var(--m-r);background:var(--m-glass);color:var(--m-ink);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--m-shadow)}
.mh-panel .mos-sec:first-child{margin-top:12px}
.mh-panel .mos-script{margin-top:12px;font-size:20px}
/* Connect on home: heading and tile contents centred, like the script line under them */
.mh-p-cn .mos-sec{justify-content:center}
.mh-p-cn .mos-tile{align-items:center;text-align:center}

/* widgets: four equal app tiles (two above, two below) and the wide About row */

.mh-w{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:var(--m-wrow);
  padding:11px 12px;border:1px solid var(--m-bd);border-radius:var(--m-r);background:var(--m-glass);color:var(--m-ink);
  text-align:start;font:inherit;cursor:pointer;overflow:hidden;
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--m-shadow);
  transition:transform .14s ease,background .3s ease,color .3s ease}
.mh-w:active{transform:scale(.985);background:var(--m-glass-2)}
.mh-wh{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
.mh-wi{width:17px;height:17px;flex:0 0 auto;fill:currentColor;color:var(--m-accent)}
.mh-wt{flex:1 1 auto;min-width:0;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* half-width tiles: a two-word label wraps rather than losing its tail to an ellipsis */

.mh-chev{width:14px;height:14px;flex:0 0 auto;fill:currentColor;color:var(--m-mute)}
html[dir="rtl"] body.mos .mh-chev{transform:scaleX(-1)}

.mh-quote{font-family:var(--m-lyric);font-style:italic;font-size:15.5px;font-weight:500;line-height:1.14;color:var(--m-ink-2);min-height:2.1em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;unicode-bidi:plaintext;text-align:start}
.mh-hint{font-size:12px;line-height:1.3;color:var(--m-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;
  unicode-bidi:plaintext;text-align:start}
.mh-thumbs{display:flex;gap:6px}
.mh-thumb{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block;background:var(--m-tile)}

/* Listen on + Connect are one wide widget: label at the start, two folder tiles at the end,
   so the row reads as two closed folders to open — not as eight links to press */
/* Listen on + Connect share the third tile: one label over two closed folders to open —
   not eight links to press. It wears the same shape as its two neighbours. */

/* ═══ FOLDERS (Listen on · Connect · Language) — a sheet over the blurred scene ═══ */
.mos-scrim{display:block;position:fixed;inset:0;z-index:140;background:rgba(10,30,56,.26);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .24s ease}
.mos-scrim-menu{z-index:150}
body.mos-sheet-open .mos-scrim-sheet,body.mos-menu-open .mos-scrim-menu{opacity:1;pointer-events:auto}
.mos-sheet{display:flex;position:fixed;z-index:142;left:50%;bottom:0;width:min(520px,100%);max-height:84svh;flex-direction:column;
  padding:0 0 calc(14px + var(--sab));border-radius:var(--m-r) var(--m-r) 0 0;
  background:var(--m-glass-2);border:1px solid var(--m-bd);border-bottom:0;color:var(--m-ink);font-family:var(--m-ui);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);
  box-shadow:0 -20px 60px -24px rgba(10,30,56,.45);
  transform:translate3d(-50%,calc(100% + 30px),0);visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),visibility .3s}
body.mos-sheet-open .mos-sheet{transform:translate3d(-50%,var(--msy,0px),0);visibility:visible}
.mos-sheet.mos-drag{transition:none}
.mos-grab{flex:0 0 auto;align-self:center;width:40px;height:4px;margin:10px 0 2px;border-radius:99px;background:var(--m-tile-2)}
.mos-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:6px 18px 10px;touch-action:none}
.mos-head-ic{width:20px;height:20px;fill:currentColor;color:var(--m-accent);flex:0 0 auto}
.mos-ttl{flex:1 1 auto;margin:0;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--m-ink)}
.mos-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  margin:-8px -10px -8px 0;border:0;border-radius:50%;background:var(--m-tile);color:var(--m-ink-2);cursor:pointer}
.mos-x svg{width:16px;height:16px;fill:currentColor;display:block}
.mos-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 14px 6px;scrollbar-width:none}
.mos-body::-webkit-scrollbar{display:none}
.mos-list{display:flex;flex-direction:column;gap:8px}
.mos-row{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 14px;border:0;background:var(--m-tile);color:var(--m-ink);text-decoration:none;font:inherit;text-align:start;cursor:pointer}
.mos-row:active{background:var(--m-tile-2)}
.mos-row-ic{flex:0 0 auto;width:30px;height:30px;display:inline-flex;color:var(--m-ink-2)}
.mos-row-ic :is(svg,img){width:100%;height:100%;display:block;fill:currentColor}
.mos-row-ic img{border-radius:22%}
.mos-row[data-platform="spotify"] .mos-row-ic{color:#1ED760}
.mos-row[data-platform="apple"] .mos-row-ic{color:#FA455C}
.mos-row[data-platform="youtube"] .mos-row-ic,.mos-row[data-platform="ytmusic"] .mos-row-ic{color:#FF0000}
.mos-row[data-platform="instagram"] .mos-row-ic{color:#E1306C}
.mos-row-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mos-row-n{font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.mos-row-d{font-size:12px;color:var(--m-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mos-row-go{flex:0 0 auto;width:16px;height:16px;fill:currentColor;color:var(--m-mute)}
.mos-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mos-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:106px;padding:14px 10px;border:0;background:var(--m-tile);color:var(--m-ink);text-decoration:none;font:inherit;cursor:pointer;text-align:center}
.mos-tile:active{background:var(--m-tile-2)}
.mos-tile-ic{width:32px;height:32px;display:inline-flex;color:var(--m-ink-2)}
.mos-tile-ic :is(svg,img){width:100%;height:100%;display:block;fill:currentColor}
.mos-tile-ic img{border-radius:22%}
.mos-tile[data-platform="instagram"] .mos-tile-ic{color:#E1306C}
.mos-tile-n{font-size:12.5px;font-weight:700;letter-spacing:.06em}
.mos-tile-d{font-size:11px;color:var(--m-mute);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mos-sec{display:flex;align-items:baseline;gap:8px;margin:16px 2px 8px;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--m-mute)}
.mos-sec:first-child{margin-top:4px}
.mos-sec-s{min-width:0;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--m-ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.mos-script{margin:16px 0 2px;text-align:center;font-family:var(--m-script);font-weight:500;font-size:22px;color:var(--m-ink-2)}
/* About is a folder too: the brand line, then the bio the About page reads */
.mos-about-hero{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 2px}
.mos-about-hero img{width:34px;height:auto;display:block}
.mos-about-hero span{font-size:12.5px;font-weight:600;letter-spacing:.32em;color:var(--m-ink)}
.mos-bio{font-size:15px;line-height:1.6;color:var(--m-ink);text-wrap:pretty}
.mos-bio p{margin:0 0 10px}
.mos-bio p:last-child{margin-bottom:0}
.mos-bio em{color:var(--m-ink)}
/* About folder, made to scan: real headings, a lead line, rules between parts, a set-apart sign-off */
.mos-h{margin:18px 2px 8px;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:.01em;color:var(--m-ink);text-wrap:balance}
.mos-lead{font-size:17px;line-height:1.5}
.mos-rule{height:1px;margin:20px 2px 0;border:0;background:var(--m-bd)}
.mos-sign{margin:16px 0 0;padding:12px 14px;border-radius:14px;background:var(--m-tile);font-size:15px;font-weight:600;line-height:1.4;color:var(--m-ink);text-align:center}
.mos-empty{margin:8px 4px;font-size:13px;color:var(--m-mute)}
.mos-langs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mos-lang{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 14px;border:0;background:var(--m-tile);color:var(--m-ink);font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;text-align:start;unicode-bidi:plaintext}
.mos-lang:active{background:var(--m-tile-2)}
/* white text on the song accent: the fill is darkened to keep 4.5:1 for every palette colour */
.mos-lang[aria-current="true"]{background:color-mix(in srgb,var(--m-accent) 75%,#000);color:#fff}
.mos-lang svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.mos-sheet :focus-visible,.mos-menu :focus-visible,.mos-view :focus-visible,#mHome :focus-visible{outline:2px solid var(--m-accent);outline-offset:2px}

/* ═══ MENU — the system drawer, from the end side ═══════════════════════════ */
.mos-menu{display:flex;position:fixed;z-index:152;top:0;bottom:0;inset-inline-end:0;width:min(320px,86vw);flex-direction:column;
  padding:calc(10px + var(--sat)) 14px calc(16px + var(--sab));overflow-y:auto;scrollbar-width:none;
  background:var(--m-glass-2);border-inline-start:1px solid var(--m-bd);color:var(--m-ink);font-family:var(--m-ui);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);
  box-shadow:0 0 70px -20px rgba(10,30,56,.5);
  transform:translate3d(calc(104% * var(--m-dir)),0,0);visibility:hidden;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility .28s}
body.mos-menu-open .mos-menu{transform:none;visibility:visible}
/* wider than the 520px column: the drawer docks to the column's edge, not the page's, and wipes open from it */
@media (min-width:521px){
  .mos-menu{inset-inline-end:calc((100vw - 520px) / 2);transform:none;clip-path:inset(0 0 0 100%);
    transition:clip-path .28s cubic-bezier(.22,.61,.36,1),visibility .28s}
  html[dir="rtl"] .mos-menu{clip-path:inset(0 100% 0 0)}
  body.mos-menu-open .mos-menu,html[dir="rtl"] body.mos-menu-open .mos-menu{clip-path:inset(0 0 0 0)}
}
.mos-menu-head{display:flex;align-items:center;gap:9px;padding:6px 4px 14px}
.mos-menu-head img{width:22px;height:22px;display:block}
.mos-menu-head span{flex:1 1 auto;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase}
.mos-menu-head .mos-x{margin:0}
.mos-mi{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:0 12px;border:0;border-radius:14px;
  background:none;color:var(--m-ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-align:start}
.mos-mi:active,.mos-mi[aria-current="true"]{background:var(--m-tile)}
.mos-mi-ic{width:20px;height:20px;fill:currentColor;color:var(--m-accent);flex:0 0 auto}
.mos-mi-l{flex:1 1 auto;min-width:0}
.mos-mi-v{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--m-mute)}

/* six places, one tap each: a 2-column grid of large tiles, then the inline preferences */
.mos-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:2px 0 14px}
.mos-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;min-height:84px;padding:14px;
  border:1px solid var(--m-bd);border-radius:16px;background:var(--m-tile);color:var(--m-ink);font:inherit;font-size:14.5px;font-weight:600;
  text-align:start;cursor:pointer;transition:transform .12s ease,background .15s ease}
.mos-tile:active{transform:scale(.97);background:var(--m-tile-2)}
.mos-tile[aria-current="true"]{background:var(--m-accent);border-color:transparent;color:#fff}
.mos-tile[aria-current="true"] .mos-tile-ic{color:#fff}
.mos-tile[disabled]{opacity:.4;pointer-events:none}
.mos-tile-ic{width:22px;height:22px;fill:currentColor;color:var(--m-accent);flex:0 0 auto}
.mos-tile-l{line-height:1.2;overflow-wrap:anywhere}
.mos-prefs{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--m-bd)}
.mos-menu-foot{margin-top:auto;padding:18px 12px 4px;font-family:var(--m-script);font-weight:500;font-size:24px;line-height:1.1;color:var(--m-ink-2)}

/* ═══ FULL VIEWS — More music (own), About & Accessibility (existing pages) ═══ */
.mos-view{display:flex;position:fixed;inset:0;z-index:60;flex-direction:column;color:var(--m-ink);font-family:var(--m-ui);
  background:var(--m-view-bg);-webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2);
  opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .24s ease,transform .24s ease,visibility .24s}
body.mos-lib-open .mos-view.mos-lib{opacity:1;visibility:visible;transform:none}
.mos-viewbar{display:flex;flex:0 0 auto;align-items:center;gap:8px;min-height:56px;padding:calc(6px + var(--sat)) 10px 6px}
.mos-back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--m-tile);color:var(--m-ink);cursor:pointer;flex:0 0 auto}
.mos-back svg{width:22px;height:22px;fill:currentColor;display:block}
html[dir="rtl"] .mos-back svg{transform:scaleX(-1)}
.mos-viewttl{flex:1 1 auto;margin:0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--m-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mos-sp{width:44px;flex:0 0 auto}
.mos-lib-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;
  padding:6px 14px calc(24px + var(--sab));max-width:520px;width:100%;margin:0 auto}
.mos-song{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;border:1px solid var(--m-bd);background:var(--m-glass);box-shadow:var(--m-shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.mos-song img{width:64px;height:64px;object-fit:cover;flex:0 0 auto;display:block;background:var(--m-tile)}
.mos-song-tx{flex:1 1 auto;min-width:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}
.mos-song-t{font-family:var(--m-serif);font-size:18px;line-height:1.2;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.mos-song-a{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--m-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mos-song-play{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:var(--m-tile);color:var(--m-ink);cursor:pointer}
.mos-song[aria-current="true"] .mos-song-play{background:var(--m-accent);color:#fff}
.mos-song-play svg{width:22px;height:22px;fill:currentColor;display:block}
.mos-song-play .mh-i-pause{display:none}
body.mos-playing .mos-song[aria-current="true"] .mos-song-play .mh-i-play{display:none}
body.mos-playing .mos-song[aria-current="true"] .mos-song-play .mh-i-pause{display:block}
/* More music is a folder like Listen and Connect: the catalogue as rows in the sheet */
.mos-songs{display:flex;flex-direction:column;gap:8px}
.mos-songs .mos-song{border:0;background:var(--m-tile);box-shadow:none;padding:8px 10px 8px 8px;gap:12px;-webkit-backdrop-filter:none;backdrop-filter:none}
.mos-songs .mos-song[aria-current="true"]{background:var(--m-tile-2)}
.mos-songs .mos-song img{width:56px;height:56px}
.mos-songs .mos-song-t{font-size:17px}

/* About & Accessibility become the editorial room, in the same glass.
   On the phone About is editorial only: Support / Follow / Contact live in the Connect folder. */
body.mos :is(#aboutPage,#a11yPage){padding:0 clamp(16px,5vw,28px) calc(24px + var(--sab));color:var(--m-ink);
  background:var(--m-view-bg);-webkit-backdrop-filter:blur(30px) saturate(1.2);backdrop-filter:blur(30px) saturate(1.2)}
body.mos #aboutPage::after{display:none}
body.mos :is(#aboutPage,#a11yPage) .ab-close{display:none}
body.mos #aboutPage :is(#abSupport,#abFollow){display:none}
body.mos :is(#aboutPage,#a11yPage) .mos-viewbar{position:sticky;top:0;z-index:2;margin:0 calc(-1 * clamp(16px,5vw,28px)) 6px;
  background:linear-gradient(var(--m-view-bg) 70%,transparent)}
body.mos :is(#aboutPage,#a11yPage) .about-wrap{max-width:520px;padding-bottom:20px}
body.mos :is(#aboutPage,#a11yPage) .about-hero{margin:14px 0 6px}
body.mos :is(#aboutPage,#a11yPage) .about-logo{width:44px;filter:drop-shadow(0 4px 14px rgba(210,39,48,.35))}
body.mos :is(#aboutPage,#a11yPage) .about-word{color:var(--m-ink);font-weight:600;letter-spacing:.34em;font-size:15px;margin-top:12px}
body.mos :is(#aboutPage,#a11yPage) .info-block{margin-top:34px}
body.mos #aboutPage .info-block:first-of-type{margin-top:26px}
body.mos :is(#aboutPage,#a11yPage) .info-k{font-size:11px;letter-spacing:.28em;color:var(--m-accent);margin-bottom:14px}
body.mos :is(#aboutPage,#a11yPage) .bio{font-size:16px;line-height:1.6;color:var(--m-ink);text-wrap:pretty}
body.mos :is(#aboutPage,#a11yPage) .bio em{color:var(--m-ink)}
body.mos #aboutPage .about-discover{margin:34px 0 0;padding:0}
body.mos #aboutPage .about-discover .by-head{color:var(--m-accent);letter-spacing:.28em;font-size:11px;margin-bottom:14px}
body.mos #aboutPage .about-discover .bq-text{color:var(--m-ink);font-size:21px}
body.mos #aboutPage .about-discover .bq-by{color:var(--m-mute)}
body.mos #aboutPage .about-discover .by-all{color:var(--m-ink);border-color:var(--m-tile-2);background:var(--m-tile);min-height:46px}
body.mos #aboutPage .mos-about-script{display:block;margin:40px 0 0;text-align:center;font-family:var(--m-script);font-weight:500;
  font-size:24px;line-height:1.15;color:var(--m-ink-2)}
body.mos :is(#aboutPage,#a11yPage) .site-foot{margin-top:40px;color:var(--m-mute)}
body.mos :is(#aboutPage,#a11yPage) .site-foot .foot-fine{color:var(--m-mute)}
body.mos :is(#aboutPage,#a11yPage) .foot-link{color:var(--m-ink-2);border-bottom-color:var(--m-tile-2);min-height:32px}
body.mos :is(#aboutPage,#a11yPage) .foot-dot{color:var(--m-mute)}
body.mos #a11yPage .a11y-list li::before{color:var(--m-accent)}
/* About & Accessibility on the phone, made to scan: each part is its own card with a real heading,
   paragraphs get air, the first line of the bio leads, list items are spaced like steps */
body.mos :is(#aboutPage,#a11yPage) .info-block{padding:16px 16px 18px;border:1px solid var(--m-bd);border-radius:18px;background:var(--m-tile)}
body.mos :is(#aboutPage,#a11yPage) .info-block + .info-block,body.mos #aboutPage .about-cols .info-block{margin-top:12px}
body.mos :is(#aboutPage,#a11yPage) .info-k{font-size:17px;font-weight:600;letter-spacing:.01em;text-transform:none;line-height:1.25;margin-bottom:10px;text-wrap:balance}
body.mos :is(#aboutPage,#a11yPage) .bio p{margin:0 0 12px;max-width:60ch}
body.mos :is(#aboutPage,#a11yPage) .bio p:last-child{margin-bottom:0}
body.mos #aboutPage #bioWho p:first-child{font-size:18px;line-height:1.5}
body.mos #a11yPage .a11y-list li{margin-bottom:10px;line-height:1.5}
body.mos #a11yPage .a11y-list li:last-child{margin-bottom:0}
.mos-a11y-row{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:520px;margin:22px auto 0;min-height:56px;
  padding:8px 16px;border-radius:16px;background:var(--m-glass);border:1px solid var(--m-bd);box-shadow:var(--m-shadow)}
.mos-a11y-row label{font-size:15px;font-weight:500;color:var(--m-ink);flex:1 1 auto}
.mos-a11y-row .fx-sw{background:var(--m-tile-2);box-shadow:none}
.mos-a11y-row .fx-sw[aria-checked="true"]{background:var(--m-accent);filter:none;box-shadow:none}

/* ═══ LYRICS — the full-height room, like the desktop full-lyrics view: the words take
   the screen; a playing video docks in its own band at the top (the floating player),
   and when nothing plays the header offers Play video ═══ */
body.mos #lyricsOverlay{background:var(--m-view-bg);color:var(--m-ink);font-family:var(--m-ui);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2)}
/* the settings sheet never outgrows the room */
body.mos #lyricsOverlay .lo-view{max-height:calc(100% - 12px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
/* inside the sheet the ₑafter pill is the toggle — rows keep the sheet's own ink,
   never the accent-pill colours of the header segments */
body.mos #lyricsOverlay .lo-view .lo-seg,
body.mos #lyricsOverlay .lo-view .lo-seg[aria-pressed="true"]{background:none;color:inherit;box-shadow:none}
body.mos .lo-head{padding:calc(8px + var(--sat)) 10px 6px;gap:8px}
body.mos .lo-head .lo-cov{display:none}
body.mos .lo-head .lo-tools{display:contents}
body.mos .lo-head .lo-close{order:-1;position:relative;width:44px;height:44px;border-radius:50%;background:var(--m-tile);color:transparent;font-size:0}
body.mos .lo-head .lo-close::after{content:'';position:absolute;inset:0;margin:auto;width:22px;height:22px;background:var(--m-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 4.5 8 12l7.5 7.5 1.4-1.4L10.8 12l6.1-6.1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 4.5 8 12l7.5 7.5 1.4-1.4L10.8 12l6.1-6.1z'/%3E%3C/svg%3E") center/contain no-repeat}
html[dir="rtl"] body.mos .lo-head .lo-close::after{transform:scaleX(-1)}
body.mos #lyricsOverlay .lo-head .lo-title{order:1;flex:1 1 auto;text-align:center;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--m-ink)}
body.mos .lo-head .lo-lang{order:2;max-width:100px;min-height:36px;height:36px;padding:0 26px 0 12px;border:0;border-radius:999px;
  background:var(--m-tile);color:var(--m-ink);font-size:12px;font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667e99'%3E%3Cpath d='M12 16 6 10l1.4-1.4 4.6 4.6 4.6-4.6L18 10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
body.mos .lo-head .lo-copy{order:3;width:44px;height:44px;border-radius:50%;background:var(--m-tile);color:var(--m-ink)}
body.mos .lo-view{padding:4px 14px 8px;gap:5px}
body.mos #lyricsOverlay .lo-seg{flex:1 1 0;min-height:40px;border-radius:999px;background:var(--m-tile);color:var(--m-ink-2);font-size:11.5px;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:none}
body.mos #lyricsOverlay .lo-seg[aria-pressed="true"]{background:color-mix(in srgb,var(--m-accent) 75%,#000);color:#fff;box-shadow:none}
body.mos .lo-wait{color:var(--m-mute)}
body.mos .lo-scroll{padding:8px 18px 40px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 44px),transparent)}
body.mos .lo-lines{padding:10vh 0 42vh}
body.mos #lyricsOverlay .lyr-sec{color:var(--m-mute);font-size:9px;letter-spacing:.28em}
body.mos #lyricsOverlay .lo-line{padding:10px 8px}
body.mos #lyricsOverlay .lo-o{font-family:var(--m-lyric);font-size:clamp(23px,6.4vw,30px);line-height:1.25;color:var(--m-ink)}
body.mos #lyricsOverlay .lo-ph{color:var(--m-mute);font-style:italic;font-size:clamp(13px,3.6vw,15px)}
body.mos #lyricsOverlay .lo-tr{color:var(--m-ink-2);font-size:clamp(14.5px,4vw,17px)}

body.mos #lyricsOverlay .lo-line.ll-active{opacity:1;transform:scale(1.04);background:none}
body.mos #lyricsOverlay .lo-line.ll-active::before{display:none}
body.mos #lyricsOverlay .lo-line.ll-active .lo-o{color:var(--m-ink);font-weight:500;text-shadow:none}
body.mos #lyricsOverlay .lo-line.ll-active .lo-tr{color:var(--m-accent)}
body.mos .lo-bar{justify-content:center;align-items:center;padding:8px 16px calc(12px + var(--sab));border-top:1px solid var(--m-bd);background:var(--m-glass)}
body.mos .lo-bar .cp-timeline{flex:1 1 100%;order:0;direction:ltr}
body.mos .lo-bar :is(.cp-cur,.cp-rem){font-size:11px;color:var(--m-ink-2);min-width:36px}
body.mos .lo-bar .cp-rem{color:var(--m-mute)}
body.mos .lo-bar .cp-progress{height:28px}
body.mos .lo-bar .cp-signal-track{background:var(--m-tile-2)}
body.mos .lo-bar .cp-signal-fill{background:var(--m-accent)}
body.mos .lo-bar .cp-signal-head{background:#fff;box-shadow:0 1px 6px rgba(10,30,60,.35);opacity:1}
body.mos .lo-bar .cp-playbtn{order:2;width:56px;height:56px;background:var(--m-accent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--m-accent) 16%,transparent),0 14px 30px -14px color-mix(in srgb,var(--m-accent) 85%,transparent)}
body.mos .lo-bar .cp-playbtn svg{fill:#fff;width:26px;height:26px}
body.mos .lo-bar .mos-lo-prev{order:1}
body.mos .lo-bar .mos-lo-next{order:3}
body.mos .lo-bar :is(.mos-lo-prev,.mos-lo-next){display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;
  border:1px solid var(--m-bd);border-radius:50%;background:var(--m-tile);color:var(--m-ink);cursor:pointer}
body.mos .lo-bar :is(.mos-lo-prev,.mos-lo-next) svg{width:22px;height:22px;fill:currentColor;display:block}
body.mos .lo-bar :is(.mos-lo-prev,.mos-lo-next)[disabled]{opacity:.32;pointer-events:none}
/* the lyrics room has no transport of its own: the floating player is the transport,
   and it sits where the bar used to be (js/mobile.js pipRestore) */
body.mos .lo-bar{flex-wrap:wrap;gap:6px 18px;direction:ltr;display:none}
/* the band the docked player sits in: real room in the column, so the words scroll
   under it, never behind it; no band while nothing is docked */
body.mos.mos-pip-dock .mos-lo-band{display:block;flex:0 0 auto;height:var(--m-pipband-h,172px);transition:height .22s ease}
html.rm body.mos.mos-pip-dock .mos-lo-band{transition:none}
body.mos #lyricsOverlay .lo-scroll{padding-bottom:calc(24px + var(--sab) + var(--m-pipfoot,0px))}
body.mos .mos-return{display:none;position:absolute;left:50%;bottom:calc(26px + var(--sab) + var(--m-pipfoot,0px));z-index:4;transform:translateX(-50%);
  align-items:center;gap:6px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:color-mix(in srgb,var(--m-accent) 75%,#000);color:#fff;
  font:inherit;font-family:var(--m-ui);font-size:12px;font-weight:600;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 12px 30px -12px color-mix(in srgb,var(--m-accent) 90%,transparent)}
body.mos .mos-return svg{width:16px;height:16px;fill:currentColor}
body.mos .mos-return.on{display:inline-flex}

/* the existing settings popover, as one glass sheet */
body.mos #settingsMenu{background:var(--m-glass-2);color:var(--m-ink);border-color:var(--m-bd);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);box-shadow:0 -20px 60px -24px rgba(10,30,56,.45)}
body.mos #settingsMenu.as-sheet{height:auto;border-radius:var(--m-r) var(--m-r) 0 0;padding:14px 14px calc(18px + var(--sab))}
body.mos #settingsMenu :is(.fx-title,.fx-row label,.sm-sec){color:var(--m-ink)}
body.mos #settingsMenu .sm-sec{color:var(--m-mute)}
body.mos #settingsMenu .fx-row{min-height:52px}
body.mos #settingsMenu .sm-group:has(.sm-sec-panels){display:none}

/* ═══ COMPACT — ≤700px tall (375×667 and friends): whitespace first, then the
   cover (~28% of the height, 190px on an SE), then previews and gaps. Every
   primary action stays; touch targets stay ≥44px, the play control at 56px. ═ */
@media (max-height:700px){
  body.mos{--m-gap:8px;--m-wrow:58px;--m-play:60px;--m-ctl:44px;
    --m-art:clamp(200px,min(var(--m-panel-w),var(--m-vh) - 400px),340px)}
  body.mos .mh-wrap{padding-top:calc(2px + var(--sat));padding-bottom:calc(8px + var(--sab))}
  body.mos .mh-bar{min-height:44px}
  body.mos .mh-stage{gap:8px}
  body.mos .mh-title{font-size:clamp(18px,5.4vw,22px)}
  body.mos .mh-sub{font-size:10.5px;margin-top:3px}
  body.mos .mh-player{gap:2px}
  body.mos #mHome .cp-progress{height:28px}
  
  body.mos .mh-w{padding:9px 11px;gap:4px}
  body.mos .mh-hint{display:none}
  /* the About row keeps its line: it is the phone's one piece of voice, not a hint */
  
  
  body.mos .mh-quote{-webkit-line-clamp:1;font-size:14px;min-height:1.3em}
  body.mos .mh-thumb{width:24px;height:24px;border-radius:7px}
  
  
}
/* ═══ TIGHT — ≤600px tall (an SE with Safari's bars up, 360×640 Androids):
   widgets fold to icon + label rows, the cover takes the room they give back ═ */
@media (max-height:600px){
  body.mos{--m-gap:6px;
    --m-art:clamp(200px,min(var(--m-panel-w),var(--m-vh) - 350px),340px)}
  body.mos .mh-stage{gap:6px}
  
  body.mos .mh-w{flex-direction:row;align-items:center;min-height:48px;padding:0 12px;gap:8px}
  body.mos .mh-w .mh-wh{flex:1 1 auto}
  
  
  
}
/* narrow screens (≤379px wide, the 375 class): the neighbours peek less, the row breathes less */
@media (max-width:379px){
  body.mos{--m-peek:.7;--m-ghost-o:.26;--m-ghost-s:.9}
  
  
  body.mos .mh-transport{gap:clamp(5px,2.4vw,12px)}
}
@media (max-width:360px){
  body.mos .mh-brand span{font-size:11px;letter-spacing:.26em}
  body.mos .mh-w:not(.mh-about) .mh-chev{display:none}
  body.mos .mh-wt{font-size:10px;letter-spacing:.1em}
  body.mos .mh-transport{gap:5px}
}

/* ═══ PiP — the playing video follows you into the pages ═══════════════════
   An iframe that changes parents reloads, so the surface stays exactly where it
   lives in the hero: while a page is open it is lifted to fixed position over
   that page, and .mos-pip draws the chrome around it (the well is transparent —
   the video shows through from just underneath). A fixed element always makes a
   stacking context, so nothing inside #mHome can climb over a page on its own:
   the home screen itself is raised instead. Its furniture is hidden piece by
   piece rather than by hiding the whole wrap — an iframe under a hidden ancestor
   gets its rendering throttled, and the picture goes black. */
body.mos-pip-on #mHome{z-index:141}
body.mos-pip-on #mHome :is(.mh-about,.mh-bar,.mh-song,.mh-player,.mh-widgets,#hero,.mh-disc,.mh-ghost,.mh-slot .art){visibility:hidden}
/* the card's own video box re-declares itself visible in video mode: left alone it
   paints its black square over the page while the picture is out on its own */
body.mos-pip-on #mHome .art .art-video{visibility:hidden;opacity:0}
body.mos-pip-on :is(.mh-card,.mh-stage,.mh-flow,.mh-strip,.mh-slot){transform:none !important;filter:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;overflow:visible !important;
  isolation:auto !important;z-index:auto !important;will-change:auto !important;opacity:1 !important;
  background:none !important;border-color:transparent !important;box-shadow:none !important}
body.mos-pip-on #mHome .mh-vid.mos-pip-vid{position:fixed;inset:auto;z-index:138;opacity:1;visibility:visible;border-radius:16px 16px 0 0;overflow:hidden;background:#0a1420 center/cover no-repeat;box-shadow:0 22px 44px -18px rgba(5,18,38,.75),0 2px 10px rgba(5,18,38,.28)}
/* docked: YouTube's own controls are the picture's controls, so taps reach the iframe
   and the frame above it stops intercepting them */
body.mos-pip-dock #mHome .mh-vid.mos-pip-vid{pointer-events:auto}
body.mos-pip-dock .mos-pip-well{pointer-events:none}
.mos-pip{display:none;position:fixed;left:0;top:0;z-index:142;width:var(--pw,184px);flex-direction:column;
  transform:translate3d(var(--px,0px),var(--py,0px),0);touch-action:none;cursor:grab;
  font-family:var(--m-ui);color:var(--m-ink);-webkit-user-select:none;user-select:none}
body.mos-pip-on .mos-pip{display:flex}
/* docked in a page's own band: no grab cursor, no dismissing it out of the space */
body.mos-pip-dock .mos-pip{cursor:default;pointer-events:none}
body.mos-pip-dock .mos-pip-bar{pointer-events:auto}

.mos-pip.mos-pip-drag{cursor:grabbing}
.mos-pip-well{position:relative;height:var(--ph,104px);border-radius:16px 16px 0 0;
  box-shadow:inset 0 0 0 1px var(--m-bd)}

.mos-pip-yt{position:absolute;top:5px;inset-inline-start:5px;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:rgba(8,16,28,.6);color:#fff;text-decoration:none}
.mos-pip-yt svg{width:16px;height:16px;fill:currentColor;display:block}
body.mos-pip-dock .mos-pip-yt{pointer-events:auto}
/* the embed was refused: the picture becomes the way to the real thing */
.mos-pip-fallback{display:none;position:absolute;inset:0;z-index:2;align-items:center;justify-content:center;gap:8px;
  border-radius:16px 16px 0 0;background:rgba(8,16,28,.62);color:#fff;text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mos-pip-fallback svg{width:17px;height:17px;fill:currentColor;display:block}
body.mos-pip-err .mos-pip-fallback{display:flex;pointer-events:auto}
body.mos-pip-err .mos-pip-yt{display:none}
.mos-pip-prog{position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.mos-pip-prog i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--p,0));background:var(--m-accent)}
.mos-pip-bar{position:relative;display:flex;align-items:center;gap:2px;min-height:52px;padding:4px 8px;border-radius:0 0 16px 16px;
  background:var(--m-glass-2);border:1px solid var(--m-bd);border-top:0;box-shadow:0 18px 36px -20px rgba(5,18,38,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.mos-pip-b{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--m-ink);cursor:pointer;text-decoration:none}
.mos-pip-b svg{width:17px;height:17px;fill:currentColor;display:block}
.mos-pip-b[disabled]{opacity:.32;pointer-events:none}
.mos-pip-play{width:44px;height:44px;background:var(--m-accent);color:#fff}
.mos-pip-play svg{width:20px;height:20px}
.mos-pip-time{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--m-mute);white-space:nowrap}
html[dir="rtl"] body.mos :is(.mos-pip-prev,.mos-pip-next) svg{transform:scaleX(-1)}
.mos-pip-play .mh-i-pause{display:none}
body.mos-playing .mos-pip-play .mh-i-play{display:none}
body.mos-playing .mos-pip-play .mh-i-pause{display:block}
.mos-pip-t{flex:1 1 auto;min-width:0;font-family:var(--m-serif);font-size:13px;line-height:1.15;letter-spacing:.03em;
  color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
body.mos-pip-dock .mos-pip-t{display:none}

/* ── while YouTube is showing, its own controls are the controls: the picture takes taps,
   and our duplicates (play, ±10 s, seek rail) step aside. Song switching stays ours. ── */

body.mos #mHome[data-video="1"]:not([data-state="pending"]):not([data-state="error"]) :is(.mh-play,.mh-b10,.mh-f10,.cp-timeline){display:none}
#mHome[data-video="1"]:not([data-state="pending"]) .mh-transport{gap:clamp(40px,18vw,96px)}
/* our Play steps aside only once a real video is up; before that it is the way to start */
body.mos-pip-dock :is(.mos-pip-time,.mos-pip-prog){display:none}
body.mos-pip-dock:has(#mHome[data-video="1"]) .mos-pip-play{display:none}
/* no iframe over it yet: the whole square cover on the black panel, never cropped to 16:9 */
body.mos-pip-on #mHome .mh-vid.mos-pip-vid{background-color:#050608;background-size:contain;background-position:center;background-repeat:no-repeat}
.mos-pip-time{padding-inline-end:4px;margin-inline-start:auto}
.mos-pip-bar .mos-pip-yt{position:static;inset:auto;width:42px;height:42px;background:transparent;color:var(--m-ink)}
.mos-pip-bar .mos-pip-yt svg{width:17px;height:17px}

/* ── one shape family: cards & sheets 22px · cover 18px · rows inside 14px ·
   circles for icon buttons · pills for labelled actions ── */
.mh-btn{box-shadow:none}
.mos-row,.mos-tile,.mos-lang,.mos-songs .mos-song{border-radius:var(--m-r-in)}
.mos-song{border-radius:var(--m-r)}
.mos-song img,.mos-songs .mos-song img{border-radius:10px}
body.mos #lyricsOverlay .lo-line{border-radius:var(--m-r-in)}
/* playing video: the frame KEEPS the cover's square slot, and the WHOLE video fits inside it
   (YouTube letterboxes a widescreen picture) — never cropped, so YouTube's own control bar,
   settings and fullscreen buttons are always fully visible and tappable.
   Pip and YouTube-initiated fullscreen are exempt. Desktop twin: css/site.css → "VIDEO SIZE" (§14). */
#mHome[data-video="1"] .mh-vid:not(.mos-pip-vid) iframe,
#mHome[data-video="1"] .mh-vid:not(.mos-pip-vid)>div{
  width:100%;height:100%;left:0;top:0;right:auto;bottom:auto;transform:none}

#mHome[data-video="1"]:not([data-state="pending"]) .mh-ghost{display:none}
#mHome[data-video="1"]:not([data-state="pending"]) .mh-vid{pointer-events:auto;background-image:none !important;background-color:#000}
/* ═══ MOTION — restrained, and off entirely under reduced motion ═══════════ */
html.rm body.mos :is(.mh-strip,.mh-w,.mh-tb,.mh-btn,.mos-sheet,.mos-menu,.mos-view,.mos-scrim,#lyricsOverlay,.lo-line){transition:none !important}
html.rm body.mos #mHome[data-state="pending"] .mh-play::before{animation-duration:1.6s}
/* ═══ PLAYING VIDEO — the card hugs its content: video at the top in the cover's square,
   title and controls right under it; Lyrics and More music follow below the card
   instead of empty glass inside it ═══ */
#mHome[data-video="1"]:not([data-state="pending"]) .mh-first{min-height:0}
#mHome[data-video="1"]:not([data-state="pending"]) .mh-card{flex:0 0 auto;justify-content:flex-start;padding-top:12px}
#mHome[data-video="1"]:not([data-state="pending"]) .mh-stage{flex:0 0 auto;justify-content:flex-start}
#mHome[data-video="1"]:not([data-state="pending"]) .mh-title{min-height:0;font-size:clamp(18px,5vw,22px)}
#mHome[data-video="1"]:not([data-state="pending"]) .mh-disc{padding-top:0}
/* YouTube's own controls answer the finger: the picture and its iframe take touches;
   song changes live on prev / next, outside the frame */
#mHome[data-video="1"]:not([data-state="pending"]) :is(.mh-vid,.mh-vid iframe){pointer-events:auto}
#mHome[data-video="1"]:not([data-state="pending"]) .mh-flow{touch-action:auto;cursor:auto}

/* ═══ PLAYER STATES — idle · loading · playing · paused · ended · unavailable ═══════
   idle     full square cover · title · subtitle · one prominent Play (swipe browses)
   loading  the cover stays, a status pill on it, the play ring turns; nothing moves
   playing  / paused: the video filling the square cover slot, YouTube's controls; songs change on the
            labelled Previous / Next under it
   ended    Replay, and the next song by name
   error    the cover, one short sentence, Watch on YouTube (and Try again if it may work) */
/* the card hugs its contents in every state — never a tall panel around a centred player */
.mh-first{min-height:0}
.mh-card{flex:0 0 auto;justify-content:flex-start}
.mh-stage{flex:0 0 auto}
.mh-player{gap:6px;padding:0 4px}
/* idle: Play leads, Previous / Next are quiet satellites either side of it */
.mh-transport{gap:clamp(18px,7vw,36px)}
.mh-tl{display:none}
/* loading: the pill sits on our own cover (the video is still hidden), never on YouTube's picture */
#mHome .art .art-status{bottom:12px}
body.mos #mHome[data-state="pending"] .art-status{opacity:1;visibility:visible;transform:translate(-50%,0)}
body.mos-pip-on #mHome .art-status{visibility:hidden !important;opacity:0 !important}
/* playing / paused: YouTube runs playback; the card offers song switching, by name */
#mHome[data-video="1"]:not([data-state="pending"]):not([data-state="error"]) .mh-transport{gap:10px}
#mHome[data-video="1"]:not([data-state="pending"]):not([data-state="error"]) :is(.mh-prev,.mh-next).mh-tb{flex:1 1 0;max-width:180px;width:auto;
  height:48px;gap:8px;padding:0 18px;border-radius:999px;background:var(--m-tile);opacity:1}
#mHome[data-video="1"]:not([data-state="pending"]):not([data-state="error"]) :is(.mh-prev,.mh-next) svg{width:15px;height:15px}
#mHome[data-video="1"]:not([data-state="pending"]):not([data-state="error"]) .mh-tl{display:inline;font-size:13.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
#mHome .mh-tb[disabled]{opacity:.32}
/* the video frame: the cover's own square, near-black behind the picture */
#mHome[data-video="1"]:not([data-state="pending"]) .mh-slot{box-shadow:none;border-radius:0;background:#050608}
/* labelled actions are pills; the primary one wears Play's face */
.mh-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .12s ease}
.mh-pill:active{transform:scale(.96)}
.mh-pill svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto;display:block}
.mh-pill-1{background:#eef3f8;color:#0b1220;box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
body.mos:not(.mos-dark) .mh-pill-1{background:color-mix(in srgb,var(--m-accent) 75%,#000);color:#fff;box-shadow:0 14px 30px -14px color-mix(in srgb,var(--m-accent) 80%,transparent)}
/* ended */
.mh-ended{display:none;flex-direction:column;align-items:center;gap:10px}
#mHome[data-state="ended"] .mh-ended{display:flex}
#mHome[data-state="ended"] .mh-transport{display:none}
.mh-upnext{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 12px 8px 8px;border:0;border-radius:var(--m-r-in);
  background:var(--m-tile);color:var(--m-ink);font:inherit;text-align:start;cursor:pointer}
.mh-upnext[hidden]{display:none}
.mh-upnext:active{background:var(--m-tile-2)}
.mh-un-cov{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 auto;display:block;background:var(--m-tile)}
.mh-un-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mh-un-k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}
.mh-un-t{font-family:var(--m-serif);font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
/* unavailable / failed: the cover, one sentence, the way to YouTube */
.mh-err{display:none;flex-direction:column;align-items:center;gap:10px;text-align:center}
#mHome[data-state="error"] .mh-err{display:flex}
#mHome[data-state="error"] .mh-transport{display:none}
#mHome[data-state="error"] :is(.mh-vid,.art .art-video){opacity:0 !important;visibility:hidden !important}
#mHome[data-state="error"] .art>img{opacity:1 !important}
.mh-err-t{margin:0;font-size:14px;line-height:1.4;color:var(--m-ink-2);text-wrap:pretty}
.mh-err-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#mHome:not([data-err="failed"]) .mh-retry{display:none}
#mHome[data-err="failed"] .mh-watch{background:var(--m-tile);color:var(--m-ink);box-shadow:none}
/* the old overlay status lines are retired (the rail they floated over is gone) */
body.mos #mHome .mh-status{display:none}
/* ═══ COMPACT VIDEO PANEL (phone) — the same arrangement as desktop: the video full width at its own
   shape, then one short row — Next song · Full lyrics · Share. Full lyrics opens with this player
   docked above the scrolling words. ═══ */
.mh-vacts{display:none}
/* 2026-09-29: the row under the playing video is off (owner) — the lyrics window below does the job */
#mHome[data-video="1"]:not([data-state="pending"]):not([data-state="error"]):not([data-state="ended"]) .mh-transport{display:none}
#mHome[data-video="1"]:not([data-state="pending"]) .mh-player{padding-top:0}
.mh-va{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-width:0;min-height:48px;padding:0 16px 0 13px;border:0;border-radius:999px;
  background:var(--m-tile);color:var(--m-ink);font:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;white-space:nowrap;cursor:pointer}
.mh-va[hidden]{display:none}
.mh-va:active{background:var(--m-tile-2)}
.mh-va svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto;display:block}
.mh-va-next{flex:1 1 0;justify-content:flex-start;padding:4px 14px 4px 4px;text-align:start}
.mh-va-next[hidden]~.mh-va-lyr{flex:1 1 auto}
.mh-va-cov{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:block;background:var(--m-tile)}
.mh-va-tx{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2}
.mh-va-k{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m-mute)}
.mh-va-t{font-family:var(--m-serif);font-size:15px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.mh-va-share{width:48px;padding:0}
/* the row's Share opens the same link sheet as desktop, above the button */
body.mos .cpt-sharepop{z-index:160;max-width:calc(100vw - 20px)}
}

/* phone home: every panel below About is plain white, square, day ink — in both themes */
html body.mos #mHome :is(.mh-w,.mh-panel){background:#fff;border-radius:0;border-color:rgba(11,39,66,.12);-webkit-backdrop-filter:none;backdrop-filter:none;color:#0b2742;
  --m-ink:#0b2742;--m-ink-2:#3b5874;--m-mute:#3b5874;--m-ink-w:#0b2742;--m-ink-2-w:#3b5874;--m-mute-w:#3b5874;--m-tile:rgba(11,39,66,.07);--m-tile-2:rgba(11,39,66,.14);--m-bd:rgba(11,39,66,.14)}
/* the player card has no panel of its own */
html body.mos #mHome .mh-card{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the song title block sits on its own white strip */
html body.mos #mHome .mh-card .mh-song{background:none;padding:0 2px 10px;text-align:start;align-self:stretch;--m-ink:#0b2742;--m-ink-2:#3b5874;--m-mute:#3b5874;--m-text-glow:none}
html body.mos #mHome .mh-card .mh-song::before,html body.mos #mHome .mh-card .mh-song::after{display:none}
html body.mos #mHome .mh-card .mh-song :is(.mh-title,.mh-sub){color:#0b2742;text-shadow:none}
html body.mos #mHome .mh-card .mh-song .mh-sub{color:#3b5874}
/* the play button: white face, day-ink glyph, both themes */
html body.mos #mHome .mh-play{background:#fff;color:#0b2742;box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
html body.mos #mHome .mh-play:active{background:#eef2f6}
/* phone home: the column itself is clear (the song's world shows through); the panels in it are white, day ink throughout */
html body.mos #mHome > .mh-wrap{background:none;color:#0b2742;
  --m-ink:#0b2742;--m-ink-2:#3b5874;--m-mute:#3b5874;--m-text-glow:none;--m-tile:rgba(11,39,66,.07);--m-tile-2:rgba(11,39,66,.14);--m-bd:rgba(11,39,66,.14)}
/* the cover / video frame is square-cornered */
html body.mos #mHome :is(.mh-slot,.mh-ghost,.art,.mh-vid,.mh-vid iframe){border-radius:0}
/* the play button sits on the centre of the artwork */
html body.mos #mHome .mh-card > .mh-player,html body.mos #mHome .mh-transport{position:static}
html body.mos #mHome .mh-play{position:absolute;z-index:5;left:50%;top:calc(clamp(10px,1.5svh,14px) + var(--m-art) / 2);translate:-50% -50%}
/* white on white: each panel lifts off the page on a soft, layered shadow */
html body.mos #mHome :is(.mh-w,.mh-panel){border-color:rgba(11,39,66,.06);
  box-shadow:0 1px 2px rgba(11,39,66,.06),0 8px 24px -10px rgba(11,39,66,.18),0 24px 48px -28px rgba(11,39,66,.22)}
/* player screen = player + lyrics in one view: the cover gives up room so the lyrics window
   fits under it without scrolling */
html body.mos{--m-art:clamp(130px,min(var(--m-panel-w),var(--m-vh) - 600px),400px)}
html body.mos #mHome > .mh-wrap > #hero{height:max(220px,calc(var(--m-vh) - var(--m-first-h) - var(--m-gap) - 18px - var(--sat,0px) - var(--sab,0px)));min-height:0;max-height:none;flex:0 0 auto}
/* More music starts its own page: nothing of it peeks under the player + lyrics screen */
html body.mos #mHome .mh-disc{margin-top:calc(24px + var(--sab,0px))}
/* the player runs the full width of the card; 16:9 frame (same as the video), the square cover sits whole in the middle on black */
html body.mos{--m-art-h:calc(min(100vw,520px) * 9 / 16)}
/* the video / cover frame bleeds through the card's padding and the column's side padding: full width of .mh-wrap */
html body.mos #mHome .mh-card{overflow:visible}
html body.mos #mHome .mh-card > .mh-stage{margin-inline:calc(-15px - clamp(12px,4vw,20px));width:calc(100% + 30px + 2 * clamp(12px,4vw,20px));max-width:none;align-self:stretch}
html body.mos #mHome .mh-card > .mh-stage :is(.mh-flow,.mh-slot){width:100%;max-width:none}
html body.mos #mHome .mh-flow{height:var(--m-art-h);overflow:hidden}
html body.mos #mHome .mh-strip{left:0;width:100%;height:var(--m-art-h);margin-left:0}
html body.mos #mHome .mh-ghost{transform:translate3d(calc(var(--d) * 100% * var(--m-dir)),0,0)}
/* the square cover stays 1:1, uncropped, with black sides */
html body.mos #mHome :is(.art>img,.mh-ghost){width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:#000}
html body.mos #mHome :is(.mh-slot,.mh-slot .art){background:#000}
html body.mos #mHome .mh-strip:is([data-in="-1"],[data-in="1"]) .mh-ghost{transform:translate3d(calc(var(--d) * 100% * var(--m-dir)),0,0)}
html body.mos #mHome .mh-play{top:calc(clamp(10px,1.5svh,14px) + var(--m-art-h) / 2)}
/* the player block keeps one height in every state (idle, loading, video), so the lyrics window never changes size */
html body.mos{--m-first-h:calc(var(--m-art-h) + 140px)}
/* the title block sits under the player: the player screen grows by its measured height (set on #mHome by mobile.js) */
html body.mos #mHome{--m-first-h:calc(var(--m-art-h) + 98px + var(--m-song-h,42px))}
/* #mHome[id] outranks the video-state "min-height:0" rules above (#mHome[data-video]…:not(…)) */
html body.mos #mHome[id] .mh-first{min-height:var(--m-first-h);max-height:var(--m-first-h);box-sizing:border-box}
/* 2026-09-29: compact title strip under the picture — the cover already shows the title large;
   left-aligned, no card, and it stays put while the video plays (no layout jump) */
html body.mos #mHome[id] .mh-title{display:block;min-height:0;font-size:20px;line-height:1.2;letter-spacing:.04em;text-wrap:pretty}
html body.mos #mHome[id] .mh-sub{margin:2px 0 0;font-size:14px;letter-spacing:.01em}
/* Lyrics mode only: the window keeps room for a section heading + a two-line lyric (Current line / intro stay compact) */
html body.mos.hero-all #mHome > .mh-wrap > #hero{height:max(264px,calc(var(--m-vh) - var(--m-first-h) - var(--m-gap) - 18px - var(--sat,0px) - var(--sab,0px)))}
/* ended: Replay + Next song sit ON the 16:9 picture as one centred column, so nothing runs past the player block */
html body.mos #mHome[data-state="ended"] .mh-ended{position:absolute;z-index:6;top:clamp(10px,1.5svh,14px);height:var(--m-art-h);
  inset-inline:calc(-15px - clamp(12px,4vw,20px));box-sizing:border-box;padding:12px 20px;justify-content:center;gap:8px;background:rgba(6,14,24,.62)}
html body.mos #mHome[data-state="ended"] .mh-ended .mh-replay{min-height:44px}
html body.mos #mHome[data-state="ended"] .mh-upnext{width:auto;max-width:min(100%,340px);min-height:52px;padding:6px 14px 6px 6px;background:#fff;color:#0b2742}
html body.mos #mHome[data-state="ended"] .mh-upnext:active{background:#eef2f6}
html body.mos #mHome[data-state="ended"] .mh-un-cov{width:40px;height:40px}
html body.mos #mHome[data-state="ended"] .mh-un-k{color:#3b5874}

/* ═══ DEAD ZONES — top 60px / bottom 80px stay free of taps (browser bars live there).
   --sat/--sab are floored at 60/80 above, so every screen, sheet, menu and the floating
   player already keep their controls out; these two solid bands fill the space and
   swallow stray taps so they never reach content scrolled underneath. ═══ */
/* clear bands: the song's world runs edge to edge; they still swallow stray taps */
body.mos::before,body.mos::after{content:"";position:fixed;left:0;right:0;z-index:170;background:none;pointer-events:auto}
body.mos::before{top:0;height:var(--sat)}
body.mos::after{bottom:0;height:var(--sab)}

/* Listen on sits on the title row: title + subtitle left, brand marks right (48px hit targets; -12px lines the last mark up with the edge) */
html body.mos #mHome .mh-card .mh-song{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:8px;row-gap:0}
/* title takes the whole first row (never squeezed by the links); subtitle · links · All songs share the second */
#mHome .mh-song-tx{display:contents}
html body.mos #mHome[id] .mh-song .mh-title{grid-column:1 / 3;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.mos #mHome[id] .mh-song .mh-sub{grid-column:1;grid-row:2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#mHome .mh-listen{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin-inline-end:-12px}
#mHome .mh-listen:empty{display:none}
#mHome .mh-li{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#3b5874;text-decoration:none;-webkit-tap-highlight-color:transparent}
#mHome .mh-li:active{background:rgba(11,39,66,.08)}
#mHome .mh-li:focus-visible{outline:2px solid #1e5a96;outline-offset:-2px}
#mHome .mh-li :is(svg,img){width:24px;height:24px;display:block;fill:currentColor}
#mHome .mh-li img{border-radius:22%}
#mHome .mh-li[data-platform="spotify"]{color:#1ED760}
#mHome .mh-li[data-platform="apple"]{color:#FA455C}
#mHome .mh-li:is([data-platform="youtube"],[data-platform="ytmusic"]){color:#FF0000}

/* More music = an app folder: 2×2 mini covers + label; tap opens the full list in the sheet */
html body.mos #mHome .mh-p-more{padding:0}
#mHome .mh-folder{display:flex;align-items:center;gap:14px;width:100%;min-height:88px;padding:12px 14px;border:0;background:none;color:#0b2742;font:inherit;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:inherit}
#mHome .mh-folder:active{background:rgba(11,39,66,.06)}
#mHome .mh-folder:focus-visible{outline:2px solid #1e5a96;outline-offset:-2px}
#mHome .mh-fd-grid{flex:0 0 auto;width:64px;height:64px;padding:5px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:4px;border-radius:16px;background:rgba(11,39,66,.07)}
#mHome .mh-fd-grid img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block}
#mHome .mh-fd-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
#mHome .mh-fd-t{font-size:16px;font-weight:600;letter-spacing:.01em}
#mHome .mh-fd-n{font-size:13px;color:#3b5874}
#mHome .mh-folder .mh-chev{flex:0 0 auto;width:20px;height:20px;color:#3b5874}
[dir="rtl"] #mHome .mh-folder .mh-chev{transform:scaleX(-1)}
/* Connect folder: same tile, the artist's marks in the 2×2 */
#mHome .mh-fd-ic{display:flex;align-items:center;justify-content:center;border-radius:5px;background:#fff;color:#0b2742}
#mHome .mh-fd-ic :is(svg,img){width:15px;height:15px;fill:currentColor;object-fit:contain;display:block}

/* all songs: an app-style tile spanning both title rows (icon over label) — opens the More music sheet */
#mHome .mh-all{grid-column:3;grid-row:1 / 3;align-self:stretch;min-width:72px;min-height:72px;padding:8px 10px;gap:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;border-radius:18px;font:inherit;font-size:12px;font-weight:600;line-height:1.15;letter-spacing:.01em;text-align:center;background:rgba(11,39,66,.07);color:#0b2742;cursor:pointer;-webkit-tap-highlight-color:transparent}
#mHome .mh-all:active{background:rgba(11,39,66,.14)}
#mHome .mh-all:focus-visible{outline:2px solid #1e5a96;outline-offset:2px}
#mHome .mh-all svg{width:24px;height:24px;flex:0 0 auto;fill:currentColor}
#mHome .mh-listen:not(:empty) + .mh-all{margin-inline-start:0}
#mHome .mh-listen{margin-inline-end:0;grid-column:2;grid-row:2}

/* phone home bar: wordmark hidden (the link keeps its aria-label) — one cluster on the right: language · K · menu */
html body.mos #mHome .mh-bar .mh-brand{order:1;flex:0 0 auto;width:44px;height:44px;padding:0;justify-content:center}
html body.mos #mHome .mh-bar .mh-brand span{display:none}
html body.mos #mHome .mh-bar .mh-brand img{width:26px;height:26px}
html body.mos #mHome .mh-bar .mh-lang{order:0;margin-inline-start:auto}
html body.mos #mHome .mh-bar #mhMenu{order:2}

/* the song title now lives in the top bar's free left side; the row above the cover keeps Listen on + All songs */
html body.mos #mHome .mh-bar .mh-song-tx{order:-1;display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;color:#0b2742}
html body.mos #mHome[id] .mh-bar .mh-title{margin:0;font-size:20px;line-height:1.2;color:#0b2742;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.mos #mHome[id] .mh-bar .mh-sub{margin:1px 0 0;font-size:13px;color:#3b5874;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.mos #mHome .mh-card .mh-song{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 8px}
html body.mos #mHome .mh-song .mh-listen{margin-inline-start:-12px}
html body.mos #mHome .mh-song .mh-all{min-height:48px;min-width:0;flex-direction:row;padding:0 14px 0 12px;border-radius:14px;font-size:13px;white-space:nowrap}
html body.mos #mHome .mh-song .mh-all svg{width:20px;height:20px}

/* Listen on + All songs as one tidy bar: brand marks spread evenly, a hairline, then All songs */
html body.mos #mHome .mh-card .mh-song{justify-content:flex-start;gap:4px;padding:4px;margin:0 0 10px;border-radius:16px;background:rgba(11,39,66,.05)}
html body.mos #mHome .mh-song .mh-listen{flex:1 1 auto;margin:0;justify-content:space-around;gap:0}
html body.mos #mHome .mh-song .mh-all{position:relative;margin-inline-start:6px;background:#fff;box-shadow:0 1px 2px rgba(11,39,66,.1),0 2px 8px -4px rgba(11,39,66,.25);border-radius:12px}
html body.mos #mHome .mh-song .mh-all::before{content:'';position:absolute;inset-inline-start:-6px;top:10px;bottom:10px;width:1px;background:rgba(11,39,66,.14)}
html body.mos #mHome .mh-song .mh-listen:empty + .mh-all{margin-inline-start:auto}
html body.mos #mHome .mh-song .mh-listen:empty + .mh-all::before{content:none}

/* compact: one row — title + subtitle left, Listen on marks and an icon-only All songs right */
html body.mos #mHome .mh-card .mh-song{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:2px;row-gap:0;padding:0 4px;margin:0}
html body.mos #mHome .mh-song .mh-song-tx{grid-column:1;grid-row:1;display:block;min-width:0;padding:0 8px}
html body.mos #mHome[id] .mh-song .mh-song-tx .mh-title{margin:0;font-size:20px;line-height:1.2;color:#0b2742;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.mos #mHome[id] .mh-song .mh-song-tx .mh-sub{margin:1px 0 0;font-size:13px;color:#3b5874;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.mos #mHome .mh-song .mh-listen{grid-column:2;grid-row:1;flex:0 0 auto;justify-content:flex-end;gap:0}
html body.mos #mHome .mh-song .mh-li{width:44px;height:44px}
html body.mos #mHome .mh-song .mh-li :is(svg,img){width:22px;height:22px}
html body.mos #mHome .mh-song .mh-all{grid-column:3;grid-row:1;align-self:center;margin:0 0 0 6px;min-width:44px;min-height:44px;width:44px;height:44px;flex-direction:row;gap:0;padding:0;border-radius:12px}
html body.mos #mHome .mh-song .mh-all .mh-all-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html body.mos #mHome .mh-song .mh-all svg{width:22px;height:22px}
html body.mos #mHome .mh-song .mh-all::before{inset-inline-start:-4px;top:10px;bottom:10px}

/* the top bar stays put on every screen (About · player · More music); Connect marks sit on its left */
/* flush to the top edge, full width, under the status bar; its buttons keep the 480px column */
html body.mos #mHome .mh-bar{position:fixed;z-index:20;top:0;left:0;translate:none;width:100%;box-sizing:border-box;padding:0 4px;border-radius:0;
  background:var(--m-glass);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 1px 2px rgba(11,39,66,.08),0 6px 18px -10px rgba(11,39,66,.3)}
html body.mos #mHome[id] .mh-first{padding-top:54px}
html body.mos #mHome :is(.mh-about,.mh-disc){padding-top:62px}
#mHome .mh-cn{order:-1;display:flex;align-items:center;gap:0;margin-inline-end:auto;min-width:0}
#mHome .mh-cni{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--m-ink)}
#mHome .mh-cni :is(svg,img){width:20px;height:20px;fill:currentColor;object-fit:contain}
#mHome .mh-lang{display:flex;align-items:center;gap:5px}
#mHome .mh-lang .mh-globe{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
#mHome .mh-lang{position:relative;cursor:pointer}
/* the real picker IS the button: it shows the full language name; the globe sits beside it */
#mHome .mh-lang{padding-inline:12px 4px}
#mHome .mh-lang-sel{-webkit-appearance:none;appearance:none;border:0;background:none;color:inherit;font:600 14px/1 var(--m-ui);min-height:44px;padding:0 8px 0 0;margin:0;cursor:pointer;max-width:38vw;text-overflow:ellipsis}
#mHome .mh-lang-sel:focus{outline:none}
#mHome .mh-lang:focus-within{outline:2px solid currentColor;outline-offset:2px}
/* the native picker anchors to the select: no press-shrink or animated restyle under it */
#mHome .mh-lang:active{transform:none}
#mHome .mh-lang-sel{transition:none;-webkit-tap-highlight-color:transparent}
#mHome .mh-lang{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}

/* TikTok in its real colours: the note in ink with the cyan + red offset glitch (white note on dark) */
body.mos [data-platform="tiktok"] svg,body.mos [data-platform="tiktok"] svg path{fill:#000;color:#000}
body.mos [data-platform="tiktok"] svg{filter:drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55)}
body.mos.mos-dark [data-platform="tiktok"] svg,body.mos.mos-dark [data-platform="tiktok"] svg path{fill:#fff;color:#fff}
/* song row sits snug under the player: no extra air above or below it */
html body.mos #mHome .mh-card{padding-bottom:4px}
/* song row merged onto the top of the lyrics window: one white block, hairline between */
/* the player block hugs its content (no reserved slack); the lyrics window takes the rest, from the measured heights */
html body.mos #mHome.mh-song-up[id] .mh-first{min-height:0;max-height:none}
html body.mos #mHome.mh-song-up > .mh-wrap > #hero{height:max(220px,calc(var(--m-vh) - var(--mh-first-h,300px) - var(--m-song-h,42px) - var(--m-gap)))}
html body.mos.hero-all #mHome.mh-song-up > .mh-wrap > #hero{height:max(264px,calc(var(--m-vh) - var(--mh-first-h,300px) - var(--m-song-h,42px) - var(--m-gap)))}
html body.mos #mHome.mh-song-up > .mh-wrap > .mh-song{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:2px;margin:0;padding:4px 4px 2px;background:#fff;border:1px solid rgba(11,39,66,.06);border-bottom:0;text-align:start;color:#0b2742;--m-ink:#0b2742;--m-ink-2:#3b5874;--m-mute:#3b5874;--m-text-glow:none}
html body.mos #mHome.mh-song-up > .mh-wrap > .mh-song::before,html body.mos #mHome.mh-song-up > .mh-wrap > .mh-song::after{content:none}
html body.mos #mHome.mh-song-up > .mh-wrap > #hero{margin-top:calc(-1 * var(--m-gap));border-top-color:rgba(11,39,66,.1)}
html body.mos #mHome.mh-song-up .mh-song .mh-song-tx{grid-column:1;grid-row:1;display:block;min-width:0;padding:0 8px}
html body.mos #mHome.mh-song-up[id] .mh-song .mh-title{margin:0;font-size:20px;line-height:1.2;color:#0b2742;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.mos #mHome.mh-song-up[id] .mh-song .mh-sub{margin:1px 0 0;font-size:13px;color:#3b5874;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* lyrics settings button in the song row: same tile as All songs */
html body.mos #mHome .mh-song #heroGear{grid-column:3;grid-row:1;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:12px;background:#fff;color:#0b2742;cursor:pointer;box-shadow:0 1px 2px rgba(11,39,66,.1),0 2px 8px -4px rgba(11,39,66,.25)}
html body.mos #mHome .mh-song #heroGear .k-ic{font-size:22px;width:22px;height:22px;fill:currentColor}
html body.mos #mHome .mh-song #heroGear[aria-expanded="true"]{background:#0b2742;color:#fff}
html body.mos #mHome.mh-song-up .mh-song{grid-template-columns:minmax(0,1fr) auto auto auto}
html body.mos #mHome.mh-song-up .mh-song .mh-all{grid-column:4}
/* the video sits flush on the song row: no white strip or gap around the player */
html body.mos #mHome.mh-song-up .mh-card{padding-block:0;gap:0}
html body.mos #mHome.mh-song-up > .mh-wrap > .mh-song{margin-top:calc(-1 * var(--m-gap) - 1px)}
/* song row + lyrics window run the player's full width (bleed through the column padding) and read as one block */
html body.mos #mHome.mh-song-up > .mh-wrap > :is(.mh-song,#hero){margin-inline:calc(-1 * clamp(12px,4vw,20px));width:auto;max-width:none;box-sizing:border-box}
html body.mos #mHome.mh-song-up > .mh-wrap > .mh-song{border:0;padding:6px 10px 2px}
html body.mos #mHome.mh-song-up > .mh-wrap > #hero{border-top:0!important;border-inline:0!important}
/* dark theme: the white panels go to the dark glass the lyrics window already wears, ink flips to light */
html body.mos.mos-dark #mHome :is(.mh-about,.mh-panel,.mh-wrap > .mh-song){background:#141a22!important;-webkit-backdrop-filter:none;backdrop-filter:none;color:#eef2f6;
  --m-ink:#eef2f6;--m-ink-2:rgba(238,242,246,.86);--m-mute:rgba(232,238,245,.72);--m-tile:rgba(255,255,255,.08);--m-tile-2:rgba(255,255,255,.14);--m-bd:rgba(255,255,255,.12)}
html body.mos.mos-dark #mHome > .mh-wrap{color:#eef2f6;--m-ink:#eef2f6;--m-ink-2:rgba(238,242,246,.86);--m-mute:rgba(232,238,245,.72);--m-tile:rgba(255,255,255,.08);--m-tile-2:rgba(255,255,255,.14);--m-bd:rgba(255,255,255,.12)}
html body.mos.mos-dark #mHome[id] .mh-song :is(.mh-title,.mh-song-tx .mh-title){color:#eef2f6}
html body.mos.mos-dark #mHome[id] .mh-song :is(.mh-sub,.mh-song-tx .mh-sub){color:rgba(232,238,245,.72)}
html body.mos.mos-dark #mHome .mh-song :is(.mh-all,#heroGear){background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
html body.mos.mos-dark #mHome .mh-song .mh-all::before{background:rgba(255,255,255,.16)}
html body.mos.mos-dark #mHome .mh-song #heroGear[aria-expanded="true"]{background:#fff;color:#0b2742}
html body.mos.mos-dark #mHome .mh-about :is(.mh-ab-k,.mh-ab-bio,.mh-ab-hero span),html body.mos.mos-dark #mHome .mh-panel :is(.mh-fd-t,.mos-sec,.mos-tile){color:#eef2f6}
html body.mos.mos-dark #mHome :is(.mh-fd-n,.mh-folder .mh-chev){color:rgba(232,238,245,.72)}
html body.mos.mos-dark #mHome .mh-folder{color:#eef2f6}
html body.mos.mos-dark #mHome .mh-fd-grid{background:rgba(255,255,255,.08)}
html body.mos.mos-dark #mHome .mh-ab-down{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.16)}
/* player · song row · lyrics = one column block: no seams, one soft shadow down the whole stack */
html body.mos #mHome.mh-song-up .mh-card > .mh-stage{position:relative;z-index:1;box-shadow:0 1px 2px rgba(11,39,66,.06)}
html body.mos #mHome.mh-song-up > .mh-wrap > .mh-song{position:relative;z-index:1;box-shadow:none}
html body.mos #mHome.mh-song-up > .mh-wrap > #hero{box-shadow:0 10px 24px -12px rgba(11,39,66,.22),0 24px 48px -28px rgba(11,39,66,.22)!important}
/* About screen: only as tall as its words (no full-screen page) */
html body.mos #mHome .mh-about{min-height:0;justify-content:flex-start;padding-block:22px;margin-top:calc(54px + var(--sat,0px))}
html body.mos #mHome[id] .mh-about{scroll-margin-top:calc(62px + var(--sat,0px))}
/* rounded panels (24px): the player · title · lyrics stack is one card (top corners on the player, bottom on the lyrics); About and the shelf panels round on all corners */
html body.mos #mHome .mh-card > .mh-stage{border-radius:24px 24px 0 0;overflow:hidden}
html body.mos #mHome .mh-card > .mh-stage :is(.mh-flow,.mh-slot,.art,.mh-vid){border-radius:inherit}
html body.mos #mHome.mh-song-up > .mh-wrap > #hero{border-radius:0 0 24px 24px!important;overflow:hidden}
html body.mos #mHome:not(.mh-song-up) #hero{border-radius:24px!important}
html body.mos #mHome :is(.mh-about,.mh-panel){border-radius:24px;overflow:hidden}
/* dark theme surfaces = the lyrics drawer's solid ink-blue (#141a22) */
html body.mos.mos-dark #mHome #hero{background:#141a22!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(255,255,255,.08)!important}
html body.mos.mos-dark :is(.mos-sheet,.mos-menu,.mos-view){background:#141a22}
/* dark theme: the song row is black, one piece with the video frame above it */
html body.mos.mos-dark #mHome .mh-wrap > .mh-song{background:#000!important}
/* lyrics window: thinner frame so the words get the room */
html body.mos #mHome.mh-song-up > .mh-wrap > #hero{padding:4px 8px 4px!important}
html body.mos #mHome.mh-song-up #hero .hero-quote{padding:4px 6px!important}
html body.mos #mHome.mh-song-up #hero:not(.hl-settings) .hero-lyrhead{display:none}
/* About: the headings ("היי, זה Kahalanos", "My music") in the same face as the text below them */
html body.mos #mHome .mh-about .mh-ab-k,html body.mos .mos-sheet .mos-h{font-family:var(--m-ui,var(--ui));font-weight:600;letter-spacing:0}
/* top bar language: globe + 2-letter code; the real <select> covers the button invisibly so a tap opens the phone's picker */
#mHome .mh-lang{position:relative;padding-inline:10px 12px;gap:5px}
#mHome .mh-lang-code{font:700 13px/1 var(--m-ui,var(--ui));letter-spacing:.06em}
#mHome .mh-lang .mh-lang-sel{position:absolute;inset:0;width:100%;max-width:none;height:100%;min-height:0;padding:0;opacity:0;cursor:pointer}
/* the native list follows the theme — it inherited white ink and drew white-on-white in dark */
#mHome .mh-lang-sel{color-scheme:light}
#mHome .mh-lang-sel option{background:#fff;color:#0b2742}
body.mos-dark #mHome .mh-lang-sel{color-scheme:dark}
body.mos-dark #mHome .mh-lang-sel option{background:#141b26;color:#e8eef5}
/* top bar Connect folder: a 44px tile holding the four marks */
#mHome .mh-cn-fd{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border:0;border-radius:999px;color:#0b2742;font:600 14px/1 var(--m-ui,var(--ui));white-space:nowrap;background:rgba(11,39,66,.07);cursor:pointer;-webkit-tap-highlight-color:transparent}
#mHome .mh-cn-fd:active{background:rgba(11,39,66,.14)}
#mHome .mh-cn-g{display:grid;grid-template-columns:14px 14px;grid-auto-rows:14px;gap:3px}
#mHome .mh-cn-g i{display:grid;place-items:center;width:14px;height:14px;color:#0b2742}
#mHome .mh-cn-g :is(svg,img){width:13px;height:13px;fill:currentColor;object-fit:contain;display:block}
body.mos.mos-dark #mHome .mh-cn-fd{background:rgba(255,255,255,.1)}
body.mos.mos-dark #mHome .mh-cn-g i{color:#fff}
body.mos.mos-dark #mHome .mh-cn-fd{color:#fff}
/* breathing room between the floating top bar and the player */
html body.mos #mHome[id] .mh-first{padding-top:66px}
/* the same gap under the top bar on every screen: About and the More music shelf */
html body.mos #mHome .mh-about{margin-top:calc(66px + var(--sat,0px))}
html body.mos #mHome[id] .mh-about{scroll-margin-top:calc(66px + var(--sat,0px))}
html body.mos #mHome[id] .mh-disc{padding-top:66px}
/* top bar, bigger for thumbs: 52px tiles, larger type and marks */
html body.mos #mHome .mh-bar{padding:calc(4px + env(safe-area-inset-top,0px)) max(12px,calc((100vw - 480px) / 2)) 4px;min-height:calc(60px + env(safe-area-inset-top,0px))}
html body.mos #mHome .mh-bar :is(.mh-btn,.mh-cn-fd){height:52px;min-width:52px}
html body.mos #mHome .mh-bar .mh-btn.mh-ic{width:52px}
html body.mos #mHome .mh-bar .mh-btn svg{width:24px;height:24px}
html body.mos #mHome .mh-bar .mh-brand img{width:32px;height:32px}
html body.mos #mHome .mh-bar .mh-cn-fd{padding:0 18px;font-size:16px}
html body.mos #mHome .mh-bar .mh-lang-code{font-size:15px}
html body.mos #mHome .mh-bar .mh-lang .mh-globe{width:21px;height:21px}
html body.mos #mHome[id] .mh-first{padding-top:62px}
html body.mos #mHome .mh-about{margin-top:calc(62px + var(--sat,0px) + var(--m-ab-c,0px))}
html body.mos #mHome[id] .mh-about{scroll-margin-top:calc(62px + var(--sat,0px) + var(--m-ab-c,0px))}
html body.mos #mHome[id] .mh-disc{padding-top:62px}
/* the song title shows whole: it wraps (up to 2 lines) and the lyrics window gives up the height (song row is measured) */
html body.mos #mHome.mh-song-up[id] .mh-song .mh-song-tx :is(.mh-title,.mh-sub){white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-wrap:balance}
html body.mos #mHome.mh-song-up[id] .mh-song .mh-song-tx .mh-sub{-webkit-line-clamp:1;line-clamp:1}
html body.mos #mHome.mh-song-up .mh-song{align-items:center}
/* each snap stop is a whole screen: the short About panel sits centred in it (between the top bar and the screen's end).
   --m-ab-c = the half of the spare room moved above the panel (taken from the scene below, so the screen's height and the snaps stay put) */
html body.mos #mHome .mh-about{--m-ab-c:max(0px,min(calc((var(--m-vh) - 62px - var(--m-ab-h,0px)) / 2),calc(var(--m-vh) + var(--sab,0px) - 80px - var(--m-ab-h,0px) - var(--m-gap))));
  margin-bottom:max(0px,calc(var(--m-vh) + var(--sab,0px) - 80px - var(--m-ab-h,0px) - var(--m-gap) - var(--m-ab-c)))}
/* the last screen is a whole screen too, so scrolling to the end lands exactly on its snap */
html body.mos #mHome[id] .mh-disc{min-height:calc(var(--m-vh) + var(--sab,0px));box-sizing:border-box}