@font-face{font-family:DoodLearning;src:url(/assets/doodu/v181/ComicNeue-Bold.ttf) format("truetype");font-weight:700 1000;font-display:swap}
@font-face{font-family:DoodLearning;src:url(/assets/doodu/v181/ComicNeue-Regular.ttf) format("truetype");font-weight:400 600;font-display:swap}
/* Dood U v181 — scoped children's learning visual system */
#doodUPage .doodu-house-directory{background:transparent!important}
body:has(#doodUPage.active) #doodUPage{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
body:has(#doodUCoursePage.active),body:has(#doodULetterPage.active){background:#061020!important}
body:has(#doodUCoursePage.active) main#top,body:has(#doodULetterPage.active) main#top{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
body:has(#doodUCoursePage.active) :is(#oneHomeChoiceLogoControl,.onehome-inline-choice-logo,.onehome-existing-choice-logo,.onehome-choice-page-logo,#onehomeGlobalMenu,.top),body:has(#doodULetterPage.active) :is(#oneHomeChoiceLogoControl,.onehome-inline-choice-logo,.onehome-existing-choice-logo,.onehome-choice-page-logo,#onehomeGlobalMenu,.top){display:none!important}
html body :is(#doodUCoursePage,#doodULetterPage).active{width:100%!important;max-width:none!important;min-height:100dvh!important;padding:0!important;margin:0!important;transform:none!important;border:0!important;border-radius:0!important;background:#061020!important;box-shadow:none!important;overflow:visible!important}
:is(#doodUCoursePage,#doodULetterPage),#dooduColorModal{--du-green:#36e1aa;--du-muted:#c9dbed;color:#fff;font-family:DoodLearning,'Trebuchet MS',Arial,sans-serif}
:is(#doodUCoursePage,#doodULetterPage) * ,#dooduColorModal *{box-sizing:border-box}
html body .doodu-header{height:80px;padding:10px 3.5%;display:flex;align-items:center;gap:30px;border-bottom:1px solid #273e60;background:#060f21!important;color:#fff}
html body .doodu-header button{background:transparent!important;border:0!important;color:#fff!important;box-shadow:none!important;font:inherit;cursor:pointer;padding:8px 6px;white-space:nowrap}
.doodu-brand{width:260px;flex-shrink:0}.doodu-brand-art{display:block;width:100%;height:auto}
.doodu-header nav{display:flex;gap:clamp(12px,2.8vw,44px);margin:auto;align-items:center}.doodu-header nav button{font-size:19px!important}.doodu-header nav button[aria-current]{border-bottom:4px solid #b894ff!important;border-radius:0!important}
html body .doodu-account{border:1px solid #438ebf!important;border-radius:50%!important;color:#70c9ff!important;width:46px;height:46px;font-size:28px!important}
.doodu-children-stage{background:radial-gradient(ellipse at 0 0,#0b1d3c 0,transparent 34%),radial-gradient(ellipse at 100% 100%,#0c1737 0,transparent 40%),#050e1c;color:#fff;padding:24px 3.5% 32px;min-height:calc(100dvh - 80px)}
.doodu-letter-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;max-width:1600px;margin:auto;align-items:start}
.doodu-left{min-width:0}.doodu-approved-wordmark{display:block;width:100%;height:auto;aspect-ratio:745/162;margin:0 0 14px}
html body .doodu-crumb{display:block;width:100%;text-align:left;font:inherit;font-size:clamp(16px,1.55vw,25px)!important;padding:0!important;margin:16px 0!important;background:transparent!important;color:#deefff!important;border:0!important;cursor:pointer;line-height:1.35}
html body .doodu-pill{display:inline-block;padding:10px 23px;background:linear-gradient(105deg,#7044f6,#3921d3)!important;color:#fff!important;border-radius:30px;font-size:clamp(16px,1.65vw,26px);line-height:1.2;font-weight:600}
html body .doodu-lesson-title{color:#fff!important;text-transform:none!important;font-family:DoodLearning,'Trebuchet MS',Arial,sans-serif!important;font-size:clamp(40px,4.65vw,78px)!important;letter-spacing:-.045em!important;line-height:1.06!important;margin:22px 0 12px!important;font-weight:900!important;overflow-wrap:anywhere}
html body .doodu-lesson-title span{color:#36e1aa!important;font-size:1.32em;vertical-align:-.04em}
.doodu-prompt{color:#fff!important;font-size:clamp(18px,1.65vw,26px)!important;line-height:1.4;margin:0 0 18px!important;min-height:2.8em}
.doodu-activity-row{display:grid;grid-template-columns:23% minmax(0,1fr);gap:16px;align-items:center;margin:0 0 22px}.doodu-approved-mascot{display:block;width:100%;height:auto;aspect-ratio:195/290}
.doodu-actions{display:grid;grid-template-columns:1fr;gap:14px}
html body :is(#doodULetterPage,#dooduColorModal) .doodu-action{display:flex;align-items:center;justify-content:center;width:100%;min-height:76px;padding:14px 10px!important;border:0!important;border-radius:15px!important;font:800 clamp(15px,1.35vw,22px)/1.25 DoodLearning,'Trebuchet MS',Arial,sans-serif!important;color:#071426!important;cursor:pointer;white-space:normal;box-shadow:none!important}
html body :is(#doodULetterPage,#dooduColorModal) .doodu-action.purple{background:linear-gradient(115deg,#c3b3ff,#a696f8)!important}
html body :is(#doodULetterPage,#dooduColorModal) .doodu-action.blue{background:linear-gradient(115deg,#58c5ff,#39aef1)!important}
html body :is(#doodULetterPage,#dooduColorModal) .doodu-action.green{background:linear-gradient(115deg,#6deac1,#43dcae)!important}
html body :is(#doodULetterPage,#dooduColorModal) .doodu-action.pink{background:linear-gradient(115deg,#ff86b5,#f669a0)!important}
html body .doodu-action:disabled{opacity:.5;cursor:wait}
.doodu-alphabet{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:7px}
html body :is(#doodULetterPage,#doodUCoursePage) .doodu-letter-button{aspect-ratio:1;min-height:42px;min-width:0;padding:3px!important;font:700 clamp(16px,1.5vw,24px)/1 DoodLearning,'Trebuchet MS',Arial,sans-serif!important;border:1px solid #354963!important;border-radius:9px!important;background:linear-gradient(#0e1c30,#091323)!important;color:#fff!important;cursor:pointer}
html body :is(#doodULetterPage,#doodUCoursePage) .doodu-letter-button.active{background:#36e1aa!important;border-color:#36e1aa!important;color:#05131b!important}
html body :is(#doodULetterPage,#doodUCoursePage,#dooduColorModal) button:focus-visible{outline:3px solid #fff!important;outline-offset:3px}
html body :is(#doodULetterPage,#doodUCoursePage) button:hover{filter:brightness(1.1)!important}
.doodu-preview{min-width:0;border-radius:24px;background:#fff!important;padding:10px;max-width:640px;justify-self:center;width:100%}
.doodu-page-art{display:block;width:100%;height:auto;aspect-ratio:1102/1427;border-radius:15px;object-fit:contain}
.doodu-status{min-height:1.4em;font-size:16px;color:#d0e3f3}.doodu-course-shell{max-width:950px;margin:20px auto}.doodu-course-shell .doodu-approved-wordmark{max-width:745px}.doodu-course-shell h1{font-size:52px!important;color:#fff!important;text-transform:none!important;margin:24px 0 10px}.doodu-course-shell p{font-size:21px;color:#fff}.doodu-course-shell .doodu-alphabet{margin-top:30px}
.doodu-color-modal{position:fixed;inset:0;z-index:999999;background:rgba(1,7,17,.93);display:grid;place-items:center;padding:18px}
.doodu-color-panel{position:relative;width:min(820px,100%);max-height:94dvh;overflow:auto;padding:24px;border-radius:20px;background:#0b1b31!important;color:#fff!important;overscroll-behavior:contain}.doodu-color-panel h2{color:#fff!important;font-size:30px!important;text-transform:none!important;margin:0 40px 8px 0}.doodu-color-panel p{font-size:17px;color:#d0e3f3}.doodu-color-close{position:absolute;right:15px;top:10px;font-size:34px!important;color:#fff!important;border:0!important;background:transparent!important;cursor:pointer;width:44px;height:44px}
.doodu-palette{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.doodu-palette button{width:42px;height:42px;border-radius:50%!important;border:3px solid #fff!important;cursor:pointer}.doodu-palette button[aria-pressed=true]{outline:3px solid #9fcfff!important;outline-offset:3px}.doodu-brush{display:flex;gap:12px;align-items:center;font-size:17px}.doodu-canvas-wrap{position:relative;margin:16px 0;background:white}.doodu-canvas-wrap[hidden]{display:none}.doodu-canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none}.doodu-canvas-wrap img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply}.doodu-color-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:1500px){.doodu-preview{max-width:620px}.doodu-actions .doodu-action{min-height:82px!important}}
@media(max-width:1100px){.doodu-header{gap:12px!important}.doodu-brand{width:190px}.doodu-header nav{gap:10px}.doodu-header nav button{font-size:16px!important}.doodu-activity-row{grid-template-columns:22% 1fr;gap:8px}.doodu-actions{gap:8px}.doodu-actions .doodu-action{font-size:15px!important;min-height:66px!important}.doodu-alphabet{grid-template-columns:repeat(9,1fr)}.doodu-letter-layout{gap:20px}}
@media(max-width:800px){html body .doodu-header{height:auto;min-height:76px;flex-wrap:wrap;padding:10px 16px;gap:8px}.doodu-header nav{order:3;width:100%;justify-content:space-between;gap:8px;overflow:auto}.doodu-header nav button{font-size:14px!important}.doodu-account{margin-left:auto}.doodu-brand{width:190px}.doodu-letter-layout{grid-template-columns:1fr;gap:20px}.doodu-left{max-width:700px;width:100%;margin:auto}.doodu-children-stage{padding:20px 16px}.doodu-approved-wordmark{max-width:700px}.doodu-lesson-title{font-size:52px!important}.doodu-prompt{min-height:0;font-size:20px!important}.doodu-alphabet{grid-template-columns:repeat(13,1fr);gap:5px}.doodu-letter-button{min-height:36px!important}.doodu-actions .doodu-action{font-size:18px!important}.doodu-preview{max-width:600px}.doodu-course-shell .doodu-alphabet{grid-template-columns:repeat(7,1fr)}}
@media(max-width:480px){.doodu-alphabet{grid-template-columns:repeat(7,1fr);gap:6px}.doodu-letter-button{min-height:42px!important}.doodu-actions{gap:8px}.doodu-actions .doodu-action{min-height:67px!important;font-size:15px!important}.doodu-activity-row{grid-template-columns:23% 1fr}.doodu-color-panel{padding:18px}.doodu-color-actions{grid-template-columns:1fr}.doodu-pill{font-size:17px!important}.doodu-crumb{font-size:16px!important}.doodu-preview{padding:6px;border-radius:16px}}

html body :is(#doodULetterPage,#doodUCoursePage) .doodu-header{border:0!important;border-bottom:1px solid #293f60!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
html body :is(#doodULetterPage,#doodUCoursePage) .doodu-header .doodu-account{border:1px solid #438ebf!important;border-radius:50%!important;background:transparent!important;color:#70c9ff!important}
