:root{--paper:#f1f0e9;--ink:#151511;--acid:#ddff3f;--red:#ff5638;--line:#c5c4bc;--muted:#6f6f68}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}a{color:inherit}header,footer{height:66px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.15em}.brand{font-size:20px;font-weight:900;letter-spacing:-.08em;text-decoration:none}main{padding:34px 3vw 100px}.crumb{font-size:11px}.intro{display:grid;grid-template-columns:2fr 1fr;gap:8vw;align-items:end;padding:8vh 0}.intro>div>p,.setup span,.player-head span{font-size:9px;font-weight:bold;letter-spacing:.15em}.intro h1{font-size:clamp(56px,8vw,118px);line-height:.84;letter-spacing:-.07em;margin:28px 0 0}.intro em{font:400 italic 1em Georgia,serif;color:var(--red)}.intro>p{font:21px/1.5 Georgia,serif}.setup{background:white;border:1px solid;padding:clamp(20px,4vw,50px);display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:end}.setup>div{display:grid;gap:10px}.setup label{border:1px dashed var(--line);padding:15px;font-weight:bold}.setup input{display:block;margin-top:10px;max-width:100%}.setup small{color:var(--muted)}.setup>button{min-height:54px;border:0;background:var(--ink);color:white;padding:0 24px;font-weight:bold}.setup>button:disabled{opacity:.35}.setup>p{grid-column:1/-1;color:var(--red);margin:0}.player{margin-top:30px;border:1px solid;background:white;padding:clamp(14px,3vw,32px)}.player-head,.transcript-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.player-head h2{margin:8px 0 20px}.player-head button,.transcript-head button,.media-controls button,.subtitle-modes button{border:1px solid;background:white;padding:9px 12px;cursor:pointer}.player-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:20px}.media-stage{position:relative;background:#050505;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}.media-stage video{width:100%;height:100%;object-fit:contain}.media-stage video.audio-only{height:80px}.subtitle-overlay{position:absolute;z-index:2;left:5%;right:5%;bottom:max(7%,22px);display:grid;gap:4px;justify-items:center;pointer-events:none}.subtitle-overlay span{max-width:92%;background:rgba(0,0,0,.78);color:white;padding:4px 9px;text-align:center;font-size:clamp(15px,2vw,25px);line-height:1.35}.subtitle-overlay .translation{color:var(--acid)}.media-controls{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:12px}.media-controls input{width:100%}.media-controls output{font-size:12px;font-variant-numeric:tabular-nums}.subtitle-modes{display:flex;gap:8px;margin-top:12px}.subtitle-modes button.active{background:var(--ink);color:white}.transcript-panel{border:1px solid var(--line);min-height:0}.transcript-head{padding:12px;border-bottom:1px solid var(--line)}.transcript-list{height:min(56vw,560px);overflow:auto;overscroll-behavior:contain;padding:8px}.transcript-list button{width:100%;display:grid;grid-template-columns:54px 1fr;gap:4px 10px;text-align:left;border:0;border-left:3px solid transparent;background:transparent;padding:12px 10px;cursor:pointer}.transcript-list button.active{border-left-color:var(--red);background:#fff0eb}.transcript-list time{grid-row:1/3;color:var(--muted);font-size:10px}.transcript-list span{grid-column:2;line-height:1.4}.transcript-list .translation{color:#555}.transcript-list.empty{display:grid;place-items:center;color:var(--muted)}.notes{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid;margin-top:50px}.notes article{padding:25px;border-right:1px solid}.notes article:last-child{border:0}.notes p{font:16px/1.5 Georgia,serif}footer{background:var(--ink);color:white;border:0}@media(max-width:760px){.intro,.setup,.player-grid,.notes{grid-template-columns:1fr}.intro h1{font-size:16vw}.player{padding:10px}.media-stage{aspect-ratio:16/10}.subtitle-overlay{bottom:18%;left:2%;right:2%}.subtitle-overlay span{max-width:98%;font-size:clamp(14px,4vw,20px)}.media-controls{grid-template-columns:auto 1fr}.media-controls output{grid-column:1/-1}.transcript-list{height:42vh;min-height:260px}.transcript-list button{grid-template-columns:42px 1fr}.notes article{border-right:0;border-bottom:1px solid}header span,footer span{display:none}}@media(max-width:760px) and (orientation:landscape){.player-grid{grid-template-columns:1.4fr 1fr}.transcript-list{height:54vw;max-height:70vh}.subtitle-overlay{bottom:20%}}