/* Soft daylight. The style the owner chose on 20 Sept 2026, frozen.
 *
 * Every layout option loads this file and adds nothing to it. The layout
 * options compare LAYOUT, so the style has to be identical across all five,
 * and one shared file is the only way to guarantee that.
 *
 * Extracted verbatim from docs/design/style-options/soft-light.html, which
 * stays the reference for the style itself.
 *
 * Rules for a layout that loads this file:
 *   - Use these tokens and classes. Add no new color, shadow, radius or font.
 *   - A layout needing something absent here has found a real gap. Say so
 *     rather than inventing a value, because an invented value breaks the
 *     comparison this page exists to make.
 *
 * Fonts, which every layout must also load:
 *   https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Figtree:wght@400;500;600;700;800&display=swap
 */
/* ---------------------------------------------------------------
   Soft light. A cool off-white page, white cards on wide soft
   shadows, one ocean blue accent, and a dark 9:16 picture that
   lights the page under it.
   --------------------------------------------------------------- */

:root{
  color-scheme: light;

  /* color */
  --base:        #F2F3F8;  /* page, a cool off-white */
  --card:        #FFFFFF;  /* every raised surface */
  --ink:         #16172B;  /* headings and primary text */
  --slate:       #5C5F78;  /* secondary text */
  --faint:       #7A7D96;  /* placeholder and quiet icons */
  --line:        #E4E7F1;  /* hairline and empty progress */
  --accent:      #1A4C9E;  /* primary control, current segment */
  --accent-deep: #123A78;  /* accent text on a tinted surface */
  --accent-tint: #E3EBF7;  /* the one tinted surface */
  --night:       20,28,52; /* caption plate, used with alpha */

  /* depth */
  --sh-card:   0 1px 2px rgba(20,22,45,.04), 0 8px 22px -10px rgba(20,22,45,.11);
  --sh-stage:  0 2px 4px rgba(20,22,45,.05), 0 30px 54px -26px rgba(20,22,45,.32),
               0 26px 44px -26px rgba(38,130,205,.42);
  --sh-accent: 0 10px 24px -10px rgba(26,76,158,.55);

  /* shape */
  --r-lg: 26px;
  --r-md: 20px;
  --r-sm: 14px;

  /* type */
  --display: "Bricolage Grotesque", "Segoe UI Variable Display", system-ui,
             -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  height:100%; margin:0; overflow:hidden;
  background:#E8EAF1;
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{ display:grid; place-items:center; }

button{ font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

/* ---------- the phone ---------- */

.phone{
  position:relative;
  width:390px; height:844px;
  overflow:hidden;
  background:var(--base);
  color:var(--ink);
}

.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  visibility:hidden; opacity:0;
}
html[data-state="playing"] .screen-play{ visibility:visible; opacity:1; z-index:2; }
html[data-state="ask"]     .screen-ask { visibility:visible; opacity:1; z-index:2; }

/* ---------- status bar and home indicator ---------- */

.statusbar{
  flex:0 0 auto; height:44px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 26px 0 30px;
  font-size:14px; font-weight:700; letter-spacing:.005em; color:var(--ink);
}
.statusbar .glyphs{ display:flex; align-items:center; gap:6px; color:var(--ink); }

.homebar{
  flex:0 0 auto; height:34px;
  display:flex; align-items:center; justify-content:center;
}
.homebar i{
  display:block; width:134px; height:5px; border-radius:3px;
  background:rgba(22,23,43,.24);
}

.content{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }

/* =========================================================
   PLAYING
   ========================================================= */

.screen-play .content{ padding:12px 20px 10px; }

/* 2. header row */
.header{
  flex:0 0 auto; height:46px;
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:12px;
}
.question{
  flex:1 1 auto; margin:0;
  font-size:15px; font-weight:500; line-height:1.26; letter-spacing:-.008em;
  color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.spend{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px;
  border-radius:12px; border:1px solid var(--line);
  background:var(--card); box-shadow:0 1px 2px rgba(20,22,45,.04);
  font-size:13px; font-weight:600; letter-spacing:-.005em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.spend b{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* 3. stage. A white mat holds a rounded crop of the picture, and a
   blurred copy of the same frame spills its light onto the page. */
.stage-wrap{
  position:relative; flex:1 1 auto; min-height:300px;
  margin-bottom:24px;
}
.spill{
  position:absolute; left:-12px; right:-12px; bottom:-10px; height:44%;
  background:url("frame.jpg") center 70% / cover no-repeat;
  filter:blur(32px) saturate(1.9) brightness(1.06);
  opacity:.34; z-index:0; pointer-events:none;
}
.stage{
  position:relative; z-index:1;
  height:100%; margin:0; padding:6px;
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-stage);
}
.stage img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(21,24,58,.06);
}

/* 4. caption. The one dark surface on a light screen, carrying the
   same radius and shadow as every white card. */
.caption{
  position:absolute; left:14px; right:14px; bottom:16px;
  padding:11px 15px;
  border-radius:var(--r-sm);
  background:rgba(var(--night),.76);
  border-top:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 26px -12px rgba(8,10,28,.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  color:#FFFFFF;
  font-size:15.5px; font-weight:500; line-height:1.3; letter-spacing:-.004em;
  text-shadow:0 1px 2px rgba(6,8,24,.35);
}

/* 5. progress */
.progress{ flex:0 0 auto; margin-bottom:18px; }
.segments{ display:flex; gap:5px; }
.segments span{
  flex:1 1 0; height:7px; border-radius:4px;
  background:var(--line);
}
.segments span.done{ background:rgba(26,76,158,.42); }
.segments span.current{
  background:rgba(26,76,158,.22);
  box-shadow:0 2px 8px -1px rgba(26,76,158,.45);
  position:relative; overflow:hidden;
}
.segments span.current i{
  position:absolute; inset:0 auto 0 0; width:46%;
  border-radius:4px; background:var(--accent);
}
.beatline{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:10px;
  font-size:12.5px; font-weight:500; letter-spacing:.006em; color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.beatline .now-beat{ color:var(--accent-deep); font-weight:600; }

/* 6. now line */
.now{
  flex:0 0 auto; margin-bottom:16px;
  padding:16px 18px;
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--sh-card);
}
.now h2{
  margin:0 0 7px;
  font-family:var(--display);
  font-size:18px; font-weight:600; line-height:1.2; letter-spacing:-.016em;
  color:var(--ink);
}
.now p{
  margin:0;
  font-size:13.5px; font-weight:400; line-height:1.52; letter-spacing:0;
  color:var(--slate);
}

/* 7. transport */
.transport{
  flex:0 0 auto; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px;
  background:var(--card); border-radius:22px;
  box-shadow:var(--sh-card);
}
.tbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; border-radius:var(--r-sm);
  color:var(--slate);
}
.tbtn:active{ background:#F3F4F9; }
.play{
  width:54px; height:54px; border-radius:18px;
  background:var(--accent); color:#fff;
  box-shadow:var(--sh-accent);
  display:inline-flex; align-items:center; justify-content:center;
}
.cc{
  min-width:52px; height:44px; border-radius:var(--r-sm);
  background:var(--accent-tint); color:var(--accent-deep);
  font-size:12.5px; font-weight:700; letter-spacing:.07em;
  display:inline-flex; align-items:center; justify-content:center;
}
.ask-pill{
  display:inline-flex; align-items:center; gap:6px;
  height:44px; padding:0 13px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--card);
  color:var(--ink); font-size:14px; font-weight:600; letter-spacing:-.005em;
}
.ask-pill svg{ color:var(--accent); }

/* =========================================================
   ASK
   ========================================================= */

.screen-ask{
  background:
    radial-gradient(74% 42% at 86% -6%, rgba(26,76,158,.20), rgba(26,76,158,0) 70%),
    radial-gradient(64% 36% at 2% 26%, rgba(70,132,214,.16), rgba(70,132,214,0) 70%),
    radial-gradient(90% 26% at 50% 104%, rgba(26,76,158,.16), rgba(26,76,158,0) 72%),
    var(--base);
}
.screen-ask .content{ padding:16px 20px 10px; }

.wordmark{
  flex:0 0 auto; display:flex; align-items:center; gap:9px;
  margin-bottom:38px;
}
.mark{
  width:28px; height:28px; border-radius:10px;
  background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-accent);
}
.wordmark span{
  font-family:var(--display);
  font-size:21px; font-weight:700; letter-spacing:-.022em; color:var(--ink);
}

.headline{
  flex:0 0 auto; margin:0 0 30px; max-width:330px;
  font-family:var(--display);
  font-size:38px; font-weight:600; line-height:1.07; letter-spacing:-.03em;
  color:var(--ink);
}

.field{
  flex:0 0 auto; margin-bottom:14px;
  display:flex; align-items:center; gap:11px;
  height:62px; padding:0 18px;
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--sh-card);
  color:var(--faint);
}
.field input{
  flex:1 1 auto; min-width:0; align-self:stretch; height:100%;
  border:0; outline:0; background:transparent; padding:0;
  font-family:var(--ui); font-size:16px; font-weight:500; letter-spacing:-.008em;
  color:var(--ink);
}
.field input::placeholder{ color:var(--faint); font-weight:500; }

.switch{
  flex:0 0 auto; margin-bottom:30px;
  display:flex; gap:6px; padding:6px; height:58px;
  background:var(--card); border-radius:18px;
  box-shadow:var(--sh-card);
}
.switch button{
  flex:1 1 0; height:44px; border-radius:13px;
  font-size:15px; font-weight:600; letter-spacing:-.006em;
  color:var(--slate);
}
.switch button[aria-pressed="true"]{
  background:var(--accent); color:#fff;
  box-shadow:0 6px 16px -8px rgba(26,76,158,.7);
}

.seeds{ flex:0 0 auto; display:flex; flex-direction:column; gap:14px; }
.seed{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:64px; padding:0 18px;
  background:var(--card); border-radius:18px;
  box-shadow:var(--sh-card);
  font-size:15px; font-weight:500; letter-spacing:-.008em; color:var(--ink);
  text-align:left;
}
.seed svg{ flex:0 0 auto; color:var(--accent); }

.spacer{ flex:1 1 auto; min-height:20px; }

.cta{
  flex:0 0 auto; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  height:58px; border-radius:var(--r-md);
  background:var(--accent); color:#fff;
  box-shadow:var(--sh-accent);
  font-size:17px; font-weight:700; letter-spacing:-.012em;
}
.quiet{
  flex:0 0 auto; margin:0; text-align:center;
  font-size:12.5px; font-weight:500; letter-spacing:.008em; color:var(--slate);
  font-variant-numeric:tabular-nums;
}