*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* This is a phone-shaped web app, not a web page — desktop scrollbars
   on the inner scrollers look out of place. Hide them everywhere while
   keeping scroll/pan behaviour intact. Mobile browsers already auto-hide. */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}

html,
body {
  margin: 0;
  padding: 0;
  /* The whole app is a phone-shaped non-scrolling surface; the page itself
     never scrolls. Inner screens own their scrollers. Locking html/body to
     the dynamic viewport (100dvh) means mobile-browser chrome resizing can
     never push content under the URL bar. */
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #e8ece4;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  justify-content: center;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.2;
  font-weight: 700;
}

p {
  margin: 0;
}

::selection {
  background: var(--color-surface-tinted);
  color: var(--color-primary-dark);
}

.app-frame {
  width: 100%;
  /* No max-width on mobile — the frame fills whatever the device gives us
     (iPhone Pro Max 430, Pixel 7 412, …) so the page-body grey never bleeds
     through on the sides. The 402-px Paper cap is applied only on desktop
     in the `min-width: 480px` block below. */
  background: var(--color-background);
  position: relative;
  overflow: hidden;
  height: 100dvh;
  box-shadow: 0 0 0 1px rgba(10, 77, 107, 0.06),
    0 30px 80px rgba(10, 77, 107, 0.18);
}

.screen-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease-entrance),
    transform 380ms var(--ease-entrance);
  will-change: opacity, transform;
}

.screen.is-entering-from-right {
  transform: translateX(24px);
}

.screen.is-entering-from-left {
  transform: translateX(-24px);
}

.screen.is-entering-from-bottom {
  transform: translateY(24px);
}

/* Declared after the entering classes so that, at equal specificity, the
   active state's transform:none wins and the screen settles at translateX(0).
   The exit classes that follow override this back to a translated position. */
.screen.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: none;
}

.screen.is-exiting-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 200ms var(--ease-exit),
    transform 280ms var(--ease-exit);
}

.screen.is-exiting-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 200ms var(--ease-exit),
    transform 280ms var(--ease-exit);
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .screen.is-exiting-right,
  .screen.is-exiting-left {
    transition: opacity 1ms, transform 1ms;
  }
}

.label-up {
  font-family: var(--font-body);
  font-size: var(--fs-label-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

@media (min-width: 480px) {
  body {
    padding: 24px 0;
    align-items: center;
  }
  .app-frame {
    /* Phone-shaped frame on desktop. Cap both width and height so the
       device-frame doesn't sprawl on big monitors. 100dvh - 48px reserves
       the body's 24px top/bottom padding; 900 keeps the chrome plausibly
       phone-tall on 4K screens. */
    max-width: var(--canvas-max);
    height: min(900px, calc(100dvh - 48px));
    border-radius: 32px;
    corner-shape: var(--corner-shape);
  }
}