body[data-subject]{--font:var(--font-kid);font-synthesis:weight}html,body{overscroll-behavior:none;height:100%;overflow:hidden}#app{height:100%}.screen{background:var(--cream);width:100%;height:100dvh;position:relative;overflow:hidden}.start,.end,.center-msg{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100%;padding:24px 16px;display:flex;overflow-y:auto}.center-msg{height:100%;font-size:24px}.start-title,.end-title{justify-content:center;margin:0;font-size:40px;font-weight:800}.start-sub,.end-count{justify-content:center;margin:0;font-size:22px}.start-actions,.end-actions{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px;display:flex}.btn.big{min-width:260px;min-height:88px;font-size:32px}.end{justify-content:flex-start;padding-top:max(24px,4vh)}.end-stars{justify-content:center;gap:4px;display:flex}.end-parents{background:#ffffffb3;border-radius:24px;flex-direction:column;align-items:center;gap:8px;max-width:560px;margin-top:16px;padding:16px 20px;display:flex}.end-parents .small,.credits{margin:0;font-size:14px;font-weight:700}.end-stores{flex-direction:column;align-items:center;gap:8px;display:flex}.soon{color:var(--ink);margin:4px 0 0;font-size:15px}.credits{opacity:.75;max-width:560px;margin-top:12px;font-size:12px}.credits p{margin:2px 0}.credits a{color:inherit}.frame{padding:12px 16px 16px;padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));padding-bottom:max(16px, env(safe-area-inset-bottom));background:var(--cream);flex-direction:column;gap:12px;display:flex;position:absolute;inset:0}.hd{flex:none;align-items:center;gap:8px;min-height:64px;display:flex}@media (min-width:700px){.hd{gap:12px;min-height:72px}}.backbtn{border:3px solid var(--teal);cursor:pointer;background:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:56px;height:56px;text-decoration:none;display:inline-flex}.badge{background:var(--teal);color:#fff;white-space:nowrap;border-radius:24px;flex:none;justify-content:center;align-items:center;min-width:48px;height:48px;padding:0 12px;font-size:22px;font-weight:800;display:inline-flex}.ttl{min-width:0;color:var(--ink);flex:1;margin:0;font-size:22px;font-weight:800;line-height:1.2}@media (min-width:700px){.ttl{font-size:32px;line-height:1.25}}.ttl.task{cursor:pointer;-webkit-tap-highlight-color:transparent;flex-wrap:nowrap;align-items:center;gap:4px 10px;font-size:24px;line-height:1.2;display:flex}@media (min-width:700px){.ttl.task{font-size:30px}}.ttl.task:focus-visible{outline:4px solid var(--orange);outline-offset:4px;border-radius:12px}.task-icon{flex:none;font-size:1.05em;line-height:1}.task-text{flex:0 auto;min-width:0}.chip{background:var(--orange);color:#fff;white-space:nowrap;border-radius:18px;flex:none;align-items:center;min-height:36px;padding:2px 14px;font-size:.75em;font-weight:800;display:inline-flex}.chip[hidden]{display:none}.narr.answer{color:var(--ink);background:#ffb300}.narr.answer[hidden]{display:none}.narr.answer .lbl{color:var(--ink)}@media (min-width:960px){.narr.answer{border-radius:28px;width:auto;height:72px;min-height:72px;padding:0 20px}.narr.answer .lbl{display:inline}}.narr.answer.dim{opacity:.45;cursor:default}.narr.answer.showing{box-shadow:inset 0 0 0 3px var(--ink), inset 0 4px 8px #00000047;background:#e29a00;transform:scale(.94)}.ans-glow{animation:1.4s ease-in-out infinite alternate ans-pulse;position:relative;box-shadow:inset 0 0 0 6px #ffb300!important}@keyframes ans-pulse{0%{opacity:.8}to{opacity:1}}.ans-tag{color:var(--ink);white-space:nowrap;pointer-events:none;z-index:2;background:#ffb300;border-radius:999px;padding:2px 9px;font-size:14px;font-weight:800;line-height:1.2;position:absolute;top:8px;left:10px}@media (prefers-reduced-motion:reduce){.ans-glow{animation:none}}.ans-disc{background:#fff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:28px;line-height:1;display:inline-flex}.hint-finger{z-index:30;text-align:center;pointer-events:none;width:64px;height:64px;margin:-8px 0 0 -32px;font-size:48px;line-height:64px;animation:1.4s ease-in-out infinite hint-bob;position:absolute}.hint-finger.drag{animation:1.4s ease-in-out infinite hint-drag}.hint-wiggle{animation:1.4s ease-in-out infinite hint-wiggle}.hint-pulse{animation:1.4s ease-in-out infinite hint-pulse}.pulse-once{animation:.4s ease-in-out submit-pulse}@keyframes hint-bob{0%,to{transform:translateY(0)}25%{transform:translateY(-10px)}}@keyframes hint-drag{0%{opacity:1;transform:translate(0)}70%{transform:translate(var(--dx,0), var(--dy,-44px));opacity:1}to{transform:translate(var(--dx,0), var(--dy,-44px));opacity:0}}@keyframes hint-wiggle{0%,55%,to{transform:rotate(0)}7%{transform:rotate(2.5deg)}14%{transform:rotate(-2.5deg)}21%{transform:rotate(2.5deg)}28%{transform:rotate(-2.5deg)}35%{transform:rotate(2.5deg)}42%{transform:rotate(-2.5deg)}49%{transform:rotate(2.5deg)}}@keyframes hint-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes submit-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.14)}}@media (prefers-reduced-motion:reduce){.hint-finger,.hint-finger.drag,.hint-wiggle,.hint-pulse,.pulse-once{animation:none}}.body{flex:1;width:100%;max-width:1200px;min-height:0;margin:0 auto;position:relative}@media (max-width:560px){.hd{flex-wrap:wrap;row-gap:4px;min-height:0}.badge{margin-right:auto}.ttl{flex:100%;order:5;font-size:24px}.narr.round{width:56px;min-width:56px;height:56px}.ans-disc{width:44px;height:44px}}@media (max-width:400px){.narr.round,.narr.has-label{width:48px;min-width:48px;height:48px}.ans-disc{width:36px;height:36px;font-size:23px}.backbtn{width:48px;height:48px}}.overlay-layer{pointer-events:none;position:absolute;inset:0}.overlay{pointer-events:auto;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.hanamaru-overlay,.star-overlay{background:#fff8e7e6}.hanamaru-stack{flex-direction:column;align-items:center;gap:8px;display:flex}.hanamaru-overlay svg,.star-overlay svg{flex:none;max-width:none;animation:.6s ease-out both popin}@keyframes popin{0%{transform:scale(0)}70%{transform:scale(1.1)}to{transform:scale(1)}}.hanamaru-text{margin:0;font-size:32px;font-weight:800}.retry-overlay{background:#24324a8c}.overlay-card{border:4px solid var(--teal);text-align:center;background:#fff;border-radius:32px;flex-direction:column;align-items:center;gap:16px;width:min(420px,100%);max-height:100%;padding:24px;display:flex;overflow-y:auto;box-shadow:0 8px 24px #00000040}.overlay-card .btn{width:100%}.overlay-msg{justify-content:center;margin:0;font-size:32px;font-weight:800;line-height:1.3}@media (max-height:480px){.overlay-card{gap:8px;padding:12px 20px}.overlay-msg{font-size:24px}}@media (prefers-reduced-motion:reduce){.hanamaru-overlay svg,.star-overlay svg,.shake,.narr.playing svg{animation:none}}.correct-mark-layer{z-index:40;pointer-events:auto;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.correct-mark-layer svg.correct-mark{flex:none;max-width:none;animation:.88s linear both correct-mark}@keyframes correct-mark{0%{opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.6)}20.45%{opacity:1;transform:scale(1)}77.27%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.correct-mark-layer svg.correct-mark{animation-name:correct-mark-still}@keyframes correct-mark-still{0%,77.27%{opacity:1}to{opacity:0}}}.answer-tag{color:var(--ink);white-space:nowrap;pointer-events:none;z-index:2;background:#ffb300;border-radius:999px;padding:.12em .55em;font-weight:800;line-height:1.2;position:absolute;top:8px;left:8px}.card-btn.answer{border:6px solid #ffb300;animation:.7s ease-in-out infinite alternate ans-ring}.slot.answer{border:4px solid #ffb300;animation:.7s ease-in-out infinite alternate ans-ring}.slot-answer{opacity:.75;pointer-events:none;position:absolute;inset:0}.trace-board.answer-anim:after{content:"";box-sizing:border-box;pointer-events:none;border:8px solid #ffb300;border-radius:24px;animation:.7s ease-in-out infinite alternate ans-ring;position:absolute;inset:0}@keyframes ans-ring{0%{border-color:#ffb300b3}to{border-color:#ffb300}}@media (prefers-reduced-motion:reduce){.card-btn.answer,.slot.answer,.trace-board.answer-anim:after{animation:none}}.hear{flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0;overflow-y:auto}.hear-rows{flex-direction:column;align-items:center;gap:16px;display:flex}.hear-row{justify-content:center;gap:12px;display:flex}.kana-card{flex:none;position:relative;overflow:hidden}.card-single,.card-with-sub,.card-pair{position:absolute;inset:0}.card-pair{justify-content:space-evenly;align-items:center;display:flex}.card-pair-item{flex:1;height:100%}.card-sub{text-align:center;color:#24324a8c;font-weight:800;position:absolute;left:0;right:0}.reveal{box-sizing:border-box;text-align:center;background:#fff;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:min(100%,720px);min-height:160px;padding:8px 16px;display:flex}.reveal.empty{background:0 0}.reveal .caption{font-size:32px;font-weight:800;line-height:1.3}@media (orientation:landscape) and (min-width:700px){.reveal{flex-direction:row;gap:24px;min-height:110px}}.pick{flex-direction:column;justify-content:center;align-items:center;gap:24px;display:flex;position:absolute;inset:0;overflow-y:auto}.ear-header{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.choice-row{justify-content:center;display:flex}.prompt-card{background:#fff;border-radius:24px;justify-content:center;align-items:center;padding:8px 56px;display:flex}.prompt-text{color:var(--teal);font-weight:800;line-height:1.1}.write{flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute;inset:0;overflow-y:auto}.write.landscape{flex-direction:row;align-items:center;gap:24px;overflow:hidden}.board-wrap{flex:none;position:relative}.start-marker{box-sizing:border-box;pointer-events:none;border:0 solid #0000;position:absolute}.start-marker.hint-pulse{border:5px solid var(--orange)}.trace-board{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#fff;border-radius:24px;width:100%;height:100%;position:relative;overflow:hidden}.trace-canvas{touch-action:none;width:100%;height:100%;display:block}.here-label{background:var(--coral);color:#fff;white-space:nowrap;pointer-events:none;border-radius:20px;padding:6px 16px;font-size:20px;font-weight:800;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.trace-panel{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.write.landscape .trace-panel{flex:1;align-items:flex-start;gap:20px;width:auto;min-width:0}.stage-name{flex-wrap:wrap;justify-content:center;align-items:center;column-gap:12px;font-size:28px;font-weight:800;line-height:1.2;display:flex}.stage-name-head{align-items:center;display:inline-flex}.stage-name-glyph{width:56px;height:56px;display:block}.write.landscape .stage-name{justify-content:flex-start;font-size:40px}.write.landscape .stage-name-glyph{width:72px;height:72px}.stage-buttons{gap:12px;width:100%;display:flex}.stage-buttons .btn{flex:1;min-width:0;padding-left:12px;padding-right:12px}.write.landscape .stage-buttons{flex-direction:column}.slot{box-sizing:border-box;cursor:pointer;touch-action:manipulation;background:#fff;border:3px dashed #24324a73;flex:none;position:relative}.slot.next{border-color:var(--orange)}.slot.written{cursor:default;background:#eaf7f3;border:0}.slot-ink{position:absolute;inset:0}.printed-cell{background:#fff;flex:none;position:relative;overflow:hidden}.cell-glyph{position:absolute;inset:0}.markup-line{flex-wrap:wrap;align-items:center;display:flex}.mk-phrase{white-space:nowrap;align-items:center;display:inline-flex}.mk-gap{padding:0 4px;display:inline-flex}.mk-text{font-weight:800;line-height:1.2}.words{flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0;overflow-y:auto}.words-summary{flex-direction:column;align-items:stretch;gap:8px;width:min(100%,720px);display:flex}.words-summary-row{background:#fff;border-radius:20px;justify-content:center;align-items:center;gap:16px;padding:4px 16px;display:flex}.word-emoji{display:inline-block}.page-body{flex-direction:column;align-items:center;gap:12px;padding-bottom:8px;display:flex;position:absolute;inset:0;overflow-y:auto}.read-title{color:var(--orange);align-self:flex-start;font-size:32px;font-weight:800}.page{background:#fff;border:2px solid #24324a1f;border-radius:28px;gap:24px;width:min(100%,1100px);padding:16px;display:flex}.page.landscape{padding:24px}.page-main{flex-direction:column;flex:1;gap:14px;min-width:0;display:flex}.page-title-row{align-items:center;gap:12px;display:flex}.page-title{color:var(--teal);margin:0;font-size:30px;font-weight:800}.unit-row{border-radius:16px;align-items:center;gap:12px;padding:4px 6px;display:flex}.unit-row.active{background:#ff8a3d38}.unit-row .markup-line{flex:1}.scene{align-items:center;gap:12px;display:flex}.scene.col{flex-direction:column;justify-content:center;min-width:96px}.scene-emoji{font-size:64px;line-height:1}.scene.row .scene-emoji{font-size:40px}.read-done{flex:none;min-width:280px}.write-panel{z-index:5;background:#000000b3;justify-content:center;align-items:center;padding:8px;display:flex;position:absolute;inset:0}.write-panel-card{box-sizing:border-box;border:3px solid var(--teal);background:var(--cream);border-radius:32px;flex-direction:column;gap:12px;padding:16px;display:flex}.write-panel-head{justify-content:space-between;align-items:center;display:flex}.panel-glyph{width:56px;height:56px}.glyph-word{display:inline-flex}.picture-grid{flex-direction:column;align-items:center;display:flex}.picture-row{justify-content:center;display:flex}.picture-card{flex:none;position:relative}.word-art{font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;display:inline-block}.prompt-art{justify-content:center;align-items:center;display:flex}.card-sub-glyph{text-align:center;width:100%;display:block}.card-sub-glyph svg{margin:0 auto}.kana-art{flex:none;display:block}.kana-art-wrap{justify-content:center;align-items:center;display:inline-flex}