/* Spike base: fits a 360px phone in portrait and landscape, no sideways scroll. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #0f1115; color: #e8e8ea; overflow-x: hidden; }
.wrap { width: min(1200px, 100%); margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
h1 { font-size: clamp(1.5rem, 5vw, 2.4rem); line-height: 1.15; margin: 0 0 .5rem; }
h2 { font-size: clamp(1.2rem, 3.6vw, 1.6rem); }
small, .muted, figcaption { font-size: 14px; color: #a9abb3; }   /* never under 12px */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; display: block; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
figure { margin: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table { border-collapse: collapse; min-width: 100%; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #2a2d35; }
a, button, select, input, summary, [role=button] { min-height: 44px; min-width: 44px; }
button, select, input { font: inherit; padding: 8px 14px; }
p a, li a, td a { min-height: 0; min-width: 0; }   /* links in text stay inline */
.stage { position: fixed; inset: 0; touch-action: none; }   /* full-screen canvas apps */
.stage canvas { width: 100%; height: 100%; }
@media (orientation: landscape) and (max-height: 500px) {   /* phone on its side */
  .wrap { padding-top: 8px; } h1 { font-size: 1.4rem; }
}