/* V4.10.0 — approved storybook artwork at the scale and placement of the originals. */
:root{--decor:url('assets/melody-decor.png');--paper-glow:#fff3fa;--frame-shadow:#be75a51a}
:root[data-character="cookieann"]{--decor:url('assets/cookieann-decor.png');--paper-glow:#fff6e6;--frame-shadow:#c28b4c1a}
body{background-image:radial-gradient(ellipse at 12% 12%,var(--paper-glow),transparent 60%),radial-gradient(ellipse at 95% 70%,var(--paper-glow),transparent 62%)!important}
/* One undivided illustration per sprite cell. No square icon frames. */
.story-decor{display:inline-block;flex:none;background-image:var(--decor);background-size:200% 300%;background-repeat:no-repeat;pointer-events:none}
.decor-0{background-position:0 0}.decor-1{background-position:100% 0}.decor-2{background-position:0 50%}.decor-3{background-position:100% 50%}.decor-4{background-position:0 100%}.decor-5{background-position:100% 100%}
.theme-art:has(>.story-decor)>svg,.appearance-open:has(>.story-decor)>svg{display:none!important}
.brand-decoration{width:14cqw;height:14cqw;left:-1cqw;top:1cqw;transform:rotate(-7deg)}
.brand-decoration .story-decor,.appearance-open .story-decor,.practice-decoration .story-decor{width:100%;height:100%}
:root[data-character="cookieann"] .brand-decoration{width:18cqw;height:18cqw;left:-2cqw;top:-1cqw;transform:rotate(-6deg)}
.appearance-open{width:14cqw;height:14cqw;min-width:44px;min-height:44px;padding:0;right:.5cqw;top:.5cqw;transform:rotate(10deg);border-radius:50%}
:root[data-character="cookieann"] .appearance-open{width:15cqw;height:15cqw;right:0;top:0;transform:rotate(8deg)}
.appearance-open:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#homeCloudStatus{margin-bottom:29px}
.welcome{height:22cqw;border-radius:6.3cqw;border-width:2px;box-shadow:inset 0 0 15px #ffffff35,0 3px 6px var(--frame-shadow)}
.welcome h2{font-size:5.6cqw;letter-spacing:0;max-width:64%;line-height:1.4}
.welcome img{width:37.5cqw;height:37.5cqw;right:.5cqw;bottom:-.5cqw;z-index:1}
:root[data-character="cookieann"] .welcome img{width:39cqw;height:39cqw;right:.1cqw;bottom:-.7cqw}
/* Three sunshine strokes, drawn in the same positions as the approved character art. */
.sunshine{position:absolute;width:6.8cqw;height:7.6cqw;pointer-events:none;z-index:3;overflow:visible;color:#ffd027}
.sunshine path{stroke:currentColor;stroke-width:6;stroke-linecap:round;fill:none}
.welcome>.sunshine{right:33cqw;top:-6.2cqw;transform:rotate(-7deg)}
:root[data-character="melody"] .welcome>.sunshine{display:none}
.hero,.scope-drawer{box-shadow:0 3px 7px var(--frame-shadow),inset 0 1px 0 #ffffff55}
.progress-heading{gap:10px;margin-bottom:10px}
.progress-heading h3 .story-decor{width:12cqw;height:12cqw;margin:-1.6cqw -1cqw -1.6cqw -1cqw;transform:rotate(-7deg)}
.progress-cell{background:linear-gradient(125deg,var(--rose-a),var(--rose-b));box-shadow:inset 0 1px 0 #ffffff55}
.progress-cell.star-cell{background:linear-gradient(125deg,var(--purple-a),var(--purple-b))}
.scope-drawer summary strong .story-decor{width:8cqw;height:8cqw;margin:-1cqw 0;transform:rotate(-4deg)}
#screen-home>.practice-title{height:9.5cqw;margin:7px 4px 4px}
#screen-home>.practice-title h3>.theme-art{width:9.5cqw;height:9.5cqw;margin-left:-1cqw}
.practice-title h3 .story-decor{width:100%;height:100%;transform:rotate(-9deg)}
.practice-decoration{width:15cqw;height:15cqw;right:3cqw;bottom:-1.2cqw;transform:rotate(8deg)}
:root[data-character="cookieann"] .practice-decoration{width:17cqw;height:17cqw;right:3.4cqw;bottom:-1.4cqw;transform:rotate(4deg)}
#screen-home .action-card{height:16.2cqw;min-height:16.2cqw;border-width:1.7px;box-shadow:inset 0 2px 0 #ffffff80,0 2px 4px var(--frame-shadow);overflow:visible}
#screen-home .action-card:nth-child(4n+1){border-radius:4.8cqw 4.1cqw 4.5cqw 4cqw}
#screen-home .action-card:nth-child(4n+2){border-radius:4.1cqw 4.8cqw 4cqw 4.6cqw}
#screen-home .tablet-caption{display:none!important}
/* Keep the approved eight icon identities, including checklist + pencil for mixed. */
#screen-home .practice-art{filter:drop-shadow(0 1px 1px #70403c08)}
.flashcard,.quiz-card,.report-card,.help-topic,.mastery-word-card,.detail-chart,.review-actions .action-card{box-shadow:0 3px 7px var(--frame-shadow),inset 0 1px 0 #ffffff44}
.flashcard.expanded{box-shadow:0 3px 0 var(--accent-line),0 6px 13px var(--frame-shadow)}
.flashcard>.sunshine{right:24cqw;bottom:20cqw;width:6cqw;height:7cqw;transform:rotate(-8deg)}
.flashcard.expanded>.sunshine{bottom:auto;top:-7.5cqw;right:27.5cqw}
.quiz-card>.sunshine{right:24cqw;bottom:21cqw;width:5.7cqw;height:6.7cqw}
.quiz-card[data-kind="listen"]>.sunshine{left:27cqw;right:auto;bottom:23cqw;transform:rotate(20deg)}
.quiz-card[data-answered="true"]>.sunshine,.quiz-card.finished>.sunshine{display:none}
.quiz-banner>.sunshine{display:none}
.quiz-banner[data-kind="spell"]>.sunshine{display:block;width:5.6cqw;height:6.6cqw;right:24cqw;bottom:13cqw}
.review-hero,.help-hero,.mastery-hero{position:relative}
.review-hero>.sunshine{right:24cqw;top:-2cqw;width:5.6cqw;height:6.6cqw}
.review-hero h3{max-width:65%}
.theme-choice{position:relative;overflow:visible;min-width:0;padding:12px 8px 14px!important;box-shadow:0 3px 7px #78544214;transition:transform .15s,border-color .15s}
.theme-choice[data-theme-choice="melody"]{background:linear-gradient(145deg,#fff0f7,#ffd6ec)!important;border-color:#efb3d1;color:#541b37}
.theme-choice[data-theme-choice="cookieann"]{background:linear-gradient(145deg,#fff8db,#ffe3bc)!important;border-color:#ebc780;color:#592617}
.theme-choice[aria-pressed="true"]{border:3px solid #ef729d;outline:0;transform:translateY(-3px)}
.theme-choice[aria-pressed="true"]::after{content:'✓';position:absolute;right:7px;top:7px;border-radius:50%;width:26px;height:26px;font:900 19px var(--round-font);display:grid;place-items:center;background:#e84f86;color:white}
.theme-choice img{width:100%;height:auto;max-height:155px;object-fit:contain;filter:drop-shadow(0 4px 2px #b16c6c17)}
.theme-choice b{font-size:22px}.theme-choice small{font-size:12px;line-height:1.5}
.theme-swatches{display:flex;justify-content:center;gap:7px;margin:8px 0 0}
.theme-swatches i{display:block;width:19px;height:19px;border:1px solid #a5757835;border-radius:50%;background:#f6a4d0}
.theme-swatches i:nth-child(2){background:#bce9d6}.theme-swatches i:nth-child(3){background:#d9b8f2}
[data-theme-choice="cookieann"] .theme-swatches i{background:#ffda83}[data-theme-choice="cookieann"] .theme-swatches i:nth-child(2){background:#ffb9a6}[data-theme-choice="cookieann"] .theme-swatches i:nth-child(3){background:#d0e8a7}
@media(prefers-color-scheme:dark){
 :root{--paper-glow:#47243c;--frame-shadow:#0000001a}
 :root[data-character="cookieann"]{--paper-glow:#49301d;--frame-shadow:#0000001a}
 .welcome,.hero,.scope-drawer,.flashcard,.quiz-card,.report-card,.help-topic,.mastery-word-card,.detail-chart,.review-actions .action-card{box-shadow:0 3px 8px #0002,inset 0 1px 0 #ffffff08}
 #screen-home .action-card{box-shadow:inset 0 1px 0 #ffffff18,0 3px 5px #0001}
 .theme-choice[data-theme-choice="melody"]{background:linear-gradient(145deg,#63445e,#42243c)!important;color:#fff0f7}
 .theme-choice[data-theme-choice="cookieann"]{background:linear-gradient(145deg,#64482c,#3c251b)!important;color:#fff0d4}
}
@media(hover:hover) and (pointer:fine){.action-card:hover,.theme-choice:hover{transform:translateY(-2px);filter:brightness(1.025)}.appearance-open:hover{transform:rotate(16deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Wide layouts keep generous artwork, without adding explanatory subtitles. */
@media(min-width:900px) and (orientation:landscape){
 .brand-decoration{width:85px;height:85px;left:5px;top:-3px}
 :root[data-character="cookieann"] .brand-decoration{width:105px;height:105px;left:0;top:-8px}
 .appearance-open,:root[data-character="cookieann"] .appearance-open{width:83px;height:83px;right:7px;top:0}
 .welcome{height:190px;border-radius:28px}.welcome h2{font-size:27px;max-width:57%;line-height:1.45;white-space:normal}
 .welcome p{display:none}.welcome img,:root[data-character="cookieann"] .welcome img{width:58%;height:100%;right:-2px;bottom:-2px}
 .welcome>.sunshine{width:34px;height:38px;right:40%;top:27px}
 .progress-heading h3 .story-decor{width:54px;height:54px;margin:-6px -4px}
 .scope-drawer summary strong .story-decor{width:36px;height:36px;margin:-3px 0}
 #screen-home>.practice-title{height:61px;min-height:61px;margin:0;padding-top:6px}
 #screen-home>.practice-title h3>.theme-art{width:47px;height:47px;margin-left:-3px}
 .practice-decoration,:root[data-character="cookieann"] .practice-decoration{width:88px;height:88px;right:24px;bottom:-6px}
 #screen-home>.actions{margin-top:61px}.action-label{flex:1;text-align:left}
 #screen-home .action-card{height:100%;min-height:108px;border-radius:25px!important}
}

.progress-heading h3>svg[hidden],.scope-drawer summary strong>svg[hidden]{display:none!important}

@media(max-width:899px),(orientation:portrait){
 .brand-center h1{font-size:clamp(29px,9.5cqw,51px)}
 .progress-heading h3{font-size:5.8cqw}
 #screen-home .action-card b{font-size:5.2cqw;letter-spacing:0}
 #screen-home .practice-art{transform:scale(1.09)}
}

@media(min-width:900px) and (orientation:landscape) and (max-height:820px){
 .welcome{height:170px}
 .scope-drawer .level-card{min-height:44px;padding:6px}
 .scope-drawer .category-grid{gap:5px;margin:4px 0 5px}
 #screen-home>.actions{gap:8px}
 #screen-home .action-card{min-height:100px}
}