* {margin:0;padding:0;box-sizing:border-box}
:root {
--ink:#0a0b0d;
--char:#121417;
--iron:#1c2026;
--steel:#2a3038;
--line:#333b45;
--ash:#8a95a3;
--pale:#c9d2dc;
--white:#eef2f6;
--orange:#ff5a1f;
--orange-soft:#ff8a4d;
--cyan:#1fc8e3;
--cyan-soft:#63e0f5;
--mono:"Bahnschrift","DIN Alternate","PingFang SC","Microsoft YaHei",sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(1200px 700px at 82% -10%,rgba(255,90,31,.10),transparent 60%),
radial-gradient(900px 600px at 8% 30%,rgba(31,200,227,.07),transparent 60%),
linear-gradient(180deg,#0a0b0d 0%,#0d0f12 45%,#0a0b0d 100%);
background-color:var(--ink);
color:var(--pale);
font-family:var(--mono);
font-size:14px;
line-height:1.45;
font-stretch:condensed;
letter-spacing:.01em;
min-height:100vh;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
a {color:var(--pale);text-decoration:none}
ul {list-style:none}
h1, h2, h3 {font-weight:800;letter-spacing:.14em;color:var(--white);line-height:1.2}
button, input, select {font-family:inherit;font-size:inherit;color:inherit}
.site-header {
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
padding:8px 16px;
background:linear-gradient(90deg,rgba(28,32,38,.96),rgba(18,20,23,.96));
border-bottom:1px solid var(--line);
position:sticky;top:0;z-index:40;
}
.header-brand {display:flex;align-items:center}
a[data-contract="site-name"] {
font-size:15px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
color:var(--white);
padding-left:14px;position:relative;
text-decoration:none;
}
a[data-contract="site-name"]::before {
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:6px;height:16px;background:linear-gradient(180deg,var(--orange),var(--cyan));
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
a[data-contract="site-name"]:hover {color:var(--orange-soft)}
.category-rail {
display:flex;flex-wrap:wrap;gap:6px;align-items:center;
flex:1 1 auto;
}
a.runtime-category {
white-space:nowrap;
font-size:11.5px;letter-spacing:.12em;
padding:4px 11px;
color:var(--ash);
background:rgba(42,48,56,.5);
border:1px solid var(--line);
clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
text-decoration:none;
transition:color .18s,background .18s,border-color .18s;
}
a.runtime-category:hover {
color:var(--ink);background:var(--orange);border-color:var(--orange);
text-decoration:none;
}
.page-main {
max-width:1480px;margin:0 auto;
padding:10px 16px 4px;
display:flex;flex-direction:column;gap:12px;
}
.movie-overview {
position:relative;
display:grid;
grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"poster headline headline"
"poster synopsis cast"
"poster status cast"
"poster details details";
gap:10px 20px;
align-items:start;
padding:16px 18px 18px;
background:
linear-gradient(135deg,rgba(26,29,34,.92),rgba(14,16,19,.92));
border:1px solid var(--line);
}
.movie-overview::before {
content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(90deg,rgba(255,90,31,.14),transparent 22%) left top/3px 100% no-repeat,
repeating-linear-gradient(115deg,rgba(255,255,255,.014) 0 2px,transparent 2px 9px);
opacity:.9;
}
.movie-overview::after {
content:"";position:absolute;right:0;top:0;width:220px;height:2px;
background:linear-gradient(90deg,transparent,var(--orange),var(--cyan));
}
.overview-poster-column {
grid-area:poster;
position:relative;
}
.overview-poster-column img {
width:100%;
height:auto;
aspect-ratio:9/16;
object-fit:cover;
border:1px solid var(--steel);
filter:contrast(1.08) saturate(.92) brightness(.92);
clip-path:polygon(0 0,100% 0,100% 94%,92% 100%,0 100%);
}
.overview-poster-column::after {
content:"狮王 / 星野 · 合体剪影";
position:absolute;left:0;bottom:8px;
font-size:10px;letter-spacing:.2em;color:var(--orange-soft);
background:rgba(10,11,13,.72);
padding:2px 7px;border-left:2px solid var(--orange);
}
.overview-headline {grid-area:headline;min-width:0}
.hero-title {
font-size:clamp(26px,4.4vw,48px);
letter-spacing:.2em;
line-height:1.05;
background:linear-gradient(96deg,var(--white) 30%,var(--orange-soft) 62%,var(--cyan-soft));
-webkit-background-clip:text;background-clip:text;color:transparent;
text-transform:uppercase;
}
.hero-tagline {
margin-top:8px;
font-size:13px;letter-spacing:.28em;color:var(--orange-soft);
text-transform:uppercase;
border-left:3px solid var(--orange);
padding-left:10px;
}
.hero-seo-copy {
margin-top:10px;
font-size:12.5px;line-height:1.72;color:var(--ash);
max-width:62ch;
}
.section-heading {
font-size:13px;letter-spacing:.24em;
color:var(--white);
display:flex;align-items:center;gap:9px;
padding-bottom:6px;margin-bottom:9px;
border-bottom:1px solid var(--line);
position:relative;
}
.section-heading::before {
content:"";width:9px;height:9px;flex:none;
background:linear-gradient(135deg,var(--orange),var(--cyan));
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.synopsis-section {grid-area:synopsis;min-width:0}
.synopsis-body {display:flex;flex-direction:column;gap:6px}
.synopsis-paragraph {
font-size:12.5px;line-height:1.68;color:var(--pale);
padding-left:9px;
border-left:1px solid var(--steel);
}
.synopsis-paragraph:first-child {border-left-color:var(--orange)}
.synopsis-paragraph:last-child {border-left-color:var(--cyan)}
.cast-section {grid-area:cast;min-width:0}
.cast-list {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:5px;
}
.cast-item {
display:flex;align-items:center;gap:7px;
padding:4px 6px;
background:rgba(42,48,56,.34);
border:1px solid rgba(51,59,69,.7);
min-width:0;
transition:background .18s,border-color .18s;
}
.cast-item:hover {background:rgba(255,90,31,.10);border-color:var(--orange)}
.cast-avatar {
flex:none;width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
font-size:9px;letter-spacing:.02em;color:var(--pale);
background:
repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
linear-gradient(140deg,#2c333c,#171a1e);
border:1px solid var(--steel);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
overflow:hidden;text-align:center;line-height:1.05;
}
.cast-info {display:flex;flex-direction:column;min-width:0}
.cast-name {
font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--white);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cast-role {
font-size:10px;letter-spacing:.04em;color:var(--ash);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.episode-status-section {grid-area:status;min-width:0}
.status-badges {display:flex;flex-wrap:wrap;gap:6px}
.status-badge {
font-size:11px;letter-spacing:.1em;
padding:4px 10px;
color:var(--cyan-soft);
background:rgba(31,200,227,.08);
border:1px solid rgba(31,200,227,.35);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
white-space:nowrap;
}
.status-badge:last-child {color:var(--orange-soft);background:rgba(255,90,31,.09);border-color:rgba(255,90,31,.4)}
.details-section {grid-area:details;min-width:0}
.details-table {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
border:1px solid var(--line);
}
.details-row {
display:flex;align-items:baseline;gap:6px;
padding:4px 8px;
border-bottom:1px solid rgba(51,59,69,.6);
border-right:1px solid rgba(51,59,69,.6);
min-width:0;
}
.details-row:nth-child(4n) {border-right:none}
.details-row:nth-last-child(-n/**/+4) {border-bottom:none}
.detail-key {
font-size:10.5px;letter-spacing:.12em;color:var(--ash);
flex:none;white-space:nowrap;
}
.detail-value {
font-size:12px;color:var(--white);
min-width:0;overflow-wrap:anywhere;
}
.player-section {
display:flex;flex-direction:column;gap:8px;
padding:14px 16px 16px;
background:linear-gradient(160deg,rgba(22,25,29,.94),rgba(12,14,17,.94));
border:1px solid var(--line);
position:relative;
}
.player-section::before {
content:"";position:absolute;left:0;top:0;width:3px;height:100%;
background:linear-gradient(180deg,var(--orange),var(--cyan));
}
.player-section-title {
font-size:13px;letter-spacing:.24em;color:var(--white);
}
.player-frame {
position:relative;
width:100%;
border:1px solid var(--steel);
background:#000;
}
.player-frame::after {
content:"";position:absolute;inset:0;pointer-events:none;
box-shadow:inset 0 0 60px rgba(0,0,0,.55);
}
.player-frame video {width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.player-frame.theater-mode {
background:#000;
box-shadow:0 0 0 1px var(--orange),0 0 44px rgba(255,90,31,.22);
}
.player-controls-bar {
display:flex;flex-wrap:wrap;align-items:center;gap:7px;
}
.ctl-btn {
font-size:11px;letter-spacing:.1em;
padding:5px 11px;
color:var(--pale);
background:rgba(42,48,56,.62);
border:1px solid var(--line);
clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
cursor:pointer;
transition:color .16s,background .16s,border-color .16s;
white-space:nowrap;
}
.ctl-btn:hover {color:var(--white);border-color:var(--orange);background:rgba(255,90,31,.16)}
.ctl-btn.is-active {color:var(--ink);background:var(--orange);border-color:var(--orange)}
.ctl-progress {
flex:1 1 180px;min-width:120px;height:4px;
-webkit-appearance:none;appearance:none;
background:linear-gradient(90deg,var(--orange),var(--cyan));
border:1px solid var(--line);
cursor:pointer;
}
.ctl-progress::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:10px;height:14px;background:var(--white);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
border:none;
}
.ctl-progress::-moz-range-thumb {
width:10px;height:14px;background:var(--white);border:none;border-radius:0;
}
.ctl-volume {
flex:0 1 90px;min-width:70px;height:4px;
-webkit-appearance:none;appearance:none;
background:var(--steel);
border:1px solid var(--line);
cursor:pointer;
}
.ctl-volume::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:9px;height:13px;background:var(--cyan);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.ctl-volume::-moz-range-thumb {width:9px;height:13px;background:var(--cyan);border:none;border-radius:0}
.ctl-speed {
font-size:11px;letter-spacing:.08em;
padding:4px 6px;
color:var(--pale);
background:rgba(42,48,56,.62);
border:1px solid var(--line);
cursor:pointer;
}
.ctl-speed:focus {outline:1px solid var(--cyan)}
body.lights-off {background:#000}
body.lights-off .page-main {filter:brightness(.55) contrast(1.05)}
.timeline-section {
margin-top:12px;
padding:14px 0 6px;
border-top:1px solid var(--line);
position:relative;
}
.timeline-section::before {
content:"";position:absolute;left:0;top:-1px;width:120px;height:1px;
background:linear-gradient(90deg,var(--orange),transparent);
}
.timeline-track {
display:flex;gap:0;
overflow-x:auto;
padding:6px 4px 14px;
scrollbar-width:thin;
scrollbar-color:var(--steel) transparent;
position:relative;
}
.timeline-track::-webkit-scrollbar {height:7px}
.timeline-track::-webkit-scrollbar-track {background:rgba(42,48,56,.4)}
.timeline-track::-webkit-scrollbar-thumb {background:var(--steel);border:1px solid var(--line)}
.timeline-groove {
flex:0 0 232px;
position:relative;
padding:14px 12px 10px;
margin-right:0;
background:linear-gradient(180deg,rgba(28,32,38,.55),rgba(14,16,19,.55));
border-left:1px solid var(--line);
}
.timeline-groove::before {
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--steel),transparent);
}
.timeline-groove:first-child {border-left-color:var(--orange)}
.timeline-groove:last-child {border-right:1px solid var(--line)}
.timeline-core {
display:block;
width:13px;height:14px;
margin-bottom:8px;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.timeline-core--orange {background:var(--orange);box-shadow:0 0 12px rgba(255,90,31,.75)}
.timeline-core--cyan {background:var(--cyan);box-shadow:0 0 12px rgba(31,200,227,.75)}
.timeline-label {
font-size:11.5px;line-height:1.55;color:var(--pale);
min-height:52px;
}
.timeline-timecode {
display:block;margin-top:7px;
font-size:10.5px;letter-spacing:.14em;color:var(--ash);
}
.episodes-section {
padding:14px 0 4px;
border-top:1px solid var(--line);
}
.episode-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.episode-card {
position:relative;
display:flex;flex-direction:column;gap:5px;
padding:9px 10px 10px;
background:linear-gradient(150deg,rgba(28,32,38,.7),rgba(13,15,18,.7));
border:1px solid var(--line);
clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
transition:border-color .18s,background .18s,transform .18s;
}
.episode-card::before {
content:"";position:absolute;left:0;top:0;width:3px;height:100%;
background:var(--steel);
transition:background .18s;
}
.episode-card:hover {transform:translateY(-2px)}
.episode-card--core-orange:hover {
border-color:var(--orange);
background:linear-gradient(150deg,rgba(255,90,31,.14),rgba(13,15,18,.8));
box-shadow:0 0 18px rgba(255,90,31,.18);
}
.episode-card--core-orange::before {background:var(--orange)}
.episode-card--core-cyan:hover {
border-color:var(--cyan);
background:linear-gradient(150deg,rgba(31,200,227,.14),rgba(13,15,18,.8));
box-shadow:0 0 18px rgba(31,200,227,.18);
}
.episode-card--core-cyan::before {background:var(--cyan)}
.episode-number {
font-size:10.5px;letter-spacing:.18em;color:var(--orange-soft);
}
.episode-card--core-cyan .episode-number {color:var(--cyan-soft)}
.episode-title {
font-size:13.5px;letter-spacing:.1em;color:var(--white);
}
.episode-summary {
font-size:11.5px;line-height:1.6;color:var(--ash);
flex:1 1 auto;
}
.episode-duration {
font-size:10px;letter-spacing:.14em;color:var(--steel);
border-top:1px solid rgba(51,59,69,.7);
padding-top:5px;
}
.episode-card:hover .episode-duration {color:var(--pale)}
.comments-section {
padding:14px 0 4px;
border-top:1px solid var(--line);
}
.comments-columns {
columns:2;
column-gap:8px;
}
.comment-card {
break-inside:avoid;
display:flex;flex-direction:column;gap:3px;
margin-bottom:8px;
padding:8px 10px 9px;
background:rgba(28,32,38,.5);
border:1px solid var(--line);
border-left:2px solid var(--steel);
clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
transition:border-color .18s,background .18s;
}
.comment-card:hover {border-left-color:var(--orange);background:rgba(255,90,31,.07)}
.comment-nickname {
font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--cyan-soft);
align-self:flex-start;
}
.comment-text {
font-size:11.5px;line-height:1.55;color:var(--pale);
}
.recommend-region {
padding:14px 0 4px;
border-top:1px solid var(--line);
}
.recommend-heading {
font-size:13px;letter-spacing:.22em;color:var(--white);
display:flex;align-items:center;gap:9px;
padding-bottom:6px;margin-bottom:9px;
border-bottom:1px solid var(--line);
}
.recommend-heading::before {
content:"";width:9px;height:9px;flex:none;
background:linear-gradient(135deg,var(--cyan),var(--orange));
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.recommend-grid {display:grid;gap:8px}
.recommend-grid--four {grid-template-columns:repeat(4,minmax(0,1fr))}
.recommend-grid--five {grid-template-columns:repeat(5,minmax(0,1fr))}
.recommend-grid--three {grid-template-columns:repeat(3,minmax(0,1fr))}
a.recommend-card {
position:relative;
display:flex;flex-direction:column;gap:5px;
padding:8px 9px 10px;
background:linear-gradient(160deg,rgba(28,32,38,.72),rgba(13,15,18,.72));
border:1px solid var(--line);
clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
text-decoration:none;
transition:border-color .18s,background .18s,transform .18s;
}
a.recommend-card:hover {
border-color:var(--orange);
background:linear-gradient(160deg,rgba(255,90,31,.13),rgba(13,15,18,.8));
transform:translateY(-2px);
}
a.recommend-card:hover .recommend-name {color:var(--orange-soft)}
.recommend-badge {
position:absolute;top:0;right:0;
font-size:10px;font-weight:800;letter-spacing:.1em;
padding:2px 7px;
color:var(--ink);
background:linear-gradient(135deg,var(--orange),var(--cyan));
clip-path:polygon(0 0,100% 0,100% 100%,7px 100%);
z-index:2;
}
.recommend-card img.recommend-pic, [data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16/10;
height:auto;
object-fit:cover;
background:#000;
border:1px solid var(--steel);
filter:contrast(1.06) saturate(.94) brightness(.9);
}
.recommend-name {
font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--white);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recommend-blurb {
font-size:10.5px;line-height:1.5;color:var(--ash);
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
overflow:hidden;
}
.recommend-region {position:relative}
.site-footer {
margin-top:16px;
padding:14px 16px 20px;
background:linear-gradient(180deg,rgba(18,20,23,.6),rgba(10,11,13,1));
border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:10px;
}
.footer-disclaimer {
font-size:11px;line-height:1.65;color:var(--steel);
max-width:96ch;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:16px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:11.5px;letter-spacing:.16em;color:var(--pale);
text-decoration:none;
border-bottom:1px solid transparent;
padding-bottom:2px;
transition:color .16s,border-color .16s;
}
a[data-contract="footer-home"]:hover {color:var(--orange-soft);border-bottom-color:var(--orange)}
a[data-contract="footer-sitemap"]:hover {color:var(--cyan-soft);border-bottom-color:var(--cyan)}
.friend-links-nav {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.friend-links-label {
font-size:11px;letter-spacing:.18em;color:var(--ash);
padding-right:8px;margin-right:2px;
border-right:1px solid var(--line);
}
a.runtime-friend-link {
font-size:11px;letter-spacing:.06em;
color:var(--ash);
padding:3px 9px;
background:rgba(42,48,56,.42);
border:1px solid rgba(51,59,69,.75);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
text-decoration:none;
white-space:nowrap;
transition:color .16s,background .16s,border-color .16s;
}
a.runtime-friend-link:hover {color:var(--white);background:rgba(31,200,227,.16);border-color:var(--cyan)}
.play.is-active, .click.is-active, .input.is-active, .change.is-active, .speed.is-active, .volume.is-active, .progress.is-active, .mute.is-active, .pip.is-active, .fullscreen.is-active, .theater.is-active, .light.is-active, .ctl-btn.is-active {color:var(--ink);background:var(--orange);border-color:var(--orange)}
.data-player-action {cursor:pointer}
.player {position:relative}
.theater-mode {background:#000}
@media (max-width:1180px){.movie-overview {
grid-template-columns:minmax(0,180px) minmax(0,1fr);
grid-template-areas:
"poster headline"
"poster synopsis"
"cast cast"
"status status"
"details details";
}
.cast-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.episode-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-grid--five {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-grid--four {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.movie-overview {
grid-template-columns:minmax(0,150px) minmax(0,1fr);
grid-template-areas:
"poster headline"
"poster synopsis"
"cast cast"
"status status"
"details details";
gap:10px 14px;
padding:14px 14px 16px;
}
.details-table {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-row:nth-child(4n) {border-right:1px solid rgba(51,59,69,.6)}
.details-row:nth-child(2n) {border-right:none}
.details-row:nth-last-child(-n/**/+4) {border-bottom:1px solid rgba(51,59,69,.6)}
.details-row:nth-last-child(-n/**/+2) {border-bottom:none}
.cast-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.comments-columns {columns:1}
.recommend-grid--five {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid--four {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-grid--three {grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-title {letter-spacing:.14em}
.hero-tagline {letter-spacing:.2em;font-size:12px}}
@media (max-width:600px){.page-main {padding:8px 10px 4px;gap:10px}
.site-header {gap:10px;padding:8px 10px}
a[data-contract="site-name"] {font-size:13.5px;letter-spacing:.16em}
.movie-overview {
grid-template-columns:1fr;
grid-template-areas:
"headline"
"poster"
"synopsis"
"cast"
"status"
"details";
padding:12px 12px 14px;
}
.overview-poster-column {max-width:200px}
.overview-headline {order:-1}
.hero-title {font-size:clamp(22px,8vw,32px)}
.hero-seo-copy {font-size:12px}
.cast-list {grid-template-columns:1fr}
.episode-grid {grid-template-columns:1fr}
.recommend-grid--five, .recommend-grid--four, .recommend-grid--three {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-table {grid-template-columns:1fr}
.details-row {border-right:none!important;border-bottom:1px solid rgba(51,59,69,.6)!important}
.details-row:last-child {border-bottom:none!important}
.player-controls-bar {gap:6px}
.ctl-btn {font-size:10.5px;padding:5px 9px}
.timeline-groove {flex:0 0 200px}
.friend-links-label {border-right:none;padding-right:0}}
@media (max-width:400px){.recommend-grid--five, .recommend-grid--four, .recommend-grid--three {grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){* {transition:none!important;animation:none!important}}

footer{text-align:center!important}
footer *{justify-content:center!important}
footer :is(div,nav,ul,ol,p,section,address){margin-left:auto!important;margin-right:auto!important}