* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:#0b0c10;
  color:#f5f6f8;
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%
}
button,input {
  font:inherit
}
.container {
  width:calc(100% - 40px);
  max-width:1320px;
  margin-left:auto;
  margin-right:auto
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:#0b0c10ed;
  border-bottom:1px solid #282a32;
  backdrop-filter:blur(15px)
}
.header-inner {
  height:72px;
  display:flex;
  align-items:center;
  gap:26px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap
}
.brand-mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,#ffd052,#ff7900);
  color:#171009
}
.brand span:last-child {
  display:flex;
  flex-direction:column;
  line-height:1.1
}
.brand b {
  font-size:19px
}
.brand small {
  font-size:11px;
  letter-spacing:2px;
  color:#999eaa;
  margin-top:5px
}
.desktop-nav {
  display:flex;
  margin-left:auto;
  gap:2px
}
.desktop-nav a {
  display:flex;
  align-items:center;
  gap:4px;
  padding:9px 7px;
  color:#c1c4cc;
  border-radius:9px;
  font-size:14px
}
.desktop-nav a:hover,.desktop-nav a.active {
  color:#ffb42d;
  background:#22242b
}
.desktop-nav i {
  font-style:normal
}
.header-actions {
  display:flex;
  gap:7px
}
.header-actions button {
  width:40px;
  height:40px;
  border-radius:11px;
  border:1px solid #33363f;
  background:#191b21;
  color:#fff;
  cursor:pointer
}
.menu-toggle {
  display:none
}
.mobile-nav,.search-panel {
  display:none;
  border-top:1px solid #292b34;
  background:#111218
}
.mobile-nav.open,.search-panel.open {
  display:block
}
.mobile-nav .container {
  padding-top:12px;
  padding-bottom:12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}
.mobile-nav a {
  background:#1c1e25;
  border-radius:9px;
  padding:9px
}
.search-form,.hero-search,.search-large,.subscribe {
  display:flex;
  gap:10px
}
.search-form {
  padding-top:15px;
  padding-bottom:15px
}
.search-form input,.hero-search input,.search-large input,.subscribe input {
  min-width:0;
  flex:1;
  border:1px solid #343741;
  background:#15171d;
  color:#fff;
  padding:13px 16px;
  border-radius:11px;
  outline:0
}
.search-form input:focus,.hero-search input:focus,.search-large input:focus {
  border-color:#ffa41e
}
.search-form button,.hero-search button,.search-large button,.subscribe button,.button {
  border:0;
  border-radius:11px;
  background:linear-gradient(135deg,#ffbd38,#ff7900);
  color:#171009;
  font-weight:800;
  padding:12px 20px;
  cursor:pointer
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.hero {
  padding:55px 0 25px;
  background:radial-gradient(circle at 22% 0,#47301a,transparent 34%),radial-gradient(circle at 88% 30%,#20245b,transparent 31%)
}
.hero-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px;
  align-items:center
}
.eyebrow,.section-head span {
  color:#ffb633;
  font-size:14px;
  font-weight:700
}
.hero h1 {
  font-size:clamp(56px,7vw,96px);
  line-height:1;
  margin:20px 0;
  letter-spacing:-5px
}
.hero h1 a {
  background:linear-gradient(120deg,#fff,#ffcf62);
  background-clip:text;
  color:transparent
}
.hero-copy>p {
  font-size:19px;
  color:#c7cad2
}
.hero-search {
  margin-top:28px;
  max-width:640px
}
.hot-words {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  color:#7f838f;
  font-size:13px;
  margin-top:14px
}
.hot-words a {
  color:#c0c3ca
}
.hero-feature {
  position:relative;
  min-height:470px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid #424550
}
.hero-feature>img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover
}
.hero-feature:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#07080c,transparent 75%)
}
.hero-feature>div {
  position:absolute;
  z-index:1;
  left:28px;
  right:28px;
  bottom:25px
}
.hero-feature span {
  color:#ffc24b;
  font-weight:800
}
.hero-feature h2 {
  font-size:32px;
  margin:4px 0
}
.hero-feature p {
  color:#d1d3d9
}
.breadcrumb {
  padding-top:17px;
  padding-bottom:17px;
  color:#858a95;
  font-size:13px
}
.breadcrumb a:hover {
  color:#ffb42d
}
.quick {
  padding:12px 0 35px
}
.channel-grid {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:10px
}
.channel-grid>a {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #292c34;
  background:#15171d;
  border-radius:14px;
  padding:13px 11px
}
.channel-grid i {
  font-style:normal;
  color:#ffad26;
  font-size:22px
}
.channel-grid span {
  display:flex;
  min-width:0;
  flex-direction:column
}
.channel-grid b {
  font-size:14px;
  white-space:nowrap
}
.channel-grid small {
  font-size:11px;
  color:#777c87
}
.section {
  padding:52px 0
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:15px;
  margin-bottom:23px
}
.section-head h2 {
  font-size:30px;
  line-height:1.2;
  margin:7px 0 0
}
.more {
  font-size:14px;
  color:#b6bac3
}
.cards,.poster-wall {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.drama-card {
  min-width:0;
  background:#15171d;
  border:1px solid #292b34;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column
}
.poster {
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#22242b
}
.poster img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.3s
}
.drama-card:hover img {
  transform:scale(1.04)
}
.score,.episode {
  position:absolute;
  top:10px;
  border-radius:7px;
  background:#090a0ddd;
  padding:4px 7px;
  font-size:12px
}
.score {
  left:10px;
  color:#ffd25f
}
.episode {
  right:10px
}
.play-hover {
  position:absolute;
  inset:0;
  margin:auto;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#ff9b1be8;
  color:#111;
  display:grid;
  place-items:center;
  opacity:0;
  transition:.2s
}
.drama-card:hover .play-hover {
  opacity:1
}
.card-copy {
  padding:15px;
  display:flex;
  flex:1;
  flex-direction:column
}
.tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.tags a,.tags span,.tag-cloud a {
  padding:3px 7px;
  border-radius:6px;
  background:#292c34;
  font-size:12px
}
.tags a {
  color:#ffb12d
}
.card-copy h3 {
  font-size:19px;
  line-height:1.35;
  min-height:52px;
  margin:10px 0 5px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.card-copy p {
  color:#969aa5;
  font-size:14px;
  min-height:46px;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.meta {
  display:flex;
  justify-content:space-between;
  margin-top:auto;
  padding-top:14px;
  color:#777c88;
  font-size:12px
}
.rank-section,.calendar,.related {
  background:#101117
}
.rank-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px
}
.rank-lead {
  position:relative;
  min-height:400px;
  border-radius:23px;
  overflow:hidden
}
.rank-lead img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover
}
.rank-lead:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#08090c,transparent)
}
.rank-lead div {
  position:absolute;
  z-index:1;
  left:24px;
  right:24px;
  bottom:20px
}
.rank-lead span {
  color:#ffc447
}
.rank-lead h3 {
  font-size:30px;
  margin:4px 0
}
.rank-grid ol {
  list-style:none;
  margin:0;
  padding:0
}
.rank-grid li {
  display:grid;
  grid-template-columns:45px 1fr auto;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #292b33;
  padding:13px 0
}
.rank-grid strong {
  font-size:23px;
  color:#555967
}
.rank-grid li a {
  display:flex;
  min-width:0;
  flex-direction:column
}
.rank-grid small {
  color:#777c88
}
.rank-grid em {
  font-size:12px;
  font-style:normal;
  color:#ffaf27
}
.timeline {
  border-left:2px solid #343640;
  margin-left:68px
}
.timeline a {
  display:grid;
  grid-template-columns:70px 88px 1fr auto;
  align-items:center;
  gap:16px;
  margin-left:-71px;
  padding:10px 0
}
.timeline time {
  color:#ffb52e;
  font-weight:800
}
.timeline img {
  width:88px;
  height:60px;
  object-fit:cover;
  border-radius:9px
}
.timeline a>span {
  display:flex;
  min-width:0;
  flex-direction:column
}
.timeline small {
  color:#858995;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.timeline em {
  font-size:12px;
  font-style:normal;
  background:#20222a;
  padding:6px 9px;
  border-radius:8px
}
.genre .container {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.genre-panel {
  padding:25px;
  border:1px solid #4e3528;
  border-radius:24px;
  background:linear-gradient(145deg,#211612,#111217)
}
.genre-panel.gold {
  background:linear-gradient(145deg,#211d10,#111217)
}
.twocards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.compact .card-copy p {
  display:none
}
.suspense {
  background:radial-gradient(circle at 0 50%,#291c54,transparent 38%),#101117
}
.suspense-grid {
  display:grid;
  grid-template-columns:1fr 1fr .7fr;
  gap:16px
}
.suspense-grid>a {
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;
  gap:17px;
  min-height:220px;
  border:1px solid #353848;
  border-radius:18px;
  padding:13px;
  background:#181a23
}
.suspense-grid img {
  width:150px;
  height:190px;
  object-fit:cover;
  border-radius:11px
}
.suspense-grid h3 {
  font-size:23px;
  margin:7px 0
}
.suspense-grid p {
  color:#999daa;
  font-size:14px
}
.suspense-grid span {
  color:#b4a2ff;
  font-size:12px
}
.note {
  padding:25px;
  border-radius:18px;
  background:#765bfa;
  display:flex;
  justify-content:end;
  flex-direction:column
}
.note b {
  font-size:22px
}
.portrait .poster {
  aspect-ratio:3/4
}
.ai-story {
  background:linear-gradient(130deg,#102541,#171022)
}
.ai-grid {
  display:grid;
  grid-template-columns:1fr .9fr .7fr;
  gap:25px
}
.ai-grid>div:first-child {
  align-self:center
}
.ai-grid h2 {
  font-size:36px;
  line-height:1.25
}
.ai-grid p {
  color:#b9c1d0
}
.ai-feature {
  position:relative;
  min-height:380px;
  border-radius:22px;
  overflow:hidden
}
.ai-feature img {
  width:100%;
  height:100%;
  object-fit:cover
}
.ai-feature:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#111620,transparent)
}
.ai-feature div {
  position:absolute;
  z-index:1;
  left:20px;
  bottom:20px
}
.ai-feature b {
  color:#66bfff
}
.ai-feature h3 {
  font-size:28px;
  margin:3px 0
}
.ai-points {
  display:flex;
  flex-direction:column;
  gap:12px
}
.ai-points div {
  flex:1;
  background:#ffffff09;
  border:1px solid #ffffff1c;
  border-radius:15px;
  padding:17px;
  display:grid;
  grid-template-columns:30px 1fr
}
.ai-points small {
  grid-column:2;
  color:#adb7c6
}
.comic {
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:17px
}
.comic>div {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid #2a4941;
  background:#182220;
  border-radius:20px;
  overflow:hidden
}
.comic img {
  width:100%;
  height:100%;
  min-height:270px;
  object-fit:cover
}
.comic>div>span {
  padding:23px;
  align-self:center
}
.comic h3 {
  font-size:27px;
  margin:0
}
.comic p {
  color:#9eb3ae
}
.comic a {
  color:#49dbb5
}
.comic blockquote,.comic aside {
  margin:0;
  border-radius:20px;
  padding:24px;
  background:#ffb528;
  color:#18130a;
  font-size:23px;
  font-weight:900;
  display:flex;
  justify-content:center;
  flex-direction:column
}
.comic blockquote small {
  font-size:12px;
  margin-top:15px
}
.comic aside {
  background:#1c1e25;
  color:white;
  font-size:16px;
  gap:8px
}
.comic aside span {
  padding:6px 9px;
  background:#2a2d36;
  border-radius:8px;
  color:#aeb2bd;
  font-size:13px;
  font-weight:500
}
.week {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin-bottom:15px
}
.week button {
  border:1px solid #2b2e36;
  background:#191b22;
  color:#aaaeb8;
  border-radius:11px;
  padding:9px
}
.week button.active {
  background:#ff9c18;
  color:#171009;
  border-color:#ff9c18;
  font-weight:800
}
.week small {
  display:block
}
.schedule {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.schedule a {
  display:grid;
  grid-template-columns:55px 1fr auto;
  gap:11px;
  align-items:center;
  border:1px solid #2b2e35;
  border-radius:12px;
  padding:12px;
  background:#15171d
}
.schedule time {
  color:#ffb52e;
  font-weight:800
}
.schedule span {
  display:flex;
  flex-direction:column
}
.schedule small {
  color:#777c88
}
.schedule em {
  font-size:12px;
  font-style:normal;
  color:#9da1ab
}
.moods {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
.moods a {
  min-height:205px;
  border-radius:20px;
  padding:21px;
  display:flex;
  justify-content:end;
  flex-direction:column;
  background:linear-gradient(145deg,#6f311f,#241511);
  border:1px solid #854129
}
.moods a:nth-child(2) {
  background:linear-gradient(145deg,#3c2675,#171324);
  border-color:#563b9b
}
.moods a:nth-child(3) {
  background:linear-gradient(145deg,#1f5b57,#101c1b);
  border-color:#32756f
}
.moods a:nth-child(4) {
  background:linear-gradient(145deg,#6b4c14,#251d10);
  border-color:#8e681e
}
.moods b {
  font-size:20px;
  margin:4px 0
}
.moods em {
  font-size:12px;
  font-style:normal
}
.newsletter {
  padding-top:25px
}
.newsletter>.container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  background:#f2f0ea;
  color:#171717;
  border-radius:23px;
  padding:27px 30px
}
.newsletter .container>div {
  display:flex;
  flex-direction:column
}
.newsletter .container>div b {
  font-size:20px
}
.newsletter .container>div span {
  color:#666
}
.subscribe {
  width:45%;
  max-width:470px
}
.subscribe input {
  background:white;
  color:#111;
  border-color:#ccc
}
footer {
  margin-top:65px;
  padding:50px 0 20px;
  border-top:1px solid #292b33;
  background:#090a0d
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr 1fr;
  gap:38px
}
.footer-grid>div {
  display:flex;
  align-items:flex-start;
  flex-direction:column
}
.footer-grid h2 {
  font-size:15px
}
.footer-grid p,.footer-grid>div>a:not(.brand) {
  font-size:14px;
  color:#8d919c
}
.copyright {
  border-top:1px solid #24262d;
  margin-top:34px;
  padding-top:17px;
  color:#656974;
  font-size:12px
}
.category-hero {
  padding:56px 0;
  background:radial-gradient(circle at 10% 0,#563716,transparent 40%),#121318
}
.category-hero>.container {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px
}
.category-hero i {
  font-size:44px;
  font-style:normal;
  color:#ffae29
}
.category-hero h1 {
  font-size:52px;
  margin:7px 0
}
.category-hero p {
  max-width:680px;
  color:#c1c4cc
}
.stats {
  display:flex;
  gap:28px
}
.stats span {
  display:flex;
  flex-direction:column;
  color:#8d919c
}
.stats b {
  font-size:22px;
  color:white
}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:22px
}
.filters button {
  border:1px solid #30333c;
  background:#17191f;
  color:#b4b7c0;
  padding:8px 13px;
  border-radius:9px
}
.filters button.active {
  background:#ff9c18;
  color:#111;
  border-color:#ff9c18
}
.channel-guide .container {
  background:#15171d;
  border:1px solid #292c34;
  border-radius:20px;
  padding:28px
}
.channel-guide p {
  color:#a4a8b2
}
.channel-guide .container>div {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.channel-guide .container>div a {
  background:#252831;
  border-radius:8px;
  padding:5px 9px;
  font-size:13px
}
.detail-hero {
  padding:32px 0 55px;
  background:linear-gradient(120deg,#16171d,#0d0e12)
}
.detail-grid {
  display:grid;
  grid-template-columns:330px 1fr;
  gap:44px
}
.detail-poster {
  position:relative;
  aspect-ratio:3/4;
  border-radius:22px;
  overflow:hidden
}
.detail-poster img {
  width:100%;
  height:100%;
  object-fit:cover
}
.detail-poster span {
  position:absolute;
  right:12px;
  bottom:12px;
  background:#0b0c10dd;
  padding:6px 9px;
  border-radius:8px
}
.detail-info {
  align-self:center
}
.detail-info h1 {
  font-size:48px;
  margin:18px 0
}
.lead {
  font-size:18px;
  color:#bbbfc8
}
.detail-info dl {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:28px 0
}
.detail-info dl div {
  background:#1b1d24;
  border-radius:12px;
  padding:13px
}
.detail-info dt {
  color:#777c88;
  font-size:12px
}
.detail-info dd {
  margin:3px 0 0;
  font-weight:800
}
.content-layout {
  display:grid;
  grid-template-columns:1fr 310px;
  gap:30px
}
.content-layout article {
  min-width:0
}
.content-layout article p,.content-layout article li {
  color:#b4b8c1
}
.episodes {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:8px
}
.episodes button {
  border:1px solid #30333d;
  background:#191b21;
  color:#ddd;
  border-radius:9px;
  padding:9px
}
.episodes button.playing {
  background:#ff9b18;
  color:#17100a
}
.watch-note {
  border-left:4px solid #ff9b18;
  background:#191b21;
  padding:16px 18px;
  margin-top:25px
}
.prev-next {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:30px
}
.prev-next a {
  display:flex;
  flex-direction:column;
  border:1px solid #2e3038;
  padding:15px;
  border-radius:12px
}
.prev-next a:last-child {
  text-align:right
}
.prev-next span {
  font-size:12px;
  color:#777c88
}
.detail-side>div {
  background:#15171d;
  border:1px solid #292c34;
  border-radius:16px;
  padding:20px;
  margin-bottom:15px
}
.detail-side h2 {
  font-size:18px;
  margin-top:0
}
.detail-side p {
  color:#969aa4
}
.tag-cloud {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.plain-hero {
  text-align:center;
  padding:60px 0;
  background:radial-gradient(circle at 50% 0,#3d2a14,transparent 45%)
}
.plain-hero i {
  font-style:normal;
  font-size:44px;
  color:#ffad24
}
.plain-hero h1 {
  font-size:45px;
  margin:10px
}
.plain-hero p {
  color:#a6aab3
}
.prose {
  max-width:900px!important;
  background:#15171d;
  border:1px solid #2b2e36;
  border-radius:20px;
  padding:40px
}
.prose p,.prose li {
  color:#b4b8c1
}
.contact-card {
  display:flex;
  flex-direction:column;
  background:#23252c;
  border-radius:14px;
  padding:20px
}
.contact-card a {
  color:#ffae26;
  font-size:20px
}
.search-page {
  padding:55px 0
}
.search-page h1 {
  text-align:center;
  font-size:44px;
  margin-bottom:8px
}
.search-page>div>p {
  text-align:center;
  color:#969aa5
}
.search-large {
  max-width:760px;
  margin:25px auto 42px
}
.search-summary {
  margin-bottom:18px
}
.not-found {
  text-align:center;
  padding:85px 0
}
.not-found .container>span {
  display:block;
  font-size:130px;
  line-height:1;
  font-weight:900;
  color:#ff9f1a
}
.not-found h1 {
  font-size:36px
}
.not-found .container>div {
  display:flex;
  justify-content:center;
  gap:10px
}
.ghost {
  background:#20222a;
  color:white;
  border:1px solid #383b45
}
.back-top {
  position:fixed;
  right:20px;
  bottom:20px;
  width:42px;
  height:42px;
  border:1px solid #3b3e47;
  border-radius:11px;
  background:#1b1d24;
  color:white;
  opacity:0;
  pointer-events:none
}
.back-top.show {
  opacity:1;
  pointer-events:auto
}
@media(max-width:1100px) {
  .desktop-nav {
    display:none
  }
  .menu-toggle {
    display:inline-block
  }
  .channel-grid {
    grid-template-columns:repeat(4,1fr)
  }
  .cards,.poster-wall {
    grid-template-columns:repeat(3,1fr)
  }
  .ai-grid {
    grid-template-columns:1fr 1fr
  }
  .ai-points {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,1fr)
  }
  .comic {
    grid-template-columns:1.3fr 1fr
  }
  .comic aside {
    grid-column:1/-1
  }
  .footer-grid {
    grid-template-columns:1.2fr 1fr 1fr
  }
  .footer-grid>div:last-child {
    grid-column:1/-1
  }
}
@media(max-width:760px) {
  .header-inner {
    height:64px
  }
  .mobile-nav .container {
    grid-template-columns:1fr 1fr
  }
  .hero {
    padding-top:32px
  }
  .hero-grid,.rank-grid,.genre .container,.content-layout {
    grid-template-columns:1fr
  }
  .hero h1 {
    font-size:58px
  }
  .hero-copy>p {
    font-size:16px
  }
  .hero-feature {
    min-height:390px
  }
  .channel-grid {
    display:flex;
    overflow:auto
  }
  .channel-grid>a {
    min-width:145px
  }
  .section {
    padding:40px 0
  }
  .cards,.poster-wall {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .rank-lead {
    min-height:340px
  }
  .timeline {
    margin-left:0;
    border:0
  }
  .timeline a {
    margin:0;
    grid-template-columns:55px 68px 1fr
  }
  .timeline img {
    width:68px;
    height:50px
  }
  .timeline em {
    display:none
  }
  .suspense-grid {
    grid-template-columns:1fr
  }
  .ai-grid {
    grid-template-columns:1fr
  }
  .ai-points {
    grid-column:auto;
    grid-template-columns:1fr
  }
  .comic {
    grid-template-columns:1fr
  }
  .comic>div {
    grid-template-columns:1fr
  }
  .comic img {
    height:240px;
    min-height:0
  }
  .comic aside {
    grid-column:auto
  }
  .week {
    display:flex;
    overflow:auto
  }
  .week button {
    min-width:80px
  }
  .schedule {
    grid-template-columns:1fr
  }
  .moods {
    grid-template-columns:1fr 1fr
  }
  .newsletter>.container {
    align-items:stretch;
    flex-direction:column
  }
  .subscribe {
    width:100%;
    max-width:none
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }
  .footer-grid>div:first-child,.footer-grid>div:last-child {
    grid-column:1/-1
  }
  .category-hero>.container {
    align-items:start;
    flex-direction:column
  }
  .category-hero h1 {
    font-size:42px
  }
  .detail-grid {
    grid-template-columns:1fr
  }
  .detail-poster {
    max-width:340px;
    width:100%;
    margin:auto
  }
  .detail-info h1 {
    font-size:38px
  }
  .detail-info dl {
    grid-template-columns:1fr 1fr
  }
  .episodes {
    grid-template-columns:repeat(4,1fr)
  }
  .detail-side {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .detail-side>div {
    margin:0
  }
}
@media(max-width:480px) {
  .brand small {
    display:none
  }
  .hero-search,.search-large,.subscribe {
    flex-direction:column
  }
  .hero-feature {
    min-height:350px
  }
  .cards,.poster-wall,.twocards,.moods {
    grid-template-columns:1fr
  }
  .drama-card .poster {
    aspect-ratio:16/9
  }
  .portrait .poster {
    aspect-ratio:3/4
  }
  .footer-grid {
    grid-template-columns:1fr
  }
  .footer-grid>div {
    grid-column:auto!important
  }
  .stats {
    flex-direction:column
  }
  .detail-side {
    grid-template-columns:1fr
  }
  .prev-next {
    grid-template-columns:1fr
  }
  .prev-next a:last-child {
    text-align:left
  }
  .not-found .container>div {
    flex-direction:column
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}