*{box-sizing:border-box}
  html,body{margin:0;min-height:100%;background:#F5EFE3}
  body{overflow:auto}
  #root{
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right))
      max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left));
  }
  .film-player{
    width:min(100vw,calc(177.7778dvh - 144px),1920px);
    max-width:100%;
  }
  .film-frame{width:100%;aspect-ratio:16/9;line-height:0;overflow:hidden}
  .film-frame svg{display:block;width:100%;height:100%}
  .film-controls{
    display:flex;min-height:63px;align-items:center;gap:clamp(8px,2vw,16px);width:100%;
    padding:clamp(9px,1.6vw,14px) clamp(10px,2vw,18px);background:#F5EFE3;color:#29343A;
    border-top:1px solid #B8AA98;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:clamp(10px,1.5vw,12px);line-height:1.2;letter-spacing:.1em;
  }
  .film-controls button{
    flex:none;min-height:44px;padding:7px clamp(10px,2vw,16px);border:1px solid #706A63;
    border-radius:3px;background:transparent;color:#29343A;font:inherit;letter-spacing:inherit;cursor:pointer;
  }
  .film-controls input[type="range"]{flex:1;min-width:0;accent-color:#67518D}
  .film-controls span{
    min-width:clamp(72px,14vw,96px);color:#706A63;text-align:right;white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .mobile-caption{display:none}
  @media (max-width:720px){
    .film-player{width:min(100vw,calc(177.7778dvh - 240px))}
    .mobile-caption{
      display:flex;
      min-height:64px;
      align-items:center;
      padding:10px 18px;
      background:#FFF9F0;
      color:#29343A;
      border-top:1px solid #B8AA98;
      font-family:"Spectral",Georgia,serif;
      font-size:clamp(17px,4.8vw,23px);
      font-weight:400;
      line-height:1.2;
    }
  }

html,body{width:100%;height:100%} body{display:grid;place-items:center} button:focus-visible,input:focus-visible{outline:3px solid #67518D;outline-offset:3px}