/* Feature-story treatment, intentionally scoped away from daily practice. */
body:has(.adaptive-intro), .app-shell:has(.adaptive-intro) { background: #07111f; }
.adaptive-intro {
  --intro-mint: #a5f3de; --intro-quiet: #a8b6c9;
  position: relative; isolation: isolate; color: #f7fbff; background: #07111f;
  min-height: 100svh; min-height: 100dvh; padding: calc(18px + var(--safe-top)) 26px calc(22px + var(--safe-bottom));
  display: grid; grid-template-rows: auto minmax(250px, 1fr) auto auto; gap: 12px;
  font-family: "Nunito", sans-serif;
}
.adaptive-intro::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 85% 32%, #133d6238, transparent 55%), radial-gradient(ellipse at 0 0, #133a662c, transparent 55%); }
.intro-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.intro-wordmark { display:flex; align-items:center; gap:8px; font-size:21px; font-weight:900; letter-spacing:-.8px; }
.intro-wordmark svg { width:23px; height:23px; color:#d2edff; }
.intro-skip, .intro-back { background:transparent; color:var(--intro-quiet); min-height:44px; padding:8px 0 8px 12px; font-size:13px; font-weight:700; }
.intro-art { width:100%; min-width:0; display:grid; align-content:center; justify-items:center; }
.intro-copy { text-align:left; padding-top:3px; }
.intro-eyebrow { color:var(--intro-mint); text-transform:uppercase; font-size:10px; letter-spacing:1.8px; font-weight:900; margin:0 0 12px; }
.adaptive-intro h1 { font-size:clamp(29px, 8.8vw, 38px); font-weight:900; line-height:1.08; letter-spacing:-1.3px; margin:0; color:#f7fbff; }
.adaptive-intro h1:focus { outline:none; }
.intro-body { font-size:16px; line-height:1.5; font-weight:500; color:var(--intro-quiet); margin:16px 0 0; max-width:330px; }
.intro-footer { padding-top:12px; }
.intro-position { display:flex; align-items:center; justify-content:space-between; height:48px; margin:0 0 8px; }
.intro-position > span { font-size:10px; letter-spacing:1.6px; color:#97a8be; font-variant-numeric:tabular-nums; width:48px; text-align:right; }
.intro-back { width:44px; padding:10px; margin-left:-10px; color:#bfd5eb; }
.intro-back:disabled { visibility:hidden; }
.intro-back svg { width:20px; height:20px; transform:rotate(180deg); }
.intro-dots { display:flex; align-items:center; gap:7px; }
.intro-dots i { width:5px; height:5px; border-radius:10px; background:#34445a; }
.intro-dots i.is-done { background:#7a9cae; }
.intro-dots i.is-current { width:24px; background:var(--intro-mint); }
.intro-next { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:58px; padding:16px 22px; border-radius:19px; background:var(--intro-mint); color:#0b292e; font-size:16px; font-weight:900; box-shadow:0 5px 25px #75e7db12; transition:transform 140ms ease, background 140ms ease; }
.intro-next svg, .intro-source-link svg { width:21px; height:21px; flex-shrink:0; }
.intro-next:active { transform:scale(.975); background:#c2ffef; }
.intro-source-link { display:flex; align-items:center; gap:8px; min-height:44px; color:#c0ddfb; background:none; padding:9px 0 0; font-weight:750; font-size:13px; }
.adaptive-intro button:focus-visible { outline:2px solid var(--intro-mint); outline-offset:4px; }
.intro-orbit { position:relative; width:min(100%,340px); aspect-ratio:1; display:grid; place-items:center; }
.intro-orbit-haze { position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle,#276ac775 0,#2370b128 45%,transparent 70%); }
.intro-orbit-lines { width:100%; height:100%; position:absolute; inset:0; }
.intro-core { width:132px; height:132px; border-radius:50%; display:grid; place-items:center; color:#d9f8ff; background:radial-gradient(circle at 35% 25%, #3371ae, #0e2c52 65%, #132038); box-shadow:inset 0 1px 2px #bbecffb0, inset 0 -4px 24px #2c68a5, 0 0 0 9px #3b76b30e, 0 0 0 10px #568fc72a, 0 0 80px #277fde4f; transform:rotate(-9deg); }
.intro-core svg { width:65px; height:65px; filter:drop-shadow(0 0 12px #bceeff90); }
.intro-orbit-satellite { position:absolute; inset:7.4%; border:1px solid transparent; border-radius:50%; animation:intro-orbit 24s linear infinite; }
.intro-orbit-satellite i { position:absolute; left:50%; top:-3px; width:6px; height:6px; border-radius:50%; background:#b5f9e8; box-shadow:0 0 15px #90f2d8; }
.intro-dog-signal { position:absolute; bottom:3%; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; white-space:nowrap; max-width:100%; border:1px solid #4b729342; border-radius:30px; padding:9px 14px; background:#102139d9; color:#c3d5e9; font-size:11px; }
.intro-dog-signal span { overflow:hidden; text-overflow:ellipsis; }
.intro-dog-signal i { width:5px; height:5px; border-radius:50%; background:var(--intro-mint); flex-shrink:0; }
.intro-science { width:min(100%,330px); aspect-ratio:1; position:relative; }
.intro-science-wires { width:100%; height:100%; position:absolute; inset:0; }
.intro-paper { position:absolute; width:72%; height:112px; padding:15px 16px; border-radius:14px; border:1px solid #738daa4a; background:linear-gradient(135deg,#1c334e,#112039); box-shadow:0 12px 30px #0003; text-align:left; }
.intro-paper span { display:block; color:#a6d7fc; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; }
.intro-paper strong { display:block; font-size:15px; margin:5px 0; line-height:1.2; letter-spacing:-.3px; }
.intro-paper small { display:block; font-size:10px; color:#aab9ca; }
.intro-paper i { display:inline-block; width:38px; height:2px; border-radius:2px; background:#6c8daf52; margin:9px 4px 0 0; }
.intro-paper i:last-child { width:60px; }
.intro-paper-a { top:2%; left:2%; transform:rotate(-10deg); opacity:.7; }
.intro-paper-b { top:14%; right:0; transform:rotate(7deg); }
.intro-paper-c { top:31%; left:6%; transform:rotate(-4deg); border-color:#90c5e17a; background:linear-gradient(135deg,#22405b,#182e45); }
.intro-science-output { position:absolute; bottom:4%; left:9%; width:82%; border:1px solid #a5f3de60; padding:14px; border-radius:14px; display:flex; align-items:center; gap:10px; background:#142f35; color:#d5fff0; font-size:13px; font-weight:800; }
.intro-science-output svg { width:20px; height:20px; color:var(--intro-mint); }
.intro-science-output b { margin-left:auto; }
.intro-signal-line { animation:intro-signal 4s linear infinite; }
.intro-example { width:100%; max-width:330px; padding:7px 0; }
.intro-example-label { margin:0 0 12px; text-align:center; color:#91a4bb; font-size:11px; }
.intro-example-choices { display:flex; gap:9px; }
.intro-example-choices button { flex:1; min-height:46px; padding:10px 8px; border-radius:13px; border:1px solid #526a854d; background:#111f32; color:#91a5bb; font-size:13px; font-weight:750; transition:background 160ms ease; }
.intro-example-choices button span { margin-right:4px; }
.intro-example-choices button[aria-pressed="true"] { border-color:#9bdaca; background:#193e41; color:#cdfff0; }
.intro-example-connector { display:flex; flex-direction:column; align-items:center; height:62px; }
.intro-example-connector i { width:1px; flex:1; background:linear-gradient(#345165,#93c7c5); }
.intro-example-connector svg { width:20px; height:20px; color:#8acbca; padding:3px; box-sizing:content-box; }
.intro-example-result { position:relative; border-radius:22px; padding:21px; border:1px solid #538bba70; background:radial-gradient(ellipse at 100% 0,#284d7280,transparent 70%), #11243b; box-shadow:0 16px 40px #0002; min-height:183px; animation:intro-result-in 240ms ease both; }
.intro-example-kicker { display:block; color:#a2bdd3; font-size:10px; text-transform:uppercase; letter-spacing:1.4px; font-weight:800; }
.intro-example-result-icon { position:absolute; top:18px; right:22px; color:var(--intro-mint); font-size:27px; line-height:1; }
.intro-example-result strong { display:block; font-size:23px; font-weight:900; margin:14px 0 8px; letter-spacing:-.6px; }
.intro-example-result p { font-size:13px; line-height:1.5; margin:0; color:#b5c5d9; }
.intro-dose-bars { display:flex; gap:5px; margin-top:16px; }
.intro-dose-bars i { height:4px; flex:1; border-radius:4px; background:#344960; }
.intro-dose-bars i.is-on { background:#9be7d3; }
.intro-journey { width:min(100%,340px); aspect-ratio:1; position:relative; }
.intro-journey > svg { position:absolute; inset:0; width:100%; height:100%; }
.intro-journey-lucky { position:absolute; inset:19% 17% 17%; display:grid; place-items:center; border-radius:50%; background:radial-gradient(ellipse,#16426790,transparent 70%); }
.intro-journey-lucky img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 15px 20px #0005); }
.intro-loop-label { position:absolute; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; border:1px solid #6d9bba4d; border-radius:30px; background:#122438; padding:9px 13px 9px 9px; color:#d6e5f4; }
.intro-loop-label i { width:20px; height:20px; display:grid; place-items:center; background:#284350; color:var(--intro-mint); border-radius:50%; font-style:normal; font-size:10px; }
.intro-loop-practice { top:5%; left:15%; }
.intro-loop-check { top:46%; right:0; }
.intro-loop-adapt { bottom:5%; left:16%; }
.intro-journey-line { animation:intro-signal 35s linear infinite reverse; }
.state-entering .adaptive-intro .intro-art, .state-entering .adaptive-intro .intro-copy { animation:intro-reveal 420ms cubic-bezier(.2,.7,.2,1) both; }
.state-entering .adaptive-intro .intro-copy { animation-delay:55ms; }
@keyframes intro-reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes intro-result-in { from { opacity:.6; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes intro-orbit { to { transform:rotate(360deg); } }
@keyframes intro-signal { to { stroke-dashoffset:-260; } }
@media (max-height:740px) {
  .adaptive-intro { padding-top:calc(10px + var(--safe-top)); padding-bottom:calc(15px + var(--safe-bottom)); grid-template-rows:auto minmax(210px,1fr) auto auto; gap:6px; }
  .intro-art > div { max-width:260px; }
  .intro-core { width:110px; height:110px; }
  .intro-core svg { width:54px; height:54px; }
  .intro-paper { height:94px; padding:11px 13px; }
  .intro-paper strong { font-size:13px; }
  .intro-paper small { font-size:9px; }
  .intro-paper i { display:none; }
  .intro-science-output { padding:11px; font-size:12px; }
  .intro-example { padding:0; }
  .intro-example-label { margin-bottom:7px; }
  .intro-example-connector { height:37px; }
  .intro-example-result { padding:15px 18px; min-height:153px; }
  .intro-example-result strong { font-size:21px; margin:10px 0 6px; }
  .intro-example-result p { font-size:12px; }
  .intro-dose-bars { margin-top:12px; }
  .adaptive-intro h1 { font-size:30px; }
  .intro-eyebrow { margin-bottom:9px; }
  .intro-body { margin-top:12px; font-size:14px; line-height:1.45; }
  .intro-footer { padding-top:3px; }
  .intro-position { height:37px; margin-bottom:5px; }
  .intro-next { min-height:54px; padding:14px 19px; }
}
@media (prefers-reduced-motion:reduce) {
  .adaptive-intro *, .state-entering .adaptive-intro .intro-art, .state-entering .adaptive-intro .intro-copy { animation:none !important; transition:none !important; }
}