/* Appearance: explicit design tokens keep every theme's foreground, border and focus contrast measurable. */
:root { color-scheme:light; --bg:#f5f3ed; --panel:#ffffff; --text:#202b28; --muted:#52605a; --border:#748078; --accent:#245b43; --accent-text:#ffffff; --soft:#e8efe9; --focus:#7441bc; --stage:#142b23; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#121c18; --panel:#1c2923; --text:#f4f5ed; --muted:#c1ccc3; --border:#87998b; --accent:#b4e8bb; --accent-text:#14271b; --soft:#2b4032; --focus:#edbcff; --stage:#080e0a; }
:root[data-theme="contrast"] { color-scheme:dark; --bg:#000000; --panel:#000000; --text:#ffff00; --muted:#ffffff; --border:#ffff00; --accent:#ffff00; --accent-text:#000000; --soft:#181818; --focus:#00ffff; --stage:#000000; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.6 "Segoe UI",Arial,sans-serif; }
a { color:var(--accent); text-underline-offset:4px; }
button,input,select { font:inherit; }
button,select { min-height:44px; color:var(--text); border:1px solid var(--border); border-radius:8px; background:var(--panel); }
button { padding:8px 13px; cursor:pointer; font-weight:600; }
button:hover:enabled,a:hover { text-decoration:underline; text-underline-offset:4px; }
button[aria-pressed="true"] { background:var(--soft); box-shadow:inset 0 -3px var(--accent); }
button:disabled,input:disabled { cursor:not-allowed; }
button:disabled { color:var(--muted); background:var(--soft); }
select { width:100%; padding:8px 10px; }
input[type="range"] { accent-color:var(--accent); min-height:44px; cursor:pointer; }
/* Focus and reflow: controls remain in normal flow with no hover-only or auto-hiding toolbar. */
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
[tabindex="-1"]:focus { outline:3px solid var(--focus); outline-offset:5px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:12px; padding:12px; z-index:10; background:var(--panel); transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.site-header { max-width:1280px; margin:auto; padding:26px 36px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--border); }
.brand { font-size:14px; letter-spacing:2px; font-weight:750; text-decoration:none; display:flex; align-items:center; gap:12px; }
.brand-mark { background:var(--accent); color:var(--accent-text); border-radius:50%; width:36px; height:36px; display:grid; place-content:center; font-size:25px; }
.edition { font-size:11px; letter-spacing:1.5px; color:var(--muted); }
main { max-width:1280px; margin:auto; padding:44px 36px 20px; }
.intro { margin-bottom:34px; }
.eyebrow { font-size:11px; letter-spacing:1.8px; font-weight:750; margin:0 0 9px; color:var(--accent); }
h1 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.12; letter-spacing:-1.8px; margin:0 0 18px; font-weight:650; }
.intro>p:last-child { color:var(--muted); margin:0; }
h2 { font-size:1.3rem; line-height:1.4; margin:0; letter-spacing:-.4px; }
h3 { font-size:1rem; margin:0; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 326px; align-items:start; gap:26px; }
.player-card,.preferences,.downloads { background:var(--panel); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.card-heading { padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.help-link,.section-title a { font-size:.8rem; white-space:nowrap; }
.video-stage { background:var(--stage); display:grid; }
video { width:100%; max-height:70vh; aspect-ratio:16/9; display:block; object-fit:contain; }
video::cue { color:#fff; background:rgba(0,0,0,.95); font-size:1.15em; }
.media-summary { margin:0; padding:14px 24px 0; color:var(--muted); font-size:.85rem; }
.controls { padding:12px 24px 0; }
.timeline { display:flex; align-items:center; gap:16px; }
.timeline input { flex:1; min-width:0; }
.time { color:var(--muted); font-size:.8rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.transport,.transport-group,.quick-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.transport { justify-content:space-between; margin:6px 0 18px; }
.transport-group #volume { width:82px; }
.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); min-width:93px; }
.quick-controls { padding-top:17px; border-top:1px solid var(--border); }
.quick-controls a { font-size:.85rem; margin-left:auto; }
.status { padding:14px 24px 20px; margin:0; color:var(--muted); font-size:.85rem; min-height:52px; }
.preferences-title { padding:22px; background:var(--soft); border-bottom:1px solid var(--border); }
.preferences-title p:last-child { font-size:.8rem; color:var(--muted); margin:8px 0 0; }
.preference { padding:18px 22px; border-bottom:1px solid var(--border); }
.section-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.preference label { display:block; color:var(--muted); font-size:.8rem; margin-bottom:5px; }
.preference p { color:var(--muted); font-size:.8rem; margin:8px 0 0; }
.apply-row { display:flex; gap:8px; }
.apply-row select { flex:1; min-width:0; }
.reset { display:block; width:calc(100% - 44px); margin:18px 22px; }
.downloads { padding:25px; margin-top:26px; display:grid; grid-template-columns:240px 1fr; gap:22px; }
.downloads p { color:var(--muted); font-size:.85rem; margin:8px 0; }
.downloads a { font-size:.85rem; }
.download-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-content:center; }
.download-links a { display:flex; align-items:center; gap:14px; padding:15px; border:1px solid var(--border); border-radius:10px; text-decoration:none; min-height:72px; }
.download-links a>span:first-child { background:var(--soft); border-radius:50%; width:32px; height:32px; display:grid; place-content:center; font-size:22px; flex-shrink:0; }
.download-links strong { display:block; font-size:1rem; }
.download-links small { display:block; color:var(--muted); font-size:.8rem; }
#download-note { grid-column:1/-1; margin:0; }
.transcript { margin:0 24px 22px; padding:18px; background:var(--soft); border-radius:8px; }
.transcript p { margin:12px 0; }
footer { padding:25px 0 10px; display:flex; gap:24px; flex-wrap:wrap; color:var(--muted); font-size:.8rem; }
footer span { margin-right:auto; }
.notice { padding:16px; background:var(--soft); }
/* Help files reuse the same readable palette and generous line length. */
.help-page { max-width:800px; }
.help-page article { background:var(--panel); padding:clamp(18px,4vw,40px); border:1px solid var(--border); border-radius:14px; margin-top:25px; }
.help-page h1 { font-size:2.3rem; }
.help-page li { margin:10px 0; }
.help-page h2 { margin-top:24px; }
.player-card:fullscreen { overflow:auto; background:var(--panel); border-radius:0; padding-bottom:20px; }
.player-card:fullscreen video { max-height:65vh; }
@media(max-width:1000px) { .workspace { grid-template-columns:minmax(0,1fr) 290px; gap:18px; } .transport-group #volume { width:65px; } .transport { gap:12px; } }
@media(max-width:800px) { .workspace { grid-template-columns:1fr; } .preferences { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .preferences-title { grid-column:1/-1; } .downloads { grid-template-columns:1fr; } }
@media(max-width:480px) { main { padding:28px 16px 16px; } .site-header { padding:18px 16px; flex-wrap:wrap; } .edition { letter-spacing:.8px; } .card-heading,.controls { padding-left:16px; padding-right:16px; } .preferences { display:block; } .download-links { grid-template-columns:1fr; } .quick-controls a { margin-left:0; } .desktop-break { display:none; } .transport-group { gap:6px; } .downloads { padding:20px; } h1 { letter-spacing:-.7px; } }
/* Respect reduced motion and OS forced colours without relying on colour to convey state. */
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media(forced-colors:active) { :focus-visible { outline-color:Highlight; } button,select,.download-links a { border:1px solid ButtonText; } button[aria-pressed="true"] { outline:2px solid Highlight; } input[type="range"] { forced-color-adjust:auto; } }