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

:root {
  --aqua: #7dc7e7;
  --aqua-deep: #1e6fb8;
  --ink: #1a2238;
  --bg: #f4faff;
  --text: #333;
  --sub: #666;
  --line: #e8eaee;
  --pink: #f4b9c9;
  --lavender: #c9b9e6;
  --blue: #bcd3ee;
  --mint: #bce0cf;
  --blur-fallback: rgba(255, 255, 255, 0.85);
}

/* 画面幅に応じて font-size を可変化（rem の基準）
   .app の max-width: 375px と揃え、375px 以上は 16px に飽和、
   320px では約 13.66px（全体の約 85%）。各 px font-size は rem 指定で追従する。 */
html { font-size: clamp(13px, 4.27vw, 16px); }
html, body { height: 100%; }

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(at 20% 25%, rgba(207, 234, 250, .5) 0%, transparent 50%),
    radial-gradient(at 80% 75%, rgba(251, 225, 234, .5) 0%, transparent 50%),
    radial-gradient(at 55% 55%, rgba(232, 222, 246, .4) 0%, transparent 55%),
    #fafbfd;
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.app {
  width: 100%;
  max-width: 375px;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}

.screen.active { display: flex; }

img { display: block; max-width: 100%; }
button { font-family: inherit; }