.website-footer{padding:20px 24px 110px;text-align:center;border-top:1px solid #e8def4;color:#82788f;font-size:11px}
.website-footer a{display:inline-block;margin:0 10px 12px;color:#6252be;text-decoration:none}.website-footer p{max-width:540px;margin:auto}
#account .adult-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;font-weight:400;line-height:1.5}
#account .adult-check input{width:18px;height:18px;margin:0;flex-shrink:0}.auth-error{color:#ab4665!important}.auth-success{color:#39785c!important}
@media(min-width:800px){
body{background:radial-gradient(at 5% 10%,#e4dcff,transparent 60%),radial-gradient(at 95% 70%,#f7dce6,transparent 60%),#f4f2f8}
.shell{max-width:1120px;box-shadow:0 0 70px #7465890b}header{height:90px;padding:22px 52px;position:sticky;top:0;z-index:15;background:#fffc}
.brand{font-size:23px}.brand small{font-size:11px}.brand .mark{width:48px;height:48px}.header-actions{gap:12px}
main{max-width:940px;margin:auto;padding:108px 28px 48px}nav{position:fixed;top:90px;bottom:auto;left:50%;transform:translateX(-50%);width:min(1120px,100%);padding:12px 52px;border-bottom:1px solid #e8def4;border-top:0;z-index:14}
nav button{display:flex;align-items:center;gap:9px;min-width:100px;font-size:24px}nav button span{font-size:12px;margin:0}nav button svg{width:24px;height:24px}nav .nav-real-icon{margin:0;width:30px;height:30px}
h1{font-size:42px;letter-spacing:-1.5px}h2{font-size:20px}.section-head{margin-top:32px}.welcome-line{font-size:12px}.fresh-hero{min-height:285px;padding:34px;align-items:center}.fresh-hero .hero-copy{max-width:450px}.fresh-hero h1{font-size:46px}.fresh-hero .hero-art{width:245px;height:245px;right:22px;top:10px}.fresh-hero p{font-size:15px}
.tool-grid{grid-template-columns:repeat(5,1fr)}.tool-tile,.tool-tile:last-child{display:flex;min-height:160px;grid-column:auto;padding:20px}.tool-tile strong{font-size:13px}.tool-tile small{font-size:11px}.tool-icon{width:48px;height:48px}.tool-icon img{width:48px;height:48px}
.growth-snapshot{padding:30px}.height-snapshot .big{font-size:56px}.snapshot-weight strong{font-size:30px}.chart-card svg{max-height:330px}.profile-pick{padding:16px}.primary{max-width:380px}
#play-content{max-width:610px;margin:auto}#play-content .puzzle-board{max-height:none;height:330px;aspect-ratio:auto}.piece-button{min-height:104px!important}.piece-button>.real-piece{width:72px;height:62px}.piece-button>.real-piece.bar{width:85px;height:47px}
#mum-content{max-width:650px;margin:auto}.mum-hero{padding:28px}.mum-art{width:115px;height:120px}.planner-panel{padding:24px}.guide-banner{max-width:650px;margin:32px auto}.guide-banner h3{font-size:26px}.guide-banner p{font-size:13px}.guide-banner>img{width:110px;height:135px}.guide-banner small{font-size:11px}
.website-footer{padding-bottom:32px}.three-hero:not(.fresh-hero){min-height:220px;padding:30px}.tools-frame{height:650px}.tool-tabs button{font-size:12px;padding:10px 15px}
}

@media(min-width:800px){.three-hero.fresh-hero .hero-copy h1{font-size:46px}.three-hero.fresh-hero .hero-copy{max-width:450px}}

/* Web-only overrides. Keep the Android assets and journal storage unchanged. */
html { scroll-padding-top: 170px; }
body { min-width: 300px; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #8064de; outline-offset: 4px; }
.shell { width: 100%; margin-inline: auto; overflow: visible; }
main { min-height: 45vh; }
.three-hero.fresh-hero { overflow: hidden; }
.three-hero.fresh-hero .hero-art { top: auto; bottom: 0; height: 165px; width: 155px; right: -5px; object-fit: contain; }
nav[aria-label="Main navigation"] { box-sizing: border-box; }
.website-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.website-footer a { font-size: 12px; }
.load-recovery { padding: 28px; margin-block: 24px; background: #fff; border: 1px solid #e6dff0; border-radius: 22px; }
.load-recovery p { color: #6e7084; line-height: 1.7; }
.load-recovery a { display: inline-block; margin-top: 14px; color: #6252be; }
.tools-page { max-width: 1050px; margin: 30px auto; padding: 24px; }
.tools-page iframe { display: block; width: 100%; height: 850px; border: 0; background: white; border-radius: 18px; margin-top: 24px; }
.tools-page .back-link { color: #6252be; }
@media (max-width: 799px) {
  .shell { max-width: 600px; }
  header { position: relative; }
  nav[aria-label="Main navigation"] { bottom: 0; top: auto; left: 50%; transform: translateX(-50%); width: min(600px, 100%); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  nav button { min-width: 0; flex: 1; }
  .three-hero.fresh-hero { min-height: 190px; }
  .three-hero.fresh-hero .hero-copy { max-width: 64%; }
  .hero-tag { white-space: normal; display: inline-block; }
  .tools-frame { width: 100%; min-height: 680px; }
  .home-tools .tool-tile strong { font-size: 9px; }
  .chart-card, .planner-panel { overflow-wrap: anywhere; }
}
@media (min-width: 800px) {
  .shell { max-width: 1120px; background: #f8f7fc; }
  .shell > header { height: 92px; padding: 20px 48px; }
  main { max-width: 960px; padding: 105px 36px 44px; }
  nav[aria-label="Main navigation"] { top: 92px; bottom: auto; left: 50%; width: min(1120px, 100%); transform: translateX(-50%); min-height: 64px; padding: 14px 48px; background: #fbfafff5; }
  nav button { font-size: 24px; min-width: 115px; justify-content: center; }
  nav button span { font-size: 13px; }
  .brand { font-size: 24px; }
  .brand small { font-size: 12px; }
  .muted, .account-card p, .promo p, .note-strip { font-size: 14px; }
  .account-caption { font-size: 12px; }
  .eyebrow, .welcome-line, .today-pill { font-size: 11px; }
  .three-hero.fresh-hero { min-height: 295px; padding: 38px; margin-bottom: 30px; }
  .three-hero.fresh-hero .hero-copy { max-width: 62%; }
  .three-hero.fresh-hero .hero-copy h1 { font-size: 46px; line-height: 1.1; }
  .three-hero.fresh-hero p { max-width: 360px; font-size: 16px; margin: 15px 0 20px; }
  .three-hero.fresh-hero .hero-art { top: auto; bottom: 6px; right: 20px; height: 270px; width: 260px; }
  .hero-tag { font-size: 11px; padding: 6px 10px; }
  .hero-link { font-size: 13px; padding: 12px 18px; }
  h2 { font-size: 21px; }
  .section-head button, .text-button { font-size: 13px; }
  .empty { padding: 32px; }
  .measure-button { max-width: none; font-size: 14px; padding: 15px; }
  .home-tools .tool-grid { gap: 16px; }
  .home-tools .tool-icon { height: 100px; border-radius: 22px; }
  .home-tools .tool-icon img { width: 70px; height: 70px; }
  .home-tools .tool-tile strong { max-width: 140px; font-size: 13px; }
  .home-tools .tool-tile { gap: 12px; }
  .discovery-grid { gap: 20px; }
  .discover-card { min-height: 250px; padding: 25px; }
  .discover-card h3 { font-size: 22px; }
  .discover-card p, .discover-link { font-size: 13px; }
  .discover-card .eyebrow { font-size: 10px; }
  .discover-art { width: 110px; height: 100px; }
  .chart-card { padding: 24px; }
  .chart-card > .muted, .segmented button { font-size: 12px; }
  .row h3, .row .right { font-size: 14px; }
  .row p, .row .right small { font-size: 12px; }
  #play-content .puzzle-board { height: 330px; max-height: none; }
  .tools-frame { width: 100%; height: 780px; }
  .website-footer { padding-bottom: 30px; }
}
@media (max-width: 370px) {
  .three-hero.fresh-hero .hero-art { width: 130px; height: 150px; right: -12px; }
  .home-tools .tool-tile strong { font-size: 8px; }
}
@media print {
  .shell > header, nav[aria-label="Main navigation"], .website-footer { display: none; }
  main { padding-top: 0; }
}

/* A website link; existing journal navigation handlers and storage remain unchanged. */
nav[aria-label="Main navigation"] .reading-nav{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-width:0;gap:5px;color:#7054c4;text-decoration:none;padding:6px 4px 0;border-radius:12px;background:#f0eafb;font-family:inherit}
nav[aria-label="Main navigation"] .reading-nav svg{width:22px;height:22px;flex-shrink:0}
nav[aria-label="Main navigation"] .reading-nav span{font-size:9px;line-height:1.3;font-weight:600}
@media(min-width:800px){nav[aria-label="Main navigation"] .reading-nav{flex-direction:row;gap:9px;min-width:115px;padding:6px 10px}nav[aria-label="Main navigation"] .reading-nav span{font-size:13px}nav[aria-label="Main navigation"] .reading-nav svg{width:24px;height:24px}}