@font-face{font-family:Zen Old Mincho;src:url(/f/zen-old-mincho.nagi.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:IBM Plex Sans;src:url(/f/plex-sans-latin.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}:root{--font-kana: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;--font-ui: "IBM Plex Sans", "Zen Old Mincho", -apple-system, BlinkMacSystemFont, sans-serif;--t-glyph: clamp(11rem, 64vw, 22rem);--t-glyph-short: clamp(5rem, 30vh, 9rem);--t-glyph-sm: clamp(2.75rem, 14vw, 4rem);--t-glyph-lookup: clamp(7rem, 40vw, 11rem);--t-glyph-chart: clamp(1.5rem, 6.2vw, 1.75rem);--t-lead: clamp(1.25rem, 5.4vw, 1.5rem);--t-romaji: clamp(.9375rem, 4vw, 1.125rem);--t-voice: 1.75rem;--t-seal: 1.25rem;--t-ui: .8125rem;--lh-glyph: 1;--lh-lead: 1.3;--lh-ui: 1.55;--track-romaji: .18em;--track-ui: .02em;--ma-1: 4px;--ma-2: 8px;--ma-3: 12px;--ma-4: 20px;--ma-5: 32px;--ma-6: 52px;--ma-7: 84px;--ma-8: 136px;--rule-w: .5px;--rule-focus-w: 2px;--viewport-min: 320px;--content-edge-gap: 48px;--tojisen-inset: 20px;--tick-w: 14px;--tick-h: 2px;--mark-size: 12px;--target: 48px;--target-wide: 120px;--row-deck: 64px;--row-setting: 68px;--voice-target-h: 88px;--voice-rule-w: 96px;--thumb-height: 240px;--thumb-reveal-height: 144px;--glyph-baseline: 46vh;--romaji-offset: 32px;--swipe-threshold: 96px;--edge-guard: 32px;--seal-size: 30px;--empty-rule-w: 96px;--grain-size: 180px;--chart-row: 40px;--chart-footer-height: 152px;--dur-reveal: .26s;--dur-enter: .28s;--dur-exit: .17s;--dur-mark: .2s;--dur-seal: .34s;--delay-grade: 60ms;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-settle: cubic-bezier(.16, 1, .3, 1);--rise: 8px}[data-theme=light]{--ground: oklch(94.5% .012 92);--ink: oklch(21% .009 265);--ink-romaji: color-mix(in oklab, var(--ink) 72%, transparent);--ink-chrome: color-mix(in oklab, var(--ink) 65%, transparent);--ink-quiet: color-mix(in oklab, var(--ink) 40%, transparent);--rule: color-mix(in oklab, var(--ink) 20%, transparent);--rule-control: color-mix(in oklab, var(--ink) 55%, transparent);--shu: oklch(58% .185 33);--shu-text: oklch(48% .17 33)}[data-theme=dark]{--ground: oklch(16% .012 265);--ink: oklch(90% .014 92);--ink-romaji: color-mix(in oklab, var(--ink) 72%, transparent);--ink-chrome: color-mix(in oklab, var(--ink) 55%, transparent);--ink-quiet: color-mix(in oklab, var(--ink) 40%, transparent);--rule: color-mix(in oklab, var(--ink) 22%, transparent);--rule-control: color-mix(in oklab, var(--ink) 45%, transparent);--shu: oklch(66% .155 33);--shu-text: var(--shu)}@supports not (height: .5px){:root{--rule-w: 1px}}@media(max-height:680px){:root{--t-glyph: var(--t-glyph-short)}}@media(prefers-reduced-motion:reduce){:root{--dur-enter: .12s;--dur-exit: .1s;--dur-reveal: .12s;--dur-mark: 1ms;--dur-seal: .12s;--rise: 0px}}@media(prefers-contrast:more){[data-theme=light]{--ink: oklch(13% .008 265);--rule: color-mix(in oklab, var(--ink) 34%, transparent);--rule-control: color-mix(in oklab, var(--ink) 60%, transparent);--ink-chrome: var(--ink);--shu: var(--shu-text)}[data-theme=dark]{--ink: oklch(97% .01 92)}}:root{font-family:var(--font-ui);color:var(--ink);background:var(--ground);font-synthesis:none}*{box-sizing:border-box}html{min-width:var(--viewport-min);min-height:100%;background:var(--ground)}body{min-width:var(--viewport-min);min-height:100vh;margin:0;background:var(--ground);color:var(--ink)}body:before{content:"";position:fixed;inset:0;z-index:9;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");background-size:var(--grain-size);opacity:.028;mix-blend-mode:multiply}[data-theme=dark] body:before{opacity:.04;mix-blend-mode:screen}button{color:inherit;font:inherit;letter-spacing:inherit;appearance:none;border:0;padding:0;background:transparent}button:not(:disabled){cursor:pointer}:where(button,[role=radio]):focus-visible{outline:none}.control{text-decoration:underline;text-decoration-color:var(--rule-control);text-decoration-thickness:var(--rule-w);text-underline-offset:var(--ma-2);transition:text-decoration-color var(--dur-mark) var(--ease-out)}.control:active{text-decoration-color:var(--ink);text-decoration-thickness:var(--rule-focus-w)}.control[disabled]{color:var(--ink-quiet);text-decoration-color:var(--rule)}.chart-cell,.starred-glyph,.star,.voice__choice,.chart-section__button{text-decoration:none}.control:focus-visible{text-decoration-line:underline;text-decoration-thickness:var(--rule-focus-w);text-underline-offset:var(--ma-1)}.chart-cell:focus-visible,.starred-glyph:focus-visible,.star:focus-visible,.voice__choice:focus-visible,.chart-section__button:focus-visible{text-decoration-line:none}.sr-only{position:absolute;width:var(--rule-w);height:var(--rule-w);padding:0;margin:calc(var(--rule-w) * -1);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{position:relative;min-height:100vh;letter-spacing:var(--track-ui)}.screen{min-height:100vh;width:calc(100% - env(safe-area-inset-right) - var(--content-edge-gap));padding:calc(env(safe-area-inset-top) + var(--ma-6)) var(--ma-4) calc(env(safe-area-inset-bottom) + var(--ma-6))}.screen-title{margin:0;color:var(--ink-chrome);font-size:var(--t-ui);font-weight:400;line-height:var(--lh-ui)}.rule{position:relative;height:var(--rule-w);background:linear-gradient(90deg,transparent 0,var(--rule) 6%,var(--rule) 94%,transparent 100%)}.rule--v{width:var(--rule-w);height:100%;background:linear-gradient(180deg,transparent 0,var(--rule) 4%,var(--rule) 96%,transparent 100%)}.control:focus-visible .rule{height:var(--rule-focus-w);background:var(--ink);transform:scaleX(1.06);transition:transform var(--dur-mark) var(--ease-out)}.control:focus-visible .rule:before{content:"";position:absolute;left:0;width:var(--tick-w);height:var(--tick-h);background:var(--shu-text)}.tojisen{position:fixed;right:calc(env(safe-area-inset-right) + var(--tojisen-inset));top:calc(env(safe-area-inset-top) + var(--ma-6));bottom:calc(env(safe-area-inset-bottom) + var(--ma-6));z-index:10;pointer-events:none}.tojisen__tick{position:absolute;left:calc((var(--tick-w) - var(--rule-w)) / -2);width:var(--tick-w);height:var(--tick-h);background:var(--shu);transition:top var(--dur-mark) var(--ease-out)}.tojisen--starred .rule--v{background:var(--shu)}.review{overflow:hidden;overscroll-behavior-y:contain}.review__field{position:absolute;inset:0 var(--content-edge-gap) var(--thumb-height) 0;touch-action:none}.review__glyph-wrap{position:absolute;left:50%;top:var(--glyph-baseline);max-width:100%;transform:translate(-50%,-100%)}.review__glyph{display:inline-block;max-inline-size:100%;margin:0;color:var(--ink);font-family:var(--font-kana);font-size:var(--t-glyph);font-weight:400;line-height:var(--lh-glyph);opacity:1;transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}.review__glyph--masked{opacity:0}.review__romaji{position:absolute;left:0;top:calc(100% + var(--romaji-offset));margin:0;color:var(--ink-romaji);font-size:var(--t-romaji);line-height:var(--lh-ui);letter-spacing:var(--track-romaji);text-align:left;opacity:0;transition:opacity var(--dur-reveal) var(--ease-out)}.review__romaji--visible{opacity:1}.review__thumb{position:absolute;left:0;right:var(--content-edge-gap);bottom:env(safe-area-inset-bottom);height:var(--thumb-height);touch-action:none}.review__thumb>.rule{position:absolute;top:calc(var(--thumb-height) - var(--thumb-reveal-height));left:var(--ma-4);right:var(--ma-4)}.ink-fill{position:absolute;inset:0;z-index:0}.review__drag{position:absolute;top:calc(var(--thumb-height) - var(--thumb-reveal-height));left:50%;width:50%;height:var(--tick-h);background:var(--shu);transform-origin:left;transform:scaleX(var(--drag-scale))}.reveal{position:absolute;inset:calc(var(--thumb-height) - var(--thumb-reveal-height)) 0 var(--target);z-index:1;min-height:var(--target);color:var(--ink-chrome);font-size:var(--t-ui);transition:opacity var(--dur-exit) var(--ease-out)}.reveal--hidden{opacity:0;pointer-events:none}.grading{position:absolute;inset:calc(var(--thumb-height) - var(--thumb-reveal-height)) 0 var(--target);z-index:1;display:flex;align-items:flex-start;justify-content:space-between;padding:0 var(--ma-4);opacity:0;transform:translateY(var(--rise));pointer-events:none;transition:opacity var(--dur-enter) var(--ease-out) var(--delay-grade),transform var(--dur-enter) var(--ease-out) var(--delay-grade)}.grading--visible{opacity:1;transform:translateY(0);pointer-events:auto}.grade{min-width:var(--target-wide);min-height:var(--target);color:var(--ink-chrome);font-size:var(--t-ui)}.grade--known{text-align:right}.grade--again{text-align:left}.star{position:relative;min-width:var(--target);min-height:var(--target)}.star__mark{position:absolute;left:50%;top:0;width:var(--mark-size);height:var(--mark-size);overflow:visible;fill:transparent;stroke:var(--shu);stroke-width:var(--rule-w);transform:translate(-50%)}.star[aria-pressed=true] .star__mark{fill:var(--shu)}.review__aux{position:absolute;left:var(--ma-4);top:calc(env(safe-area-inset-top) + var(--ma-6));display:flex;gap:var(--ma-5);color:var(--ink-chrome);font-size:var(--t-ui)}.review__aux button{min-height:var(--target)}.chart.screen{width:calc(100% - env(safe-area-inset-right) - var(--content-edge-gap));padding:calc(env(safe-area-inset-top) + var(--ma-4)) 0 calc(env(safe-area-inset-bottom) + var(--chart-footer-height) + var(--ma-6))}.chart-title{display:flex;gap:var(--ma-3);margin:0 var(--ma-4);color:var(--ink-chrome);font-size:var(--t-ui);font-weight:400;line-height:var(--lh-ui)}.chart-section{margin-top:var(--ma-6)}.chart-title+.chart-section{margin-top:var(--ma-3)}.chart-section__heading{display:flex;align-items:center;min-height:var(--chart-row);gap:var(--ma-4);padding:0 var(--ma-4)}.chart-section__heading h2{flex:none;margin:0;font-size:var(--t-ui);font-weight:400}.chart-section__button{display:flex;gap:var(--ma-1);min-height:var(--chart-row);align-items:center;color:var(--ink-chrome)}.chart-section__heading>.rule{flex:1}.chart-grid{display:grid;grid-template-columns:repeat(var(--chart-columns),1fr);width:100%;margin:0;padding:0;list-style:none}.chart-item{min-width:0;height:var(--chart-row)}.chart-cell{display:flex;align-items:center;justify-content:center;width:100%;height:var(--chart-row);gap:var(--ma-1)}.chart-cell__glyph-block{display:inline-flex;flex:none;flex-direction:column;align-items:stretch}.chart-cell__glyph{font-family:var(--font-kana);font-size:var(--t-glyph-chart);line-height:.92}.chart-cell__romaji{align-self:flex-end;color:var(--ink-romaji);font-size:.625rem;letter-spacing:.04em;line-height:1}.mastery-rule{display:block;width:100%;margin-top:var(--ma-1)}.mastery-mark{position:absolute;top:-6px;left:var(--mastery-position);width:var(--mark-size);height:var(--mark-size);overflow:visible;fill:none;stroke:var(--shu);stroke-width:var(--tick-h);transform:translate(-50%);transition:left var(--dur-mark) var(--ease-out)}.mastery-mark--quiet{stroke:var(--ink-quiet);opacity:.55}.mastery-mark--ring{stroke-width:var(--rule-w)}.mastery-mark--disc{fill:var(--shu);stroke-width:var(--rule-w)}.chart-footer{position:fixed;left:max(var(--ma-4),calc(50% - 195px + var(--ma-4)));right:max(calc(var(--content-edge-gap) + var(--ma-4)),calc(50% - 195px + var(--content-edge-gap) + var(--ma-4)));bottom:0;z-index:8;min-height:var(--chart-footer-height);padding-bottom:calc(env(safe-area-inset-bottom) + var(--ma-4));background:var(--ground)}.chart-footer__actions{display:flex;align-items:center;min-height:var(--target);color:var(--ink-chrome);font-size:var(--t-ui)}.chart-footer__actions button{min-width:var(--target);min-height:var(--target)}.chart-footer__actions .rule{flex:1;margin:0 var(--ma-3)}.option__mark{position:absolute;top:calc(var(--mark-size) / -2);left:var(--option-position);width:var(--tick-h);height:var(--mark-size);background:var(--shu);transition:left var(--dur-mark) var(--ease-out)}.deck-actions{position:absolute;left:var(--ma-4);right:calc(var(--content-edge-gap) + var(--ma-4));bottom:calc(env(safe-area-inset-bottom) + var(--ma-6))}.option-rule{display:flex;align-items:center;justify-content:space-between;min-height:var(--target);color:var(--ink-chrome);font-size:var(--t-ui)}.option-rule .rule{flex:1;margin:0 var(--ma-4)}.option-rule>button{min-height:var(--target)}.option__mark{left:var(--option-position)}.commit{width:100%;min-height:var(--target);color:var(--ink-chrome);font-size:var(--t-ui)}.settings{overflow-y:auto}.settings-list{margin-top:var(--ma-5);padding-bottom:calc(var(--thumb-height) + var(--ma-6))}.setting{display:flex;align-items:center;min-height:var(--row-setting);gap:var(--ma-4)}.setting__label{flex:none;color:var(--ink-chrome);font-size:var(--t-ui)}.setting__options{position:relative;display:flex;align-items:center;flex:1;min-height:var(--target)}.setting__options .rule{position:absolute;left:0;right:0}.setting__option{position:relative;z-index:1;flex:1;min-height:var(--target);color:var(--ink-chrome);font-size:var(--t-ui)}.setting__option[aria-checked=true]:after{content:"";position:absolute;left:50%;top:calc(50% - var(--mark-size) / 2);width:var(--tick-h);height:var(--mark-size);background:var(--shu)}.setting__quiet{margin-left:auto;color:var(--ink-quiet);font-size:var(--t-ui)}.voice{margin-top:var(--ma-5)}.voice__specimen{display:flex;align-items:center;justify-content:space-around;min-height:var(--voice-target-h)}.voice__choice{min-width:var(--target);min-height:var(--voice-target-h);color:var(--ink);font-family:var(--font-kana);font-size:var(--t-voice)}.voice__specimen .rule{width:var(--voice-rule-w)}.voice__hint{margin:0;color:var(--ink-quiet);font-size:var(--t-ui);text-align:center}.starred-flow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--ma-5);margin-top:var(--ma-6)}.starred-glyph{position:relative;min-width:var(--target);min-height:var(--target);color:var(--ink);font-family:var(--font-kana);font-size:var(--t-glyph-sm);line-height:var(--lh-glyph)}.starred-glyph .mastery-rule{width:100%}.empty{position:absolute;top:45%;left:var(--ma-4);right:calc(var(--content-edge-gap) + var(--ma-4));text-align:center}.empty .rule{width:var(--empty-rule-w);margin:0 auto var(--ma-5)}.empty p{color:var(--ink-chrome);font-size:var(--t-romaji)}.complete__stats{position:absolute;left:var(--ma-4);bottom:calc(var(--thumb-height) + var(--ma-6));width:var(--target-wide);color:var(--ink-chrome);font-size:var(--t-ui)}.complete__stats p{margin:var(--ma-4) 0}.seal{position:absolute;right:calc(var(--content-edge-gap) + var(--ma-4));bottom:calc(var(--thumb-height) + var(--ma-6));display:grid;place-items:center;width:var(--seal-size);height:var(--seal-size);border:var(--rule-w) solid var(--shu);color:var(--shu-text);font-family:var(--font-kana);font-size:var(--t-seal);animation:seal-in var(--dur-seal) var(--ease-settle)}@keyframes seal-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.review__glyph,.review__romaji,.grading,.tojisen__tick,.mastery-mark,.option__mark{transition-timing-function:linear}.seal{animation-name:seal-fade}@keyframes seal-fade{0%{opacity:0}to{opacity:1}}}@media(prefers-contrast:more){body:before{display:none}}@media(min-width:768px){.app{width:390px;margin-inline:auto}.tojisen{right:calc(50% - 195px + var(--tojisen-inset))}}@media(forced-colors:active){body:before{display:none}:focus-visible{outline:var(--rule-focus-w) solid Highlight;outline-offset:var(--ma-1)}.tojisen__tick,.option__mark{forced-color-adjust:none;background:Highlight}.mastery-mark{forced-color-adjust:none;stroke:Highlight}.star__mark{forced-color-adjust:auto}}.lookup{display:flex;flex-direction:column}.lookup__field{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ma-5);padding-bottom:var(--ma-8)}.lookup__glyph{font-family:var(--font-kana);font-size:var(--t-glyph-lookup);line-height:var(--lh-glyph);color:var(--ink)}.lookup__romaji{font-size:var(--t-romaji);letter-spacing:.18em;color:var(--ink-romaji)}.lookup__actions{position:absolute;left:var(--ma-4);right:calc(var(--content-edge-gap) + var(--ma-4));bottom:calc(env(safe-area-inset-bottom) + var(--ma-6));display:flex;flex-direction:column;gap:var(--ma-4)}.lookup__replay{min-width:var(--target)}
