@font-face{font-family:KleeKana;src:url(/fonts/KleeOne-SemiBold-kana.woff2)format("woff2");font-weight:600;font-display:block}:root{--washi:#f3ecdc;--washi-deep:#e9dfc9;--paper:#fbf7ee;--sumi:#2d2b28;--sumi-soft:#5d5850;--sumi-faint:#a39c90;--shu:#c9624a;--shu-soft:#f2d5c9;--wakakusa:#8eab6c;--wakakusa-soft:#dfe8cf;--ai:#5f7f9c;--ai-soft:#d8e2ea;--yamabuki:#e2b75a;--yamabuki-soft:#f6e6bd;--radius:28px;--shadow:0 2px 0 #3c2d140f, 0 10px 28px #3c2d141a;--gutter:max(20px, env(safe-area-inset-left), env(safe-area-inset-right));color:var(--sumi);background:var(--washi);-webkit-text-size-adjust:100%;font-family:Hiragino Maru Gothic ProN,Hiragino Sans,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(ellipse at 20% 10%, #ffffff8c, transparent 55%), radial-gradient(ellipse at 85% 90%, #d6c4a040, transparent 60%), var(--washi);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}img{-webkit-user-drag:none;pointer-events:none}.kana-font,.kana-glyph{font-family:KleeKana,Hiragino Mincho ProN,serif;font-weight:600}.icon{fill:none;stroke:currentColor;stroke-width:4.2px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.icon .fill{fill:currentColor;stroke:none}.screen{height:100dvh;padding:max(16px, env(safe-area-inset-top)) var(--gutter) max(16px, env(safe-area-inset-bottom));flex-direction:column;animation:.35s ease-out fade-in;display:flex}@keyframes fade-in{0%{opacity:0}}.message{color:var(--sumi-soft);justify-content:center;align-items:center;gap:32px;font-size:40px}.message p{margin:0}.loading{animation:1.6s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.45}}.topbar{flex:none;justify-content:space-between;align-items:center;gap:16px;height:92px;display:flex}.topbar-spacer{width:84px}.round-button{background:var(--paper);width:84px;height:84px;color:var(--sumi);box-shadow:var(--shadow);border-radius:50%;flex:none;padding:18px;transition:transform .12s}.round-button:active,.nav-button:active,.read-button:active,.listen-button:active,.home-button:active,.next-button:active{transform:scale(.95)}.home{justify-content:center;align-items:center;gap:5vh}.home-title{letter-spacing:.12em;color:var(--sumi);margin:0;font-size:clamp(56px,11vh,96px);font-weight:600}.home-buttons{gap:5vw;width:min(100%,900px);display:flex}.home-button{aspect-ratio:1.15;background:var(--paper);max-height:52vh;box-shadow:var(--shadow);border:3px solid #0000;border-radius:40px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3vh;transition:transform .12s;display:flex}.home-button--cards{border-color:var(--ai-soft)}.home-button--play{border-color:var(--wakakusa-soft)}.home-button-art{justify-content:center;align-items:center;gap:10px;height:46%;display:flex}.home-button-label{letter-spacing:.08em;font-size:clamp(36px,6.4vh,52px)}.mini-card{aspect-ratio:.78;background:var(--washi);border:3px solid var(--ai);height:100%;color:var(--sumi);border-radius:18px;place-items:center;font-size:clamp(60px,13vh,110px);display:grid;transform:rotate(-4deg)}.mini-choice{aspect-ratio:1;background:var(--washi);width:clamp(56px,10vh,84px);color:var(--sumi-soft);border-radius:16px;place-items:center;font-size:clamp(36px,7vh,58px);display:grid}.mini-choice--on{background:var(--wakakusa-soft);color:var(--sumi);outline:4px solid var(--wakakusa);transform:translateY(-8px)}.credit{bottom:max(10px, env(safe-area-inset-bottom));left:var(--gutter);right:var(--gutter);text-align:center;color:var(--sumi-faint);font-size:11px;line-height:1.6;position:absolute}.card-picture{aspect-ratio:1;border-radius:var(--radius);background:var(--paper);max-width:54vw;height:100%;box-shadow:var(--shadow);flex:none;margin:0;overflow:hidden}.card-picture img{object-fit:cover;width:100%;height:100%;animation:.3s ease-out fade-in;display:block}.mode-toggle{background:var(--washi-deep);border-radius:999px;padding:6px;display:flex}.mode-toggle button{min-width:150px;height:72px;color:var(--sumi-soft);border-radius:999px;padding:0 24px;font-size:34px;transition:background .2s,color .2s}.mode-toggle button.is-on{background:var(--paper);color:var(--sumi);box-shadow:0 2px 8px #3c2d141f}.card-body,.play-body{flex:1;align-items:center;gap:4vw;min-height:0;padding-top:12px;display:flex}.card-side,.play-side{flex-direction:column;flex:1;justify-content:space-between;align-items:center;gap:16px;min-width:0;height:100%;display:flex;container-type:inline-size}.word-tiles{--size:min(calc(92cqw / var(--n) - 6px), 36vh);flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.word-tiles--split{--size:min(calc((92cqw - 4cqw * (var(--n) - 1)) / var(--n)), 32vh);gap:4cqw}.kana-tile{width:var(--size);height:calc(var(--size) * 1.2);color:var(--sumi);border-radius:22px;place-items:center;transition:background .25s,color .25s,gap .3s,transform .15s;display:grid}.kana-glyph{font-size:calc(var(--size) * .86);line-height:1}.word-tiles--split .kana-tile{background:var(--paper);box-shadow:var(--shadow);height:calc(var(--size) * 1.1)}.kana-tile:active{transform:scale(.96)}.kana-tile.is-active{background:var(--shu-soft);color:var(--shu)}.read-button{background:var(--ai);width:112px;height:112px;color:var(--paper);box-shadow:var(--shadow);border-radius:50%;flex:none;padding:24px;transition:transform .12s,background .2s}.read-button.is-active{background:var(--shu)}.nav-buttons{flex:none;justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}.nav-button{background:var(--paper);width:min(42%,220px);height:112px;color:var(--sumi);box-shadow:var(--shadow);border-radius:999px;padding:22px;transition:transform .12s}.card-count{color:var(--sumi-faint);white-space:nowrap;font-size:18px}.listen-button{background:var(--paper);height:84px;box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:12px;padding:0 32px 0 22px;font-size:32px;transition:transform .12s;display:flex}.listen-button .icon{width:52px;height:52px;color:var(--ai)}.card-picture.is-solved{animation:.6s ease-out soft-bounce}@keyframes soft-bounce{30%{transform:scale(1.03)rotate(-.6deg)}60%{transform:scale(.99)}}.answer-word{height:clamp(70px,14vh,120px);color:var(--sumi-soft);opacity:0;flex:none;align-items:center;gap:.05em;font-size:clamp(56px,11vh,96px);transition:opacity .4s,transform .4s;display:flex;transform:translateY(8px)}.answer-word.is-shown{opacity:1;transform:none}.answer-word .is-target{color:var(--shu)}.choices{--size:min(calc((100cqw - 8cqw) / 3), 34vh);flex:1;justify-content:center;align-items:center;gap:4cqw;width:100%;min-height:0;display:flex}.choice{width:var(--size);height:var(--size);background:var(--paper);box-shadow:var(--shadow);color:var(--sumi);border-radius:28px;place-items:center;transition:opacity .4s,background .3s,transform .15s;animation:.35s ease-out backwards rise;display:grid;position:relative}.choice:nth-child(2){animation-delay:60ms}.choice:nth-child(3){animation-delay:.12s}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}.choice .kana-glyph{font-size:calc(var(--size) * .72)}.choice:active{transform:scale(.96)}.choice.is-wrong{opacity:.32;transform:scale(.94)}.choice.is-correct{background:var(--wakakusa-soft);animation:.5s ease-out pop}@keyframes pop{40%{transform:scale(1.1)}}.choice.is-hint{animation:1.6s ease-in-out infinite glow}@keyframes glow{50%{background:var(--yamabuki-soft);box-shadow:0 0 0 8px var(--yamabuki-soft), var(--shadow)}}.hanamaru{fill:none;width:124%;height:124%;stroke:var(--shu);stroke-width:4px;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320px;opacity:.85;pointer-events:none;animation:.7s ease-out .1s forwards draw;position:absolute;inset:-12%}@keyframes draw{to{stroke-dashoffset:0}}.next-area{flex:none;justify-content:center;align-items:center;height:112px;display:flex}.next-button{background:var(--paper);height:104px;color:var(--sumi);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:8px;padding:0 28px 0 44px;font-size:38px;transition:transform .12s,background .3s;animation:.3s ease-out fade-in;display:flex}.next-button .icon{width:56px;height:56px}.next-button.is-ready{background:var(--wakakusa);color:var(--paper)}@media (orientation:portrait){.card-body,.play-body{flex-direction:column;gap:3vh}.card-picture{width:min(100%,42vh);max-width:none;height:auto}.card-side,.play-side{flex:1;width:100%;height:auto;min-height:0}.word-tiles{--size:min(calc(80cqw / var(--n)), 16vh)}.word-tiles--split{--size:min(calc((80cqw - 4cqw * (var(--n) - 1)) / var(--n)), 15vh)}.choices{--size:min(calc((100cqw - 8cqw) / 3), 18vh)}.answer-word{height:9vh;font-size:7vh}.home-buttons{flex-direction:column;width:min(100%,520px)}.home-button{aspect-ratio:1.6;max-height:30vh}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
