:root {
  --ww-primary: #c1d2cb;
  --ww-primary-dark: #7f9c90;
  --ww-primary-deep: #385f52;
  --ww-accent: #f9db9f;
  --ww-accent-strong: #f2a100;
  --ww-ink: #151515;
  --ww-muted: #66706c;
  --ww-surface: #f7f8f6;
  --ww-white: #fff;
  --ww-radius: 1.5rem;
  --ww-shadow: 0 12px 34px rgba(43, 72, 63, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ww-ink); background: var(--ww-surface); font-family: Nunito, "Segoe UI", system-ui, sans-serif; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; padding-bottom: 84px; }
.app-header { background: rgba(255,255,255,.93); border-bottom: 1px solid rgba(56,95,82,.08); backdrop-filter: blur(14px); }
.app-content { min-height: calc(100vh - 150px); }
.brand img { border-radius: 13px; }
.brand span { display: flex; flex-direction: column; line-height: 1; color: var(--ww-primary-deep); letter-spacing: .06em; }
.brand small { font-size: .58rem; font-weight: 800; }.brand strong { font-size: .9rem; }
.icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: #eef3f1; color: var(--ww-primary-deep); text-decoration: none; transition: .2s; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--ww-primary); transform: translateY(-1px); }.icon-btn.danger { color: #a73b3b; background: #fff0f0; }
.hero-card, .leap-hero { border-radius: var(--ww-radius); box-shadow: var(--ww-shadow); }
.hero-card { color: #24443a; background: linear-gradient(135deg, var(--ww-primary), #dbe7e2); }
.hero-illustration { min-height: 210px; display: grid; place-items: center; position: relative; overflow: hidden; color: rgba(255,255,255,.75); font-size: 6rem; }
.hero-illustration i { position: absolute; color: var(--ww-accent-strong); font-size: 2.5rem; top: 28%; right: 22%; }
.eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .12em; opacity: .72; }
.display-title { font-family: Georgia, serif; font-size: clamp(2rem, 7vw, 4.1rem); letter-spacing: -.04em; }
.section-title, .page-heading h1, .leap-hero h1 { font-family: Georgia, serif; font-weight: 600; letter-spacing: -.025em; }
.section-title { font-size: clamp(1.55rem, 4vw, 2.1rem); }.section-space { margin-top: 2.4rem; }.section-space-sm { margin-top: 1.5rem; }
.text-link, .back-link { color: var(--ww-primary-deep); font-weight: 750; text-decoration: none; }.back-link { gap: .45rem; align-items: center; }
.phase-card, .info-card, .timeline-card, .content-card { background: var(--ww-white); border: 1px solid rgba(56,95,82,.08); border-radius: var(--ww-radius); box-shadow: var(--ww-shadow); }
.phase-meter { display: grid; grid-template-columns: repeat(8,1fr); gap: 4px; padding: 0 1.5rem; transform: translateY(-5px); }.phase-meter span { height: 10px; border-radius: 99px; background: #e5e8e7; }.phase-meter .filled { background: var(--ww-accent-strong); }
.badge-soft { display: inline-flex; align-items: center; padding: .38rem .72rem; border-radius: 99px; color: #6f4c00; background: #fff5d8; font-size: .8rem; font-weight: 750; }
.mini-action { display: flex; align-items: center; gap: .6rem; padding: .8rem; border-radius: 1rem; color: var(--ww-primary-deep); background: #eff5f2; text-decoration: none; font-weight: 750; }.mini-action i { font-size: 1.35rem; }
.content-card { padding: 1.4rem; display: flex; gap: 1rem; align-items: flex-start; }.content-card h3, .info-card h2, .timeline-card h2 { font-size: 1.18rem; font-weight: 800; }.content-card p, .timeline-card p { color: var(--ww-muted); }
.leap-description-card { padding: clamp(1.25rem, 3vw, 2rem); }.leap-description-card h3 { font-family: Georgia, serif; font-size: clamp(1.35rem, 3vw, 1.75rem); }.leap-description-card p { max-width: 980px; color: var(--ww-ink); }.leap-key-point { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding: .9rem 1rem; border-radius: 1rem; color: var(--ww-primary-deep); background: #eff5f2; }.leap-key-point > i { font-size: 1.35rem; }.leap-key-point span { display: flex; flex-direction: column; }.leap-key-point small { font-size: .66rem; font-weight: 850; letter-spacing: .1em; }.leap-key-point strong { font-size: .92rem; }
.feature-icon { width: 54px; height: 54px; flex: 0 0 54px; display: inline-grid; place-items: center; border-radius: 18px; color: var(--ww-primary-deep); background: var(--ww-primary); font-size: 1.45rem; }.feature-icon.alt { color: #745000; background: var(--ww-accent); }.feature-icon.small { width: 42px; height: 42px; flex-basis: 42px; border-radius: 14px; font-size: 1.1rem; }
.btn-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--ww-primary-deep); --bs-btn-border-color: var(--ww-primary-deep); --bs-btn-hover-bg: #284a3f; --bs-btn-hover-border-color: #284a3f; border-radius: 99px; font-weight: 750; padding-inline: 1.15rem; }
.btn-outline-brand { color: var(--ww-primary-deep); border-color: var(--ww-primary-dark); border-radius: 99px; font-weight: 750; }.btn-outline-brand:hover { color: #fff; background: var(--ww-primary-deep); border-color: var(--ww-primary-deep); }
.page-heading { padding: 1.4rem 0 .2rem; }.page-heading h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); }.page-heading p { color: var(--ww-muted); max-width: 680px; }
.settings-heading > p:last-child { width: 100%; max-width: none; white-space: nowrap; }
.timeline { position: relative; padding-left: 3.3rem; }.timeline::before { content: ""; position: absolute; top: 1.2rem; bottom: 1.2rem; left: 1.15rem; width: 3px; background: #d9e0dd; }.timeline-item { position: relative; margin-bottom: 1rem; }.timeline-dot { position: absolute; left: -3.3rem; top: 1.2rem; z-index: 1; width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 50%; color: var(--ww-primary-deep); background: #fff; border: 3px solid var(--ww-primary); font-weight: 800; }.timeline-item.current .timeline-dot { color: #fff; background: var(--ww-primary-deep); }.timeline-item.past .timeline-dot { background: var(--ww-accent); border-color: var(--ww-accent); }.timeline-card { display: block; padding: 1.25rem; color: inherit; transition: transform .2s; }.timeline-card:hover { transform: translateX(4px); color: inherit; }.timeline-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.leap-hero { position: relative; overflow: hidden; padding: clamp(1.5rem, 5vw, 3rem); color: #24443a; background: linear-gradient(135deg,#d9e5e0,var(--ww-primary)); }.leap-hero p { max-width: 700px; }.leap-number { position: absolute; right: 1.5rem; top: -.7rem; color: rgba(255,255,255,.52); font-family: Georgia,serif; font-size: 9rem; line-height: 1; }
.info-card, .extra-card { padding: 1.4rem; }.check-list { padding: 0; list-style: none; }.check-list li { position: relative; padding: .55rem 0 .55rem 1.8rem; border-bottom: 1px solid #edf0ef; }.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--ww-primary-deep); font-weight: 900; }
.filter-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: none; }.filter-row::-webkit-scrollbar { display: none; }.filter-chip { flex: 0 0 auto; border: 1px solid #d8dfdc; border-radius: 99px; padding: .5rem .9rem; color: var(--ww-muted); background: #fff; }.filter-chip.active { color: #fff; background: var(--ww-primary-deep); border-color: var(--ww-primary-deep); }
.empty-state { padding: 4rem 1.25rem; text-align: center; border-radius: var(--ww-radius); color: var(--ww-muted); background: #fff; box-shadow: var(--ww-shadow); }.empty-state > i { display: block; font-size: 3.4rem; color: var(--ww-primary-dark); }.empty-state h1,.empty-state h2 { color: var(--ww-ink); font-family: Georgia,serif; }
.forum-post { display: flex; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid #edf0ef; }.avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 50%; background: var(--ww-accent); font-weight: 850; }
.poll-option { display: block; margin-bottom: .65rem; cursor: pointer; }.poll-option input { position: absolute; opacity: 0; }.poll-option span { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: .8rem 1rem; border: 2px solid #e5e9e7; border-radius: 1rem; }.poll-option input:checked + span { border-color: var(--ww-primary-deep); }.poll-option span > *:not(i) { position: relative; z-index: 1; }.poll-option span i { position: absolute; inset: 0 auto 0 0; background: rgba(193,210,203,.45); }
.form-control,.form-select { min-height: 48px; border-radius: .9rem; border-color: #d6ddda; }.form-control:focus,.form-select:focus { border-color: var(--ww-primary-dark); box-shadow: 0 0 0 .25rem rgba(127,156,144,.2); }
.development-card { overflow: hidden; }
.calendar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.calendar-heading > div:first-child { max-width: 650px; }
.age-result { align-self: stretch; display: flex; min-width: 210px; flex-direction: column; justify-content: center; padding: .6rem 1rem; border: 2px solid var(--ww-primary); border-radius: 1.15rem; color: var(--ww-primary-deep); background: #eff5f2; text-align: center; }
.age-result span, .age-result small { display: block; }.age-result > span { font-size: .72rem; font-weight: 800; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }.age-result strong { display: block; margin: .05rem 0; font-size: 1.22rem; line-height: 1.2; }.age-result strong span { display: inline; font-size: 1.5rem; }.age-result small { color: var(--ww-muted); font-size: .72rem; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem 1rem; margin: 1.4rem 0 1rem; padding: .85rem 1rem; border-radius: 1rem; background: var(--ww-surface); color: var(--ww-muted); font-size: .78rem; font-weight: 700; }
.calendar-legend span { display: inline-flex; align-items: center; gap: .38rem; }.calendar-legend img { width: 22px; height: 22px; object-fit: contain; }.legend-swatch { width: 22px; height: 12px; border-radius: 4px; border: 1px solid #cbd1cf; }
.calendar-scroll { overflow-x: auto; padding: .5rem .35rem 1rem; scrollbar-color: var(--ww-primary-dark) #e7ebe9; scrollbar-width: thin; scroll-snap-type: x proximity; }
.development-calendar { display: flex; width: max-content; min-width: 100%; padding: .25rem 0 .5rem; }
.calendar-week { position: relative; width: 64px; flex: 0 0 64px; padding: .25rem 0 .55rem; border-radius: .85rem; text-align: center; scroll-snap-align: center; transition: background .2s, box-shadow .2s, transform .2s; }
.calendar-marker { height: 32px; display: flex; align-items: center; justify-content: center; }.calendar-marker img { width: 27px; height: 27px; object-fit: contain; }
.calendar-bar { display: grid; grid-template-columns: 1fr 1fr; height: 27px; margin: 0; border: 1px solid #bfc7c4; overflow: hidden; }.calendar-week + .calendar-week .calendar-bar { border-left: 0; }.calendar-bar span + span { border-left: 1px solid rgba(80,90,86,.18); }
.phase-calm { background: #fff; }.phase-sensitive { background: #d6d9d8; }.phase-transition { background: #eef0ef; }
.calendar-week > strong { display: block; margin-top: .35rem; color: var(--ww-muted); font-size: .83rem; }
.calendar-week.is-current { z-index: 2; margin-inline: 4px; background: #fff5d8; box-shadow: 0 0 0 3px var(--ww-accent-strong), 0 8px 22px rgba(242,161,0,.22); transform: translateY(-2px); }
.calendar-week.is-current .calendar-bar, .calendar-week.is-current + .calendar-week .calendar-bar { border-left: 1px solid var(--ww-accent-strong); }.calendar-week.is-current .calendar-bar { border-color: var(--ww-accent-strong); }.calendar-week.is-current > strong { color: #6f4c00; font-size: 1rem; }
.calendar-tip { margin-top: .6rem; color: var(--ww-muted); font-size: .78rem; text-align: center; }
.bottom-nav { position: fixed; z-index: 1025; inset: auto 0 0; border-top: 1px solid rgba(56,95,82,.12); background: rgba(255,255,255,.97); box-shadow: 0 -8px 28px rgba(43,72,63,.08); backdrop-filter: blur(14px); }.nav-grid { grid-template-columns: repeat(5,1fr); }.nav-item { position: relative; display: flex; min-height: 72px; flex-direction: column; justify-content: center; align-items: center; gap: .18rem; color: #78827e; text-decoration: none; font-size: .68rem; font-weight: 700; }.nav-item i { font-size: 1.25rem; }.nav-item.active { color: var(--ww-primary-deep); }.nav-item.active::after { content: ""; position: absolute; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ww-accent-strong); }
.nav-grid.nav-grid-3 { grid-template-columns: repeat(3,1fr); }
.skip-link { position: fixed; z-index: 2000; left: 1rem; top: 1rem; padding: .6rem 1rem; border-radius: .5rem; background: #fff; color: #000; }
@media (min-width: 992px) { .app-shell { padding-bottom: 96px; }.nav-item { min-height: 76px; font-size: .78rem; }.nav-item i { font-size: 1.35rem; } }
@media (max-width: 767.98px) { .settings-heading > p:last-child { white-space: normal; }.calendar-heading { flex-direction: column; }.age-result { width: 100%; min-width: 0; }.calendar-week { width: 58px; flex-basis: 58px; } }
@media (max-width: 575.98px) { .app-header .container-lg { padding-block: .65rem !important; }.hero-card .col-8 { width: 70%; padding: 1.35rem !important; }.hero-card .col-4 { width: 30%; }.hero-illustration { min-height: 178px; font-size: 4rem; }.content-card { padding: 1.1rem; }.timeline { padding-left: 2.8rem; }.timeline-dot { left: -2.8rem; }.nav-item span { max-width: 86px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.leap-number { font-size: 6.5rem; }.development-card { padding-inline: 1rem; }.calendar-legend { gap: .55rem .8rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }