*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
html {font-size:16px;scroll-behavior:smooth}
body {font-family:Georgia,"Times New Roman",serif;background:#0d1b2a;color:#dbe7f0;line-height:1.5;min-height:100vh;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:24px 24px;overflow-x:hidden}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:#9bb8d3;text-decoration:none;transition:color .2s ease}
a:hover {color:#c9e2f7}
button {font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input[type=range] {-webkit-appearance:none;appearance:none;background:#2c4a63;height:4px;border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#7ba4c4;cursor:pointer}
input[type=range]::-moz-range-thumb {width:12px;height:12px;border-radius:50%;background:#7ba4c4;cursor:pointer;border:none}
header {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.25rem;background:rgba(13,27,42,.92);border-bottom:1px solid #234158;position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}
.site-logo {font-family:"Brush Script MT","Segoe Script",cursive;font-size:1.6rem;color:#a8c9e8;letter-spacing:1px;white-space:nowrap;text-shadow:0 0 12px rgba(120,170,210,.3)}
.site-logo:hover {color:#d0e8ff;text-decoration:none}
.categories-nav {display:flex;flex-wrap:wrap;gap:.25rem .5rem;justify-content:flex-end;align-items:center}
.runtime-category {display:inline-block;padding:.25rem .6rem;font-size:.8rem;color:#8fb3d1;border:1px solid transparent;border-radius:999px;white-space:nowrap;background:rgba(30,55,80,.35);transition:all .2s ease}
.runtime-category:hover {color:#d5eaff;border-color:#456b8a;background:rgba(45,80,115,.5);text-decoration:none}
main {max-width:1400px;margin:0 auto;padding:0 1rem 2rem}
.movie-overview {display:grid;grid-template-columns:280px minmax(0,1fr);gap:1.25rem;margin:1.25rem 0;background:linear-gradient(145deg,#101f30,#0a1520 60%,#0e1c2c);border:1px solid #1d3a52;border-radius:12px;box-shadow:0 4px 30px rgba(0,0,0,.5);padding:1.25rem;position:relative;overflow:hidden}
.movie-overview::before {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 30%,rgba(80,140,190,.08),transparent 60%);z-index:1}
.poster-column, .info-column {position:relative;z-index:2}
.poster-column {display:flex;flex-direction:column;gap:1rem}
.poster-media-wrapper {width:100%;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.6);border:1px solid #1d3a52;background:#0a1520}
.main-poster {width:100%;aspect-ratio:2/3;object-fit:cover}
.detail-panel {background:rgba(20,38,58,.6);border-radius:8px;border:1px solid #1d3a52;padding:.75rem .9rem}
.panel-heading {font-size:.85rem;letter-spacing:2px;color:#a8c9e8;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px dashed #2c4a63;font-weight:normal}
.detail-list {display:flex;flex-direction:column;gap:.2rem}
.detail-item {display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;padding:.15rem 0;border-bottom:1px solid rgba(45,75,105,.2)}
.detail-item:last-child {border-bottom:none}
.detail-item dt {color:#7ba0c0;white-space:nowrap}
.detail-item dd {color:#d3e5f2;text-align:right}
.info-column {display:flex;flex-direction:column;gap:.9rem}
.movie-title {font-family:"Brush Script MT","Segoe Script",cursive;font-size:2rem;line-height:1.2;color:#e0edf8;text-shadow:0 0 15px rgba(120,170,220,.2);font-weight:bold;letter-spacing:.5px}
.tagline {font-size:.95rem;color:#8fb3d1;font-style:italic;border-left:3px solid #4a789c;padding-left:.6rem;margin-top:-.3rem}
.synopsis-block, .cast-block, .episode-status-wrap {display:flex;flex-direction:column;gap:.5rem}
.block-subhead {font-size:.9rem;letter-spacing:3px;color:#a8c9e8;border-bottom:1px solid #1d3a52;padding-bottom:.35rem;margin-bottom:.2rem;font-weight:normal}
.synopsis-paragraph {font-size:.85rem;line-height:1.65;color:#c5d8e8;text-align:justify;margin-bottom:.3rem}
.cast-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.cast-item {display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;padding:.5rem .25rem;background:rgba(25,45,68,.35);border-radius:10px;border:1px solid rgba(45,75,105,.3);transition:transform .2s ease;min-width:0}
.cast-item:hover {transform:translateY(-2px)}
.cast-avatar {width:100%;aspect-ratio:1;border-radius:50%;border:2px solid #4a789c;box-shadow:0 0 12px rgba(80,140,190,.2);position:relative;overflow:hidden}
.avatar-1 {background:linear-gradient(135deg,#5b8499,#2a4a5f 60%,#1a3040);background-image:radial-gradient(circle at 30% 30%,rgba(180,210,230,.3),transparent 20%),radial-gradient(circle at 70% 60%,rgba(60,100,130,.5),transparent 40%)}
.avatar-2 {background:linear-gradient(135deg,#4d6b80,#23384d 60%,#16242f);background-image:radial-gradient(circle at 60% 35%,rgba(150,180,200,.25),transparent 25%),radial-gradient(circle at 30% 70%,rgba(40,70,95,.6),transparent 40%)}
.avatar-3 {background:linear-gradient(135deg,#7a8a99,#3d5266 60%,#1f3040);background-image:radial-gradient(circle at 45% 40%,rgba(190,200,210,.2),transparent 20%),radial-gradient(circle at 65% 65%,rgba(80,110,140,.45),transparent 35%)}
.avatar-4 {background:linear-gradient(135deg,#3f5a6e,#1e3346 60%,#101e2b);background-image:radial-gradient(circle at 50% 30%,rgba(140,170,195,.3),transparent 25%),radial-gradient(circle at 40% 70%,rgba(30,60,85,.6),transparent 45%)}
.cast-name {font-size:.75rem;color:#bcd2e5;letter-spacing:.5px}
.episode-status-wrap {gap:.6rem}
.episode-meta-row {display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.total-episodes, .current-episode {font-size:.8rem;padding:.2rem .7rem;border-radius:999px;background:rgba(30,55,80,.5);border:1px solid #2c4a63;color:#a8c9e8;letter-spacing:1px}
.current-episode {background:rgba(60,100,140,.4);color:#d0e8ff;border-color:#4a789c}
.player-wrapper {width:100%;background:#060d15;border-radius:8px;border:1px solid #1d3a52;overflow:hidden;box-shadow:0 2px 15px rgba(0,0,0,.4)}
.player-wrapper video {display:block;background:#000}
.player-controls {display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;padding:.4rem .6rem;background:rgba(10,20,30,.9);border-top:1px solid #1d3a52}
.player-controls button {font-size:.7rem;padding:.2rem .5rem;border-radius:4px;background:rgba(40,70,95,.5);color:#a8c9e8;border:1px solid #2c4a63;transition:all .15s ease}
.player-controls button:hover {background:rgba(60,100,140,.6);color:#fff}
.player-controls input[type=range] {flex:1;min-width:60px}
.player-wrapper.theater-mode {position:fixed;inset:0;z-index:200;border-radius:0;background:#000}
.player-wrapper.theater-mode video {height:100vh;object-fit:contain}
.movie-overview.lights-dim {background:#050a10}
.movie-overview.lights-dim .poster-column, .movie-overview.lights-dim .info-column {opacity:.3;filter:brightness(.4);transition:all .4s ease}
.episodes-list-section, .timeline-section, .comments-section, .recommend-region {margin:1.5rem 0;padding:1.25rem;background:linear-gradient(150deg,#0f1e30,#0a1520);border:1px solid #1d3a52;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.45)}
.section-heading, .recommendation-title {font-size:1.1rem;letter-spacing:3px;color:#a8c9e8;padding-bottom:.5rem;margin-bottom:1rem;border-bottom:1px solid #1d3a52;font-weight:normal;position:relative}
.section-heading::after, .recommendation-title::after {content:"";position:absolute;bottom:-2px;left:0;width:60px;height:3px;background:linear-gradient(90deg,#4a789c,transparent);border-radius:2px}
.episode-list {display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.episode-item {display:flex;flex-direction:column;gap:.25rem;padding:.6rem .7rem;background:rgba(20,38,58,.5);border-radius:8px;border:1px solid rgba(45,75,105,.25);transition:background .2s ease;min-width:0}
.episode-item:hover {background:rgba(30,55,80,.6)}
.episode-number {font-size:.7rem;color:#7ba0c0;letter-spacing:1px;text-transform:uppercase}
.episode-title {font-size:.9rem;color:#d3e5f2;font-weight:bold;letter-spacing:.5px}
.episode-summary {font-size:.75rem;color:#a9c2d8;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex-grow:1}
.episode-duration {font-size:.7rem;color:#6d90ad;align-self:flex-end;margin-top:.2rem}
.timeline-horizontal {display:flex;gap:0;overflow-x:auto;padding:1rem .5rem;position:relative;scrollbar-width:thin;scrollbar-color:#2c4a63 transparent}
.timeline-horizontal::before {content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#4a789c 10%,#4a789c 90%,transparent);z-index:0}
.timeline-horizontal::-webkit-scrollbar {height:6px}
.timeline-horizontal::-webkit-scrollbar-thumb {background:#2c4a63;border-radius:3px}
.timeline-node {flex:0 0 auto;display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;padding:0 1.5rem;position:relative;z-index:1;min-width:120px}
.timeline-node::before {content:"💧";font-size:1.1rem;color:#7ba4c4;text-shadow:0 0 8px rgba(120,170,210,.5);position:relative;z-index:2;background:#0f1e30;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #4a789c}
.timecode {font-size:.7rem;color:#8fb3d1;letter-spacing:1px;white-space:nowrap}
.timeline-label {font-size:.75rem;color:#c5d8e8;line-height:1.4;white-space:normal;max-width:120px}
.comment-list {display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.comment-card {display:flex;flex-direction:column;gap:.35rem;padding:.7rem .8rem;background:rgba(20,38,58,.5);border-radius:10px;border:1px solid rgba(45,75,105,.25);position:relative;min-width:0}
.comment-card::after {content:"";position:absolute;bottom:-8px;left:15%;width:0;height:0;border-style:solid;border-width:8px 8px 0 8px;border-color:rgba(20,38,58,.9) transparent transparent transparent}
.comment-card::before {content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:radial-gradient(circle,transparent 60%,rgba(80,140,190,.1) 60%);background-size:8px 2px;border-radius:50%}
.comment-nickname {font-size:.7rem;color:#8fb3d1;letter-spacing:1px;border-bottom:1px solid rgba(45,75,105,.3);padding-bottom:.25rem}
.comment-text {font-size:.8rem;color:#c5d8e8;line-height:1.55}
.recommend-region {overflow:hidden}
.recommend-card-row {display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;overflow-x:visible}
.recommend-card-row a[data-runtime="recommendation"] {display:flex;flex-direction:column;gap:.4rem;padding:.5rem;background:rgba(20,38,58,.5);border-radius:8px;border:1px solid rgba(45,75,105,.25);transition:all .2s ease;color:#c5d8e8;min-width:0}
.recommend-card-row a[data-runtime="recommendation"]:hover {background:rgba(30,55,80,.7);border-color:#4a789c;transform:translateY(-3px);text-decoration:none}
.recommend-card-row a[data-runtime="recommendation"] img {width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#1a3040}
.recommend-card-row a[data-runtime="recommendation"] span[data-runtime="name"] {font-size:.85rem;font-weight:bold;color:#d3e5f2;line-height:1.3}
.recommend-card-row a[data-runtime="recommendation"] span[data-runtime="blurb"] {font-size:.72rem;color:#8fb3d1;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
footer {background:#0a1520;border-top:1px solid #1d3a52;padding:1.5rem 1.25rem;margin-top:2rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start;justify-content:space-between}
.footer-disclaimer {font-size:.7rem;color:#6d90ad;line-height:1.6;max-width:50ch;flex:1 1 260px}
.footer-nav {display:flex;gap:1rem;align-items:center}
.footer-nav a {font-size:.8rem;color:#8fb3d1;padding:.3rem .6rem;border:1px solid #1d3a52;border-radius:999px;transition:all .2s ease}
.footer-nav a:hover {color:#d0e8ff;border-color:#4a789c;text-decoration:none;background:rgba(30,55,80,.4)}
.friend-links {display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;flex:1 1 300px;justify-content:flex-end}
.friend-label {font-size:.7rem;color:#6d90ad;letter-spacing:2px;margin-right:.5rem}
.runtime-friend-link {font-size:.75rem;color:#7ba0c0;padding:.2rem .5rem;border-radius:4px;background:rgba(20,38,58,.4);border:1px solid rgba(45,75,105,.2);transition:all .2s ease;white-space:nowrap}
.runtime-friend-link:hover {color:#d0e8ff;background:rgba(40,70,95,.5);border-color:#4a789c;text-decoration:none}
@media(max-width:1024px){.movie-overview {grid-template-columns:220px minmax(0,1fr)}
.cast-grid {grid-template-columns:repeat(2,1fr)}
.episode-list, .comment-list {grid-template-columns:repeat(2,1fr)}
.recommend-card-row {grid-template-columns:repeat(2,1fr);overflow-x:auto}
.recommend-card-row a[data-runtime="recommendation"] img {aspect-ratio:auto;height:auto;max-height:200px}
.timeline-node {min-width:100px}}
@media(max-width:768px){header {flex-direction:column;gap:.5rem;align-items:flex-start}
.categories-nav {justify-content:flex-start;width:100%;overflow-x:auto;white-space:nowrap}
.movie-overview {grid-template-columns:1fr;padding:1rem}
.poster-column {flex-direction:row;gap:1rem;align-items:flex-start}
.poster-media-wrapper {flex:0 0 160px;max-width:160px}
.movie-title {font-size:1.5rem}
.episode-list, .comment-list {grid-template-columns:1fr}
.recommend-card-row {grid-template-columns:1fr}
.recommend-card-row a[data-runtime="recommendation"] {flex-direction:row;align-items:center;gap:1rem}
.recommend-card-row a[data-runtime="recommendation"] img {width:120px;flex-shrink:0;height:auto;aspect-ratio:16/10}
.timeline-horizontal {flex-wrap:nowrap}
.timeline-node {min-width:110px}
footer {flex-direction:column;align-items:flex-start;gap:1rem}
.friend-links {justify-content:flex-start}}
@media(max-width:480px){.poster-column {flex-direction:column}
.poster-media-wrapper {flex:1 1 auto;max-width:none;width:100%}
.main-poster {aspect-ratio:2/3}
.cast-grid {grid-template-columns:repeat(2,1fr);gap:.5rem}
.episode-meta-row {flex-direction:column;align-items:flex-start}
.player-controls button {font-size:.65rem;padding:.15rem .4rem}
.player-controls input[type=range] {min-width:50px}
.movie-title {font-size:1.3rem}
.recommend-card-row a[data-runtime="recommendation"] {flex-direction:column;align-items:flex-start}
.recommend-card-row a[data-runtime="recommendation"] img {width:100%;aspect-ratio:16/9}}

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}