.learn-page{min-height:100vh;background:#fdf3d8;background-image:radial-gradient(#f3c83255 1.5px,transparent 0);background-size:26px 26px;display:flex;flex-direction:column}.learn-shell{width:100%;max-width:880px;margin:0 auto;padding:24px 20px 60px;flex:1}.learn-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.learn-back{border:2px solid #000;background:#fff;border-radius:8px;box-shadow:3px 3px 0 #000;padding:8px 16px;font-weight:700;color:#000;text-decoration:none;font-size:.9em;cursor:pointer;font-family:inherit;transition:transform .12s ease,box-shadow .12s ease}.learn-back:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}.learn-back:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}.learn-heading{font-weight:800;font-size:1.4em;text-align:center}.learn-heading small{display:block;font-size:.6em;font-weight:600;color:#6b5b2a}.topbar-spacer{width:90px}.neko-stage{display:flex;flex-direction:column;align-items:center;margin:10px auto 0}.neko-stage .neko-bubble{border:2px solid #000;background:#fff;border-radius:14px;box-shadow:3px 3px 0 #000;padding:10px 18px;font-weight:700;font-size:.95em;max-width:320px;text-align:center;position:relative;margin-bottom:14px;animation:bubble-in .3s cubic-bezier(.34,1.56,.64,1)}.neko-stage .neko-bubble:after{content:"";position:absolute;bottom:-9px;left:50%;margin-left:-8px;width:16px;height:16px;background:#fff;border-right:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg)}@keyframes bubble-in{0%{transform:scale(.5) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.neko-svg{overflow:visible}.neko-svg .cat-root{transform-box:fill-box;transform-origin:50% 100%;animation:neko-idle 3.4s ease-in-out infinite}@keyframes neko-idle{0%,to{transform:scaleY(1)}50%{transform:scaleY(.965) scaleX(1.012)}}.neko-svg .cat-tail{transform-box:fill-box;transform-origin:8% 92%;animation:tail-sway 3s ease-in-out infinite}@keyframes tail-sway{0%,to{transform:rotate(0deg)}50%{transform:rotate(9deg)}}.neko-svg .cat-ear-l,.neko-svg .cat-ear-r{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s ease}.neko-svg .cat-ear-r{animation:ear-twitch 5s ease-in-out infinite}@keyframes ear-twitch{0%,90%,to{transform:rotate(0deg)}93%{transform:rotate(-8deg)}96%{transform:rotate(3deg)}}.neko-svg.pose-happy .cat-root{animation:neko-bounce .75s cubic-bezier(.34,1.56,.64,1) infinite}@keyframes neko-bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-22px) rotate(-2deg)}70%{transform:translateY(0) scaleY(.96)}}.neko-svg .arm-wave{transform-box:fill-box;transform-origin:10% 95%;animation:arm-wave .7s ease-in-out infinite}@keyframes arm-wave{0%,to{transform:rotate(-10deg)}50%{transform:rotate(22deg)}}.neko-svg.pose-sad .cat-root{animation:neko-sway 1.6s ease-in-out infinite}@keyframes neko-sway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.neko-svg.pose-sad .cat-ear-l{transform:rotate(-16deg)}.neko-svg.pose-sad .cat-ear-r{transform:rotate(16deg);animation:none}.neko-svg.pose-sad .cat-tail{animation:none;transform:rotate(14deg)}.neko-svg .tear{transform-box:fill-box;animation:tear-drop 1.5s ease-in infinite}@keyframes tear-drop{0%{transform:translateY(0);opacity:0}25%{opacity:1}to{transform:translateY(26px);opacity:0}}.neko-svg .prop-cake{animation:cake-pop .5s cubic-bezier(.34,1.56,.64,1)}@keyframes cake-pop{0%{transform:translateY(24px) scale(.6);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.neko-svg .candle-flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame-flicker .5s ease-in-out infinite alternate}@keyframes flame-flicker{0%{transform:scale(1) rotate(-4deg)}to{transform:scale(1.25,1.4) rotate(5deg)}}.neko-svg.pose-party .cat-root{animation:neko-bounce .85s cubic-bezier(.34,1.56,.64,1) infinite}.neko-svg .arm-party{transform-box:fill-box;transform-origin:5% 95%;animation:arm-pump .85s ease-in-out infinite}@keyframes arm-pump{0%,to{transform:rotate(0deg)}45%{transform:rotate(-9deg)}}.neko-svg .conf-piece{transform-box:fill-box;animation:conf-fly 1.3s ease-out infinite;opacity:0}@keyframes conf-fly{0%{transform:translate(0) rotate(0deg);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(240deg);opacity:0}}.neko-sticker{width:260px;max-width:80%;height:auto;display:block;transform-origin:50% 90%;animation:sticker-bounce 3s ease-in-out infinite;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.15))}@keyframes sticker-bounce{0%,to{transform:translateY(0) rotate(0deg) scale(1)}24%{transform:translateY(-10px) rotate(-1.2deg) scale(1.012)}50%{transform:translateY(4px) rotate(.8deg) scale(.995)}74%{transform:translateY(-4px) rotate(0deg) scale(1.004)}}.script-tabs{display:flex;justify-content:center;gap:12px;margin:22px 0 20px}.script-tab{border:2px solid #000;border-radius:10px;background:#fff;box-shadow:4px 4px 0 #000;padding:10px 26px;font-weight:800;font-size:1em;cursor:pointer;font-family:inherit;transition:transform .12s ease,box-shadow .12s ease,background .15s ease}.script-tab.active{background:#f3c832;transform:translate(2px,2px);box-shadow:1px 1px 0 #000}.script-tab:hover:not(.active){transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}.level-card{position:relative;border:2px solid #000;border-radius:12px;background:#fff;box-shadow:5px 5px 0 #000;padding:18px 14px;text-align:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;font-family:inherit}.level-card:hover:not(:disabled){transform:translate(-2px,-2px) rotate(-1deg);box-shadow:7px 7px 0 #000}.level-card:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 #000}.level-card:disabled{cursor:not-allowed;background:#e8e2d0;box-shadow:3px 3px 0 #00000055;color:#9a9276}.level-card .lv-kana{font-size:1.7em;font-weight:800;display:block;line-height:1.2}.level-card .lv-name{font-size:.85em;font-weight:700;display:block;margin-top:6px}.level-card .lv-tag{display:inline-block;margin-top:8px;font-size:.65em;font-weight:800;text-transform:uppercase;border:2px solid #000;border-radius:20px;padding:2px 10px}.lv-tag.done{background:#69cf95}.lv-tag.ready{background:#f3c832}.lv-tag.locked{background:#d8d2c0;border-color:#9a9276;color:#6b6454}.review-row{display:flex;justify-content:center;margin-top:24px}.learn-progress{border:2px solid #000;border-radius:20px;background:#fff;height:22px;overflow:hidden;margin-bottom:26px;box-shadow:3px 3px 0 #000}.learn-progress>div{height:100%;background:repeating-linear-gradient(45deg,#f3c832,#f3c832 12px,#ffd95e 0,#ffd95e 24px);border-right:2px solid #000;transition:width .45s cubic-bezier(.34,1.56,.64,1);min-width:0}.learn-progress>div[data-zero=true]{border-right:none}.card-stage{perspective:1400px;width:min(340px,88vw);margin:0 auto}.flashcard{position:relative;width:100%;aspect-ratio:3/4;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.34,1.3,.5,1);cursor:pointer}.card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid #000;border-radius:18px;box-shadow:8px 8px 0 #000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}.card-front{background:#fff}.card-back{background:#ffe9a8;transform:rotateY(180deg)}.card-face .big-kana{font-size:clamp(5.5em,20vw,8em);font-weight:800;line-height:1;animation:kana-pop .5s cubic-bezier(.34,1.56,.64,1)}.card-back .big-romaji{font-size:3em;font-weight:800;line-height:1}.card-back .hint{margin-top:14px;font-size:1em;font-weight:500;color:#4d3f12}.card-back .kana-small{font-size:1.6em;font-weight:700;margin-bottom:4px}.card-hint-tap{margin-top:18px;font-size:.75em;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#8a7a45}.sound-btn{margin-top:16px;border:2px solid #000;background:#8ecdf0;border-radius:10px;box-shadow:3px 3px 0 #000;padding:8px 18px;font-weight:800;font-size:.9em;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;font-family:inherit}.sound-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}.sound-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}@keyframes kana-pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}.study-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;flex-wrap:wrap}.pill-btn{border:2px solid #000;border-radius:10px;background:#fff;box-shadow:4px 4px 0 #000;padding:12px 26px;font-size:1em;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;font-family:inherit;color:#000}.pill-btn.primary{background:#69cf95}.pill-btn.accent{background:#f3c832}.pill-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}.pill-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #000}.pill-btn:disabled{opacity:.35;cursor:not-allowed}.study-count{font-weight:800;font-size:1em;min-width:60px;text-align:center}.card-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}.card-dots span{width:12px;height:12px;border:2px solid #000;border-radius:50%;background:#fff;transition:background .2s ease,transform .2s ease}.card-dots span.on{background:#f3c832;transform:scale(1.25)}.match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:12px;max-width:560px;margin:0 auto}.match-tile{border:2px solid #000;border-radius:12px;background:#fff;box-shadow:4px 4px 0 #000;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.6em;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .15s ease,opacity .3s ease;font-family:inherit}.match-tile:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}.match-tile.selected{background:#8ecdf0;transform:translate(2px,2px);box-shadow:1px 1px 0 #000}.match-tile.matched{background:#69cf95;opacity:.55;cursor:default;animation:opt-bounce .45s ease}.match-tile.miss{animation:opt-shake .4s ease;background:#f37c7c}.match-done{text-align:center;margin-top:24px}.quiz-kana-box{width:min(280px,80vw);margin:0 auto 22px;border:3px solid #000;border-radius:18px;background:#fff;box-shadow:8px 8px 0 #000;padding:26px 20px;text-align:center}.quiz-kana-box .big-kana{font-size:clamp(4em,16vw,6em);font-weight:800;line-height:1;display:block;animation:kana-pop .45s cubic-bezier(.34,1.56,.64,1)}.quiz-question{text-align:center;font-weight:700;margin-bottom:18px;font-size:1.05em}.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:440px;margin:0 auto}.quiz-opt{border:2px solid #000;border-radius:12px;background:#fff;box-shadow:4px 4px 0 #000;padding:14px 10px;font-size:1.5em;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .15s ease;font-family:inherit}.quiz-opt:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000;background:#fff7dd}.quiz-opt:disabled{cursor:default}.quiz-opt.correct{background:#69cf95;animation:opt-bounce .45s ease}.quiz-opt.wrong{background:#f37c7c;animation:opt-shake .4s ease}.quiz-opt.dim{opacity:.45}@keyframes opt-bounce{0%,to{transform:translate(0)}35%{transform:translateY(-10px) scale(1.05)}70%{transform:translateY(2px)}}@keyframes opt-shake{0%,to{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}.quiz-score{text-align:center;font-weight:800;margin-top:20px;font-size:.95em;color:#6b5b2a}.result-box{max-width:480px;margin:0 auto;border:3px solid #000;border-radius:18px;background:#fff;box-shadow:8px 8px 0 #000;padding:26px 28px 32px;text-align:center;animation:kana-pop .5s cubic-bezier(.34,1.56,.64,1)}.result-box h2{font-size:2em;font-weight:800;margin:0 0 8px}.result-box .score-line{font-size:1.05em;font-weight:600;margin-bottom:18px}.result-box .score-big{font-size:2.6em;font-weight:800;display:block;margin:8px 0}.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.dojo-subtitle{text-align:center;font-size:1.6em;font-weight:800;margin:46px 0 16px}.dojo-hint{text-align:center;font-weight:600;color:#6b5b2a;margin:0}.practice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}.practice-card{position:relative;border:2px solid #000;border-radius:16px;background:#fff;box-shadow:5px 5px 0 #000;padding:18px 16px;text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;font-family:inherit;display:flex;flex-direction:column;gap:5px;color:#000}.practice-card:first-child{background:#fff7dd}.practice-card:nth-child(2){background:#eafaf1}.practice-card:nth-child(3){background:#fdeef1}.practice-card:nth-child(4){background:#eaf4fb}.practice-card:hover:not(:disabled){transform:translate(-2px,-2px) rotate(-.5deg);box-shadow:7px 7px 0 #000}.practice-card:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 #000}.practice-card:disabled{cursor:not-allowed;background:#efe9d8;box-shadow:3px 3px 0 #00000055;color:#7d745c}.pc-icon{font-size:1.45em;line-height:1.1}.pc-icon,.pc-name{font-family:Baloo\ 2,sans-serif;font-weight:800}.pc-name{font-size:1.12em}.pc-desc{font-size:.82em;font-weight:600}.pc-badge{position:absolute;top:-11px;right:-8px;background:#f37c7c;border:2px solid #000;border-radius:20px;box-shadow:2px 2px 0 #000;padding:3px 11px;font-size:.78em;font-weight:800;animation:badge-pop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.type-row{display:flex;justify-content:center;align-items:stretch;gap:12px;margin:4px 0 10px}.type-input{border:3px solid #000;border-radius:14px;background:#fff;box-shadow:4px 4px 0 #000;padding:12px 18px;width:170px;font-size:1.4em;font-weight:800;font-family:Baloo\ 2,sans-serif;text-align:center;text-transform:lowercase;outline:none;transition:background .15s ease}.type-input:focus{background:#fff7dd}.type-input.right{background:#69cf95;animation:opt-bounce .45s ease}.type-input.wrong{background:#f37c7c;animation:opt-shake .4s ease}.type-answer{text-align:center;font-weight:700;margin:0;animation:bubble-in .3s cubic-bezier(.34,1.56,.64,1)}.type-answer strong{font-size:1.3em}.speed-bar{max-width:520px;height:16px;margin:4px auto 6px;border:2px solid #000;border-radius:12px;background:#fff;overflow:hidden;box-shadow:2px 2px 0 #000}.speed-bar div{height:100%;background:repeating-linear-gradient(45deg,#f3c832,#f3c832 10px,#ffd95e 0,#ffd95e 20px);transition:width 1s linear}.speed-meta{display:flex;justify-content:space-between;max-width:520px;margin:0 auto 14px;font-family:Baloo\ 2,sans-serif;font-weight:800;font-size:1.05em}.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:12px;height:12px;border:2px solid #000;animation:confetti-fall linear forwards}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}85%{opacity:1}to{transform:translateY(110vh) rotate(2turn);opacity:0}}@media (max-width:640px){.learn-shell{padding:16px 14px 50px}.learn-heading{font-size:1.05em}.learn-back{padding:7px 12px;font-size:.8em}.topbar-spacer{width:4px}.script-tab{padding:8px 18px;font-size:.9em}.level-grid{grid-template-columns:repeat(2,1fr);gap:12px}.level-card{padding:14px 10px;box-shadow:4px 4px 0 #000}.level-card .lv-kana{font-size:1.4em}.match-grid{grid-template-columns:repeat(4,1fr);gap:9px}.match-tile{font-size:1.2em;box-shadow:3px 3px 0 #000}.quiz-options{gap:10px;max-width:100%}.quiz-opt{font-size:1.3em;padding:12px 8px}.quiz-kana-box{padding:20px 16px}.card-face,.quiz-kana-box{box-shadow:6px 6px 0 #000}.neko-stage svg{width:min(42vw,180px);height:min(42vw,180px)}.neko-stage .neko-bubble{font-size:.85em;max-width:240px;padding:8px 14px}.neko-sticker{width:210px}.result-box{padding:20px 18px 26px;box-shadow:6px 6px 0 #000}.study-nav{gap:10px}.pill-btn{padding:11px 20px;font-size:.95em}.dojo-subtitle{font-size:1.35em;margin-top:36px}.practice-grid{grid-template-columns:repeat(2,1fr);gap:12px}.practice-card{padding:14px 12px;box-shadow:4px 4px 0 #000}.pc-icon{font-size:1.25em}.pc-name{font-size:1em}.pc-desc{font-size:.75em}.pc-badge{right:-4px;padding:2px 9px}.type-input{width:140px;font-size:1.2em;padding:10px 12px}.speed-meta{font-size:.95em}}