.tutorial-screen{box-sizing:border-box;isolation:isolate;--guide:#2f6fb0;background:#f7f5f0;border:1px solid #d9d4c7;border-radius:8px;place-items:center;width:100%;height:100%;padding:30px 30px 14px;display:grid;position:relative;overflow:hidden}.tutorial-screen *,.tutorial-screen :before,.tutorial-screen :after{box-sizing:border-box}.tutorial-lattice{font-family:Noto Sans JP,Inter,sans-serif;position:relative}.tutorial-scene{z-index:15;position:absolute}.tutorial-lattice>.cell,.tutorial-lattice>.opt>.cell{color:#1c1a17;text-align:center;background:#fdfcf8;border:1px solid #d9d4c7;place-items:center;font-family:Noto Serif JP,serif;line-height:1;display:grid;position:absolute;overflow:hidden}.tutorial-lattice>.cell svg{pointer-events:none;width:100%;height:100%;display:block;position:absolute;top:0;left:0;overflow:visible}.tutorial-lattice>.cell .hstroke{stroke:#1c1a17;stroke-width:4px}.tutorial-field{z-index:0;pointer-events:none;background:#fdfcf8;transition:background-color .25s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.tutorial-lattice .band{--band-green:#2d7a4f;--band-ink:#1c1a17;--band-ruby:#8ff0bc;--band-core:color-mix(in oklch, var(--band-green), var(--band-ruby) 62%);opacity:0;color:#fff;white-space:nowrap;background:oklch(87.0328% .0184465 89.3704/.75);border-radius:999px;justify-content:center;align-items:center;font-family:Inter,Noto Sans JP,sans-serif;transition:background-color .25s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;overflow:hidden}.tutorial-lattice .band[data-match=true]{background-image:linear-gradient(90deg in oklch, transparent 0, color-mix(in oklch, var(--band-core), transparent 62%) 32%, color-mix(in oklch, var(--band-core), transparent 22%) 50%, transparent 64%), linear-gradient(90deg in oklch, color-mix(in oklch, var(--band-green), var(--band-ink) 42%) 0%, var(--band-green) 46%, var(--band-core) 88%, var(--band-ruby) 100%);background-repeat:no-repeat}.tutorial-lattice .tag{opacity:0;color:#5c5852;text-align:center;z-index:2;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:.3333em;font-family:Noto Sans JP,Inter,sans-serif;line-height:1.15;display:flex;position:absolute}.tutorial-lattice .tag .chip{white-space:nowrap;border:1px solid #d9d4c7;border-radius:.625em;padding:.3333em;line-height:1.12;display:block}.tutorial-lattice .tag .chip.on{background:#e8e8e8}.tutorial-lattice .tag .chip.kun{background:#dee}.tutorial-lattice .scrim{opacity:0;pointer-events:none;z-index:5;-webkit-backdrop-filter:blur(1px);position:absolute}.tutorial-lattice .splitov{pointer-events:none;z-index:6;position:absolute;top:0;left:0;overflow:visible}.tutorial-lattice .cellframe{pointer-events:none;z-index:6;transition:opacity .125s cubic-bezier(.2,0,0,1);position:absolute;overflow:visible}.tutorial-lattice .dropov{pointer-events:none;z-index:8;position:absolute;top:0;left:0;overflow:visible}.tutorial-lattice .relopt{opacity:0;pointer-events:none;z-index:7;color:#1c1a17;background:#fdfcf8;border:2px solid #d9d4c7;border-radius:6px;place-items:center;font-family:Inter,Noto Sans JP,sans-serif;font-size:9px;line-height:1;display:grid;position:absolute}.tutorial-lattice .relopt.k0{background:#fbf3d4;border-color:#d9b84a}.tutorial-lattice .relopt.k1{background:#eaf4ee;border-color:#a8cdb6}.tutorial-lattice .relopt.k2{background:#efe9f7;border-color:#8b6bb5}.tutorial-lattice .relopt.sel{outline-offset:1px;outline:2px solid #1c1a17}.tutorial-lattice .relsign{opacity:0;pointer-events:none;z-index:9;color:#1c1a17;place-items:center;font-family:Inter,Noto Sans JP,sans-serif;font-size:14px;font-weight:600;line-height:1;display:grid;position:absolute}.tutorial-lattice .count{opacity:0;pointer-events:none;z-index:7;color:#1c1a17;background:#e9e5db;place-items:center;font-family:Noto Serif JP,serif;font-weight:400;line-height:1;display:grid;position:absolute}.tutorial-lattice .idsq{opacity:0;pointer-events:none;z-index:7;color:#1c1a17;background:#e9e5db;place-items:center;font-family:Noto Sans JP,sans-serif;font-weight:700;line-height:1;display:grid;position:absolute}.tutorial-lattice .prompt{opacity:0;pointer-events:none;z-index:7;-webkit-backdrop-filter:blur(6px);color:#5c5852;text-align:center;background:#f7f5f080;border-radius:.6em;place-items:center;padding:.5em 1em;font-family:Noto Serif JP,serif;line-height:1.4;transition:opacity .5s cubic-bezier(.4,0,.2,1);display:grid;position:absolute}.tutorial-lattice .opt{opacity:0;cursor:pointer;position:absolute}.tutorial-lattice .opt .cell{position:absolute}.tutorial-lattice .cap{text-align:center;color:#5c5852;opacity:0;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.tutorial-lattice .cap b{color:#1c1a17;font-weight:500}.tutorial-lattice .cap .detail{opacity:0;color:#5c5852;transition:opacity .125s cubic-bezier(.4,0,.2,1)}.tutorial-lattice .skip{color:#9a958a;text-underline-offset:3px;opacity:0;justify-content:flex-end;align-items:flex-end;text-decoration:underline;display:flex;position:absolute}.tutorial-lattice .btn{opacity:0;cursor:pointer;place-items:center;display:grid;position:absolute}.tutorial-lattice .btn.p{color:#f7f5f0;background:#1c1a17}.tutorial-lattice .btn.s{color:#1c1a17;border:1px solid #1c1a17}.tutorial-lattice .btn.again{cursor:pointer}.tutorial-lattice svg.ov,.tutorial-lattice svg.guide{pointer-events:none;position:absolute;top:0;left:0;overflow:visible}.tutorial-lattice svg.guide{z-index:50}.tutorial-screen .badge{border:1px dashed var(--guide);color:var(--guide);opacity:0;background:#f7f5f0;border-radius:3px;padding:2px 8px;font-size:11px;transition:opacity .125s;position:absolute;top:10px;right:10px}@property --edge{syntax:"<percentage>";inherits:false;initial-value:0%}@property --miss-fade{syntax:"<number>";inherits:false;initial-value:0}:root{--bg:#f7f5f0;--bg-grad:#fdfcf8;--paper:#fff;--ink:#1c1a17;--ink-2:#5c5852;--ink-3:#9a958a;--line:#e9e5db;--line-2:#d9d4c7;--green:#2d7a4f;--paint-green:#1f9e55;--yellow:#c48a1a;--gray:#b8b3a6;--tint-short-fill:#efe9f7;--tint-short-edge:#8b6bb5;--tint-equal-fill:#eaf4ee;--tint-equal-edge:#a8cdb6;--tint-excess-fill:#fbf3d4;--tint-excess-edge:#d9b84a;--ghost:#efece3;--radius:12px;--font-sans:Inter, "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;--font-serif:"Noto Serif JP", "Hiragino Mincho ProN", serif;--glyph-weight:1;--ease:cubic-bezier(.2, .7, .3, 1)}*{box-sizing:border-box}body{min-height:100dvh;color:var(--ink);font-family:var(--font-sans);background:radial-gradient(120% 80% at 50% 0%, var(--bg-grad), var(--bg) 70%) fixed;-webkit-font-smoothing:antialiased;margin:0}body.modal-open{overflow:hidden}.app{flex-direction:column;gap:18px;width:min(440px,100%);height:100svh;margin:0 auto;padding:22px 18px 26px;display:flex;overflow:hidden}.boot-loading{text-align:center;width:min(440px,100%);color:var(--ink-2);margin:0 auto;padding:80px 18px;font-size:14px}.boot-error{text-align:center;flex-direction:column;align-items:center;gap:12px;width:min(440px,100%);margin:0 auto;padding:80px 18px;display:flex}.boot-error-title{font-family:var(--font-serif);color:var(--ink);margin:0;font-size:18px}.boot-error-body{color:var(--ink-2);margin:0;font-size:14px}.boot-error-retry{background:var(--ink);color:var(--paper);font-family:var(--font-sans);cursor:pointer;border:0;border-radius:999px;margin-top:4px;padding:10px 22px;font-size:14px}.boot-error-retry:hover{opacity:.9}.header{justify-content:space-between;align-items:center;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-marks{align-items:center;gap:4px;display:flex}.brand-kanji{width:24px;height:24px;font-family:var(--font-serif);color:var(--ink);background:0 0;border-radius:7px;place-items:center;font-size:14px;line-height:1;display:grid}.brand-kanji.brand-mark{background:var(--ink);color:var(--paper)}.brand-text{letter-spacing:.26em;color:var(--ink-2);font-size:10.5px;font-weight:600}.turn{color:var(--ink-3);font-size:11px}.turn b{color:var(--ink);font-size:12px;font-weight:600}.turn .sep{opacity:.5;margin:0 1px}.board-area{flex:1;justify-content:center;min-height:0;display:flex}.board{aspect-ratio:2/6;grid-template-rows:repeat(6,minmax(0,1fr));gap:9px;height:100%;display:grid}.row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-height:0;display:grid}.cell{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);height:100%;position:relative;overflow:visible}.cell.empty{border-style:dashed;border-width:1.5px;border-color:var(--line-2);cursor:pointer;font:inherit;appearance:none;background:0 0;place-items:center;padding:0;display:grid}.cell.empty:before{content:"";background:var(--line-2);opacity:.55;border-radius:3px;width:12px;height:12px;transition:opacity .2s,transform .2s}.cell.empty:hover{background:#ffffff80;border-color:#b8b2a2}.cell.empty:hover:before{opacity:.85;transform:scale(1.08)}.cell.empty:active{transform:scale(.985)}.cell svg{border-radius:inherit;width:100%;height:100%;position:absolute;inset:0}.stroke{fill:none;stroke:var(--ink);stroke-width:calc(6px * var(--glyph-weight));stroke-linecap:round;stroke-linejoin:round}.stroke[data-paint=green]{--final:var(--paint-green);stroke-width:calc(9px * var(--glyph-weight))}.stroke[data-paint=yellow]{--final:var(--yellow);stroke-width:calc(9px * var(--glyph-weight))}.stroke[data-paint=gray]{--final:var(--gray)}.placeholder-dot{fill:var(--ink-3)}.placeholder-dot[data-paint=green]{--final:var(--paint-green)}.placeholder-dot[data-paint=yellow]{--final:var(--yellow)}.placeholder-dot[data-paint=gray]{--final:var(--gray)}.frame{fill:#0000;stroke:#0000;vector-effect:non-scaling-stroke;fill-rule:evenodd}.frame[data-frame=short]{fill:var(--tint-short-fill);stroke:var(--tint-short-edge);stroke-width:1.5px;stroke-dasharray:4 3}.frame[data-frame=equal]{fill:var(--tint-equal-fill);stroke:var(--tint-equal-edge);stroke-width:2px}.frame[data-frame=excess]{fill:var(--tint-excess-fill);stroke:var(--tint-excess-edge);stroke-width:1.5px}.reading{background:color-mix(in oklch, var(--line-2), transparent 25%);--at:0s;--dur:.7s;--edge:0%;--miss-fade:0;border-radius:999px;height:4.5px;position:absolute;top:calc(100% + 1.5px);left:0;right:0}.reading[data-match=true]{--ruby:#8ff0bc;--glory-tail:color-mix(in oklch, var(--green), var(--ink) 42%);--glory-body:var(--green);--glory-core:color-mix(in oklch, var(--green), var(--ruby) 62%);background-image:linear-gradient(90deg in oklch, transparent 0, color-mix(in oklch, var(--glory-core), transparent 62%) 32%, color-mix(in oklch, var(--glory-core), transparent 22%) 50%, transparent 64%), linear-gradient(90deg in oklch, var(--glory-tail) 0%, var(--glory-body) 46%, var(--glory-core) 88%, var(--ruby) 100%);background-position:0 0;background-repeat:no-repeat;background-size:var(--edge) 100%, var(--edge) 100%}.reading[data-match=false]{background-image:linear-gradient(90deg in oklch, color-mix(in oklch, var(--ink), var(--line-2) calc(var(--miss-fade) * 100%)) 0%, color-mix(in oklch, var(--ink), var(--line-2) calc(var(--miss-fade) * 100%)) 100%);background-position:0 0;background-repeat:no-repeat;background-size:var(--edge) 100%}.cell[data-reveal=pre] .stroke{stroke:var(--ghost)}.cell[data-reveal=pre] .placeholder-dot{fill:var(--ghost)}.cell[data-reveal=pre] .frame,.cell[data-reveal=pre] .reading{opacity:0}.cell[data-reveal=run] .stroke{animation:paintIn var(--dur,.3s) var(--ease) var(--at,0s) both}.cell[data-reveal=run] .placeholder-dot{animation:paintInDot var(--dur,.3s) var(--ease) var(--at,0s) both}.cell[data-reveal=run] .frame{animation:tintIn var(--dur,.3s) var(--ease) var(--at,0s) both}.cell[data-reveal=run] .reading{animation:readingIn var(--dur,.3s) var(--ease) var(--at,0s) both}.cell[data-reveal=run] .reading[data-match=true]{animation:readingIn var(--dur,.3s) var(--ease) var(--at,0s) both, readingGlow .25s var(--ease) calc(var(--at,0s) + var(--dur,.3s) - .25s) both}.cell[data-reveal=run] .reading[data-match=false]{animation:readingIn var(--dur,.3s) var(--ease) var(--at,0s) both, missFade var(--dur,.3s) var(--ease) var(--at,0s) both}.cell[data-reveal=done] .stroke{stroke:var(--final,var(--ink))}.cell[data-reveal=done] .placeholder-dot{fill:var(--final,var(--ink))}.cell[data-reveal=done] .frame,.cell[data-reveal=done] .reading{opacity:1}.cell[data-reveal=done] .reading{--edge:100%;background-image:linear-gradient(90deg in oklch, var(--glory-tail) 0%, var(--glory-body) 46%, var(--glory-core) 88%, var(--ruby) 100%)}.cell[data-reveal=done] .reading[data-match=true]{box-shadow:0 0 5px color-mix(in oklch, var(--glory-core), transparent 55%)}.cell[data-reveal=done] .reading[data-match=false]{--edge:100%;--miss-fade:1;background-image:linear-gradient(90deg in oklch, color-mix(in oklch, var(--ink), var(--line-2) 100%) 0%, color-mix(in oklch, var(--ink), var(--line-2) 100%) 100%)}@keyframes paintIn{0%{stroke:var(--ghost);opacity:.9}45%{stroke:var(--ink);opacity:.9}to{stroke:var(--final,var(--ink));opacity:1}}@keyframes paintInDot{0%{fill:var(--ghost);opacity:.9}45%{fill:var(--ink);opacity:.9}to{fill:var(--final,var(--ink));opacity:1}}@keyframes tintIn{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes readingIn{0%{--edge:0%;opacity:1}to{--edge:100%;opacity:1}}@keyframes readingGlow{0%{box-shadow:0 0 5px color-mix(in oklch, var(--glory-core), transparent 100%)}to{box-shadow:0 0 5px color-mix(in oklch, var(--glory-core), transparent 55%)}}@keyframes missFade{0%{--miss-fade:0}to{--miss-fade:1}}.hint{text-align:center;color:var(--ink-3);margin:0;font-size:11.5px}.hint kbd{font-family:var(--font-sans);border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);border-radius:5px;padding:1px 5px;font-size:10.5px}.modal{z-index:100;pointer-events:none;visibility:hidden;position:fixed;inset:0}.modal[aria-hidden=false]{pointer-events:auto;visibility:visible}.modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;background:#1c1a1752;transition:opacity .18s;position:absolute;inset:0}.modal[aria-hidden=false] .modal-backdrop{opacity:1}.modal-sheet{background:var(--paper);border-radius:22px 22px 0 0;flex-direction:column;max-width:70em;max-height:92dvh;margin:0 auto;transition:transform .22s cubic-bezier(.22,.61,.36,1);display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.modal[aria-hidden=false] .modal-sheet{transform:translateY(0)}@media (width>=640px){.modal-sheet{opacity:0;border-radius:22px;width:min(70em,100% - 40px);top:50%;bottom:auto;transform:translateY(12px)}.modal[aria-hidden=false] .modal-sheet{opacity:1;transform:translateY(-50%)}}.modal-head{justify-content:space-between;align-items:center;padding:16px 22px 12px;display:flex}.modal-turn-label{letter-spacing:.08em;color:var(--ink-3);font-size:11px}.modal-turn-label b{color:var(--ink);font-size:12px}.modal-close{width:32px;height:32px;color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:50%;place-items:center;display:grid}.modal-close svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;width:18px;height:18px}.modal-history{flex-direction:column;flex:1;gap:6px;padding:0 22px;display:flex;overflow-y:auto}.modal-empty-hint{color:var(--ink-3);margin:0;padding:8px 0 14px;font-size:12.5px}.history-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:6px;display:grid}.history-cell{background:var(--bg);border-radius:9px;justify-content:center;align-items:center;gap:4px;padding:6px;display:flex}.mini-cell{background:var(--paper);width:34px;height:34px;font-family:var(--font-serif);border-radius:7px;place-items:center;font-size:20px;display:grid}.modal-input-area{border-top:1px solid var(--line);flex-direction:column;gap:14px;padding:12px 22px 20px;display:flex}.modal-slots{justify-content:center;align-items:center;gap:10px;display:flex;position:relative}.modal-slot{width:76px;height:76px;font-family:var(--font-serif);color:var(--ink);border-radius:14px;place-items:center;font-size:48px;font-weight:500;display:grid}.modal-slot.empty{border:1.5px dashed var(--line-2);background:0 0}.modal-slot.filled{background:var(--paper);border:1.5px solid var(--ink-2)}.modal-field{opacity:0;caret-color:#0000;font-size:16px;position:absolute;inset:0}.toast{z-index:200;background:var(--ink);color:var(--paper);border-radius:10px;padding:10px 16px;font-size:13px;position:fixed;bottom:80px;left:50%;transform:translate(-50%)}.cell.clickable{cursor:pointer}.cell.clickable:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}.explain{z-index:100;pointer-events:none;visibility:hidden;position:fixed;inset:0}.explain[aria-hidden=false]{pointer-events:auto;visibility:visible}.explain[aria-hidden=false] .modal-backdrop{opacity:1}.explain[aria-hidden=false] .modal-sheet{transform:translateY(0)}.explain-sheet{gap:4px}.explain-char{font-family:var(--font-serif);color:var(--ink);font-size:32px;font-weight:500}.explain-title{align-items:center;gap:14px;display:flex}.explain-readings{color:var(--ink-2);flex-direction:column;gap:2px;font-size:13px;line-height:1.35;display:flex}.explain-list{flex-direction:column;gap:12px;margin:0;padding:4px 22px 24px;list-style:none;display:flex}.explain-item{color:var(--ink-2);padding-left:18px;font-size:13.5px;line-height:1.6;position:relative}.explain-item:before{content:"";background:var(--ink-3);border-radius:50%;width:5px;height:5px;position:absolute;top:.62em;left:2px}.explain-item strong{font-weight:600}.explain-item strong.perfect{color:var(--paint-green)}.explain-item strong.misplaced{color:var(--yellow)}.explain-item strong.missed{color:var(--ink-3)}.explain-item strong.short-strokes{color:var(--tint-short-edge)}.explain-item strong.excess-strokes{color:var(--tint-excess-edge)}.explain-item .component-glyph{vertical-align:-.12em;width:1em;height:1em;margin-right:1px;display:inline-block}.explain-item .component-glyph .stroke{stroke:var(--final,var(--ink))}.explain-item .component-glyph .stroke[data-paint=gray]{stroke:var(--ink-3)}@media (width>=640px){.explain[aria-hidden=false] .modal-sheet{opacity:1;transform:translateY(-50%)}}.result{z-index:100;pointer-events:none;visibility:hidden;position:fixed;inset:0}.result[aria-hidden=false]{pointer-events:auto;visibility:visible}.result[aria-hidden=false] .modal-backdrop{opacity:1}.result[aria-hidden=false] .modal-sheet{transform:translateY(0)}.result-sheet{gap:4px}.result-heading{letter-spacing:.08em;color:var(--ink);font-size:14px;font-weight:600}.result-body{flex-direction:column;gap:18px;padding:0 22px 24px;display:flex;overflow-y:auto}.result-answer{align-items:center;gap:14px;display:flex}.result-answer-word{font-family:var(--font-serif);color:var(--ink);font-size:40px;font-weight:500}.result-answer-info{flex-direction:column;gap:2px;display:flex}.result-answer-yomi{color:var(--ink-2);font-size:13px;line-height:1.35}.result-answer-meaning{color:var(--ink-2);font-size:13.5px;line-height:1.7}.result-block{flex-direction:column;gap:8px;display:flex}.result-label{letter-spacing:.08em;color:var(--ink-3);margin:0;font-size:11px;font-weight:600}.result-rate{align-items:baseline;gap:10px;display:flex}.result-rate b{color:var(--paint-green);font-size:28px;font-weight:600}.result-rate span{color:var(--ink-2);font-size:12px}.result-empty{color:var(--ink-3);margin:0;font-size:12.5px}.count-bars{gap:8px;height:120px;display:flex}.count-bar{flex:1;grid-template-rows:auto 1fr auto;place-items:end center;gap:4px;display:grid}.count-fill{background:color-mix(in oklch, var(--gray), transparent 30%);border-radius:5px 5px 0 0;width:72%;min-height:2px}.count-bar.is-user .count-fill{background:var(--paint-green)}.count-value{color:var(--ink-2);font-size:11px}.count-bar.is-user .count-value{color:var(--paint-green);font-weight:600}.count-turn{color:var(--ink-3);font-size:11px}.turn-tabs{gap:6px;display:flex}.turn-tab{border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);font:inherit;cursor:pointer;border-radius:8px;flex:1;padding:6px 0;font-size:12px}.turn-tab.active{border-color:var(--ink);background:var(--ink);color:var(--paper)}.word-bars{flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none;display:flex}.word-row{grid-template-columns:3.5em 1fr 3em;align-items:center;gap:8px;font-size:12.5px;display:grid}.word-name{font-family:var(--font-serif);color:var(--ink);white-space:nowrap}.word-track{background:var(--bg);border-radius:6px;height:12px;overflow:hidden}.word-fill{background:color-mix(in oklch, var(--gray), transparent 25%);border-radius:6px;min-width:2px;height:100%;display:block}.word-pct{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}.word-row.is-user .word-name{color:var(--paint-green);font-weight:600}.word-row.is-user .word-fill{background:var(--paint-green)}.result-share{gap:10px;display:flex}.share{text-align:center;border-radius:10px;flex:1;padding:11px 0;font-size:13px;text-decoration:none}.share-x{background:var(--ink);color:var(--paper)}.share-misskey{background:var(--bg);color:var(--ink);border:1px solid var(--line-2)}.result-open{background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;border:none;border-radius:10px;align-self:center;padding:10px 20px;font-size:13px}@media (width>=640px){.result[aria-hidden=false] .modal-sheet{opacity:1;transform:translateY(-50%)}}.admin{flex-direction:column;gap:14px;width:min(420px,100% - 32px);margin:0 auto;padding:40px 0;display:flex}.admin-title{color:var(--ink);margin:0;font-size:20px}.admin-field{align-items:center;gap:10px;display:flex}.admin-field label{width:4em;color:var(--ink-2);flex:none;font-size:13px}.admin-field input{border:1px solid var(--line-2);background:var(--bg-grad);min-width:0;color:var(--ink);font:inherit;border-radius:8px;flex:1;padding:9px 12px}.admin-button{background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;border:none;border-radius:8px;flex:none;padding:9px 16px;font-size:13px}.admin-save{align-self:flex-start}.admin-status{color:var(--ink-2);margin:0;font-size:13px}.practice-edit{border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2);font:inherit;cursor:pointer;border-radius:10px;align-self:center;padding:8px 16px;font-size:12px}.result-actions{flex-direction:column;gap:10px;display:flex}.result-primary{background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;border:none;border-radius:10px;padding:11px 0;font-size:13px}.result-secondary{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;border-radius:10px;padding:11px 0;font-size:13px}.tutorial-title,.practice-title{letter-spacing:.08em;color:var(--ink-2);font-size:13px}.practice-body{flex-direction:column;gap:14px;padding:0 22px 22px;display:flex;overflow-y:auto}.tutorial-body{padding:0 22px 22px;overflow-y:auto}.tutorial-body>section{padding:.5em}.tutorial-body h2{margin:1em 0 0;padding:0;font-size:100%;font-weight:700;text-decoration:underline}.tutorial-list dl{grid-template-columns:auto 1fr;gap:10px 14px;display:grid}.tutorial-list dt{color:var(--ink);white-space:nowrap;margin:0;font-size:13px;font-weight:600}.tutorial-body{color:var(--ink-2);margin:0;font-size:13px;line-height:1.7}.tutorial-body p{margin:.5em 0 0;padding:0}.tutorial-body .perfect{color:var(--paint-green);font-weight:700}.tutorial-body .misplaced{color:var(--yellow);font-weight:700}.tutorial-body .missed{color:var(--ink-3);font-weight:700}.tutorial-body .short-stroke{background-color:var(--tint-short-fill);border:1.5px dashed var(--tint-short-edge);border-radius:4px;padding:2px;font-weight:700}.tutorial-body .equal-stroke{background-color:var(--tint-equal-fill);border:1.5px dashed var(--tint-equal-edge);border-radius:4px;padding:2px;font-weight:700}.tutorial-body .excess-stroke{background-color:var(--tint-excess-fill);border:1.5px solid var(--tint-excess-edge);border-radius:4px;padding:2px;font-weight:700}.tutorial-body .yomi-match{border-bottom:3px solid var(--paint-green);font-weight:700}.tutorial-body .yomi-miss{color:var(--ink-3);border-bottom:2px solid var(--gray)}.vertical-separator{border-right:1px solid var(--ink-3);width:0;height:-webkit-fill-available;height:-moz-available;height:stretch}.tutorial-example-container{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);flex-direction:column;align-items:center;display:flex;position:sticky;top:0;-webkit-mask-image:linear-gradient(#000 0 calc(100% - 1em),#0000 100%);mask-image:linear-gradient(#000 0 calc(100% - 1em),#0000 100%);margin-bottom:-.5em!important;padding-bottom:1em!important}.tutorial-example{background-color:var(--bg);border-radius:.5em;flex-direction:column;align-items:center;gap:8px;width:fit-content;padding:1em;display:flex}.tutorial-example-pair{align-items:flex-start;gap:18px;display:flex}.tutorial-example-side{flex-direction:column;align-items:center;gap:6px;display:flex}.tutorial-example-tag{color:var(--ink);font-size:12px}.tutorial-example-row{grid-template-columns:repeat(2,72px);justify-content:center;gap:9px;display:grid}.tutorial-example-row .cell{height:72px}.tutorial-example-answer .cell[data-reveal=pre] .stroke{stroke:var(--ink)}.tutorial-example-answer .cell[data-reveal=pre] .placeholder-dot{fill:var(--ink)}.tutorial-example-loading{height:72px}.tutorial-note{color:var(--ink-3);margin:0;font-size:12px}.tutorial-actions{gap:10px;display:flex}.tutorial-primary{background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;border:none;border-radius:10px;flex:1;padding:12px 0;font-size:14px}.tutorial-secondary,.tutorial-back{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;border-radius:10px;flex:1;padding:12px 0;font-size:14px}.practice-note{color:var(--ink-3);margin:0;font-size:12px;line-height:1.7}.practice-words{grid-template-columns:repeat(2,1fr);gap:8px;margin:0;padding:0;list-style:none;display:grid}.practice-word{border:1px solid var(--line);background:var(--bg-grad);border-radius:8px;justify-content:space-between;align-items:center;gap:6px;padding:8px 8px 8px 12px;display:flex}.practice-word-text{font-family:var(--font-serif);font-size:16px}.practice-remove{width:24px;height:24px;color:var(--ink-3);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;place-items:center;font-size:15px;line-height:1;display:grid}.practice-remove:hover:not(:disabled){background:var(--ghost);color:var(--ink)}.practice-remove:disabled{opacity:.35;cursor:default}.practice-add{gap:8px;display:flex}.practice-field{border:1px solid var(--line-2);background:var(--bg-grad);min-width:0;color:var(--ink);font:inherit;border-radius:8px;flex:1;padding:9px 12px}.practice-add-btn{background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;border:none;border-radius:8px;flex:none;padding:9px 16px;font-size:13px}.practice-error{color:#b23c3c;margin:0;font-size:12px}.practice-actions{gap:10px;margin-top:4px;display:flex}.practice-reset{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;border-radius:10px;flex:1;padding:11px 0;font-size:13px}.practice-save{background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;border:none;border-radius:10px;flex:1.4;padding:11px 0;font-size:13px}.practice-start{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:14px;max-width:420px;min-height:100dvh;margin:0 auto;padding:32px 24px;display:flex}.practice-start-title{font-family:var(--font-serif);letter-spacing:.1em;color:var(--ink);margin:0;font-size:22px;font-weight:600}.practice-start-note{color:var(--ink-2);margin:0;font-size:13px}.practice-start-words{width:100%}.practice-start-btn{background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;border:none;border-radius:12px;align-self:stretch;padding:14px 0;font-size:15px}.header-side{align-items:center;gap:12px;display:flex}.menu-open{width:30px;height:30px;color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:8px;place-items:center;padding:0;display:grid}.menu-open svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;width:18px;height:18px}.menu-open:hover{background:var(--paper)}.menu-title,.about-title{font-family:var(--font-serif);color:var(--ink);font-size:17px;font-weight:600}.menu-list{flex-direction:column;padding:8px 12px 16px;display:flex}.menu-item{color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:10px;padding:14px 10px;font-size:15px}.menu-item:hover{background:var(--paper)}.about-body{flex-direction:column;gap:16px;max-height:70vh;padding:12px 22px 22px;display:flex;overflow-y:auto}.about-app{font-family:var(--font-serif);letter-spacing:.12em;color:var(--ink);margin:0;font-size:24px;font-weight:600}.about-desc{color:var(--ink-2);margin:0;font-size:13px;line-height:1.7}.about-block{flex-direction:column;gap:6px;display:flex}.about-label{letter-spacing:.1em;color:var(--ink-2);margin:0;font-size:11px;font-weight:600}.about-creator{color:var(--ink);margin:0;font-size:13px;line-height:1.7}.about-creator a{color:var(--ink);text-underline-offset:2px;text-decoration:underline}.about-list{color:var(--ink-2);flex-direction:column;gap:6px;margin:0;padding:0;font-size:12px;line-height:1.7;list-style:none;display:flex}.about-list a{color:var(--ink);text-underline-offset:2px;text-decoration:underline}.about-credits-link{margin:0;font-size:12px}.about-credits-link a{color:var(--ink);text-underline-offset:2px;text-decoration:underline}.about-thanks{color:var(--ink);margin:0;font-size:13px}.feedback-block{gap:10px}.feedback-form{flex-direction:column;gap:8px;display:flex}.feedback-field{box-sizing:border-box;resize:vertical;border:1px solid var(--line-2);background:var(--bg-grad);width:100%;min-height:72px;color:var(--ink);font-family:var(--font-sans);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.6}.feedback-field:focus{border-color:var(--ink-2);outline:none}.feedback-actions{justify-content:flex-end;align-items:center;gap:10px;display:flex}.feedback-error{color:#b23c3c;margin-right:auto;font-size:12px}.feedback-submit{background:var(--ink);color:var(--bg);font-family:var(--font-sans);cursor:pointer;border:none;border-radius:999px;padding:8px 20px;font-size:13px;font-weight:600}.feedback-submit:hover:not(:disabled){opacity:.9}.feedback-submit:disabled{opacity:.5;cursor:default}.feedback-thanks{color:var(--ink-2);margin:0;font-size:13px}@media (hover:hover) and (pointer:fine){.modal-slots{flex-wrap:wrap}.modal-field{opacity:1;caret-color:var(--ink);border:1px solid var(--line-2);background:var(--bg-grad);color:var(--ink);font-family:var(--font-serif);text-align:center;border-radius:10px;flex-basis:100%;margin-top:6px;padding:10px 12px;font-size:20px;position:static}}.opening-clip{background:var(--bg);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:fixed;inset:0;overflow:hidden}.opening-clip>.tutorial-screen{border:none;border-radius:0}.opening-cells{justify-content:space-between;width:100%;height:100%;display:flex}.opening-cells>.cell{aspect-ratio:1;width:auto;height:100%}