:root {
  /* Phone safe areas (Dynamic Island / notch on top, home indicator below). env() is 0 inside a browser tab
     that draws its own bars, so a floor keeps the layout breathing there and on desktop. */
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --top: calc(max(var(--sat), 20px) + 6px); --bottom: calc(max(var(--sab), 24px) + 10px);
}
/* App shell: the viewport never scrolls or rubber-bands (overflow on html propagates to the viewport and
   clips nothing); only screens inside the frame scroll. body must not clip: its 100% height can be shorter
   than 100dvh in Safari, which would cut the frame's background short of the screen bottom. */
html, body { margin: 0; height: var(--vh, 100%); overflow: hidden; overscroll-behavior: none;
  background: #000; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #9F8CFF; text-decoration: none; }
a:hover { color: #C4B8FF; text-decoration: underline; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
input { font-family: inherit; }
input::placeholder { color: #8E8E93; }
@keyframes cu-spin { to { transform: rotate(360deg); } }
@keyframes cu-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-20px, 24px) scale(1.12); } }

/* Phone: the app is the whole screen. Desktop: a 402x874 frame centered on a light ground, like the design. */
.stage { height: var(--vh, 100dvh); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.frame { position: relative; width: 100vw; height: var(--vh, 100dvh); overflow: hidden; background: #000;
  display: flex; flex-direction: column; }
@media (min-width: 500px) {
  html, body { background: #E5E5EA; }
  .stage { height: 100vh; }
  .frame { width: 402px; height: 874px; border-radius: 48px; flex: none;
    box-shadow: 0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12); transform-origin: center center; }
}

.press { transition: transform .15s ease, background .25s ease; }
.press:active { transform: scale(.97); }
.row:active { background: #2C2C2E; }
.chip:hover { background: #3A3A3C; }
.ghost { opacity: .35; }
/* Bottom sheet scrolls as a whole: its sections must not shrink to fit. */
.sheet { overscroll-behavior: contain; }
.sheet > * { flex: none; }