.story-details { --story-ink:#081c31; --story-panel:#102c46; --story-gold:#e1b54b; --story-muted:#a9bdd0; --story-line:#284359; color:#e6edf3; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.story-details .story-playback-note { font-size:12px; line-height:1.7; color:var(--story-muted); margin:14px 0 0; }
@media(max-width:991px) { .story-details { padding:0 16px; } }
.story-details .story-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; }
.story-details .story-main,.story-details .story-sidebar { min-width:0; }
.story-details a { color:var(--story-gold); }
.story-details a:hover { color:#ffe09a; text-decoration:none; }
.story-details .story-hero { display:grid; grid-template-columns:210px minmax(0,1fr); gap:24px; padding:18px 0 28px; }
.story-details .story-cover { align-self:start; position:relative; overflow:hidden; border:1px solid var(--story-line); border-radius:14px; background:var(--story-panel); box-shadow:0 14px 28px #0003; }
.story-details .story-cover img { width:100%; height:auto; aspect-ratio:355/200; object-fit:cover; display:block; }
.story-details .story-cover-badge { position:absolute; top:10px; left:10px; background:var(--story-gold); color:#081c31; padding:3px 9px; border-radius:20px; font-size:12px; font-weight:700; }
.story-details .story-cover-note { display:flex; align-items:center; gap:7px; padding:10px; color:var(--story-muted); font-size:11px; }
.story-details .story-cover-note span { width:6px; height:6px; border-radius:50%; background:var(--story-gold); }
.story-details .story-eyebrow { margin:0 0 10px; color:#6de0a3; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }
.story-details .story-heading h1 { margin:0; color:var(--story-gold); font-size:clamp(26px,3.1vw,42px); line-height:1.17; letter-spacing:-.7px; font-weight:750; }
.story-details .story-updated { margin:12px 0; color:var(--story-muted); font-size:13px; }
.story-details .story-rating { font-size:13px; }
.story-details .story-rating .rate-img { width:18px; height:18px; }
.story-details .story-rating #rate_des { color:var(--story-muted); }
.story-details .story-views { margin:12px 0 0; color:var(--story-muted); font-size:13px; }
.story-details .story-metadata { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.story-details .story-metadata > div { padding:14px 16px; border:1px solid var(--story-line); border-radius:10px; background:#ffffff04; }
.story-details .story-metadata dt { color:var(--story-muted); font-size:12px; font-weight:400; margin-bottom:5px; }
.story-details .story-metadata dd { margin:0; font-size:14px; font-weight:600; }
.story-details .story-genres { display:flex; flex-wrap:wrap; gap:4px 10px; }
.story-details .story-status { color:#6de0a3; }
.story-details .story-section-title,.story-details .story-section-heading h2 { margin:0; color:#e6edf3; font-size:20px; line-height:1.3; font-weight:650; }
.story-details .story-section-title { margin-bottom:20px; padding-bottom:12px; position:relative; border-bottom:1px solid var(--story-line); }
.story-details .story-section-title::after { content:""; position:absolute; left:0; bottom:-1px; width:100px; height:3px; background:var(--story-gold); }
.story-details .story-section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; border-bottom:1px solid var(--story-line); padding-bottom:12px; }
.story-details .story-section-heading > span,.story-details .story-section-heading > a { font-size:12px; color:var(--story-muted); }
.story-details .story-player { margin:8px 0 30px; }
.story-details .story-player #videoCtrl { padding-top:0!important; }
.story-details .story-player #videoFrame { border:1px solid var(--story-line); border-radius:14px; overflow:hidden; padding:0!important; }
.story-details .story-player #speedRateContainer { padding:14px 0; }
.story-details .story-player-actions { display:flex; flex-wrap:wrap; gap:8px; }
.story-details .story-action { display:inline-flex; gap:8px; align-items:center; padding:10px 14px; border:1px solid var(--story-line); border-radius:8px; font-size:13px; }
.story-details .story-action-primary { background:var(--story-gold); color:#081c31; font-weight:650; margin-left:auto; }
.story-details .story-support { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border:1px solid var(--story-line); border-radius:12px; margin-top:16px; background:var(--story-panel); }
.story-details .story-support > span { color:var(--story-muted); font-size:13px; }
.story-details .story-support > div { display:flex; gap:14px; }
.story-details .story-support img { object-fit:contain; }
.story-details .story-synopsis { background:linear-gradient(135deg,#102c46,#0b2239); border:1px solid var(--story-line); border-radius:14px; padding:22px; margin:28px 0; }
.story-details .story-prose { color:#dbe4ed; font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
.story-details .story-prose img { max-width:100%; height:auto; }
.story-details .story-prose p:last-child { margin-bottom:0; }
.story-details .story-more { margin-top:18px; border-top:1px solid var(--story-line); padding-top:14px; }
.story-details .story-more summary { color:var(--story-gold); cursor:pointer; }
.story-details .story-more .story-prose { margin-top:12px; }
.story-details .story-tracks,.story-details .story-episodes,.story-details .story-comments { margin-top:30px; }
.story-details .story-chapter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--story-line); border:1px solid var(--story-line); border-radius:8px; overflow:hidden; }
.story-details .story-chapter-grid button { border:0; padding:13px 12px; background:var(--story-ink); color:var(--story-gold); font-size:14px; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.story-details .story-chapter-grid button:hover,.story-details .story-chapter-grid button.is-current { background:#183b55; color:#fff; }
.story-details .story-episode-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1px; background:var(--story-line); border:1px solid var(--story-line); border-radius:8px; overflow:hidden; }
.story-details .story-episode-grid > * { display:grid; place-items:center; min-height:42px; padding:8px 4px; background:var(--story-ink); color:var(--story-muted); font-size:13px; }
.story-details .story-episode-grid > .is-current,.story-details .story-episode-grid a:hover { background:var(--story-gold); color:#081c31; font-weight:700; }
.story-details .story-comments { min-height:160px; }
.story-details .story-empty { padding:24px; background:var(--story-panel); border-radius:12px; }
.story-details .story-ad { margin:24px 0; }
.story-details .story-ad .adunit-close { border:0; background:transparent; color:#fff; font-size:20px; cursor:pointer; }
.story-details .story-sidebar { padding-top:18px; }
.browse-menu { color:#e6edf3; }
.browse-section { margin-bottom:28px; }
.browse-title { color:#e6edf3; font-size:17px; font-weight:650; margin:0 0 8px; padding-bottom:12px; border-bottom:2px solid #d4a84b; }
.browse-card { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; padding:14px 0; border-bottom:1px solid #284359; }
.browse-cover img { display:block; width:100%; height:auto; aspect-ratio:355/200; object-fit:cover; border-radius:7px; }
.browse-copy h3 { font-size:14px; line-height:1.4; font-weight:650; margin:0 0 5px; }
.browse-copy h3 a { color:#e1b54b; }
.browse-copy p { color:#dbe4ed; font-size:12px; margin:0 0 4px; }
.browse-genres { display:flex; flex-wrap:wrap; gap:3px 7px; margin-bottom:5px; }
.browse-genres a,.browse-views { color:#a9bdd0!important; font-size:11px; }
.browse-tag { margin-left:8px; font-size:10px; color:#6de0a3; border:1px solid #37634e; padding:1px 5px; border-radius:3px; }
.browse-periods { display:flex; gap:5px; margin:14px 0 0; }
.browse-periods button { flex:1; border:1px solid #284359; background:transparent; color:#a9bdd0; padding:7px; border-radius:6px; font-size:12px; cursor:pointer; }
.browse-periods button[aria-pressed="true"] { background:#d4a84b; color:#081c31; border-color:#d4a84b; }
.browse-loading { min-height:360px; font-size:13px; color:#a9bdd0; }
.browse-loading > div { height:64px; margin-top:18px; border-radius:8px; background:linear-gradient(90deg,#102c46,#183b55,#102c46); background-size:200% 100%; animation:browse-shimmer 1.5s linear infinite; }
.browse-retry, .browse-section-retry { background:transparent; color:#e1b54b; border:1px solid #284359; border-radius:8px; padding:9px 14px; cursor:pointer; }
@keyframes browse-shimmer { to { background-position:-200% 0; } }
.story-details :is(a,button,summary):focus-visible { outline:2px solid #e1b54b; outline-offset:3px; }
@media (max-width:991px) { .story-details .story-layout { grid-template-columns:minmax(0,1fr); gap:20px; } .story-details .story-sidebar { padding-top:0; } .browse-card { grid-template-columns:140px minmax(0,1fr); } .browse-copy h3 { font-size:16px; } }
@media (max-width:575px) { .story-details .story-hero { grid-template-columns:118px minmax(0,1fr); gap:18px 14px; padding-top:4px; } .story-details .story-heading h1 { font-size:23px; } .story-details .story-eyebrow { font-size:9px; letter-spacing:.7px; } .story-details .story-cover-note { font-size:9px; padding:9px 6px; gap:5px; } .story-details .story-updated { font-size:11px; } .story-details .story-rating { grid-column:1/-1; } .story-details .story-rating .rate-img { width:14px; height:14px; } .story-details .story-metadata { grid-template-columns:1fr; gap:0; border:1px solid var(--story-line); border-radius:10px; overflow:hidden; } .story-details .story-metadata > div { display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; border:0; border-bottom:1px solid var(--story-line); border-radius:0; padding:12px; } .story-details .story-metadata > div:last-child { border-bottom:0; } .story-details .story-metadata dt { margin:2px 0 0; } .story-details .story-synopsis { padding:18px 15px; } .story-details .story-section-heading h2,.story-details .story-section-title { font-size:18px; } .story-details .story-episode-grid { grid-template-columns:repeat(8,minmax(0,1fr)); } .story-details .story-chapter-grid button { font-size:13px; } .browse-card { grid-template-columns:118px minmax(0,1fr); } .story-details .story-player-actions .story-action { padding:9px 10px; font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .browse-loading > div { animation:none; } }
.story-details .story-action { background:transparent; color:var(--story-gold); cursor:pointer; }
.story-details .story-action-primary { background:var(--story-gold); color:#081c31; }
.story-details .story-action[hidden] { display:none!important; }
.story-details .story-playback-note { color:var(--story-muted); font-size:12px; line-height:1.6; margin:12px 0; }
.story-details .story-player #videoFrame.is-mini-player { position:fixed; z-index:1040; bottom:16px; right:16px; width:320px; max-width:calc(100vw - 32px); height:auto; box-shadow:0 12px 40px #0009; }
.mini-player-restore { position:absolute; top:8px; right:8px; z-index:15; background:#deb04e; color:#0a192f; border:0; border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; }
.mini-player-restore[hidden] { display:none; }
.story-details #videoFrame.is-mini-player #fullscreenBtn { display:none!important; }
.story-details #videoFrame.pip-main-idle { opacity:.4; pointer-events:none; }
.footer-links { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; line-height:1.6; padding:10px 0; }
.footer-links a { color:#a9bdd0; }