/* Original Let Me Understand character, shared with the earlier playground. */
.mascot{position:absolute;left:0;top:-2px}nav{gap:20px;font-weight:800}nav a,nav button{min-height:44px;display:inline-flex;align-items:center;padding:8px 10px}.active{color:#076e9c}.header-stats{font-size:14px;gap:20px}.header-stats>span:first-child{color:#9b560c}.xp{border:2px solid #a6d682;background:#e1f9cb;border-radius:12px;color:#3b6127;padding:8px 14px}
.hero{padding-top:60px;padding-bottom:60px;gap:50px}.hero .eyebrow{font-size:11px}.green-dot{background:#62ad37}.hero-copy>p{font-size:16px;line-height:1.75}.hero-caption{font-size:12px;color:#506876}.tiny-doodle{color:#517f2e}.understand{color:#087cae}.understand svg{stroke:#1cb0f6}.primary{background:var(--primary);color:var(--on-primary);border:2px solid #8bd453;border-radius:12px;box-shadow:0 5px 0 #77b742;min-height:50px;padding:14px 22px;letter-spacing:.4px;font-size:14px;font-weight:800}.primary:hover{background:#b9f68b;transform:translateY(-2px);box-shadow:0 7px 0 #77b742}.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #77b742}
.hero-art{height:440px;background:#c8ecfc;background-image:radial-gradient(#a4d7ea 1.4px,transparent 1.4px);background-size:24px 24px;border:2px solid #acdcee;border-radius:44px;box-shadow:0 7px 0 #b5dfea;overflow:hidden}.art-top{left:30px;right:30px;top:27px;font-size:10px;color:#3b6a7c}.art-bottom{font-size:10px;color:#3b6a7c}.orbit{border:2px dashed #9cd0e3;width:360px;height:235px}.orbit-two{width:300px;height:260px}.art-spark{color:#e8a500}.spark-one{left:105px;top:76px}.spark-two{top:250px;right:31px}.floating-chip{border:2px solid #abd5e5;border-radius:14px;box-shadow:0 4px 0 #a9d0df;background:white;font-size:16px;font-weight:800;line-height:1.4;font-family:inherit;font-style:normal;color:#3f6579}.chip-one{bottom:85px;left:20px;transform:rotate(-7deg)}.chip-two{right:20px;top:88px}.chip-two span{color:#cd8e00}.blue-planet{background:#1cb0f6;box-shadow:inset -8px -4px #1095d1;left:40px;top:170px;width:46px;height:46px}.green-planet{background:#a5ed6e;color:#426a2c;box-shadow:0 4px #86c553;right:40px;bottom:90px}.fraction-bubble{color:#487288;font-family:inherit;font-size:25px;right:115px;bottom:49px}.fraction-bubble span{color:#487288}.wave-art{stroke:#159bdd;left:42px;bottom:43px}
/* One CSS character, reused at every size. No owl or third-party character assets. */
.mascot{--size:70px;display:inline-block;position:relative;width:var(--size);height:var(--size);flex-shrink:0;vertical-align:middle;isolation:isolate}.mascot-body{position:absolute;inset:12% 14% 13%;background:#ffd24d;border-radius:42% 45% 40% 43%;box-shadow:inset -5px -7px 0 #efb932;z-index:2}.mascot-body:before{content:'';position:absolute;inset:1%;background:#ffd24d;transform:rotate(27deg);border-radius:42%;z-index:-1}.mascot-eyes{position:absolute;left:28%;top:33%;width:9%;height:17%;background:#493c27;border-radius:50%;box-shadow:calc(var(--size)*.25) 0 #493c27}.mascot-eyes:before{content:'';position:absolute;width:35%;height:30%;background:#fff;top:12%;left:18%;border-radius:50%}.mascot-cheeks{position:absolute;left:12%;top:55%;width:17%;height:9%;background:#f5a24a;border-radius:50%;box-shadow:calc(var(--size)*.38) 0 #f5a24a}.mascot-smile{position:absolute;left:39%;top:54%;width:25%;height:20%;background:#644326;border-radius:10% 10% 50% 50%;overflow:hidden}.mascot-smile:after{content:'';position:absolute;left:18%;right:10%;height:55%;bottom:-12%;background:#f18666;border-radius:50%}.mascot-arm{position:absolute;background:#f7c53e;width:13%;height:32%;top:41%;border-radius:50%;z-index:1}.arm-left{left:6%;transform:rotate(32deg)}.arm-right{right:4%;top:24%;transform:rotate(40deg)}.mascot-feet{position:absolute;left:24%;bottom:5%;width:20%;height:15%;border-radius:50%;background:#e9ac27;box-shadow:calc(var(--size)*.32) 0 #e9ac27}.mascot-brand{--size:52px}.mascot-hero{--size:228px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-7deg)}.mascot-curious{--size:78px;transform:rotate(-10deg)}.mascot-guide{--size:90px}.mascot-cheer{--size:90px}.mascot-footer{--size:42px;margin-right:10px}.mascot-lesson{--size:45px;margin-right:10px}.mascot-celebrate{--size:160px}.mascot-cheer .arm-left,.mascot-celebrate .arm-left{top:23%;transform:rotate(-35deg)}.mascot-curious .mascot-smile{width:13%;height:16%;left:44%;border-radius:50%}