/* Standalone, EP68-only styles. No changes to Casper's compiled assets. */
.ep68-reader, .ep68-launch { --ep68-ink:#152f2c; --ep68-muted:#4b635f; --ep68-line:#ceddd8; --ep68-paper:#fbfcf8; --ep68-accent:#17634d; font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif; color:var(--ep68-ink); }
.gh-content .ep68-reader { grid-column:wide-start / wide-end; margin:24px 0 40px; padding:24px; border:1px solid var(--ep68-line); border-radius:20px; background:var(--ep68-paper); box-shadow:0 12px 40px #19382b0a; font-size:16px; line-height:1.6; scroll-margin-top:24px; }
.ep68-reader *, .ep68-launch * { box-sizing:border-box; }
.ep68-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.gh-content .ep68-reader h3 { margin:0; color:var(--ep68-ink); font-size:27px; letter-spacing:-.03em; }
.gh-content .ep68-reader .ep68-subtitle { margin:3px 0 0; font-size:13px; color:var(--ep68-muted); }
.ep68-columns { display:grid; grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr); gap:24px; align-items:start; }
.ep68-media { position:sticky; top:24px; min-width:0; }
.ep68-stage { position:relative; aspect-ratio:16/9; min-height:200px; overflow:hidden; border-radius:12px; background:#10221f; }
.gh-content .ep68-stage figure { margin:0; width:100%; height:100%; }
.ep68-stage .fluid-width-video-container, .ep68-stage .fluid-width-video-wrapper { display:block; position:relative; padding:0 !important; width:100%; height:auto; aspect-ratio:16/9; min-height:200px; }
.ep68-stage iframe { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:200px; border:0; }
.ep68-stage > iframe { position:relative; aspect-ratio:16/9; }
.ep68-reader .ep68-button, .ep68-launch .ep68-button { appearance:none; display:inline-flex; justify-content:center; align-items:center; gap:5px; min-height:44px; margin:0; padding:8px 12px; border:1px solid var(--ep68-line); border-radius:9px; background:#fff; color:var(--ep68-ink); font:600 14px/1.4 system-ui,-apple-system,sans-serif; text-decoration:none; cursor:pointer; box-shadow:none; }
.ep68-reader .ep68-primary, .ep68-launch .ep68-primary { background:var(--ep68-accent); color:#fff; border-color:var(--ep68-accent); }
.ep68-reader .ep68-button:hover:not(:disabled), .ep68-launch .ep68-button:hover { box-shadow:0 0 0 2px #17634d33; }
.ep68-reader button:focus-visible, .ep68-launch button:focus-visible, .ep68-transcript:focus-visible { outline:3px solid #c35b15; outline-offset:3px; }
.ep68-reader .ep68-button:disabled { opacity:.55; cursor:not-allowed; }
.ep68-playback, .ep68-toolbar { display:flex; flex-wrap:wrap; gap:8px; }
.ep68-playback { margin-top:12px; }
.ep68-reader .ep68-status, .ep68-reader .ep68-timing, .ep68-reader .ep68-help, .ep68-reader .ep68-end-note { margin:10px 0 0; font-size:13px; line-height:1.6; color:var(--ep68-muted); }
.ep68-reader .ep68-status { min-height:42px; }
.ep68-reader .ep68-help { margin:8px 0 12px; }
.ep68-reading { min-width:0; }
.ep68-follow[aria-pressed="true"] { background:#e2efe6; border-color:#81ad95; }
.ep68-transcript { height:600px; max-height:72vh; min-height:260px; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-gutter:stable; border:1px solid var(--ep68-line); border-radius:12px; background:#fff; scroll-behavior:auto; overflow-anchor:none; }
.gh-content .ep68-reader .ep68-cue { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:start; column-gap:10px; margin:0; padding:16px 12px; border:0; border-left:4px solid transparent; border-bottom:1px solid #e7eeea; font-size:18px; line-height:1.85; cursor:pointer; color:var(--ep68-ink); }
.gh-content .ep68-reader .ep68-cue.is-active { border-left-color:var(--ep68-accent); background:#eaf4e8; }
.ep68-reader .ep68-time { grid-column:1; grid-row:1/3; min-width:54px; padding:4px; min-height:44px; border-color:transparent; color:var(--ep68-muted); background:transparent; font-size:12px; font-variant-numeric:tabular-nums; }
.ep68-zh { grid-column:2; overflow-wrap:anywhere; }
.ep68-en { grid-column:2; display:block; margin-top:6px; font-size:14px; line-height:1.65; color:var(--ep68-muted); overflow-wrap:anywhere; }
.ep68-reader [hidden] { display:none !important; }
.ep68-reader .ep68-word { display:inline; min-height:0; padding:2px 1px; margin:0; border:0; border-bottom:1px dashed #548d67; border-radius:2px; background:transparent; color:inherit; font:inherit; font-weight:600; line-height:inherit; text-align:inherit; }
.ep68-reader .ep68-word:hover { background:#d1e8c9; }
.gh-content .ep68-launch { padding:20px; border:1px solid var(--ep68-line); border-radius:12px; background:var(--ep68-paper); text-align:center; }
.gh-content .ep68-launch p { margin:8px 0 0; color:var(--ep68-muted); font-size:14px; }
.ep68-vocab-dialog { width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; padding:24px; border:1px solid #ceddd8; border-radius:18px; background:#fbfcf8; color:#152f2c; box-shadow:0 20px 80px #0003; font-family:system-ui,-apple-system,sans-serif; }
.ep68-vocab-dialog::backdrop { background:#10221f99; }
.ep68-vocab-dialog dl { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:start; gap:12px 16px; margin:20px 0; font-size:16px; line-height:1.65; }
/* Reset Casper's global dt width/float/alignment before placing labels in the grid. */
.ep68-vocab-dialog dt, .ep68-vocab-dialog dd { float:none; width:auto; min-width:0; margin:0; padding:0; text-align:left; overflow-wrap:anywhere; }
.ep68-vocab-dialog dt { grid-column:1; color:#4b635f; font-size:13px; font-weight:600; }
.ep68-vocab-dialog dd { grid-column:2; }
@media (max-width:900px) {
 .gh-content .ep68-reader { padding:16px; }
 .ep68-columns { grid-template-columns:1fr; gap:16px; }
 .ep68-media { position:static; }
 .ep68-stage { max-width:640px; margin:0 auto; }
 .ep68-transcript { height:420px; max-height:56vh; min-height:240px; }
 .ep68-reader .ep68-status { min-height:0; }
 .ep68-reader .ep68-timing { margin-top:4px; }
 .ep68-top { align-items:flex-start; }
 .gh-content .ep68-reader h3 { font-size:24px; }
}
/* Keep video in the reading panel, without overlaying text on small screens.
   The transcript scrolls independently; no fixed/sticky mobile video cover. */
@media (max-width:480px) {
 .gh-content .ep68-reader { grid-column:full-start/full-end; margin-left:8px; margin-right:8px; padding:12px; border-radius:14px; }
 .ep68-reader .ep68-exit { font-size:12px; padding:7px; }
 .ep68-reader .ep68-button { font-size:13px; }
 .gh-content .ep68-reader .ep68-cue { padding:12px 8px; grid-template-columns:48px minmax(0,1fr); gap:4px 6px; font-size:18px; }
 .ep68-reader .ep68-time { min-width:44px; font-size:11px; }
 .ep68-stage .fluid-width-video-wrapper, .ep68-stage .fluid-width-video-container { min-height:200px; }
}
@media (prefers-reduced-motion:reduce) { .ep68-reader *, .ep68-launch * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media print { .ep68-launch, .ep68-top, .ep68-media, .ep68-toolbar, .ep68-help, .ep68-vocab-dialog { display:none !important; } .ep68-columns { display:block; } .ep68-transcript { overflow:visible; height:auto; max-height:none; border:0; } .ep68-en[hidden] { display:block !important; } }