:root { --ink:#f3f1ea; --dim:rgba(243,241,234,.62); --line:rgba(255,255,255,.16); --gold:#c9a84c; --chrome:rgba(10,10,12,.62); }
  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; background:#0b0d0f; color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; overflow:hidden; }
  /* The film is 16:9 whatever shape the window is: framing judged in a portrait pane is framing judged wrong. */
  canvas { display:block; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(100vw, calc(100vh * 16 / 9)); height:min(100vh, calc(100vw * 9 / 16)); }
  .title { position:fixed; left:20px; top:18px; pointer-events:none; text-shadow:0 1px 14px rgba(0,0,0,.7); }
  .title h1 { margin:0; font:400 24px/1.1 Georgia,serif; }
  .title p { margin:6px 0 0; font-size:12.5px; color:var(--dim); max-width:46ch; line-height:1.45; }
  .bar { position:fixed; left:16px; right:16px; bottom:16px; display:flex; gap:12px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:6px; background:var(--chrome); backdrop-filter:blur(10px); }
  .bar button { appearance:none; border:1px solid var(--line); background:transparent; color:var(--ink); font:500 12px/1 inherit; letter-spacing:.05em; padding:9px 13px; border-radius:4px; cursor:pointer; min-width:64px; }
  .bar button:hover { border-color:var(--gold); }
  .bar input[type=range] { flex:1; accent-color:var(--gold); }
  .bar .t { font:500 12px/1 ui-monospace,Menlo,monospace; color:var(--dim); min-width:92px; text-align:right; }
  .bar .seg { font-size:12px; color:var(--ink); min-width:150px; }
  .overlay { position:fixed; left:0; right:0; bottom:16%; text-align:center; pointer-events:none; font:400 40px/1.15 Georgia,serif; letter-spacing:.01em; text-shadow:0 2px 24px rgba(0,0,0,.75); opacity:0; transition:opacity .9s; }
  .overlay.on { opacity:1; }
  /* The opening Play button: one click starts the film and its sound together (browsers only allow sound after a click). */
  .start { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:132px; height:132px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(10,10,12,.55); backdrop-filter:blur(8px); color:var(--ink); font:500 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:border-color .2s, background .2s, transform .2s; z-index:2; }
  .start svg { margin-left:5px; }
  .start:hover, .start:focus-visible { border-color:var(--gold); background:rgba(10,10,12,.7); transform:translate(-50%,-50%) scale(1.04); outline:none; }
  .start[hidden] { display:none; }
  /* Presentation (the default). The opening screen is the title and Play only. While presenting, the bar (timeline,
     times, pause, sound) and the middle button appear when the mouse moves and fade when it rests: 2.5 s while playing,
     5 s while paused (Chris, 2026-09-28). The cursor goes with them. ?controls keeps the bar up for review. */
  body:not(.controls):not(.presenting) .bar { display:none; }
  body.presenting .title { display:none; }
  .bar, .start { transition:opacity .45s; }
  body.presenting.idle .bar, body.presenting.idle .start { opacity:0; pointer-events:none; }
  body.presenting.idle, body.presenting.idle canvas { cursor:none; }