/* ================= touch & small screens ================= */
  body.touch .btn .k, body.touch .keys{display:none}
  .touch-hints{display:none; margin-top:var(--s-lg); flex-wrap:wrap; gap:var(--s-xs) var(--s-lg);
    justify-content:center; font-size:13px; font-weight:500; color:var(--muted)}
  body.touch .touch-hints{display:flex}
  .touch-hints b{color:var(--on-dark); font-weight:600; margin-right:6px}

  @media (max-width:1200px){
    .hero{gap:var(--s-xl); padding:var(--s-xl) 0 72px}
    .hero-copy h1{font-size:56px; letter-spacing:-1.1px}
    .trust-card{padding:var(--s-lg) var(--s-lg) 0 0}
    .trust-card + .trust-card{padding-left:var(--s-lg)}
    .mode-t{font-size:22px}
    .closer h2{font-size:48px; letter-spacing:-1px}
  }
  @media (max-width:900px){
    .hero{grid-template-columns:1fr; gap:var(--s-xl); padding:var(--s-md) 0 64px}
    .hero-copy h1{font-size:44px; letter-spacing:-.8px}
    .hero-copy p{font-size:16px; max-width:none; margin-bottom:var(--s-lg)}
    .mode-row summary{grid-template-columns:44px 1fr 24px; grid-template-rows:auto auto; row-gap:2px}
    .mode-t{grid-column:2; font-size:21px}
    .mode-l{grid-column:1/3; grid-row:2; padding-top:4px}
    .mode-x{grid-column:3; grid-row:1}
    .mode-row ul{padding:0 0 var(--s-md) 44px}
    .step-list{grid-template-columns:1fr; gap:var(--s-lg)}
    .how-split{grid-template-columns:1fr; gap:var(--s-lg)}
    .howto{padding-bottom:64px}
    .trust-grid{grid-template-columns:1fr}
    .keycaps span{min-width:44px; height:44px; font-size:15px}
    .keysrow{padding-bottom:64px}
    .trust-card{padding:var(--s-lg) 0}
    .trust-card + .trust-card{border-left:0; border-top:1px solid var(--hairline); padding-left:0}
    .modes,.faq,.trust{padding-bottom:64px}
    .sum-card h2{font-size:32px; letter-spacing:-1px}
  }
  @media (max-width:768px){
    .sum-grid{grid-template-columns:repeat(2,1fr); gap:var(--s-xs)}
    body.notes-open #stage{padding-right:var(--s-sm)}
    .notes{width:100%; padding-bottom:env(safe-area-inset-bottom)}
    .overview{padding:calc(60px + env(safe-area-inset-top)) var(--s-sm) var(--s-xl)}

    /* HUD keeps only what a thumb can use: mode toggles + review + language */
    .hud{height:56px; padding:0 var(--s-xs) 0 var(--s-sm); gap:var(--s-xxs);
      padding-top:env(safe-area-inset-top); height:calc(56px + env(safe-area-inset-top))}
    .hud .btn span.lbl{display:none}
    .hud .btn{height:44px; width:44px; padding:0; justify-content:center}
    .hud .btn.icon{height:44px; width:44px}
    #btnCompare,#btnPresent,#btnFull{display:none}       /* need a second window or a keyboard */
    .score{height:40px}
    .score .name{max-width:26vw; font-size:12px; padding:0 var(--s-xs)}
    .score .num{padding:0 var(--s-xs)}
    .score .num b{font-size:16px}
    .score .clock{padding:0 var(--s-xs); font-size:13px}

    #stage{padding:calc(60px + env(safe-area-inset-top)) var(--s-sm)
      calc(64px + env(safe-area-inset-bottom))}
    .zone{top:calc(60px + env(safe-area-inset-top)); bottom:calc(64px + env(safe-area-inset-bottom)); width:26%}

    .rail{height:auto; padding:var(--s-xs) var(--s-sm) calc(var(--s-xs) + env(safe-area-inset-bottom))}
    .rail-ticks{height:22px}
    .tick.current{height:22px}
    .rail-legend{gap:var(--s-sm); font-size:11px; letter-spacing:1px; flex-wrap:wrap}

    /* the pen dock scrolls sideways instead of overflowing a 380px viewport */
    .findbar{top:calc(64px + env(safe-area-inset-top)); width:calc(100vw - 16px)}
    .findbar input{width:100%; flex:1}
    .dock{bottom:calc(72px + env(safe-area-inset-bottom)); max-width:calc(100vw - 16px);
      overflow-x:auto; overflow-y:hidden; justify-content:flex-start;
      -webkit-overflow-scrolling:touch}
    .tool{flex:0 0 auto; width:40px; height:40px}
    .sw{width:24px; height:24px}

    .site{padding:0 var(--s-md) var(--s-xl)}
    .site-nav{height:60px}
    .nav-link{display:none}
    .hero-copy h1{font-size:34px; letter-spacing:-.5px}
    .hero-copy p{font-size:15px; margin-bottom:var(--s-lg)}
    .kick{margin-bottom:var(--s-md)}
    .closer{padding:40px 0 64px}
    .closer h2{font-size:34px; letter-spacing:-.5px}
    .cta-row{flex-direction:column; align-items:stretch}
    .link-sample{height:auto; padding:10px 0}
    .demo-drop{font-size:11px}
    .btn-kick,.btn-ghost{width:100%; height:48px; font-size:15px}
    .ov-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--s-xs)}
    .sum-card{padding:var(--s-lg) var(--s-md)}
    .sum-cell b{font-size:26px}
    .toast{bottom:calc(84px + env(safe-area-inset-bottom)); max-width:calc(100vw - 32px); text-align:center}
    .langmenu{top:52px}
    .help-card{padding:var(--s-lg) var(--s-md)}
  }
  @media (max-width:768px) and (orientation:landscape){
    .hud{height:calc(48px + env(safe-area-inset-top))}
    #stage{padding:calc(52px + env(safe-area-inset-top)) var(--s-sm) calc(52px + env(safe-area-inset-bottom))}
    .hero-copy h1{font-size:30px}
    .rail-legend{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important; animation:none !important}}

  /* keep-all stops a Hangul word being split across lines, which is right for
     Korean and is used throughout this stylesheet. Japanese and Chinese put no
     spaces between words, so the same rule leaves the line with nowhere legal
     to break and a long headline simply runs off the page. Those two scripts
     break normally; line-break:strict keeps a line from opening on 、 or 。
     Last file in the cascade on purpose — this has to outrank every keep-all
     above it. */
  html[lang="ja"] *, html[lang="zh"] *{word-break:normal; line-break:strict}