@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#090b10;--panel:#10131a;--ink:#e9e8df;--muted:#9298a3;--line:#252a32;--accent:#d4dfa0;--body:'DM Sans',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{cursor:default;opacity:.3}a{color:inherit}header{height:82px;padding:0 3.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{text-decoration:none;letter-spacing:3px;font-size:18px;font-weight:600}.wordmark>span{color:var(--accent);margin:0 13px;font-weight:400}.wordmark small{font-size:11px;letter-spacing:2px;font-weight:400}.header-tools{display:flex;gap:24px;align-items:center}.header-tools button{background:none;border:0;color:var(--muted);font-size:13px}#fullscreen{font-size:25px}main{max-width:1900px;margin:auto;padding:0 3.2%}.acts{display:flex;align-items:center;gap:40px;height:90px}.acts button{background:none;border:0;color:var(--muted);display:flex;align-items:center;gap:13px;text-align:left;padding:16px 0;font-size:14px}.acts button>span{display:grid;place-items:center;border:1px solid #39404c;border-radius:50%;width:28px;height:28px;font-family:Georgia,serif;font-size:13px}.acts small{font-size:9px;letter-spacing:1px;display:none}.acts .active{color:var(--ink)}.acts .active>span{color:var(--bg);background:var(--accent);border-color:var(--accent)}.theater{display:grid;grid-template-columns:minmax(0,1fr) 315px;min-height:540px;height:min(66vh,770px);border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}.visual{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#1a2228,#0b1016 70%);min-width:0}canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.frame-meta{position:absolute;top:23px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.6px;color:#a1acb0;z-index:2}.cinema-title{position:absolute;bottom:77px;left:34px;pointer-events:none;z-index:2;max-width:80%;filter:drop-shadow(0 2px 8px #06090c)}.cinema-title p{font-size:10px;letter-spacing:2px;color:var(--accent);margin:0 0 12px}.cinema-title h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(32px,3.1vw,54px);letter-spacing:-1.6px;line-height:1.08;margin:0}.scene-caption{position:absolute;left:34px;right:28px;bottom:25px;display:flex;align-items:center;gap:12px;z-index:3}.scene-caption p{font-size:12px;color:#b7c0bd;margin:0;line-height:1.55;max-width:620px}.caption-line{width:24px;height:1px;background:var(--accent);flex-shrink:0}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#080d13f5 0%,#080d1330 32%,transparent 50%),linear-gradient(180deg,#090e1266,transparent 15%);box-shadow:inset 0 0 90px #060a0e66}aside{border-left:1px solid var(--line);padding:23px 24px;display:flex;flex-direction:column;overflow:auto;background:linear-gradient(155deg,#151a22,#10131a)}.aside-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;color:var(--muted);font-size:11px;letter-spacing:1px}.aside-top button{background:none;border:0;font-size:12px;color:var(--muted)}.aside-top button span{font-size:18px;margin-left:7px}.micro{font-size:10px;letter-spacing:1.7px;color:var(--accent);text-transform:uppercase;margin:0 0 15px}h2{font-family:Georgia,serif;font-size:28px;font-weight:400;line-height:1.13;letter-spacing:-.5px;margin:0 0 18px}.explanation{color:#b7bfc5;font-size:14px;line-height:1.8;margin:0 0 22px}.beat-list{border-top:1px solid var(--line);margin-top:2px}.beat{display:flex;gap:13px;align-items:flex-start;padding:12px 0;color:#6f7885;font-size:12px;line-height:1.5;transition:color .4s}.beat span:first-child{font-size:10px;min-width:14px;color:#687480;padding-top:2px}.beat.on{color:#e0e5cf}.beat.on span:first-child{color:var(--accent)}.key{margin-top:auto;padding-top:23px}.key>.micro{color:#6f7c89;font-size:9px;display:block;margin-bottom:12px}#legend{display:flex;flex-wrap:wrap;gap:9px 14px;color:#b0b9bf;font-size:11px}#legend span{display:flex;align-items:center;gap:6px}#legend i{width:6px;height:6px;border-radius:50%;background:var(--c)}.aside-bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#66727e;margin-top:23px}.player{display:flex;align-items:center;gap:25px;padding:28px 0 20px}.play-controls{display:flex;align-items:center;gap:14px}.play-controls button,#rate,#replay{border:0;background:none}#previous,#next{font-size:24px;color:#a7b0b7;padding:10px 3px}#play{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#161d19;border-radius:25px;padding:13px 22px;font-size:13px;min-width:134px}#playIcon{font-size:12px}.seek-wrap{flex:1;position:relative}.seek-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:1px;margin-bottom:6px}.seek-meta span:nth-child(2){font-size:9px;color:#8c978f}#seek{width:100%;height:15px;display:block;cursor:pointer;accent-color:var(--accent);margin:0}#chapterMarks{position:absolute;left:3px;right:3px;bottom:5px;height:4px;display:flex;justify-content:space-between;pointer-events:none}#chapterMarks i{width:1px;background:#060b0d80;height:4px}#rate,#replay{font-size:14px;color:#b0b9bf}#replay{font-size:23px}footer{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.2px;color:#626d7a;padding:8px 0 23px}footer p{font-size:10px;letter-spacing:0;margin:0}footer i{padding:0 9px;font-style:normal}dialog{width:min(820px,92vw);max-height:85dvh;border:1px solid #39414b;border-radius:14px;background:#121820;color:var(--ink);padding:30px;box-shadow:0 25px 150px #0009}dialog::backdrop{background:#04080dde;backdrop-filter:blur(10px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head button{background:none;border:0;font-size:28px;color:var(--muted)}dialog>p{font-size:15px;line-height:1.8;color:#b6c0c7}dialog a{color:var(--accent)}#sceneIndex section{margin-top:25px}#sceneIndex h3{font-size:12px;color:var(--accent);letter-spacing:1px;font-weight:400}.scene-link{display:grid;grid-template-columns:32px 1fr 80px;width:100%;text-align:left;padding:13px 5px;border:0;border-bottom:1px solid #252e37;background:none;font-size:14px;gap:10px}.scene-link:hover,.scene-link[aria-current=true]{background:#25302f}.scene-link small{font-size:11px;color:var(--muted);text-align:right}.scene-link>span:first-child{color:#6e7c85;font-size:11px}.skip{position:absolute;top:-100px;left:20px;z-index:20}.skip:focus{top:10px;background:#fff;color:#000;padding:12px}.enter{animation:enter .65s ease-out}@keyframes enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}[hidden]{display:none!important}@media(min-width:1500px){.theater{grid-template-columns:minmax(0,1fr) 360px}.explanation{font-size:16px}aside{padding:28px}.beat{font-size:14px}.acts small{display:block}.cinema-title{bottom:90px}.scene-caption p{font-size:14px}.frame-meta{font-size:12px}.cinema-title p{font-size:12px}}@media(max-width:1050px){.theater{grid-template-columns:minmax(0,1fr) 275px}.acts{gap:25px}.acts button{font-size:12px}aside{padding:20px}.explanation{font-size:13px;line-height:1.75}.aside-top{margin-bottom:24px}.cinema-title{left:24px}.scene-caption{left:24px}.frame-meta{font-size:9px;left:20px;right:20px}#endNote{display:none}}@media(max-width:740px){header{height:63px;padding:0 5%}.wordmark{font-size:14px;letter-spacing:2px}.wordmark small{display:none}.wordmark>span{display:none}.header-tools{gap:12px}.header-tools button{font-size:11px}main{padding:0 4%}.acts{height:81px;gap:12px;justify-content:space-between}.acts button{font-size:11px;gap:7px;flex:1;line-height:1.5}.acts button span{width:23px;height:23px;flex-shrink:0;font-size:11px}.theater{display:flex;flex-direction:column;height:auto;min-height:0}.visual{height:440px;flex-shrink:0}canvas{object-fit:contain}.frame-meta{top:18px;font-size:8px;letter-spacing:.7px}.frame-meta span:last-child{display:none}.cinema-title{bottom:76px;left:21px;max-width:90%}.cinema-title h1{font-size:35px}.cinema-title p{font-size:9px;letter-spacing:1.3px}.scene-caption{left:21px;bottom:21px;right:16px}.scene-caption p{font-size:11px}.vignette{background:linear-gradient(0deg,#080d13 0%,#080d1330 45%,transparent 70%)}aside{border-left:0;border-top:1px solid var(--line);padding:22px;overflow:visible}.aside-top{margin-bottom:17px}h2{font-size:25px;margin-bottom:12px}.explanation{font-size:15px;line-height:1.75;margin-bottom:17px}.beat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.beat{font-size:11px;gap:6px}.key{padding-top:10px}.aside-bottom{margin-top:15px}.player{gap:11px;flex-wrap:wrap;padding:19px 0 15px}.play-controls{gap:13px}.seek-wrap{order:-1;flex-basis:100%}.seek-meta{font-size:10px}#play{min-width:135px}#rate{margin-left:auto}footer{padding-bottom:18px}footer>span{display:none}footer p{font-size:9px;margin:auto}.scene-link{font-size:12px;grid-template-columns:25px 1fr 60px}dialog{padding:22px}.key>.micro{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:740px){canvas{top:27px;height:285px;object-fit:contain}.visual{height:430px}}

/* Phase II — cinematic depth and impact */
.visual{isolation:isolate;background:radial-gradient(circle at 50% 42%,#17252a 0%,#080d13 72%);box-shadow:inset 0 0 100px #02050a,0 24px 80px #0008}
.visual:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent 0%,#d9bb8e09 47%,transparent 54%),linear-gradient(0deg,#03070c44,transparent 30%,transparent 72%,#03070c55);mix-blend-mode:screen;animation:projector-breathe 7s ease-in-out infinite}
.visual:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#dce8dd08 4px);mix-blend-mode:soft-light}
canvas{filter:saturate(1.08) contrast(1.035);transform:translateZ(0)}
.cinema-title h1{text-shadow:0 3px 24px #000,0 0 45px color-mix(in srgb,var(--accent) 17%,transparent)}
.cinema-title p,.scene-caption p{text-shadow:0 2px 14px #000}
.beat{transition:opacity .55s ease,color .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.beat.on{transform:translateX(4px)}
.annotation.enter h2{animation:title-settle .85s cubic-bezier(.16,.85,.22,1)}
@keyframes projector-breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.015)}}
@keyframes title-settle{from{opacity:0;letter-spacing:.02em;transform:translateY(13px)}to{opacity:1;letter-spacing:0;transform:none}}
@media(prefers-reduced-motion:reduce){.visual:before{animation:none}.beat.on{transform:none}}

/* Phase II detail pass */
body{background:radial-gradient(circle at 50% -10%,#223238 0,#0b1117 36%,#060a0f 78%);text-rendering:optimizeLegibility}
header{background:linear-gradient(180deg,#0b1117f7,#0b1117d9);backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 1px 0 #b5cfc51a,0 12px 40px #0005}
.wordmark{position:relative;text-shadow:0 0 24px #9bc6b333}
.wordmark:before{content:"";width:7px;height:7px;border:1px solid var(--accent);transform:rotate(45deg);box-shadow:0 0 12px var(--accent);margin-right:13px;display:inline-block;vertical-align:1px}
.header-tools button,.acts button,#chaptersButton,#fullscreen{transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease}
.header-tools button:hover,#chaptersButton:hover,#fullscreen:hover{color:var(--accent);transform:translateY(-1px)}
.acts{position:relative;background:linear-gradient(90deg,transparent,#ffffff05 48%,transparent)}
.acts:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#b8cbc52d,transparent)}
.acts button{position:relative;opacity:.6}
.acts button.active{opacity:1;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.acts button.active:after{content:"";position:absolute;left:42px;right:0;bottom:-21px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 10px var(--accent)}
.theater{border-color:#aec4bd24;box-shadow:0 25px 90px #0009,0 0 0 1px #ffffff05,inset 0 1px 0 #ffffff0a}
.visual{border-right-color:#afc6bd1f}
aside{background:linear-gradient(155deg,#111a20f5,#0b1117fa 68%);box-shadow:inset 1px 0 #ffffff07}
.aside-top{border-bottom:1px solid #bed2c416;padding-bottom:15px}
#chapterCount{font-variant-numeric:tabular-nums;color:var(--accent);text-shadow:0 0 16px color-mix(in srgb,var(--accent) 40%,transparent)}
#annotation h2{font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.explanation{color:#b5c1c4}
.beat{border-left:1px solid #ffffff10;padding-left:10px}
.beat.on{border-left-color:var(--accent);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent);box-shadow:-8px 0 18px color-mix(in srgb,var(--accent) 5%,transparent)}
.beat>span:first-child{font-variant-numeric:tabular-nums}
.key{border-top-color:#ffffff12}
#legend span i{box-shadow:0 0 8px var(--c)}
.player{background:linear-gradient(180deg,#0a1016,#080d12);border-top:1px solid #ffffff0b;border-bottom:1px solid #ffffff09;box-shadow:0 18px 50px #0008}
#play{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 19%,#182229),#111920);border:1px solid color-mix(in srgb,var(--accent) 38%,#33434b);box-shadow:0 8px 24px #0008,inset 0 1px #ffffff18}
#play:hover{box-shadow:0 8px 28px #0009,0 0 25px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 1px #ffffff22}
#seek{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 45%,transparent))}
#chapterMarks i{background:#93a7a488}
dialog{background:linear-gradient(145deg,#152027,#090e13 70%);border:1px solid #c6d8ce24;box-shadow:0 35px 110px #000d,inset 0 1px #ffffff0d;backdrop-filter:blur(20px)}
.scene-link{border:1px solid transparent;border-bottom-color:#ffffff0a;border-radius:5px;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.scene-link:hover,.scene-link[aria-current=true]{border-color:#ffffff14;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 11%,#182126),#11181e);transform:translateX(3px)}
footer{background:#05090e}
@media(max-width:740px){.acts button.active:after{bottom:-17px;left:0}.theater{box-shadow:0 18px 55px #0009}.visual{border-right:0}.beat{padding-left:7px}}