/* Original mobile identity, with a fluid desktop composition. */
html { color-scheme: light; padding: 0; }
body { background: #FBF7F4; }
#app { max-width: none; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; isolation: isolate; }
.demo-banner { padding: calc(7px + env(safe-area-inset-top, 0px)) 18px 7px; background: var(--soft); color: var(--wine); font-size: 11px; display: flex; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.demo-banner button { text-decoration: underline; font-weight: 700; }
#scr { min-height: 0; overscroll-behavior-y: contain; }
.search input { min-width: 0; font-size: 16px; }
.field input { font-size: 16px; }
.top { gap: 12px; flex-wrap: wrap; }
.row > .grow { min-width: 0; overflow-wrap: anywhere; }
.cat { min-height: 84px; }
nav { flex-shrink: 0; }
nav button { min-height: 48px; }
.fav, .back { min-width: 44px; min-height: 44px; }
.toast { white-space: normal; text-align: center; width: max-content; }
.sheet { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.demo-entry { max-width: 460px; margin: 6vh auto; text-align: center; }
.demo-entry h1 { margin-top: 24px; }
.demo-entry .btn { margin-top: 12px; }
.pbody { overflow-wrap: anywhere; }
@media (min-width: 700px) {
  #scr { padding: 0 32px 32px; }
  .demo-banner { padding-left: 32px; padding-right: 32px; }
  h1 { font-size: 32px; }
  .top { padding-top: 24px; }
  .hero { padding: 28px; }
  .hero p { max-width: 440px; }
  #scr[data-screen="home"], #scr[data-screen="explore"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0 20px; }
  #scr[data-screen="home"] > :not(.card), #scr[data-screen="explore"] > :not(.card) { grid-column: 1 / -1; }
  .ph { height: 180px; }
  .chips { gap: 12px; }
  nav { padding-inline: max(24px, calc((100vw - 900px) / 2)); }
  .pbody { margin-inline: -32px; padding-inline: 32px; }
  .sheet { inset: 32px max(32px, calc((100% - 700px) / 2)); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 20px 80px #6b1e3a30; overflow: hidden; }
  #scr[data-screen="profile"], #scr[data-screen="editor"], #scr[data-screen="me"], #scr[data-screen="agenda"], #scr[data-screen="pro"], #scr[data-screen="pagenda"], #scr[data-screen="plans"] { padding-inline: max(32px, calc((100% - 900px) / 2)); }
}
@media (min-width: 1100px) {
  #scr { padding-inline: max(48px, calc((100% - 1320px) / 2)); }
  #scr[data-screen="home"], #scr[data-screen="explore"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .hero { min-height: 170px; }
  .cat { width: 88px; }
  .cat i { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }