*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#faf4f6;--bg-gradient:linear-gradient(180deg, #fdeef2 0%, #faf4f6 340px);--surface:#fffafb;--card-bg:#fff;--subtle:#f7e9ee;--border:#b2526a24;--border-strong:#b2526a47;--ink:#2b2226;--ink-2:#5c4f54;--ink-3:#94858a;--accent:#c2405a;--accent-strong:#a83249;--accent-soft:#c2405a17;--accent-border:#c2405a4d;--green:#1f9d55;--green-light:#e9f7ef;--red:#c0392b;--red-light:#fdf0ee;--blue:#2471a3;--blue-light:#eaf4fb;--purple:#8e44ad;--purple-light:#f5eefa;--orange:#d68910;--orange-light:#fdf3e3;--gold:#b8860b;--gold-light:#fdf6e3;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--shadow-sm:0 1px 2px #5a28370d;--shadow-md:0 2px 12px #5a283712, 0 1px 3px #5a28370d;--shadow-lg:0 10px 36px #5a283721, 0 2px 8px #5a28370f;--sakura-bg:var(--bg);--sakura-surface:var(--surface);--sakura-subtle:var(--subtle);--sakura-border:var(--border);--sakura-mid:#e8a0b0;--sakura-strong:var(--accent)}[data-theme=dark]{--bg:#191014;--bg-gradient:linear-gradient(180deg, #241419 0%, #191014 340px);--surface:#211519;--card-bg:#251a1f;--subtle:#2f2026;--border:#e496aa21;--border-strong:#e496aa4d;--ink:#f3eaed;--ink-2:#c7b6bb;--ink-3:#8d7c82;--accent:#e56a84;--accent-strong:#ef8299;--accent-soft:#e56a8421;--accent-border:#e56a8461;--green:#34c471;--green-light:#2ecc7121;--red:#e66353;--red-light:#e74c3c24;--blue:#5dade2;--blue-light:#5dade221;--purple:#bb8fce;--purple-light:#bb8fce21;--orange:#eb984e;--orange-light:#eb984e21;--gold:#f0b429;--gold-light:#f0b4291f;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 2px 12px #00000059, 0 1px 3px #0000004d;--shadow-lg:0 10px 36px #00000080, 0 2px 8px #00000059}html,body,#root{max-width:100vw;min-height:100vh;overflow-x:hidden}body{background:var(--bg);background-image:var(--bg-gradient);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-attachment:fixed;font-family:DM Sans,Noto Sans JP,system-ui,sans-serif;font-size:15px;line-height:1.6;transition:background-color .3s,color .3s}::selection{background:var(--accent-soft);color:var(--accent-strong)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}button{font-family:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.jp{font-family:Noto Sans JP,sans-serif}.jp-serif{font-family:Noto Serif JP,serif}.page-title{letter-spacing:-.02em;color:var(--ink);font-size:24px;font-weight:700;line-height:1.25}.page-subtitle{color:var(--ink-2);margin-top:4px;font-size:14px}.section-label{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;align-items:center;gap:8px;margin-bottom:12px;font-size:11px;font-weight:700;display:flex}.section-label:after{content:"";background:var(--border);flex:1;height:1px}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .2s}.card-pad{padding:20px}.card-hover{cursor:pointer}.card-hover:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-hover:active{transform:translateY(0)}.btn{cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:7px;padding:9px 18px;font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.4;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.55;cursor:default}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-soft)}.btn-primary:hover:not(:disabled){background:var(--accent-strong)}.btn-ghost{color:var(--ink-2);border-color:var(--border-strong);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--subtle);color:var(--ink)}.btn-soft{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}.btn-soft:hover:not(:disabled){background:var(--accent);color:#fff}.btn-success{background:var(--green);color:#fff}.btn-success:hover:not(:disabled){filter:brightness(1.08)}.btn-danger{background:var(--red-light);color:var(--red);border-color:var(--red)}.btn-danger:hover:not(:disabled){background:var(--red);color:#fff}.btn-lg{border-radius:12px;padding:13px 24px;font-size:15px}.btn-sm{border-radius:8px;padding:5px 12px;font-size:12px}.btn-block{width:100%}.badge{border:1px solid #0000;border-radius:999px;align-items:center;gap:5px;padding:3px 10px;font-size:11.5px;font-weight:600;line-height:1.5;display:inline-flex}.badge-gold{background:var(--gold-light);color:var(--gold);border-color:#b8860b38}.badge-green{background:var(--green-light);color:var(--green);border-color:#1f9d5538}.badge-red{background:var(--red-light);color:var(--red);border-color:#c0392b38}.badge-blue{background:var(--blue-light);color:var(--blue);border-color:#2471a338}.badge-purple{background:var(--purple-light);color:var(--purple);border-color:#8e44ad38}.badge-accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}.icon-tile{background:var(--subtle);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:21px;display:flex}.progress-track{background:var(--subtle);border-radius:999px;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-strong));border-radius:999px;height:100%;transition:width .45s cubic-bezier(.22,1,.36,1)}.progress-fill.green{background:linear-gradient(90deg,#27ae60,#1f9d55)}.progress-fill.gold{background:linear-gradient(90deg,#f0b429,#d68910)}.quiz-option{background:var(--card-bg);border:1.5px solid var(--border);border-radius:var(--r-md);text-align:left;width:100%;color:var(--ink);cursor:pointer;padding:13px 16px;font-family:inherit;font-size:14.5px;transition:border-color .15s,background .15s,transform .1s;display:block}.quiz-option:hover:not(:disabled){border-color:var(--accent-border);background:var(--accent-soft)}.quiz-option:active:not(:disabled){transform:scale(.99)}.quiz-option:disabled{cursor:default}.quiz-option.correct{background:var(--green-light);border-color:var(--green);color:var(--green);font-weight:600;animation:.25s cubic-bezier(.22,1,.36,1) popIn}.quiz-option.wrong{background:var(--red-light);border-color:var(--red);color:var(--red);animation:.3s shake}.input{border:1.5px solid var(--border);background:var(--card-bg);width:100%;color:var(--ink);border-radius:10px;padding:11px 14px;font-family:inherit;font-size:14.5px;transition:border-color .15s,box-shadow .15s}.input::placeholder{color:var(--ink-3)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(.96)}60%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes drawerIn{0%{transform:translate(100%)}to{transform:translate(0)}}.fade-up{animation:.4s cubic-bezier(.22,1,.36,1) both fadeUp}.fade-up-1{animation:.4s cubic-bezier(.22,1,.36,1) 50ms both fadeUp}.fade-up-2{animation:.4s cubic-bezier(.22,1,.36,1) .1s both fadeUp}.fade-up-3{animation:.4s cubic-bezier(.22,1,.36,1) .15s both fadeUp}.kanji-stroke{fill:none;stroke:var(--accent);stroke-width:4.5px;stroke-linecap:round;stroke-linejoin:round;opacity:.09;stroke-dasharray:1;stroke-dashoffset:1px;animation:.55s ease-out forwards kanjiDraw;animation-delay:calc(.45s + var(--i) * .32s)}@keyframes kanjiDraw{to{stroke-dashoffset:0}}.kanji-stroke-draw{fill:none;stroke:var(--ink);stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:.45s ease-out forwards kanjiDraw;animation-delay:calc(.2s + var(--i) * .45s)}.sakura-petal{top:-14px;left:var(--left);width:var(--size);height:var(--size);opacity:0;pointer-events:none;animation:petalFall var(--dur) linear infinite;animation-delay:var(--delay);background:linear-gradient(135deg,#f6b8c8,#eb90aa);border-radius:150% 0;position:absolute}[data-theme=dark] .sakura-petal{background:linear-gradient(135deg,#f0a0b48c,#dc789673)}@keyframes petalFall{0%{opacity:0;transform:translateY(-10px)rotate(0)}8%{opacity:.55}80%{opacity:.5}to{transform:translate(var(--sway), 220px) rotate(300deg);opacity:0}}.tw-cursor{background:var(--accent);vertical-align:-.12em;width:2px;height:1em;margin-left:2px;animation:1s step-end infinite twBlink;display:inline-block}@keyframes twBlink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.sakura-petal{display:none}.kanji-stroke,.kanji-stroke-draw{stroke-dashoffset:0;animation:none}.tw-cursor{display:none}}.app-nav{z-index:300;background:color-mix(in srgb, var(--surface) 82%, transparent);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);align-items:center;gap:6px;width:100%;height:58px;padding:0 20px;display:flex;position:sticky;top:0}.nav-link-item{white-space:nowrap;border-radius:8px;padding:7px 12px;font-size:13.5px;text-decoration:none;transition:background .15s,color .15s}.nav-link-item:hover{background:var(--accent-soft)}.drawer-slide{animation:.25s cubic-bezier(.22,1,.36,1) drawerIn}@media (width<=900px){.nav-links{display:none!important}.nav-burger{display:flex!important}}@media (width>=901px){.nav-burger{display:none!important}.nav-links{display:flex!important}}@media (width<=600px){main{padding:18px 14px!important}.page-title{font-size:21px}}