:root{--ink:#4a3f5c;--ink-soft:#7a6f8c;--cream:#fffaf1;--card:#fffdf8;--line:#eadfca;--green:#3dbd8a;--green-d:#2a9c70;--pink:#ff8fae;--sky:#79c0f2;--orange:#f3955e;--panel-w:clamp(400px, 41vw, 580px);--font:"M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;word-break:keep-all;overflow-wrap:anywhere;background:#cfe9fb;margin:0;overflow:hidden}body.playing .tray-wrap,body.playing .help-keys span:nth-child(n+3){display:none}button{color:inherit;cursor:pointer;font-family:inherit}svg{display:block}.hidden{display:none!important}#app{position:fixed;inset:0}#stage{position:absolute;inset:0}#view{touch-action:none;outline:none;width:100%;height:100%;display:block}body.with-panel #stage,body.with-panel #hud{right:var(--panel-w)}.screen{z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#title{background:linear-gradient(#78bef026,#fffaf040 70%,#fff6e68c)}.title-inner{text-align:center;padding:24px 16px}.logo h1{letter-spacing:.02em;margin:4px 0 0;font-weight:800;line-height:.95}.logo .l1,.logo .l2{color:#fff;text-shadow:0 3px #4f9d6a,0 6px #3f8458,0 12px 24px #28463259;display:block}.logo .l1{font-size:clamp(34px,6vw,64px)}.logo .l2{margin-top:-4px;font-size:clamp(76px,15vw,168px)}.logo-small{color:var(--green-d);background:#ffffffd9;border-radius:999px;padding:6px 18px;font-size:clamp(16px,2.2vw,22px);font-weight:800;display:inline-block}.tagline{color:#34465a;background:#ffffffb8;border-radius:18px;margin:22px 0 26px;padding:10px 22px;font-size:clamp(16px,2.3vw,22px);font-weight:700;line-height:1.6;display:inline-block}.big-btn{background:var(--green);color:#fff;box-shadow:0 6px 0 var(--green-d), 0 14px 28px #1e5a3c4d;border:0;border-radius:999px;margin:0 auto;padding:16px 64px;font-size:clamp(22px,3vw,30px);font-weight:800;transition:transform .1s;display:block}.big-btn:active{box-shadow:0 2px 0 var(--green-d), 0 8px 18px #1e5a3c4d;transform:translateY(4px)}#courses{-webkit-backdrop-filter:blur(6px);background:#fff9ee8c;flex-direction:column;justify-content:flex-start;padding:16px;overflow-y:auto}.courses-head{align-items:center;gap:12px;width:min(1200px,100%);margin:12px auto 18px;display:flex}.courses-head h2{margin:0;font-size:clamp(22px,3vw,32px);font-weight:800}.back-btn{width:48px;height:48px;box-shadow:0 3px 0 var(--line);background:#fff;border:0;border-radius:50%;flex:none;place-items:center;display:grid}.back-btn svg,.pill svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.course-list{grid-template-columns:repeat(3,1fr);gap:20px;width:min(1200px,100%);margin:auto;display:grid}.course{text-align:left;background:var(--card);box-shadow:0 6px 0 var(--line), 0 18px 40px #503c1e1f;border:0;border-radius:28px;flex-direction:column;padding:0;transition:transform .15s;display:flex;overflow:hidden}.course:hover{transform:translateY(-4px)}.course-art{place-items:center;height:170px;padding:18px;display:grid}.course-art svg{width:100%;height:100%}.c1 .course-art{background:linear-gradient(160deg,#dff6e8,#c4ecd6)}.c2 .course-art{background:linear-gradient(160deg,#e8e2fb,#d6ccf6)}.c3 .course-art{background:linear-gradient(160deg,#ffe7da,#ffd5c2)}.course-text{flex-direction:column;flex:1;gap:6px;padding:18px 22px 22px;display:flex}.course-for{color:var(--ink-soft);font-size:15px;font-weight:800}.course h3{margin:0;font-size:clamp(20px,2vw,25px);font-weight:800;line-height:1.35}.course p{color:#5d536e;flex:1;margin:0;font-size:15px;line-height:1.65}.course-prog{color:var(--green-d);min-height:1.2em;font-size:14px;font-weight:700}.c2 .course-prog{color:#7a5fd8}.c3 .course-prog{color:#d9704a}#hud{pointer-events:none;z-index:5;position:absolute;inset:0}#hud button{pointer-events:auto}.topbar{align-items:center;gap:8px;display:flex;position:absolute;top:12px;left:12px;right:12px}.spacer{flex:1}.pill{background:#fffdf8eb;border:0;border-radius:999px;align-items:center;gap:6px;height:44px;padding:0 16px 0 12px;font-size:15px;font-weight:800;display:inline-flex;box-shadow:0 3px #7864462e}.pill.icon{justify-content:center;width:44px;padding:0}.pill.off{opacity:.55}.course-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;background:#4a3f5c80;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:800;overflow:hidden}.cross{border:2.5px solid #fffffff2;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1.5px #3c285047}.cross i{background:#ffffffe6;border-radius:50%;position:absolute;inset:3px}.dig-ring{--p:0;background:conic-gradient(#fff3a6 calc(var(--p) * 1turn), transparent 0);opacity:0;border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;position:absolute;top:50%;left:50%;-webkit-mask:radial-gradient(circle,#0000 15px,#000 16px 22px,#0000 23px);mask:radial-gradient(circle,#0000 15px,#000 16px 22px,#0000 23px)}.dig-ring.on{opacity:1}.tray-wrap{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:14px;left:0;right:0}.tray-name{color:#fff;background:#4a3f5c8c;border-radius:999px;min-height:1.4em;padding:3px 14px;font-size:15px;font-weight:800}.tray-name:empty{visibility:hidden}.tray{pointer-events:auto;background:#fffaf0db;border-radius:999px;gap:6px;padding:7px 10px;display:flex;box-shadow:0 4px #78644633,0 10px 24px #281e1426}.slot{background:#f2eadb;border:0;border-radius:50%;place-items:center;width:50px;height:50px;padding:0;transition:transform .12s,background .12s;display:grid;position:relative}.slot img{width:38px;height:38px;image-rendering:pixelated}.slot.on{background:#fff;transform:translateY(-6px);box-shadow:0 0 0 3px #ffd36b,0 6px 10px #503c1e33}.slot .k{color:var(--ink-soft);font-size:11px;font-weight:800;position:absolute;bottom:-1px;right:-1px}.slot.more{color:var(--green-d);background:#e9f6ef;font-size:13px;font-weight:800}.toast-box{flex-direction:column;align-items:center;gap:8px;width:min(92%,640px);display:flex;position:absolute;top:124px;left:50%;transform:translate(-50%)}.toast{text-align:center;background:#fffdf8f5;border-radius:18px;padding:10px 20px;font-size:17px;font-weight:800;line-height:1.5;animation:.25s ease-out pop;box-shadow:0 6px 18px #281e1426}.toast.big{padding:14px 26px;font-size:22px}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.gamehud{flex-wrap:wrap;align-items:center;gap:10px;display:flex;position:absolute;top:66px;left:12px}.gh-item{background:#fffdf8f0;border-radius:16px;align-items:baseline;gap:8px;padding:6px 16px;display:flex;box-shadow:0 3px #7864462e}.gh-k{color:var(--ink-soft);font-size:13px;font-weight:800}.gh-item b{font-variant-numeric:tabular-nums;font-size:26px}.gh-pos{color:#fff;text-shadow:0 1px 3px #0006;font-size:13px;font-weight:800}.help-keys{color:#fff;text-shadow:0 1px 3px #00000073;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;display:flex;position:absolute;bottom:96px;left:12px}.help-keys kbd{color:var(--ink);text-shadow:none;background:#ffffffd9;border-radius:6px;margin-right:2px;padding:0 5px;font-family:inherit;font-size:11.5px}body.is-touch .help-keys,.touch{display:none}body.is-touch .touch{display:block}.stick{pointer-events:auto;touch-action:none;background:#ffffff47;border:3px solid #ffffffb3;border-radius:50%;width:132px;height:132px;position:absolute;bottom:96px;left:22px}.stick i{background:#ffffffe6;border-radius:50%;width:56px;height:56px;margin:-28px 0 0 -28px;position:absolute;top:50%;left:50%;box-shadow:0 4px 10px #00000026}.tbtns{flex-direction:column;align-items:flex-end;gap:12px;display:flex;position:absolute;bottom:96px;right:18px}.tbtn{pointer-events:auto;touch-action:none;background:#fffdf8e6;border:0;border-radius:50%;width:84px;height:84px;font-size:16px;font-weight:800;box-shadow:0 4px #78644633}.tbtn.jump{background:#9ed2f5f2}.tbtn.place{background:#f9a9c6f2}.panel{width:var(--panel-w);background:var(--cream);border-left:1px solid var(--line);z-index:6;flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0;box-shadow:-8px 0 30px #3c281414}.p-head{border-bottom:1px solid var(--line);flex-direction:column;gap:8px;padding:12px 14px 10px;display:flex}.mission-pick{box-shadow:0 3px 0 var(--line);text-align:left;background:#fff;border:0;border-radius:16px;align-items:center;gap:10px;padding:8px 12px 8px 8px;display:flex}.mission-pick svg{fill:none;width:22px;height:22px;stroke:var(--ink-soft);stroke-width:2.4px;stroke-linecap:round;flex:none;margin-left:auto}.m-no{background:var(--orange);color:#fff;border-radius:50%;flex:none;place-items:center;width:36px;height:36px;font-size:17px;font-weight:800;display:grid}.m-no.done{background:var(--pink)}.m-title{font-size:17px;font-weight:800;line-height:1.35}.m-desc{color:#5d536e;margin:0;font-size:15px;font-weight:700;line-height:1.65}.m-hint{background:#fff6d8;border-radius:12px;margin:0;padding:8px 12px;font-size:14.5px;font-weight:700;line-height:1.6}.p-tools{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.chip{box-shadow:0 2px 0 var(--line);white-space:nowrap;background:#fff;border:0;border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:800}.chip.on{color:var(--green-d);background:#e3f6ec}.seg{background:#efe7d8;border-radius:999px;padding:3px;display:inline-flex}.seg button{background:0 0;border:0;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:800}.seg button.on{box-shadow:0 1px 0 var(--line);background:#fff}.p-body{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.blockly,.cm{flex:1;min-height:0;position:relative}.cm .cm-editor{height:100%}.cm-kid-error{background:#ffe7d6!important}.cm-kid-run{background:#dff6e8!important}.codeview{border-top:1px solid var(--line);background:#fffdf8;flex-direction:column;height:40%;display:flex}.cv-head{color:var(--ink-soft);background:#f6efe2;padding:6px 12px;font-size:13px;font-weight:800}.cv-body{flex:1;min-height:0;overflow:auto}.cv-body .cm-editor{height:100%}.p-msg{background:#fff1e4;border-radius:16px;align-items:flex-start;gap:10px;max-height:30%;margin:8px 12px 0;padding:10px 14px;font-size:15px;font-weight:700;line-height:1.6;display:flex;overflow:auto}.p-msg.good{background:#e3f6ec}.p-msg.info{background:#eef4fd}.p-face{background:radial-gradient(circle at 36% 44%,#3a2c3c 0 3px,#0000 3.5px),radial-gradient(circle at 64% 44%,#3a2c3c 0 3px,#0000 3.5px),radial-gradient(at 50% 72%,#fff3e4 0 9px,#0000 9.5px),#ffcfa3;border-radius:50%;flex:none;width:34px;height:34px}.p-foot{flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px 12px;display:flex}.run-btn{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-d);border:0;border-radius:999px;align-items:center;gap:8px;padding:11px 26px 11px 20px;font-size:19px;font-weight:800;display:inline-flex}.run-btn svg{fill:#fff;width:20px;height:20px}.run-btn.stop{background:var(--orange);box-shadow:0 4px #d47640}.run-btn:active{box-shadow:0 1px 0 var(--green-d);transform:translateY(3px)}.modal{z-index:20;background:#3c2d1e47;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.modal-card{background:var(--card);border-radius:28px;width:min(560px,100%);max-height:90vh;padding:24px;animation:.25s ease-out pop;overflow:auto;box-shadow:0 24px 60px #281e144d}.modal-card h3{margin:0 0 12px;font-size:24px;font-weight:800}.mlist{flex-direction:column;gap:8px;display:flex}.mitem{text-align:left;box-shadow:0 2px 0 var(--line);background:#fff;border:0;border-radius:16px;align-items:center;gap:12px;padding:10px 12px;font-size:16px;font-weight:800;display:flex}.mitem.cur{box-shadow:0 0 0 3px #ffd36b}.mitem .done-mark{color:#e05f8a;background:#ffe4ee;border-radius:999px;flex:none;margin-left:auto;padding:2px 10px;font-size:13px}.praise{text-align:center}.praise .yay{color:var(--green-d);margin:4px 0 8px;font-size:44px;font-weight:800}.praise p{margin:0 0 18px;font-size:18px;font-weight:700;line-height:1.7}.praise .poko-big{width:104px;height:104px;margin:0 auto;animation:.9s ease-in-out infinite hop;display:block}@keyframes hop{50%{transform:translateY(-10px)}}.btn-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn-row .run-btn{font-size:17px}.palette{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;display:grid}.pal{box-shadow:0 2px 0 var(--line);background:#fff;border:0;border-radius:16px;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;font-size:13px;font-weight:800;display:flex}.pal img{width:44px;height:44px;image-rendering:pixelated}.loading{z-index:30;background:#cfe9fb;flex-direction:column;justify-content:center;align-items:center;gap:6px;font-size:18px;font-weight:800;transition:opacity .4s;display:flex;position:absolute;inset:0}.loading.gone{opacity:0;pointer-events:none}.ld-poko{background:radial-gradient(at 36% 42%,#3a2c3c 0 3px,#0000 4px),radial-gradient(at 64% 42%,#3a2c3c 0 3px,#0000 4px),radial-gradient(at 50% 72%,#fff3e4 0 17px,#0000 18px),#ffcfa3;border-radius:50%;width:64px;height:64px;animation:.9s ease-in-out infinite hop}.blocklyTreeLabel,.blocklyToolboxCategoryLabel{font-family:var(--font)!important;font-size:14px!important;font-weight:800!important}@media (width<=900px){.course-list{grid-template-columns:1fr;max-width:560px}.course{flex-direction:row}.course-art{width:38%;height:auto;min-height:150px}}@media (width<=560px){.course{flex-direction:column}.course-art{width:auto;height:130px;min-height:0}:root{--panel-w:100vw}.help-keys{display:none}}