/* TieTie cinema palette shared by the catalog, playback, studio and console. */
:root, .studio-body {
  --bg: #191719;
  --surface: #242124;
  --surface2: #302b2d;
  --panel: var(--surface);
  --panel2: var(--surface2);
  --line: #494144;
  --text: #fff3e7;
  --muted: #cbc1bf;
  --dim: #b4a8a6;
  --accent: #ff947d;
  --accent2: #ffc09d;
  --grad: linear-gradient(110deg, #ff947d, #ffc19f);
  --gold: #ffcf91;
  color-scheme: dark;
}
html, body, .studio-body { background: var(--bg); }
.brand b, .dhead .brand b { background: none; color: var(--text); letter-spacing: .045em; }
.brand-logo, .dhead .brand-logo { border-radius: 9px; }
.btn.primary, .btn.p, .chip.on, .seg button.on, .ep.cur, .badge:not(.dark), .dots .on {
  background: var(--grad); color: #35251e;
}
.chip, .btn, .seg { border-radius: 12px; }
.chip.on, .btn.primary, .btn.p { border-color: transparent; }
.dhead, .tabbar, .navbar, .topbar, .studio-side, .studio-notice, .mtop { background: #211e20f5 !important; border-color: var(--line) !important; }
.dhead .dnav { background: transparent; border-color: transparent; }
.dhead .dnav a, .growth-mobile-nav a { color: var(--muted); }
.dhead .dnav a.on, .dhead .dnav a:hover, .side .on { color: var(--text); background: var(--surface2); }
.dhead .dnav a.on, .tabbar a.on { color: var(--accent); }
.language-picker { background: var(--surface); border-color: var(--line); }
.tt-masthead { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:1400px; margin:0 auto; padding:30px 32px 20px; }
.tt-kicker { color:var(--accent); font:700 10px/1.2 ui-monospace, monospace; letter-spacing:.22em; }
.tt-masthead h1 { color:var(--text); font-size:clamp(25px,3vw,43px); line-height:1.25; margin:7px 0 0; letter-spacing:.035em; }
.tt-browse { color:var(--text); font-size:14px; font-weight:650; border-bottom:1px solid var(--accent); padding:5px 0; white-space:nowrap; }
.tt-browse span { margin-left:5px; color:var(--accent); }
.tt-home .banner { isolation:isolate; border:1px solid var(--line); border-radius:20px; background:#211e20; }
.tt-home .slide-info { color:#fff3e7; }
.tt-feature-label { display:inline-block; margin-bottom:10px; padding:4px 12px; background:#fff3e7; color:#302629; font-size:12px; font-weight:800; letter-spacing:.12em; border-radius:4px 10px 4px 8px; transform:rotate(-3deg); }
.tt-home .slide-info h2 { line-height:1.24; text-wrap:balance; }
.tt-home .slide-info p { color:#eee5df; }
.tt-home .sec-h h3, .drama-more h2, .drama-episodes h2 { letter-spacing:.04em; }
.tt-home .sec-h h3::before { content:""; width:5px; height:1em; display:inline-block; background:var(--accent); border-radius:4px; transform:rotate(12deg); margin-right:4px; }
.tt-home .sec-h h3 .ic { display:none; }
.episode-release-date, .episode-release-date .release-details { display:flex; flex-wrap:wrap; column-gap:.35em; }
.episode-release-date { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.45; }
.episode-release-date time { white-space:nowrap; font-variant-numeric:tabular-nums; }
.slide-info .episode-release-date { color:inherit; margin:0 0 4px; }
.tt-home .rank { background:var(--surface); border:1px solid var(--line); }
.tt-home .rank .num.top { color:var(--accent); background:none; -webkit-text-fill-color:var(--accent); }
.tt-home .orig .cover, .card .cover { border-radius:12px; background:var(--surface2); }
.tt-home .quick a, .pcard, .panel, .box, .studio-welcome, .social-dialog, .sheet, .watch-paywall-card { background:var(--surface); border-color:var(--line); }
.footer { border-top:1px solid var(--line); margin-top:38px; color:var(--muted); }
.footer .flinks a:hover, .sec-h a:hover { color:var(--accent); }
.welcome .wl-hero, .growth-hero, .join-hero, .phero, .lg-card { background:linear-gradient(130deg,#393032,#211d20 72%); }
.wl-hero h1, .growth-hero h1 em { color:var(--accent); }
.drama-state, .drama-tags a, .drama-expand { color:var(--accent); }
.drama-page, .watch-stage { accent-color:var(--accent); }
.drama-cta .btn.primary, .studio-body .btn.primary { background:var(--grad); color:#35251e; }
.studio-side nav button.active, .side a.active { color:var(--accent); background:var(--surface2); }
.watch-stage .progress i, .dfeed .progress i { background:var(--accent); }
.watch-stage .actions button.on .ic { color:var(--accent); background:#53372d; }
@media (min-width:768px) {
  .tt-home .banner { width:calc(100% - 64px); max-width:1336px; height:clamp(330px,33vw,460px); margin:0 auto; }
  .tt-home .slide { background:#211e20; }
  .tt-home .slide img { width:60%; margin-left:auto; object-position:center 36%; }
  .tt-home .slide::after { background:linear-gradient(90deg,#211e20 21%,#211e20fa 31%,#211e20de 42%,#211e2011 69%),linear-gradient(0deg,#19171999,transparent 32%); }
  .tt-home .slide-info { left:clamp(32px,4vw,68px); bottom:13%; max-width:52%; }
  .tt-home .slide-info h2 { font-size:clamp(30px,3.4vw,49px); margin:5px 0 8px; }
  .tt-home .slide-info p { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .tt-home .hero-btns { margin-top:16px; }
  .tt-home .heroarrow { width:32px; height:32px; }
  .tt-home .heroarrow.l { left:5px; }
  .tt-home .wrap { padding-top:3px; }
  .dhead .brand b { display:inline; }
}
@media(max-width:767px) {
  .growth-mobile-nav { justify-content:flex-start; align-items:center; overflow-x:auto; gap:6px; padding:5px 12px; scrollbar-width:none; background:var(--bg); }
  .growth-mobile-nav a { padding:5px 2px; font-size:11px; white-space:nowrap; }
  .growth-mobile-nav .language-picker { margin-left:auto; padding:2px 4px; }
  .growth-mobile-nav .language-picker select { min-width:0; max-width:83px; font-size:11px; }
  .tt-masthead { padding:19px 16px 14px; }
  .tt-browse { font-size:12px; }
  .tt-home .banner { aspect-ratio:1.55; margin:0 14px 12px; border-radius:16px; }
  .tt-home .slide img { object-position:center 34%; }
  .tt-home .slide::after { background:linear-gradient(0deg,#191519f7 2%,#282124ae 42%,transparent 80%); }
  .tt-feature-label { margin-bottom:5px; font-size:10px; padding:2px 8px; }
  .tt-home .slide-info h2 { margin:3px 0; font-size:clamp(21px,6vw,29px); }
  .tt-home .quick { margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .tt-home * { scroll-behavior:auto; transition:none; }
}


.drama-detail { background: radial-gradient(ellipse at 15% 0, #3b303380, transparent 55%), var(--bg); }
.drama-hero { border-color: var(--line); background: linear-gradient(125deg, #322b2e, #252123); }
.drama-episodes, .drama-state, .drama-tags a, .drama-episodes .episode-tiles :is(button, a), .episode-tiles :is(button, a) { background: var(--surface); border-color:var(--line); }
.drama-episodes .episode-tiles { grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr)); }
.drama-episodes .episode-tiles time { color:var(--muted); font-size:11px; font-weight:400; line-height:1.4; text-align:center; font-variant-numeric:tabular-nums; }
.drama-episodes .episode-tiles :is(button, a).current { border-color: var(--accent); }
.drama-synopsis, .drama-subtitle, .drama-breadcrumb { color: var(--muted); }
.tt-home .btn.primary { box-shadow: 0 5px 18px #15121580; }

.episode-drop{display:grid;justify-items:start;gap:8px;padding:16px;border:1px dashed var(--border,#766967);border-radius:10px}
.episode-drop:focus-within{border-color:currentColor}
.proof-help summary{display:inline-flex;align-items:center;gap:7px;min-height:36px;cursor:pointer;list-style:none}
.proof-help summary::-webkit-details-marker{display:none}
.proof-help summary svg{color:var(--accent,currentColor)}
.proof-guide{padding:10px 14px;border:1px solid var(--border,#766967);border-radius:8px;line-height:1.6}
.proof-guide p{margin:0}
.proof-guide ul{margin:6px 0;padding-inline-start:1.5em}