:root{color-scheme:light dark;--paper:#fffaf0;--ink:#0f2b22;--soft:#52635d;--line:#b7d7c6;--surface:#fff;--cream:#fff3d9}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 system-ui,sans-serif}main{max-width:1120px;padding:24px;margin:auto}h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.25;text-wrap:balance;margin:.4rem 0}h2{font-size:1.35rem;line-height:1.35}.kicker{font-size:.75rem;letter-spacing:.1em;font-weight:750}.preview-heading{max-width:920px;margin-bottom:24px}.player-layout{display:grid;grid-template-columns:minmax(280px,390px) minmax(0,1fr);gap:40px;align-items:start}.playback{min-width:0}.viewer{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fffaf0}.viewer #film-stage{position:absolute;top:0;left:0;width:1080px;height:1920px;transform-origin:top left;transform:scale(var(--preview-scale,.36))}.preview-scene{position:absolute;inset:0;width:100%;height:100%;display:none;overflow:hidden}.preview-scene [data-hant]{white-space:pre-line}#poster{position:absolute;inset:0;display:flex;flex-direction:column;background:#fffaf0;color:#0f2b22}#poster[hidden]{display:none}#poster img{width:100%;height:78%;object-fit:contain}#poster p{padding:12px 24px;margin:auto;font-size:1.3rem;font-weight:750;text-wrap:balance}.transport{padding:16px 0}.transport-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button,select,a{font:inherit}button{min-height:44px;border:1px solid var(--ink);border-radius:24px;background:var(--surface);color:var(--ink);padding:8px 20px;cursor:pointer}button#play{background:var(--ink);color:var(--paper)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c84f18;outline-offset:3px}output{font-variant-numeric:tabular-nums;font-size:.88rem;color:var(--soft)}label[for=seek]{display:block;font-size:.88rem;margin-top:12px}input[type=range]{width:100%;min-height:44px;accent-color:#c84f18}.preferences{display:flex;gap:10px;align-items:center;flex-wrap:wrap}select{min-height:44px;padding:6px 12px;border-radius:14px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}.reduce{display:flex;align-items:center;gap:8px;font-size:.88rem;min-height:44px}.reduce input{width:20px;height:20px}#player-status{font-size:.88rem;color:var(--soft);min-height:1.6em}#player-error{padding:14px;background:var(--cream);border:1px solid var(--line);border-radius:16px}.preview-notes ol{padding-left:1.5rem}.preview-notes li{padding:.45rem 0 .85rem}.preview-notes li[aria-current=true]{font-weight:750}.scene-time{display:block;color:var(--soft);font-size:.8rem}.scene-jump{text-align:left;line-height:1.4;border:0;border-radius:10px;padding:6px 8px;background:transparent;width:100%}.scene-jump small{display:block;font-weight:400;font-size:.8rem;color:var(--soft);margin-top:4px}.boundary{padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--cream);font-size:.95rem}.preview-notes>a{display:inline-block;padding:10px 14px;margin:5px 6px 5px 0;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:720px){main{padding:18px}.player-layout{grid-template-columns:minmax(0,1fr);gap:16px}.playback{width:min(100%,390px);justify-self:center}.preview-notes{min-width:0}button,select{max-width:100%}}
@media(prefers-color-scheme:dark){:root{--paper:#142921;--ink:#fff3d9;--soft:#c5d5cb;--line:#5b7666;--surface:#203b2e;--cream:#3c3424}}
.preview-scene{display:block}.preview-scene[hidden]{display:none!important}