/* Page viewport rules; component internals live with their feature stylesheet. */
@media (max-width:900px) {
  :root { --header-height:56px; --main-top-gap:16px; }
  .page { width:min(680px, calc(100% - (var(--space-4) * 2))); }
  .topbar { gap:var(--space-3); }
  main { grid-template-columns:1fr; padding-top:calc(var(--header-height) + var(--main-top-gap)); }
  .column { grid-column:1; }
}
@media (max-width:560px) {
  .page { width:calc(100% - (var(--space-3) * 2)); }
}
@media (prefers-reduced-motion:reduce) {
  html:focus-within { scroll-behavior:auto; }
  *, *:before, *:after { scroll-behavior:auto!important; transition-duration:.01ms!important; transition-delay:0ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}