:root{--bg:#f5f4f0;--blue:#0649ff;--ink:#242522}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}main{height:100dvh;min-height:420px;position:relative}header{position:absolute;z-index:3;top:0;left:0;right:0;padding:32px 42px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none}header a{pointer-events:auto;text-decoration:none;color:inherit}.brand{display:flex;flex-direction:column;gap:8px}.brand strong{font-size:31px;line-height:1;font-weight:900;letter-spacing:-1.8px;color:var(--blue)}.brand>span{font-size:9px;line-height:1.5;letter-spacing:.35px}.mobile-break{display:none}nav{display:flex;align-items:center;gap:27px}.social{font-size:15px;font-weight:600}.social span{font-size:11px;margin-left:4px}.buy{background:var(--blue);color:white!important;border-radius:3px;padding:15px 19px;font-size:10px;letter-spacing:1px;font-weight:700;display:flex;gap:23px;align-items:center}.buy span{font-size:15px;font-weight:400}.buy:hover{background:#0038cf}.social:hover{color:var(--blue)}#stage{position:absolute;inset:65px 0 38px;touch-action:none}canvas{display:block;width:100%;height:100%}.bottom{position:absolute;bottom:27px;right:42px;display:flex;align-items:center;gap:20px}button{border:0;background:transparent;color:var(--ink);cursor:pointer;font-family:inherit}#pause{font-size:17px;width:28px;height:36px;color:#777}#sound{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:1.3px;padding:8px 0}#sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#sound[aria-expanded=true]{color:var(--blue)}#loading{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:15px;max-width:270px;text-align:center;line-height:1.6}#loading[hidden]{display:none}#loadtext{font-size:11px;color:#737570}.spinner{display:block;width:22px;height:22px;border:1px solid #d8d9d4;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#music{position:absolute;z-index:5;right:42px;bottom:77px;width:356px;padding:14px;background:#fff;border:1px solid #e5e5e0;border-radius:4px;box-shadow:0 10px 40px #0000000a}#music[hidden]{display:none}.music-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.music-heading strong{display:block;font-size:12px;font-weight:600}.music-heading a{font-size:10px;color:#777;text-decoration:none;display:block;margin-top:5px}.music-heading button{font-size:22px;line-height:1;padding:0 3px}#youtube{width:100%;height:200px;border:0}.fallback{display:block;text-align:right;font-size:9px;color:#777;text-decoration:none;margin-top:10px}a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:5px}@media(max-width:600px){header{padding:24px 22px}.brand strong{font-size:27px}.brand>span{font-size:8px;line-height:1.4}.mobile-break{display:block}nav{gap:17px}.buy{padding:12px 13px;font-size:9px;gap:13px}.social{font-size:14px}.social span{display:none}#stage{inset:92px 0 55px}.bottom{right:22px;bottom:23px}#music{right:16px;bottom:73px;width:min(356px,calc(100vw - 32px))}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

.social svg{width:17px;height:17px;display:block;fill:currentColor}.buy{padding:13px 19px;gap:0}#sound[aria-pressed="true"]{color:var(--blue)}

/* Minimal full-screen loading state. */
#loading{position:fixed;inset:0;top:0;left:0;transform:none;max-width:none;z-index:20;background:var(--bg);justify-content:center;gap:13px;opacity:1;transition:opacity .3s ease;line-height:1}
#loading.is-ready{opacity:0;pointer-events:none}
.loading-brand{color:var(--blue);font-size:27px;font-weight:900;letter-spacing:-1.6px;line-height:1}
.loading-track{height:1px;width:77px;background:#dce1ee;overflow:hidden}
#loading-progress{height:100%;display:block;background:var(--blue);width:0;transition:width .12s linear}
#loadtext{max-width:270px;line-height:1.6;margin-top:8px}
.social svg{width:15px;height:15px}
.buy{font-size:9px;padding:12px 17px}
@media(max-width:600px){.buy{font-size:8.5px;padding:11px 12px}.social svg{width:14px;height:14px}}
@media(prefers-reduced-motion:reduce){#loading,#loading-progress{transition:none}}

/* Desktop sizing; preserve the existing mobile and tablet styles. */
@media (min-width:1024px){
  .brand{gap:10px}
  .brand strong{font-size:39px;letter-spacing:-2.2px}
  .brand>span{font-size:12px}
  nav{gap:30px}
  .social{display:flex;align-items:center;justify-content:center;min-width:36px;min-height:40px}
  .social svg{width:18px;height:18px}
  .buy{font-size:11px;padding:14px 20px;min-height:42px}
  .bottom{gap:25px}
  #pause{font-size:21px;width:35px;height:45px}
  #sound{font-size:11.25px;gap:12px;padding:10px 0;min-height:45px}
  #sound svg{width:25px;height:25px}
}