:root{--primary: #ff6faa;--secondary: #90caf9;--accent: #ffe8a9;--background: #fff9fd;--card: #ffffffd9;--text: #5a4f6d;--success: #a3e635;--warning: #fbbf24;--danger: #f87171;--font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;--card-radius: 28px;--btn-radius: 50px;--shadow-sm: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-md: 0 16px 24px -8px rgb(255 112 167 / .28);--kenny-blue: url(/assets/kenny/btn-blue.png);--kenny-yellow: url(/assets/kenny/btn-yellow.png);--kenny-green: url(/assets/kenny/btn-green.png);--kenny-red: url(/assets/kenny/btn-red.png)}@keyframes drawStroke{to{stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(4deg)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}@keyframes popUp{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}@keyframes sparkleBurst{0%{transform:translateY(8px) scale(.8);opacity:0}to{transform:translateY(-16px) scale(1.1);opacity:1}}@keyframes fadeGuideOut{0%{opacity:.3}to{opacity:.04}}@font-face{font-family:Zen Maru Gothic;src:url(https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Zen Maru Gothic,Nunito,"M PLUS Rounded 1c",sans-serif;background:radial-gradient(circle at 15% 20%,#fff1f8,#fff9fd 45%,#f7f4ff);color:var(--text);overflow-x:hidden;overflow-y:auto;height:100vh;width:100vw;-webkit-user-select:none;user-select:none}#app{width:100%;height:100%;padding-bottom:env(safe-area-inset-bottom)}.screen{width:100%;height:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:8px;padding:20px;transition:opacity .3s ease;overflow-y:auto}.mascot{pointer-events:none;transition:transform .25s cubic-bezier(.175,.885,.32,1.275);font-size:78px}.mascot.bounce{animation:bounce 2s infinite ease-in-out}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.btn-cute{background-color:transparent;background-image:var(--kenny-blue);background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:none;border-radius:var(--btn-radius);padding:18px 28px;font-size:clamp(18px,2.6vw,24px);font-weight:700;color:#2e5f95;text-shadow:0 1px 0 #fff;box-shadow:0 8px 14px -8px #366ca555;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .2s ease;touch-action:manipulation}.btn-cute:hover{filter:brightness(1.04)}.btn-cute:active{transform:translateY(3px) scale(.98);box-shadow:0 3px 8px -6px #366ca555}.btn-cute.primary{background-image:var(--kenny-yellow);color:#8a4f0a;box-shadow:0 8px 14px -8px #a66d1f55}.btn-cute.primary:active{box-shadow:0 3px 8px -6px #a66d1f55}.btn-cute.kenny-next{background-image:var(--kenny-green);color:#2d6c30}.btn-cute:disabled{background-image:var(--kenny-red);color:#924646;filter:grayscale(.2);cursor:not-allowed;opacity:.75}.xp-badge{position:absolute;top:18px;right:20px;background:#fffdf3;border:3px solid var(--warning);border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:8px;font-weight:700;box-shadow:var(--shadow-sm);z-index:100}.xp-badge .star{color:var(--warning)}.xp-pop{animation:popUp .45s ease}.sound-toggle{position:absolute;top:18px;right:160px;border:3px solid #8ac4ff;background:#f1f9ff;color:#366ca5;border-radius:999px;padding:8px 12px;font-size:15px;font-weight:700;z-index:101}.canvas-wrapper{background:#fff;border:8px solid var(--accent);border-radius:var(--card-radius);box-shadow:var(--shadow-md);position:relative;overflow:hidden}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.practice-header{display:flex;gap:20px;align-items:center;margin-bottom:18px;flex-wrap:wrap;justify-content:center}.practice-canvas{width:min(400px,calc(100vw - 40px));aspect-ratio:1 / 1}.practice-actions{margin-top:20px;display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.fade-guide{animation:fadeGuideOut 2s ease-out forwards}.practice-back{position:absolute;top:20px;left:20px}.mode-selector{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;justify-content:center}.select-grid{display:grid;grid-template-columns:repeat(5,minmax(64px,1fr));gap:14px;width:100%;padding:12px}.select-sections{width:min(820px,95vw);max-height:min(58vh,640px);overflow-y:auto;padding:14px;background:var(--card);border:3px solid #ffd2ea;border-radius:24px}.select-group{margin-bottom:10px}.select-group-title{font-size:20px;color:#9f4f7a;padding:4px 12px 2px}.char-card{position:relative;min-height:88px;display:flex;align-items:center;justify-content:center}.char-stars{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:14px;color:#f59f00;text-shadow:0 1px 0 #fff;min-height:16px}.title-mascots{display:flex;gap:18px;margin-bottom:10px;flex-wrap:wrap;justify-content:center}.title-heading{font-size:clamp(34px,9vw,48px);color:var(--primary);text-shadow:2px 2px 0 white;margin-bottom:28px;text-align:center;line-height:1.2}.title-start{margin-top:32px}.floating-decor{position:absolute;font-size:32px;animation:float 3s ease-in-out infinite;opacity:.8;pointer-events:none}.decor-star{left:10%;top:16%;animation-delay:.2s}.decor-heart{right:14%;top:22%;animation-delay:.8s}.decor-balloon{left:18%;bottom:18%;animation-delay:1.1s}.character-buddy{position:absolute;right:14px;bottom:14px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;max-width:180px}.character-bubble{background:#fff;border:2px solid #ffd2ea;border-radius:16px;padding:8px 10px;margin-bottom:8px;font-size:13px;box-shadow:var(--shadow-sm)}.character-avatar{background:#fff3fb;border:3px solid #ffc5df;border-radius:18px;padding:8px 10px;display:flex;align-items:center;gap:8px;min-width:126px}.character-icon{font-size:30px;animation:float 1.7s ease-in-out infinite}.character-label{font-size:12px;font-weight:700;color:#9f4f7a}.mood-sparkle .character-icon,.mood-clap .character-icon{animation:wiggle .8s ease-in-out infinite}.feedback-sparkles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:92}.feedback-sparkles span{position:absolute;animation:sparkleBurst .8s ease forwards}.feedback-sparkles span:nth-child(1){left:28%;top:26%;animation-delay:0s}.feedback-sparkles span:nth-child(2){left:41%;top:21%;animation-delay:.08s}.feedback-sparkles span:nth-child(3){left:54%;top:24%;animation-delay:.12s}.feedback-sparkles span:nth-child(4){left:63%;top:28%;animation-delay:.05s}.feedback-sparkles span:nth-child(5){left:46%;top:35%;animation-delay:.16s}.result-mascot{font-size:132px;animation:bounce 1.6s ease-in-out infinite;line-height:1}.result-sub{font-size:20px;color:#8f7ca3;margin-bottom:4px}.result-title{font-size:clamp(32px,8vw,40px);color:var(--primary);margin-bottom:12px;text-align:center}.result-score{font-size:clamp(20px,6vw,24px);margin:16px 0 6px}.result-earned-xp{font-size:clamp(20px,6vw,24px);margin:8px 0 20px;text-align:center}.result-actions{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.select-heading{margin-bottom:30px;text-align:center;font-size:clamp(26px,7vw,36px)}.select-back{margin-top:0}.select-footer-actions{margin-top:24px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.study-finish-btn{white-space:normal;text-align:center;line-height:1.2;min-width:220px}@media (max-width: 900px){body{min-height:100dvh}.screen{justify-content:flex-start;padding:112px 12px 86px;gap:12px}.sound-toggle{right:14px;top:70px;font-size:13px;padding:6px 10px}.xp-badge{top:18px;right:14px;font-size:14px}.character-buddy{max-width:120px;right:8px;bottom:8px}.character-avatar{min-width:82px;padding:6px 8px}.character-bubble{display:none}.canvas-wrapper{width:min(400px,calc(100vw - 32px))!important;height:auto!important}.practice-back{top:64px;left:10px;font-size:14px;padding:10px 18px}.mode-selector .btn-cute{font-size:16px;padding:12px 18px}.title-start{margin-top:16px}.select-grid{grid-template-columns:repeat(4,minmax(54px,1fr));gap:10px;padding:8px}.char-card{min-height:76px}.select-sections{width:min(95vw,820px);max-height:min(60vh,640px);padding:10px}.select-group-title{font-size:18px}.char-card{font-size:28px!important}.result-mascot{font-size:112px}}