/* =========================================================
   MOODROUND — CLEAN PRODUCTION STYLESHEET
   Orbit, Focus and Discover
   Consolidated: 2026-07-26
========================================================= */

/* =========================================================
   DESIGN TOKENS, RESET AND VIEWPORT
========================================================= */

:root{
  --bg:#01030a;
  --text:#f7f9ff;
  --warm-white:#f7f4ee;
  --muted:#96a4bb;

  --blue:#78caff;
  --blue-soft:#a8e4ff;
  --blue-deep:#346fff;
  --violet:#8b80ff;
  --cyan:#69ffe5;

  --panel:rgba(4,10,22,.66);
  --panel-strong:rgba(4,10,22,.92);

  --line:rgba(130,195,255,.15);
  --line-strong:rgba(130,205,255,.38);

  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);

  --ease:cubic-bezier(.16,1,.3,1);

  --mr-title:#fff;
  --mr-original:rgba(220,225,248,.94);
  --mr-editorial:rgba(229,234,242,.95);
  --mr-meta:rgba(184,198,216,.88);
  --mr-label:#8bd9ff;
  --mr-fit:rgba(201,228,244,.91);
  --mr-chip-text:rgba(225,233,243,.92);
  --mr-line:rgba(145,205,255,.12);
  --mr-control-line:rgba(155,215,255,.16);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  position:fixed;
  inset:0;

  width:100%;
  height:100%;
  min-height:100%;

  margin:0;
  padding:0;

  overflow:hidden;
  overscroll-behavior:none;

  background:var(--bg);
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  color:var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:antialiased;
  -webkit-overflow-scrolling:auto;

  text-rendering:optimizeLegibility;
}

@supports (height:100dvh){
  html,
  body{
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
  }
}

button,
input{
  font:inherit;
}

button{
  color:inherit;

  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
}

button,
a{
  touch-action:manipulation;
}

input{
  touch-action:auto;
}

img{
  max-width:100%;
}

a{
  color:inherit;
}

[hidden]{
  display:none !important;
}

/* =========================================================
   THREE.JS BACKGROUND
========================================================= */

#world{
  position:fixed;
  inset:0;
  z-index:0;

  display:block;

  width:100%;
  height:100%;

  margin:0;
  padding:0;

  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(40,100,180,.08),
      transparent 36%
    ),
    var(--bg);

  pointer-events:none;
}

.veil{
  position:fixed;
  inset:0;
  z-index:1;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 51% 52%,
      transparent 0 20%,
      rgba(0,0,0,.015) 37%,
      rgba(0,0,0,.46) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.22),
      transparent 27%,
      transparent 74%,
      rgba(0,0,0,.25)
    );
}

.grain{
  position:fixed;
  inset:0;
  z-index:2;

  pointer-events:none;

  opacity:.018;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.82) 0 1px,
      transparent 1px
    );

  background-size:8px 8px;
}

/* =========================================================
   LOADING
========================================================= */

.boot{
  position:fixed;
  inset:0;
  z-index:100;

  width:100%;
  height:100%;

  display:grid;
  place-items:center;
  align-content:center;

  gap:18px;

  background:var(--bg);

  transition:
    opacity .75s var(--ease),
    visibility .75s var(--ease);
}

.boot.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.boot-symbol.boot-logo{
  position:relative;

  display:block;

  width:112px;
  height:112px;

  margin:0 auto 14px;

  object-fit:contain;
  object-position:center;

  border:0 !important;
  border-radius:0 !important;

  background:none !important;
  box-shadow:none !important;

  filter:
    drop-shadow(0 0 12px rgba(120,202,255,.36))
    drop-shadow(0 0 32px rgba(139,128,255,.22));

  user-select:none;
  pointer-events:none;

  animation:
    moodroundBootFloat
    3.8s
    ease-in-out
    infinite;
}

.boot-symbol.boot-logo::before,
.boot-symbol.boot-logo::after{
  display:none !important;
  content:none !important;
}

.boot-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.boot-copy b{
  display:block;

  color:var(--warm-white);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:34px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.025em;

  text-shadow:
    0 0 20px
    rgba(120,202,255,.12);
}

.boot-copy span{
  display:block;

  margin-top:9px;

  color:var(--muted);

  font-size:9px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.24em;

  text-transform:uppercase;
}

@keyframes moodroundBootFloat{
  0%,
  100%{
    transform:
      translateY(0)
      scale(1);

    filter:
      drop-shadow(0 0 12px rgba(120,202,255,.32))
      drop-shadow(0 0 28px rgba(139,128,255,.18));
  }

  50%{
    transform:
      translateY(-5px)
      scale(1.025);

    filter:
      drop-shadow(0 0 17px rgba(120,202,255,.46))
      drop-shadow(0 0 40px rgba(139,128,255,.26));
  }
}

/* =========================================================
   MAIN APPLICATION
========================================================= */

.experience{
  position:fixed;
  inset:0;
  z-index:5;

  width:100%;
  height:100%;

  overflow:hidden;
  overscroll-behavior:none;
}

/* =========================================================
   TOPBAR, BRAND AND SEARCH
========================================================= */

.topbar{
  position:fixed;

  top:
    calc(
      var(--safe-top) +
      18px
    );

  left:50%;
  z-index:40;

  width:
    min(
      1380px,
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        40px
      )
    );

  height:58px;

  padding:0;

  display:grid;

  grid-template-columns:
    max-content
    minmax(0,1fr);

  align-items:center;
  gap:28px;

  transform:translateX(-50%);

  border:0;
  border-radius:0;

  background:transparent;

  -webkit-backdrop-filter:none;
  backdrop-filter:none;

  box-shadow:none;

  isolation:isolate;
}

.brand,
.brand-with-logo{
  display:flex;
  align-items:center;

  gap:12px;

  min-width:max-content;

  color:var(--warm-white);

  text-decoration:none;
  white-space:nowrap;

  -webkit-tap-highlight-color:transparent;
}

.brand-with-logo{
  position:relative;

  min-height:56px;

  padding:0 2px;

  border:0;
  border-radius:0;

  background:transparent;
  box-shadow:none;
}

.brand-with-logo::before{
  content:"";

  position:absolute;

  left:8px;
  top:50%;

  width:58px;
  height:58px;

  transform:translateY(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(105,185,255,.10),
      transparent 70%
    );

  filter:blur(12px);

  opacity:.75;

  pointer-events:none;
}

.brand-logo{
  position:relative;
  z-index:1;

  display:block;

  width:50px;
  height:50px;

  flex:0 0 50px;

  object-fit:contain;
  object-position:center;

  border:0;
  border-radius:0;

  background:transparent;

  filter:
    drop-shadow(0 0 7px rgba(120,202,255,.30))
    drop-shadow(0 0 15px rgba(139,128,255,.16));

  user-select:none;
  pointer-events:none;

  transform:translateZ(0);

  transition:
    transform .5s var(--ease),
    filter .4s ease,
    opacity .3s ease;
}

.brand-with-logo > span{
  position:relative;
  z-index:1;

  display:block;

  color:var(--warm-white);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:30px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;

  text-shadow:
    0 0 18px
    rgba(150,200,255,.08);
}

.brand-with-logo:hover .brand-logo,
.brand-with-logo:focus-visible .brand-logo{
  transform:
    scale(1.055)
    rotate(2deg);

  filter:
    drop-shadow(0 0 9px rgba(120,202,255,.45))
    drop-shadow(0 0 22px rgba(139,128,255,.24));
}

.brand-with-logo:focus-visible{
  outline:none;
}

.top-search{
  position:relative;

  justify-self:stretch;

  width:100%;
  height:54px;
  min-width:0;

  padding:0 6px 0 19px;

  display:flex;
  align-items:center;

  gap:10px;

  border:
    1px solid
    rgba(130,195,255,.20);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(5,12,27,.82),
      rgba(2,7,17,.72)
    );

  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);

  box-shadow:
    0 18px 60px rgba(0,0,0,.24),
    inset 0 0 35px rgba(85,165,255,.025),
    0 0 0 1px rgba(70,140,220,.015);

  transition:
    border-color .3s var(--ease),
    box-shadow .3s var(--ease),
    background .3s var(--ease),
    transform .3s var(--ease);
}

.top-search::before{
  content:"";

  position:absolute;

  left:58px;
  right:58px;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(150,220,255,.22),
      transparent
    );

  opacity:.65;

  pointer-events:none;
}

.top-search:focus-within{
  border-color:rgba(135,210,255,.46);

  background:
    linear-gradient(
      180deg,
      rgba(6,15,33,.90),
      rgba(2,8,20,.82)
    );

  box-shadow:
    0 20px 75px rgba(0,0,0,.30),
    0 0 34px rgba(75,155,255,.13),
    inset 0 0 32px rgba(80,165,255,.035);

  transform:translateY(-1px);
}

.search-status{
  width:6px;
  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:#8bdcff;

  box-shadow:
    0 0 10px #8bdcff,
    0 0 18px rgba(100,205,255,.65);
}

.top-search input{
  flex:1;

  width:100%;
  min-width:0;
  height:100%;

  padding:0;

  border:0;
  outline:0;

  background:transparent;
  color:#fff;

  font-size:14px;
}

.top-search input::placeholder{
  color:#b6c1d1;
  opacity:.78;
}

/* Submit arrow */

.top-search .search-submit{
  width:38px;
  height:38px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  padding:0;

  border:0;
  border-radius:50%;

  background:
    linear-gradient(
      180deg,
      #ebfaff,
      #9dc7ff
    );

  color:#06111f;

  font-size:18px;
  font-weight:800;

  cursor:pointer;

  box-shadow:
    0 0 20px
    rgba(120,205,255,.24);

  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease),
    filter .25s ease;
}

.top-search .search-submit:hover,
.top-search .search-submit:focus-visible{
  transform:scale(1.05);

  box-shadow:
    0 0 28px
    rgba(120,205,255,.40);

  outline:none;
}

.top-search .search-submit:active{
  transform:scale(.96);
}


/* Clear mood */

.top-search .search-clear{
  width:28px;
  height:28px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  margin:0 -2px 0 0;
  padding:0;

  border:
    1px solid
    transparent;

  border-radius:50%;

  background:transparent;

  color:
    rgba(
      178,
      196,
      218,
      .66
    );

  font-size:20px;
  font-weight:400;
  line-height:1;

  cursor:pointer;

  box-shadow:none;

  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s var(--ease);
}

.top-search .search-clear span{
  display:block;

  transform:translateY(-1px);

  pointer-events:none;
}

.top-search .search-clear:hover,
.top-search .search-clear:focus-visible{
  color:#f3f9ff;

  border-color:
    rgba(
      145,
      210,
      255,
      .16
    );

  background:
    rgba(
      120,
      190,
      255,
      .065
    );

  transform:scale(1.05);

  outline:none;
}

.top-search .search-clear:active{
  transform:scale(.92);
}

/* =========================================================
   FILTER PANEL
========================================================= */

.filter-panel{
  --tray-anchor:50%;

  position:fixed;

  left:50%;

  bottom:
    calc(
      var(--safe-bottom) +
      110px
    );

  z-index:36;

  width:
    min(
      900px,
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        34px
      )
    );

  max-height:none;

  padding:14px 16px 16px;

  overflow:visible;

  transform:
    translate(-50%,12px)
    scale(.985);

  transform-origin:center bottom;

  border:
    1px solid
    rgba(135,205,255,.16);

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      rgba(6,13,28,.96),
      rgba(3,8,18,.95)
    );

  -webkit-backdrop-filter:blur(25px);
  backdrop-filter:blur(25px);

  box-shadow:
    0 26px 90px rgba(0,0,0,.48),
    0 0 35px rgba(70,145,225,.055),
    inset 0 0 38px rgba(85,165,255,.022);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .28s var(--ease),
    visibility .28s var(--ease),
    transform .34s var(--ease);
}

.filter-panel.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:
    translate(-50%,0)
    scale(1);
}

.filter-panel::before{
  content:attr(data-title);

  display:block;

  margin:0 0 12px 2px;

  color:rgba(137,207,255,.78);

  font-size:8px;
  font-weight:800;
  line-height:1;
  letter-spacing:.18em;

  text-transform:uppercase;
}

.filter-panel::after{
  content:"";

  position:absolute;

  left:var(--tray-anchor);
  bottom:-6px;

  width:12px;
  height:12px;

  transform:
    translateX(-50%)
    rotate(45deg);

  border-right:
    1px solid
    rgba(135,205,255,.15);

  border-bottom:
    1px solid
    rgba(135,205,255,.15);

  background:rgba(3,8,18,.96);

  pointer-events:none;
}

.filter-panel[data-active-filter="format"]{
  --tray-anchor:8.2%;
}

.filter-panel[data-active-filter="commitment"]{
  --tray-anchor:23.6%;
}

.filter-panel[data-active-filter="genre"]{
  --tray-anchor:39%;
}

.filter-panel[data-active-filter="origin"]{
  --tray-anchor:61%;
}

.filter-panel[data-active-filter="release"]{
  --tray-anchor:76.4%;
}

.filter-panel[data-active-filter="discovery"]{
  --tray-anchor:91.8%;
}

.filter-options{
  display:flex;
  flex-wrap:wrap;

  gap:9px;

  padding:0;
}

.filter-options button{
  min-height:36px;

  padding:0 14px;

  border:
    1px solid
    rgba(135,205,255,.13);

  border-radius:999px;

  background:rgba(255,255,255,.025);

  color:rgba(186,201,221,.84);

  font-size:11px;
  font-weight:500;

  cursor:pointer;

  box-shadow:
    inset 0 0 18px
    rgba(90,170,255,.012);

  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.filter-options button:hover,
.filter-options button:focus-visible{
  color:#fff;

  border-color:rgba(145,215,255,.32);
  background:rgba(105,185,255,.075);

  transform:translateY(-1px);

  outline:none;
}

.filter-options button:active{
  transform:
    translateY(0)
    scale(.98);
}

.filter-options button.active{
  color:#f5fbff;

  border-color:rgba(145,220,255,.48);

  background:
    linear-gradient(
      180deg,
      rgba(115,195,255,.14),
      rgba(80,145,225,.075)
    );

  box-shadow:
    0 0 24px rgba(80,165,255,.13),
    inset 0 0 22px rgba(130,210,255,.035);
}

/* =========================================================
   CENTRAL CORE
========================================================= */

.core-zone{
  position:fixed;

  left:50%;
  top:50%;
  z-index:11;

  width:360px;
  height:360px;

  transform:translate(-50%,-50%);

  pointer-events:none;
}

.core-zone.core-zone-overlay{
  position:fixed !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  min-width:0 !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  display:block !important;

  transform:none !important;
  translate:none !important;
  rotate:none !important;
  scale:none !important;

  filter:none !important;
  perspective:none !important;
  contain:none !important;

  pointer-events:none !important;

  z-index:11 !important;
}

.core,
#coreButton{
  position:fixed;

  left:
    var(
      --moodround-core-x,
      50vw
    );

  top:
    var(
      --moodround-core-y,
      50vh
    );

  width:
    var(
      --moodround-core-ui-size,
      150px
    ) !important;

  height:
    var(
      --moodround-core-ui-size,
      150px
    ) !important;

  margin:0;
  padding:0;

  transform:translate(-50%,-50%);
  transform-origin:center;

  border:0;
  border-radius:50%;

  background:transparent;

  overflow:visible;

  pointer-events:auto;

  cursor:pointer;

  -webkit-tap-highlight-color:transparent;

  will-change:
    left,
    top,
    transform,
    opacity;
}

#coreButton{
  transition:
    opacity .28s ease,
    filter .28s ease;
}

body.card-focus-mode #coreButton,
body.discover-mode #coreButton,
#coreButton.is-hidden-visual{
  opacity:0 !important;

  filter:blur(6px) !important;

  pointer-events:none !important;
  cursor:default;
}

/* Three.js is the only visible orbital structure. */
#coreButton .halo{
  display:none !important;
}

.surface{
  position:absolute;
  inset:20% !important;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(0,0,0,.98) 0 27%,
      rgba(1,5,14,.96) 37%,
      rgba(17,55,95,.30) 55%,
      rgba(104,198,255,.09) 67%,
      transparent 74%
    );

  box-shadow:
    0 0 20px rgba(105,195,255,.15),
    0 0 72px rgba(65,140,225,.14),
    inset 0 0 26px rgba(0,0,0,.95);

  animation:
    gravityBreath
    5.2s
    ease-in-out
    infinite;

  pointer-events:none;
}

.surface::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:4px;
  height:4px;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:rgba(220,248,255,.74);

  box-shadow:
    0 0 9px rgba(220,248,255,.66),
    0 0 18px rgba(105,195,255,.44);

  opacity:.55;
}

#coreButton .surface::after{
  display:none !important;
  content:none !important;
}

.core-action{
  position:absolute;

  left:50%;
  top:50%;
  z-index:20;

  width:50.667% !important;
  height:50.667% !important;

  display:grid;
  place-items:center;

  transform:translate(-50%,-50%);

  border:0;
  border-radius:50%;

  background:transparent;
  box-shadow:none;

  pointer-events:none;
  user-select:none;

  transition:
    opacity .38s ease,
    transform .48s var(--ease),
    filter .38s ease;
}

.core-action b{
  display:block;

  width:82% !important;

  color:rgba(220,244,255,.72);

  font-size:
    clamp(
      6px,
      calc(
        var(
          --moodround-core-ui-size,
          150px
        ) *
        .0533
      ),
      8px
    ) !important;

  font-weight:700;
  line-height:1.18;
  letter-spacing:.15em;

  text-align:center;
  text-transform:uppercase;

  white-space:normal;

  text-shadow:
    0 0 12px rgba(125,210,255,.48),
    0 0 28px rgba(90,160,255,.25);

  transition:
    color .28s ease,
    opacity .3s ease,
    transform .42s var(--ease),
    letter-spacing .35s ease;
}

.core:hover .core-action b,
.core:focus-visible .core-action b{
  color:rgba(244,252,255,.96);

  letter-spacing:.17em;

  transform:scale(1.06);

  text-shadow:
    0 0 15px rgba(150,225,255,.72),
    0 0 34px rgba(90,170,255,.36);
}

.core:focus-visible{
  outline:none;
}

.core:focus-visible .surface{
  box-shadow:
    0 0 36px rgba(140,220,255,.95),
    0 0 110px rgba(78,150,255,.64),
    inset 0 0 34px rgba(255,255,255,.32);
}

.core.is-loading .core-action b{
  opacity:0;

  transform:scale(.65);

  letter-spacing:.3em;
}

.core.is-loading .surface{
  animation:
    coreLoading
    .82s
    ease-in-out
    infinite;
}

@keyframes gravityBreath{
  0%,
  100%{
    transform:scale(.98);
    opacity:.82;
  }

  50%{
    transform:scale(1.05);
    opacity:1;
  }
}

@keyframes coreLoading{
  0%,
  100%{
    transform:scale(.96);
    filter:brightness(.92);
  }

  50%{
    transform:scale(1.09);
    filter:brightness(1.34);
  }
}

/* =========================================================
   UNIVERSE
========================================================= */

.universe-ui{
  position:fixed;
  inset:0;
  z-index:12;

  width:100%;
  height:100%;

  overflow:hidden;

  opacity:0;
  pointer-events:none;

  transition:opacity .55s var(--ease);
}

.universe-ui.active{
  opacity:1;
  pointer-events:auto;
}

.content-space{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  overflow:hidden;

  pointer-events:auto;
  touch-action:pan-x;

  perspective:1200px;

  transition:
    transform .65s var(--ease),
    opacity .45s var(--ease);
}

/* =========================================================
   CONTENT CARDS
========================================================= */

.content-card{
  position:absolute;

  width:204px;
  height:284px;

  padding:0;

  display:block;

  overflow:hidden;
  isolation:isolate;

  border:
    1px solid
    rgba(135,205,255,.22);

  border-radius:23px;

  background:
    radial-gradient(
      circle at 44% 19%,
      rgba(120,205,255,.19),
      transparent 35%
    ),
    linear-gradient(
      160deg,
      rgba(9,20,39,.86),
      rgba(2,6,15,.92)
    );

  box-shadow:
    0 25px 75px rgba(0,0,0,.40),
    0 0 24px rgba(77,165,255,.13);

  cursor:pointer;

  touch-action:none;

  will-change:
    transform,
    opacity;

  backface-visibility:hidden;
  transform-style:preserve-3d;

  contain:
    layout
    paint
    style;

  transition:
    opacity .42s var(--ease),
    border-color .28s var(--ease),
    box-shadow .28s var(--ease);

  filter:none !important;

  -webkit-tap-highlight-color:transparent;
}

.content-card::before{
  content:"";

  position:absolute;
  inset:0;
  z-index:3;

  background:
    linear-gradient(
      180deg,
      transparent 27%,
      rgba(0,0,0,.84)
    ),
    repeating-linear-gradient(
      42deg,
      transparent 0 21px,
      rgba(150,220,255,.035) 21px 22px
    );

  pointer-events:none;
}

.content-card::after{
  content:"";

  position:absolute;
  inset:0;
  z-index:3;

  border-radius:inherit;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      transparent 29%,
      rgba(80,170,255,.035)
    );

  pointer-events:none;
}

.content-card:hover{
  border-color:rgba(150,215,255,.38);

  box-shadow:
    0 28px 82px rgba(0,0,0,.43),
    0 0 32px rgba(77,165,255,.19);
}

.content-card.focused{
  border-color:rgba(175,230,255,.50);

  box-shadow:
    0 32px 100px rgba(0,0,0,.48),
    0 0 48px rgba(95,185,255,.34);
}

.content-card.is-entering{
  animation:
    cardMaterialize
    .52s
    var(--ease)
    both;
}

@keyframes cardMaterialize{
  from{
    opacity:0;

    transform:
      translate3d(0,18px,0)
      scale(.86);
  }

  to{
    opacity:1;
  }
}

/* =========================================================
   CARD VISUAL
========================================================= */

.card-visual{
  position:absolute;

  inset:0 0 34% 0;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(2,5,12,.03),
      rgba(2,5,12,.08) 52%,
      rgba(2,5,12,.95) 100%
    ),
    radial-gradient(
      circle at 28% 22%,
      var(--cover-c),
      transparent 28%
    ),
    linear-gradient(
      var(--cover-angle),
      var(--cover-a),
      var(--cover-b)
    );

  transition:
    inset .48s var(--ease),
    filter .45s var(--ease),
    transform .55s var(--ease),
    opacity .35s ease,
    visibility .35s ease;
}

.card-visual::before{
  content:"";

  position:absolute;
  inset:-18%;

  background:
    repeating-radial-gradient(
      circle at 20% 20%,
      transparent 0 15px,
      rgba(255,255,255,.04) 16px 17px
    ),
    linear-gradient(
      115deg,
      transparent 12%,
      rgba(255,255,255,.08) 28%,
      transparent 42%
    );

  mix-blend-mode:screen;

  transform:rotate(-8deg);

  opacity:.75;
}

.card-visual::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.09),
      transparent 28%,
      rgba(70,160,255,.07)
    );
}

.card-visual-noise{
  position:absolute;
  inset:0;

  opacity:.16;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.65) 0 1px,
      transparent 1px
    );

  background-size:19px 19px;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000,
      transparent 78%
    );

  mask-image:
    linear-gradient(
      180deg,
      #000,
      transparent 78%
    );
}

.card-format-symbol{
  position:absolute;

  right:14px;
  top:13px;
  z-index:2;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(220,245,255,.18);

  border-radius:50%;

  color:rgba(230,250,255,.68);

  background:rgba(2,7,17,.14);

  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);

  font-size:12px;

  opacity:.78;

  cursor:default;
  pointer-events:none;
  user-select:none;
}

.card-visual-title{
  position:absolute;

  left:14px;
  right:14px;
  bottom:21px;
  z-index:2;

  color:rgba(238,248,255,.24);

  font-family:
    "Cormorant Garamond",
    "Noto Serif",
    Georgia,
    serif;

  font-size:30px;
  font-weight:600;
  line-height:.90;
  letter-spacing:-.035em;

  text-transform:uppercase;
  text-wrap:balance;

  overflow-wrap:anywhere;
  word-break:normal;

  text-shadow:
    0 3px 18px
    rgba(0,0,0,.34);

  transition:opacity .35s ease;
}

/* Full title. app.js calculates the largest two-line font size. */
.content-card:not(.has-cover)
.card-visual-title{
  display:block;

  width:auto;
  max-width:none;
  max-height:none;

  overflow:visible;

  white-space:normal;
  text-wrap:wrap;

  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;

  text-overflow:clip;

  -webkit-line-clamp:unset;
  -webkit-box-orient:initial;
}

/* =========================================================
   CARD COPY — SHARED BASE
========================================================= */

.card-copy{
  position:absolute;
  z-index:5;

  left:0;
  right:0;
  bottom:0;

  min-height:38%;

  padding:15px 16px 14px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(2,6,15,.88) 18%,
      rgba(2,6,15,.98)
    );

  transition:
    min-height .48s var(--ease),
    padding .48s var(--ease),
    opacity .35s ease,
    visibility .35s ease;
}

.card-copy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-bottom:6px;
}

.content-card small{
  display:block;

  margin:0;

  color:#8ed3ff;

  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;

  text-transform:uppercase;
}

.card-match{
  color:#b9e7ff;

  font-size:8px;
  font-weight:700;
  letter-spacing:.07em;

  text-transform:uppercase;

  opacity:.82;

  white-space:nowrap;
}

.content-card h3{
  margin:0 0 6px !important;

  color:#fff;
  -webkit-text-fill-color:#fff;

  font-family:
    Inter,
    system-ui,
    sans-serif;

  font-size:17px !important;
  font-weight:700;
  line-height:1.02 !important;
  letter-spacing:-.025em;

  text-transform:uppercase;
}

.content-card p{
  margin:0;

  color:#a8b6cb;

  font-size:10px;
}

.content-card .card-meta{
  margin:0;

  color:#9fadc2;

  font-size:10px;
}

.card-original-title{
  display:block;

  width:100%;
  max-width:100%;

  margin:-3px 0 5px !important;

  overflow:hidden;

  color:rgba(190,207,226,.76) !important;

  font-family:
    Inter,
    "Noto Sans JP",
    "Noto Sans KR",
    "Noto Sans Arabic",
    "Noto Sans",
    system-ui,
    sans-serif;

  font-size:8.5px !important;
  font-weight:500;
  line-height:1.2 !important;
  letter-spacing:.012em;

  text-align:left;
  text-transform:none;
  text-overflow:ellipsis;
  white-space:nowrap;

  unicode-bidi:plaintext;

  text-shadow:
    0 2px 12px
    rgba(0,0,0,.54);
}

.content-card.selected-card .card-original-title{
  color:rgba(206,222,239,.84) !important;
}

.card-focus-extra{
  max-height:0;

  overflow:hidden;

  opacity:0;

  transform:translateY(9px);

  transition:
    max-height .5s var(--ease),
    opacity .35s ease,
    transform .45s var(--ease);
}

.card-actions{
  display:flex;

  gap:7px;

  margin-top:11px;
}

.card-action{
  min-width:0;
  height:31px;

  padding:0 11px;

  border:
    1px solid
    rgba(145,210,255,.18);

  border-radius:999px;

  background:rgba(255,255,255,.04);

  color:#e9f4ff;

  font-size:9px;

  cursor:pointer;

  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.card-action:hover,
.card-action:focus-visible{
  background:rgba(110,190,255,.11);

  border-color:rgba(155,220,255,.38);

  color:#fff;

  transform:translateY(-1px);

  box-shadow:
    0 0 22px
    rgba(90,180,255,.12);

  outline:none;
}

.content-card.selected-card{
  border-color:
    rgba(190,235,255,.72)
    !important;

  box-shadow:
    0 42px 140px rgba(0,0,0,.68),
    0 0 70px rgba(95,190,255,.42)
    !important;

  z-index:180 !important;
}

.content-card.selected-card::after{
  background:
    radial-gradient(
      circle at 48% 34%,
      rgba(145,220,255,.15),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      transparent 28%,
      rgba(80,170,255,.06)
    );
}

.content-card.selected-card .card-visual{
  inset:0 0 48% 0;

  filter:
    saturate(1.05)
    brightness(1.05);

  transform:none;
}

.content-card.selected-card .card-visual-title{
  opacity:.08;
}

.content-card.selected-card .card-copy{
  min-height:56%;

  padding-top:12px;
}

.content-card.selected-card .card-focus-extra{
  max-height:154px;

  opacity:1;

  transform:translateY(0);
}

.content-card.receding-card{
  border-color:rgba(135,205,255,.12);

  box-shadow:
    0 18px 55px rgba(0,0,0,.30),
    0 0 16px rgba(77,165,255,.07)
    !important;

  pointer-events:auto;
}

/* =========================================================
   REAL COVER IMAGE — ORBIT BASE
========================================================= */

.card-visual.has-image{
  inset:0 !important;

  background:#06101d !important;
  background-image:none !important;

  filter:none !important;
  transform:none !important;
}

.card-cover-image{
  position:absolute;

  left:0;
  top:0;
  z-index:0;

  display:block;

  width:100%;
  height:100%;
  max-width:none;

  object-fit:contain;
  object-position:center top;

  border:0;

  background:#06101d;

  pointer-events:none;
  user-select:none;

  -webkit-user-drag:none;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 44%,
      rgba(0,0,0,.985) 52%,
      rgba(0,0,0,.92) 59%,
      rgba(0,0,0,.76) 66%,
      rgba(0,0,0,.50) 73%,
      rgba(0,0,0,.24) 79%,
      rgba(0,0,0,.08) 83%,
      transparent 86%
    );

  mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 44%,
      rgba(0,0,0,.985) 52%,
      rgba(0,0,0,.92) 59%,
      rgba(0,0,0,.76) 66%,
      rgba(0,0,0,.50) 73%,
      rgba(0,0,0,.24) 79%,
      rgba(0,0,0,.08) 83%,
      transparent 86%
    );
}

.card-visual.has-image::after{
  content:"";

  position:absolute;
  inset:0;
  z-index:2;

  background:
    linear-gradient(
      180deg,
      rgba(2,6,15,0) 0%,
      rgba(2,6,15,0) 27%,
      rgba(2,6,15,.05) 36%,
      rgba(2,6,15,.16) 44%,
      rgba(2,6,15,.38) 53%,
      rgba(2,6,15,.65) 63%,
      rgba(2,6,15,.86) 73%,
      rgba(2,6,15,.97) 84%,
      rgba(2,6,15,1) 100%
    );

  pointer-events:none;
}

.card-visual.has-image .card-format-symbol,
.card-visual.has-image .card-visual-title{
  display:none !important;
}

.content-card.has-cover .card-copy{
  background:
    linear-gradient(
      180deg,
      rgba(2,6,15,0) 0%,
      rgba(2,6,15,.04) 10%,
      rgba(2,6,15,.12) 22%,
      rgba(2,6,15,.28) 36%,
      rgba(2,6,15,.50) 52%,
      rgba(2,6,15,.74) 68%,
      rgba(2,6,15,.90) 83%,
      rgba(2,6,15,1) 100%
    ) !important;
}

.content-card.selected-card .card-visual.has-image{
  inset:0 !important;

  filter:none !important;
  transform:none !important;
}

.content-card.has-cover::before,
.content-card.has-cover::after,
.card-visual.has-image::before,
.card-visual.has-image .card-visual-noise{
  display:none !important;
}

/* =========================================================
   ORBIT — FINAL COPY ALIGNMENT
========================================================= */

body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-copy{
  height:auto !important;
  min-height:38% !important;

  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
}

body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-copy-head{
  flex:0 0 auto;

  margin-bottom:5px;
}

body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-match{
  color:var(--mr-fit) !important;
  -webkit-text-fill-color:var(--mr-fit) !important;

  opacity:1;
}

body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-copy > h3{
  flex:0 0 auto;

  display:-webkit-box;

  width:100%;
  max-width:100%;

  height:auto !important;
  min-height:0 !important;
  max-height:2.06em !important;

  margin:0 0 4px !important;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  font-size:14.2px !important;
  font-weight:700;
  line-height:1.03 !important;
  letter-spacing:-.025em;

  text-transform:uppercase;

  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-original-title{
  flex:0 0 auto;

  margin:0 0 5px !important;

  color:var(--mr-original) !important;
  -webkit-text-fill-color:var(--mr-original) !important;

  font-weight:600;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.58) !important;
}

body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-meta{
  flex:0 0 auto;

  margin:0 !important;
}

/* =========================================================
   FOCUS — TYPOGRAPHY AND STRUCTURE
========================================================= */

body.card-focus-mode
.content-card.selected-card{
  --mr-focus-space:6px;
  --mr-focus-inner-space:4px;
}

body.card-focus-mode
.content-card.selected-card
.card-copy{
  display:flex;
  flex-direction:column;

  padding-bottom:8px;

  isolation:isolate;
}

body.card-focus-mode
.content-card.selected-card
.card-copy > *{
  position:relative;
  z-index:1;
}

body.card-focus-mode
.content-card.selected-card:not(.is-discovered)
.card-copy > h3{
  display:-webkit-box;

  width:100%;
  max-width:100%;
  max-height:2em;

  margin:0 0 5px !important;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  color:var(--mr-title) !important;
  -webkit-text-fill-color:var(--mr-title) !important;

  font-size:13.8px !important;
  font-weight:720;
  line-height:1 !important;
  letter-spacing:-.025em;

  text-transform:uppercase;

  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.44) !important;

  filter:none !important;
}

body.card-focus-mode
.content-card.selected-card
.card-copy-head small,
body.card-focus-mode
.content-card.selected-card
.card-focus-section-label{
  color:var(--mr-label) !important;
  -webkit-text-fill-color:var(--mr-label) !important;
}

body.card-focus-mode:not(.discover-mode)
.content-card.selected-card
.card-copy-head small{
  text-shadow:
    0 1px 2px
    rgba(0,0,0,.26) !important;
}

body.card-focus-mode
.content-card.selected-card
.card-match{
  color:var(--mr-fit) !important;
  -webkit-text-fill-color:var(--mr-fit) !important;

  opacity:1;
}

body.card-focus-mode:not(.discover-mode)
.content-card.selected-card
.card-match{
  color:rgba(224,239,249,.96) !important;
  -webkit-text-fill-color:rgba(224,239,249,.96) !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.48),
    0 0 4px rgba(0,0,0,.18) !important;
}

body.card-focus-mode
.content-card.selected-card
.card-original-title{
  margin:
    -3px
    0
    var(--mr-focus-space) !important;

  color:var(--mr-original) !important;
  -webkit-text-fill-color:var(--mr-original) !important;

  font-weight:600;
}

body.card-focus-mode:not(.discover-mode)
.content-card.selected-card
.card-original-title{
  text-shadow:
    0 1px 2px
    rgba(0,0,0,.38) !important;
}

body.card-focus-mode
.content-card.selected-card
.card-meta{
  margin:0 !important;

  color:var(--mr-meta) !important;
  -webkit-text-fill-color:var(--mr-meta) !important;
}

body.card-focus-mode:not(.discover-mode)
.content-card.selected-card
.card-meta{
  color:rgba(205,215,228,.92) !important;
  -webkit-text-fill-color:rgba(205,215,228,.92) !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.40) !important;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-extra{
  position:static;

  flex:1 1 auto;

  min-height:0;

  margin-top:var(--mr-focus-space);
  padding-bottom:0;

  display:flex;
  flex-direction:column;

  overflow:hidden;
}

/* =========================================================
   FOCUS — GENRE TRACK
========================================================= */

body.card-focus-mode
.content-card.selected-card
.card-focus-genres{
  width:100%;
  min-width:0;

  margin:
    0
    0
    var(--mr-focus-space) !important;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-head{
  min-height:20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-bottom:
    var(--mr-focus-inner-space) !important;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-section-label{
  display:block;

  margin:
    0
    0
    var(--mr-focus-inner-space) !important;

  font-size:7px;
  font-weight:800;
  line-height:1;
  letter-spacing:.14em;

  text-transform:uppercase;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.52);
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-head
.card-focus-section-label{
  margin:0 !important;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-controls{
  display:flex;
  align-items:center;

  gap:4px;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-arrow{
  position:relative;

  width:18px;
  height:18px;

  padding:0;

  display:grid;
  place-items:center;

  border:
    1px solid
    var(--mr-control-line);

  border-radius:50%;

  background:rgba(255,255,255,.035);

  color:rgba(215,236,250,.76);

  font-size:0 !important;

  cursor:pointer;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-arrow::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:5px;
  height:5px;

  border-style:solid;
  border-color:currentColor;
  border-width:0 1.2px 1.2px 0;

  pointer-events:none;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-arrow[data-genre-direction="-1"]::before{
  transform:
    translate(-38%,-50%)
    rotate(135deg);
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-arrow[data-genre-direction="1"]::before{
  transform:
    translate(-62%,-50%)
    rotate(-45deg);
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-arrow:hover,
body.card-focus-mode
.content-card.selected-card
.card-focus-genre-arrow:focus-visible{
  color:#fff;

  border-color:rgba(150,220,255,.36);
  background:rgba(105,190,255,.11);

  transform:scale(1.05);

  outline:none;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-arrow:disabled{
  display:none !important;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-track{
  width:100%;
  min-width:0;

  display:flex;
  align-items:center;

  gap:5px;

  padding:1px 1px 3px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;

  touch-action:pan-x;

  cursor:grab;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-track::-webkit-scrollbar{
  display:none;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-track:active{
  cursor:grabbing;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre{
  flex:0 0 auto;

  max-width:140px;

  padding:5px 8px;

  overflow:hidden;

  scroll-snap-align:start;

  border:
    1px solid
    var(--mr-control-line);

  border-radius:999px;

  background:rgba(255,255,255,.035);

  color:var(--mr-chip-text) !important;
  -webkit-text-fill-color:var(--mr-chip-text) !important;

  font-size:7px;
  font-weight:500;
  line-height:1;

  white-space:nowrap;
  text-overflow:ellipsis;

  box-shadow:
    inset 0 0 14px
    rgba(105,190,255,.012);

  user-select:none;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-track.has-horizontal-overflow.is-at-start{
  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 86%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 86%,
      transparent 100%
    );
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-track.has-horizontal-overflow:not(.is-at-start):not(.is-at-end){
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 10%,
      #000 88%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 10%,
      #000 88%,
      transparent 100%
    );
}

body.card-focus-mode
.content-card.selected-card
.card-focus-genre-track.has-horizontal-overflow.is-at-end{
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 12%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 12%,
      #000 100%
    );
}

/* =========================================================
   FOCUS — WHY IT FITS AND DISCOVER ACTION
========================================================= */

body.card-focus-mode
.content-card.selected-card
.card-focus-why{
  flex:0 0 auto;

  width:100%;
  min-width:0;

  margin:
    0
    0
    var(--mr-focus-space) !important;
}

body.card-focus-mode
.content-card.selected-card
.card-focus-why-text{
  display:-webkit-box;

  width:100%;
  max-width:100%;

  height:calc(1.34em * 2);
  min-height:calc(1.34em * 2);
  max-height:calc(1.34em * 2);

  margin:0 !important;
  padding:0;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  color:var(--mr-editorial) !important;
  -webkit-text-fill-color:var(--mr-editorial) !important;

  font-size:8px !important;
  font-weight:400;
  line-height:1.34 !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.42) !important;

  cursor:default;
}

body.card-focus-mode
.content-card.selected-card
.card-actions{
  position:static;

  left:auto;
  right:auto;
  bottom:auto;
  z-index:auto;

  flex:0 0 auto;

  width:100%;

  margin-top:auto !important;
  padding-top:5px !important;

  display:grid;

  grid-template-columns:minmax(0,1fr);

  gap:0;

  border-top:
    1px solid
    var(--mr-line) !important;
}

body.card-focus-mode
.content-card.selected-card
.card-discover{
  width:100%;
  min-width:0;
  height:24px;

  margin:0;
  padding:0 8px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    var(--mr-control-line);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.032),
      rgba(105,175,255,.016)
    );

  color:rgba(231,242,252,.92);

  font-size:6.8px;
  font-weight:600;
  line-height:1;
  letter-spacing:.012em;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

  cursor:pointer;

  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

body.card-focus-mode
.content-card.selected-card
.card-discover:hover,
body.card-focus-mode
.content-card.selected-card
.card-discover:focus-visible{
  color:#fff;

  border-color:rgba(165,225,255,.38);

  background:
    linear-gradient(
      180deg,
      rgba(125,205,255,.10),
      rgba(75,145,225,.045)
    );

  transform:translateY(-1px);

  box-shadow:
    0 0 18px rgba(90,180,255,.10),
    inset 0 1px 0 rgba(255,255,255,.04);

  outline:none;
}

body.card-focus-mode
.content-card.selected-card
.card-discover:active{
  transform:
    translateY(0)
    scale(.985);
}

/* =========================================================
   FOCUS — FINAL COVER LEGIBILITY
========================================================= */

/* Shared Focus layer, also retained during the Discover overlap. */
body.card-focus-mode
.content-card.selected-card.has-cover
.card-copy{
  background:transparent !important;
}

body.card-focus-mode
.content-card.selected-card.has-cover
.card-visual.has-image::after{
  display:block !important;

  background:
    linear-gradient(
      180deg,
      rgba(2,6,15,0) 0%,
      rgba(2,6,15,0) 20%,
      rgba(2,6,15,.03) 28%,
      rgba(2,6,15,.09) 35%,
      rgba(2,6,15,.19) 42%,
      rgba(2,6,15,.34) 49%,
      rgba(2,6,15,.52) 56%,
      rgba(2,6,15,.69) 64%,
      rgba(2,6,15,.82) 72%,
      rgba(2,6,15,.91) 81%,
      rgba(2,6,15,.97) 91%,
      rgba(2,6,15,1) 100%
    ) !important;
}

/* Pure Focus: subtle uniform darkening plus the stronger lower veil. */
body.card-focus-mode:not(.discover-mode)
.content-card.selected-card.has-cover
.card-visual.has-image::after{
  background:
    linear-gradient(
      rgba(2,6,15,.12),
      rgba(2,6,15,.12)
    ),
    linear-gradient(
      180deg,
      rgba(2,6,15,0) 0%,
      rgba(2,6,15,0) 19%,
      rgba(2,6,15,.04) 27%,
      rgba(2,6,15,.11) 34%,
      rgba(2,6,15,.24) 40%,
      rgba(2,6,15,.43) 46%,
      rgba(2,6,15,.63) 53%,
      rgba(2,6,15,.79) 60%,
      rgba(2,6,15,.90) 69%,
      rgba(2,6,15,.97) 79%,
      rgba(2,6,15,.995) 90%,
      rgba(2,6,15,1) 100%
    ) !important;
}

body.card-focus-mode:not(.discover-mode)
.content-card.selected-card.has-cover
.card-cover-image{
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* =========================================================
   DISCOVER — CONSOLIDATED FINAL SYSTEM
========================================================= */

.content-card.is-discovered{
  cursor:default;

  touch-action:auto !important;

  border-color:
    rgba(190,235,255,.70)
    !important;

  box-shadow:
    0 44px 145px rgba(0,0,0,.72),
    0 0 74px rgba(90,185,255,.38)
    !important;
}

.content-card.is-discovered::before,
.content-card.is-discovered::after{
  display:none !important;
}

.content-card.is-discovered .card-copy{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.card-discover-panel{
  position:absolute;
  inset:0;
  z-index:20;

  padding:14px 15px 8px;

  display:flex;
  flex-direction:column;

  overflow:hidden;
  isolation:isolate;

  border-radius:inherit;

  background:transparent !important;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(10px);

  transition:
    opacity .34s ease,
    visibility .34s ease,
    transform .46s var(--ease);
}

.content-card.is-discovered .card-discover-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto !important;

  touch-action:auto !important;

  transform:translateY(0);
}

.card-discover-panel::before{
  content:"";

  position:absolute;
  inset:0;
  z-index:0;

  border-radius:inherit;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse 96% 62%
      at 27% 32%,
      rgba(2,6,15,.58) 0%,
      rgba(2,6,15,.43) 34%,
      rgba(2,6,15,.21) 62%,
      rgba(2,6,15,.07) 76%,
      transparent 88%
    ),
    linear-gradient(
      180deg,
      rgba(2,6,15,.12) 0%,
      rgba(2,6,15,.15) 10%,
      rgba(2,6,15,.21) 20%,
      rgba(2,6,15,.31) 30%,
      rgba(2,6,15,.44) 40%,
      rgba(2,6,15,.59) 50%,
      rgba(2,6,15,.75) 60%,
      rgba(2,6,15,.88) 72%,
      rgba(2,6,15,.96) 84%,
      rgba(2,6,15,.99) 93%,
      rgba(2,6,15,1) 100%
    );

  -webkit-clip-path:inset(100% 0 0 0);
  clip-path:inset(100% 0 0 0);

  will-change:clip-path;

  transition:
    -webkit-clip-path .58s var(--ease),
    clip-path .58s var(--ease);
}

.content-card.is-discovered .card-discover-panel::before{
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
}

.content-card.has-cover.is-discovered .card-cover-image{
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 30%,
      rgba(0,0,0,.99) 42%,
      rgba(0,0,0,.94) 54%,
      rgba(0,0,0,.80) 66%,
      rgba(0,0,0,.58) 78%,
      rgba(0,0,0,.31) 89%,
      rgba(0,0,0,.10) 96%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 30%,
      rgba(0,0,0,.99) 42%,
      rgba(0,0,0,.94) 54%,
      rgba(0,0,0,.80) 66%,
      rgba(0,0,0,.58) 78%,
      rgba(0,0,0,.31) 89%,
      rgba(0,0,0,.10) 96%,
      transparent 100%
    );
}

.card-discover-back{
  position:relative;
  z-index:3;

  align-self:flex-start;

  width:26px;
  min-width:26px;
  height:26px;

  padding:0;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(145,210,255,.18);

  border-radius:50%;

  background:rgba(3,9,20,.48);

  color:rgba(220,237,250,.80);

  cursor:pointer;

  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);

  box-shadow:
    inset 0 0 16px rgba(110,190,255,.025),
    0 4px 16px rgba(0,0,0,.16);

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;

  transform:translateY(-4px) !important;

  transition:
    opacity .15s ease 0s,
    transform .22s var(--ease) 0s,
    visibility 0s linear .15s,
    color .22s ease 0s,
    border-color .22s ease 0s,
    background .22s ease 0s,
    box-shadow .22s ease 0s !important;
}

.card-discover-back::before,
.card-discover-back::after{
  content:none !important;
  display:none !important;
}

.card-discover-back svg{
  display:block !important;

  width:12px;
  height:12px;

  pointer-events:none;
}

.content-card.is-discovered .card-discover-back{
  opacity:.84 !important;
  visibility:visible !important;
  pointer-events:auto !important;

  transform:translateY(0) !important;

  transition:
    opacity .18s ease .62s,
    transform .26s var(--ease) .62s,
    visibility 0s linear .62s,
    color .22s ease 0s,
    border-color .22s ease 0s,
    background .22s ease 0s,
    box-shadow .22s ease 0s !important;
}

.content-card.is-discovered .card-discover-back:hover,
.content-card.is-discovered .card-discover-back:focus-visible{
  opacity:1 !important;

  color:#fff;

  border-color:rgba(155,220,255,.42);
  background:rgba(75,155,235,.14);

  box-shadow:
    0 0 18px
    rgba(90,180,255,.11);

  outline:none;
}

.card-discover-back:active{
  transform:
    translateY(0)
    scale(.94) !important;
}

.card-discover-content{
  position:relative;
  z-index:2;

  width:100%;
  max-height:calc(100% - 26px);

  min-width:0;
  min-height:0;

  display:flex;
  flex-direction:column;

  margin-top:auto;
  padding-top:6px;

  overflow:hidden;

  opacity:0;

  transform:translateY(7px);

  pointer-events:none;

  transition:
    opacity .22s ease,
    transform .42s var(--ease);
}

.content-card.is-discovered .card-discover-content{
  opacity:1;

  transform:translateY(0);

  pointer-events:auto !important;

  transition-delay:.12s;
}

.card-discover-format{
  flex:0 0 auto;

  display:block;

  margin:0 0 4px;

  color:var(--mr-label) !important;
  -webkit-text-fill-color:var(--mr-label) !important;

  font-size:7px;
  font-weight:800;
  line-height:1;
  letter-spacing:.15em;

  text-transform:uppercase;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.52) !important;
}

.card-discover-content h4{
  flex:0 0 auto;

  display:-webkit-box;

  width:100%;
  max-width:100%;
  max-height:2em;

  margin:0 0 5px;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  color:var(--mr-title) !important;
  -webkit-text-fill-color:var(--mr-title) !important;

  font-family:
    "Cormorant Garamond",
    "Noto Serif",
    Georgia,
    serif;

  font-size:18.5px;
  font-weight:650;
  line-height:1;
  letter-spacing:-.028em;

  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;

  opacity:1 !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.68),
    0 0 1px rgba(0,0,0,.44) !important;

  filter:none !important;
  mix-blend-mode:normal !important;
}

.card-discover-original-title{
  flex:0 0 auto;

  display:block;

  width:100%;
  max-width:100%;

  margin:-2px 0 6px !important;
  padding:1px 0 2px;

  overflow:hidden;

  color:var(--mr-original) !important;
  -webkit-text-fill-color:var(--mr-original) !important;

  font-family:
    Inter,
    "Noto Sans JP",
    "Noto Sans KR",
    "Noto Sans Arabic",
    "Noto Sans",
    system-ui,
    sans-serif;

  font-size:7.3px !important;
  font-weight:600;
  line-height:1.32 !important;
  letter-spacing:.018em;

  text-align:left;
  text-transform:none;
  text-overflow:ellipsis;
  white-space:nowrap;

  unicode-bidi:plaintext;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.58) !important;
}

/* Structured duration / extent metadata */

.content-card .card-discover-metadata{
  flex:0 0 auto;

  display:block;

  width:100%;
  min-width:0;

  margin:-1px 0 5px !important;
  padding:0;

  overflow:hidden;

  color:var(--mr-meta) !important;
  -webkit-text-fill-color:var(--mr-meta) !important;

  font-size:7.4px !important;
  font-weight:600;
  line-height:1.2 !important;
  letter-spacing:.018em;

  white-space:nowrap;
  text-overflow:ellipsis;

  font-variant-numeric:tabular-nums;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.46) !important;
}

.card-discover-description,
.content-card.is-discovered .card-discover-description{
  position:relative;
  z-index:4;

  flex:0 0 auto !important;

  display:block !important;

  width:100%;
  max-width:100%;
  min-height:0;

  max-height:
    calc(
      1.39em *
      5 +
      3px
    ) !important;

  margin:0 !important;
  padding:1px 3px 1px 0;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  -webkit-box-orient:initial !important;
  -webkit-line-clamp:unset !important;

  color:var(--mr-editorial) !important;
  -webkit-text-fill-color:var(--mr-editorial) !important;

  font-size:8.8px !important;
  font-weight:400;
  line-height:1.39 !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.42) !important;

  scrollbar-width:none;

  pointer-events:auto !important;

  overscroll-behavior-y:contain;
  touch-action:pan-y !important;

  -webkit-overflow-scrolling:touch;

  cursor:ns-resize;
}

.card-discover-description::-webkit-scrollbar,
.content-card.is-discovered .card-discover-description::-webkit-scrollbar{
  display:none;
}

.content-card.is-discovered .card-discover-description.has-more:not(.is-at-end){
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 98%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 98%,
      transparent 100%
    );
}

.card-cast{
  flex:0 0 auto;

  width:100%;
  min-width:0;

  margin-top:5px;
}

.card-cast-head{
  min-height:20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-bottom:3px;
}

.card-cast-head > span{
  color:var(--mr-label) !important;
  -webkit-text-fill-color:var(--mr-label) !important;

  font-size:6.7px;
  font-weight:800;
  line-height:1;
  letter-spacing:.14em;

  text-transform:uppercase;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.52) !important;
}

.card-cast-controls{
  display:flex;
  align-items:center;

  gap:4px;
}

.card-cast-arrow{
  position:relative;

  width:18px;
  height:18px;

  padding:0;

  display:grid;
  place-items:center;

  border:
    1px solid
    var(--mr-control-line);

  border-radius:50%;

  background:rgba(255,255,255,.035);

  color:rgba(215,236,250,.76);

  font-size:0 !important;

  cursor:pointer;

  transition:
    opacity .2s ease,
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.card-cast-arrow::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:5px;
  height:5px;

  border-style:solid;
  border-color:currentColor;
  border-width:0 1.2px 1.2px 0;

  pointer-events:none;
}

.card-cast-arrow[data-cast-direction="-1"]::before{
  transform:
    translate(-38%,-50%)
    rotate(135deg);
}

.card-cast-arrow[data-cast-direction="1"]::before{
  transform:
    translate(-62%,-50%)
    rotate(-45deg);
}

.card-cast-arrow:hover,
.card-cast-arrow:focus-visible{
  color:#fff;

  border-color:rgba(150,220,255,.36);
  background:rgba(105,190,255,.11);

  transform:scale(1.05);

  outline:none;
}

.card-cast-arrow:active{
  transform:scale(.94);
}

.card-cast-arrow:disabled{
  display:none !important;
}

.card-cast-track{
  position:relative;

  width:100%;
  min-width:0;

  display:flex;
  align-items:center;

  gap:5px;

  padding:0 1px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;

  touch-action:pan-x;

  cursor:grab;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}

.card-cast-track::-webkit-scrollbar{
  display:none;
}

.card-cast-track.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}

.card-cast-track:focus-visible{
  outline:
    1px solid
    rgba(135,210,255,.30);

  outline-offset:3px;

  border-radius:8px;
}

.card-cast-person{
  flex:0 0 auto;

  max-width:124px;

  padding:5px 8px;

  overflow:hidden;

  scroll-snap-align:start;

  border:
    1px solid
    var(--mr-control-line);

  border-radius:999px;

  background:rgba(255,255,255,.035);

  color:var(--mr-chip-text) !important;
  -webkit-text-fill-color:var(--mr-chip-text) !important;

  font-size:7px;
  font-weight:500;
  line-height:1;

  white-space:nowrap;
  text-overflow:ellipsis;

  box-shadow:
    inset 0 0 14px
    rgba(105,190,255,.012);

  user-select:none;
}

.card-cast-track.has-horizontal-overflow:not(.is-at-end){
  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 86%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 86%,
      transparent 100%
    );
}

.card-cast-track.has-horizontal-overflow:not(.is-at-start):not(.is-at-end){
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 10%,
      #000 88%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 10%,
      #000 88%,
      transparent 100%
    );
}

.card-cast-track.has-horizontal-overflow.is-at-end:not(.is-at-start){
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 12%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 12%,
      #000 100%
    );
}

.card-discover-actions{
  flex:0 0 auto;

  width:100%;

  margin-top:5px;
  padding-top:5px;

  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:5px;

  border-top:
    1px solid
    var(--mr-line);
}

.card-discover-actions:has(.card-discover-link:only-child){
  grid-template-columns:minmax(0,1fr);
}

.card-discover-link{
  width:100%;
  min-width:0;
  height:24px;

  padding:0 8px;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    var(--mr-control-line);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.032),
      rgba(105,175,255,.016)
    );

  color:rgba(231,242,252,.92);

  font-size:6.8px;
  font-weight:600;
  line-height:1;
  letter-spacing:.012em;

  white-space:nowrap;
  text-overflow:ellipsis;

  cursor:pointer;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.card-discover-link:hover,
.card-discover-link:focus-visible{
  color:#fff;

  border-color:rgba(165,225,255,.38);

  background:
    linear-gradient(
      180deg,
      rgba(125,205,255,.10),
      rgba(75,145,225,.045)
    );

  transform:translateY(-1px);

  box-shadow:
    0 0 18px rgba(90,180,255,.10),
    inset 0 1px 0 rgba(255,255,255,.04);

  outline:none;
}

.card-discover-link:active{
  transform:
    translateY(0)
    scale(.985);
}

.card-discover-link-trailer{
  border-color:rgba(150,215,255,.23);

  background:
    linear-gradient(
      180deg,
      rgba(125,205,255,.09),
      rgba(75,145,225,.038)
    );
}

.card-discover-actions em{
  color:#8192a8;

  font-size:8px;
  font-style:normal;
  line-height:1.4;
}

/* =========================================================
   FILTER DOCK
========================================================= */

.filter-dock{
  position:fixed;

  left:50%;

  bottom:
    calc(
      var(--safe-bottom) +
      42px
    );

  z-index:34;

  width:
    min(
      900px,
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        34px
      )
    );

  min-height:60px;

  padding:5px;

  display:grid;

  grid-template-columns:
  repeat(
    3,
    minmax(0,1fr)
  )
  42px
  repeat(
    3,
    minmax(0,1fr)
  );

  gap:3px;

  transform:translateX(-50%);

  border:
    1px solid
    rgba(130,195,255,.15);

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      rgba(5,12,26,.84),
      rgba(3,8,18,.76)
    );

  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.30),
    inset 0 0 34px rgba(80,155,255,.022);

  isolation:isolate;
}

.filter-dock button{
  position:relative;

  min-width:0;
  height:50px;

  padding:0 9px;

  border:0;
  border-radius:15px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:transparent;

  text-align:center;

  cursor:pointer;

  transition:
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.filter-dock button:not(:last-child)::after{
  content:"";

  position:absolute;

  right:-2px;
  top:12px;
  bottom:12px;

  width:1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(130,195,255,.11),
      transparent
    );

  pointer-events:none;
}

.filter-dock button:hover,
.filter-dock button:focus-visible{
  background:rgba(120,190,255,.065);

  box-shadow:
    inset 0 0 20px
    rgba(100,180,255,.03);

  transform:translateY(-1px);

  outline:none;
}

.filter-dock button:active{
  transform:
    translateY(0)
    scale(.98);
}

.filter-dock span{
  display:block;

  max-width:100%;

  overflow:hidden;

  color:#6f7e94;

  font-size:7px;
  font-weight:600;
  line-height:1;
  letter-spacing:.13em;

  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.filter-dock b{
  display:block;

  max-width:100%;

  margin-top:5px;

  overflow:hidden;

  color:#d8e5f6;

  font-size:10px;
  font-weight:700;
  line-height:1.1;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.filter-dock button.is-panel-active{
  background:
    linear-gradient(
      180deg,
      rgba(110,190,255,.10),
      rgba(75,140,220,.055)
    );

  box-shadow:
    inset 0 0 24px rgba(100,185,255,.04),
    0 0 22px rgba(70,145,225,.05);
}

.filter-dock button.is-panel-active span{
  color:rgba(135,205,255,.78);
}

.filter-dock button.is-panel-active b{
  color:#f3f9ff;
}

/* =========================================================
   FILTER DOCK RESET
========================================================= */

.filter-dock .filter-reset[hidden]{
  display:grid !important;

  visibility:hidden;
  opacity:0;

  pointer-events:none;
}

.filter-dock .filter-reset{
  position:relative;

  inset:auto;

  z-index:2;

  opacity:1;
  visibility:visible;

  width:34px;
  min-width:34px;
  height:34px;

  justify-self:center;
  align-self:center;

  padding:0;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(145,210,255,.25);

  border-radius:50%;

  background:
    linear-gradient(
      180deg,
      rgba(20,35,58,.78),
      rgba(8,17,32,.78)
    );

  color:
    rgba(213,232,247,.84);

  font-size:0;

  cursor:pointer;

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);

  box-shadow:
    0 6px 20px rgba(0,0,0,.24),
    0 0 17px rgba(85,165,255,.08),
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s var(--ease);
}

.filter-dock
.filter-reset
.filter-reset-icon{
  display:block;

  max-width:none;

  overflow:visible;

  color:inherit;

  font-size:17px;
  font-weight:500;
  line-height:1;
  letter-spacing:0;

  text-transform:none;
  text-overflow:clip;
  white-space:normal;

  transform:translateY(-.5px);

  pointer-events:none;
}

.filter-dock .filter-reset::after{
  display:none;
}

.filter-dock button[data-filter="genre"]::after{
  display:none;
}

.filter-dock .filter-reset:hover,
.filter-dock .filter-reset:focus-visible{
  color:#fff;

  border-color:
    rgba(160,225,255,.48);

  background:
    linear-gradient(
      180deg,
      rgba(67,123,186,.30),
      rgba(24,52,90,.26)
    );

  box-shadow:
    0 8px 25px rgba(0,0,0,.30),
    0 0 24px rgba(95,185,255,.17),
    inset 0 1px 0 rgba(255,255,255,.06);

  transform:
    translateY(-1px)
    scale(1.05);

  outline:none;
}

.filter-dock .filter-reset:active{
  transform:scale(.92);
}

/* =========================================================
   MICRO FOOTER
========================================================= */

.moodround-footer{
  position:fixed;

  left:
    max(
      18px,
      var(--safe-left)
    );

  right:
    max(
      18px,
      var(--safe-right)
    );

  bottom:
    max(
      7px,
      var(--safe-bottom)
    );

  z-index:24;

  min-height:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;

  color:rgba(151,166,190,.54);

  font-size:8px;
  font-weight:500;
  line-height:1;
  letter-spacing:.04em;

  white-space:nowrap;

  pointer-events:none;
  user-select:none;

  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .30s var(--ease);
}

.moodround-footer::before{
  content:"";

  position:absolute;

  left:50%;
  bottom:-7px;

  width:
    min(
      460px,
      76vw
    );

  height:35px;

  transform:translateX(-50%);

  background:
    radial-gradient(
      ellipse at center,
      rgba(45,95,160,.07),
      transparent 72%
    );

  filter:blur(11px);

  opacity:.5;

  pointer-events:none;
}

.moodround-footer-copy,
.moodround-footer-links{
  position:relative;
  z-index:1;
}

.moodround-footer-copy{
  color:rgba(178,193,215,.56);
}

.moodround-footer-links{
  display:flex;
  align-items:center;

  gap:12px;
}

.moodround-footer-links::before{
  content:"";

  width:1px;
  height:9px;

  margin-right:1px;

  background:rgba(145,190,230,.16);
}

.moodround-footer a{
  position:relative;

  color:rgba(151,166,190,.58);

  text-decoration:none;

  pointer-events:auto;

  transition:
    color .22s ease,
    text-shadow .22s ease;
}

.moodround-footer a::after{
  content:"";

  position:absolute;

  left:50%;
  right:50%;
  bottom:-4px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--violet),
      var(--blue)
    );

  opacity:0;

  transition:
    left .25s ease,
    right .25s ease,
    opacity .25s ease;
}

.moodround-footer a:hover,
.moodround-footer a:focus-visible{
  color:rgba(231,244,255,.94);

  text-shadow:
    0 0 14px
    rgba(110,195,255,.28);

  outline:none;
}

.moodround-footer a:hover::after,
.moodround-footer a:focus-visible::after{
  left:0;
  right:0;

  opacity:.75;
}

body.card-focus-mode .moodround-footer,
body.discover-mode .moodround-footer{
  z-index:24 !important;

  opacity:1 !important;
  visibility:visible !important;

  transform:none !important;

  pointer-events:none !important;
}

body.card-focus-mode .moodround-footer a,
body.discover-mode .moodround-footer a{
  pointer-events:auto !important;
}

/* =========================================================
   INTERACTION TIP AND TOAST
========================================================= */

.tip{
  position:fixed;

  left:50%;

  bottom:
    calc(
      var(--safe-bottom) +
      111px
    );

  z-index:30;

  transform:translateX(-50%);

  color:#6f7d92;

  font-size:9px;
  letter-spacing:.025em;

  white-space:nowrap;

  opacity:0;
  pointer-events:none;

  transition:opacity .35s ease;
}

.tip.visible{
  animation:
    tipLife
    4s
    ease
    both;
}

@keyframes tipLife{
  0%{
    opacity:0;
  }

  15%,
  72%{
    opacity:.8;
  }

  100%{
    opacity:0;
  }
}

.moodround-toast{
  position:fixed;

  left:50%;

  bottom:
    calc(
      var(--safe-bottom) +
      118px
    );

  z-index:35;

  max-width:
    min(
      440px,
      calc(100% - 30px)
    );

  padding:11px 16px;

  border:
    1px solid
    rgba(135,205,255,.18);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(7,15,31,.94),
      rgba(3,8,18,.94)
    );

  color:rgba(220,232,247,.92);

  font-size:11px;
  font-weight:500;
  line-height:1.35;

  text-align:center;

  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);

  box-shadow:
    0 16px 45px rgba(0,0,0,.34),
    0 0 24px rgba(80,160,255,.08),
    inset 0 0 22px rgba(100,185,255,.018);

  transform:translate(-50%,10px);

  opacity:0;
  pointer-events:none;

  transition:
    opacity .28s ease,
    transform .35s var(--ease);
}

.moodround-toast.show{
  opacity:1;

  transform:translate(-50%,0);
}

/* =========================================================
   FOCUS AND DISCOVER INTERACTION LAYERS
========================================================= */

body.card-focus-mode .core,
body.discover-mode .core{
  pointer-events:none;
  cursor:default;
}

body.card-focus-mode .core-zone,
body.discover-mode .core-zone{
  z-index:10;
}

body.card-focus-mode .universe-ui,
body.discover-mode .universe-ui{
  z-index:45;

  pointer-events:none;
}

body.card-focus-mode .content-space,
body.discover-mode .content-space{
  pointer-events:none;
}

body.card-focus-mode .content-card,
body.discover-mode .content-card{
  pointer-events:auto;
}

/* =========================================================
   DYNAMIC INTERACTION LAYERS
   Only stacking order changes. No opacity, scale or movement.
========================================================= */

body.layer-content-front .universe-ui,
body.layer-topbar-front .universe-ui,
body.layer-dock-front .universe-ui{
  z-index:50;

  pointer-events:none;
}

body.layer-content-front .content-space,
body.layer-topbar-front .content-space,
body.layer-dock-front .content-space{
  pointer-events:none;
}

body.layer-content-front .content-card,
body.layer-topbar-front .content-card,
body.layer-dock-front .content-card{
  pointer-events:auto;
}

body.layer-topbar-front .topbar{
  z-index:60;
}

body.layer-dock-front .filter-dock{
  z-index:60;
}

body.layer-dock-front .filter-panel{
  z-index:61;
}

body.layer-dock-front .filter-clear{
  z-index:62;
}

/*
 * Transparent interaction surface for empty universe space.
 * It remains below topbar, dock and cards, so visible UI zones
 * stay directly clickable even while the cards are in front.
 */
.experience::before{
  content:"";

  position:absolute;
  inset:0;
  z-index:10;

  background:transparent;

  pointer-events:auto;
  touch-action:pan-x;
}

/* =========================================================
   RECEDING CARDS — KEEP ORBIT STRUCTURE IN FOCUS / DISCOVER
========================================================= */

body.card-focus-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-copy,
body.discover-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-copy{
  height:auto !important;
  min-height:38% !important;

  display:flex !important;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
}

body.card-focus-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-copy-head,
body.discover-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-copy-head{
  flex:0 0 auto;

  margin-bottom:5px;
}

body.card-focus-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-match,
body.discover-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-match{
  color:var(--mr-fit) !important;
  -webkit-text-fill-color:var(--mr-fit) !important;

  opacity:1;
}

body.card-focus-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-copy > h3,
body.discover-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-copy > h3{
  flex:0 0 auto;

  display:-webkit-box;

  width:100%;
  max-width:100%;

  height:auto !important;
  min-height:0 !important;
  max-height:2.06em !important;

  margin:0 0 4px !important;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  font-size:14.2px !important;
  font-weight:700;
  line-height:1.03 !important;
  letter-spacing:-.025em;

  text-transform:uppercase;

  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

body.card-focus-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-original-title,
body.discover-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-original-title{
  flex:0 0 auto;

  margin:0 0 5px !important;

  color:var(--mr-original) !important;
  -webkit-text-fill-color:var(--mr-original) !important;

  font-weight:600;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.58) !important;
}

body.card-focus-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-meta,
body.discover-mode
.content-card:not(.selected-card):not(.is-discovered)
.card-meta{
  flex:0 0 auto;

  margin:0 !important;
}

/* =========================================================
   STATE TRANSITION STABILITY
========================================================= */

/* Focus → Discover keeps the outgoing Focus geometry frozen. */
body.card-focus-mode
.content-card.selected-card.is-discovered
.card-copy{
  min-height:56% !important;

  padding-top:12px !important;
  padding-bottom:8px !important;

  display:flex !important;
  flex-direction:column;

  transform:none !important;
}

body.card-focus-mode
.content-card.selected-card.is-discovered
.card-copy > *{
  transition:none !important;
}

body.card-focus-mode
.content-card.selected-card.is-discovered
.card-copy-head{
  margin-bottom:6px !important;
}

body.card-focus-mode
.content-card.selected-card.is-discovered
.card-copy-head small{
  color:var(--mr-label) !important;
  -webkit-text-fill-color:var(--mr-label) !important;
}

body.card-focus-mode
.content-card.selected-card.is-discovered
.card-match{
  color:var(--mr-fit) !important;
  -webkit-text-fill-color:var(--mr-fit) !important;

  opacity:1 !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.26) !important;
}

body.card-focus-mode
.content-card.selected-card.is-discovered
.card-copy > h3{
  display:-webkit-box !important;

  width:100%;
  max-width:100%;
  max-height:2em !important;

  margin:0 0 5px !important;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  color:var(--mr-title) !important;
  -webkit-text-fill-color:var(--mr-title) !important;

  font-size:13.8px !important;
  font-weight:720 !important;
  line-height:1 !important;
  letter-spacing:-.025em !important;

  text-transform:uppercase;

  text-shadow:none !important;

  filter:none !important;
  transform:none !important;
}

body.card-focus-mode
.content-card.selected-card.is-discovered
.card-original-title{
  margin:
    -3px
    0
    var(--mr-focus-space) !important;

  color:var(--mr-original) !important;
  -webkit-text-fill-color:var(--mr-original) !important;

  font-weight:600 !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.22) !important;

  transform:none !important;
}

body.card-focus-mode
.content-card.selected-card.is-discovered
.card-meta{
  margin:0 !important;

  color:var(--mr-meta) !important;
  -webkit-text-fill-color:var(--mr-meta) !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.22) !important;

  transform:none !important;
}

/* Focus → Orbit: apply Orbit internals atomically. */
body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-visual,
body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-visual-title,
body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-copy,
body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-copy > *,
body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-focus-extra{
  transition:none !important;
}

body:not(.card-focus-mode):not(.discover-mode)
.content-card
.card-focus-extra{
  max-height:0 !important;

  margin-top:0 !important;
  padding-bottom:0 !important;

  opacity:0 !important;
  visibility:hidden !important;

  transform:none !important;

  overflow:hidden !important;

  pointer-events:none !important;
}

/* Focus → Focus: old card is already Orbit-ready while receding. */
body.card-focus-mode
.content-card.receding-card
.card-visual,
body.card-focus-mode
.content-card.receding-card
.card-visual-title,
body.card-focus-mode
.content-card.receding-card
.card-copy,
body.card-focus-mode
.content-card.receding-card
.card-copy > *,
body.card-focus-mode
.content-card.receding-card
.card-focus-extra{
  transition:none !important;
}

body.card-focus-mode
.content-card.receding-card
.card-focus-extra{
  max-height:0 !important;

  margin-top:0 !important;
  padding-bottom:0 !important;

  opacity:0 !important;
  visibility:hidden !important;

  transform:none !important;

  overflow:hidden !important;

  pointer-events:none !important;
}

/* Orbit → Focus: internal Focus content is already composed. */
.content-card.selected-card
.card-focus-extra{
  transition:none !important;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .topbar{
    width:
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        28px
      );

    grid-template-columns:
      max-content
      minmax(0,1fr);

    gap:18px;
  }

  .brand-with-logo{
    gap:9px;
  }

  .brand-logo{
    width:44px;
    height:44px;

    flex-basis:44px;
  }

  .brand-with-logo > span{
    font-size:26px;
  }

  .filter-dock{
    width:
      min(
        900px,
        calc(
          100% -
          var(--safe-left) -
          var(--safe-right) -
          28px
        )
      );
  }

  .moodround-footer{
    gap:11px;

    font-size:8px;
  }

  .moodround-footer-links{
    gap:10px;
  }
}

/* =========================================================
   TABLET / COMPACT DESKTOP
========================================================= */

@media(max-width:980px){

  .topbar{
    grid-template-columns:
      46px
      minmax(0,1fr);

    gap:12px;
  }

  .brand-with-logo{
    justify-content:center;

    gap:0;
  }

  .brand-with-logo > span{
    display:none;
  }

  .brand-logo{
    width:44px;
    height:44px;

    flex-basis:44px;
  }

  .content-card{
    width:190px;
    height:266px;
  }

  .filter-dock button{
    padding:0 5px;
  }

  .filter-dock span{
    font-size:6.5px;
  }

  .filter-dock b{
    font-size:9px;
  }

  .card-original-title{
    font-size:8px !important;
  }

  .card-discover-panel{
    padding:13px 14px 8px;
  }

  .card-discover-content{
    max-height:calc(100% - 26px);

    padding-top:5px;
  }

  .card-discover-format{
    font-size:6.6px;
  }

  .card-discover-content h4{
    font-size:17.5px;
  }

  .card-discover-original-title{
    font-size:6.9px !important;
  }
  
  .content-card .card-discover-metadata{
  margin-bottom:4px !important;

  font-size:6.8px !important;
}

  .card-discover-description,
  .content-card.is-discovered .card-discover-description{
    max-height:
      calc(
        1.38em *
        5 +
        3px
      ) !important;

    font-size:8.3px !important;
    line-height:1.38 !important;
  }

  .card-cast-person{
    max-width:114px;

    padding:5px 7px;

    font-size:6.7px;
  }

  .card-discover-link{
    height:23px;

    font-size:6.4px;
  }

  body.card-focus-mode
  .content-card.selected-card:not(.is-discovered)
  .card-copy > h3,
  body.card-focus-mode
  .content-card.selected-card.is-discovered
  .card-copy > h3{
    font-size:13px !important;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-focus-genre{
    max-width:125px;

    padding:5px 7px;

    font-size:6.7px;
  }

  body:not(.card-focus-mode):not(.discover-mode)
  .content-card
  .card-copy > h3,
  body.card-focus-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-copy > h3,
  body.discover-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-copy > h3{
    font-size:13.2px !important;
  }
}

/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media(max-width:700px) and (orientation:portrait){

  .topbar{
    top:
      calc(
        var(--safe-top) +
        9px
      );

    width:
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        18px
      );

    height:46px;

    grid-template-columns:
      40px
      minmax(0,1fr);

    gap:8px;
  }

  .brand-with-logo{
    min-height:42px;

    padding:0;

    justify-content:center;
  }

  .brand-with-logo::before{
    left:50%;

    width:45px;
    height:45px;

    transform:translate(-50%,-50%);
  }

  .brand-logo{
    width:38px;
    height:38px;

    flex-basis:38px;

    filter:
      drop-shadow(0 0 7px rgba(120,202,255,.30));
  }

  .brand-with-logo > span{
    display:none;
  }

  .top-search{
    height:44px;

    padding:0 4px 0 12px;
  }

  .top-search input{
    font-size:16px;
  }

  .top-search .search-submit{
  width:34px;
  height:34px;

  font-size:16px;
}

.top-search .search-clear{
  width:26px;
  height:26px;

  margin-right:-1px;

  font-size:19px;
}

  .filter-panel{
    bottom:
      calc(
        var(--safe-bottom) +
        94px
      );

    width:
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        18px
      );

    padding:14px 14px 16px;

    border-radius:19px;
  }

  .filter-panel::before{
    margin-bottom:10px;

    font-size:7px;
  }
  
  .filter-panel[data-active-filter="format"]{
  --tray-anchor:8.4%;
}

.filter-panel[data-active-filter="commitment"]{
  --tray-anchor:23.3%;
}

.filter-panel[data-active-filter="genre"]{
  --tray-anchor:38.2%;
}

.filter-panel[data-active-filter="origin"]{
  --tray-anchor:61.8%;
}

.filter-panel[data-active-filter="release"]{
  --tray-anchor:76.7%;
}

.filter-panel[data-active-filter="discovery"]{
  --tray-anchor:91.6%;
}

  .filter-options{
    gap:7px;
  }

  .filter-options button{
    min-height:33px;

    padding:0 11px;

    font-size:9px;
  }

  .content-card{
    width:160px;
    height:224px;

    border-radius:20px;
  }

  .card-copy{
    padding:12px 13px 12px;
  }

  .content-card h3{
    font-size:14px !important;
  }

  .content-card p,
  .content-card .card-meta{
    font-size:9px;
  }

  .card-original-title{
    margin:-2px 0 4px !important;

    font-size:7.2px !important;
    line-height:1.16 !important;
  }

  .card-visual-title{
    font-size:23px;
  }

  .card-format-symbol{
    right:11px;
    top:11px;

    width:30px;
    height:30px;

    font-size:11px;
  }

  .content-card.selected-card .card-focus-extra{
    max-height:138px;
  }

  .card-actions{
    gap:5px;
  }

  .card-action{
    height:28px;

    padding:0 8px;

    font-size:8px;
  }

  .filter-dock{
    bottom:
      calc(
        var(--safe-bottom) +
        31px
      );

    width:
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        16px
      );

    min-height:54px;

    padding:4px;

    grid-template-columns:
  repeat(
    3,
    minmax(0,1fr)
  )
  32px
  repeat(
    3,
    minmax(0,1fr)
  );

    gap:1px;

    overflow:visible;

    border-radius:17px;
  }

  .filter-dock button{
    width:auto;
    min-width:0;
    height:45px;

    padding:0 2px;

    text-align:center;
  }

  .filter-dock span{
    font-size:5.5px;
    letter-spacing:.09em;
  }

  .filter-dock b{
    margin-top:4px;

    font-size:7.5px;
  }
  
  .filter-dock .filter-reset{
  width:28px;
  min-width:28px;
  height:28px;
}

.filter-dock
.filter-reset
.filter-reset-icon{
  font-size:15px;
}

  .moodround-footer{
    left:
      max(
        8px,
        var(--safe-left)
      );

    right:
      max(
        8px,
        var(--safe-right)
      );

    bottom:
      max(
        4px,
        var(--safe-bottom)
      );

    min-height:18px;

    gap:7px;

    font-size:6px;
    letter-spacing:.02em;
  }

  .moodround-footer-links{
    gap:7px;
  }

  .moodround-footer-links::before{
    height:7px;

    margin-right:0;
  }

  .tip{
    display:none;
  }

  .moodround-toast{
    bottom:
      calc(
        var(--safe-bottom) +
        100px
      );

    max-width:
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        26px
      );

    padding:10px 13px;

    font-size:10px;
  }

  .boot-symbol.boot-logo{
    width:88px;
    height:88px;

    margin-bottom:12px;
  }

  .boot-copy b{
    font-size:29px;
  }

  .boot-copy span{
    margin-top:8px;

    font-size:8px;
    letter-spacing:.20em;
  }

  body.card-focus-mode
  .content-card.selected-card{
    --mr-focus-space:5px;
    --mr-focus-inner-space:3px;
  }

  body.card-focus-mode
  .content-card.selected-card:not(.is-discovered)
  .card-copy > h3,
  body.card-focus-mode
  .content-card.selected-card.is-discovered
  .card-copy > h3{
    margin-bottom:4px !important;

    font-size:10.8px !important;
    line-height:1.01 !important;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-focus-section-label{
    font-size:5.6px;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-focus-genre-track{
    gap:4px;

    padding-bottom:2px;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-focus-genre{
    max-width:100px;

    padding:4px 6px;

    font-size:5.8px;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-actions{
    padding-top:4px !important;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-discover{
    height:20px;

    padding:0 6px;

    font-size:5.7px;
  }

  body:not(.card-focus-mode):not(.discover-mode)
  .content-card
  .card-copy > h3,
  body.card-focus-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-copy > h3,
  body.discover-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-copy > h3{
    margin-bottom:3px !important;

    font-size:11px !important;
    line-height:1.03 !important;
  }

  body:not(.card-focus-mode):not(.discover-mode)
  .content-card
  .card-original-title,
  body.card-focus-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-original-title,
  body.discover-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-original-title{
    margin-bottom:4px !important;
  }

  .content-card.is-discovered .card-discover-panel{
    padding:10px 11px 6px;
  }

  .content-card.is-discovered .card-discover-content{
    /* The mobile back control is 23px high: reserve exactly that,
       so the metadata row does not steal space from the five-line description. */
    max-height:calc(100% - 23px) !important;

    padding-top:0 !important;
  }

  .card-discover-format{
    margin-bottom:3px;

    font-size:5.8px;
  }

  .card-discover-content h4{
    margin-bottom:4px;

    font-size:15.5px;
    line-height:.99;
  }

  .card-discover-original-title{
    /* 5px minus the metadata's -1px top margin = 4px visual gap. */
    margin:-2px 0 5px !important;

    font-size:5.9px !important;
  }
  
  .content-card .card-discover-metadata{
  margin:-1px 0 4px !important;

  font-size:5.9px !important;
  line-height:1.15 !important;
}

  .card-discover-description,
  .content-card.is-discovered .card-discover-description{
    /* Five complete lines in portrait. Low landscape keeps its separate four-line rule. */
    max-height:calc(1.36em * 5) !important;
    max-height:5lh !important;

    padding:0 2px 0 0 !important;

    font-size:7.1px !important;
    line-height:1.36 !important;

    overflow-y:auto !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .content-card.is-discovered .card-discover-description.has-more:not(.is-at-end){
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .content-card.is-discovered .card-cast{
    margin-top:4px !important;
  }

  .content-card.is-discovered .card-cast-head{
    min-height:17px !important;

    margin-bottom:2px !important;
  }

  .card-cast-head > span{
    font-size:5.5px;
  }

  .content-card.is-discovered .card-cast-arrow{
    width:17px !important;
    height:17px !important;
  }

  .card-cast-track{
    gap:4px;
  }

  .card-cast-person{
    max-width:94px;

    padding:4px 6px;

    font-size:5.8px;
  }

  .content-card.is-discovered .card-discover-actions{
    margin-top:4px !important;
    padding-top:4px !important;

    gap:4px;
  }

  .content-card.is-discovered .card-discover-link{
    height:20px !important;

    padding:0 6px;

    font-size:5.7px;
  }

  body.discover-mode
  .content-card.is-discovered
  .card-discover-back{
    width:23px !important;
    min-width:23px !important;
    height:23px !important;
  }

  body.discover-mode
  .content-card.is-discovered
  .card-discover-back svg{
    width:11px !important;
    height:11px !important;
  }
}

/* =========================================================
   MOBILE LANDSCAPE / LOW VIEWPORT
========================================================= */

@media(max-height:560px) and (orientation:landscape){

  .topbar{
    top:
      calc(
        var(--safe-top) +
        7px
      );

    width:
      calc(
        100% -
        var(--safe-left) -
        var(--safe-right) -
        22px
      );

    height:44px;

    grid-template-columns:
      38px
      minmax(0,1fr);

    gap:8px;
  }

  .brand-with-logo{
    min-height:40px;
  }

  .brand-with-logo::before{
    left:50%;

    width:43px;
    height:43px;

    transform:translate(-50%,-50%);
  }

  .brand-logo{
    width:36px;
    height:36px;

    flex-basis:36px;
  }

  .brand-with-logo > span{
    display:none;
  }

  .top-search{
    height:40px;

    padding:0 4px 0 12px;
  }

  .top-search input{
    font-size:16px;
  }

  .top-search .search-submit{
  width:32px;
  height:32px;
}

.top-search .search-clear{
  width:24px;
  height:24px;

  margin-right:-1px;

  font-size:18px;
}

  .content-card{
    width:138px;
    height:192px;

    border-radius:17px;
  }

  .card-copy{
    padding:10px 11px 10px;
  }

  .content-card small{
    font-size:7px;
  }

  .content-card h3{
    margin-bottom:4px !important;

    font-size:11px !important;
    line-height:1.04 !important;
  }

  .content-card p,
  .content-card .card-meta{
    font-size:7.5px;
    line-height:1.22;
  }

  .card-original-title{
    margin:-2px 0 3px !important;

    font-size:5.9px !important;
    line-height:1.12 !important;
  }

  .card-visual-title{
    font-size:19px;
  }

  .card-format-symbol{
    right:9px;
    top:9px;

    width:25px;
    height:25px;

    font-size:9px;
  }

  .content-card.selected-card .card-copy{
    padding:8px 10px 9px;
  }

  .content-card.selected-card .card-focus-extra{
    max-height:108px;
  }

  .card-actions{
    margin-top:8px;
  }

  .card-action{
    height:24px;

    padding:0 7px;

    font-size:7px;
  }

  .filter-panel{
    bottom:
      calc(
        var(--safe-bottom) +
        76px
      );

    width:
      min(
        880px,
        calc(
          100% -
          var(--safe-left) -
          var(--safe-right) -
          22px
        )
      );

    padding:11px 13px 13px;

    border-radius:17px;
  }

  .filter-panel::before{
    margin-bottom:8px;

    font-size:6px;
  }
  
  .filter-panel[data-active-filter="format"]{
  --tray-anchor:8.2%;
}

.filter-panel[data-active-filter="commitment"]{
  --tray-anchor:24.1%;
}

.filter-panel[data-active-filter="genre"]{
  --tray-anchor:40.1%;
}

.filter-panel[data-active-filter="origin"]{
  --tray-anchor:59.9%;
}

.filter-panel[data-active-filter="release"]{
  --tray-anchor:75.9%;
}

.filter-panel[data-active-filter="discovery"]{
  --tray-anchor:91.8%;
}

  .filter-options{
    gap:6px;
  }

  .filter-options button{
    min-height:29px;

    padding:0 10px;

    font-size:8px;
  }

  .filter-dock{
    bottom:
      calc(
        var(--safe-bottom) +
        22px
      );

    width:
      min(
        880px,
        calc(
          100% -
          var(--safe-left) -
          var(--safe-right) -
          20px
        )
      );

    min-height:49px;

    padding:3px;

    grid-template-columns:
  repeat(
    3,
    minmax(0,1fr)
  )
  30px
  repeat(
    3,
    minmax(0,1fr)
  );

    border-radius:15px;
  }

  .filter-dock button{
    height:41px;

    padding:0 5px;
  }

  .filter-dock span{
    font-size:6px;
  }

  .filter-dock b{
    font-size:8px;
  }
  
  .filter-dock .filter-reset{
  width:26px;
  min-width:26px;
  height:26px;
}

.filter-dock
.filter-reset
.filter-reset-icon{
  font-size:14px;
}

  .moodround-footer{
    bottom:
      max(
        2px,
        var(--safe-bottom)
      );

    min-height:15px;

    gap:6px;

    font-size:5.5px;
  }

  .moodround-footer-links{
    gap:6px;
  }

  .moodround-footer-copy{
    display:none;
  }

  body.card-focus-mode .moodround-footer,
  body.discover-mode .moodround-footer{
    opacity:0 !important;
    visibility:hidden !important;

    transform:translateY(6px) !important;

    pointer-events:none !important;
  }

  body.card-focus-mode .moodround-footer a,
  body.discover-mode .moodround-footer a{
    pointer-events:none !important;
  }

  .tip{
    display:none;
  }

  .moodround-toast{
    bottom:
      calc(
        var(--safe-bottom) +
        86px
      );

    padding:8px 12px;

    font-size:9px;
  }

  .boot-symbol.boot-logo{
    width:72px;
    height:72px;

    margin-bottom:8px;
  }

  .boot-copy b{
    font-size:25px;
  }

  .boot-copy span{
    margin-top:6px;

    font-size:7px;
  }

  body.card-focus-mode
  .content-card.selected-card{
    --mr-focus-space:4px;
    --mr-focus-inner-space:2px;
  }

  body.card-focus-mode
  .content-card.selected-card:not(.is-discovered)
  .card-copy > h3,
  body.card-focus-mode
  .content-card.selected-card.is-discovered
  .card-copy > h3{
    margin-bottom:3px !important;

    font-size:8.5px !important;
    line-height:1 !important;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-focus-section-label{
    font-size:4.5px;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-focus-genre-track{
    gap:3px;

    padding-bottom:1px;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-focus-genre{
    max-width:78px;

    padding:3px 5px;

    font-size:4.8px;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-actions{
    padding-top:3px !important;
  }

  body.card-focus-mode
  .content-card.selected-card
  .card-discover{
    height:18px;

    padding:0 4px;

    font-size:4.7px;
  }

  body:not(.card-focus-mode):not(.discover-mode)
  .content-card
  .card-copy-head,
  body.card-focus-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-copy-head,
  body.discover-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-copy-head{
    margin-bottom:3px;
  }

  body:not(.card-focus-mode):not(.discover-mode)
  .content-card
  .card-copy > h3,
  body.card-focus-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-copy > h3,
  body.discover-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-copy > h3{
    margin-bottom:2px !important;

    font-size:8.6px !important;
    line-height:1.02 !important;
  }

  body:not(.card-focus-mode):not(.discover-mode)
  .content-card
  .card-original-title,
  body.card-focus-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-original-title,
  body.discover-mode
  .content-card:not(.selected-card):not(.is-discovered)
  .card-original-title{
    margin-bottom:3px !important;
  }

  .content-card.is-discovered .card-discover-panel{
    padding:7px 8px 5px;
  }

  .content-card.is-discovered .card-discover-content{
    max-height:calc(100% - 18px) !important;

    padding-top:0 !important;
  }

  body.discover-mode
  .content-card.is-discovered
  .card-discover-format{
    margin-bottom:2px;
    padding-top:1px;

    font-size:4.7px;
    line-height:1.24 !important;
  }

  .card-discover-content h4{
    margin-bottom:3px;

    font-size:12.8px;
    line-height:.98;
  }

  .card-discover-original-title{
  margin:-2px 0 3px !important;

  font-size:4.6px !important;
}

.content-card .card-discover-metadata{
  margin:-1px 0 4px !important;

  font-size:4.7px !important;
  line-height:1.12 !important;
}

  .card-discover-description,
  .content-card.is-discovered .card-discover-description{
    max-height:28.728px !important;

    padding:0 1px 0 0 !important;

    font-size:5.7px !important;
    line-height:1.26 !important;

    overflow-y:auto !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .content-card.is-discovered .card-discover-description.has-more:not(.is-at-end){
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .content-card.is-discovered .card-cast{
    margin-top:3px !important;
  }

  .content-card.is-discovered .card-cast-head{
    min-height:14px !important;

    margin-bottom:2px !important;
  }

  .card-cast-head > span{
    font-size:4.5px;
  }

  .content-card.is-discovered .card-cast-arrow{
    width:16px !important;
    height:16px !important;
  }

  .card-cast-arrow::before{
    width:4px;
    height:4px;

    border-width:0 1px 1px 0;
  }

  .card-cast-track{
    gap:3px;
  }

  .card-cast-person{
    max-width:76px;

    padding:3px 5px;

    font-size:4.8px;
  }

  .content-card.is-discovered .card-discover-actions{
    margin-top:3px !important;
    padding-top:3px !important;

    gap:3px;
  }

  .content-card.is-discovered .card-discover-link{
    height:18px !important;

    padding:0 4px;

    font-size:4.7px;
  }

  body.discover-mode
  .content-card.is-discovered
  .card-discover-back{
    width:20px !important;
    min-width:20px !important;
    height:20px !important;
  }

  body.discover-mode
  .content-card.is-discovered
  .card-discover-back svg{
    width:9px !important;
    height:9px !important;
  }
}

/* =========================================================
   EXACT DESKTOP / TABLET DESCRIPTION CLIP
========================================================= */

@media(min-width:701px) and (min-height:561px){

  .content-card.is-discovered .card-discover-description{
    max-height:5lh !important;
  }
}

/* =========================================================
   VERY NARROW DEVICES
========================================================= */

@media(max-width:430px){

  .search-status{
    width:5px;
    height:5px;
  }

  .top-search{
    gap:7px;
  }

  .top-search input{
    font-size:16px;
  }

  .moodround-footer-copy{
    display:none;
  }

  .moodround-footer-links::before{
    display:none;
  }
}

/* =========================================================
   REDUCED MOTION — KEPT LAST SO NOTHING OVERRIDES IT
========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;

    scroll-behavior:auto !important;
  }

  .content-card,
.brand-logo,
.search-submit,
.search-clear,
.filter-clear,
.moodround-footer,
.moodround-footer a,
  .moodround-footer a::after,
  .card-visual,
  .card-copy,
  .card-focus-extra,
  .card-discover-panel,
  .card-discover-panel::before,
  .card-discover-content,
  .card-discover-back,
  .content-card.is-discovered .card-discover-back,
  .core-action,
  .core-action b,
  .card-action,
  .card-discover,
  .card-discover-link,
  .card-cast-arrow,
  .card-focus-genre-arrow{
    transition:none !important;
  }

  .boot-symbol.boot-logo,
  .core.is-loading .surface{
    animation:none !important;
  }

  .card-cast-track,
  .card-focus-genre-track{
    scroll-behavior:auto !important;
  }

  .content-card.is-discovered .card-discover-back{
    opacity:.84 !important;
    visibility:visible !important;

    transform:none !important;
  }
}

/* =========================================================
   ACTIVE MOOD CHIP — COMPACT PREVIEW + FULL POPOVER
========================================================= */

.active-mood-chip[hidden],
#activeMoodPopover[hidden]{
  display:none !important;
}

.active-mood-chip{
  position:relative;

  display:flex;
  align-items:center;

  min-width:0;
  max-width:min(38%, 360px);
  height:32px;

  flex:0 1 auto;

  padding:0 4px 0 0;

  overflow:visible;

  border:
    1px solid
    rgba(120,202,255,.22);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(18,31,53,.92),
      rgba(8,16,31,.94)
    );

  color:#f2f4f8;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 18px rgba(120,202,255,.045);
}

/* =========================================================
   CLICKABLE MOOD PREVIEW
========================================================= */

#activeMoodPreviewButton{
  appearance:none;
  -webkit-appearance:none;

  min-width:0;
  height:100%;

  flex:1 1 auto;

  display:flex;
  align-items:center;

  padding:0 4px 0 12px;

  overflow:hidden;

  border:0;
  border-radius:999px 0 0 999px;

  background:transparent;

  color:inherit;

  text-align:left;

  cursor:pointer;

  box-shadow:none;

  -webkit-tap-highlight-color:transparent;

  transition:
    background .2s ease,
    color .2s ease;
}

#activeMoodPreviewButton:hover,
#activeMoodPreviewButton:focus-visible{
  background:
    rgba(120,190,255,.055);

  color:#fff;

  outline:none;
}

.active-mood-text{
  display:block;

  min-width:0;
  max-width:100%;

  overflow:hidden;

  color:rgba(242,244,248,.94);

  font-size:13.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.01em;

  white-space:nowrap;
  text-overflow:ellipsis;

  pointer-events:none;
}

/* =========================================================
   CLEAR ACTIVE MOOD
========================================================= */

.top-search .active-mood-clear{
  appearance:none;
  -webkit-appearance:none;

  width:24px;
  min-width:24px;
  height:24px;

  flex:0 0 24px;

  display:grid;
  place-items:center;

  margin-left:3px;
  padding:0;

  border:0;
  border-radius:50%;

  background:
    rgba(139,128,255,.11);

  color:
    rgba(210,229,244,.76);

  cursor:pointer;

  box-shadow:none;

  -webkit-tap-highlight-color:transparent;

  transition:
    color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.top-search .active-mood-clear span{
  display:block;

  font-size:16px;
  font-weight:400;
  line-height:1;

  transform:translateY(-.5px);

  pointer-events:none;
}

.top-search .active-mood-clear:hover,
.top-search .active-mood-clear:focus-visible{
  color:#fff;

  background:
    rgba(139,128,255,.24);

  transform:scale(1.05);

  outline:none;
}

.top-search .active-mood-clear:active{
  transform:scale(.94);
}

/* =========================================================
   FULL ACTIVE MOOD POPOVER
========================================================= */

#activeMoodPopover{
  position:absolute;

  left:0;
  top:calc(100% + 10px);
  z-index:100;

  width:
    min(
      460px,
      calc(100vw - 48px)
    );

  max-height:150px;

  padding:13px 15px 14px;

  overflow-x:hidden;
  overflow-y:auto;

  border:
    1px solid
    rgba(135,205,255,.20);

  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(8,17,35,.98),
      rgba(3,8,19,.98)
    );

  color:#f2f4f8;

  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);

  box-shadow:
    0 22px 65px rgba(0,0,0,.48),
    0 0 32px rgba(75,155,255,.10),
    inset 0 1px 0 rgba(255,255,255,.035);

  scrollbar-width:none;
}

#activeMoodPopover::-webkit-scrollbar{
  display:none;
}

#activeMoodPopover::before{
  content:"";

  position:absolute;

  left:25px;
  top:-6px;

  width:11px;
  height:11px;

  transform:rotate(45deg);

  border-left:
    1px solid
    rgba(135,205,255,.18);

  border-top:
    1px solid
    rgba(135,205,255,.18);

  background:
    rgba(8,17,35,.98);
}

#activeMoodPopover > span:first-child{
  position:relative;
  z-index:1;

  display:block;

  margin:0 0 7px;

  color:
    rgba(125,205,255,.76);

  font-size:7px;
  font-weight:800;
  line-height:1;
  letter-spacing:.17em;

  text-transform:uppercase;
}

#activeMoodPopoverText{
  position:relative;
  z-index:1;

  display:block;

  margin:0;

  color:
    rgba(236,242,250,.95);

  font-size:13px;
  font-weight:400;
  line-height:1.45;

  white-space:normal;
  overflow-wrap:anywhere;
}

/* Input always keeps the remaining available space */

.top-search #moodInput{
  min-width:70px;

  flex:1 1 auto;
}

/* =========================================================
   ACTIVE MOOD — TABLET
========================================================= */

@media(max-width:980px){

  .active-mood-chip{
    max-width:40%;
  }

  .active-mood-text{
    font-size:12.5px;
  }

  #activeMoodPopover{
    width:
      min(
        420px,
        calc(100vw - 42px)
      );
  }
}

/* =========================================================
   ACTIVE MOOD — MOBILE
========================================================= */

@media(max-width:700px){

  .top-search{
    gap:6px;
  }

  .active-mood-chip{
    max-width:44%;
    height:30px;

    padding-right:3px;
  }

  #activeMoodPreviewButton{
    padding-left:10px;
  }

  .active-mood-text{
    font-size:12px;
  }

  .top-search .active-mood-clear{
    width:22px;
    min-width:22px;
    height:22px;

    flex-basis:22px;
  }

  .top-search .active-mood-clear span{
    font-size:15px;
  }

  #activeMoodPopover{
    left:-2px;
    top:calc(100% + 8px);

    width:
      min(
        330px,
        calc(100vw - 28px)
      );

    max-height:132px;

    padding:12px 13px 13px;

    border-radius:14px;
  }

  #activeMoodPopoverText{
    font-size:12px;
    line-height:1.42;
  }
}

/* =========================================================
   ACTIVE MOOD — VERY NARROW DEVICES
========================================================= */

@media(max-width:430px){

  .active-mood-chip{
    max-width:42%;
  }

  .active-mood-text{
    font-size:11.5px;
  }

  #activeMoodPopover{
    width:
      calc(
        100vw -
        var(--safe-left) -
        var(--safe-right) -
        28px
      );
  }
}

/* =========================================================
   ACTIVE MOOD — REMOVE STICKY TOUCH HOVER
========================================================= */

@media (hover:none), (pointer:coarse){

  .top-search
  .active-mood-preview[aria-expanded="false"],
  .top-search
  .active-mood-preview[aria-expanded="false"]:hover,
  .top-search
  .active-mood-preview[aria-expanded="false"]:active,
  .top-search
  .active-mood-preview[aria-expanded="false"]:focus,
  .top-search
  .active-mood-preview[aria-expanded="false"]:focus-visible{
    border-color:transparent !important;

    background:transparent !important;

    color:inherit !important;

    box-shadow:none !important;

    filter:none !important;

    transform:none !important;
  }
}

/* =========================================================
   CARD META — SINGLE-LINE AUTO-FIT FOUNDATION
========================================================= */

.content-card{
  --card-meta-base-size:10px;
  --card-meta-min-size:6.8px;
}

.content-card .card-meta{
  display:block;

  width:100%;
  max-width:100%;
  min-width:0;

  margin:0 !important;

  overflow:hidden;

  color:#9fadc2;

  font-size:
    var(
      --card-meta-fit-size,
      var(--card-meta-base-size)
    ) !important;

  line-height:1.15 !important;
  letter-spacing:-.012em;

  white-space:nowrap;
  text-overflow:ellipsis;

  transition:
    font-size .18s ease;
}

@media(max-width:700px) and (orientation:portrait){

  .content-card{
    --card-meta-base-size:9px;
    --card-meta-min-size:6.2px;
  }
}

@media(max-height:560px) and (orientation:landscape){

  .content-card{
    --card-meta-base-size:7.5px;
    --card-meta-min-size:5.2px;
  }
}

/* =========================================================
   FILTER PANEL — CONTEXTUAL UNAVAILABLE OPTIONS
========================================================= */

#filterOptions button.is-unavailable,
#filterOptions button:disabled{
  opacity:.42 !important;

  pointer-events:none !important;
  cursor:default !important;

  filter:saturate(.35);

  transform:none !important;
  box-shadow:none !important;

  transition:none !important;
  animation:none !important;

  -webkit-tap-highlight-color:
    transparent;
}

#filterOptions button.is-unavailable:hover,
#filterOptions button.is-unavailable:focus,
#filterOptions button.is-unavailable:focus-visible,
#filterOptions button.is-unavailable:active,
#filterOptions button:disabled:hover,
#filterOptions button:disabled:focus,
#filterOptions button:disabled:focus-visible,
#filterOptions button:disabled:active{
  opacity:.42 !important;

  transform:none !important;
  box-shadow:none !important;

  filter:saturate(.35);

  outline:none !important;
}