/* Compact only the surrounding chrome on shorter laptop viewports; lesson remains unchanged. */
@media (min-width: 701px) and (max-height: 800px) {
  .wto-typing-test { padding-top: 12px; }
  .wto-site-header { padding: 0; }
  .wto-brand { font-size: 26px; }
  .wto-brand-mark { width: 43px; height: 29px; font-size: 19px; }
  .wto-settings { margin: 14px 0 12px; }
  .wto-typing-test.is-running .wto-settings { margin: 14px 0 12px; }
  .wto-test-stage { padding-top: 10px; }
  .wto-live-stats { margin-bottom: 6px; }
  .wto-advanced-stats { margin-bottom: 6px; }
  .wto-start-hint { margin: 7px 0; }
  .wto-keyboard { margin-top: 6px; transform: scale(.88); transform-origin: top center; margin-bottom: -14px; }
  .wto-bottom-controls { margin-top: 16px; }
  .wto-app-footer { bottom: 10px; }
}

.wto-app-footer i { box-sizing: border-box; width: 38px; min-width: 38px; height: 12px; border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(circle at 6px 6px, var(--wto-bg) 0 3px, var(--wto-text) 3.5px 5px, transparent 5.5px), radial-gradient(circle at 19px 6px, var(--wto-accent) 0 5px, transparent 5.5px), radial-gradient(circle at 32px 6px, var(--wto-text) 0 5px, transparent 5.5px); }