/* Home Cinema TV app.
   Layout is drawn for 1920x1080 in rem (1 rem = 10 px at 1920 wide) so 1280x720 scales down.
   Chromium 38 floor: no custom properties, grid, sticky, backdrop-filter, filter blur or flex gap.
   Motion animates transform and opacity only. Safe area: 9.6rem left/right, 5.4rem top/bottom. */

html { font-size: 0.5208333vw; background: #0b0d10; }
html, body { width: 100%; height: 100%; }
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
  overflow: hidden;
  background: #0b0d10;
  color: #f2f2f2;
  font-family: "LG Smart UI", "Museo Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 2.6rem;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
[hidden], #tpl { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: middle; }
b { font-weight: 600; color: #f2f2f2; }

#app { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }

/* Screens fade in: JS sets .on (display) then .in (opacity). */
.screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: none; opacity: 0;
  -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out;
}
.screen.on { display: block; }
.screen.in { opacity: 1; }

.eyebrow {
  font-size: 2.2rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9aa3ad;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.brand {
  position: absolute; top: 5.4rem; left: 11.8rem;
  font-size: 2.6rem; font-weight: 700; letter-spacing: 0.02em; color: #f2f2f2;
}
.brand span, .boot-mark span { font-weight: 300; color: #9aa3ad; }

/* ---------------------------------------------------------------- boot */
#boot { background: #0b0d10; }
.boot-mark {
  position: absolute; top: 50%; left: 0; width: 100%; margin-top: -2.4rem;
  text-align: center; font-size: 4rem; font-weight: 700; letter-spacing: 0.02em; color: #f2f2f2; opacity: 0.6;
}

/* ---------------------------------------------------------------- clock */
#clock {
  position: absolute; top: 5.4rem; right: 9.6rem; z-index: 5;
  font-size: 3rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em;
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
  display: none;
}
#clock.on { display: block; }
#clock .colon, .ov-clock .colon { color: #f5b301; padding: 0 0.1em; }

/* ---------------------------------------------------------------- pairing */
#pair {
  background: #0b0d10;
  background-image: radial-gradient(ellipse at 78% 30%, #1a2230 0%, rgba(11, 13, 16, 0) 58%);
}
.pair-body { position: absolute; left: 11.8rem; top: 25rem; width: 120rem; }
.pair-code {
  margin-top: 2.4rem;
  font-size: 19rem; font-weight: 300; line-height: 1; letter-spacing: 0.04em; white-space: nowrap;
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
}
.pair-life { width: 64rem; height: 0.4rem; margin: 4.4rem 0 5.2rem; background: rgba(242, 242, 242, 0.12); border-radius: 0.2rem; overflow: hidden; }
.pair-life-fill {
  width: 100%; height: 100%; background: #f5b301;
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
  -webkit-transition: -webkit-transform 600ms ease-out; transition: transform 600ms ease-out;
}
.pair-step { font-size: 3rem; line-height: 1.5; color: #9aa3ad; }
.pair-status { margin-top: 4.4rem; font-size: 2.4rem; color: #9aa3ad; }

/* ---------------------------------------------------------------- home: hero */
#home { background: #0b0d10; }
#hero { position: absolute; top: 0; left: 0; width: 100%; height: 78.8rem; overflow: hidden; }
.hero-bg, .hero-shade { position: absolute; top: 0; right: 0; width: 140rem; height: 78.8rem; }
.hero-bg {
  background-color: #0b0d10; background-size: cover; background-position: 50% 30%;
  opacity: 0; -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out;
}
.hero-bg.on { opacity: 1; }
/* Left fade carries the title, bottom fade hands over to the rows, a faint top fade keeps the clock legible. */
.hero-shade {
  background-image:
    linear-gradient(to right, #0b0d10 0%, rgba(11, 13, 16, 0.84) 12%, rgba(11, 13, 16, 0.5) 27%, rgba(11, 13, 16, 0.16) 46%, rgba(11, 13, 16, 0) 62%),
    linear-gradient(to top, #0b0d10 0%, rgba(11, 13, 16, 0.94) 16%, rgba(11, 13, 16, 0.5) 34%, rgba(11, 13, 16, 0) 56%),
    linear-gradient(to bottom, rgba(11, 13, 16, 0.45) 0%, rgba(11, 13, 16, 0) 18%);
}
.hero-info {
  position: absolute; left: 11.8rem; top: 14rem; width: 100rem; height: 43rem;
  -webkit-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out;
}
.hero-info.swap { opacity: 0; -webkit-transition-duration: 120ms; transition-duration: 120ms; }
.hero-stack { position: absolute; left: 0; bottom: 0; width: 100%; }
.hero-title {
  margin-top: 1.4rem;
  font-size: 6.4rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-align: left;
  max-height: 15.4rem; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hero-meta {
  margin-top: 1.8rem; height: 3.4rem;
  font-size: 2.6rem; line-height: 3.4rem; color: #9aa3ad; white-space: nowrap;
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
}
.meta i { display: inline-block; width: 0.5rem; height: 0.5rem; margin: 0 1.4rem; border-radius: 50%; background: #9aa3ad; vertical-align: middle; }
.hero-status { position: relative; height: 3.2rem; margin-top: 2.6rem; }
.hero-progress, .hero-done { position: absolute; left: 0; top: 0; height: 3.2rem; line-height: 3.2rem; display: none; white-space: nowrap; }
.hero-progress.on, .hero-done.on { display: block; }
.hero-bar {
  display: inline-block; vertical-align: middle; width: 30rem; height: 0.6rem; margin-right: 2rem;
  background: rgba(242, 242, 242, 0.2); border-radius: 0.3rem; overflow: hidden;
}
.hero-fill { width: 100%; height: 100%; background: #f5b301; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.hero-left, .hero-done span { font-size: 2.2rem; color: #9aa3ad; vertical-align: middle; }
.hero-done .icon { width: 2.8rem; height: 2.8rem; color: #f2f2f2; margin-right: 1rem; }

/* ---------------------------------------------------------------- home: rows
   Rows are 30rem apart, cards 33rem apart (keep in sync with ROW_PITCH / CARD_PITCH in tv.js).
   The viewport starts at the left safe edge; cards start 2.2rem further in so the scaled focus ring fits. */
#rows { position: absolute; top: 60rem; left: 9.6rem; right: 0; bottom: 0; overflow: hidden; }
#rowsTrack {
  position: absolute; top: 0; left: 0; width: 100%;
  -webkit-transition: -webkit-transform 250ms ease-out; transition: transform 250ms ease-out;
}
.row { position: absolute; left: 0; width: 100%; height: 30rem; }
.row-title {
  position: absolute; top: 0; left: 2.2rem; width: 150rem; height: 3.4rem;
  font-size: 2.6rem; font-weight: 600; line-height: 3.4rem; color: #9aa3ad;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.row.active .row-title { color: #f2f2f2; }
.row-track {
  position: absolute; top: 5.6rem; left: 2.2rem; width: 30rem; height: 23rem;
  -webkit-transition: -webkit-transform 250ms ease-out; transition: transform 250ms ease-out;
}
.card {
  position: absolute; top: 0; width: 30rem; height: 22rem;
  -webkit-transform-origin: 50% 8.45rem; transform-origin: 50% 8.45rem;
  -webkit-transition: -webkit-transform 150ms ease-out; transition: transform 150ms ease-out;
}
.card.focused { -webkit-transform: scale(1.08); transform: scale(1.08); }
.thumb {
  position: relative; width: 30rem; height: 16.9rem; overflow: hidden; border-radius: 0.8rem;
  background-color: #161a20;
  background-image: linear-gradient(135deg, #1d232b 0%, #12161b 100%);
}
.card.focused .thumb { box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.6); }
.ph {
  position: absolute; left: 2rem; right: 2rem; bottom: 2rem;
  font-size: 2.4rem; font-weight: 600; line-height: 1.25; color: #9aa3ad; text-align: left;
  max-height: 6rem; overflow: hidden;
}
.img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.8rem;
  -o-object-fit: cover; object-fit: cover;
  opacity: 0; -webkit-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out;
}
.card.ready .img { opacity: 1; }
.card.ready .ph { display: none; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.6rem; background: rgba(11, 13, 16, 0.55); display: none; }
.card.started .bar { display: block; }
.fill { width: 100%; height: 100%; background: #f5b301; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.done { position: absolute; top: 1.2rem; right: 1.2rem; width: 3.6rem; height: 3.6rem; color: #f2f2f2; display: none; }
.done circle { fill: rgba(11, 13, 16, 0.72); }
.card.finished .done { display: block; }
.ring {
  position: absolute; top: -0.7rem; left: -0.7rem; width: 31.4rem; height: 18.3rem;
  border: 0.4rem solid #f2f2f2; border-radius: 1.3rem;
  opacity: 0; -webkit-transition: opacity 150ms ease-out; transition: opacity 150ms ease-out;
}
.card.focused .ring { opacity: 1; }
.name {
  margin-top: 1.4rem; height: 2.9rem;
  font-size: 2.2rem; font-weight: 500; line-height: 2.9rem; color: #9aa3ad;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.card.focused .name { color: #f2f2f2; }

/* re-render without motion */
.still #rowsTrack, .still .row-track, .still .card, .still .ring, .still .img { -webkit-transition: none !important; transition: none !important; }

/* ---------------------------------------------------------------- series page
   Same backdrop treatment as the hero; poster left, then title/meta/description/Play; season tabs; one episode row. */
#series { background: #0b0d10; }
.sr-bg, .sr-shade { position: absolute; top: 0; right: 0; width: 140rem; height: 78.8rem; }
.sr-bg {
  background-color: #0b0d10; background-size: cover; background-position: 50% 30%;
  opacity: 0; -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out;
}
.sr-bg.on { opacity: 1; }
.sr-shade {
  background-image:
    linear-gradient(to right, #0b0d10 0%, rgba(11, 13, 16, 0.9) 16%, rgba(11, 13, 16, 0.58) 34%, rgba(11, 13, 16, 0.18) 54%, rgba(11, 13, 16, 0) 70%),
    linear-gradient(to top, #0b0d10 0%, rgba(11, 13, 16, 0.94) 20%, rgba(11, 13, 16, 0.5) 40%, rgba(11, 13, 16, 0) 62%),
    linear-gradient(to bottom, rgba(11, 13, 16, 0.45) 0%, rgba(11, 13, 16, 0) 18%);
}
.sr-head { position: absolute; left: 11.8rem; top: 13rem; width: 160rem; height: 46rem; }
.sr-poster {
  position: absolute; left: 0; top: 0; width: 26rem; height: 39rem; overflow: hidden; border-radius: 0.8rem;
  background-color: #161a20; box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.6); display: none;
}
.sr-head.has-poster .sr-poster { display: block; }
.sr-poster img {
  width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
  opacity: 0; -webkit-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out;
}
.sr-poster img.on { opacity: 1; }
.sr-info { position: absolute; left: 0; top: 0; width: 104rem; }
.sr-head.has-poster .sr-info { left: 31.6rem; }
.sr-title {
  margin-top: 1.4rem;
  font-size: 6.4rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-align: left;
  max-height: 15.4rem; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sr-desc {
  margin-top: 1.6rem; width: 92rem; max-height: 10.2rem; overflow: hidden;
  font-size: 2.4rem; line-height: 3.4rem; color: #c4cad1; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.sr-desc.empty { display: none; }
.sr-info .sr-play { display: inline-block; width: auto; min-width: 30rem; margin-top: 3.2rem; padding: 0 5rem 0 8rem; }
.sr-info .sr-play.hidden { display: none; }
.sr-seasons { position: absolute; left: 11.8rem; top: 61.6rem; height: 5rem; white-space: nowrap; }
.sr-tab {
  display: inline-block; position: relative; margin-right: 5.6rem; padding-bottom: 1rem;
  font-size: 2.8rem; font-weight: 600; line-height: 3.4rem; color: #9aa3ad;
  -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
  -webkit-transition: -webkit-transform 150ms ease-out; transition: transform 150ms ease-out;
}
.sr-tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 0.4rem; border-radius: 0.2rem; background: #f5b301; display: none; }
.sr-tab.sel { color: #f2f2f2; }
.sr-tab.sel i { display: block; }
.sr-tab.focused { -webkit-transform: scale(1.08); transform: scale(1.08); }
.sr-episodes { position: absolute; top: 68.4rem; left: 9.6rem; right: 0; height: 31rem; overflow: hidden; }
#srTrack { top: 1.8rem; }
body.playing #series { visibility: hidden; }

/* ---------------------------------------------------------------- message (empty / error) */
#message {
  background: #0b0d10;
  background-image: radial-gradient(ellipse at 50% 38%, #18202a 0%, rgba(11, 13, 16, 0) 60%);
}
.msg { position: absolute; left: 20rem; right: 20rem; top: 26rem; text-align: center; }
.msg-icon { height: 8.8rem; color: #9aa3ad; opacity: 0.7; }
.msg-icon .icon { width: 8.8rem; height: 8.8rem; }
.msg-icon.hidden { display: none; }
.msg-title { margin-top: 3.6rem; font-size: 5.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.msg-text { margin: 2.4rem auto 0; max-width: 112rem; font-size: 3rem; line-height: 1.5; color: #9aa3ad; }
.msg-actions { margin-top: 5.6rem; }

/* ---------------------------------------------------------------- buttons and menus */
.btn {
  display: block; position: relative; width: 58rem; height: 7.6rem; margin-top: 1.6rem; padding: 0 3rem 0 8rem;
  border-radius: 0.8rem; background: rgba(242, 242, 242, 0.1); color: #f2f2f2;
  font-size: 2.8rem; font-weight: 600; line-height: 7.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-transition: -webkit-transform 150ms ease-out; transition: transform 150ms ease-out;
}
.btn .icon { position: absolute; left: 3rem; top: 2.4rem; width: 2.8rem; height: 2.8rem; }
.btn.focused { background: #f2f2f2; color: #0b0d10; -webkit-transform: scale(1.04); transform: scale(1.04); }
.btn-center { display: inline-block; width: auto; min-width: 34rem; padding: 0 5rem; text-align: center; margin-top: 0; }

/* ---------------------------------------------------------------- player */
#player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: #000; display: none; opacity: 0;
  -webkit-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out; }
#player.on { display: block; }
#player.in { opacity: 1; }
body.playing #home, body.playing #clock { visibility: hidden; }
#video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; }
video::cue {
  font-family: "LG Smart UI", "Museo Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 4.2rem; line-height: 1.35; color: #ffffff; background-color: rgba(0, 0, 0, 0.62);
}
.player-poster {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #0b0d10; background-size: cover; background-position: 50% 30%;
  opacity: 0; -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out;
}
.player-poster:after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image:
    linear-gradient(to right, rgba(11, 13, 16, 0.96) 0%, rgba(11, 13, 16, 0.78) 34%, rgba(11, 13, 16, 0.25) 75%),
    linear-gradient(to top, rgba(11, 13, 16, 0.9) 0%, rgba(11, 13, 16, 0) 55%);
}
.player-poster.on { opacity: 1; }

.spinner {
  position: absolute; top: 50%; left: 50%; width: 8rem; height: 8rem; margin: -4rem 0 0 -4rem;
  border-radius: 50%; border: 0.5rem solid rgba(242, 242, 242, 0.16); border-top-color: #f2f2f2;
  opacity: 0; -webkit-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out;
}
.spinner.on { opacity: 1; -webkit-animation: hc-spin 900ms linear infinite; animation: hc-spin 900ms linear infinite; }
@-webkit-keyframes hc-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes hc-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;
  -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; }
#overlay.on { opacity: 1; }
.ov-shade-top { position: absolute; top: 0; left: 0; width: 100%; height: 22rem;
  background-image: linear-gradient(to bottom, rgba(11, 13, 16, 0.72) 0%, rgba(11, 13, 16, 0) 100%); }
.ov-shade-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 40rem;
  background-image: linear-gradient(to top, rgba(11, 13, 16, 0.94) 0%, rgba(11, 13, 16, 0.7) 42%, rgba(11, 13, 16, 0) 100%); }
/* Subtitles rise above the controls while the overlay shows (the cue box lives inside the video). */
video::-webkit-media-text-track-container {
  -webkit-transition: -webkit-transform 250ms ease-out; transition: transform 250ms ease-out;
}
#player.ov-on video::-webkit-media-text-track-container {
  -webkit-transform: translate3d(0, -32rem, 0); transform: translate3d(0, -32rem, 0);
}
.ov-top { position: absolute; top: 5.4rem; left: 9.6rem; right: 9.6rem; height: 3.4rem; font-size: 2.4rem; line-height: 3.4rem; color: #9aa3ad; }
.ov-top .icon { width: 3rem; height: 3rem; margin: -0.3rem 0.6rem 0 -0.6rem; }
.ov-clock { position: absolute; right: 0; top: 0; font-size: 3rem; font-weight: 500; color: #f2f2f2;
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }
.ov-bottom { position: absolute; left: 9.6rem; right: 9.6rem; bottom: 5.4rem; }
.ov-title { margin: 1rem 0 3.6rem; font-size: 5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ov-bar { position: relative; width: 172.8rem; height: 0.6rem; border-radius: 0.3rem; background: rgba(242, 242, 242, 0.16); }
.ov-buffer, .ov-played { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.3rem;
  -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0); transform: scaleX(0); }
/* Pointer seeking: a tall invisible hit zone over the slim bar; the bar thickens while the pointer is on it. */
.ov-bar.hover { height: 1rem; margin-top: -0.2rem; margin-bottom: -0.2rem; border-radius: 0.5rem; }
.ov-bar.hover .ov-buffer, .ov-bar.hover .ov-played { border-radius: 0.5rem; }
.ov-hit { position: absolute; left: 0; right: 0; top: -3rem; height: 6.6rem; cursor: pointer; }
.ov-buffer { background: rgba(242, 242, 242, 0.38); }
.ov-played { background: #f5b301; }
.ov-target { position: absolute; left: -0.2rem; top: -1.4rem; width: 0.4rem; height: 3.4rem; border-radius: 0.2rem; background: #f2f2f2;
  opacity: 0; -webkit-transition: opacity 150ms ease-out; transition: opacity 150ms ease-out; }
.ov-target.on { opacity: 1; }
.ov-target-label { position: absolute; bottom: 4.4rem; left: -20rem; width: 40.4rem; text-align: center; white-space: nowrap;
  font-size: 3.2rem; font-weight: 600; line-height: 1; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }
.ov-target-label em { font-style: normal; font-size: 2.4rem; font-weight: 500; color: #f5b301; margin-left: 1.2rem; }
.ov-row { position: relative; height: 4rem; margin-top: 2.6rem; font-size: 2.6rem; line-height: 4rem; white-space: nowrap;
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }
.ov-state { display: inline-block; vertical-align: top; width: 3.2rem; height: 4rem; margin-right: 1.8rem; }
.ov-state .icon { width: 3.2rem; height: 3.2rem; margin-top: 0.4rem; vertical-align: top; }
.ov-state .i-play, #player.paused .ov-state .i-pause { display: none; }
#player.paused .ov-state .i-play { display: inline-block; }
.ov-total { color: #9aa3ad; }
.ov-ends { margin-left: 3.6rem; color: #9aa3ad; }
.ov-subs { position: absolute; right: 0; top: 0; color: #9aa3ad; }
.ov-subs .icon { width: 3.2rem; height: 3.2rem; margin: -0.3rem 1rem 0 0; }
.ov-subs.active { color: #f2f2f2; }
.ov-hints { margin-top: 2.4rem; font-size: 2rem; color: #9aa3ad; opacity: 0.8; white-space: nowrap; }
.ov-hints i, .un-hint i { display: inline-block; width: 4rem; }

.dialog { position: absolute; left: 11.8rem; bottom: 12rem; width: 110rem; display: none; opacity: 0;
  -webkit-transform: translate3d(0, 2rem, 0); transform: translate3d(0, 2rem, 0);
  -webkit-transition: opacity 250ms ease-out, -webkit-transform 250ms ease-out; transition: opacity 250ms ease-out, transform 250ms ease-out; }
.dialog.on { display: block; }
.dialog.in { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.dlg-title { margin-top: 1.4rem; font-size: 6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-align: left;
  max-height: 13.2rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dlg-meta, .dlg-text { margin-top: 1.6rem; font-size: 2.6rem; line-height: 1.45; color: #9aa3ad; }
.dlg-text { max-width: 96rem; max-height: 7.6rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; }
.dlg-text:empty { display: none; }
.dialog .menu { margin-top: 4.4rem; }

.panel { position: absolute; right: 9.6rem; bottom: 25rem; width: 50rem; padding: 2.4rem 1.6rem 1.6rem; border-radius: 1.2rem;
  background: rgba(21, 25, 31, 0.96); display: none; opacity: 0;
  -webkit-transform: translate3d(0, 1.6rem, 0); transform: translate3d(0, 1.6rem, 0);
  -webkit-transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out; transition: opacity 200ms ease-out, transform 200ms ease-out; }
.panel.on { display: block; }
.panel.in { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.panel-title { padding: 0 1.4rem 1.2rem; font-size: 2.2rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa3ad; }
.panel-title .icon { width: 2.8rem; height: 2.8rem; margin: -0.4rem 1.2rem 0 0; }
.opt { width: 100%; height: 6.4rem; margin-top: 0.4rem; padding: 0 2rem 0 6.4rem; font-size: 2.6rem; font-weight: 500; line-height: 6.4rem; background: transparent; }
.opt .icon { left: 2rem; top: 1.8rem; width: 2.8rem; height: 2.8rem; color: #f5b301; display: none; }
.opt.checked .icon { display: block; }
.opt.focused { -webkit-transform: none; transform: none; }
.opt.focused .icon { color: #0b0d10; }
.opt-label { display: block; overflow: hidden; text-overflow: ellipsis; text-align: left; }

.upnext { position: absolute; right: 9.6rem; bottom: 25rem; width: 86rem; padding: 2rem; border-radius: 1.2rem;
  background: rgba(21, 25, 31, 0.96); display: none; opacity: 0;
  -webkit-transform: translate3d(0, 1.6rem, 0); transform: translate3d(0, 1.6rem, 0);
  -webkit-transition: opacity 250ms ease-out, -webkit-transform 250ms ease-out; transition: opacity 250ms ease-out, transform 250ms ease-out; }
.upnext.on { display: block; }
.upnext.in { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.un-thumb { position: absolute; left: 2rem; top: 2rem; width: 32rem; height: 18rem; border-radius: 0.8rem; overflow: hidden; background: #1a1f26; }
.un-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.8rem; }
.un-info { margin-left: 35.4rem; height: 18rem; position: relative; }
.un-title { margin-top: 1rem; font-size: 3rem; font-weight: 700; line-height: 1.2; text-align: left;
  max-height: 7.2rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.un-count { margin-top: 1rem; font-size: 2.4rem; color: #9aa3ad; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }
.un-bar { position: absolute; left: 0; right: 0; bottom: 4rem; height: 0.4rem; border-radius: 0.2rem; background: rgba(242, 242, 242, 0.16); overflow: hidden; }
.un-fill { width: 100%; height: 100%; background: #f5b301; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.un-hint { position: absolute; left: 0; bottom: 0; font-size: 2rem; color: #9aa3ad; white-space: nowrap; }

#toast { position: absolute; top: 5.4rem; left: 50%; width: 80rem; margin-left: -40rem; z-index: 20; text-align: center;
  font-size: 2.6rem; color: #f2f2f2; opacity: 0; -webkit-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out; }
#toast span { display: inline-block; padding: 1.4rem 3.2rem; border-radius: 0.8rem; background: rgba(21, 25, 31, 0.96); }
#toast.on { opacity: 1; }