:root {
  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: 34px;  --lh-display: 40px;   /* onboarding / paywall hero */
  --fs-title1: 28px;   --lh-title1: 34px;    /* screen titles */
  --fs-title2: 22px;   --lh-title2: 28px;    /* card titles, sheet titles */
  --fs-title3: 18px;   --lh-title3: 24px;    /* section headers */
  --fs-body: 16px;     --lh-body: 24px;
  --fs-callout: 15px;  --lh-callout: 21px;
  --fs-footnote: 13px; --lh-footnote: 18px;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-timer: 64px;    --lh-timer: 68px;     /* night-mode countdown */

  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Spacing — 4pt grid */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --screen-pad: 20px;       /* horizontal screen padding (compact) */
  --touch-min: 48px;        /* icon buttons */
  --touch-text: 44px;       /* minimum height of any text button / link */

  /* Layout */
  --statusbar-h: 54px;
  --tabbar-h: 86px;         /* incl. home-indicator area */
  --rail-w: 96px;           /* regular width nav rail */
  --column-max: 560px;      /* onboarding / paywall column on regular width */

  /* Radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* Colors — surfaces */
  --color-bg: #FBF7F2;            /* warm oat */
  --color-bg-tint: #F1EDFA;       /* lavender mist, top gradients */
  --color-surface: #FFFFFF;
  --color-surface-2: #F4EFE7;
  --color-surface-3: #EAE3D8;
  --color-border: #E8E1D6;
  --color-border-strong: #8F8AA8; /* non-text UI ≥ 3:1 on bg */
  --color-overlay: rgba(16, 18, 40, 0.50);
  --color-skeleton: #ECE5DA;

  /* Colors — text (all ≥ 4.5:1 on --color-bg) */
  --color-text: #1D2145;
  --color-text-secondary: #4E5374;
  --color-text-tertiary: #6B6F8C;

  /* Colors — brand */
  --color-primary: #2E3270;       /* midnight indigo */
  --color-on-primary: #FFFFFF;
  --color-primary-soft: #E7E6FA;
  --color-tonal-text: #2E3270;
  --color-accent: #F2A65A;        /* moon honey */
  --color-on-accent: #2A1A06;
  --color-accent-soft: #FFF0D9;
  --color-premium-bg: #FFF0D9;
  --color-premium-text: #8A4B0F;

  /* Colors — status */
  --color-success: #2F7D5F;
  --color-success-soft: #E1F3EA;
  --color-danger: #B83A27;
  --color-danger-soft: #FCE8E3;

  /* Sound artwork gradients by category */
  --grad-noise:   linear-gradient(145deg, #D6D3FF 0%, #A3A0F2 100%);
  --grad-home:    linear-gradient(145deg, #FFE0C9 0%, #F5AF8C 100%);
  --grad-nature:  linear-gradient(145deg, #CDEFDF 0%, #86C8AE 100%);
  --grad-lullaby: linear-gradient(145deg, #FFD9E4 0%, #EFA3BE 100%);
  --grad-preset:  linear-gradient(145deg, #FFE9B8 0%, #F4BE6E 100%);
  --grad-sky:     linear-gradient(165deg, #343A86 0%, #1B1E4B 70%, #14163A 100%);
  --art-ink: #23285C;             /* glyph + text color on artwork */
  --art-ink-soft: rgba(35, 40, 92, 0.82);
  --art-chip-bg: rgba(255, 255, 255, 0.78);
  --illo-bg: linear-gradient(180deg, #ECEAFD 0%, #F7F1FB 100%);

  /* Component tokens */
  --tabbar-bg: #FFFFFF;           /* opaque — no blur dependency */
  --lock-bg: rgba(255, 255, 255, 0.9);
  --lock-fg: #8A4B0F;
  --switch-knob: #FFFFFF;
  --switch-knob-on: #FFFFFF;
  --tip-bg: #FFFFFF;
  --statusbar-ink: #1D2145;

  /* Chart series (sleep diary) — validated: lightness band, CVD ΔE ≥ 29, ≥ 3:1 on surface */
  --chart-night: #5458C2;
  --chart-nap: #D07A22;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(29, 33, 69, 0.05), 0 4px 14px rgba(29, 33, 69, 0.06);
  --shadow-md: 0 2px 6px rgba(29, 33, 69, 0.05), 0 12px 28px rgba(29, 33, 69, 0.10);
  --shadow-lg: 0 24px 56px rgba(29, 33, 69, 0.20);
  --shadow-primary: 0 10px 24px rgba(46, 50, 112, 0.28);
}

@media (prefers-color-scheme: dark) {
:root {
  --color-bg: #0E1130;
  --color-bg-tint: #171B45;
  --color-surface: #171B40;
  --color-surface-2: #20254F;
  --color-surface-3: #2B3062;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: #7C80B4;
  --color-overlay: rgba(4, 5, 18, 0.66);
  --color-skeleton: #232857;
  --color-text: #F4F1FF;
  --color-text-secondary: #B8BAE0;
  --color-text-tertiary: #9A9DC8;
  --color-primary: #C9C5FF;
  --color-on-primary: #171A44;
  --color-primary-soft: rgba(201, 197, 255, 0.14);
  --color-tonal-text: #F4F1FF;
  --color-accent: #FFC98A;
  --color-on-accent: #2A1A06;
  --color-accent-soft: #2A2440;
  --color-premium-bg: rgba(255, 201, 138, 0.16);
  --color-premium-text: #FFD7A8;
  --color-success: #7FD6B0;
  --color-success-soft: rgba(127, 214, 176, 0.14);
  --color-danger: #FF8A78;
  --color-danger-soft: rgba(255, 138, 120, 0.14);
  --grad-noise:   linear-gradient(145deg, #5C59C9 0%, #2F2D80 100%);
  --grad-home:    linear-gradient(145deg, #B86A50 0%, #6A332C 100%);
  --grad-nature:  linear-gradient(145deg, #3F9C80 0%, #1F5649 100%);
  --grad-lullaby: linear-gradient(145deg, #B5617F 0%, #5E2849 100%);
  --grad-preset:  linear-gradient(145deg, #B98540 0%, #6A461C 100%);
  --art-ink: #FFFFFF;
  --art-ink-soft: rgba(255, 255, 255, 0.86);
  --art-chip-bg: rgba(14, 17, 48, 0.55);
  --illo-bg: linear-gradient(180deg, #1E2353 0%, #171B40 100%);
  --tabbar-bg: #12153A;
  --lock-bg: rgba(14, 17, 48, 0.65);
  --lock-fg: #FFC98A;
  --switch-knob: #DCD9F5;
  --switch-knob-on: #171A44;
  --tip-bg: #2B3062;
  --statusbar-ink: #F4F1FF;
  --chart-night: #7F7BE6;
  --chart-nap: #BC772C;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.50);
  --shadow-primary: 0 10px 28px rgba(0, 0, 0, 0.35);
}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);-webkit-text-size-adjust:100%}
a{color:var(--color-primary);text-underline-offset:3px}
@media (prefers-color-scheme: dark){a{color:#C9C5FF}}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:var(--fw-bold) 18px/1 var(--font-display);color:var(--color-text);text-decoration:none}
.brand img{width:36px;height:36px;border-radius:9px}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--color-text-secondary);text-decoration:none;font-weight:var(--fw-bold);font-size:15px}
nav.main a:hover{color:var(--color-primary)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:32px 0 56px;background:linear-gradient(180deg,var(--color-bg-tint) 0,var(--color-bg) 100%);margin:0 -20px;padding-left:20px;padding-right:20px;border-radius:0 0 var(--r-xl) var(--r-xl)}
.hero img.icon{width:88px;height:88px;border-radius:20px;box-shadow:var(--shadow-md)}
h1{font:var(--fw-bold) clamp(32px,5vw,46px)/1.12 var(--font-display);margin:20px 0 12px}
.lead{font-size:18px;line-height:28px;color:var(--color-text-secondary);max-width:520px;margin:0}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
.btn{display:inline-flex;flex-direction:column;justify-content:center;min-height:56px;padding:6px 22px;border-radius:var(--r-md);background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--fw-heavy);text-decoration:none}
.btn small{font-weight:var(--fw-medium);font-size:12px;opacity:.85}
.btn[aria-disabled=true]{cursor:default;opacity:.92}
.shots{display:flex;gap:14px;justify-content:center;align-items:flex-start}
.shots figure{margin:0;width:31%;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--color-border)}
.shots figure:nth-child(2){margin-top:28px}
.shots img{display:block;width:100%;height:auto}
section.block{padding:48px 0}
h2{font:var(--fw-bold) clamp(24px,3.4vw,32px)/1.2 var(--font-display);margin:0 0 24px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.card h3{font:var(--fw-bold) 19px/24px var(--font-display);margin:0 0 8px}
.card p{margin:0;color:var(--color-text-secondary)}
details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-md);margin-bottom:10px}
summary{cursor:pointer;min-height:48px;padding:12px 18px;font-weight:var(--fw-bold);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;color:var(--color-text-tertiary)}
details[open] summary::after{content:"–"}
details p{margin:0;padding:0 18px 16px;color:var(--color-text-secondary)}
.doc{max-width:760px;padding:24px 0 56px}
.doc h1{margin-top:8px}
.doc h2{font:var(--fw-bold) 21px/28px var(--font-display);margin:32px 0 8px}
.doc ul{padding-left:22px;margin:8px 0}.doc li{margin:6px 0}
.doc p{margin:10px 0}
.note{background:var(--color-accent-soft);color:var(--color-premium-text);border-radius:var(--r-sm);padding:12px 16px;font-size:15px;margin:16px 0}
.meta{color:var(--color-text-tertiary);font-size:14px}
.mailbox{display:inline-flex;align-items:center;min-height:56px;padding:12px 24px;line-height:1.3;border-radius:var(--r-md);background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--fw-heavy);text-decoration:none;font-size:17px;word-break:break-all}
footer{border-top:1px solid var(--color-border);padding:28px 0 40px;color:var(--color-text-tertiary);font-size:14px}
footer .row{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:12px}
footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-text-secondary)}
.langs{display:flex;flex-wrap:wrap;gap:0 14px}
@media (prefers-color-scheme: dark){.mailbox,.btn{background:#C9C5FF;color:#171A44}.note{background:#2B3062;color:#FFD7A8}}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:28px}.shots figure{width:30%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}