:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#081116;color:#eef4f6}*{box-sizing:border-box}body{margin:0}header{height:105px;max-width:1600px;padding:25px 5%;margin:auto;display:flex;justify-content:space-between;align-items:center}header a{color:inherit;text-decoration:none;font-size:30px;font-weight:800;letter-spacing:1px}header a span{display:block;font-size:8px;letter-spacing:2px;margin-top:6px;color:#b8c8ce}header p,.eyebrow{font-size:10px;letter-spacing:3px;color:#88cfe1}main{max-width:1600px;margin:auto;padding:0 3%}.carousel{aspect-ratio:16/9;position:relative;overflow:hidden;background:#101b22;border-radius:15px;isolation:isolate}.stage,.panel,.shade{position:absolute;inset:0}.panel{opacity:0;transition:opacity .8s;pointer-events:none}.panel.active{opacity:1}.panel video{width:100%;height:100%;object-fit:contain}.shade{background:linear-gradient(transparent 65%,#0009);pointer-events:none}.caption{position:absolute;bottom:28px;left:35px;pointer-events:none}h1{font-weight:400;font-size:clamp(20px,3vw,43px);margin:10px 0}#counter{font-size:11px;color:#d4e1e7;letter-spacing:2px}.controls{position:absolute;bottom:35px;right:30px;display:flex;gap:8px;opacity:0;transition:opacity .25s}.carousel:hover .controls,.carousel:focus-within .controls,.carousel.revealed .controls{opacity:1}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff38;background:#ffffff13;backdrop-filter:blur(22px);border-radius:30px;padding:12px 17px;min-height:44px}button:hover,button[aria-current=true]{background:#aeeaff26;border-color:#ace9f3}button:focus-visible,.carousel:focus-visible{outline:2px solid #9eeaff;outline-offset:3px}.progress{position:absolute;bottom:0;width:100%;height:3px;background:#ffffff15}.progress div{height:100%;background:#6ed2eb;width:0}.scenes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:24px 0}.scenes button{padding:0;overflow:hidden;text-align:left;border-radius:9px;background:#101d25;backdrop-filter:none}.scenes img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.scenes span{display:block;padding:12px;font-size:12px;color:#d1e1e6}footer{color:#82979f;font-size:11px;padding:12px 0 30px}@media(max-width:750px){header{height:82px;padding:20px 4%}header p{display:none}main{padding:0 3%}.caption{left:14px;bottom:60px}h1{font-size:20px}.eyebrow{display:none}#counter{margin-bottom:0}.controls{bottom:12px;right:12px;opacity:1;gap:5px}.controls button{padding:8px 12px;font-size:12px}.scenes{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.panel,.controls{transition:none}}

.category-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}.category-filters button[aria-pressed=true]{background:#aeeaff26;border-color:#ace9f3}.scenes button[hidden]{display:none}#category-summary{color:#b8c8ce;font-size:13px;margin:0 0 20px}

/* Keep mobile scene captions and controls outside the video picture — 2026-09-30. */
@media (max-width: 750px) {
  header a { max-width: 100%; overflow-wrap: anywhere; }
  .category-filters button { min-width: 44px; min-height: 44px; max-width: 100%; }
  .carousel { aspect-ratio: auto; padding-top: 56.25%; }
  .stage { inset: 0 0 auto; aspect-ratio: 16 / 9; }
  .shade { display: none; }
  .caption { position: relative; bottom: auto; left: auto; padding: 14px 16px 0; }
  .caption h1 { margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
  .caption #counter { margin: 8px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
  .controls {
    position: relative; bottom: auto; right: auto; display: grid; opacity: 1;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 8px; padding: 12px 16px 16px;
  }
  .controls button { min-width: 44px; min-height: 44px; padding: 8px 6px; font-size: 14px; line-height: 1.2; }
  .scenes span { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
  .scenes button { min-width: 0; }
}
@media (pointer: coarse) {
  button, header a { touch-action: manipulation; }
  .controls { opacity: 1; }
  .controls button { min-width: 44px; min-height: 44px; }
}