  *{box-sizing:border-box}
  html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#f4ecdc;color:var(--bg0,#1b120b);font-family:Inter,system-ui,sans-serif;-webkit-user-select:none;user-select:none}
  canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px}
  header{position:fixed;inset:0 0 auto;max-width:960px;margin-inline:auto;z-index:5;padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));pointer-events:none}
  .brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
  .brand a{display:grid;place-items:center;width:44px;height:44px;margin-left:-10px;color:inherit;text-decoration:none;font-size:26px;pointer-events:auto}
  #demo-tag{margin-left:auto;font-size:10px;letter-spacing:.14em;border:1px solid #395f5760;border-radius:20px;padding:6px 9px}
  .hud{display:grid;grid-template-columns:1fr 74px 1fr;align-items:center;margin-top:8px;padding:12px 16px;border:1px solid #fff9;border-radius:20px;background:#f4ecdcdd;box-shadow:0 5px 20px #26422b12}
  .hud small{display:block;font-size:10px;letter-spacing:.13em;font-weight:700;margin-bottom:3px;color:#6b5a44}
  #lives{font-size:22px;color:#b83e32;letter-spacing:2px;white-space:nowrap}
  #combo{display:block;text-align:center;font-size:34px;line-height:1.2;color:#98630c;transform-origin:center;border-radius:12px;transition:color 100ms,background-color 100ms,box-shadow 100ms}
  #combo.is-pulsing{color:#b83e32;background:#ffe09c;box-shadow:0 0 20px #efb83e99}
  .score-box{text-align:right;font-variant-numeric:tabular-nums}
  #score{font-size:26px;line-height:1.2}
  #start{position:fixed;inset:calc(158px + env(safe-area-inset-top)) 20px auto;text-align:center;z-index:6;pointer-events:none}
  .eyebrow{font-size:10px;letter-spacing:.22em;font-weight:800;color:#3b6258;margin:0 0 10px}
  h1{font:800 clamp(34px,10vw,46px)/1.05 Lora,Georgia,serif;margin:0 0 16px}
  #start p:not(.eyebrow){font-size:14px;line-height:1.6;margin:5px auto;max-width:360px}
  button{font:800 16px Inter,system-ui;cursor:pointer;touch-action:manipulation}
  .primary{min-height:48px;border:0;border-radius:14px;padding:14px 30px;background:#b83e32;color:#fff;box-shadow:0 5px 0 #842b25;transition:transform 120ms}
  .primary:active{transform:translateY(3px)}
  #go{margin-top:18px;pointer-events:auto}
  #caught{position:fixed;top:80%;left:50%;transform:translate(-50%,-50%);padding:8px 20px;border:1px solid #fff5;border-radius:18px;background:#f4ecdc55;color:#765532;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
  #footer{position:fixed;top:86%;left:16px;right:16px;text-align:center;color:#695335b3;font-size:12px;pointer-events:none}
  .game-audio{position:fixed;z-index:8;bottom:calc(14px + env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  .game-audio button{min-height:44px;padding:8px 14px;border:1px solid #9b805450;border-radius:24px;background:#f4ecdcdd;color:var(--bg0);font-size:12px}
  .game-audio output{flex-basis:100%;font-size:12px;text-align:center}
  #demo-result{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgb(var(--pan2,20 13 8) / .55);padding:24px}
  .result-card{width:min(340px,100%);border-radius:24px;background:#f4ecdc;padding:28px;text-align:center;box-shadow:0 20px 60px #20130840}
  .result-card h2{font:700 30px Georgia,serif;margin:8px 0}
  #demo-score{font:800 56px Georgia,serif;display:block;margin:12px 0}
  .result-card p{font-size:13px;line-height:1.6;color:#6b5a44}
  [hidden]{display:none!important}
  @media(max-height:600px){#start{inset:132px 16px auto}h1{font-size:30px;margin-bottom:8px}#start p:not(.eyebrow){font-size:12px}#go{margin-top:8px}.eyebrow{margin-bottom:6px}.hud{margin-top:0;padding:6px 12px}#caught{font-size:20px;padding:6px 16px}#footer{top:87%;font-size:11px}}
  @media(orientation:landscape) and (max-height:600px){#start{left:auto;right:5%;width:42%;top:132px}#start p:not(.eyebrow){line-height:1.35}#caught{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));transform:none}#footer{top:auto;bottom:calc(24px + env(safe-area-inset-bottom));left:auto;right:max(16px,env(safe-area-inset-right));max-width:180px}.game-audio{left:145px;right:205px}}
  @media(prefers-reduced-motion:reduce){button,#combo{transition:none}}
