.home-screen[hidden], .home-screen-help[hidden] { display: none; }
.home-screen { display: none; }
@media (max-width: 640px) {
  .home-screen { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px 8px; position: fixed; z-index: 49; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--home-screen-dock, 82px) + 8px); padding: 10px 10px 10px 14px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 3px 18px #0002; }
  .home-screen-copy p { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.6; }
  .home-screen button { min-height: 44px; cursor: pointer; color: var(--primary); background: transparent; border: 0; font: inherit; font-size: 13px; text-align: left; }
  .home-screen-copy button { padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
  .home-screen .home-screen-close { text-align: center; font-size: 26px; align-self: start; }
  .home-screen :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
  .home-screen-help { grid-column: 1 / -1; max-height: min(45dvh, 360px); overflow-y: auto; overscroll-behavior: contain; font-size: 13px; line-height: 1.7; border-top: 1px solid var(--hairline); padding: 10px 4px 0; }
  .home-screen-help h2 { font-size: 15px; margin: 0 0 8px; }
  .home-screen-help ol { padding-left: 22px; }
  .home-screen-help li { margin: 6px 0; }
  .home-screen-help a, .home-screen-help button { display: block; padding: 10px 0; }
  .home-screen-note { color: var(--ink-2); }
}