:root{ --bg:#FCFAF5; --ink:#2E2A24; }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}
  body{font-family:'Be Vietnam Pro','Helvetica Neue',sans-serif;cursor:none}
  canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

  #grain{position:fixed;inset:-60px;pointer-events:none;z-index:6;opacity:.20;
         mix-blend-mode:soft-light;background-repeat:repeat}

  .hud{position:fixed;z-index:8;color:#5A5248;pointer-events:none;transition:opacity .5s}
  .hud button{pointer-events:auto;font:inherit;color:inherit;letter-spacing:inherit;
       text-transform:inherit;background:none;border:0;padding:0;cursor:none}
  #top{bottom:158px;left:38px}
  #top .mark{font:400 30px/1 'Playfair Display',serif;color:#2E2A24}
  #top .sub{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:9px}
  #tr{top:34px;right:38px;font:300 12px/1 'Be Vietnam Pro',sans-serif;letter-spacing:.26em}
  #tr b{font-weight:400;color:#2E2A24}
  #bl{bottom:36px;left:38px;max-width:338px}
  #bl #cname{font:400 italic 18px/1 'Playfair Display',serif;color:#2E2A24;
       margin-bottom:10px;transition:opacity .35s}
  #bl #copy{font:300 14px/1.7 'Be Vietnam Pro',sans-serif;color:#4A4238;transition:opacity .35s}
  #br{bottom:36px;right:38px;text-align:right;font-size:10.5px;letter-spacing:.18em;
       text-transform:uppercase;opacity:.5}
  #br #snd{display:block;margin-top:9px}

  #cur{position:fixed;z-index:20;top:0;left:0;pointer-events:none;
       width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid #97a09d;border-radius:99px;
       transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),
                  margin .45s cubic-bezier(.2,.8,.2,1),background-color .45s,border-color .45s}
  #cur.on{width:92px;height:92px;margin:-46px 0 0 -46px;
       background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.9);
       backdrop-filter:saturate(1.12) brightness(1.05)}
  #cur.on::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
       margin:-3px 0 0 -3px;border-radius:99px;background:#fff}

  #pre{position:fixed;inset:0;z-index:30;background:var(--bg);display:grid;place-items:center;padding-bottom:6vh}
  #pct{font-size:clamp(46px,7vw,104px);color:#e4e1dd;line-height:1;user-select:none}
  #pct span{display:inline-block}

  /* ---------- phone / tablet ----------
     The original swaps its whole scene config on mobileAndTabletCheck(); these
     are the presentation halves of that. */
  body.coarse{cursor:auto}
  body.coarse #cur{display:none}
  body.coarse #br{display:none}      /* the original drops audio on mobile too */
  @media (max-width:700px){
    #top{bottom:auto;top:18px;left:20px}
    #top .mark{font-size:23px}
    #top .sub{font-size:9px;letter-spacing:.16em;margin-top:6px}
    #tr{top:24px;right:20px;font-size:10.5px}
    #bl{bottom:22px;left:20px;right:20px;max-width:none}
    #bl #cname{font-size:15px;margin-bottom:7px}
    #bl #copy{font-size:12px;line-height:1.62}
    #br{display:none}
    #pct{font-size:clamp(38px,13vw,64px)}
    #grain{opacity:.16}
  }