* {box-sizing:border-box;margin:0;padding:0}
:root {
--bg:#070b14;
--panel:#0c1422;
--panel-2:#101b2e;
--line:#1c2c45;
--line-soft:#152238;
--cyan:#25e0d4;
--cyan-dim:#0f8f8c;
--amber:#ffab3d;
--red:#ff4d5e;
--ink:#e8f1fb;
--ink-dim:#8fa3bd;
--ink-faint:#5c7391;
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
--sans:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--cut:10px;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(900px 480px at 82% -6%,rgba(37,224,212,.10),transparent 62%),
radial-gradient(700px 420px at 6% 8%,rgba(255,171,61,.07),transparent 60%),
var(--bg);
color:var(--ink);
font-family:var(--sans);
font-size:14px;
line-height:1.62;
letter-spacing:.01em;
padding:0 14px 28px;
overflow-x:hidden;
}
img {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
button, input, select {font:inherit;color:inherit}
h1, h2, h3 {font-weight:800;letter-spacing:.02em}
.page-main {max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.site-header {
max-width:1180px;margin:0 auto 14px;
padding-top:14px;
}
.header-bar {
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
border-bottom:1px solid var(--line);
padding:0 2px 8px;
position:relative;
}
.header-bar::after {
content:"";position:absolute;left:0;bottom:-1px;width:74px;height:2px;
background:linear-gradient(90deg,var(--cyan),transparent);
}
a[data-contract="site-name"] {
font-size:17px;font-weight:800;letter-spacing:.06em;
color:var(--ink);
text-decoration:none;
border-left:3px solid var(--cyan);
padding-left:8px;
}
a[data-contract="site-name"]:hover {color:var(--cyan)}
.header-meta {
font-size:11.5px;letter-spacing:.22em;color:var(--ink-faint);
font-family:var(--mono);text-transform:uppercase;
}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px;
margin-top:10px;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
padding:3px 11px;
color:var(--cyan);
text-decoration:none;
border:1px solid var(--line);
background:var(--panel);
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
transition:background .16s,color .16s,border-color .16s;
}
a.runtime-category:hover {
background:var(--cyan);color:#03121a;border-color:var(--cyan);
}
.hero-section {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:14px;
align-items:stretch;
border:1px solid var(--line);
background:
linear-gradient(180deg,rgba(12,20,34,.96),rgba(7,11,20,.96)),
repeating-linear-gradient(90deg,transparent 0 58px,rgba(37,224,212,.045) 58px 59px);
padding:14px;
overflow:hidden;
}
.hero-section::before {
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,rgba(37,224,212,.10),transparent 42%,rgba(255,171,61,.10));
mix-blend-mode:screen;
}
.hero-silhouette {
position:relative;
min-height:250px;
border:1px solid var(--line-soft);
background:
radial-gradient(120% 80% at 50% 108%,rgba(37,224,212,.18),transparent 60%),
linear-gradient(180deg,#04070e,#0a1526 68%,#101d33);
overflow:hidden;
clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.hero-silhouette-road {
position:absolute;left:-6%;right:-6%;bottom:0;height:44%;
background:linear-gradient(180deg,rgba(37,224,212,.05),rgba(37,224,212,.16));
border-top:1px solid rgba(37,224,212,.4);
transform:skewY(-2.4deg);
}
.hero-silhouette-road::after {
content:"";position:absolute;left:0;right:0;top:52%;height:1px;
background:repeating-linear-gradient(90deg,rgba(255,171,61,.85) 0 34px,transparent 34px 74px);
opacity:.7;
}
.hero-silhouette-person {
position:absolute;bottom:26%;width:74px;height:74px;
background:#01050b;
border-radius:50% 50% 42% 42%;
box-shadow:0 0 0 1px rgba(37,224,212,.35),0 0 34px rgba(37,224,212,.28);
}
.hero-silhouette-person::before {
content:"";position:absolute;left:-16px;top:22px;width:26px;height:26px;
border:3px solid #01050b;border-radius:50%;
background:transparent;
}
.hero-silhouette-person::after {
content:"";position:absolute;right:-34px;bottom:2px;width:44px;height:44px;
border:3px solid #01050b;border-radius:50%;
}
.hero-silhouette-rider-a {left:16%;bottom:32%}
.hero-silhouette-rider-b {left:52%;bottom:24%;width:62px;height:62px;box-shadow:0 0 0 1px rgba(255,171,61,.4),0 0 30px rgba(255,171,61,.3)}
.hero-silhouette-rider-b::before {left:-14px;top:18px;width:22px;height:22px}
.hero-silhouette-rider-b::after {right:-28px;width:36px;height:36px}
.hero-panels {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-rows:auto auto;
gap:10px;
align-content:start;
}
.panel {
background:linear-gradient(180deg,rgba(16,27,46,.92),rgba(12,20,34,.92));
border:1px solid var(--line);
padding:9px 11px;
clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.panel-title {
font-size:11px;letter-spacing:.2em;color:var(--cyan);
font-family:var(--mono);font-weight:700;text-transform:uppercase;
padding-bottom:5px;margin-bottom:6px;
border-bottom:1px dashed var(--line);
}
.panel-telemetry {grid-column:1}
.panel-route {grid-column:2;grid-row:1 / span 2}
.panel-countdown {grid-column:1;grid-row:2}
.telemetry-list {display:flex;flex-direction:column;gap:4px}
.telemetry-item {
display:flex;justify-content:space-between;align-items:baseline;gap:8px;
font-size:12px;
border-bottom:1px solid var(--line-soft);
padding-bottom:3px;
}
.telemetry-item:last-child {border-bottom:0}
.telemetry-key {color:var(--ink-faint)}
.telemetry-value {font-family:var(--mono);color:var(--ink);font-weight:700}
.telemetry-item:nth-child(4) .telemetry-value {color:var(--amber)}
.route-list {display:flex;flex-direction:column;gap:0;position:relative;padding-left:14px}
.route-list::before {
content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;
background:linear-gradient(180deg,var(--cyan),rgba(37,224,212,.15));
}
.route-node {
position:relative;font-size:11.5px;color:var(--ink-dim);
padding:3px 0 3px 0;
}
.route-node::before {
content:"";position:absolute;left:-13px;top:9px;width:6px;height:6px;
background:var(--bg);border:1px solid var(--cyan);transform:rotate(45deg);
}
.route-node:last-child {color:var(--amber)}
.route-node:last-child::before {border-color:var(--amber);background:var(--amber)}
.countdown-value {
font-size:15px;font-weight:800;color:var(--amber);
letter-spacing:.03em;line-height:1.3;
}
.countdown-note {
font-size:11px;color:var(--ink-faint);margin-top:3px;
}
.section-heading {
font-size:14px;letter-spacing:.14em;
display:flex;align-items:center;gap:9px;
padding:0 0 7px;
margin-bottom:10px;
border-bottom:1px solid var(--line);
color:var(--ink);
}
.section-heading::before {
content:"";width:9px;height:9px;flex:0 0 auto;
background:var(--cyan);transform:rotate(45deg);
}
.subsection-heading {
font-size:12px;letter-spacing:.16em;color:var(--cyan);
font-family:var(--mono);font-weight:700;
margin-bottom:7px;
}
.timeline-section {
border:1px solid var(--line);
background:var(--panel);
padding:12px 13px;
}
.timeline-list {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px 18px;
align-items:start;
}
.timeline-item {
position:relative;
display:flex;flex-direction:column;gap:2px;
padding:6px 0 6px 16px;
border-left:1px solid var(--line);
}
.timeline-item::before {
content:"";position:absolute;left:-4.5px;top:11px;width:8px;height:8px;
background:var(--cyan);transform:rotate(45deg);
box-shadow:0 0 0 3px rgba(37,224,212,.12);
}
.timeline-item:nth-child(3n/**/+1) {border-left-color:var(--cyan-dim)}
.timeline-item:nth-child(3)::before, .timeline-item:nth-child(5)::before {background:var(--red);box-shadow:0 0 0 3px rgba(255,77,94,.14)}
.timeline-item:nth-child(6)::before {background:var(--amber);box-shadow:0 0 0 3px rgba(255,171,61,.16)}
.timeline-timecode {
font-family:var(--mono);font-size:11px;font-weight:700;
color:var(--cyan);letter-spacing:.08em;
}
.timeline-label {font-size:12.5px;color:var(--ink-dim);line-height:1.5}
.episodes-section {border:1px solid var(--line);background:var(--panel);padding:12px 13px}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.episode-card {
position:relative;
background:var(--panel-2);
border:1px solid var(--line);
border-left:2px solid var(--line);
padding:8px 10px;
display:flex;flex-direction:column;gap:3px;
align-items:flex-start;
transition:border-color .16s,background .16s,transform .16s;
clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.episode-card:hover {
border-color:var(--cyan);
border-left-color:var(--amber);
background:#132339;
transform:translateX(2px);
}
.episode-number {
font-family:var(--mono);font-size:10.5px;font-weight:700;
letter-spacing:.1em;color:var(--amber);
}
.episode-title {
font-size:13px;font-weight:800;color:var(--ink);line-height:1.4;
}
.episode-summary {
font-size:12px;color:var(--ink-faint);line-height:1.55;
max-height:0;overflow:hidden;opacity:0;
transition:max-height .24s ease,opacity .2s ease,margin .2s ease;
}
.episode-card:hover .episode-summary, .episode-card:focus-within .episode-summary {
max-height:120px;opacity:1;margin-top:2px;
}
.episode-duration {
font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);
letter-spacing:.06em;margin-top:auto;
}
.episode-duration::before {content:"▸ ";color:var(--cyan)}
.overview-section {
display:grid;
grid-template-columns:minmax(0,236px) minmax(0,1fr);
gap:14px;
align-items:start;
background:linear-gradient(180deg,#0d1727,#0a1220);
border:1px solid var(--line);
border-top:2px solid var(--cyan);
padding:14px;
}
.overview-poster-wrap {
align-self:start;
border:1px solid var(--line);
padding:4px;
background:var(--panel-2);
clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
img.overview-poster {
width:100%;
aspect-ratio:9 / 16;
object-fit:cover;
display:block;
filter:saturate(.92) contrast(1.06);
}
.overview-body {display:flex;flex-direction:column;gap:11px;min-width:0}
.overview-title {
font-size:24px;line-height:1.22;
letter-spacing:.03em;
transform:skewX(-4deg);
color:#fff;
text-shadow:0 0 22px rgba(37,224,212,.35);
}
.overview-tagline {
font-size:13px;color:var(--amber);
border-left:2px solid var(--amber);
padding-left:8px;
}
.overview-seo {
font-size:12.5px;color:var(--ink-dim);
line-height:1.68;
border-top:1px solid var(--line-soft);
padding-top:8px;
}
.player-wrap {
position:relative;
width:100%;
border:1px solid var(--line);
background:#04070e;
padding:6px;
display:flex;flex-direction:column;gap:6px;
}
video.player-video {
width:100%;
aspect-ratio:16 / 9;
display:block;
background:#000;
object-fit:cover;
}
.player-controls {
display:flex;flex-wrap:wrap;gap:5px;align-items:center;
padding:5px 6px;
background:var(--panel-2);
border:1px solid var(--line-soft);
}
.player-button {
font-size:11px;
padding:3px 9px;
background:transparent;
color:var(--ink-dim);
border:1px solid var(--line);
cursor:pointer;
white-space:nowrap;
transition:color .14s,border-color .14s,background .14s;
clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.player-button:hover {color:var(--cyan);border-color:var(--cyan);background:rgba(37,224,212,.08)}
.player-button.is-muted {color:var(--red);border-color:var(--red)}
.player-range {
-webkit-appearance:none;appearance:none;
height:4px;background:var(--line);border-radius:0;
flex:1 1 90px;min-width:70px;cursor:pointer;
}
.player-range::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:10px;height:14px;background:var(--cyan);border-radius:0;
}
.player-range::-moz-range-thumb {width:10px;height:14px;background:var(--cyan);border:0;border-radius:0}
.player-speed-label {
font-size:11px;color:var(--ink-faint);
display:flex;align-items:center;gap:4px;white-space:nowrap;
}
select.player-speed {
font-size:11px;padding:3px 5px;
background:var(--panel);color:var(--ink);
border:1px solid var(--line);
}
.player-wrap.is-theater {box-shadow:0 0 0 1px var(--cyan),0 0 40px rgba(37,224,212,.25)}
.player-wrap.is-lights-off {background:#000;border-color:#000}
.player-wrap.is-lights-off .player-controls {opacity:.35}
.cast-block {
border-top:1px solid var(--line-soft);
padding-top:9px;
}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:6px;
}
.cast-item {
display:flex;flex-direction:column;gap:2px;
background:rgba(37,224,212,.05);
border-left:2px solid var(--cyan-dim);
padding:6px 8px;
}
.cast-name {font-size:12.5px;font-weight:800;color:var(--ink)}
.cast-role {font-size:11px;color:var(--ink-faint);line-height:1.45}
.synopsis-block {border-top:1px solid var(--line-soft);padding-top:9px}
.synopsis-paragraph {
font-size:12.5px;color:var(--ink-dim);line-height:1.7;
margin-bottom:5px;
}
.synopsis-paragraph:last-child {color:var(--ink);margin-bottom:0}
.episode-status-block {border-top:1px solid var(--line-soft);padding-top:9px}
.episode-status-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:5px;
}
.episode-status-item {
display:flex;justify-content:space-between;gap:8px;align-items:baseline;
font-size:12px;
border:1px solid var(--line-soft);
background:rgba(255,171,61,.05);
padding:4px 8px;
}
.status-key {color:var(--ink-faint)}
.status-value {font-family:var(--mono);color:var(--amber);font-weight:700}
.details-block {border-top:1px solid var(--line-soft);padding-top:9px}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:3px 16px;
}
.detail-row {
display:flex;justify-content:space-between;align-items:baseline;gap:10px;
font-size:12px;
border-bottom:1px dotted var(--line);
padding:3px 0;
}
.detail-key {color:var(--ink-faint);flex:0 0 auto}
.detail-value {color:var(--ink);text-align:right;font-family:var(--mono);font-size:11.5px}
.comments-section {border:1px solid var(--line);background:var(--panel);padding:12px 13px}
.comment-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px 14px;
align-items:start;
}
.comment-item {
display:flex;gap:8px;align-items:flex-start;
padding:6px 0;
border-bottom:1px solid var(--line-soft);
}
.comment-avatar {
flex:0 0 auto;
width:9px;height:9px;margin-top:6px;
background:var(--cyan);
border-radius:50%;
box-shadow:0 0 0 3px rgba(37,224,212,.14);
}
.comment-item:nth-child(3n) .comment-avatar {background:var(--amber);box-shadow:0 0 0 3px rgba(255,171,61,.14)}
.comment-item:nth-child(5n) .comment-avatar {background:var(--red);box-shadow:0 0 0 3px rgba(255,77,94,.14)}
.comment-body {min-width:0;display:flex;flex-direction:column;gap:1px}
.comment-nickname {
font-size:11.5px;font-weight:800;color:var(--cyan);
letter-spacing:.04em;
}
.comment-text {font-size:12px;color:var(--ink-dim);line-height:1.6}
.recommend-region {border:1px solid var(--line);background:var(--panel);padding:12px 13px}
.recommend-region-1 {border-top-color:var(--cyan)}
.recommend-region-2 {border-top-color:var(--amber)}
.recommend-region-3 {border-top-color:var(--red)}
.recommend-rail {
display:flex;gap:8px;
overflow-x:auto;
padding-bottom:6px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.recommend-rail::-webkit-scrollbar {height:6px}
.recommend-rail::-webkit-scrollbar-track {background:var(--line-soft)}
.recommend-rail::-webkit-scrollbar-thumb {background:var(--cyan-dim)}
a.recommend-card {
flex:0 0 168px;
scroll-snap-align:start;
display:flex;flex-direction:column;gap:4px;
background:var(--panel-2);
border:1px solid var(--line);
padding:6px;
color:var(--ink);
text-decoration:none;
transition:border-color .16s,transform .16s,background .16s;
clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
a.recommend-card:hover {
border-color:var(--cyan);
background:#132339;
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
display:block;
width:100%;
height:auto;
aspect-ratio:3 / 4;
object-fit:cover;
background:#050a13;
}
[data-runtime="recommendation"] .recommend-name {
font-size:12px;font-weight:800;color:var(--ink);line-height:1.4;
}
[data-runtime="recommendation"] .recommend-blurb {
font-size:11px;color:var(--ink-faint);line-height:1.5;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
a.recommend-card:hover .recommend-name {color:var(--cyan)}
.site-footer {
max-width:1180px;margin:16px auto 0;
border-top:1px solid var(--line);
padding-top:12px;
display:flex;flex-direction:column;gap:8px;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:12px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;color:var(--cyan);
text-decoration:none;
border-bottom:1px solid transparent;
transition:border-color .16s,color .16s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {border-bottom-color:var(--cyan);color:var(--amber)}
.friend-links {
display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
}
.friend-links-label {
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
color:var(--ink-faint);text-transform:uppercase;
}
a.runtime-friend-link {
font-size:11.5px;color:var(--ink-dim);
text-decoration:none;
padding:1px 6px;
border:1px solid var(--line-soft);
white-space:nowrap;
}
a.runtime-friend-link:hover {color:var(--cyan);border-color:var(--cyan)}
.footer-disclaimer {
font-size:11px;color:var(--ink-faint);line-height:1.65;
border-top:1px solid var(--line-soft);padding-top:8px;
}
@media (max-width:900px){.hero-section {grid-template-columns:minmax(0,1fr)}
.hero-silhouette {min-height:180px}
.overview-section {grid-template-columns:minmax(0,1fr)}
.overview-poster-wrap {max-width:200px}
.timeline-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body {padding:0 10px 22px;font-size:13.5px}
.hero-panels {grid-template-columns:minmax(0,1fr)}
.panel-route {grid-column:1;grid-row:auto}
.panel-countdown {grid-column:1;grid-row:auto}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.comment-list {grid-template-columns:minmax(0,1fr)}
.overview-title {font-size:20px}
.overview-poster-wrap {max-width:170px}
a.recommend-card {flex:0 0 146px}
.hero-silhouette {min-height:150px}}
@media (max-width:400px){.header-meta {font-size:10.5px;letter-spacing:.14em}
a.recommend-card {flex:0 0 132px}}

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}