@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@700&family=IBM+Plex+Mono:wght@400&display=swap');
  /* ================= Intro loader ================= */
  html.intro-playing{overflow:hidden;}
  html.intro-playing body > *:not(#loader){visibility:hidden;}
  html.intro-playing body{background:#fff;}
  .loader{box-sizing:border-box;position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
    animation:loader-out .5s ease 4.6s forwards;cursor:pointer;}
  .loader.is-done{animation:loader-out .35s ease forwards;}
  @keyframes loader-out{to{opacity:0;visibility:hidden;}}

  .walker{animation:walk-in 2.3s cubic-bezier(.35,.15,.45,1) both;}
  @keyframes walk-in{from{transform:translateX(calc(50vw + 140px));}to{transform:translateX(0);}}
  .walker-inner{display:flex;flex-direction:column;align-items:center;animation:bob .32s ease-in-out 7 alternate;}
  @keyframes bob{to{transform:translateY(-5px);}}
  .lh{display:block;width:110px;height:auto;position:relative;z-index:2;}
  .lb{display:block;margin-top:-16px;position:relative;z-index:1;overflow:visible;}

  .lb .ink path,.lb .ink line{fill:none;stroke:#111;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
  .lb .ink circle{fill:#fff;stroke:#111;stroke-width:2;}
  .lb .torso{fill:#fff !important;}
  .lb .leg,.lb .arm{transform-box:view-box;}
  .lb .leg-l{transform-origin:46px 62px;animation:swing .32s ease-in-out 7 alternate;}
  .lb .leg-r{transform-origin:64px 62px;animation:swing .32s ease-in-out 7 alternate-reverse;}
  .lb .arm-l{transform-origin:37px 13px;animation:swing-sm .32s ease-in-out 7 alternate-reverse, hide .01s linear 2.35s forwards;}
  .lb .arm-r{transform-origin:73px 13px;animation:swing-sm .32s ease-in-out 7 alternate, hide .01s linear 2.35s forwards;}
  @keyframes swing{from{transform:rotate(-16deg);}to{transform:rotate(16deg);}}
  @keyframes swing-sm{from{transform:rotate(-12deg);}to{transform:rotate(12deg);}}
  @keyframes hide{to{opacity:0;}}
  @keyframes show{to{opacity:1;}}

  .lb .arm-hold,.lb .arm-whisk{opacity:0;animation:show .01s linear 2.35s forwards;}
  .lb .chasen .chasen-handle{stroke-width:3.2;}
  .lb .chasen .chasen-tines{stroke-width:1.3;}
  .lb .chasen{transform-box:view-box;animation:whisk .11s ease-in-out 2.5s 18 alternate;}
  @keyframes whisk{from{transform:translateX(-5px);}to{transform:translateX(5px);}}

  .lb .bowl{opacity:0;transform-box:view-box;transform-origin:55px 98px;animation:bowl-in .3s cubic-bezier(.3,1.6,.5,1) 2.25s forwards;}
  @keyframes bowl-in{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}
  .lb .bowl-body{fill:#fff;stroke:#111;stroke-width:2.4;stroke-linejoin:round;}
  .lb .bowl-foot{fill:none;stroke:#111;stroke-width:2.2;stroke-linejoin:round;}
  .lb .bowl-tea{fill:#7A9A3F;stroke:#111;stroke-width:1.2;}
  .lb .foam circle{fill:#D9E6B8;opacity:0;animation:show .3s ease 3s forwards;}

  .loader-caption{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E;
    opacity:0;animation:show .4s ease 2.4s forwards;}
  .loader-brand{margin-top:10px;font-family:'Spectral',serif;font-weight:700;font-size:20px;letter-spacing:.42em;padding-left:.42em;
    opacity:0;animation:show .5s ease 3.3s forwards;}
  .loader-brand span{letter-spacing:.2em;font-weight:600;font-size:16px;}

  @media (prefers-reduced-motion: reduce){ .loader{display:none;} }