:root{--ink:#1e1b4b;--paper:#fcf8ff;--green:#0060ac;--muted:#414751;--line:#e3dfff;--sky:#60a5fa;--pink:#ffd8e7;--yellow:#ffe24c;--mint:#a7f3d0;--lavender:#e9e5ff}html{scroll-behavior:smooth;scroll-padding-top:20px}body{background:#fcf8ff;color:var(--ink);font-family:Quicksand,'Trebuchet MS',sans-serif;font-weight:600}h1,h2,h3,.brand{font-family:Comfortaa,'Trebuchet MS',sans-serif}button,input,select{font-family:Quicksand,'Trebuchet MS',sans-serif;font-weight:700}button{min-height:56px;border:2px solid transparent;border-radius:999px;background:#e9e5ff;box-shadow:0 5px 0 #c7c0e9;color:var(--ink);padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,box-shadow .12s}button:hover{background:#dfd7ff;transform:translateY(-2px)}button:active{transform:translateY(4px);box-shadow:0 1px 0 #c7c0e9}button:disabled{transform:none;box-shadow:none;opacity:.4}button[aria-pressed=true]{background:#60a5fa;color:#103358;border-color:#0060ac;box-shadow:0 5px 0 #003a6b}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #0060ac;outline-offset:5px}.mi{font-family:'Material Symbols Rounded';font-weight:600;font-style:normal;font-size:26px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}header{height:96px;max-width:none;padding:0 max(24px,calc((100% - 1280px)/2));background:#ffffffdb;border-radius:0;border:0;border-bottom:2px solid #efebff;backdrop-filter:blur(15px);gap:18px}.brand{font-size:25px;letter-spacing:-1px;white-space:nowrap;display:flex;align-items:center;gap:6px;color:#0060ac}.brand-dot{color:#a43073}.brand-mark{display:flex;align-items:center;justify-content:center;background:#ffe24c;color:#524600;width:54px;height:54px;border-radius:20px;margin-right:7px;box-shadow:0 4px 0 #d0b617}.brand-mark .mi{font-size:34px}.top-nav{display:flex;align-items:center;background:#f3efff;border-radius:40px;padding:6px;gap:6px}.top-nav a,.top-nav button{display:flex;align-items:center;gap:8px;text-decoration:none;padding:12px 24px;min-height:54px;box-shadow:none;font-size:15px;color:var(--ink)}.top-nav .active{background:#60a5fa;border-radius:40px;box-shadow:0 4px 0 #003a6b}.header-actions{display:flex;gap:12px}.header-actions button{width:56px;padding:8px;background:#ffd8e7;box-shadow:0 5px 0 #b95686}#gallery-button{background:#e9e5ff;box-shadow:0 5px 0 #c7c0e9;width:auto}#saved-count{background:white;color:var(--ink);font-size:12px;margin:0;padding:2px 7px}main{max-width:1280px;padding:26px 24px;margin:auto}.intro{border-radius:40px;background:linear-gradient(115deg,#d4e3ff,#f4e6ff 60%,#ffd8e7);padding:40px 44px;min-height:330px;position:relative;overflow:hidden;margin-bottom:30px}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:white;padding:7px 14px;border-radius:24px;font-size:11px;color:#0060ac;font-weight:700}.hero-badge .mi{font-size:18px}h1{font-size:44px;line-height:1.25;font-weight:700;letter-spacing:-1px;margin:18px 0 8px}h1 em{font-style:normal;color:#a43073}.intro p{font-size:18px;color:#343a51;margin:12px 0 22px}.hero-action{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#ffe24c;color:#342d00;border-radius:99px;min-height:56px;padding:12px 28px;font-size:17px;font-weight:700;box-shadow:0 6px 0 #bba200}.hero-pictures{position:relative;width:350px;height:250px;flex-shrink:0;margin:0 20px}.hero-pictures img{object-fit:cover;border:7px solid white;box-shadow:0 8px 0 #cad4f0}.hero-turtle{width:220px;height:230px;border-radius:38px;position:absolute;left:5px;top:0;transform:rotate(-8deg)}.hero-flower{width:140px;height:155px;border-radius:30px;position:absolute;right:0;bottom:0;transform:rotate(9deg)}.picture-label{position:absolute;left:10px;bottom:-15px;background:white;padding:9px 15px;border-radius:20px;font-size:11px;transform:rotate(-4deg)}.academy{background:white;border:3px solid #f0ebff;border-radius:36px;padding:30px;backdrop-filter:none;box-shadow:0 8px 24px -4px #60a5fa1f}.learning-bar h2{font-size:28px;margin:10px 0;color:var(--ink)}.eyebrow{color:#0060ac;font-size:11px;letter-spacing:1px}.age-select-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.age-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 20px}.age-buttons>span{font-size:16px;margin-right:5px}.age-buttons button{width:56px;height:56px;padding:0;font-size:21px;background:#f6f2ff}.age-buttons button[aria-pressed=true]{background:#ffe24c;border-color:#bba200;box-shadow:0 5px 0 #bba200;color:#433900}#age-help{font-size:13px;margin-top:18px;color:#555769}.category-filters{gap:12px;margin:20px 0 28px}.category-filters button{min-height:58px;display:flex;align-items:center;gap:8px;background:#e0f2fe;border:2px solid #c0d4f7;box-shadow:0 4px 0 #c0d4f7;color:#143a61;font-size:14px;padding:10px 17px}.category-filters button:nth-child(3){background:#ecfdf5;border-color:#a7f3d0;box-shadow:0 4px 0 #a7f3d0}.category-filters button:nth-child(4){background:#fff1f6;border-color:#ffd8e7;box-shadow:0 4px 0 #ffd8e7}.category-filters button[aria-pressed=true]{background:#60a5fa;border-color:#0060ac;box-shadow:0 4px 0 #003a6b}.lesson-catalog{grid-template-columns:repeat(4,1fr);gap:20px}.lesson-card{border:3px solid #e9e5ff;border-radius:28px;background:#fff;padding:14px;gap:12px;overflow:hidden;box-shadow:0 5px 0 #e9e5ff}.lesson-card:nth-child(4n+2){border-color:#ffd8e7;box-shadow:0 5px 0 #ffd8e7}.lesson-card:nth-child(4n+3){border-color:#d4e3ff;box-shadow:0 5px 0 #d4e3ff}.lesson-card:nth-child(4n){border-color:#a7f3d0;box-shadow:0 5px 0 #a7f3d0}.lesson-card svg{height:145px;background:#f8f5ff;border-radius:18px}.lesson-card:nth-child(4n+2) svg{background:#fff2f7}.lesson-card:nth-child(4n+3) svg{background:#eff7ff}.lesson-card:nth-child(4n) svg{background:#effbf4}.lesson-card h3{font-size:17px;line-height:1.5;font-weight:700}.lesson-card p{display:none}.lesson-card .lesson-meta{font-size:10px;color:#53556d;line-height:1.6}.lesson-card button{background:#ffe24c!important;color:#433900;border:0;box-shadow:0 5px 0 #bba200;min-height:56px;font-size:15px;margin-bottom:5px}.completed-label{color:#096847}.lesson-header{background:#f6f2ff;border-radius:24px;padding:20px}.lesson-header h2{font-size:26px;line-height:1.5}.lesson-action-bar{display:flex;align-items:center;gap:12px;margin:20px 0}.materials-icons{display:flex;gap:8px;background:#fff9d9;border-radius:18px;padding:12px}.materials-icons .mi{font-size:29px}.lesson-action-bar #materials{font-size:13px;flex:1}.lesson-action-bar button{background:#ffd8e7;box-shadow:0 5px 0 #b95686}.step-dots{display:flex;gap:10px;margin:20px 0}.step-dot{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#e9e5ff;font-size:16px}.step-dot.current{background:#60a5fa;color:#12375c;outline:3px solid #0060ac}.step-dot.done{background:#ffe24c;color:#433900}.teaching-layout{grid-template-columns:1.25fr 1fr;gap:28px}.teaching-picture{border:3px solid #e9e5ff;border-radius:30px;background:#fcfbff}.teaching-picture svg{background:#f6f2ff}.teaching-picture p{font-size:12px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px}.line-key{width:22px;height:5px;display:inline-block;background:#a43073;border-radius:3px}.line-key.old{background:#626871}.teaching-instruction h3{font-size:26px;line-height:1.5}.teaching-instruction>p{line-height:1.8;font-size:16px}.paper-prompt{background:#efebff;display:flex;gap:10px;align-items:center;color:#393164;font-size:15px;font-weight:700}.step-navigation button{min-width:64px;min-height:64px;font-size:19px}.step-navigation .primary{background:#ffe24c!important;border:0;color:#433900!important;box-shadow:0 6px 0 #bba200;flex:1}.supplies{display:flex;justify-content:center;align-items:center;gap:12px;padding:20px;font-size:13px;color:#55516b}.supplies .mi{color:#0060ac}.optional-studio{margin:25px 0;padding:24px 30px;border-radius:30px;background:#fff2fa;border:2px solid #ffd8e7}.optional-studio h2{font-size:24px;line-height:1.5}.optional-studio p{margin-bottom:0;font-size:14px}.optional-studio button{background:#60a5fa;color:#103358;box-shadow:0 6px 0 #003a6b}.mode-nav{background:#f3efff;border:0;border-radius:28px;padding:12px;gap:12px}.mode-nav button{background:#e9e5ff;font-size:14px}.mode-nav button[aria-pressed=true]{background:#60a5fa;color:#103358;box-shadow:0 5px 0 #003a6b}aside,.studio{background:white;border:3px solid #e9e5ff;backdrop-filter:none;border-radius:30px}.studio-top{font-size:13px;color:#4c476b}.paper{border-radius:22px;box-shadow:none;background:white}#paint{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.tools{gap:12px;flex-wrap:wrap;padding:18px}.tools button{min-height:56px;border:0;min-width:56px;font-size:13px;background:#e9e5ff}.tools button[aria-pressed=true]{background:#60a5fa;color:#103358}.tool-group{gap:8px}.size{display:flex;font-size:13px;gap:10px}.size input{height:44px;width:100px}.bottom-bar{gap:12px;padding:18px}.bottom-bar button{min-height:56px;font-size:13px}.bottom-bar .primary{background:#a7f3d0!important;color:#124937!important;border:0;box-shadow:0 5px 0 #47a482}#palette{gap:8px}#palette button{width:52px;height:56px;min-height:56px;box-shadow:none;padding:4px}#palette span{width:40px;height:40px;border:3px solid white;box-shadow:0 2px 0 #1e1b4b}.custom-color input{width:48px;height:48px}.pen-settings{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:12px;background:#f3efff}.pen-settings button{min-height:52px;font-size:13px;background:white}.pen-settings #pen-status{font-size:12px}.grownups{margin:20px 0;background:#f3efff;border-radius:24px;padding:20px;color:#4a4568}.grownups summary{font-size:14px;cursor:pointer;min-height:40px;display:flex;align-items:center;gap:10px}.grownups p{font-size:13px;max-width:900px}.footer-strip{border:0;padding-top:18px}.footer-strip span{font-size:10px}.footer-strip p{font:600 15px Quicksand,sans-serif}dialog{background:#fcf8ff;border:4px solid white;border-radius:30px;box-shadow:0 16px 36px -6px #1e1b4b2e}.install-steps{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center}.install-steps p{font-size:14px}.install-steps .mi{font-size:32px;color:#0060ac}.young-reader #age-help,.young-reader .lesson-meta,.young-reader #materials,.young-reader #step-instruction,.young-reader #practice-challenge{display:none}.young-reader .lesson-action-bar{justify-content:space-between}.young-reader #step-title{font-size:23px}.young-reader .lesson-card h3{font-size:16px}.young-reader .learning-bar .eyebrow{display:none}body:not(.learning-started) .academy{background:#fff9df}body:not(.learning-started) .age-buttons button{width:64px;height:64px;font-size:25px}@media(min-width:1100px){.teaching-picture{position:sticky;top:20px;align-self:start}}@media(max-width:1000px){.lesson-catalog{grid-template-columns:repeat(3,1fr)}header{padding:0 24px}.hero-pictures{width:280px;margin:0}.hero-turtle{width:185px;height:210px}.hero-flower{width:120px;height:135px}.intro{padding:30px}h1{font-size:37px}.top-nav a,.top-nav button{padding:12px;font-size:13px}}@media(max-width:760px){.top-nav{display:none}.brand{font-size:23px}header{height:85px;padding:0 16px}.header-actions{gap:10px}.intro{min-height:300px;gap:15px;border-radius:30px;padding:25px}.intro p{font-size:15px}.hero-pictures{width:180px;height:205px}.hero-turtle{width:150px;height:180px;left:0}.hero-flower{width:95px;height:105px;right:-8px;bottom:-6px}.picture-label{display:none}h1{font-size:30px}.hero-badge{font-size:9px}.hero-action{font-size:15px;padding:10px 18px}.lesson-catalog{grid-template-columns:repeat(2,1fr);gap:16px}.academy{padding:20px}.learning-bar h2{font-size:25px}.teaching-layout{grid-template-columns:1fr}.lesson-header{padding:16px;gap:12px}.lesson-header h2{font-size:22px}.lesson-header button{font-size:13px}.lesson-action-bar #materials{display:none}.lesson-action-bar{justify-content:space-between}.teaching-instruction{padding:0}.optional-studio{padding:22px}.footer-strip{display:block}main{padding:20px 16px}.supplies{gap:8px;padding:18px 0;font-size:12px}}@media(max-width:430px){header{gap:7px}.brand{font-size:19px}.brand-mark{width:40px;height:44px;border-radius:16px;margin-right:0}.brand-mark .mi{font-size:26px}.header-actions button{width:50px;min-height:54px}.hero-pictures{width:108px;height:170px}.hero-turtle{width:105px;height:135px;border-width:4px}.hero-flower{width:75px;height:80px;border-width:4px}.intro{padding:20px;min-height:285px}h1{font-size:25px;letter-spacing:-.7px}.intro p{font-size:13px}.hero-badge{font-size:8px;padding:5px 8px}.hero-badge .mi{font-size:15px}.hero-action{font-size:13px;padding:10px 15px}.academy{padding:16px}.age-buttons{gap:10px}.age-buttons button{width:56px;height:56px}.category-filters{gap:10px}.category-filters button{padding:10px 12px;font-size:12px}.category-filters .mi{font-size:24px}.lesson-card{padding:10px;border-radius:24px}.lesson-card svg{height:120px}.lesson-card h3{font-size:15px}.lesson-card button{font-size:13px;padding:10px 7px}.optional-studio{display:block}.optional-studio button{width:100%;margin-top:15px}.tools{padding:14px}.pen-settings{padding:12px}.bottom-bar{padding:14px}#palette{gap:5px}#palette button{width:48px}.step-navigation{position:sticky;bottom:12px;padding:10px;background:#fcf8fff2;border-radius:30px;z-index:4}.supplies .mi{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}button:hover,button:active{transform:none}}
@media(max-width:430px){.tool-group{width:100%;justify-content:space-between}.tools .tool-group button{padding:10px;min-width:56px}.mode-nav button{flex-direction:column;gap:6px}.size{flex:1}.bottom-bar #palette{width:100%}.bottom-bar #save{flex:1}.pen-settings{gap:8px}.pen-settings button{padding:10px 14px}.lesson-header{flex-wrap:wrap}.lesson-header button{min-width:56px}.lesson-card .lesson-meta{letter-spacing:0}.supplies{flex-wrap:wrap}}
.lesson-open .intro,.lesson-open .learning-bar,.lesson-open .age-buttons,.lesson-open #category-filters,.lesson-open #age-help{display:none}.lesson-open .lesson-header{margin-top:0}.lesson-open .academy{scroll-margin-top:20px}.lesson-open .hero-pictures{display:none}.category-count{font-size:12px;opacity:.85}
@media(max-width:760px){.lesson-open .academy{padding:16px}.young-reader .lesson-header{padding:12px 16px}.young-reader .lesson-header h2{margin:8px 0;font-size:21px}.young-reader .lesson-action-bar{margin:12px 0}.young-reader .materials-icons{padding:9px}.young-reader .step-dots{margin:14px 0}.young-reader .teaching-layout{gap:12px;margin:14px 0}.young-reader .teaching-picture svg{height:clamp(160px,28vh,270px)}.young-reader .teaching-picture p{margin:4px 0;padding:8px;font-size:11px}.young-reader .teaching-instruction h3{margin:6px 0;font-size:21px}.young-reader .paper-prompt{padding:12px;font-size:13px}.young-reader .step-navigation{margin-top:12px}.young-reader .teaching-instruction>#learning-status{margin:6px 0}.young-reader .teaching-instruction>#step-counter{font-size:10px}}
.teaching-instruction h3,.lesson-card h3,.optional-studio h2,.learning-bar h2,.lesson-header h2,dialog h2{font-family:Comfortaa,'Trebuchet MS',sans-serif;font-weight:700}
.difficulty-filters{display:flex;gap:9px;align-items:center;margin:16px 0 8px}.difficulty-filters button{min-width:90px;border-radius:999px;background:#fff;border:1px solid #ded9e8;font-weight:800}.difficulty-filters button[aria-pressed=true]{background:#7153a0;border-color:#7153a0;color:#fff}.lesson-open #difficulty-filters{display:none}.header-actions #about-button{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#ffe24c;color:#342d00;text-decoration:none;box-shadow:0 5px 0 #bba200}.header-actions #about-button .mi{font-size:26px}.footer-strip .about-footer{display:inline-flex;align-items:center;gap:6px;color:#0060ac;font-weight:800;text-decoration:none;letter-spacing:0;font-size:12px}
@media(max-width:430px){.header-actions{gap:6px}.header-actions #about-button{width:40px;height:48px}.header-actions button{width:44px;min-height:48px;padding:6px}.header-actions #gallery-button{width:auto}.brand{font-size:17px;gap:3px}.brand-mark{width:36px;height:42px}}
/* Keep the story shortcut reachable when the text navigation collapses on phones. */
.header-actions #story-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:56px;padding:8px 13px;border-radius:999px;background:#dff3e8;color:#244d3c;text-decoration:none;font-weight:900;box-shadow:0 5px 0 #a7d8b8;white-space:nowrap}.header-actions #story-button .mi{font-size:23px}.header-actions #story-button:hover{transform:translateY(-2px)}
@media(max-width:760px){.header-actions #story-button{width:48px;height:48px;min-height:48px;padding:5px}.story-button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:430px){.header-actions #story-button{width:40px;height:48px;min-height:48px}.header-actions #story-button .mi{font-size:22px}}
/* Small-screen fit and touch targets across the drawing app. */
html,body{max-width:100%;overflow-x:hidden}main,.academy,.workspace,.studio,aside,.lesson-catalog,.teaching-layout{min-width:0}.lesson-card,.teaching-picture,.teaching-instruction{min-width:0}.lesson-card h3,.lesson-card .lesson-meta{overflow-wrap:anywhere}.paper{width:100%;max-width:100%}#paint,#art,#guide{max-width:100%}button,select,input{max-width:100%}
@media(max-width:760px){.workspace{display:flex;flex-direction:column;gap:14px}.workspace aside,.workspace .studio{width:100%;min-width:0}.studio-top{flex-wrap:wrap;gap:8px}.tools,.bottom-bar{width:100%;min-width:0}.bottom-bar{justify-content:center}.bottom-bar #palette{display:flex;flex-wrap:wrap;justify-content:center}.size{min-width:0}.size input{min-width:70px}.age-select-label select{max-width:48vw}.category-filters{display:flex;overflow-x:auto;padding:4px 3px 12px;scroll-snap-type:x proximity}.category-filters button{flex:none;scroll-snap-align:start}.difficulty-filters{overflow-x:auto;padding:4px 2px 10px}.difficulty-filters button{flex:none}.lesson-catalog{min-width:0}.paper-prompt{line-height:1.4}.grownups{overflow-wrap:anywhere}}
@media(max-width:380px){header{padding-left:10px;padding-right:10px}.header-actions{gap:5px}.brand{font-size:16px}.brand-mark{width:34px}.header-actions #story-button,.header-actions #about-button,.header-actions button{width:38px;min-width:38px}.header-actions #gallery-button{width:auto;min-width:44px}.lesson-catalog{gap:10px}.lesson-card{padding:8px}.bottom-bar button{padding:8px}.age-buttons{gap:7px}.age-buttons button{width:48px;height:48px}}
.account-control{display:flex;align-items:center;gap:6px}.account-control form{margin:0}.header-actions .account-link,.header-actions .signup-link,.header-actions .logout-button{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:48px;min-height:48px;padding:8px 12px;border:0;border-radius:999px;background:#edf0ff;color:#293b67;text-decoration:none;font-weight:900;white-space:nowrap}.header-actions .signup-link{background:#fff2b0;color:#554900}.header-actions .logout-button{width:48px;min-width:48px;background:#ffe0e9;color:#692a45;box-shadow:0 4px #d78aa4}.account-label{font-size:12px;max-width:100px;overflow:hidden;text-overflow:ellipsis}.account-control .mi{font-size:20px}.cloud-count{font-size:12px;font-weight:900;color:#61568c}.sync-local{margin:8px 0;padding:10px 14px!important;background:#e4f3e9!important;color:#245438!important}.cloud-saved-item{display:grid;grid-template-columns:48px 1fr auto;gap:7px 12px;align-items:center}.cloud-art-mark{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#f4edff;font-size:25px}.cloud-saved-item h3{margin:0;font-size:14px}.saved-date{grid-column:2;font-size:10px;color:#737487;margin:0}.saved-actions{grid-column:3;grid-row:1/3;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.saved-actions button,.saved-actions a{min-height:38px;padding:8px 11px;border-radius:12px;font-size:11px}.saved-download{display:inline-flex;align-items:center;background:#eaf3ff;color:#244a73;text-decoration:none;font-weight:800}.remove-and-save{background:#ffe4ed!important;color:#7d294e!important}.sync-local{width:100%}#cloud-limit{max-width:min(660px,94vw);max-height:88vh;overflow:auto}#cloud-limit-items{display:grid;gap:9px;margin:15px 0}.account-page input{font-size:16px}
@media(max-width:760px){.account-control{gap:4px}.account-label{display:none}.header-actions .account-link,.header-actions .logout-button,.header-actions .signup-link{width:42px;min-width:42px;height:48px;min-height:48px;padding:5px}.header-actions .signup-link{font-size:10px}.cloud-saved-item{grid-template-columns:38px 1fr}.cloud-art-mark{width:38px;height:38px;grid-row:1/3}.saved-actions{grid-column:2;grid-row:auto;justify-content:flex-start}.saved-actions button,.saved-actions a{flex:1;text-align:center}.account-control .mi{font-size:19px}}
@media(max-width:380px){.header-actions .account-link,.header-actions .logout-button,.header-actions .signup-link{width:36px;min-width:36px}.header-actions .signup-link{font-size:9px}}

@media(max-width:760px){.header-actions .signup-link{display:none}}

#gallery{max-width:min(780px,94vw);max-height:90dvh;overflow:auto}.cloud-saved-item{background:#fff;border:1px solid #e7e3f1;border-radius:15px;padding:10px}

/* Account links use the same raised, playful color language as the main controls. */
.header-actions .account-control{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.header-actions .account-control .account-link,.header-actions .account-control .signup-link,.header-actions .account-control .logout-button{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:50px;height:50px;padding:0 14px;border:2px solid #0060ac;border-radius:999px;background:#60a5fa;color:#103358;text-decoration:none!important;text-decoration-line:none!important;font-family:Quicksand,"Trebuchet MS",sans-serif;font-size:13px;font-weight:900;line-height:1;white-space:nowrap;box-shadow:0 5px 0 #003a6b;cursor:pointer}
.header-actions .account-control .account-link:hover{background:#78b3fa;color:#103358;transform:translateY(-2px)}
.header-actions .account-control .signup-link{border-color:#bba200;background:#ffe24c;color:#433900;box-shadow:0 5px 0 #bba200}
.header-actions .account-control .signup-link:hover{background:#ffeb78;color:#433900;transform:translateY(-2px)}
.header-actions .account-control .logout-button{width:48px;min-width:48px;border-color:#d78aa4;background:#ffe0e9;color:#692a45;box-shadow:0 5px 0 #b95686}
.header-actions .account-control .account-link .mi,.header-actions .account-control .signup-link .mi{font-size:20px}
.header-actions .account-control .account-label,.header-actions .account-control .signup-label{display:inline;max-width:100px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1000px) and (min-width:761px){.header-actions .account-control{gap:6px}.header-actions .account-control .account-link,.header-actions .account-control .signup-link{padding:0 10px;font-size:12px}}
@media(max-width:760px){.header-actions .account-control{gap:5px}.header-actions .account-control .account-label{display:none}.header-actions .account-control .account-link,.header-actions .account-control .logout-button{width:42px;min-width:42px;height:48px;min-height:48px;padding:0}.header-actions .account-control .signup-link{display:none}}
@media(max-width:380px){.header-actions .account-control .account-link,.header-actions .account-control .logout-button{width:36px;min-width:36px}}

/* Mythology portraits keep the full illustrated figure visible while drawing. */
.lesson-card.myth-lesson-card svg{height:220px;background:#f6efff;border-radius:16px}
#step-picture.art-portrait{height:min(72vh,760px);background:#fcf8ff}
@media(max-width:760px){#step-picture.art-portrait{height:min(70vh,650px)}}

/* Watercolor studio: warm paper, painterly washes, and simple guided scenes. */
.watercoloring .paper{background-color:#fffdf7;background-image:radial-gradient(ellipse at 17% 24%,#e8dfc91b 0 1px,transparent 2px),radial-gradient(ellipse at 68% 62%,#b7a98e15 0 1px,transparent 2px),radial-gradient(ellipse at 42% 82%,#d1c5ab14 0 1px,transparent 2px),linear-gradient(105deg,#fffefa,#f8f4e9 52%,#fffdf8);background-size:19px 23px,27px 31px,23px 29px,100% 100%;border-color:#e4dac6;box-shadow:inset 0 0 30px #8f7c5010,0 5px 18px #584c2910}
.watercoloring #paint{background:transparent;touch-action:none;cursor:crosshair}
.watercoloring #guide path{fill:none;stroke:#6f747c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 5;opacity:.48}
.watercoloring .mode-nav button[data-mode="watercolor"][aria-pressed="true"]{background:#9bd4ca;color:#173b36;border-color:#70b5a9}
.watercolor-choice{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-weight:800}
.watercolor-choice span{font-size:25px}
.watercolor-step{background:linear-gradient(135deg,#f9f4e4,#fffdf7);border:1px solid #e7ddc7;border-radius:16px;padding:14px;margin-top:12px}
.watercolor-step p{color:#555548}
.watercoloring .tools [data-tool="pen"][aria-pressed="true"]{background:#8fc6bd;color:#173b36;border-color:#69aa9e}
@media(max-width:760px){.watercoloring .mode-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.watercoloring .mode-nav button{min-height:50px}}
.watercoloring #guide{opacity:.72}
.studio-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.optional-studio .watercolor-launch{background:#9bd4ca;color:#173b36;box-shadow:0 6px 0 #559b8e}.optional-studio .watercolor-launch:hover{background:#b5e5da}
@media(max-width:600px){.studio-actions{width:100%}.studio-actions button{flex:1}.optional-studio{flex-wrap:wrap}}
.step-dots.long-lesson{gap:4px;flex-wrap:wrap}.step-dots.long-lesson .step-dot{flex:0 0 26px;min-width:26px;width:26px;height:26px;font-size:11px}