:root {
  --night: #030a11;
  --shell: #08151f;
  --shell-deep: #061019;
  --ink: #f6eedc;
  --ink-soft: #d7d5ca;
  --muted: #8e9da0;
  --muted-deep: #65777d;
  --line: rgba(239, 239, 224, .12);
  --gold: #d2a16a;
  --coral: #c97059;
  --coral-deep: #743c36;
  --sage: #91b99a;
  --green: #5d936f;
  --green-deep: #264d3a;
  --ember: #d66832;
  --ember-soft: #ef9a54;
  --living: #86a83f;
  --living-deep: #3e5f24;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); color-scheme: dark; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--night); }
body.guide-open, body.overlay-open { overflow: hidden; }
button, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, textarea:focus-visible { outline: 2px solid rgba(145,185,154,.72); outline-offset: 3px; }

.app-page {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 16% 20%, rgba(214,104,50,.2), transparent 30%),
    radial-gradient(circle at 84% 76%, rgba(134,168,63,.18), transparent 33%),
    linear-gradient(145deg, #020810, #07131d 48%, #030a11);
}
.app-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(rgba(255,255,255,.16) .5px, transparent .5px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, black, transparent 68%);
}
.ambient { position: absolute; width: 390px; height: 390px; border-radius: 50%; filter: blur(85px); opacity: .22; pointer-events: none; }
.ambient-coral { left: -150px; top: 4%; background: var(--ember); }
.ambient-green { right: -170px; bottom: 2%; background: var(--living); }

.app-shell {
  position: relative;
  z-index: 2;
  width: min(430px, 100%);
  height: min(900px, calc(100svh - 36px));
  min-height: 710px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 44px;
  background:
    radial-gradient(circle at 8% 15%, rgba(214,104,50,.11), transparent 27%),
    radial-gradient(circle at 91% 21%, rgba(134,168,63,.1), transparent 30%),
    radial-gradient(circle at 50% 17%, rgba(57,93,100,.2), transparent 34%),
    linear-gradient(180deg, #0b1822 0%, #07121b 66%, #08141c 100%);
  box-shadow: 0 70px 150px rgba(0,0,0,.6), 0 16px 48px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.12);
}
.app-shell::after { content: ""; position: absolute; inset: 0; z-index: 20; border-radius: inherit; box-shadow: inset 18px 0 34px rgba(255,255,255,.015), inset -16px 0 30px rgba(0,0,0,.12); pointer-events: none; }

.app-header {
  position: relative;
  z-index: 30;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 20px 9px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.brand-logo { position: relative; width: 36px; height: 36px; flex: 0 0 36px; display: block; overflow: hidden; border: 1px solid rgba(239,206,142,.18); border-radius: 12px; background: #030910; box-shadow: 0 8px 18px rgba(0,0,0,.34), -3px 0 15px rgba(214,104,50,.11), 3px 0 15px rgba(134,168,63,.1), inset 0 1px rgba(255,255,255,.08); }
.brand-logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-mark { position: relative; width: 31px; height: 31px; display: block; filter: drop-shadow(0 7px 11px rgba(0,0,0,.3)); }
.brand-mark i { position: absolute; width: 12px; height: 10px; clip-path: polygon(50% 0,100% 100%,0 100%); background: linear-gradient(145deg,#d5d3c8,#909c95); filter: drop-shadow(0 3px 4px rgba(0,0,0,.24)); }
.brand-mark i:nth-child(1) { left: 50%; top: 1px; translate: -50% 0; }
.brand-mark i:nth-child(2) { left: 2px; bottom: 2px; }
.brand-mark i:nth-child(3) { right: 2px; bottom: 2px; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { color: #eee8d9; font: 600 15px/1 var(--serif); letter-spacing: .01em; text-shadow: 0 0 20px rgba(232,166,91,.08); }
.brand-copy small { margin-top: 3px; color: #7f9198; font-size: 8px; letter-spacing: .08em; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.private-pill { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(134,169,148,.17); border-radius: 999px; color: #91aa9c; background: rgba(83,121,101,.08); font-size: 8px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.private-pill svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.journey-trigger { cursor: pointer; transition: color .2s,border-color .2s,background .2s; }
.journey-trigger:hover { color: #c4d5c8; border-color: rgba(151,191,164,.32); background: rgba(83,121,101,.16); }
.reset-button { border: 0; padding: 7px 3px 7px 7px; color: #839398; background: transparent; font-size: 8px; text-transform: uppercase; letter-spacing: .09em; cursor: pointer; }
.reset-button:hover { color: var(--ink); }

.app-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-behavior: smooth; }
.app-scroll::-webkit-scrollbar { display: none; }
.screen { padding-bottom: 27px; animation: rise .55s cubic-bezier(.2,.72,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.story-visual { position: relative; margin: 0 18px; aspect-ratio: 1.48; overflow: hidden; border: 1px solid rgba(239,216,171,.1); border-radius: 42% 42% 18px 18px / 28% 28% 18px 18px; background: #0a1720; box-shadow: -10px 18px 46px rgba(111,48,25,.1), 10px 20px 48px rgba(53,84,32,.1), 0 27px 56px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08); }
.story-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 43%; scale: 1.24; filter: saturate(.93) contrast(1.03); }
.visual-wash { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,15,22,.82),transparent 42%), radial-gradient(circle at 14% 42%,rgba(211,92,41,.11),transparent 34%), radial-gradient(circle at 86% 38%,rgba(126,161,57,.1),transparent 36%), radial-gradient(circle at 50% 34%,transparent 20%,rgba(4,12,18,.15) 74%); }
.relational-triangle { position: absolute; left: 50%; top: 48%; width: 44%; aspect-ratio: 1.1547; translate: -50% -50%; opacity: .68; filter: drop-shadow(0 0 9px rgba(204,226,197,.3)); }
.relational-triangle > i { position: absolute; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg,transparent,rgba(210,227,202,.72) 14% 86%,transparent); }
.relational-triangle > i:nth-child(2) { left: 0; transform-origin: left; transform: rotate(-60deg); }
.relational-triangle > i:nth-child(3) { right: 0; transform-origin: right; transform: rotate(60deg); }
.relationship-node { position: absolute; width: 6px; height: 6px; border: 1px solid #f4edcf; border-radius: 50%; background: var(--living); box-shadow: 0 0 0 4px rgba(134,168,63,.12),0 0 13px rgba(134,168,63,.9); }
.node-one { left: 50%; top: 0; translate: -50% -50%; }
.node-two { left: 0; bottom: 0; translate: -50% 50%; background: var(--ember); box-shadow: 0 0 0 4px rgba(214,104,50,.12),0 0 13px rgba(214,104,50,.9); }
.node-three { right: 0; bottom: 0; translate: 50% 50%; background: #d7ad78; box-shadow: 0 0 0 4px rgba(215,173,120,.12),0 0 13px #d7ad78; }
.visual-caption { position: absolute; left: 50%; bottom: 12px; translate: -50%; display: flex; align-items: center; gap: 7px; color: rgba(229,233,218,.7); text-transform: uppercase; letter-spacing: .14em; font-size: 6px; font-weight: 700; white-space: nowrap; }
.visual-caption i { width: 12px; height: 1px; background: rgba(229,233,218,.24); }

.story-intro { padding: 25px 26px 10px; }
.eyebrow { margin: 0; display: flex; align-items: center; gap: 6px; color: #b6a889; text-transform: uppercase; letter-spacing: .14em; font-size: 7px; font-weight: 750; }
.eyebrow svg { width: 12px; height: 12px; fill: none; stroke: var(--gold); stroke-width: 1.5; }
h1,h2,h3 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.04em; }
.story-intro h1 { margin: 12px 0 10px; font-size: clamp(41px,11vw,52px); line-height: .88; letter-spacing: -.055em; }
h1 em,h2 em { color: #a7c8ae; font-weight: 400; }
.story-intro > p:last-child { max-width: 350px; margin: 0; color: #93a2a5; font: 14px/1.5 var(--serif); }
.learn-trigger { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(192,198,145,.15); border-radius: 18px; color: #c3cbb5; background: radial-gradient(circle at 5% 50%,rgba(214,104,50,.1),transparent 30%),radial-gradient(circle at 92% 50%,rgba(134,168,63,.1),transparent 34%),linear-gradient(145deg,rgba(111,159,126,.055),rgba(255,255,255,.02)); box-shadow: inset 0 1px rgba(255,255,255,.04); text-align: left; cursor: pointer; }
.learn-trigger:hover { border-color: rgba(173,202,181,.28); background: linear-gradient(145deg,rgba(111,159,126,.14),rgba(255,255,255,.025)); }
.learn-trigger-after-composer { width: auto; margin: 14px 22px 0; }
.learn-trigger > span:nth-child(2) { font: 500 14px/1.15 var(--serif); }
.learn-trigger small { display: block; margin-bottom: 3px; color: #6f897c; font: 700 6px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.learn-trigger > svg { width: 16px; height: 16px; fill: none; stroke: #789988; stroke-width: 1.7; }
.learn-trigger-mark { position: relative; width: 28px; height: 28px; display: block; }
.learn-trigger-mark i { position: absolute; width: 10px; height: 9px; clip-path: polygon(50% 0,100% 100%,0 100%); background: linear-gradient(145deg,#ccd6cc,#71897d); }
.learn-trigger-mark i:nth-child(1) { left: 50%; top: 1px; translate: -50%; }
.learn-trigger-mark i:nth-child(2) { left: 2px; bottom: 2px; }
.learn-trigger-mark i:nth-child(3) { right: 2px; bottom: 2px; }

.story-composer { position: relative; margin: 11px 18px 0; padding: 17px; border: 1px solid rgba(190,211,196,.14); border-radius: 24px; color: #e7e3d7; background: radial-gradient(circle at 5% 12%,rgba(214,104,50,.07),transparent 34%),radial-gradient(circle at 92% 14%,rgba(134,168,63,.09),transparent 38%),linear-gradient(145deg,rgba(20,34,35,.96),rgba(12,23,27,.98)); box-shadow: 0 28px 65px rgba(0,0,0,.34),0 8px 20px rgba(0,0,0,.17),inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(22px); transition: border-color .25s,box-shadow .25s; }
.story-composer:focus-within { border-color: rgba(183,176,101,.34); box-shadow: 0 30px 70px rgba(0,0,0,.4),-5px 0 24px rgba(214,104,50,.055),5px 0 24px rgba(134,168,63,.06),0 0 0 4px rgba(134,168,63,.04),inset 0 1px rgba(255,255,255,.07); }
.composer-heading { display: flex; justify-content: space-between; align-items: center; }
.composer-heading label, .composer-heading span { color: #8fa299; text-transform: uppercase; letter-spacing: .14em; font-size: 7px; font-weight: 750; }
.composer-heading span.ready { color: var(--sage); }
.voice-button { width: 100%; min-height: 66px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 13px; padding: 10px 12px; border: 1px solid rgba(172,202,180,.18); border-radius: 18px; color: #dfe7dc; background: radial-gradient(circle at 8% 50%,rgba(214,104,50,.12),transparent 33%),radial-gradient(circle at 92% 50%,rgba(134,168,63,.14),transparent 36%),linear-gradient(145deg,rgba(34,55,49,.72),rgba(18,35,35,.88)); box-shadow: 0 13px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.07); cursor: pointer; text-align: left; transition: transform .2s,border-color .2s,background .2s,box-shadow .2s; }
.voice-button:hover { transform: translateY(-1px); border-color: rgba(185,216,191,.3); box-shadow: 0 16px 31px rgba(0,0,0,.28),-4px 0 18px rgba(214,104,50,.06),4px 0 18px rgba(134,168,63,.07),inset 0 1px rgba(255,255,255,.09); }
.voice-button:disabled { cursor: wait; opacity: .8; }
.voice-orb { position: relative; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(243,225,194,.22); border-radius: 50%; color: #f0e3cb; background: linear-gradient(145deg,rgba(210,112,64,.72),rgba(88,125,57,.68)); box-shadow: 0 8px 18px rgba(0,0,0,.28),-3px 1px 13px rgba(214,104,50,.16),3px 1px 13px rgba(134,168,63,.14),inset 0 1px rgba(255,255,255,.24); }
.voice-orb svg { position: relative; z-index: 2; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-orb i { position: absolute; bottom: 8px; width: 2px; height: 8px; border-radius: 9px; background: rgba(255,242,219,.82); opacity: 0; }
.voice-orb i:nth-of-type(1) { left: 11px; }
.voice-orb i:nth-of-type(2) { right: 11px; }
.voice-orb i:nth-of-type(3) { right: 7px; height: 5px; }
.voice-button-copy strong,.voice-button-copy small { display: block; }
.voice-button-copy strong { color: #eeeadd; font: 600 17px/1.1 var(--serif); }
.voice-button-copy small { margin-top: 4px; color: #8fa49a; font-size: 8px; line-height: 1.3; letter-spacing: .02em; }
.voice-time { min-width: 43px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #82978d; background: rgba(0,0,0,.13); font-size: 7px; font-weight: 750; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.voice-button.recording { border-color: rgba(222,145,124,.43); background: radial-gradient(circle at 10% 50%,rgba(214,104,50,.27),transparent 38%),linear-gradient(145deg,rgba(77,40,39,.8),rgba(31,40,37,.92)); box-shadow: 0 15px 34px rgba(0,0,0,.3),0 0 0 4px rgba(201,112,89,.06),inset 0 1px rgba(255,255,255,.09); }
.voice-button.recording .voice-orb { color: #fff0e9; background: linear-gradient(145deg,#d98570,#9f4e43); animation: voicePulse 1.35s ease-in-out infinite; }
.voice-button.recording .voice-orb svg { opacity: .26; }
.voice-button.recording .voice-orb i { opacity: 1; animation: voiceWave .75s ease-in-out infinite alternate; }
.voice-button.recording .voice-orb i:nth-of-type(2) { animation-delay: -.28s; }
.voice-button.recording .voice-orb i:nth-of-type(3) { animation-delay: -.5s; }
.voice-button.recording .voice-time { color: #f0b4a5; border-color: rgba(225,145,123,.22); background: rgba(105,43,38,.24); }
.voice-button.transcribing .voice-orb { animation: voiceBreathe 1.3s ease-in-out infinite; }
@keyframes voicePulse { 50% { box-shadow: 0 0 0 9px rgba(201,112,89,0),0 8px 18px rgba(0,0,0,.2); } 0%,100% { box-shadow: 0 0 0 2px rgba(201,112,89,.22),0 8px 18px rgba(0,0,0,.28); } }
@keyframes voiceWave { from { scale: 1 .45; } to { scale: 1 1.25; } }
@keyframes voiceBreathe { 50% { opacity: .58; transform: scale(.94); } }
.story-composer textarea { width: 100%; min-height: 105px; display: block; resize: none; margin-top: 9px; border: 0; outline: 0; color: #ece7da; background: transparent; font: 18px/1.42 var(--serif); }
.story-composer textarea::placeholder { color: #70827d; font-style: italic; }
.composer-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 5px; }
.privacy-note { display: flex; align-items: center; gap: 5px; color: #74877f; font-size: 8px; }
.privacy-note svg { width: 10px; height: 10px; fill: none; stroke: #7ca188; stroke-width: 1.8; }
.send-button { width: 37px; height: 37px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; }
.send-button { color: #f4eddb; background: linear-gradient(145deg,#6f8f3c,#31512f 72%); box-shadow: 0 8px 17px rgba(37,76,55,.24),-4px 1px 12px rgba(214,104,50,.08),inset 0 1px rgba(255,255,255,.16); transition: transform .2s,opacity .2s; }
.send-button:not(:disabled):hover { transform: translateY(-2px); }
.send-button:disabled { opacity: .28; cursor: not-allowed; }
.send-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-status { margin: 9px 0 0; color: #9cafaa; font-size: 10px; text-align: center; }

.next-preview { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin: 17px 22px 5px; padding: 15px; border: 1px solid rgba(130,168,144,.12); border-radius: 18px; background: rgba(85,123,103,.055); }
.response-orb { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #adc4b3; background: rgba(108,157,129,.12); }
.response-orb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.next-preview small { color: #839b8b; text-transform: uppercase; letter-spacing: .13em; font-size: 6px; font-weight: 750; }
.next-preview p { margin: 4px 0 0; color: #8d9a9c; font-size: 11px; line-height: 1.45; }

.loading-screen { min-height: 100%; padding: 36px 28px 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loading-art { position: relative; width: 230px; height: 230px; margin-bottom: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 28px 70px rgba(0,0,0,.4),0 0 70px rgba(87,137,105,.12); }
.loading-art::after { content:""; position:absolute; inset:0; background: radial-gradient(circle,transparent 20%,rgba(5,15,22,.82) 78%); }
.loading-art img { width: 100%; height: 100%; object-fit: cover; scale: 1.75; filter: brightness(.72) saturate(.75); }
.loading-art svg { position: absolute; z-index: 2; inset: 27px; width: calc(100% - 54px); height: calc(100% - 54px); fill: rgba(94,147,111,.08); stroke: rgba(184,211,187,.76); stroke-width: 1; filter: drop-shadow(0 0 12px rgba(122,176,139,.35)); animation: breathe 2.8s ease-in-out infinite; }
.loading-art circle { fill: #d4b17b; stroke: #f6eedc; }
@keyframes breathe { 50% { transform: scale(1.04); opacity: .62; } }
.eyebrow.centered { justify-content: center; }
.loading-screen h2 { margin-top: 15px; font-size: 37px; line-height: .97; }
.loading-copy { min-height: 38px; max-width: 300px; margin: 22px 0 13px; color: #a4b0ae; font: italic 15px/1.45 var(--serif); transition: opacity .2s; }
.loading-note { margin: 14px 0 0; color: #63767a; font-size: 9px; }
.loading-track { width: 170px; height: 2px; overflow: hidden; background: rgba(255,255,255,.08); }
.loading-track i { display: block; width: 48%; height: 100%; background: linear-gradient(90deg,transparent,var(--sage),transparent); animation: travel 1.8s ease-in-out infinite; }
@keyframes travel { from { translate: -100%; } to { translate: 250%; } }

.result-screen { padding: 8px 20px 38px; }
.result-hero { position: relative; min-height: 255px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; border-radius: 34px 34px 20px 20px; background: #0b171f; box-shadow: 0 26px 55px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.08); }
.result-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; scale: 1.3; opacity: .48; filter: grayscale(.35) brightness(.67) saturate(.75); }
.result-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg,#08131c 4%,rgba(8,19,28,.5) 60%,rgba(8,19,28,.15)); }
.result-hero.red-hero::after { background: linear-gradient(0deg,#171015 4%,rgba(23,16,21,.5) 60%,rgba(20,12,16,.16)),radial-gradient(circle at 25% 30%,rgba(176,78,62,.25),transparent 50%); }
.result-hero.green-hero::after { background: linear-gradient(0deg,#071711 4%,rgba(7,23,17,.48) 60%,rgba(5,19,13,.16)),radial-gradient(circle at 72% 32%,rgba(76,139,95,.25),transparent 50%); }
.hero-content { position: relative; z-index: 2; }
.section-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #c68678; text-transform: uppercase; letter-spacing: .15em; font-size: 7px; font-weight: 750; }
.section-kicker.green { color: #9ac4a2; }
.section-kicker i { width: 19px; height: 1px; background: currentColor; }
.result-hero h2 { max-width: 310px; font-size: 38px; line-height: .98; }
.result-hero h2 em { color: #dfa18f; }
.green-hero h2 em { color: #a5caaa; }
.role-chip { display: inline-flex; margin-top: 14px; padding: 7px 10px; border: 1px solid rgba(214,128,106,.24); border-radius: 999px; color: #d89381; background: rgba(132,60,50,.16); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; }
.role-chip.green { color: #a7c8ae; border-color: rgba(143,190,153,.23); background: rgba(68,120,80,.16); }

.triangle-panel { margin: 16px 0; padding: 19px 13px 10px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); box-shadow: inset 0 1px rgba(255,255,255,.04); text-align: center; }
.triangle-panel svg { width: min(250px,100%); height: auto; overflow: visible; }
.triangle-panel text { font-family: var(--sans); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.triangle-caption { margin: -2px 0 7px; color: #66797c; font-size: 9px; }
.triangle-learn-link { margin: 4px 0 5px; padding: 5px; border: 0; color: #91ad9a; background: transparent; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-decoration-color: rgba(145,173,154,.3); text-underline-offset: 4px; cursor: pointer; }

.insight-card { margin-top: 12px; padding: 22px; border: 1px solid rgba(255,255,255,.09); border-radius: 21px; background: linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018)); box-shadow: 0 18px 36px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.04); }
.insight-card.red-card { border-color: rgba(199,104,86,.16); background: linear-gradient(145deg,rgba(125,58,51,.16),rgba(255,255,255,.015)); }
.insight-card.green-card { border-color: rgba(105,160,116,.2); background: linear-gradient(145deg,rgba(57,102,69,.18),rgba(255,255,255,.015)); }
.insight-card h3 { margin-bottom: 12px; color: #f0e8d7; font-size: 24px; line-height: 1.08; }
.insight-card > p,.body-copy p { margin: 0 0 12px; color: #a7b1af; font: 14px/1.58 var(--serif); }
.insight-card > p:last-child,.body-copy p:last-child { margin-bottom: 0; }
.emotion-card { border-left: 2px solid var(--coral); }
.soft-note { padding: 17px 19px; }
.soft-note p { color: #829194; font-size: 11px; line-height: 1.55; }

.primary-button,.quiet-button { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 17px; border-radius: 999px; cursor: pointer; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.primary-button { border: 0; color: #102019; background: linear-gradient(145deg,#b7d0b9,#6f9f7a); box-shadow: 0 16px 32px rgba(51,105,70,.22),inset 0 1px rgba(255,255,255,.5); }
.primary-button.coral { color: #261312; background: linear-gradient(145deg,#e1ad95,#bd6a56); box-shadow: 0 16px 32px rgba(139,69,53,.22),inset 0 1px rgba(255,255,255,.5); }
.primary-button:hover,.quiet-button:hover { transform: translateY(-1px); }
.primary-button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.quiet-button { border: 1px solid var(--line); color: #98a6a5; background: rgba(255,255,255,.025); }
.button-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.flip-visual { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; margin: 16px 0; padding: 18px 10px; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.025); }
.flip-visual svg { width: 100%; height: auto; }
.flip-visual .old-triangle { opacity: .32; }
.flip-arrow { color: #8aaa91; font: italic 23px var(--serif); }

.steps-card { padding-bottom: 10px; }
.steps-label { margin: 0 0 17px; color: #8fb298; font-size: 8px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.step-item { display: grid; grid-template-columns: 27px 1fr; gap: 12px; margin-bottom: 15px; align-items: start; }
.step-number { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(135,184,146,.24); border-radius: 50%; color: #a2c5aa; background: rgba(82,133,93,.11); font-size: 9px; font-weight: 700; }
.step-item p { margin: 2px 0 0; color: #abb4b1; font: 13px/1.5 var(--serif); }
.question-card { position: relative; overflow: hidden; text-align: center; padding: 27px 23px; border-color: rgba(144,184,151,.2); }
.question-card::before { content:""; position:absolute; width:130px; height:130px; left:50%; top:50%; translate:-50% -50%; border:1px solid rgba(130,176,141,.08); rotate:45deg; }
.question-card small { position: relative; color: #85a78e; text-transform: uppercase; letter-spacing: .14em; font-size: 7px; font-weight: 750; }
.question-card p { position: relative; margin: 11px 0 0; color: #dfe6d9; font: italic 18px/1.35 var(--serif); }

.commit-intro { padding: 24px 8px 8px; text-align: center; }
.commit-symbol { position: relative; width: 112px; height: 98px; margin: 0 auto 23px; }
.commit-symbol svg { width: 100%; height: 100%; fill: rgba(84,140,100,.1); stroke: #94bb9c; filter: drop-shadow(0 0 18px rgba(91,154,111,.2)); }
.commit-intro h2 { font-size: 39px; }
.commit-intro > p { max-width: 335px; margin: 12px auto 0; color: #8f9f9e; font: 14px/1.55 var(--serif); }
.commit-composer { margin: 20px 0 0; }
.commit-composer textarea { min-height: 145px; }
.button-row { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9px; }
.button-row button { margin-top: 13px; }

.done-screen { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 30px; text-align: center; }
.done-orbit { width: 185px; height: 185px; display: grid; place-items: center; margin: 0 auto 22px; border: 1px solid rgba(138,184,148,.11); border-radius: 50%; box-shadow: inset 0 0 50px rgba(76,134,91,.08),0 0 80px rgba(76,134,91,.08); }
.done-orbit svg { width: 116px; fill: rgba(88,151,106,.11); stroke: #a6c5ab; filter: drop-shadow(0 0 13px rgba(104,166,120,.3)); }
.done-screen h2 { font-size: 40px; }
.done-screen > p { margin: 12px auto 22px; max-width: 310px; color: #8e9d9b; font: 14px/1.5 var(--serif); }
.commitment-card { position: relative; overflow: hidden; margin-top: 0; text-align: left; }
.commitment-card::after { content:""; position:absolute; width:120px; height:120px; right:-55px; bottom:-70px; rotate:45deg; border:1px solid rgba(155,197,164,.1); }
.commitment-card small { color: #8bae93; font-size: 7px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.commitment-card blockquote { margin: 11px 0 0; color: #e9eadf; font: italic 19px/1.4 var(--serif); }

.guide-overlay { position: absolute; z-index: 70; inset: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: inherit; background: radial-gradient(circle at 80% 10%,rgba(79,128,98,.16),transparent 28%),linear-gradient(180deg,#091720,#061018 68%,#07151c); animation: guideIn .42s cubic-bezier(.2,.72,.2,1) both; }
@keyframes guideIn { from { opacity: 0; transform: translateY(15px) scale(.985); } to { opacity: 1; transform: none; } }
.guide-topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 13px 20px 9px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(7,17,25,.74); backdrop-filter: blur(20px); }
.guide-brand { display: flex; align-items: center; gap: 9px; color: #dfe6d9; font: 600 14px/1 var(--serif); }
.guide-brand .brand-logo { width: 31px; height: 31px; flex-basis: 31px; border-radius: 10px; }
.guide-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; color: #91a19f; background: rgba(255,255,255,.035); cursor: pointer; }
.guide-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.guide-scroll { min-height: 0; overflow-y: auto; padding: 32px 20px calc(34px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.guide-scroll::-webkit-scrollbar { display: none; }
.guide-intro { text-align: center; }
.guide-intro h2 { margin-top: 13px; font-size: 38px; line-height: .98; }
.guide-intro > p:last-child { max-width: 340px; margin: 15px auto 0; color: #96a5a5; font: 14px/1.56 var(--serif); }
.guide-map { margin-top: 28px; padding: 21px 18px 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 26px; box-shadow: 0 24px 52px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05); }
.guide-map-red { border-color: rgba(205,116,96,.16); background: radial-gradient(circle at 20% 12%,rgba(157,69,58,.18),transparent 37%),linear-gradient(145deg,rgba(74,34,36,.32),rgba(255,255,255,.02)); }
.guide-map-green { border-color: rgba(125,178,137,.18); background: radial-gradient(circle at 82% 12%,rgba(66,129,84,.2),transparent 38%),linear-gradient(145deg,rgba(29,66,45,.36),rgba(255,255,255,.02)); }
.guide-map-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.guide-map-heading small { display: block; margin-bottom: 5px; color: #9e796f; font-size: 6px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.guide-map-green .guide-map-heading small { color: #779c80; }
.guide-map-heading h3 { color: #eee7da; font-size: 24px; }
.guide-map-heading > span { padding: 6px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #8d9898; background: rgba(255,255,255,.025); font-size: 6px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.guide-triangle { position: relative; width: min(300px,100%); margin: 20px auto 5px; padding: 0 18px 20px; }
.guide-triangle svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 28px rgba(0,0,0,.2)); }
.guide-map-red .guide-triangle circle { fill: #ce755f; stroke: #f0c2b5; stroke-width: 1.3; }
.guide-map-green .guide-triangle circle { fill: #86b591; stroke: #d0e5d2; stroke-width: 1.3; }
.guide-point { position: absolute; width: 104px; text-align: center; }
.guide-point b,.guide-point small { display: block; }
.guide-point b { color: #e8e5d9; font: 500 12px/1.1 var(--serif); }
.guide-point small { margin-top: 3px; color: #748587; font-size: 6px; letter-spacing: .05em; }
.point-top { left: 50%; top: 0; translate: -50% -5px; }
.point-left { left: -18px; bottom: 0; }
.point-right { right: -18px; bottom: 0; }
.guide-role-list { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.07); }
.guide-role-list > div { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.guide-role-list > div:last-child { padding-bottom: 2px; border-bottom: 0; }
.guide-role-list i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; color: #8b9694; font-size: 7px; font-style: normal; }
.guide-role-list p { margin: 0; color: #97a4a3; font: 12px/1.52 var(--serif); }
.guide-role-list b { color: #d9ddd4; font-weight: 600; }
.guide-shift { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 11px; margin: 18px 22px -10px; color: #81a38a; }
.guide-shift span { height: 1px; background: linear-gradient(90deg,transparent,rgba(129,163,138,.22)); }
.guide-shift span:last-child { background: linear-gradient(90deg,rgba(129,163,138,.22),transparent); }
.guide-shift i { font: 19px/1 var(--serif); font-style: normal; }
.guide-human-note { display: grid; grid-template-columns: auto 1fr; gap: 13px; margin: 18px 2px 0; padding: 18px; border: 1px solid rgba(182,204,188,.12); border-radius: 20px; background: rgba(110,150,123,.055); }
.guide-human-note span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #a4bea9; background: rgba(111,159,126,.11); }
.guide-human-note p { margin: 0; color: #9ca9a5; font: italic 13px/1.52 var(--serif); }
.guide-begin { margin-top: 18px; }

.journey-overlay,.membership-overlay { position: absolute; z-index: 80; inset: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: inherit; background: radial-gradient(circle at 80% 12%,rgba(104,145,77,.16),transparent 31%),radial-gradient(circle at 12% 78%,rgba(197,91,55,.1),transparent 36%),linear-gradient(180deg,#091720,#061018 68%,#07151c); animation: guideIn .42s cubic-bezier(.2,.72,.2,1) both; }
.journey-scroll,.membership-scroll { min-height: 0; overflow-y: auto; padding: 31px 20px calc(38px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.journey-scroll::-webkit-scrollbar,.membership-scroll::-webkit-scrollbar { display: none; }
.journey-hero { text-align: center; }
.journey-hero h2 { margin-top: 12px; font-size: 38px; line-height: .98; }
.journey-hero > p:last-child { max-width: 330px; margin: 14px auto 0; color: #8d9c9d; font: 14px/1.52 var(--serif); }
.journey-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 25px; }
.journey-stat { min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 19px; background: rgba(255,255,255,.025); box-shadow: inset 0 1px rgba(255,255,255,.035); text-align: center; }
.journey-stat strong { color: #e9e6d9; font: 500 22px/1 var(--serif); }
.journey-stat small { margin-top: 6px; color: #75898a; font-size: 6px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.journey-section { margin-top: 23px; }
.journey-section-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.journey-section-heading strong { color: #dce2d7; font: 500 18px/1 var(--serif); }
.journey-section-heading span { color: #6d8280; font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }
.journey-patterns { display: grid; gap: 8px; }
.journey-pattern { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.075); border-radius: 17px; background: rgba(255,255,255,.025); }
.journey-pattern > i { width: 8px; height: 8px; border-radius: 50%; background: #ce806e; box-shadow: 0 0 13px rgba(206,128,110,.26); }
.journey-pattern.green > i { background: #90b89a; box-shadow: 0 0 13px rgba(144,184,154,.26); }
.journey-pattern p { margin: 0; color: #b7c0ba; font: 13px/1.2 var(--serif); }
.journey-pattern small { color: #748785; font-size: 7px; }
.journey-pattern b { color: #d7ddcf; font-size: 9px; }
.journey-entry { margin-top: 8px; padding: 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 19px; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015)); }
.journey-entry:first-of-type { margin-top: 0; }
.journey-entry header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.journey-entry header strong { color: #dbe1d6; font: 500 14px/1.2 var(--serif); }
.journey-entry header time { color: #687c7d; font-size: 7px; white-space: nowrap; }
.journey-entry p { margin: 10px 0 0; color: #98a7a4; font: italic 13px/1.45 var(--serif); }
.journey-empty { margin-top: 24px; padding: 30px 22px; border: 1px dashed rgba(151,183,159,.18); border-radius: 23px; color: #899a97; background: rgba(77,119,92,.045); font: 14px/1.5 var(--serif); text-align: center; }
.journey-membership-note { margin-top: 20px; padding: 19px; border: 1px solid rgba(149,187,157,.14); border-radius: 21px; background: radial-gradient(circle at 85% 15%,rgba(128,166,73,.11),transparent 38%),rgba(68,109,80,.07); text-align: center; }
.journey-membership-note p { margin: 0 0 14px; color: #94a49f; font: 13px/1.5 var(--serif); }
.journey-membership-note .primary-button { margin: 0; }

.membership-topbar { background: rgba(7,17,25,.62); }
.membership-scroll { position: relative; padding-top: 28px; text-align: center; }
.membership-glow { position: relative; width: 120px; height: 103px; margin: 0 auto 18px; filter: drop-shadow(0 15px 28px rgba(0,0,0,.3)); }
.membership-glow i { position: absolute; inset: 8px 16px 11px; clip-path: polygon(50% 0,100% 100%,0 100%); border-radius: 24px; background: linear-gradient(145deg,rgba(230,105,52,.72),rgba(173,72,43,.13)); filter: drop-shadow(-8px 3px 15px rgba(214,104,50,.24)); }
.membership-glow i:nth-child(2) { inset: 3px 9px 8px 24px; background: linear-gradient(145deg,rgba(142,179,63,.7),rgba(75,118,38,.11)); transform: rotate(12deg); filter: drop-shadow(8px 3px 15px rgba(134,168,63,.22)); }
.membership-glow span { position: absolute; z-index: 2; left: 50%; bottom: 26px; width: 7px; height: 29px; translate: -50%; border-radius: 8px 8px 3px 3px; background: #e2c58e; box-shadow: -14px 7px 0 -1px #bd9f70,14px 7px 0 -1px #bd9f70,0 0 16px rgba(226,197,142,.4); }
.membership-scroll h2 { margin-top: 12px; font-size: 39px; line-height: .96; }
.membership-intro { max-width: 342px; margin: 14px auto 0; color: #93a29f; font: 14px/1.52 var(--serif); }
.membership-benefits { display: grid; gap: 8px; margin-top: 23px; text-align: left; }
.membership-benefits > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 17px; background: rgba(255,255,255,.022); }
.membership-benefits > div > span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(173,198,175,.13); border-radius: 50%; color: #89a18d; background: rgba(103,143,109,.08); font-size: 7px; }
.membership-benefits p,.membership-benefits strong,.membership-benefits small { display: block; margin: 0; }
.membership-benefits strong { color: #d8ded4; font: 500 13px/1.2 var(--serif); }
.membership-benefits small { margin-top: 3px; color: #708381; font-size: 7px; line-height: 1.3; }
.membership-plans { display: grid; gap: 9px; margin-top: 21px; }
.membership-plan { position: relative; width: 100%; min-height: 82px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.09); border-radius: 21px; color: inherit; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; transition: border-color .2s,background .2s,transform .2s,box-shadow .2s; }
.membership-plan:hover { transform: translateY(-1px); }
.membership-plan.selected { border-color: rgba(170,197,141,.37); background: radial-gradient(circle at 4% 50%,rgba(211,96,49,.11),transparent 35%),radial-gradient(circle at 94% 50%,rgba(133,169,63,.13),transparent 38%),rgba(85,117,74,.09); box-shadow: 0 17px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06); }
.plan-badge { position: absolute; right: 14px; top: -8px; padding: 5px 8px; border: 1px solid rgba(226,192,127,.22); border-radius: 999px; color: #dac292; background: #142019; box-shadow: 0 5px 12px rgba(0,0,0,.26); font-size: 6px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.plan-copy small,.plan-copy strong,.plan-copy em { display: block; }
.plan-copy small { color: #789084; font-size: 7px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.plan-copy strong { margin-top: 4px; color: #ece8db; font: 500 17px/1.1 var(--serif); }
.plan-copy em { margin-top: 4px; color: #758783; font-size: 7px; font-style: normal; }
.membership-plan > i { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid rgba(150,173,158,.28); border-radius: 50%; }
.membership-plan.selected > i::after { content:""; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(145deg,#da754b,#8ca743); box-shadow: 0 0 10px rgba(161,177,77,.28); }
.membership-continue { margin-top: 14px; }
.membership-status { margin: 11px 5px 0; color: #a8b8af; font-size: 10px; line-height: 1.4; }
.membership-status.error { color: #dda08f; }
.restore-button { margin-top: 14px; padding: 8px; border: 0; color: #8fa39b; background: transparent; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.membership-legal { max-width: 335px; margin: 15px auto 0; color: #607475; font-size: 7px; line-height: 1.45; }
.membership-links { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 10px; color: #657b78; font-size: 8px; }
.membership-links a { color: #849991; text-decoration: none; }

.legal-page { min-height: 100svh; padding: 28px 18px 60px; background: radial-gradient(circle at 10% 5%,rgba(214,104,50,.14),transparent 28%),radial-gradient(circle at 88% 22%,rgba(134,168,63,.13),transparent 31%),linear-gradient(155deg,#030a11,#08151f 58%,#041018); }
.legal-card { width: min(720px,100%); margin: 0 auto; padding: 34px clamp(24px,6vw,58px) 48px; border: 1px solid rgba(255,255,255,.1); border-radius: 34px; background: rgba(8,20,29,.88); box-shadow: 0 45px 110px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.05); }
.legal-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 38px; color: #e9e4d7; font: 600 17px/1 var(--serif); text-decoration: none; }
.legal-brand img { width: 38px; height: 38px; border-radius: 12px; }
.legal-card h1 { margin-top: 13px; font-size: clamp(42px,8vw,62px); line-height: .94; }
.legal-updated { margin: 14px 0 34px; color: #758789; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.legal-card section { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.075); }
.legal-card section h2 { color: #e2e3d7; font-size: 22px; }
.legal-card section p { margin: 9px 0 0; color: #9ba8a5; font: 15px/1.64 var(--serif); }
.legal-card a { color: #a8c5ad; }
.legal-return { display: inline-flex; margin-top: 25px; padding: 12px 17px; border: 1px solid rgba(150,184,158,.18); border-radius: 999px; background: rgba(91,133,102,.08); text-decoration: none; font-size: 10px; }

.error-screen { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; }
.error-icon { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 50%; color: #d99482; background: rgba(164,76,60,.13); font: 32px var(--serif); }
.error-screen h2 { font-size: 34px; }
.error-screen p { max-width: 315px; margin: 12px auto 6px; color: #91a09f; font: 14px/1.55 var(--serif); }

.bottom-nav { position: relative; z-index: 30; min-height: 70px; display: grid; grid-template-columns: repeat(3,1fr); align-items: start; padding: 9px 28px 8px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(7,18,27,.92); box-shadow: 0 -18px 36px rgba(3,9,14,.46); backdrop-filter: blur(24px); }
.bottom-nav button { position: relative; display: grid; place-items: center; gap: 3px; padding: 0; border: 0; color: #61737a; background: transparent; font-size: 7px; cursor: pointer; }
.bottom-nav button:disabled { opacity: .34; cursor: default; }
.bottom-nav svg { position: relative; z-index: 2; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav span { position: relative; z-index: 2; }
.bottom-nav .active { color: #c5d0b0; }
.bottom-nav .active::before { content:""; position:absolute; top:-6px; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,rgba(214,104,50,.12),rgba(134,168,63,.13)); box-shadow:-5px 0 16px rgba(214,104,50,.08),5px 0 18px rgba(134,168,63,.11); }

@media (max-width: 520px) {
  .app-page { display: block; overflow: auto; padding: 0; }
  .app-shell { width: 100%; height: 100svh; min-height: 100svh; border: 0; border-radius: 0; box-shadow: none; }
  .app-shell::after { display: none; }
  .app-header { min-height: calc(69px + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) 18px 8px; }
  .bottom-nav { min-height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
  .guide-overlay { border-radius: 0; }
  .journey-overlay,.membership-overlay { border-radius: 0; }
  .guide-topbar { min-height: calc(65px + env(safe-area-inset-top)); padding-top: calc(10px + env(safe-area-inset-top)); }
}
@media (max-width: 370px) {
  .story-intro { padding-inline: 21px; }
  .story-intro h1 { font-size: 39px; }
  .story-composer { margin-inline: 13px; }
  .privacy-note { font-size: 7px; }
  .result-screen { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}