:root{--page:#f8f7f3;--white:#fff;--ink:#302f3d;--muted:#777783;--purple:#7654cb;--purple-dark:#5d3eb0;--lilac:#eee8fc;--line:#e9e6e2;--mint:#e7f2e9;--yellow:#f7dc83;--shadow:0 12px 42px #42364e0c;--radius:24px;font-family:'Nunito',ui-rounded,'Avenir Next',Arial,sans-serif;color:var(--ink);background:var(--page);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.4}button{border:0;background:none}a{color:var(--purple)}button,select,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8c6ee2}button{transition:transform .18s ease,background .18s ease,box-shadow .18s ease}button:active:not(:disabled){transform:scale(.97)}svg{vertical-align:middle}.icon{width:22px;height:22px;stroke-width:1.8;flex-shrink:0}h1,h2,h3,p{margin:0}img{max-width:100%;display:block}h1,h2,h3{letter-spacing:-.035em}h1{font-size:36px;line-height:1.18;font-weight:900}h2{font-size:24px;line-height:1.3;font-weight:850}h3{font-size:18px;font-weight:850}small{font-size:12px}.skip-link{position:fixed;left:20px;top:-80px;z-index:200;background:#fff;padding:12px 20px;border-radius:10px}.skip-link:focus{top:12px}.loading{height:100vh;display:grid;place-content:center;text-align:center}.loading>span{font-size:32px;font-weight:900}.loading p{font-size:14px;color:var(--muted);margin-top:12px}.brand-dot{color:var(--purple)}
/* Home, collection and gallery */
.app-layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.sidebar{position:fixed;top:0;left:0;width:220px;height:100dvh;background:#fff;border-right:1px solid var(--line);padding:37px 22px 22px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:25px;letter-spacing:-1.1px;white-space:nowrap;padding:0;align-self:flex-start}.brand-mark{width:35px;height:39px;border-radius:11px;background:var(--purple);display:grid;place-items:center;color:#fff;transform:rotate(-7deg)}.brand-mark .icon{width:21px;height:21px}.brand-tag{font-size:9px;letter-spacing:1.7px;font-weight:800;margin:13px 0 40px 5px;color:#96919e}.side-nav{display:grid;gap:9px}.nav-item{padding:15px 16px;display:flex;gap:14px;align-items:center;text-align:left;font-weight:800;font-size:15px;border-radius:13px;color:#84808d;min-height:54px}.nav-item:hover{background:#f8f5fc;color:var(--purple)}.nav-item.active{background:#efe9fb;color:var(--purple)}.nav-item .icon{width:23px;height:23px}.nav-count{margin-left:auto;border-radius:8px;padding:1px 6px;background:#ded3f5;font-size:11px;color:#6746af}.sidebar-bottom{margin-top:auto}.little-note{border:1px solid #eee6d8;background:#fffcf3;border-radius:17px;padding:20px 15px 17px;margin-bottom:27px;position:relative;text-align:center}.little-note .icon{color:#d5ac43;width:30px;height:30px;margin-bottom:9px}.little-note p{font-size:13px;line-height:1.6;color:#82755e;font-weight:700}.grownups{font-size:12px;color:#8b8693;display:flex;gap:8px;align-items:center;margin:auto;padding:10px}.grownups .icon{width:17px;height:17px}.main-shell{grid-column:2;min-width:0;max-width:1500px;width:100%;padding:31px 45px 35px;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:29px;gap:12px;min-height:39px}.breadcrumb{display:flex;gap:9px;align-items:center;font-size:12px;font-weight:800;color:#96909e}.breadcrumb .icon{width:14px;height:14px}.breadcrumb strong{color:#5a5268;font-weight:800}.top-actions{display:flex;gap:12px;align-items:center}.language-button{font-size:11px;font-weight:900;color:#8c8499;letter-spacing:.6px;padding:10px}.language-button span{color:var(--purple)}.icon-button{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:#7d748f}.icon-button:hover{background:var(--lilac)}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#f6deb0;color:#86682b;box-shadow:0 0 0 4px #fff}.avatar .icon{fill:#ffeac1;stroke-width:1.5;width:23px;height:23px}.greeting{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px;gap:15px}.greeting h1{font-size:32px}.greeting p{font-size:14px;color:#928b9c;margin-top:7px;font-weight:600}.greeting .wave{font-size:27px;margin-left:5px;color:#d9ab4f;display:inline-flex;transform:rotate(-12deg)}.greeting .wave .icon{width:29px;height:29px}.mini-stat{display:flex;gap:7px;align-items:center;color:#9b824a;background:#fcf3db;border:1px solid #f2e4bd;border-radius:100px;padding:8px 13px;font-size:12px;font-weight:800;white-space:nowrap}.mini-stat .icon{fill:#f5d26c;width:17px;height:17px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;background:#eee7fa;border:1px solid #e8def9;border-radius:24px;min-height:286px;position:relative;overflow:hidden;margin-bottom:29px}.hero-content{padding:31px 0 30px 34px;position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:900;color:#8b6bb9;margin-bottom:11px}.eyebrow .icon{width:14px;height:14px}.hero h2{font-size:34px;line-height:1.13;color:#4b386f;max-width:330px;font-weight:900;letter-spacing:-.9px}.hero p{font-size:13px;line-height:1.7;color:#8c79a6;margin-top:12px;max-width:290px;font-weight:650}.hero-bottom{display:flex;gap:17px;align-items:center;margin-top:20px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:12px;background:var(--purple);color:white;font-size:14px;font-weight:850;padding:13px 21px;box-shadow:0 4px 0 #5d3ca8;transition:all .18s}.primary:hover{background:#6844bb;transform:translateY(-1px);box-shadow:0 5px 0 #5d3ca8}.primary:active{box-shadow:0 1px 0 #5d3ca8;transform:translateY(2px)}.primary .icon{width:19px;height:19px}.primary .play-fill{fill:currentColor;stroke-width:0;width:15px}.hero-meta{font-size:11px;font-weight:750;color:#9c8bae;line-height:1.7}.hero-meta span{display:flex;align-items:center;gap:5px}.hero-meta .icon{width:12px;height:12px}.hero-art{display:flex;align-items:center;justify-content:center;position:relative;padding:5px 21px 0 0}.hero-art:before{content:'';position:absolute;inset:30px 10px 20px;background:radial-gradient(ellipse,#f6f0ff 0%,transparent 68%);border-radius:50%}.hero-art img{width:100%;max-height:300px;object-fit:contain;position:relative;filter:drop-shadow(0 10px 8px #6a4a9b0d);transform:rotate(-4deg)}.hero-sticker{position:absolute;bottom:23px;right:22px;background:#fffef8;border:1px solid #e8e0ef;padding:7px 12px;border-radius:8px;font-size:11px;color:#8a79a3;font-weight:800;transform:rotate(6deg);box-shadow:0 4px 8px #68537307}.hero-sticker .icon{width:13px;height:13px;color:#b397cd;margin-right:4px}.hero-art .hero-lesson-svg{width:80%;height:260px;filter:drop-shadow(0 10px 8px #6a4a9b0a)}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:12px}.section-heading h2{font-size:19px;font-weight:850}.section-heading p{font-size:12px;color:#a29aa9}.text-button{font-size:12px;display:inline-flex;align-items:center;gap:6px;color:var(--purple);font-weight:800;padding:8px 0}.text-button .icon{width:15px;height:15px}.journey{margin-bottom:29px}.journey-strip{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px 20px;gap:0}.journey-step{display:flex;align-items:center;gap:11px;flex:1;text-align:left;padding:1px 0;min-height:43px}.journey-step:hover .step-round{transform:scale(1.08)}.step-round{height:43px;width:43px;border-radius:50%;background:#f3f0f7;display:grid;place-items:center;color:#b0a6be;flex-shrink:0;transition:transform .15s}.step-round .icon{width:20px;height:20px}.journey-step:first-child .step-round{background:#efe7ff;color:var(--purple)}.journey-step.done .step-round{background:#e4f3e6;color:#58996b}.journey-step.current .step-round{box-shadow:0 0 0 4px #f5efff;background:#e6d8ff;color:#7049ba}.journey-step span>b{display:block;font-size:12px;font-weight:850}.journey-step span>small{display:block;font-size:10px;color:#a59cac;margin-top:2px}.journey-connector{height:1px;border-top:2px dashed #eae5ef;width:29px;margin:0 15px 0 5px}.journey-step:last-child{flex:.8}.category-tabs{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap}.pill{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e6e1eb;background:transparent;border-radius:100px;padding:8px 17px;font-size:12px;font-weight:750;min-height:37px;color:#8c8398}.pill .icon{width:16px;height:16px}.pill.active{background:#7753c7;color:white;border-color:#7753c7;box-shadow:0 2px 3px #7753c711}.pill:hover:not(.active){background:#f0eaf8;color:var(--purple)}.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.lesson-card{border:1px solid #e8e4ea;border-radius:19px;background:#fff;padding:0;overflow:hidden;text-align:left;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}.lesson-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px #3323480d;border-color:#d5c5e8}.card-art{height:150px;display:flex;align-items:center;justify-content:center;position:relative;margin:6px 6px 0;border-radius:14px;background:var(--card-bg,#f2eefa)}.card-art svg.lesson-art{height:145px;width:165px;transition:transform .25s}.lesson-card:hover .card-art svg.lesson-art{transform:rotate(-4deg) scale(1.05)}.card-art:before{content:'';width:115px;height:115px;background:#ffffff45;position:absolute;border-radius:50%;top:15px;left:calc(50% - 57px)}.card-badge{position:absolute;top:11px;left:11px;padding:4px 7px;border-radius:6px;background:#fffc;font-size:8px;letter-spacing:.4px;color:#8b789b;font-weight:900;text-transform:uppercase;display:flex;gap:3px;align-items:center}.card-badge .icon{width:11px;height:11px}.completed-badge{position:absolute;top:11px;right:11px;background:#fff;border-radius:50%;width:23px;height:23px;color:#619d70;display:grid;place-items:center;box-shadow:0 2px 5px #3331}.completed-badge .icon{width:14px;height:14px}.card-copy{padding:14px 15px 15px;position:relative}.card-copy h3{font-size:15px;margin-bottom:5px;letter-spacing:-.2px}.card-meta{display:flex;align-items:center;gap:7px;font-size:10px;color:#a196ac;font-weight:700}.card-meta .icon{width:12px;height:12px}.card-arrow{position:absolute;right:14px;top:19px;width:26px;height:26px;background:#f6f2fc;color:#9b81c7;display:grid;place-items:center;border-radius:50%}.card-arrow .icon{width:13px;height:13px}.footer-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:27px;font-size:11px;color:#aaa1af;font-weight:650}.footer-note .icon{width:14px;height:14px;color:#b3a2c8}.mobile-brand{display:none}
/* Modals and setup */
.modal-backdrop{position:fixed;inset:0;z-index:80;background:#2d243c65;backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;padding:20px;animation:fadeIn .2s}.modal{width:560px;max-width:100%;max-height:calc(100dvh - 40px);overflow:auto;background:var(--page);border-radius:26px;padding:33px;position:relative;box-shadow:0 20px 100px #18112435;animation:popIn .25s}.modal-close{position:absolute;right:16px;top:16px;z-index:2}.modal h2{font-size:29px;margin:7px 0 9px}.modal>p{color:var(--muted);font-size:14px;line-height:1.7}.modal .primary{width:100%;margin-top:24px}.setup-art{width:140px;height:125px;margin:0 auto 5px}.setup-art svg{width:100%;height:100%}.setup-modal{text-align:center}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}.mode-option{border:2px solid var(--line);border-radius:18px;background:#fff;padding:18px 12px;min-height:150px;display:flex;align-items:center;flex-direction:column;position:relative}.mode-option.selected{border-color:var(--purple);background:#f3edfc;box-shadow:0 0 0 3px #7654cb0a}.mode-option>.icon{width:31px;height:31px;margin:5px 0 12px;color:var(--purple)}.mode-option b{font-size:16px}.mode-option small{font-size:11px;line-height:1.5;color:var(--muted);margin-top:5px;max-width:170px}.recommended{position:absolute;top:-10px;font-size:9px;border-radius:5px;background:#e6d9fc;color:#7252ad;padding:2px 7px;font-weight:850}.materials{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;color:#8e839b;font-size:12px}.materials span{display:flex;align-items:center;gap:5px}.materials .icon{width:15px;height:15px}.setup-caption{font-size:11px!important;color:#a297aa!important;margin-top:15px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.setting-row label,.setting-row h3{font-size:15px;letter-spacing:0;font-weight:800}.setting-row p{color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px}.setting-row select{border:1px solid var(--line);padding:9px;border-radius:10px;background:#fff;font-size:13px}.toggle{width:47px;height:28px;padding:4px;border-radius:20px;background:#d6d0df;flex-shrink:0;position:relative}.toggle:after{content:'';display:block;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 2px 3px #0001;transition:transform .2s}.toggle[aria-checked=true]{background:var(--purple)}.toggle[aria-checked=true]:after{transform:translateX(19px)}.settings-note{padding:17px;background:#eeeadf;border-radius:13px;font-size:12px;color:#83765f;line-height:1.7;margin-top:20px;display:flex;align-items:flex-start;gap:10px}.settings-note .icon{width:18px;height:18px;margin-top:3px}.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #e6ddef;border-radius:12px;padding:12px 18px;background:#fff;font-weight:800;font-size:13px;min-height:46px;color:#8b73a8}.secondary:hover{background:#f5effc}.secondary .icon{width:18px;height:18px}.dialog-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}.dialog-actions .primary{margin:0}.dialog-actions>*{flex:1}.small-note{font-size:12px!important;color:var(--muted)!important;line-height:1.7;margin-top:13px}.modal .eyebrow{justify-content:center;margin-top:9px}
/* Lesson */
.lesson-page{min-height:100dvh;background:var(--page);display:flex;flex-direction:column}.lesson-header{height:85px;padding:18px 35px;display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;border-bottom:1px solid var(--line);background:#fff;gap:20px}.lesson-header .brand{font-size:23px;gap:8px}.lesson-header .brand-mark{width:30px;height:33px;border-radius:9px}.lesson-header .brand-mark .icon{width:19px;height:19px}.lesson-title{text-align:center}.lesson-title b{font-size:15px;font-weight:850}.lesson-title small{color:#a396b2;display:block;font-size:10px;margin-top:3px;letter-spacing:.1px}.lesson-header-right{display:flex;justify-content:flex-end;gap:9px;align-items:center}.lesson-progress{display:flex;gap:5px;margin-top:8px;justify-content:center}.lesson-progress span{height:5px;background:#eee8f3;border-radius:10px;flex:1;max-width:46px}.lesson-progress span.done{background:#a58bd8}.lesson-progress span.active{background:var(--purple)}.lesson-workspace{flex:1;width:100%;max-width:1280px;margin:auto;display:grid;grid-template-columns:330px minmax(0,650px);justify-content:center;gap:35px;padding:30px 35px 22px;align-items:center}.teacher{align-self:stretch;display:flex;flex-direction:column;justify-content:center}.step-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#9e85bd;font-weight:850;letter-spacing:.5px}.step-tag .icon{width:16px;height:16px}.teacher h1{font-size:29px;margin-top:12px;line-height:1.18}.step-description{font-size:15px;line-height:1.65;color:#8e829c;margin-top:12px;max-width:330px;min-height:48px}.teacher-controls{display:flex;gap:8px;margin:17px 0 13px}.tiny-button{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e6ddec;background:#fff;border-radius:10px;color:#8c75a7;padding:9px 11px;font-size:11px;font-weight:850;min-height:38px}.tiny-button .icon{width:15px;height:15px}.tiny-button:hover{background:#f1eafb}.demo-paper{width:100%;max-width:320px;margin-top:0;aspect-ratio:1;background:#fffdfa;border:1px solid #e9e3db;border-radius:15px;box-shadow:0 5px 0 #eee8df;position:relative;overflow:hidden;align-self:center}.demo-paper svg{width:100%;height:100%}.demo-paper .example-tag{position:absolute;left:12px;top:11px;font-size:9px;letter-spacing:1.1px;text-transform:uppercase;font-weight:800;color:#bbb0a1}.demo-paper .draw-pointer{fill:#7654cb;stroke:#fff;stroke-width:2}.step-tip{margin-top:19px;font-size:12px;color:#a08a68;line-height:1.65;display:flex;gap:8px;align-items:flex-start;max-width:330px}.step-tip .icon{width:17px;height:17px;color:#d2b05d;flex-shrink:0;margin-top:1px}.draw-side{min-width:0}.canvas-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;font-size:12px;color:#8f809f;font-weight:800}.canvas-label span{display:flex;gap:7px;align-items:center}.canvas-label .icon{width:16px;height:16px}.guide-toggle{display:flex;gap:5px;align-items:center;font-size:10px;font-weight:850;background:transparent;border:1px solid #e4dbe9;padding:7px 10px;border-radius:8px;color:#a18caf}.guide-toggle[aria-pressed=true]{background:#ede3fb;color:var(--purple);border-color:#d4c3ef}.drawing-paper{position:relative;background:#fffdfa;aspect-ratio:1;width:100%;max-width:570px;margin-inline:auto;border-radius:18px;border:1px solid #e5dfd4;box-shadow:0 6px 0 #ece7df,0 13px 30px #43352c06;overflow:hidden;isolation:isolate}.drawing-paper:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.12' filter='url(%23n)'/%3E%3C/svg%3E")}.drawing-paper canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:2;cursor:crosshair}.canvas-guide{position:absolute;inset:0;width:100%;height:100%;opacity:.17;pointer-events:none;z-index:1}.canvas-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#c1b5cc;font-size:13px;gap:10px;z-index:1;text-align:center;padding:30px;transition:opacity .3s}.canvas-empty .icon{width:28px;height:28px;stroke-width:1.2}.canvas-empty.hidden{opacity:0}.canvas-corner{position:absolute;right:14px;bottom:12px;color:#d5cddc;font-size:10px;letter-spacing:.3px;font-weight:800;pointer-events:none;z-index:3}.art-tools{display:flex;gap:7px;align-items:center;margin-top:18px;background:#fff;border:1px solid #e8e2ed;padding:10px 12px;border-radius:16px;box-shadow:0 3px 0 #f0ebf5;flex-wrap:wrap;justify-content:center}.tool-group{display:flex;gap:3px;align-items:center}.tool-button{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#a899b3}.tool-button .icon{width:20px;height:20px}.tool-button.active{background:#eee5fb;color:var(--purple)}.tool-button:hover{background:#f2edf7}.tool-divider{height:26px;width:1px;background:#ece5f1;margin:0 4px}.colors{display:flex;gap:7px;align-items:center;padding:0 3px}.color-swatch{width:25px;height:25px;border-radius:50%;padding:0;border:3px solid #fff;box-shadow:0 0 0 1px transparent;position:relative}.color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--purple)}.color-swatch[aria-pressed=true]:after{content:'';position:absolute;top:6px;left:6px;width:7px;height:7px;border-radius:50%;background:#fff9}.size-button{width:30px;height:34px;display:grid;place-items:center;color:#88759b}.size-button span{display:block;border-radius:50%;background:currentColor}.size-button.active{background:#f1e9fc;border-radius:8px;color:var(--purple)}.lesson-footer{padding:17px 35px 20px;border-top:1px solid var(--line);background:#fff;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;min-height:86px}.lesson-footer .next-button{justify-self:end;min-width:150px}.lesson-footer .back-button{justify-self:start}.lesson-footer .back-button .icon{width:17px;height:17px}.footer-encouragement{text-align:center;font-size:12px;color:#b2a6bc;font-weight:750}.footer-encouragement .icon{width:15px;height:15px;margin-right:3px}.paper-workspace{grid-template-columns:330px minmax(0,570px);gap:60px}.paper-workspace .teacher{padding-top:20px}.paper-workspace .demo-paper{max-width:540px;box-shadow:0 7px 0 #eae3d8,0 16px 60px #6d5b4a0a}.paper-instruction{display:flex;gap:12px;background:#f0eadf;border:1px solid #e9e0d1;padding:17px;border-radius:13px;margin-top:24px;align-items:flex-start}.paper-instruction>.icon{color:#b19771;width:24px;height:24px;margin-top:3px}.paper-instruction b{font-size:13px;color:#968162}.paper-instruction p{font-size:12px;line-height:1.6;color:#a69275;margin-top:5px}.paper-under{text-align:center;font-size:11px;margin-top:16px;color:#afa18f}.paper-under .icon{width:14px;height:14px;margin-right:3px}.free-workspace{grid-template-columns:260px minmax(0,650px);gap:35px}.prompt-card{padding:21px;background:#f0e9fa;border:1px solid #e4d9f4;border-radius:20px;margin-top:15px}.prompt-card>.icon{color:#af93cf;width:27px;height:27px;margin-bottom:13px}.prompt-card h3{font-size:20px;color:#775896;line-height:1.4}.prompt-card p{font-size:12px;line-height:1.7;margin-top:9px;color:#a18aac}.prompt-card button{margin-top:17px}.free-teacher h1{font-size:29px}.voice-note{font-size:10px;color:#a28a79;line-height:1.6;margin-top:12px}.hint-toast{font-size:11px;color:#9f8cb1;margin:10px 0 0;text-align:center;min-height:16px}
/* Completion and journal */
.finish-page{min-height:100dvh;background:var(--page);padding:28px 25px;display:flex;flex-direction:column;align-items:center}.finish-brand{align-self:flex-start}.finish-layout{max-width:930px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin:auto;padding:30px 0}.finish-art{background:#fffdfa;border:1px solid #e8dfd3;padding:14px 14px 45px;border-radius:5px;transform:rotate(-4deg);box-shadow:0 8px 25px #56443613;position:relative}.finish-art:before{content:'';width:90px;height:30px;background:#e9dbbd91;position:absolute;left:calc(50% - 45px);top:-14px;transform:rotate(6deg);z-index:2}.finish-art>img,.finish-art>svg{width:100%;aspect-ratio:1;object-fit:contain}.finish-art>span{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#a49786;font-size:12px;font-weight:750}.paper-finish{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c5b494;text-align:center;gap:14px;background:#f8f3e9}.paper-finish>.icon{width:82px;height:82px;stroke-width:1}.paper-finish b{font-size:18px;color:#b29a76}.paper-finish small{font-size:12px;max-width:220px;line-height:1.7;color:#b5a186}.finish-copy .eyebrow{color:#b59652}.finish-copy h1{font-size:41px;line-height:1.15;margin-bottom:13px}.finish-copy>p{font-size:15px;line-height:1.7;color:#9a8da5}.skill-earned{display:inline-flex;align-items:center;gap:7px;background:#e9f3e8;color:#719172;font-size:11px;font-weight:800;padding:8px 12px;border-radius:8px;margin:17px 0}.skill-earned .icon{width:16px;height:16px}.proud-label{font-size:13px;font-weight:800;color:#a28eaf;margin:10px 0}.reflection-options{display:flex;gap:7px;flex-wrap:wrap}.reflection-options button{padding:10px 13px;background:#fff;border:1px solid #e9e0f0;border-radius:10px;font-size:12px;color:#9a84a9;font-weight:750;display:flex;gap:6px;align-items:center}.reflection-options button .icon{width:15px;height:15px}.reflection-options button.active{border-color:#ac8fd4;background:#f0e8fb;color:#7952aa}.finish-copy>.primary{margin-top:24px;width:100%}.finish-copy>.secondary{margin-top:12px;width:100%;background:transparent}.photo-label{margin-top:13px;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:7px;width:100%;padding:11px;border:1px dashed #cbb4e2;border-radius:12px;color:#9a75bb;font-weight:800;font-size:12px;background:#f7f1fc}.photo-label .icon{width:18px;height:18px}.photo-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.photo-input:focus-visible+.photo-label{outline:3px solid #8c6ee2;outline-offset:3px}.gallery-intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;gap:20px}.gallery-intro p{font-size:14px;color:#a093ac;margin-top:8px}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.gallery-card{background:#fffdfa;border:1px solid #e8e1d5;padding:10px 10px 14px;text-align:center;box-shadow:0 4px 10px #46372b05;position:relative;border-radius:4px;transition:transform .2s}.gallery-card:nth-child(3n+1){transform:rotate(-2deg)}.gallery-card:nth-child(3n+2){transform:rotate(1.5deg)}.gallery-card:hover{transform:rotate(0) translateY(-3px);box-shadow:0 10px 20px #46372b0c}.gallery-image{aspect-ratio:1;background:#f8f3e9;border-radius:2px;overflow:hidden}.gallery-image img{width:100%;height:100%;object-fit:contain}.gallery-image .paper-finish{height:100%;aspect-ratio:auto}.gallery-image .paper-finish .icon{width:46px;height:46px}.gallery-image .paper-finish b{font-size:12px}.gallery-image .paper-finish small{display:none}.gallery-card h3{font-size:13px;margin:12px 0 3px;letter-spacing:0}.gallery-card small{font-size:10px;color:#b6a78f}.gallery-empty{min-height:390px;background:#fffdf8;border:1px dashed #e5d9c5;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px}.gallery-empty>.icon{width:65px;height:65px;stroke-width:1;color:#c5b08a;margin-bottom:23px}.gallery-empty h2{font-size:25px;color:#98825e}.gallery-empty p{color:#b3a18a;font-size:14px;line-height:1.7;max-width:330px;margin:11px 0 25px}.gallery-empty .primary{font-size:13px}.art-modal{text-align:center}.art-modal>img{max-height:60dvh;aspect-ratio:1;object-fit:contain;margin:20px auto 15px;border-radius:12px;background:#fff}.art-modal .paper-finish{max-width:300px;margin:20px auto;border-radius:12px}.art-modal h2{font-size:24px}.art-modal .challenge{background:#f0ebdf;padding:17px;border-radius:13px;color:#9b8769;margin-top:16px;font-size:13px;line-height:1.6}.play-hero{background:#f5e8d9;border-color:#f0ddc7;min-height:245px}.play-hero h2{color:#976b45}.play-hero p{color:#b29473}.play-hero .eyebrow{color:#b18857}.play-hero .hero-art img{max-height:245px}.play-hero .hero-content{padding-top:26px;padding-bottom:26px}.play-hero .hero-sticker{color:#b1936a}.studio-note{border-radius:14px;background:#edf3e8;color:#91a27c;padding:17px 22px;display:flex;gap:11px;font-size:12px;line-height:1.6;margin:24px 0}.studio-note .icon{width:22px;height:22px;flex-shrink:0}.hidden{display:none!important}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;padding:13px 22px;background:#40334ff2;color:#fff;border-radius:13px;font-size:13px;font-weight:750;z-index:100;pointer-events:none;transition:.25s;text-align:center;max-width:90vw;box-shadow:0 7px 25px #34254222}#toast.show{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;inset:0;pointer-events:none;z-index:110;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:8px;height:15px;border-radius:3px;animation:fall var(--duration) ease-in var(--delay) both}.storage-warning{padding:12px 18px;border-radius:12px;background:#fff0dc;color:#946b3d;font-size:12px;margin-bottom:20px;line-height:1.5}.blank-photo-note{padding:20px;text-align:center;color:#ac9578}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes fall{to{transform:translate(var(--drift),105vh) rotate(700deg)}}@keyframes pathDraw{to{stroke-dashoffset:0}}.animate-in{animation:popIn .35s ease both}
/* Tablet and phone */
@media(min-width:1550px){.main-shell{padding:35px 65px}.hero{min-height:325px}.hero-content{padding:41px}.hero h2{font-size:40px}.hero p{font-size:15px}.hero-art img{max-height:335px}.card-art{height:180px}.card-art svg.lesson-art{height:175px;width:190px}.card-art:before{top:25px}.card-copy h3{font-size:17px}.card-meta{font-size:12px}}
@media(max-width:1150px){.app-layout{grid-template-columns:190px 1fr}.sidebar{width:190px;padding:30px 16px 20px}.brand{font-size:23px}.brand-mark{width:31px;height:35px}.main-shell{padding:26px 28px}.hero-content{padding-left:25px}.hero h2{font-size:29px}.hero-art{padding-right:10px}.hero-bottom{gap:10px}.hero-meta{font-size:10px}.hero .primary{font-size:12px;padding:12px 15px}.journey-strip{padding:15px 12px}.journey-step{gap:8px}.journey-step span>b{font-size:11px}.journey-connector{width:16px;margin:0 8px 0 2px}.step-round{width:36px;height:36px}.lesson-grid{gap:14px}.card-art{height:135px}.card-art svg.lesson-art{height:132px;width:145px}.card-copy{padding:12px}.card-copy h3{font-size:14px}.card-arrow{right:10px}.lesson-workspace{grid-template-columns:280px minmax(0,580px);gap:25px;padding:26px}.teacher h1{font-size:27px}.demo-paper{max-width:260px}.art-tools{padding:9px;gap:4px}.colors{gap:5px}.color-swatch{width:24px;height:24px}.tool-divider{margin:0 3px}.paper-workspace{gap:40px}.paper-workspace .demo-paper{max-width:480px}}
@media(max-width:900px){.sidebar{width:86px;padding:29px 13px 20px;align-items:center}.app-layout{grid-template-columns:86px 1fr}.sidebar .brand{font-size:0;gap:0}.sidebar .brand-mark{width:41px;height:43px}.sidebar .brand-mark .icon{width:25px;height:25px}.brand-tag{display:none}.side-nav{margin-top:39px;width:100%}.nav-item{padding:16px;justify-content:center}.nav-item>span,.nav-count{display:none}.sidebar .little-note{display:none}.grownups{font-size:0;padding:13px}.grownups .icon{width:21px;height:21px}.main-shell{padding:25px}.hero h2{font-size:30px}.hero-art img{max-height:260px}.hero p{font-size:12px}.hero-meta{display:none}.mini-stat{font-size:11px}.lesson-header{padding:16px 22px;grid-template-columns:1fr 1.8fr 1fr}.lesson-header .brand>span:last-child{display:none}.lesson-workspace{grid-template-columns:250px minmax(0,1fr);gap:20px;padding:23px}.teacher h1{font-size:25px}.step-description{font-size:13px}.teacher-controls{gap:5px}.tiny-button{padding:8px;font-size:10px}.demo-paper{max-width:240px}.art-tools{gap:4px}.tool-button{width:32px;height:32px}.colors{order:5;width:100%;justify-content:center;margin-top:4px}.color-swatch{width:29px;height:29px}.colors+.tool-divider{display:none}.paper-workspace{grid-template-columns:250px minmax(0,1fr)}.lesson-footer{padding:16px 22px;grid-template-columns:1fr .7fr 1fr}.footer-encouragement{font-size:10px}.finish-layout{gap:32px}.finish-copy h1{font-size:36px}.free-workspace{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:680px){h1{font-size:29px}.app-layout{display:block;padding-bottom:78px}.sidebar{top:auto;bottom:0;width:100%;height:auto;border-top:1px solid var(--line);border-right:0;background:#fffefa;flex-direction:row;padding:5px 12px max(6px,env(safe-area-inset-bottom));justify-content:center}.sidebar>.brand,.sidebar-bottom,.brand-tag{display:none}.side-nav{display:flex;margin:0;width:100%;justify-content:space-around;gap:10px}.nav-item{flex:1;flex-direction:column;gap:4px;padding:9px 5px 7px;min-height:58px;border-radius:13px;font-size:10px}.nav-item>span{display:block}.nav-item .icon{width:23px;height:23px}.nav-count{display:none!important}.main-shell{padding:19px 20px 25px}.topbar{margin-bottom:24px}.breadcrumb{display:none}.mobile-brand{display:flex}.mobile-brand .brand{font-size:21px}.mobile-brand .brand-mark{width:28px;height:31px;border-radius:8px}.mobile-brand .brand-mark .icon{width:17px;height:17px}.top-actions{gap:6px}.top-actions>.icon-button{display:none}.language-button{padding:6px;font-size:10px}.avatar{width:33px;height:33px}.greeting{margin-bottom:18px;align-items:flex-start}.greeting h1{font-size:27px}.greeting p{font-size:12px;max-width:240px;line-height:1.6}.greeting .wave .icon{width:24px;height:24px}.greeting .wave{margin-left:2px}.mini-stat{padding:7px 9px;font-size:10px;gap:4px;margin-top:3px}.mini-stat .icon{width:14px;height:14px}.mini-stat span{display:none}.hero{min-height:270px;grid-template-columns:1.15fr 1fr;border-radius:20px;margin-bottom:25px;overflow:hidden}.hero-content{padding:25px 0 25px 22px}.hero .eyebrow{font-size:8px;letter-spacing:.8px;gap:5px;margin-bottom:11px}.eyebrow .icon{width:12px;height:12px}.hero h2{font-size:27px;line-height:1.15;position:relative;z-index:1;max-width:220px}.hero p{font-size:11px;max-width:195px;line-height:1.65;margin-top:11px}.hero .primary{padding:12px 15px;font-size:12px;min-height:43px}.hero .primary .icon{width:15px;height:15px}.hero-art{padding:0;align-items:center;overflow:visible;min-width:0}.hero-art img{width:260px;max-width:none;max-height:none;position:absolute;right:-50px;top:45px;transform:rotate(-7deg)}.hero-sticker{bottom:20px;right:12px;font-size:8px;padding:5px 7px;transform:rotate(7deg);white-space:nowrap}.hero-sticker .icon{width:10px;height:10px}.hero-bottom{margin-top:19px}.hero-art .hero-lesson-svg{height:190px;width:190px;max-width:none;position:absolute;right:-26px;top:40px}.section-heading{margin-bottom:14px}.section-heading h2{font-size:18px}.section-heading p{font-size:11px}.journey{margin-bottom:24px}.journey-strip{padding:15px 12px;border-radius:16px}.journey-step{flex-direction:column;gap:7px;align-items:center;justify-content:center;text-align:center;flex:1!important}.journey-step span>b{font-size:10px}.journey-step span>small{display:none}.journey-connector{align-self:flex-start;margin:19px -4px 0;width:22px}.step-round{height:39px;width:39px}.category-tabs{gap:6px;margin-bottom:17px;flex-wrap:nowrap;overflow:auto;padding:2px 0 6px;scrollbar-width:none}.pill{font-size:11px;min-height:35px;padding:8px 13px;white-space:nowrap}.pill .icon{width:14px;height:14px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card-art{height:126px;margin:5px 5px 0}.card-art svg.lesson-art{height:126px;width:140px}.card-art:before{width:90px;height:90px;left:calc(50% - 45px);top:18px}.card-copy{padding:12px 11px 14px}.card-copy h3{font-size:13px;max-width:calc(100% - 20px)}.card-meta{font-size:9px;gap:4px}.card-arrow{width:21px;height:21px;right:10px;top:15px}.card-arrow .icon{width:11px;height:11px}.card-badge{top:8px;left:8px;font-size:7px;padding:4px 5px}.footer-note{font-size:10px;margin-top:22px;gap:5px}.modal{padding:28px 22px;max-height:calc(100dvh - 28px);border-radius:23px}.modal-backdrop{padding:14px}.modal h2{font-size:26px}.modal>p{font-size:13px}.modal-close{width:34px;height:34px;right:12px;top:12px}.mode-option{padding:18px 8px 15px;min-height:154px}.mode-option b{font-size:14px}.materials{font-size:10px;gap:11px}.setup-art{width:120px;height:110px}.gallery-intro{align-items:flex-start}.gallery-intro h1{font-size:27px}.gallery-intro p{font-size:12px}.gallery-intro .secondary{font-size:0;padding:12px;min-width:44px}.gallery-intro .secondary .icon{width:19px;height:19px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 15px}.gallery-card{padding:7px 7px 12px}.gallery-card h3{font-size:12px}.gallery-card small{font-size:9px}.gallery-empty{padding:25px;min-height:420px}.gallery-empty h2{font-size:23px}.gallery-empty p{font-size:13px}.play-hero .hero-art img{width:245px;right:-40px;top:37px}.play-hero h2{font-size:26px}.studio-note{font-size:11px;padding:15px;margin-top:20px}.lesson-header{height:70px;padding:12px 17px;grid-template-columns:42px 1fr 88px;gap:9px}.lesson-header .brand-mark{width:28px;height:30px}.lesson-title b{font-size:13px}.lesson-title small{font-size:9px}.lesson-header-right{gap:6px}.lesson-header-right .icon-button{width:36px;height:36px}.lesson-header-right .icon{width:17px;height:17px}.lesson-progress{gap:3px;margin-top:6px}.lesson-progress span{height:4px}.lesson-workspace{padding:18px 17px 19px;display:flex;flex-direction:column;gap:17px;align-items:stretch;justify-content:flex-start;max-width:510px}.teacher{display:block;position:relative;min-height:125px;padding-right:120px}.teacher h1{font-size:23px;margin-top:6px}.step-description{font-size:12px;line-height:1.55;margin-top:7px;min-height:0}.step-tag{font-size:9px;letter-spacing:.3px}.step-tag .icon{width:12px;height:12px}.teacher .demo-paper{position:absolute;right:0;top:2px;width:109px;height:109px;border-radius:11px;box-shadow:0 3px 0 #eee8df}.demo-paper .example-tag{font-size:6px;left:7px;top:7px;letter-spacing:.5px}.teacher-controls{margin:11px 0 0;gap:5px;flex-wrap:wrap}.tiny-button{padding:7px 8px;font-size:9px;min-height:32px;border-radius:8px;gap:5px}.tiny-button .icon{width:13px;height:13px}.step-tip{font-size:10px;line-height:1.5;margin-top:10px;max-width:none;gap:5px}.step-tip .icon{width:13px;height:13px}.canvas-label{font-size:11px;margin-bottom:8px}.guide-toggle{font-size:9px;padding:6px 8px}.drawing-paper{border-radius:15px;max-height:none}.art-tools{padding:9px 7px;margin-top:14px;gap:3px;border-radius:13px}.tool-button{width:32px;height:32px}.tool-button .icon{width:18px;height:18px}.colors{order:0;width:auto;gap:5px;margin:0;flex-wrap:nowrap}.color-swatch{width:23px;height:23px}.colors+.tool-divider{display:block}.size-button{width:26px;height:30px}.tool-divider{margin:0 3px}.lesson-footer{position:sticky;bottom:0;z-index:20;grid-template-columns:1fr 1.4fr;padding:13px 17px max(14px,env(safe-area-inset-bottom));gap:12px;min-height:76px}.lesson-footer .footer-encouragement{display:none}.lesson-footer .primary{min-width:145px;min-height:44px;font-size:13px;padding:11px 16px}.lesson-footer .secondary{min-height:43px;font-size:12px;padding:11px 14px}.paper-workspace .teacher{padding:0;min-height:auto}.paper-workspace .step-description{font-size:14px;max-width:none}.paper-workspace .teacher h1{font-size:27px}.paper-workspace .teacher-controls{margin:12px 0 0}.paper-workspace .teacher-controls .tiny-button{font-size:11px;padding:9px 12px}.paper-instruction{display:none}.paper-workspace .demo-paper{position:relative;width:100%;max-width:none;height:auto;aspect-ratio:1}.paper-workspace .demo-paper .example-tag{font-size:9px;left:13px;top:13px}.paper-under{font-size:10px;margin-top:13px}.paper-workspace .step-tip{font-size:11px;max-width:none}.free-workspace .teacher{padding:0;min-height:auto}.free-teacher h1{font-size:24px}.free-teacher>p{font-size:12px;max-width:none}.prompt-card{padding:14px 15px;margin-top:12px;position:relative;padding-right:48px}.prompt-card>.icon{display:none}.prompt-card h3{font-size:14px}.prompt-card p{font-size:11px;margin-top:3px}.prompt-card button{position:absolute;right:10px;top:10px;font-size:0;padding:9px;min-height:32px;margin:0}.prompt-card button .icon{width:16px;height:16px}.free-workspace .step-tip{display:none}.hint-toast{font-size:9px;margin-top:9px}.finish-page{padding:20px}.finish-layout{display:flex;flex-direction:column;gap:28px;padding:40px 5px 20px;margin:0}.finish-art{max-width:280px;width:85%;padding-bottom:35px}.finish-art>span{font-size:10px;bottom:11px}.finish-copy{text-align:center;width:100%;max-width:400px}.finish-copy .eyebrow{justify-content:center;font-size:9px}.finish-copy h1{font-size:34px}.finish-copy>p{font-size:13px;max-width:340px;margin:auto}.skill-earned{font-size:10px;margin:13px 0}.reflection-options{justify-content:center}.reflection-options button{font-size:11px;padding:9px 11px}.finish-copy>.primary{margin-top:20px}.finish-brand .brand{font-size:22px}.paper-finish>.icon{width:65px;height:65px}.paper-finish b{font-size:16px}.paper-finish small{font-size:11px}.finish-copy .small-note{font-size:11px!important}#toast{bottom:88px;font-size:12px;max-width:calc(100vw - 28px);width:max-content;padding:12px 16px}}
@media(max-width:390px){.main-shell{padding:16px}.greeting h1{font-size:25px}.hero-content{padding-left:18px}.hero h2{font-size:25px}.hero p{font-size:10px;max-width:172px}.hero-art img{width:237px;right:-57px;top:54px}.hero-sticker{font-size:7px;right:8px}.hero .primary{font-size:11px;padding:11px 13px}.hero .eyebrow{font-size:7px}.pill{padding:8px 11px;font-size:10px}.card-copy h3{font-size:12px}.card-meta{font-size:8px}.card-art{height:114px}.card-art svg.lesson-art{height:114px;width:128px}.journey-step span>b{font-size:9px}.colors{order:5;width:100%;justify-content:center;margin-top:5px}.colors+.tool-divider{display:none}.color-swatch{width:27px;height:27px}.teacher{padding-right:108px}.teacher .demo-paper{width:98px;height:98px}.teacher h1{font-size:21px}.teacher-controls{flex-wrap:wrap}.art-tools{gap:6px}.lesson-header{grid-template-columns:30px 1fr 80px;gap:7px}.lesson-title b{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation:none!important;transition:none!important}
@media print{.sidebar,.topbar,.lesson-header,.lesson-footer,.art-tools,.teacher-controls{display:none}.app-layout{display:block}.main-shell{padding:0}.drawing-paper{border:0;box-shadow:none}}

/* Comfortable targets and readable instructions for little hands. */
.step-description{color:#776980}.teacher h1{color:#403547}.teacher-controls .tiny-button{min-height:44px}.guide-toggle{min-height:40px}.art-tools .tool-button{min-width:40px;min-height:40px}.art-tools .size-button{min-width:34px;min-height:40px}.art-tools .color-swatch{width:32px;height:32px}.canvas-guide>svg{width:100%;height:100%}.draw-side{width:100%;max-width:570px;justify-self:center}.hero p{color:#816b99}.greeting p{color:#81778b}.finish-copy>p{color:#807187}.lesson-footer .footer-encouragement{color:#93859f}.modal>p{color:#807586}
@media(max-width:680px){.art-tools{row-gap:8px}.art-tools .colors{order:5;width:100%;justify-content:center}.art-tools .colors+.tool-divider{display:none}.art-tools .color-swatch{width:35px;height:35px}.teacher-controls .tiny-button{font-size:10px;padding-inline:8px}.drawing-paper{max-width:100%}.draw-side{max-width:none}.teacher h1{font-size:24px}.step-description{font-size:13px}}