:root{--bg:#0b0b0e;--surface:#141419;--surface-2:#1c1c23;--line:#26262f;--text:#ededf2;--muted:#8b8b98;--faint:#55555f;--accent:#ff6a3d;--good:#4ade80;--okay:#fbbf24;--bad:#fb7185;--radius:14px;--ease:cubic-bezier(.2, .8, .2, 1);--jp:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0}html{background:var(--bg);-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:0 0;border:0}.kana,.cell-kana,.glyph,.segmented button,.chip{font-family:var(--jp)}.app{max-width:480px;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 84px);margin:0 auto}.app.playing{padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}.view{animation:view-in .28s var(--ease) both}.segmented{grid-template-columns:repeat(var(--count), 1fr);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px;display:grid;position:relative}.segmented-thumb{width:calc((100% - 6px) / var(--count));background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);transform:translateX(calc(100% * var(--index)));transition:transform .3s var(--ease);border-radius:9px;position:absolute;inset:3px auto 3px 3px}.segmented button{height:34px;color:var(--muted);font-size:14px;transition:color .2s;position:relative}.segmented button.active{color:var(--text)}.tabs{padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(to top, var(--bg) 60%, transparent);animation:view-in .28s var(--ease) both;position:fixed;bottom:0;left:0;right:0}.tabs-inner{-webkit-backdrop-filter:blur(12px);background:#141419d9;max-width:448px;margin:0 auto}.tabs-inner button{height:40px;font-family:inherit;font-weight:500}.learn-bar{z-index:2;padding:calc(env(safe-area-inset-top) + 8px) 16px 10px;margin:0 -16px;margin-top:calc(-1 * env(safe-area-inset-top) - 12px);background:linear-gradient(to bottom, var(--bg) 75%, transparent);position:sticky;top:0}.section{margin-top:14px}.section h2{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);align-items:baseline;gap:6px;margin:0 2px 8px;font-size:12px;font-weight:600;display:flex}.section h2 span{color:var(--faint);font-weight:500}.grid{grid-template-columns:repeat(var(--cols), 1fr);gap:6px;display:grid}.cell{background:var(--surface);border:1px solid var(--line);height:58px;animation:cell-in .36s var(--ease) both;border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:1px;display:flex;position:relative}.cell.blank{background:0 0;border-color:#0000}.cell-kana{font-size:23px;line-height:1.1}.cell-romaji{color:var(--muted);font-size:11px}.cell:active{background:var(--surface-2)}@media (hover:hover){.cell:not(.blank):hover{border-color:#34343f}}.dot{border-radius:50%;width:5px;height:5px;position:absolute;top:6px;right:6px}.dot.good{background:var(--good)}.dot.okay{background:var(--okay)}.dot.weak{background:var(--bad)}.setup{flex-direction:column;gap:12px;padding-top:4px;display:flex}.level{color:var(--muted);align-items:center;gap:10px;font-size:12px;display:flex}.level-badge{background:var(--surface-2);color:var(--text);border-radius:7px;padding:3px 8px;font-weight:600}.bar{background:var(--surface-2);border-radius:2px;flex:1;height:4px;overflow:hidden}.bar span{background:var(--accent);transform-origin:0;height:100%;transition:transform .6s var(--ease);animation:grow .9s var(--ease) both;display:block}.level-xp{font-variant-numeric:tabular-nums}.panel{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);flex-direction:column;gap:14px;padding:14px;display:flex}.field{flex-direction:column;gap:8px;display:flex}.label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:600}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);height:34px;color:var(--muted);transition:background .2s, color .2s, border-color .2s, transform .16s var(--ease);border-radius:10px;padding:0 14px;font-size:14px}.chip:active{transform:scale(.95)}.chip.on{color:var(--text);background:var(--surface-2);border-color:#3a3a46}.summary{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;padding-top:12px;font-size:13px;display:flex}.summary b{color:var(--text);font-variant-numeric:tabular-nums}.primary,.secondary{border-radius:var(--radius);height:50px;transition:transform .16s var(--ease), filter .2s;font-size:16px;font-weight:600}.primary{background:var(--accent);color:#160a05}.secondary{background:var(--surface);border:1px solid var(--line)}.primary:active,.secondary:active{transform:scale(.97)}@media (hover:hover){.primary:hover{filter:brightness(1.08)}}.rules{color:var(--faint);text-align:center;font-size:12px}.weak,.missed{flex-direction:column;gap:8px;display:flex}.weak-list{flex-wrap:wrap;gap:6px;display:flex}.weak-item{background:var(--surface);border:1px solid var(--line);color:var(--muted);animation:cell-in .3s var(--ease) both;border-radius:10px;align-items:baseline;gap:6px;padding:6px 10px;font-size:12px;display:inline-flex}.weak-item .kana{color:var(--text);font-size:17px}.footer-stats{color:var(--faint);justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;display:flex}.link{color:var(--faint);padding:6px 0;font-size:12px;transition:color .2s}.link.danger{color:var(--bad)}.play{flex-direction:column;gap:10px;display:flex}.hud{grid-template-columns:1fr auto 1fr;align-items:center;height:40px;display:grid}.icon{width:36px;height:36px;color:var(--muted);border-radius:10px;place-items:center;margin-left:-6px;display:grid}.icon:active{background:var(--surface)}.icon svg{stroke:currentColor;stroke-width:2px;stroke-linecap:round;fill:none;width:20px;height:20px}.hearts{gap:6px;display:flex}.heart{width:18px;height:18px;fill:var(--bad);transition:transform .4s var(--ease), opacity .4s, fill .4s}.heart.lost{fill:var(--faint);opacity:.35;animation:heart-lose .42s var(--ease);transform:scale(.75)}.score{font-variant-numeric:tabular-nums;justify-content:flex-end;align-items:center;gap:8px;display:flex;position:relative}.score-value{animation:bump .26s var(--ease);font-size:20px;font-weight:700}.mult{color:var(--accent);animation:bump .36s var(--ease);background:#ff6a3d26;border-radius:7px;padding:2px 7px;font-size:12px;font-weight:700}.pop{color:var(--good);pointer-events:none;animation:float-up .7s var(--ease) forwards;font-size:13px;font-weight:700;position:absolute;top:-4px;right:0}.streak{background:var(--surface);border-radius:2px;height:3px;overflow:hidden}.streak span{background:var(--accent);transform-origin:0;height:100%;transition:transform .3s var(--ease);display:block}.streak span.max{background:linear-gradient(90deg, var(--accent), var(--okay), var(--accent));background-size:200% 100%;animation:1.6s linear infinite shimmer}.card{background:var(--surface);border:1px solid var(--line);height:210px;animation:card-in .3s var(--ease) both;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin-top:4px;transition:border-color .2s,box-shadow .2s;display:flex}.glyph{font-size:104px;font-weight:500;line-height:1}.answer{height:22px;color:var(--bad);white-space:pre;font-size:18px;font-weight:600}.card.right{animation:card-right .34s var(--ease) both;border-color:#4ade8080;box-shadow:0 0 0 4px #4ade8014}.card.wrong{animation:shake .42s var(--ease);border-color:#fb718580;box-shadow:0 0 0 4px #fb718514}.card.wrong .answer{animation:view-in .24s var(--ease) both}.answer-form{gap:8px;display:flex}.answer-input{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);min-width:0;height:52px;color:var(--text);letter-spacing:.04em;text-align:center;outline:none;flex:1;padding:0 16px;font:600 20px/1 system-ui,-apple-system,sans-serif;transition:border-color .2s,color .2s}.answer-input::placeholder{color:var(--faint);font-weight:400}.answer-input:focus{border-color:#3a3a46}.answer-input.right{color:var(--good);border-color:#4ade8099}.answer-input.wrong{color:var(--bad);border-color:#fb718599;text-decoration:line-through}.skip{border-radius:var(--radius);border:1px solid var(--line);width:72px;color:var(--muted);transition:transform .16s var(--ease);font-size:14px}.skip:active{transform:scale(.95)}.hint{text-align:center;color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px}.over{flex-direction:column;gap:16px;padding-top:12px;display:flex}.over-score{flex-direction:column;align-items:center;gap:4px;padding:20px 0 8px;display:flex}.over-label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:12px}.over-value{font-variant-numeric:tabular-nums;font-size:64px;font-weight:800;line-height:1}.badges{gap:6px;min-height:24px;margin-top:8px;display:flex}.badge{background:var(--surface);color:var(--muted);animation:badge-in .5s .6s var(--ease) both;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600}.badge.best{color:var(--accent);background:#ff6a3d26}.badge.up{color:var(--good);background:#4ade801f}.over-stats{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.over-stats div{background:var(--surface);border:1px solid var(--line);animation:cell-in .36s var(--ease) both;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;display:flex}.over-stats div:nth-child(2){animation-delay:60ms}.over-stats div:nth-child(3){animation-delay:.12s}.over-stats b{font-variant-numeric:tabular-nums;font-size:20px}.over-stats span{color:var(--muted);font-size:11px}.over-actions{grid-template-columns:1fr 2fr;gap:8px;margin-top:4px;display:grid}@keyframes view-in{0%{opacity:0;transform:translateY(6px)}}@keyframes cell-in{0%{opacity:0;transform:scale(.92)}}@keyframes card-in{0%{opacity:0;transform:translateY(10px)scale(.97)}}@keyframes card-right{40%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes shake{15%,85%{transform:translate(-2px)}30%,70%{transform:translate(5px)}45%,60%{transform:translate(-6px)}}@keyframes bump{40%{transform:scale(1.18)}}@keyframes float-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-22px)}}@keyframes heart-lose{0%{opacity:1;fill:var(--bad);transform:scale(1)}40%{transform:scale(1.3)}}@keyframes grow{0%{transform:scaleX(0)}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes badge-in{0%{opacity:0;transform:translateY(6px)scale(.9)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}