.kana-cell-dual{aspect-ratio:.85;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:10px;padding:var(--space-xs);position:relative;transition:background .25s ease,transform .3s var(--ease-quart),box-shadow .25s ease;animation:cell-reveal .55s var(--ease-expo) both;animation-delay:calc(var(--row, 0) * .04s + var(--col, 0) * 25ms)}.kana-cell-dual.empty{pointer-events:none;animation:none}.kana-cell-dual:not(.empty):hover{background:var(--bg-surface);transform:scale(1.06)}.kana-cell-dual:not(.empty):active{transform:scale(.97);transition-duration:.1s}.kana-cell-dual:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.kana-cell-dual.has-animation{cursor:pointer}.kana-cell-dual.has-animation:after{content:"";position:absolute;bottom:5px;right:6px;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.4;transition:opacity .25s ease,transform .25s var(--ease-quart);pointer-events:none}.kana-cell-dual.has-animation:hover:after{opacity:.85;transform:scale(1.3)}.kana-cell-dual__hiragana{font-family:var(--font-kana);font-size:clamp(1.2rem,3.6vw,1.5rem);line-height:1;text-shadow:0 0 1px oklch(.22 .015 50 / .08)}.kana-cell-dual__katakana{font-family:var(--font-ui);font-size:clamp(.7rem,2vw,.85rem);line-height:1;color:var(--ink-soft)}.kana-cell-dual__romaji{font-family:var(--font-display);font-size:clamp(.55rem,1.4vw,.6rem);font-weight:400;color:var(--ink-faint);letter-spacing:.04em;margin-top:1px}@keyframes cell-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.kana-cell-dual{animation:none}.kana-cell-dual:not(.empty):hover{transform:none}}@media(max-width:420px){.kana-grid,.vowel-labels{gap:var(--space-xs)}}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;backface-visibility:hidden;overflow:hidden}.kana-player{display:flex;flex-direction:column;align-items:center;gap:var(--space-ms)}.kana-player__canvas{position:relative;width:120px;height:120px;background:#f1eadf;border-radius:12px;display:flex;align-items:center;justify-content:center}.kana-player__svg-host{width:90px;height:90px;display:flex;align-items:center;justify-content:center}.kana-player__svg-host svg[data-strokesvg]{width:100%;height:100%;display:block;overflow:visible;--shadow: oklch(.83 .008 75);--stroke: oklch(.18 .015 50)}.kana-player__svg-host svg[data-strokesvg]>g[data-strokesvg=strokes]>*{--time: .78s;--gap: .46s;--delay: .22s;animation:kana-stroke-draw var(--time) linear forwards calc(var(--i) * var(--gap) + var(--delay));stroke-dasharray:3333;stroke-dashoffset:3333}@keyframes kana-stroke-draw{to{stroke-dashoffset:0}}.kana-player__stroke-counter{position:absolute;bottom:6px;right:8px;font-family:var(--font-display);font-size:.6rem;color:var(--ink-faint)}.kana-player__replay-btn{min-height:44px;background:none;border:1.5px solid var(--border);border-radius:8px;padding:var(--space-sm) var(--space-lg);font-family:var(--font-display);font-size:.75rem;color:var(--ink-soft);cursor:pointer;letter-spacing:.04em;transition:border-color .2s ease,color .2s ease}.kana-player__replay-btn:hover{border-color:var(--accent);color:var(--ink)}@media(prefers-reduced-motion:reduce){.kana-player__svg-host svg[data-strokesvg]>g[data-strokesvg=strokes]>*{animation:none;stroke-dashoffset:0}}@media(max-width:420px){.kana-player__canvas{width:100px;height:100px}.kana-player__svg-host{width:76px;height:76px}}@media(max-height:700px){.kana-player{flex:1;min-height:0}.kana-player__canvas{width:auto;height:auto;flex:1;min-height:0;aspect-ratio:1;border-radius:10px}.kana-player__svg-host{width:75%;height:75%}.kana-player__replay-btn{flex-shrink:0;padding:var(--space-xs) var(--space-md);font-size:.7rem}}.stroke-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:color-mix(in oklch,var(--bg) 92%,white 8%);display:flex;flex-direction:column;align-items:center;padding:var(--space-xs) var(--space-md);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;animation:overlay-fade-in .25s ease both}.stroke-overlay::-webkit-scrollbar{display:none}.stroke-overlay__dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:396px;margin-block:auto;overflow:visible;animation:overlay-card-in .3s var(--ease-expo) both}.stroke-overlay__close{position:absolute;top:var(--space-lg);right:var(--space-lg);z-index:4;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in oklch,var(--border) 78%,white 22%);background:color-mix(in oklch,var(--bg) 90%,white 10%);cursor:pointer;color:var(--ink-faint);border-radius:50%;box-shadow:0 8px 18px color-mix(in oklch,var(--ink) 5%,transparent);transition:background .15s ease,color .15s ease,transform .15s ease}.stroke-overlay__close:hover{background:color-mix(in oklch,var(--bg) 84%,white 16%);color:var(--ink);transform:translateY(-1px)}.stroke-overlay__close:active{transform:translateY(0)}.stroke-overlay__body{padding:var(--space-md) var(--space-md) var(--space-sm)}.stroke-overlay__deck{position:relative}.stroke-overlay__swiper{position:relative;z-index:1;overflow:visible}.stroke-overlay__swiper .swiper-wrapper,.stroke-overlay__swiper .swiper-slide{overflow:visible}.stroke-overlay__swiper .swiper-slide{display:flex;height:auto}.stroke-overlay__slide-surface{width:100%;border-radius:26px;background:linear-gradient(180deg,#fefdfa,#f8f5f1);border:1px solid color-mix(in oklch,var(--border) 76%,white 24%);box-shadow:0 10px 18px color-mix(in oklch,var(--ink) 5%,transparent);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease,filter .2s ease}.stroke-overlay__slide-surface.is-active{box-shadow:0 18px 38px color-mix(in oklch,var(--ink) 8%,transparent),0 2px 8px color-mix(in oklch,var(--ink) 4%,transparent)}.stroke-overlay__swiper .swiper-slide.swiper-slide-prev .stroke-overlay__slide-surface,.stroke-overlay__swiper .swiper-slide.swiper-slide-next .stroke-overlay__slide-surface{box-shadow:0 4px 12px color-mix(in oklch,var(--ink) 4%,transparent);filter:saturate(.98)}.stroke-overlay__swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) .stroke-overlay__slide-surface{opacity:0;box-shadow:none;border-color:transparent;filter:none}.stroke-overlay__card-content{padding:var(--space-lg) var(--space-md) var(--space-md)}.stroke-overlay__card-content--placeholder{min-height:360px}.stroke-overlay__card-placeholder{min-height:320px;border-radius:18px;background:linear-gradient(180deg,color-mix(in oklch,var(--bg) 84%,white 16%),color-mix(in oklch,var(--bg) 92%,white 8%));border:1px dashed color-mix(in oklch,var(--border) 66%,white 34%)}.stroke-overlay__romaji{font-family:var(--font-display);font-size:.75rem;color:var(--ink-faint);letter-spacing:.08em;margin-bottom:var(--space-md)}.stroke-overlay__player-section{margin-bottom:var(--space-md)}.stroke-overlay__kana-label{font-family:var(--font-display);font-size:.65rem;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}.stroke-overlay__kana-char{font-family:var(--font-kana);font-size:3rem;line-height:1;margin-bottom:var(--space-sm)}.stroke-overlay__divider{height:1px;background:var(--border);margin:var(--space-ms) 0}.stroke-overlay__no-data{padding:var(--space-2xl) 0;color:var(--ink-faint);font-size:.85rem;text-align:center}.stroke-overlay__retry-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--accent);font-size:.85rem;font-family:var(--font-ui);cursor:pointer;min-height:44px;min-width:44px;transition:background .15s ease}.stroke-overlay__retry-btn:hover{background:#c9302d14}.stroke-overlay__retry-btn:active{background:#c9302d26}.stroke-overlay__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-sm);padding:0 var(--space-md);flex-shrink:0}.stroke-overlay__nav-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in oklch,var(--border) 80%,white 20%);background:color-mix(in oklch,var(--bg) 88%,white 12%);cursor:pointer;color:var(--ink-faint);border-radius:50%;box-shadow:0 6px 18px color-mix(in oklch,var(--ink) 4%,transparent);transition:background .15s ease,color .15s ease,transform .15s ease;flex-shrink:0}.stroke-overlay__nav-btn:hover{background:color-mix(in oklch,var(--bg) 78%,white 22%);color:var(--accent);transform:translateY(-1px)}.stroke-overlay__nav-btn:active{transform:translateY(0)}.stroke-overlay__nav-indicator{display:flex;flex:1;justify-content:center;align-items:center;min-width:0}.stroke-overlay__nav-position{font-family:var(--font-display);font-size:.7rem;color:var(--ink-faint);letter-spacing:.04em}.stroke-overlay__slide-surface:not(.is-active) .kana-player__svg-host svg[data-strokesvg]>g[data-strokesvg=strokes]>*{animation:none}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes overlay-card-in{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.stroke-overlay,.stroke-overlay__dialog{animation:none}.stroke-overlay__dialog,.stroke-overlay__slide-surface,.stroke-overlay__close,.stroke-overlay__nav-btn{transition:none}}@media(max-width:420px){.stroke-overlay__dialog{max-width:340px}.stroke-overlay{padding:var(--space-xs) var(--space-sm)}.stroke-overlay__close{top:var(--space-md);right:var(--space-md)}.stroke-overlay__body{padding:var(--space-ms) var(--space-ms) var(--space-xs)}.stroke-overlay__card-content{padding:var(--space-md) var(--space-ms)}.stroke-overlay__nav{padding:0 var(--space-ms)}.stroke-overlay__kana-char{font-size:2.4rem}}@media(max-height:700px){.stroke-overlay__card-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:0 var(--space-md)}.stroke-overlay__romaji{grid-column:1 / -1}.stroke-overlay__divider{display:none}.stroke-overlay__player-section{display:flex;flex-direction:column;margin-bottom:0}.stroke-overlay__kana-char{font-size:2rem;margin-bottom:var(--space-xs)}.stroke-overlay__kana-label{margin-bottom:1px}}.app{position:relative;min-height:100dvh;overflow:hidden;padding:var(--space-2xl) var(--space-lg) var(--space-3xl)}.app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 22% 38%,oklch(.95 .014 78 / .45) 0%,transparent 55%),radial-gradient(ellipse at 78% 72%,oklch(.94 .01 92 / .35) 0%,transparent 50%);pointer-events:none}.container{position:relative;max-width:520px;margin:0 auto}.enso{position:fixed;top:-80px;right:-80px;width:420px;height:420px;color:#21191409;pointer-events:none;z-index:0}.header{position:relative;margin-bottom:var(--space-2xl)}.title{font-family:var(--font-kana);font-size:clamp(2.8rem,7vw,3.8rem);font-weight:400;letter-spacing:.12em;line-height:1.15;color:var(--ink)}.brush-line{display:block;width:72px;height:6px;color:var(--accent);margin-top:var(--space-sm);margin-bottom:var(--space-md)}.subtitle{font-family:var(--font-display);font-size:.85rem;font-weight:400;color:var(--ink-soft);letter-spacing:.06em}.vowel-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-sm);margin-bottom:var(--space-xs)}.vowel-label{text-align:center;font-family:var(--font-display);font-size:.72rem;font-weight:400;color:var(--ink-faint);letter-spacing:.08em;-webkit-user-select:none;user-select:none}.kana-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-sm)}.special-row{display:flex;justify-content:center;margin-top:var(--space-lg);padding-bottom:var(--space-xl)}.special-n{width:clamp(68px,18vw,92px)}@media(max-width:420px){.app{padding:var(--space-xl) var(--space-sm) var(--space-2xl)}}@media(min-width:640px){.app{padding-top:var(--space-3xl)}.enso{width:500px;height:500px;top:-100px;right:-100px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: oklch(.96 .008 85);--bg-surface: oklch(.93 .012 85);--bg-hover: oklch(.91 .014 85);--ink: oklch(.22 .015 50);--ink-soft: oklch(.42 .01 50);--ink-faint: oklch(.62 .007 60);--accent: oklch(.55 .19 27);--accent-bg: oklch(.93 .035 27);--accent-bg-hover: oklch(.9 .05 27);--accent-ink: oklch(.3 .08 27);--border: oklch(.88 .006 80);--space-xs: 4px;--space-sm: 8px;--space-ms: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--font-display: "Bricolage Grotesque", system-ui, sans-serif;--font-kana: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;--font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;--ease-expo: cubic-bezier(.16, 1, .3, 1);--ease-quart: cubic-bezier(.25, 1, .5, 1)}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scrollbar-width:none;-ms-overflow-style:none}body{font-family:var(--font-display);background:var(--bg);color:var(--ink);min-height:100dvh;line-height:1.5;scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}#root{min-height:100dvh}