@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');
:root { --ink:#f3f0e8; --muted:#a9a9a5; --line:#2a2e37; --bg:#0d0f14; --panel:#141821; --panel2:#1a1f28; --gold:#f5b83d; --red:#e85d3f; --cyan:#77cbd2; --max:1200px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:'Noto Sans SC','Manrope',sans-serif; font-size:16px; line-height:1.7; } a { color:inherit; text-decoration:none; } img,video { max-width:100%; display:block; } button,a { -webkit-tap-highlight-color:transparent; } :focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.site-header { border-bottom:1px solid var(--line); position:relative; z-index:10; background:rgba(13,15,20,.94); } .nav-wrap { max-width:var(--max); margin:auto; min-height:80px; padding:0 24px; display:flex; align-items:center; gap:30px; } .brand { display:flex; gap:10px; align-items:center; font-size:18px; font-weight:800; letter-spacing:.04em; white-space:nowrap; } .brand-mark { display:inline-grid; place-items:center; width:29px; height:29px; color:#111; background:var(--gold); clip-path:polygon(0 0,100% 50%,0 100%); font-size:12px; padding-left:3px; } .brand-dot { color:var(--red); margin:0 2px; } .main-nav { display:flex; gap:5px; margin-left:auto; } .main-nav a { color:var(--muted); padding:10px 11px; border-radius:8px; font-size:14px; white-space:nowrap; transition:.2s; } .main-nav a:hover,.main-nav a.active { color:var(--ink); background:var(--panel2); } .main-nav a.active { box-shadow:inset 0 -2px var(--gold); } .menu-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:7px 12px; }
main { max-width:var(--max); margin:0 auto; padding:0 24px; } .hero { min-height:540px; padding:92px 0 86px; display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; } .eyebrow { color:var(--gold); font:500 12px/1.2 'DM Mono',monospace; letter-spacing:.14em; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(42px,6vw,78px); line-height:1.08; letter-spacing:-.06em; margin:20px 0 22px; } h2 { font-size:clamp(28px,3vw,42px); letter-spacing:-.04em; line-height:1.2; margin:10px 0 0; } h3 { line-height:1.35; } .hero-lead { font-size:23px; color:var(--ink); margin-bottom:10px; } .hero-desc { color:var(--muted); max-width:560px; } .hero-actions { display:flex; gap:24px; align-items:center; margin-top:30px; } .button { display:inline-flex; align-items:center; gap:12px; border:0; border-radius:5px; padding:12px 18px; font-weight:700; cursor:pointer; font-family:inherit; } .button-primary { background:var(--gold); color:#111; } .button-outline { border:1px solid #59606e; background:transparent; color:var(--ink); } .button-light { color:#111; background:var(--ink); } .quiet-link,.text-link { color:var(--cyan); font-weight:700; } .text-link span,.quiet-link span { margin-left:5px; } .hero-screen { background:var(--panel); border:1px solid #303642; padding:16px; transform:rotate(2.5deg); box-shadow:28px 28px 0 rgba(245,184,61,.13); } .screen-top,.screen-bottom { display:flex; justify-content:space-between; color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.08em; } .screen-art { aspect-ratio:16/10; margin:14px 0; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(135deg,#273c45,#111820 55%,#462b2c); } .beam { position:absolute; width:80%; height:160%; top:-30%; left:28%; background:linear-gradient(90deg,transparent,rgba(245,184,61,.24),transparent); transform:rotate(25deg); } .screen-mark { color:var(--gold); font-size:64px; z-index:1; } .screen-caption { position:absolute; bottom:20px; left:20px; font-size:14px; z-index:1; } .timeline { height:3px; background:#383d46; margin:14px 0; } .timeline span { display:block; width:38%; height:100%; background:var(--red); }
.intro-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:105px; } .intro-item { display:flex; gap:14px; background:var(--panel); padding:22px 18px; align-items:center; } .icon-disc { color:var(--gold); font-size:23px; } .intro-item strong,.intro-item span:last-child { display:block; } .intro-item span:last-child { color:var(--muted); font-size:13px; }
.section-block { padding:0 0 105px; } .section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:30px; } .section-note,.directory-heading span { color:var(--muted); font-size:14px; } .card-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; } .media-card { min-width:0; } .poster-link { display:block; position:relative; overflow:hidden; background:var(--panel); aspect-ratio:5/7; } .poster-link img { width:100%; height:100%; object-fit:cover; transition:transform .4s; } .media-card:hover .poster-link img { transform:scale(1.05); } .play-badge { position:absolute; bottom:10px; left:10px; padding:4px 8px; background:rgba(13,15,20,.86); color:var(--gold); border-radius:3px; font:11px 'DM Mono',monospace; } .card-body { padding-top:15px; } .meta { color:var(--muted); display:flex; justify-content:space-between; font:11px 'DM Mono',monospace; } .card-body h3 { font-size:18px; margin:8px 0 4px; } .card-body p { color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card-body .text-link { font-size:13px; } .feature-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:18px; } .feature-main { grid-row:span 2; } .feature-grid .feature-main .poster-link { aspect-ratio:4/5; } .feature-grid .media-card:not(.feature-main) .poster-link { aspect-ratio:5/3; } .feature-grid .media-card:not(.feature-main) .poster-link img { object-position:center; } .feature-grid .feature-main .card-body h3 { font-size:26px; }
.series-block { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding:52px 0 105px; border-top:1px solid var(--line); } .series-copy p { max-width:360px; color:var(--muted); margin:22px 0 28px; } .series-list { border-top:1px solid var(--line); } .series-row,.ranking-row { display:grid; grid-template-columns:55px 1fr 30px; gap:15px; align-items:center; border-bottom:1px solid var(--line); padding:20px 0; } .series-row:hover,.ranking-row:hover { color:var(--gold); } .series-number,.rank { color:var(--gold); font:14px 'DM Mono',monospace; } .series-title strong,.series-title small,.ranking-row strong,.ranking-row small { display:block; } .series-title small,.ranking-row small { color:var(--muted); font-size:13px; margin-top:3px; } .series-arrow,.rank-arrow { color:var(--muted); } .shorts-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; align-items:start; } .shorts-intro { background:var(--red); color:#111; padding:32px; min-height:250px; display:flex; flex-direction:column; justify-content:space-between; } .short-count { font:64px 'DM Mono',monospace; } .shorts-intro p { font-size:20px; max-width:260px; margin:0; } .shorts-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .compact .poster-link { aspect-ratio:1/1.25; } .compact .card-body p { display:none; } .category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .category-grid a { background:var(--panel); border:1px solid var(--line); padding:25px; min-height:170px; transition:.2s; } .category-grid a:hover { border-color:var(--gold); transform:translateY(-3px); } .category-icon { display:block; font-size:27px; color:var(--gold); margin-bottom:22px; } .category-grid strong { font-size:18px; } .category-grid p { color:var(--muted); font-size:13px; margin:8px 0 0; line-height:1.6; } .ranking-block { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; } .ranking-block .section-head { display:block; } .ranking-list { border-top:1px solid var(--line); } .ranking-row { grid-template-columns:55px 1fr 30px; } .calendar { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); } .calendar-day { padding:24px; border-right:1px solid var(--line); } .calendar-day:last-child { border-right:0; } .calendar-day > span { font:12px 'DM Mono',monospace; color:var(--gold); } .calendar-day a { display:block; margin-top:35px; } .calendar-day strong,.calendar-day small { display:block; } .calendar-day small { color:var(--muted); font-size:13px; } .guide-block { background:var(--panel); padding:45px; display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; margin-bottom:105px; } .guide-block p,.about-copy p { color:var(--muted); max-width:510px; } .guide-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; align-items:end; } .guide-steps div { border-left:2px solid var(--gold); padding-left:15px; } .guide-steps span,.guide-steps strong,.guide-steps small { display:block; } .guide-steps span { color:var(--gold); font:12px 'DM Mono',monospace; } .guide-steps small { color:var(--muted); font-size:13px; margin-top:4px; } .about-block { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; } .about-copy .button { margin-top:10px; } .faq-list { max-width:800px; margin-left:auto; } details { border-top:1px solid var(--line); padding:20px 0; } details:last-child { border-bottom:1px solid var(--line); } summary { cursor:pointer; display:flex; justify-content:space-between; font-weight:700; } summary span { color:var(--gold); } details p { color:var(--muted); padding-top:14px; margin-bottom:0; }
.subscribe { background:var(--gold); color:#111; padding:38px max(24px,calc((100vw - 1152px)/2)); display:flex; justify-content:space-between; gap:30px; align-items:center; } .subscribe h2 { margin:8px 0 5px; } .subscribe .eyebrow { color:#7d4d09; } .subscribe p { margin:0; } .subscribe-actions { display:flex; align-items:center; gap:15px; } .feed-note { font-size:12px; max-width:150px; line-height:1.4; } .site-footer { max-width:var(--max); margin:auto; padding:48px 24px; display:grid; grid-template-columns:1fr 1fr; gap:20px; color:var(--muted); } .footer-brand { color:var(--ink); } .site-footer p { font-size:13px; max-width:300px; } .footer-links { display:flex; flex-wrap:wrap; gap:12px 20px; align-content:start; justify-content:end; } .footer-links a { font-size:13px; } .site-footer small { grid-column:1/-1; font:11px 'DM Mono',monospace; margin-top:20px; }
.page-hero { padding:92px 0 50px; display:flex; justify-content:space-between; align-items:end; } .page-hero h1 { font-size:clamp(42px,6vw,70px); margin-bottom:10px; } .page-hero p { color:var(--muted); max-width:560px; margin:0; } .page-stamp { font:72px 'DM Mono',monospace; color:var(--gold); text-align:right; line-height:1; } .page-stamp small { color:var(--muted); display:block; font-size:11px; letter-spacing:.1em; } .breadcrumbs { display:flex; gap:10px; color:var(--muted); font-size:13px; margin-bottom:28px; } .breadcrumbs a { color:var(--cyan); } .directory-heading { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:25px; margin-bottom:28px; } .directory-heading h2 { font-size:25px; } .directory-block { padding-bottom:120px; }
.detail-hero { display:grid; grid-template-columns:300px 1fr; gap:60px; padding:75px 0 65px; align-items:center; } .detail-poster { aspect-ratio:5/7; background:var(--panel); } .detail-poster img { width:100%; height:100%; object-fit:cover; } .detail-copy h1 { font-size:clamp(42px,6vw,76px); margin:15px 0; } .detail-lead { font-size:21px; max-width:650px; } .detail-copy > p:not(.detail-lead) { color:var(--muted); max-width:620px; } .detail-tags { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; } .detail-tags span,.player-label { border:1px solid var(--line); color:var(--muted); padding:5px 9px; font:11px 'DM Mono',monospace; } .player-section { border-top:1px solid var(--line); padding:50px 0 75px; } .player-wrap { background:#07080b; padding:18px; } .player-wrap video { width:100%; max-height:650px; margin:auto; background:#000; } .video-note { color:var(--muted); font-size:13px; margin:14px 0 0; } .error-note { color:var(--red); } .detail-info { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:0 0 70px; } .detail-info p { color:var(--muted); max-width:500px; } .episode-list { border-top:1px solid var(--line); } .episode { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); } .episode span { color:var(--gold); font:12px 'DM Mono',monospace; } .episode small { color:var(--muted); font-size:12px; } .pager { display:grid; grid-template-columns:1fr auto 1fr; gap:25px; border-top:1px solid var(--line); padding:25px 0 100px; } .pager a,.pager .disabled { color:var(--muted); } .pager a:hover { color:var(--gold); } .pager small,.pager strong { display:block; } .pager small { font-size:12px; } .pager strong { color:var(--ink); } .pager .next { text-align:right; } .back-link { color:var(--cyan)!important; align-self:center; }
@media (max-width:900px) { .main-nav { gap:0; } .main-nav a { padding:9px 6px; font-size:12px; } .hero { gap:40px; } .card-grid { grid-template-columns:repeat(3,1fr); } .feature-grid { grid-template-columns:1fr 1fr; } .feature-main { grid-row:auto; grid-column:1/-1; } .feature-grid .feature-main .poster-link { aspect-ratio:16/8; } .series-block,.ranking-block,.about-block { gap:35px; } }
@media (max-width:680px) { body { font-size:15px; } main { padding:0 18px; } .nav-wrap { min-height:68px; padding:0 18px; } .menu-toggle { display:block; } .main-nav { display:none; position:absolute; top:68px; left:0; right:0; padding:12px 18px 18px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; } .main-nav.open { display:flex; } .main-nav a { flex:1 0 45%; padding:11px 8px; } .hero { padding:56px 0 66px; display:flex; flex-direction:column; align-items:stretch; gap:45px; } .hero-copy { order:0; } .hero-screen { order:1; transform:rotate(1deg); } h1 { font-size:48px; } .hero-lead { font-size:20px; } .intro-strip { grid-template-columns:1fr 1fr; margin-bottom:75px; } .intro-item { padding:15px 12px; } .section-block { padding-bottom:75px; } .section-head { align-items:start; flex-direction:column; gap:10px; } .card-grid { grid-template-columns:repeat(2,1fr); gap:22px 12px; } .feature-grid,.shorts-layout,.series-block,.ranking-block,.about-block,.guide-block { display:block; } .feature-grid .media-card { margin-bottom:24px; } .series-copy { margin-bottom:35px; } .shorts-intro { min-height:180px; margin-bottom:25px; } .short-count { font-size:48px; } .shorts-cards { gap:12px; } .compact .card-body h3 { font-size:15px; } .category-grid { grid-template-columns:1fr 1fr; } .category-grid a { padding:18px; min-height:160px; } .calendar { display:block; } .calendar-day { border-right:0; border-bottom:1px solid var(--line); } .calendar-day:last-child { border-bottom:0; } .guide-block { padding:28px 20px; margin-bottom:75px; } .guide-steps { margin-top:30px; gap:8px; } .guide-steps small { font-size:12px; } .faq-list { margin:0; } .subscribe { display:block; padding:32px 18px; } .subscribe-actions { margin-top:20px; align-items:start; } .site-footer { display:block; padding:38px 18px; } .footer-links { justify-content:start; margin:25px 0; } .page-hero { padding:58px 0 35px; display:block; } .page-stamp { text-align:left; margin-top:30px; font-size:54px; } .directory-heading { display:block; } .directory-heading span { display:block; margin-top:8px; } .detail-hero { display:block; padding:50px 0 45px; } .detail-poster { width:62%; margin-bottom:30px; } .detail-copy h1 { font-size:48px; } .detail-lead { font-size:18px; } .detail-info { display:block; } .detail-info > div { margin-bottom:38px; } .pager { grid-template-columns:1fr 1fr; } .back-link { grid-column:1/-1; grid-row:1; text-align:center; } .pager .next { text-align:right; } }