.learning-hub,.learning-samplers,.learning-course-detail,.creative-practice{margin-block:clamp(1.5rem,4vw,3.5rem);scroll-margin-top:120px}.learning-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.35fr);align-items:center;gap:1.5rem;background:radial-gradient(at 90% 10%,#7de7e444,transparent 60%),linear-gradient(135deg,#c8a2f23b,#e9aaca2b);border:1px solid #ad8ad17d;border-radius:2rem;padding:clamp(1rem,3vw,2.5rem)}.learning-intro>img{display:block;width:100%;height:260px;object-fit:contain;filter:drop-shadow(0 14px 18px #73519929)}.learning-hub h2,.learning-samplers h2,.creative-practice h2,.learning-course-detail h2{font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.2;margin:0 0 1rem;letter-spacing:-.025em}.learning-hub p,.learning-samplers p,.learning-course-detail p,.creative-practice p{font-size:1rem;line-height:1.7;color:#493454}.learning-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}.learning-course,.learning-sampler-grid>a{background:linear-gradient(135deg,#c09ae835,#78d6e12b,#eeb0d329);border:1px solid #a882cb77;border-radius:1.5rem;padding:1.3rem;min-width:0;transition:box-shadow .2s,transform .2s}.learning-course:hover,.learning-sampler-grid>a:hover{transform:translateY(-3px);box-shadow:0 12px 35px #6333861a}.learning-course h3,.learning-sampler-grid h3{font-size:clamp(1.1rem,1.5vw,1.45rem);line-height:1.35;margin:0 0 .8rem}.learning-course a,.learning-sampler-grid>a{color:#392144;text-decoration:none}.learning-course h3 a{text-decoration:underline;text-underline-offset:5px;text-decoration-color:#9d72bc66}.learning-course summary{min-height:44px;cursor:pointer;align-content:center;color:#543167;font-size:1rem}.learning-sampler-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.learning-sampler-grid>a{display:block}.learning-course-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:2rem;align-items:start}.learning-course-aside,.learning-step,.learning-practice-heading,.learning-finish{padding:clamp(1rem,2.5vw,2rem);border-radius:1.5rem;border:1px solid #ab84c877;background:radial-gradient(at 100% 0,#71d6dc26,transparent 60%),linear-gradient(135deg,#d4afea35,#e7b0da28);min-width:0}.learning-course-aside{position:sticky;top:120px}.learning-back{display:block;margin-top:.7rem;color:#593576;text-underline-offset:4px;min-height:44px;align-content:center;font-size:1rem}.learning-course-detail fieldset,.creative-practice fieldset{border:0;padding:0;margin:1rem 0;min-width:0}.learning-course-detail legend,.creative-practice legend{font-size:1rem;font-weight:600;line-height:1.5;color:#392344;margin-bottom:.8rem}.learning-topic,.learning-save{display:flex;align-items:flex-start;gap:.7rem;min-height:44px;margin:.5rem 0;padding:.75rem .9rem;border:1px solid #ae8fc666;background:linear-gradient(135deg,#e1c6f426,#93dfe72c);border-radius:1rem;font-size:1rem;line-height:1.6;color:#382340;cursor:pointer}.learning-topic:has(:checked){border-color:#79469c;background:#d4b2ef48}.learning-topic input,.learning-save input{margin-top:.35rem;width:19px;height:19px;accent-color:#7d43a0;flex-shrink:0}.learning-focus{display:grid;gap:.6rem;font-size:1rem;line-height:1.5;color:#382340;margin-block:1rem}.learning-focus textarea{width:100%;min-width:0;font:inherit;background:#eadbf34d;border:1px solid #a780bf88;border-radius:1rem;padding:.85rem;color:#30203d;resize:vertical}.learning-focus textarea::placeholder{color:#644b71;opacity:1}.learning-step{margin-block:.9rem;scroll-margin-top:120px}.learning-step>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;min-height:48px;list-style:none}.learning-step>summary::after{content:'+';font-size:1.5rem}.learning-step[open]>summary::after{content:'−'}.learning-step h3{font-size:clamp(1.2rem,2.4vw,1.65rem);line-height:1.3;margin:0;flex:1}.learning-step>summary>span{font-size:1rem;color:#5a416c}.learning-step>summary>span[data-complete=true]{color:#155c52;font-weight:600}.learning-step fieldset:disabled{opacity:.6}.creative-practice button:disabled{opacity:.5;cursor:not-allowed}.learning-art-review{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:1.5rem;margin-block:1rem}.learning-art-review>img{width:100%;height:210px;object-fit:contain}.learning-hint-button{min-height:44px;border:1px solid #a67bbe77;border-radius:1rem;background:linear-gradient(120deg,#c4a3ee38,#80dddf2b);color:#57326e;padding:.6rem 1rem;font:inherit;font-size:1rem;cursor:pointer}.learning-hint{display:flex;align-items:center;gap:1rem;margin-top:.8rem;padding:.8rem;border-radius:1rem;background:#ddc0ee35}.learning-hint img{width:75px;height:95px;object-fit:contain;flex-shrink:0}.learning-hint[hidden]{display:none}.learning-finish{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}.learning-finish h3{flex-basis:100%;font-size:1.4rem;margin:0 0 .4rem}.learning-finish .showcase-text-button{margin:0}.creative-practice progress{width:100%;height:14px;accent-color:#8152ac;margin-top:1rem}.learning-save{max-width:500px}.learning-reset-dialog{width:min(520px,calc(100vw - 2rem));padding:1.5rem;border:1px solid #c19add;border-radius:1.5rem;color:#332040;background:linear-gradient(135deg,#dfc9f5f5,#b6e8e5f5,#eec4def5);box-shadow:0 20px 70px #26123966}.learning-reset-dialog::backdrop{background:#15101b99;backdrop-filter:blur(8px)}.learning-reset-dialog button{margin:.5rem .5rem .5rem 0}.learning-reset-dialog p{font-size:1rem;line-height:1.6}.learning-hub [hidden],.creative-practice [hidden]{display:none!important}
@media(max-width:1000px){.learning-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-course-layout{grid-template-columns:minmax(0,1fr)}.learning-course-aside{position:static}.learning-course-aside h2{font-size:1.6rem}}
@media(max-width:600px){.learning-intro{grid-template-columns:minmax(0,1fr) 90px;gap:.5rem;border-radius:1.3rem}.learning-intro>img{height:145px}.learning-intro h2{font-size:1.55rem}.learning-intro p{grid-column:1/-1}.learning-course-grid{gap:.6rem}.learning-course{padding:.9rem;border-radius:1.1rem}.learning-course h3{font-size:1.08rem}.learning-course p{font-size:.96rem;line-height:1.6}.learning-course summary{font-size:.96rem}.learning-sampler-grid{grid-template-columns:1fr;gap:.6rem}.learning-step>summary{flex-wrap:wrap;gap:.6rem}.learning-step h3{flex-basis:70%}.learning-art-review{grid-template-columns:85px minmax(0,1fr);gap:.7rem}.learning-art-review>img{height:140px}.learning-step .site-button{white-space:normal;font-size:1rem}.learning-finish>.site-button{width:100%}.learning-hint{gap:.6rem}.learning-hint img{width:50px;height:75px}.learning-step>summary>span{font-size:.95rem}.learning-topic{padding:.7rem}.learning-reset-dialog{padding:1rem}}
@media(prefers-reduced-motion:reduce){.learning-course,.learning-sampler-grid>a{transition:none}.learning-course:hover,.learning-sampler-grid>a:hover{transform:none}}
body:has([data-creative-practice]) .assistant-greeting{display:none}
.learning-hint:not([hidden]){animation:learning-reveal .25s ease both}@keyframes learning-reveal{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.learning-hint:not([hidden]){animation:none}}
@media(max-width:600px){.learning-intro{display:block;position:relative}.learning-intro>img{position:absolute;right:.8rem;top:1rem;width:68px;height:96px}.learning-intro h2{padding-right:75px;min-height:86px}.learning-intro .site-button{white-space:normal}.learning-course h3{min-height:3em}}
body:has([data-learning-hub],[data-course-outline],[data-creative-practice]) .assistant-greeting,body:has([data-learning-hub],[data-course-outline],[data-creative-practice]) .assistant-mascot>span{display:none}body:has([data-learning-hub],[data-course-outline],[data-creative-practice]) .assistant-launcher{width:44px;right:8px}body:has([data-learning-hub],[data-course-outline],[data-creative-practice]) .assistant-mascot{width:44px!important;height:58px!important;min-height:0;padding:0!important}body:has([data-learning-hub],[data-course-outline],[data-creative-practice]) .assistant-mascot img{width:40px!important;height:54px!important}body:has([data-learning-hub],[data-course-outline],[data-creative-practice]) .assistant-hide{width:24px;height:24px;top:-14px;right:-3px;font-size:16px}
