/* Amora design system, global entry point. Consumers link this one file. */
/* Amora typefaces.
   "Amora Rounded" = Open Runde (OFL-1.1), the rounded face Amora bundles. It
   stands in for iOS's SF Pro Rounded, which is what the app actually renders
   (system font, design: .rounded) and which cannot be redistributed. On Apple
   devices the fallback in --font-rounded resolves to SF Pro Rounded itself.

   The display face is the soft ball-terminal serif on the App Store screenshots
   and in the wordmark. Fraunces (OFL-1.1) ships in the repo at
   ios/Amora/Resources/Fonts/Fraunces-Variable.ttf, registered in UIAppFonts but
   unreferenced by app code, i.e. bundled for exactly this campaign use. Set the
   SOFT and WONK axes high: that is what produces the rounded terminals and the
   swung 'y' in "Closer, Every Day".

   Each face is split into a Latin-and-symbols file and an everything-else file by
   unicode-range, so an English page downloads only the Latin half of each font and a
   Czech, Turkish, Vietnamese or Russian page fetches the second file only for
   the characters it uses. Regenerate both halves from the full files beside
   them with fontTools (web/scripts/subset_site_fonts.py). */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-variable-latin.woff2") format("woff2-variations");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+25A0-27BF,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-variable-ext.woff2") format("woff2-variations");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0100-0130,U+0132-0148,U+014A-0151,U+0154-017E,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01C4-01CC,U+01D9-01DA,U+01E6-01E7,U+01EA-01EB,U+01FA-021B,U+022A-022D,U+0230-0233,U+0237,U+0259,U+02B9-02BA,U+02C7,U+02D8-02D9,U+02DB,U+02DD,U+0300-0303,U+0306-0307,U+0309-030C,U+030F,U+0311-0312,U+0315,U+031B,U+0323-0324,U+0326-0328,U+032E,U+0331,U+1E08-1E09,U+1E0C-1E0F,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E69,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E8E-1E8F,U+1E92-1E93,U+1E97,U+1E9E,U+1EA0-1EF9,U+2070,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AB,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD,U+2116,U+2219,U+2248,U+2260,U+2264-2265,U+27E8-27E9,U+E132-E133,U+FB00-FB04}

@font-face{font-family:"Amora Rounded";src:url("/assets/fonts/open-runde-regular-latin.woff2") format("woff2");font-style:normal;font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+25A0-27BF,U+FEFF,U+FFFD}
@font-face{font-family:"Amora Rounded";src:url("/assets/fonts/open-runde-regular-ext.woff2") format("woff2");font-style:normal;font-weight:400 500;font-display:swap;unicode-range:U+0100-0130,U+0132-0148,U+014A-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-031E,U+0321-0328,U+032A-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03E1,U+03F0-049D,U+04A0-04FF,U+052E-052F,U+0E3F,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20BF,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2123,U+212A-212B,U+212E,U+2132,U+213B,U+214D-214F,U+2153,U+215A-2188,U+2202,U+2205,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+2303,U+2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2468,U+24B6-24CF,U+24EA,U+27EF,U+27F5-27FA,U+2B06,U+2B12-2B13,U+2B1C,U+2C62,U+2C64-2C66,U+2C6D-2C70,U+2C7C,U+2C7E-2C7F,U+2DFF,U+2E18,U+A69F,U+A78D,U+A7AA-A7AE,U+A7B0-A7B2,U+A7C5,U+A7FF,U+A92E,U+E000,U+E002-E080,U+E093-E096,U+E0A5-E0E6,U+E0F3-E11C,U+E11E-E164,U+EE01-EE05,U+F6C3,U+FE20-FE2D,U+1F12F-1F149,U+1F16A-1F16B,U+1F850,U+1F852}
@font-face{font-family:"Amora Rounded";src:url("/assets/fonts/open-runde-semibold-latin.woff2") format("woff2");font-style:normal;font-weight:600 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+25A0-27BF,U+FEFF,U+FFFD}
@font-face{font-family:"Amora Rounded";src:url("/assets/fonts/open-runde-semibold-ext.woff2") format("woff2");font-style:normal;font-weight:600 900;font-display:swap;unicode-range:U+0100-0130,U+0132-0148,U+014A-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-031E,U+0321-0328,U+032A-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03E1,U+03F0-049D,U+04A0-04FF,U+052E-052F,U+0E3F,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20BF,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2123,U+212A-212B,U+212E,U+2132,U+213B,U+214D-214F,U+2153,U+215A-2188,U+2202,U+2205,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+2303,U+2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2468,U+24B6-24CF,U+24EA,U+27EF,U+27F5-27FA,U+2B06,U+2B12-2B13,U+2B1C,U+2C62,U+2C64-2C66,U+2C6D-2C70,U+2C7C,U+2C7E-2C7F,U+2DFF,U+2E18,U+A69F,U+A78D,U+A7AA-A7AE,U+A7B0-A7B2,U+A7C5,U+A7FF,U+A92E,U+E000,U+E002-E080,U+E093-E096,U+E0A5-E0E6,U+E0F3-E11C,U+E11E-E164,U+EE01-EE05,U+F6C3,U+FE20-FE2D,U+1F12F-1F149,U+1F16A-1F16B,U+1F850,U+1F852}

/* Amora color system, values lifted verbatim from
   ios/Shared/Extensions/Color+Amora.swift, ios/Core/DesignSystem/OnboardingColors.swift
   Light mode is warm off-white with pastel cards on solid white; dark mode is
   lifted charcoal with saturated accents. */
:root{
  /* Brand */
  --amora-pink:#E91E63;
  --amora-pink-soft:#FF6B9D; /* CTA glow + light-mode accents */
  --amora-pink-pressed:#C4144D;

  /* Light mode surfaces + ink */
  --bg-base:#FBF9F7;
  --bg-raised:#FDFBF9;
  --surface-card:#FFFFFF;
  --surface-elevated:#FFFFFF;
  --surface-pressed:rgba(233,30,99,.06);
  --tabbar-bg:#FFFFFF;
  --tabbar-border:rgba(0,0,0,.06);
  --stroke-subtle:rgba(0,0,0,.06);
  --stroke-strong:rgba(0,0,0,.10);
  --divider:rgba(0,0,0,.04);
  --text-primary:#241B22;
  --text-secondary:#4B3F46;
  --text-tertiary:#7A6D74;
  --text-disabled:rgba(36,27,34,.38);
  --icon-default:#6B6B6F;
  --icon-muted:#8E8E93;
  --button-bg:#FFFFFF;
  --button-text:#241B22;
  --pill-bg:#FFFFFF;
  --pill-border:rgba(0,0,0,.08);
  --avatar-bg:#FFFFFF;
  --avatar-placeholder-bg:#FFE4EC;
  --connector-line:rgba(0,0,0,.12);
  --brand-fill:rgba(233,30,99,.10);
  --brand-border:rgba(233,30,99,.20);

  /* Semantic accents */
  --success:#34C759;
  --gold:#F9A825;
  --info:#4AA3DF;
  --warning:#E6B566;
  --error:#EF4444;
  --story-ring:#4AE88F;

  /* Pastel decoratives */
  --pastel-pink:#FFE4EC;
  --pastel-blue:#E3F2FD;
  --pastel-green:#E8F5E9;

  /* 12-color question/topic card palette (light) + matched accents */
  --card-1-bg:#C4E4F7; --card-1-ink:#4A9EC4; /* baby blue, winter */
  --card-2-bg:#DED0F0; --card-2-ink:#9B6DB0; /* lavender, starters */
  --card-3-bg:#FACDD4; --card-3-ink:#E0728C; /* blush, relationship */
  --card-4-bg:#FACBC4; --card-4-ink:#E08878; /* peach, sex & love */
  --card-5-bg:#F8E5C8; --card-5-ink:#D4A864; /* warm cream, values */
  --card-6-bg:#C4F0D4; --card-6-ink:#5BB078; /* mint, money */
  --card-7-bg:#D0F0E0; --card-7-ink:#6BA088; /* sage */
  --card-8-bg:#DED0F2; --card-8-ink:#8B7EB5; /* soft purple */
  --card-9-bg:#F0E0C4; --card-9-ink:#C4A060; /* sand */
  --card-10-bg:#F2C8D8; --card-10-ink:#C07890; /* rose */
  --card-11-bg:#C4DEF2; --card-11-ink:#6090B0; /* powder blue */
  --card-12-bg:#F2D4C4; --card-12-ink:#C09070; /* apricot */

  /* Quiz category colors */
  --category-amber:#F57F17;
  --category-orange:#FF7043;
  --category-pink:#E91E63;
  --category-purple:#9C27B0;
  --category-teal:#00897B;

  /* App background glows (light) */
  --glow-pink:rgba(255,182,193,.56);
  --glow-pink-2:rgba(255,192,203,.32);
  --glow-orange:rgba(255,165,0,.19);
  --glow-peach:rgba(255,218,185,.16);

  /* Campaign / App Store ground: a photographed blue sky, light at the horizon.
     Grain is always on top at 3-5%. */
  --sky-top:#8FB6DC;
  --sky-mid:#A8C8E6;
  --sky-low:#C9DCEC;
  --sky-horizon:#E7EEF3;
  --campaign-ink:#FFFFFF;

  /* Shadows use black in light mode, rose-tinted shadows were removed */
  --shadow-ink:rgba(0,0,0,.12);
  --shadow-ink-strong:rgba(0,0,0,.15);
}

[data-theme="dark"]{
  --bg-base:#161B20;
  --bg-raised:#12181C;
  --surface-card:#242C34;
  --surface-elevated:#202830;
  --surface-pressed:#202830;
  --tabbar-bg:#12181C;
  --tabbar-border:rgba(42,52,59,.22);
  --stroke-subtle:rgba(42,50,58,.42);
  --stroke-strong:rgba(42,50,58,.52);
  --divider:rgba(42,50,58,.26);
  --text-primary:#E6EBEF;
  --text-secondary:#A9B1BA;
  --text-tertiary:#7E8892;
  --text-disabled:#59636D;
  --icon-default:#A9B1BA;
  --icon-muted:#7E8892;
  --button-bg:#232A31;
  --button-text:#E6EBEF;
  --pill-bg:#232A31;
  --pill-border:rgba(42,50,58,.55);
  --avatar-bg:#232A31;
  --avatar-placeholder-bg:#36414A;
  --connector-line:#3A424A;
  --brand-fill:rgba(233,30,99,.14);
  --brand-border:rgba(233,30,99,.28);

  --success:#3EDB7C;
  --gold:#FFD54F;
  --error:#E0645C;
  --story-ring:#3EDB7C;

  /* 12-color card palette (dark), deep saturated grounds */
  --card-1-bg:#3B1F26; --card-2-bg:#40241E; --card-3-bg:#4A341A;
  --card-4-bg:#3E3A1F; --card-5-bg:#243A2F; --card-6-bg:#1F3A3A;
  --card-7-bg:#1E343F; --card-8-bg:#1F2F46; --card-9-bg:#24224A;
  --card-10-bg:#2E2342; --card-11-bg:#3A2438; --card-12-bg:#3C1E2A;

  --shadow-ink:rgba(0,0,0,.4);
  --shadow-ink-strong:rgba(0,0,0,.5);
}

/* Type system. Native iOS renders SF Pro Rounded (system font, design: .rounded).
   Safari on iPhone and Mac draws it from the system through ui-rounded, listed
   first (Riley, 2026-10-05); Apple's licence does not allow serving the font
   file from a website. Every other browser gets the shipped webfont
   equivalent, Open Runde, exposed here as "Amora Rounded".
   Sizes/weights lifted from ios/Core/DesignSystem/OnboardingTypography.swift and
   ios/Shared/Extensions/Font+Amora.swift, they are exact, not rounded. */
:root{
  --font-rounded:ui-rounded,"Amora Rounded",-apple-system,BlinkMacSystemFont,"SF Pro Rounded",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Campaign display face, App Store screenshots, store art, hero moments.
     Never used inside the app UI. */
  --font-display:"Fraunces",Georgia,serif;
  --display-variation:"SOFT" 100,"WONK" 1,"opsz" 144; /* @kind other */
  --display-weight:600;
  --display-lh:.95; /* @kind other */
  --display-tracking:-.015em;

  /* Onboarding / display titles */
  --text-title:32px;          --text-title-lh:38px;
  --text-title-sm:28px;
  --text-invite-title:26px;
  --text-section-header:24px;
  --text-features-header:22px;
  --text-card-title:18px;

  /* Body */
  --text-subtitle:16px;       --text-subtitle-lh:22px;
  --text-subtitle-sm:14px;
  --text-subtitle-xs:13px;
  --text-card-body:16px;      --text-body-lh:20px;
  --text-feature:15px;
  --text-question:15.5px;     --text-question-lh:21px;

  /* Chrome */
  --text-screen-title:18px;   /* weight 700 */
  --text-amora-section:18px;  /* weight 800 */
  --text-topic-title:13px;    /* weight 800 */
  --text-cta:12px;            /* weight 800, uppercase */
  --text-status:12px;
  --text-streak:12.5px;
  --text-caption:13px;
  --text-footer:12px;
  --text-badge:11px;          /* weight 700, uppercase */
  --text-category:11px;       /* weight 800, uppercase, tracking .3 */
  --text-tiny:10px;

  /* Weights, RN 800 maps to SwiftUI .heavy */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:800;
  --weight-black:900;

  /* Tracking */
  --tracking-category:.3px;
  --tracking-section-pill:.5px;
  --tracking-invite-code:2px;
}

/* Spacing, AmoraSpacing.swift (app scale) + OnboardingSpacing.swift (onboarding).
   Exact point values; do not snap to a 4/8 grid. */
:root{
  --space-xs:4px;
  --space-s:8px;
  --space-m:12px;
  --space-l:16px;
  --space-xl:24px;
  --space-xxl:32px;
  --space-section-break:40px; /* the break between one KIND of thing and the next */

  /* Screen padding */
  --screen-h:20px;            /* Home, Questions */
  --content-h:16px;           /* scroll areas, topic detail */
  --onboarding-h:24px;        /* every onboarding screen */
  --ipad-screen-h:40px;
  --ipad-max-content:700px;

  /* Cards */
  --card-pad-s:14px;
  --card-pad-m:16px;
  --card-pad-l:18px;
  --card-pad-xl:24px;
  --card-gap-s:10px;
  --card-gap-m:14px;
  --card-gap-l:20px;
  --filter-chips-to-content:16px;
  --between-topic-cards:12px;
  --question-card-pad-h:22px;
  --question-card-pad-v:18px;
  --topic-row-min-h:88px;

  /* Buttons + inputs */
  --button-pad-v-s:14px;
  --button-pad-v-l:18px;
  --button-pad-h:16px;
  --button-stack-gap:12px;
  --input-pad-v:12px;
  --input-pad-h:16px;
  --input-height:48px;
  --input-stack-gap:12px;

  /* Pills */
  --pill-pad-h-s:8px;
  --pill-pad-h-m:12px;
  --pill-pad-h-l:14px;
  --pill-pad-v:4px;
  --pill-pad-v-m:6px;
  --pill-pad-v-l:8px;
  --chip-pad-h:14px;
  --chip-pad-v:8px;
  --chip-gap:8px;

  /* Home rhythm */
  --home-top:18px;
  --hero-to-invite:14px;
  --invite-to-title:24px;
  --title-to-card:14px;
  --card-to-next-title:32px;
  --between-cards:14px;

  /* Avatars + status */
  --avatar-gap:40px;
  --story-ring-gap:3px;
  --status-bubble-pad-h:12px;
  --status-bubble-pad-v:6px;
  --photo-circle:176px;

  /* Tap target */
  --tap-min:44px;
}

/* Corner radii, every value appears in the Swift source. iOS 26 continuous
   corners are approximated in CSS with plain border-radius. */
:root{
  --radius-icon-s:10px;   /* topic card icon tile */
  --radius-icon:12px;     /* feature card icon tile */
  --radius-pill-rect:14px;/* story caption pill */
  --radius-control:16px;  /* buttons (.regular), inputs, text fields */
  --radius-card-s:16px;   /* gradient / question cards */
  --radius-tile:20px;     /* category card, glass modifier default */
  --radius-card:24px;     /* CardContainer, glass cards */
  --radius-cta:25px;      /* large CTA + secondary button */
  --radius-cta-card:26px; /* web CTA card */
  --radius-full:999px;    /* capsules, pills, nav buttons */
}

/* Elevation + glass. Light mode uses BLACK shadows for visibility (rose-tinted
   shadows were deliberately removed); dark mode leans on borders and glass.
   Mapped from CardContainer.swift, PrimaryButton.swift, SectionPill.swift,
   LiquidGlassModifier.swift, AmoraNavButton.swift. */
:root{
  /* CardContainer styles: subtle / standard / elevated */
  --shadow-subtle:0 2px 8px rgba(0,0,0,.12);
  --shadow-card:0 4px 12px rgba(0,0,0,.12);
  --shadow-elevated:0 6px 16px rgba(0,0,0,.12);

  /* Small chrome */
  --shadow-pill:0 2px 4px rgba(0,0,0,.08);
  --shadow-input:0 2px 4px rgba(0,0,0,.06);
  --shadow-nav-button:0 2px 4px rgba(0,0,0,.06);
  --shadow-nav-button-media:0 3px 8px rgba(0,0,0,.25);

  /* Pink CTA glow, PrimaryButton, light mode: radius 12-14, y 6-7, pink 16% */
  --shadow-cta:0 6px 12px rgba(255,107,157,.16);
  --shadow-cta-pill:0 7px 14px rgba(255,107,157,.16);

  /* Liquid glass */
  --glass-blur:blur(20px) saturate(150%); /* @kind other */
  --glass-blur-heavy:blur(26px) saturate(160%); /* @kind other */
  --glass-fill:rgba(255,255,255,.72);
  --glass-tint:rgba(0,0,0,.03);
  --glass-stroke:rgba(255,255,255,.8);
  --glass-stroke-2:rgba(232,208,216,.3);
  --glass-highlight:rgba(255,255,255,.5);

  /* Motion, SwiftUI .spring(response:.3, dampingFraction:.7); the entry curve
     is the ease-out-expo used for rising content */
  --ease-spring:cubic-bezier(.34,1.26,.64,1); /* @kind other */
  --ease-entry:cubic-bezier(.16,1,.3,1); /* @kind other */
  --dur-press:.15s; /* @kind other */
  --dur-hover:.2s; /* @kind other */
  --dur-entry:.9s; /* @kind other */
  --press-scale:.98; /* @kind other */
}

[data-theme="dark"]{
  --shadow-subtle:0 6px 16px rgba(0,0,0,.4);
  --shadow-card:0 10px 20px rgba(0,0,0,.4);
  --shadow-elevated:0 10px 20px rgba(0,0,0,.4);
  --shadow-cta:0 4px 8px rgba(255,107,157,.18);
  --shadow-cta-pill:0 5px 10px rgba(255,107,157,.18);
  --glass-fill:rgba(30,34,40,.7);
  --glass-tint:rgba(255,255,255,.06);
  --glass-stroke:rgba(255,255,255,.3);
  --glass-stroke-2:rgba(255,255,255,.1);
  --glass-highlight:rgba(255,255,255,.06);
}

/* Minimal resets + the two app background recipes. Everything else lives in
   components. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-rounded);color:var(--text-primary);background:var(--bg-base);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--amora-pink);text-decoration:none}
a:hover{color:var(--amora-pink-pressed)}
button{font-family:inherit}
img{max-width:100%}

/* AppBackground.swift, light: white base + pink glow top-left, orange glow
   top-right, peach blend between them. Dark: charcoal gradient + pink ambient. */
.amora-app-bg{position:relative;background:
  radial-gradient(180px 180px at 50% 10%,var(--glow-peach),transparent 70%),
  radial-gradient(220px 220px at 85% 6%,var(--glow-orange),transparent 70%),
  radial-gradient(280px 280px at 15% 8%,var(--glow-pink),var(--glow-pink-2) 45%,transparent 72%),
  #fff}
[data-theme="dark"] .amora-app-bg{background:
  radial-gradient(400px 400px at 50% 15%,rgba(233,30,99,.08),rgba(233,30,99,.03) 50%,transparent 75%),
  linear-gradient(180deg,#161B20,#1C232A)}

/* SettingsBackground / flat screens */
.amora-flat-bg{background:var(--bg-base)}
[data-theme="dark"] .amora-flat-bg{background:linear-gradient(180deg,#161B20,#1C232A)}

/* Campaign ground, the App Store screenshot look: a soft blue sky, lighter
   toward the horizon, with film grain over the whole frame. Put white display
   type (--font-display) on the upper third and the device below it. */
.amora-sky-bg{position:relative;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 42%,var(--sky-low) 74%,var(--sky-horizon) 100%)}
.amora-sky-bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
.amora-display{font-family:var(--font-display);font-variation-settings:var(--display-variation);font-weight:var(--display-weight);line-height:var(--display-lh);letter-spacing:var(--display-tracking);color:var(--campaign-ink);text-wrap:balance}