/* Reference-led home composition. Other pages keep their existing layout. */
body:has(#home:not([hidden])) .app-header{max-width:820px;padding:24px 24px 12px}
body:has(#home:not([hidden])) .brand>img:first-child{width:42px;height:42px}
body:has(#home:not([hidden])) .brand img.brand-wordmark{width:132px;height:auto}
body:has(#home:not([hidden])) .brand{gap:10px}
body:has(#home:not([hidden])) .brand-note{display:none}
body:has(#home:not([hidden])) main#main{padding:0 20px 28px}
#home{display:block;padding:0;min-height:0}
#home .home-hero{padding:12px 0 22px;margin:0;max-width:none}
#home .hero-story{position:relative;display:grid;grid-template-columns:57% 43%;align-items:center;min-height:292px;gap:0;margin:0 0 18px}
#home .hero-copy{position:relative;z-index:1;align-self:center;padding:0;min-width:0}
#home .hero-copy>.eyebrow{display:inline-block;white-space:nowrap;font-size:clamp(.66rem,2.7vw,.85rem);font-weight:650;line-height:1.5;padding:7px 10px;margin:0 0 18px;border:1px solid #ccd8ff;border-radius:99px;color:#4e5eac;background:#e9edffb3}
#home .home-hero h1{font-size:clamp(1.55rem,6.4vw,2.8rem);font-weight:850;line-height:1.22;letter-spacing:-.065em;white-space:pre-line;text-wrap:initial;margin:0 0 18px;color:#070d1d;overflow-wrap:normal;word-break:keep-all}
#home .hero-title-accent{color:#4c39f7;background:linear-gradient(105deg,#008fff,#255bff 43%,#7921ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#home .home-hero .sub{font-size:clamp(.8rem,3.2vw,1rem);line-height:1.75;color:#737e99;white-space:pre-line;margin:0;letter-spacing:-.035em}
#home .hero-illustration{position:relative;width:130%;height:292px;max-height:none;max-width:none;margin:0 0 0 -17%;object-fit:contain;filter:none;pointer-events:none}
#home .hero-action{display:flex;width:82%;max-width:320px;min-height:62px;margin:0 auto;padding:14px 12px;gap:9px;border-radius:23px;font-size:.98rem;font-weight:750;line-height:1.4;background:linear-gradient(110deg,#079eff 0%,#2366ff 48%,#7139f5 100%);border:1px solid #506bfc;border-bottom:6px solid #294bce;box-shadow:inset 0 2px 0 #ffffff5e,0 8px 18px #345fdd20}
#home .hero-action svg{width:25px;height:25px;flex-shrink:0}
#home .hero-action .button-chevron{font-size:1.65rem}
#home .hero-action:active{transform:translateY(3px);border-bottom-width:3px;box-shadow:inset 0 2px 4px #293cae25}
#home-content{display:block;flex:none;min-height:0}
#home .review-summary{display:block;background:#edf2ff;border:0;border-radius:20px;padding:18px;margin:0;box-shadow:none}
#home .learning-overview{display:flex;align-items:center;justify-content:space-between;gap:12px}
#home .review-summary .eyebrow{font-size:.75rem;margin:0 0 7px;line-height:1.4}
#home .study-chart-icon{width:18px;height:18px}
#home .review-summary h2{font-size:1rem;line-height:1.4;margin:0}
#home .review-summary .review-count{font-size:1.1rem}
#home-review-note,#home-review{display:none}
#home .learning-progress{padding:0;background:none;gap:9px}
#home .learning-progress .caption{font-size:.72rem}
#home .learning-progress strong{font-size:1.1rem;line-height:1.5}
#home .learning-ring{width:36px;height:36px;flex-shrink:0}
#home .learning-ring>span{width:28px;height:28px}
#home .learning-ring svg{width:18px;height:18px}
#home .section-title{margin:28px 0 12px}
#home .section-title h2{font-size:1.05rem}
#home .launch-state{margin:0;padding:20px;border-radius:20px;background:#edf2ff;box-shadow:none}
#home .launch-state strong{font-size:1.15rem}
#home .launch-state span{font-size:.85rem}
@media(min-width:641px){body:has(#home:not([hidden])) .app-header{padding:28px 32px 12px}body:has(#home:not([hidden])) main#main{padding-inline:32px}#home .hero-story{min-height:350px;grid-template-columns:55% 45%}#home .hero-illustration{height:350px;width:110%;margin-left:-5%}#home .hero-copy>.eyebrow{font-size:.85rem;margin-bottom:22px}#home .home-hero h1{font-size:2.8rem}#home .home-hero .sub{font-size:1rem}#home .hero-action{max-width:340px;min-height:68px;font-size:1.05rem}#home .home-hero{padding-bottom:28px}}
@media(max-width:360px){body:has(#home:not([hidden])) .app-header{padding-inline:18px}body:has(#home:not([hidden])) main#main{padding-inline:16px}#home .hero-story{min-height:266px}#home .hero-illustration{height:262px}#home .hero-copy>.eyebrow{font-size:.62rem;padding:6px 8px;margin-bottom:16px}#home .home-hero h1{font-size:1.38rem}#home .home-hero .sub{font-size:.73rem}#home .hero-action{width:88%;font-size:.88rem}#home .review-summary{padding:15px}#home .learning-ring{display:none}}
html[dir=rtl] #home .hero-illustration{margin-left:0;margin-right:-17%}html[dir=rtl] #home .home-hero h1{letter-spacing:normal}
@media(prefers-reduced-motion:reduce){#home .hero-action:active{transform:none}}
#home .home-hero h1{font-size:clamp(1.55rem,7.1vw,2.8rem)}
#home #home-review-note{display:none}
#home .home-recent{margin-top:20px}
#home .home-recent>summary{color:#647293;font-size:.85rem;padding:12px 4px;font-weight:550}
#home .home-recent .section-title{margin:4px 0 10px;justify-content:flex-end}
#home .home-recent .section-title h2{display:none}
@media(max-width:360px){#home .home-hero h1{font-size:1.5rem}}
/* Slightly stronger copy, preserving the reference composition. */
#home .home-hero h1{font-size:clamp(1.7rem,7.9vw,3.1rem)}
#home .hero-copy>.eyebrow{font-size:clamp(.72rem,2.95vw,.93rem)}
#home .home-hero .sub{font-size:clamp(.86rem,3.55vw,1.08rem)}
@media(max-width:360px){#home .home-hero h1{font-size:1.6rem}#home .hero-copy>.eyebrow{font-size:.68rem}#home .home-hero .sub{font-size:.79rem}}

#home .home-hero h1,#home .home-hero .sub{padding-inline-start:4px}
/* Match the home brand lockup on vocabulary, review and settings pages. */
.app-header .brand>img:first-child{width:42px;height:42px}
.app-header .brand img.brand-wordmark{width:132px;height:auto}
.app-header .brand{gap:10px}
#words-heading{font-size:1.8rem}
/* Shared starting rhythm when switching between vocabulary and review. */
#words{padding-top:8px}
#quiz-setup{margin-top:8px}