/* The guess board keeps full available width. Short screens scroll the
   explainer rather than shrinking its controls or discarding diagrams. */
button, input, .toc a { min-height:44px; min-width:44px; touch-action:manipulation; }
.guess { grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); }
.guess button { height:44px; }
.swatches { flex-wrap:wrap; }
.sw { width:44px; height:44px; flex:0 0 auto; }
.locale-bar { position:fixed; top:10px; right:12px; z-index:10; display:flex; gap:8px; background:var(--paper); padding:6px; border:1px solid var(--ink); border-radius:18px; }
.locale-bar button,.locale-bar a { font:600 14px var(--body); border:0; background:transparent; color:var(--ink); min-height:44px; padding:10px; text-decoration:none; }
.locale-bar button[aria-pressed=true] { background:var(--ink); color:var(--paper); border-radius:12px; }
.hero .inner { padding-top:90px; padding-bottom:100px; }
.hero h1 { font-size:clamp(60px,10vw,140px); }
.stepcap { min-width:0; flex-basis:260px; }
.btn { height:auto; min-height:44px; padding-top:8px; padding-bottom:8px; }
/* A scrolling article keeps native page scrolling; only its controls suppress
   long-press selection. Touch must not retain desktop hover transforms. */
button { user-select:none; -webkit-user-select:none; }
@media (hover:none) { .btn:hover,.sw:hover,.guess button:hover { transform:none; } }
#guess,.game { scroll-margin-top:90px; }
@media(max-width:600px) { .guess { grid-template-columns:repeat(5,minmax(44px,1fr)); } .big-eq{font-size:22px} .fig { padding:14px; } .clock-wrap { grid-template-columns:minmax(0,1fr); } .hero p { max-width:90%; } }