@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/ibm-plex-mono-400.ttf') format('truetype')}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url('/assets/ibm-plex-mono-500.ttf') format('truetype')}
  @font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/libre-caslon-display-400.ttf') format('truetype')}
  @font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/libre-caslon-text-400.ttf') format('truetype')}
  :root{
    --ink:#0A1315; --ledger:#DCE4DD; --brass:#D2A457; --brass-hi:#DFB86E;
    --slate:#5F7C87; --muted:#8CA1A3; --line:#1C2D31; --line2:#2E454B;
    --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --serif:"Libre Caslon Text", Georgia, "Times New Roman", serif;
    --hh:64px;
    color-scheme:dark;
  }
  *,*::before,*::after{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{background:var(--ink);color:var(--ledger);font-family:var(--serif);font-style:normal;overflow:hidden;-webkit-font-smoothing:antialiased}

  /* ---- top bar ---- */
  .top{position:fixed;top:0;left:0;right:0;height:var(--hh);z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:0 calc(clamp(16px,3vw,40px) + env(safe-area-inset-right,0px)) 0 calc(clamp(16px,3vw,40px) + env(safe-area-inset-left,0px));
    background:var(--ink);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center}
  .brand img{display:block;height:22px;width:auto;filter:brightness(0) invert(.9)}
  .top nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
  .top nav a{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
    transition:color .2s,border-color .2s}
  .cta{color:var(--brass);padding:10px 0}
  .cta:hover{color:var(--brass-hi)}
  .cta .short{display:none}
  .login{display:flex;align-items:center;height:34px;padding:0 16px;border:1px solid var(--line2);border-radius:2px;color:var(--ledger)}
  .login:hover{border-color:var(--slate)}

  /* ---- film ---- */
  .stage{position:fixed;inset:var(--hh) 0 0 0;overflow:hidden}
  .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity .9s ease}
  .stage.calm #fx{opacity:.92}
  .shade{position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;
    background:linear-gradient(to top, rgba(10,19,21,.92), rgba(10,19,21,.5) 45%, rgba(10,19,21,0))}
  .cap{position:absolute;left:0;right:0;bottom:calc(clamp(48px,15vh,160px) + env(safe-area-inset-bottom,0px));margin-inline:auto;
    width:min(34em, calc(100% - 48px));text-align:center;pointer-events:none;transition:opacity .45s ease, transform .45s ease}
  .cap.out{opacity:0;transform:translateY(6px)}
  .ln{font-size:clamp(20px,2.1vw,30px);line-height:1.22;margin:0 auto .5em;max-width:26ch;text-wrap:balance}
  .sb{font:400 11.5px/1.55 var(--mono);letter-spacing:.04em;color:var(--muted);max-width:52ch;margin-inline:auto}
  .pause{position:absolute;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(clamp(20px,6vh,56px) + env(safe-area-inset-bottom,0px));width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;background:transparent;color:var(--muted);border:1px solid var(--line2);cursor:pointer;
    transition:color .2s, border-color .2s}
  .pause:hover{color:var(--ledger);border-color:var(--slate)}
  .pause svg{width:12px;height:12px;fill:currentColor}

  :focus-visible{outline:1px solid var(--brass);outline-offset:4px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  @media (max-width:520px){
    :root{--hh:56px}
    .brand img{height:19px}
    .top nav a{font-size:10.5px;letter-spacing:.09em}
    .login{height:32px;padding:0 12px}
    .sb{font-size:10.5px}
    .pause{right:16px;width:30px;height:30px}
  }
  @media (max-width:400px){
    .cta .long{display:none}
    .cta .short{display:inline}
  }
  @media (max-height:520px){
    .shade{height:30%}
    .cap{bottom:calc(14px + env(safe-area-inset-bottom,0px));width:calc(100% - 140px)}
    .ln{font-size:17px;max-width:none;margin-bottom:0}
    .sb{display:none}
    .pause{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  }
  @media (prefers-reduced-motion:reduce){
    .cap{transition:none}
  }