* {box-sizing:border-box;margin:0;padding:0}
:root {
--paper:#e8e4da;
--paper-2:#dcd6c8;
--ink:#161513;
--ink-soft:#3a3733;
--ash:#8c8477;
--ghost:#6fe0a0;
--ghost-deep:#2f7a54;
--cinnabar:#a8261f;
--hairline:#c3bbaa;
--mono:"Courier New",ui-monospace,monospace;
--song:"Songti SC","SimSun","Noto Serif CJK SC",serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--paper);
color:var(--ink);
font-family:var(--song);
font-size:14px;
line-height:1.6;
letter-spacing:.02em;
background-image:
radial-gradient(circle at 18% 8%,rgba(111,224,160,.10),transparent 34%),
radial-gradient(circle at 82% 62%,rgba(22,21,19,.10),transparent 46%),
repeating-linear-gradient(0deg,rgba(22,21,19,.028) 0 1px,transparent 1px 7px);
}
img {display:block;max-width:100%}
a {color:var(--ink);text-decoration:none}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:600;line-height:1.25}
button, input {font:inherit;color:inherit}
.site-header {
position:sticky;top:0;z-index:40;
background:linear-gradient(180deg,rgba(232,228,218,.97),rgba(232,228,218,.88));
border-bottom:1px solid var(--ink);
backdrop-filter:blur(3px);
}
.header-inner {
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
padding:7px clamp(10px,3vw,26px);
max-width:1240px;margin:0 auto;
}
a[data-contract="site-name"] {
font-size:17px;font-weight:700;letter-spacing:.22em;
color:var(--ink);text-decoration:none;
border-left:4px solid var(--cinnabar);padding-left:8px;
}
a[data-contract="site-name"]:hover {color:var(--cinnabar)}
.header-nav {flex:1 1 auto;min-width:0}
.categories-strip {
display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
a.runtime-category {
white-space:nowrap;
display:inline-block;
padding:2px 9px;
font-size:12px;
letter-spacing:.14em;
color:var(--ink-soft);
text-decoration:none;
border:1px solid var(--hairline);
background:rgba(255,255,255,.35);
}
a.runtime-category:hover {color:var(--ghost-deep);border-color:var(--ghost-deep);background:rgba(111,224,160,.14)}
.page-main {
max-width:1240px;margin:0 auto;
padding:clamp(10px,2vw,20px) clamp(10px,3vw,26px) 34px;
display:flex;flex-direction:column;gap:clamp(16px,2.4vw,26px);
}
.section-heading {
font-size:14px;letter-spacing:.3em;
color:var(--ink);
padding-bottom:4px;margin-bottom:9px;
border-bottom:1px solid var(--ink);
position:relative;
}
.section-heading::after {
content:"";position:absolute;left:0;bottom:-1px;width:44px;height:2px;background:var(--cinnabar);
}
.hero {display:flex;flex-direction:column;gap:clamp(12px,2vw,18px)}
.hero-stage {
display:grid;
grid-template-columns:minmax(0,min(300px,34vw)) minmax(0,1fr);
gap:clamp(14px,2.6vw,30px);
align-items:start;
}
.poster-frame {
position:relative;
overflow:hidden;
border:1px solid var(--ink);
background:var(--ink);
box-shadow:6px 6px 0 rgba(22,21,19,.12);
}
.poster-image {
width:100%;height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
filter:contrast(1.05) saturate(.85);
}
.poster-ghost-fire {
position:absolute;left:-14%;bottom:-12%;
width:78%;height:56%;
background:radial-gradient(circle at 40% 70%,rgba(111,224,160,.62),rgba(111,224,160,.18) 42%,transparent 70%);
mix-blend-mode:screen;
pointer-events:none;
animation:ghostFlicker 4.6s ease-in-out infinite;
}
.poster-judge-shadow {
position:absolute;right:-16%;top:-6%;
width:86%;height:88%;
background:radial-gradient(ellipse at 70% 30%,rgba(10,10,9,.86),rgba(10,10,9,.5) 48%,transparent 74%);
pointer-events:none;
}
@keyframes ghostFlicker{
0%,100%{opacity:.82;transform:translateY(0) scale(1)}
45%{opacity:.5;transform:translateY(-4px) scale(1.03)}
70%{opacity:.95;transform:translateY(2px) scale(.99)}
}
.hero-copy {display:flex;flex-direction:column;gap:8px;min-width:0}
.hero-kicker {
font-size:11px;letter-spacing:.42em;color:var(--ghost-deep);
padding-left:2px;
}
.movie-title {
font-size:clamp(24px,4.6vw,44px);
letter-spacing:.1em;
line-height:1.05;
color:var(--ink);
text-shadow:1px 1px 0 rgba(168,38,31,.16);
}
.movie-tagline {
font-size:clamp(12px,1.6vw,15px);
letter-spacing:.16em;
color:var(--cinnabar);
border-left:3px solid var(--cinnabar);
padding-left:8px;
}
.movie-seo {
font-size:12.5px;line-height:1.75;
color:var(--ink-soft);
max-width:62ch;
text-align:justify;
border-top:1px dashed var(--hairline);
padding-top:8px;
}
.hero-actions {display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.btn {
display:inline-block;
padding:7px 18px;
font-size:13px;letter-spacing:.2em;
border:1px solid var(--ink);
background:transparent;
cursor:pointer;
transition:background .18s,color .18s,border-color .18s;
}
a.btn.btn-play {
color:var(--paper);
text-decoration:none;
background:var(--ink);
border-color:var(--ink);
position:relative;
}
a.btn.btn-play::before {
content:"";display:inline-block;
width:0;height:0;margin-right:8px;vertical-align:middle;
border-left:8px solid var(--ghost);
border-top:5px solid transparent;
border-bottom:5px solid transparent;
}
a.btn.btn-play:hover {background:var(--cinnabar);border-color:var(--cinnabar)}
.btn-ghost {color:var(--ink-soft);border-color:var(--hairline)}
.btn-ghost:hover {color:var(--ghost-deep);border-color:var(--ghost-deep);background:rgba(111,224,160,.12)}
.info-bar {
display:flex;flex-wrap:wrap;gap:0;
border-top:1px solid var(--ink);
border-bottom:1px solid var(--ink);
background:linear-gradient(180deg,rgba(220,214,200,.7),rgba(232,228,218,.3));
}
.info-bar-item {
display:flex;align-items:baseline;gap:6px;
padding:7px 14px;
border-right:1px dashed var(--hairline);
flex:0 1 auto;
}
.info-bar-item:last-child {border-right:0}
.info-bar-key {font-size:11px;letter-spacing:.18em;color:var(--ash)}
.info-bar-value {font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink);font-weight:700}
.player-shell {
position:relative;
width:100%;
border:1px solid var(--ink);
background:#0c0b0a;
box-shadow:0 0 0 4px rgba(22,21,19,.06),0 0 26px rgba(111,224,160,.10);
}
.player-shell.is-lights-out {box-shadow:0 0 0 1px var(--ghost-deep),0 0 40px rgba(111,224,160,.3)}
.player-shell.is-theater {box-shadow:0 0 0 2px var(--ghost-deep)}
.main-player {
display:block;width:100%;height:auto;
background:#0c0b0a;
}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:7px 9px;
background:#131211;
border-top:1px solid #2a2825;
}
.ctrl {
font-size:11.5px;letter-spacing:.12em;
color:#cfcabd;
background:transparent;
border:1px solid #3a3733;
padding:3px 9px;
cursor:pointer;
transition:color .16s,border-color .16s,background .16s;
}
.ctrl:hover {color:var(--ghost);border-color:var(--ghost-deep)}
.ctrl.is-active, .ctrl.is-playing, .ctrl.is-muted {color:var(--ghost);border-color:var(--ghost-deep);background:rgba(111,224,160,.12)}
.ctrl-progress {flex:1 1 140px;min-width:90px;accent-color:var(--ghost-deep);height:14px;cursor:pointer}
.ctrl-volume {flex:0 1 82px;min-width:64px;accent-color:var(--ghost-deep);height:14px;cursor:pointer}
.ctrl-play {color:var(--paper);background:var(--cinnabar);border-color:var(--cinnabar);font-weight:700}
.ctrl-play:hover {color:#fff;background:#8d1d17;border-color:#8d1d17}
.cast-strip {min-width:0}
.cast-list {
display:flex;flex-wrap:wrap;gap:7px;
align-items:flex-start;
}
.cast-slip {
display:flex;flex-direction:column;align-items:center;gap:3px;
writing-mode:vertical-rl;
text-orientation:upright;
padding:10px 7px;
border:1px solid var(--hairline);
background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(220,214,200,.34));
border-top:3px solid var(--ink);
transition:border-color .18s,background .18s;
}
.cast-slip:hover {border-top-color:var(--ghost-deep);background:rgba(111,224,160,.12)}
.cast-name {
font-size:14px;letter-spacing:.24em;font-weight:600;color:var(--ink);
writing-mode:vertical-rl;
}
.cast-role {
font-size:10.5px;letter-spacing:.1em;color:var(--ash);
writing-mode:vertical-rl;
}
.synopsis-block, .details-block {min-width:0}
.synopsis-para {
font-size:12.5px;line-height:1.8;color:var(--ink-soft);
text-align:justify;
text-indent:2em;
}
.synopsis-para + .synopsis-para {margin-top:5px}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:0 18px;
border-top:1px solid var(--hairline);
}
.detail-row {
display:flex;align-items:baseline;gap:10px;
padding:4px 0;
border-bottom:1px dashed var(--hairline);
min-width:0;
}
.detail-key {
font-size:11px;letter-spacing:.2em;color:var(--ash);
white-space:nowrap;flex:0 0 auto;
}
.detail-value {
font-size:12.5px;color:var(--ink-soft);
flex:1 1 auto;min-width:0;
}
.detail-value {font-variant-numeric:tabular-nums}
.timeline-section {min-width:0}
.timeline-scroll {
position:relative;
overflow-x:auto;
padding:6px 2px 12px;
border:1px solid var(--hairline);
background:
repeating-linear-gradient(90deg,rgba(22,21,19,.05) 0 1px,transparent 1px 16px),
linear-gradient(180deg,rgba(255,255,255,.4),rgba(220,214,200,.4));
-webkit-overflow-scrolling:touch;
}
.timeline-track {
position:relative;
display:grid;
grid-template-columns:repeat(6,minmax(150px,1fr));
gap:12px;
padding:74px 14px 20px;
min-width:940px;
}
.timeline-track::before {
content:"";position:absolute;left:14px;right:14px;top:44px;height:2px;
background:linear-gradient(90deg,transparent,var(--ink) 6%,var(--ink) 94%,transparent);
}
.timeline-track::after {
content:"";position:absolute;left:14px;right:14px;top:36px;height:18px;
background:repeating-linear-gradient(90deg,rgba(168,38,31,.35) 0 2px,transparent 2px 9px);
opacity:.5;
}
.timeline-node {
position:relative;
display:flex;flex-direction:column;gap:4px;
padding:8px 9px;
border:1px solid var(--hairline);
background:rgba(232,228,218,.94);
box-shadow:2px 2px 0 rgba(22,21,19,.08);
min-width:0;
}
.timeline-node::before {
content:"";position:absolute;left:50%;top:-38px;width:9px;height:9px;
transform:translateX(-50%) rotate(45deg);
background:var(--ink);
border:1px solid var(--paper);
}
.timeline-node-high::before {background:var(--cinnabar)}
.timeline-node-low::before {background:var(--ghost-deep)}
.timeline-timecode {
font-family:var(--mono);font-size:11px;letter-spacing:.1em;
color:var(--cinnabar);font-weight:700;
}
.timeline-label {font-size:11.5px;line-height:1.6;color:var(--ink-soft);text-align:justify}
.timeline-node-high {align-self:start;margin-top:0;border-top:3px solid var(--cinnabar)}
.timeline-node-mid {align-self:start;margin-top:44px;border-top:3px solid var(--ink)}
.timeline-node-low {align-self:start;margin-top:88px;border-top:3px solid var(--ghost-deep)}
.episodes-section {min-width:0}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
align-items:start;
}
.episode-card {
display:flex;flex-direction:column;gap:3px;
padding:8px 10px 9px;
border:1px solid var(--hairline);
border-left:3px solid var(--ink);
background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(220,214,200,.3));
transition:border-left-color .18s,background .18s,transform .18s;
}
.episode-card:hover {border-left-color:var(--cinnabar);background:rgba(255,255,255,.7);transform:translateX(2px)}
.episode-number {
font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ghost-deep);font-weight:700;
}
.episode-title {font-size:14px;letter-spacing:.1em;color:var(--ink)}
.episode-summary {
font-size:11.5px;line-height:1.65;color:var(--ash);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.episode-duration {
font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-soft);
align-self:flex-end;
border-top:1px dashed var(--hairline);
padding-top:2px;margin-top:auto;
}
.comments-section {min-width:0}
.comment-stack {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px 26px;
align-items:start;
}
.comment-slip {
position:relative;
display:flex;flex-direction:column;gap:4px;
padding:8px 11px 9px;
border:1px solid var(--hairline);
background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(232,228,218,.5));
box-shadow:2px 3px 0 rgba(22,21,19,.07);
}
.comment-slip::after {
content:"";position:absolute;top:-1px;left:14px;width:34px;height:3px;background:var(--cinnabar);
}
.comment-slip-left {transform:rotate(-.5deg)}
.comment-slip-right {transform:rotate(.6deg);margin-top:20px}
.comment-nickname {
font-size:12px;letter-spacing:.16em;font-weight:700;color:var(--ink);
}
.comment-nickname::before {content:"「";color:var(--cinnabar)}
.comment-nickname::after {content:"」";color:var(--cinnabar)}
.comment-text {font-size:12px;line-height:1.7;color:var(--ink-soft);text-align:justify}
.recommend-region {min-width:0}
.recommend-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:9px;
align-items:start;
}
a.recommend-card {
display:flex;flex-direction:column;gap:5px;
padding:7px 7px 9px;
border:1px solid var(--hairline);
background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(220,214,200,.34));
color:var(--ink);
text-decoration:none;
transition:border-color .18s,box-shadow .18s,transform .18s;
}
a.recommend-card:hover {
border-color:var(--cinnabar);
box-shadow:3px 3px 0 rgba(168,38,31,.2);
transform:translateY(-2px);
}
a.recommend-card [data-runtime="name"] {
font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--ink);
}
a.recommend-card [data-runtime="blurb"] {
font-size:11px;line-height:1.6;color:var(--ash);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
[data-runtime="recommendation"] img {
display:block;
width:100%;
aspect-ratio:16 / 9;
height:auto;
object-fit:cover;
border:1px solid var(--ink);
filter:grayscale(.35) contrast(1.04);
}
[data-runtime="recommendation"]:hover img {filter:grayscale(0) contrast(1.08)}
.site-footer {
max-width:1240px;margin:0 auto;
padding:16px clamp(10px,3vw,26px) 30px;
border-top:1px solid var(--ink);
display:flex;flex-direction:column;gap:9px;
}
.disclaimer {
font-size:11px;line-height:1.75;color:var(--ash);
text-align:justify;
max-width:78ch;
}
.footer-links {display:flex;flex-wrap:wrap;gap:14px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;letter-spacing:.18em;color:var(--ink);text-decoration:none;
border-bottom:1px solid var(--ink);padding-bottom:1px;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:var(--cinnabar);border-color:var(--cinnabar)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
padding-top:8px;border-top:1px dashed var(--hairline);
}
.friend-links-label {font-size:11px;letter-spacing:.24em;color:var(--ash)}
a.runtime-friend-link {
font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);text-decoration:none;
}
a.runtime-friend-link:hover {color:var(--ghost-deep);text-decoration:underline}
@media (max-width:900px){.hero-stage {grid-template-columns:minmax(0,min(250px,42vw)) minmax(0,1fr)}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-track {grid-template-columns:repeat(6,minmax(140px,1fr));min-width:880px}}
@media (max-width:720px){.header-inner {padding:6px 10px;gap:10px}
.page-main {padding:10px 10px 24px;gap:16px}
.hero-stage {grid-template-columns:minmax(0,1fr);gap:12px}
.poster-frame {max-width:min(300px,72vw)}
.hero-copy {gap:7px}
.movie-seo {font-size:12px}
.info-bar-item {padding:6px 10px;flex:1 1 auto}
.timeline-track {grid-template-columns:repeat(6,minmax(132px,1fr));min-width:830px;padding-left:10px;padding-right:10px}
.comment-stack {grid-template-columns:minmax(0,1fr);gap:9px}
.comment-slip-right {margin-top:0}
.recommend-row {grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.details-list {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 14px}}
@media (max-width:520px){body {font-size:13px}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.cast-slip {padding:8px 6px}
.recommend-row {grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.player-controls {gap:5px;padding:6px}
.ctrl {font-size:11px;padding:3px 7px}
.ctrl-progress, .ctrl-volume {flex:1 1 100%}
.footer-links {gap:10px}}
@media (max-width:380px){.recommend-row {grid-template-columns:minmax(0,1fr)}
.details-list {grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){* {animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !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}