:root{color:#191f28;font-family:IBM Plex Sans KR,Noto Sans JP,sans-serif;line-height:1.5;font-weight:500;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--app-width: 402px;--app-height: 874px;--outer-bg: #edf2f8;--outer-bg-deep: #d7dfeb;--surface-app: #f6f8fc;--surface-card: rgba(255, 255, 255, .96);--surface-card-strong: #ffffff;--line: rgba(15, 23, 42, .08);--line-strong: rgba(15, 23, 42, .12);--text-main: #191f28;--text-subtle: #6b7684;--accent: #3182f6;--accent-deep: #1b64da;--accent-soft: rgba(49, 130, 246, .12);--success: #0f9f6e;--danger: #e5484d;--shadow-frame: 0 36px 90px -42px rgba(22, 35, 59, .34);--shadow-card: 0 18px 40px -30px rgba(31, 50, 81, .22)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{overflow:hidden;color:var(--text-main);background:radial-gradient(circle at top,rgba(255,255,255,.82),transparent 28rem),radial-gradient(circle at bottom right,rgba(49,130,246,.14),transparent 24rem),linear-gradient(180deg,var(--outer-bg) 0%,var(--outer-bg-deep) 100%)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}code{background:#0f172a0d;border-radius:.5rem;padding:.1rem .35rem}.device-stage{min-height:100dvh;padding:18px;display:flex;align-items:center;justify-content:center}.phone-shell{position:relative;width:min(100%,var(--app-width));height:min(calc(100dvh - 36px),var(--app-height));overflow:hidden;border-radius:34px;border:1px solid rgba(15,23,42,.08);background:radial-gradient(circle at top,rgba(49,130,246,.12),transparent 16rem),linear-gradient(180deg,var(--surface-app) 0%,#eef3fb 100%);box-shadow:var(--shadow-frame)}.phone-shell:before{content:none;display:none}.phone-shell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff6b}.device-screen,.login-screen,.app-shell{height:100%}.login-screen{position:relative;padding:calc(env(safe-area-inset-top,0px) + 2rem) 1.1rem calc(env(safe-area-inset-bottom,0px) + 1.35rem);display:flex;align-items:center}.app-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.app-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + 1.45rem) 1.1rem .9rem;background:linear-gradient(180deg,#f6f8fcfa,#f6f8fce6);border-bottom:1px solid rgba(15,23,42,.05);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.app-header-copy{min-width:0}.brand-link{display:inline-flex;flex-direction:column;gap:.18rem}.brand-mark{font-size:1.22rem;font-weight:700;letter-spacing:-.045em}.brand-subtitle{color:var(--text-subtle);font-size:.8rem;font-weight:600}.lock-button{flex-shrink:0;min-height:2.45rem;padding:.68rem .9rem;border:1px solid rgba(15,23,42,.07);border-radius:14px;background:#ffffffdb;color:var(--text-subtle);font-weight:700}.app-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 1.1rem}.bottom-tabbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;padding:.75rem 1.1rem calc(env(safe-area-inset-bottom,0px) + .88rem);border-top:1px solid rgba(15,23,42,.06);background:linear-gradient(180deg,#f6f8fceb,#f6f8fcfc);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.bottom-tab{display:inline-flex;align-items:center;justify-content:center;min-height:3.1rem;border-radius:16px;border:1px solid transparent;background:#ffffff9e;color:var(--text-subtle);font-weight:700;transition:background .16s ease,color .16s ease,border-color .16s ease}.bottom-tab-active{border-color:#3182f61f;background:var(--surface-card-strong);color:var(--accent)}.bottom-tab-label{font-size:.96rem}.page-stack,.form-stack,.hero-actions,.button-row{display:flex;flex-direction:column;gap:.85rem}.page-stack{padding:.25rem 0 .95rem}.panel,.login-card,.hero-card,.stat-card{border:1px solid var(--line);border-radius:22px;background:var(--surface-card);box-shadow:var(--shadow-card)}.panel,.hero-card,.login-card{padding:1.25rem}.panel-tight{padding:1rem 1.05rem}.panel-loading{width:100%}.login-card{width:100%;display:grid;gap:1rem;background:linear-gradient(180deg,#fffffffa,#f8fbfff5)}.login-card-animated{position:relative;z-index:1;overflow:hidden}.login-card-animated:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(130deg,transparent 0%,rgba(255,255,255,.34) 42%,transparent 68%);transform:translate(-120%);animation:loginSheen 7.2s ease-in-out infinite}.login-ambient{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.login-glow{position:absolute;border-radius:999px;filter:blur(12px);opacity:.72}.login-glow-primary{top:8%;right:-10%;width:13rem;height:13rem;background:radial-gradient(circle,rgba(49,130,246,.26) 0%,rgba(49,130,246,.03) 74%,transparent 100%);animation:loginDriftPrimary 8s ease-in-out infinite}.login-glow-secondary{bottom:10%;left:-14%;width:11rem;height:11rem;background:radial-gradient(circle,rgba(99,140,255,.15) 0%,rgba(99,140,255,.03) 76%,transparent 100%);animation:loginDriftSecondary 9s ease-in-out infinite}.login-float-chip{position:absolute;display:inline-flex;align-items:center;justify-content:center;min-width:3.2rem;height:3.2rem;padding:0 .95rem;border:1px solid rgba(49,130,246,.08);border-radius:999px;background:#ffffffa3;box-shadow:var(--shadow-card);color:#1b64dad1;font-weight:700;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.login-float-chip-kana-a{top:16%;left:8%;font-family:Noto Sans JP,sans-serif;font-size:1.35rem;animation:loginFloatA 6.2s ease-in-out infinite}.login-float-chip-kana-ka{top:24%;right:10%;font-family:Noto Sans JP,sans-serif;font-size:1.2rem;animation:loginFloatB 7s ease-in-out infinite}.login-float-chip-romaji{bottom:19%;left:12%;min-width:4.1rem;font-size:1rem;letter-spacing:.05em;text-transform:lowercase;animation:loginFloatC 6.6s ease-in-out infinite}.login-kicker-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.login-status-pill,.login-feature-pill{display:inline-flex;align-items:center;justify-content:center;min-height:1.9rem;padding:.35rem .75rem;border:1px solid rgba(49,130,246,.1);border-radius:999px;background:#f3f7ffe6;color:var(--accent-deep);font-size:.73rem;font-weight:700;letter-spacing:-.01em;text-transform:none}.login-copy-stack{display:grid;gap:.6rem}.login-feature-row{display:flex;flex-wrap:wrap;gap:.55rem}.login-feature-pill{min-height:2rem;padding:.42rem .8rem;color:var(--text-main);font-size:.77rem;letter-spacing:0;text-transform:none}.login-submit-button{position:relative;overflow:hidden}.login-submit-button:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);transform:translate(-110%);animation:loginButtonGlow 3.6s ease-in-out infinite}.login-reveal{opacity:0;transform:translateY(18px);animation:loginReveal .68s cubic-bezier(.2,.8,.2,1) forwards}.login-reveal-1{animation-delay:.11s}.login-reveal-2{animation-delay:.22s}.login-reveal-3{animation-delay:.33s}.hero-card{display:grid;gap:1rem;background:radial-gradient(circle at top right,rgba(49,130,246,.12),transparent 13rem),linear-gradient(180deg,#fffffffa,#f4f8fff2)}.hero-card h1,.login-card h1,.panel h1,.panel h2{margin:0;font-size:1.52rem;line-height:1.18;letter-spacing:-.04em}.eyebrow{display:inline-block;color:var(--text-subtle);font-size:.76rem;font-weight:700;letter-spacing:-.01em;text-transform:none}.support-copy,.panel p{margin:0;color:var(--text-subtle)}.field-label,.stat-label{color:var(--text-subtle);font-size:.82rem;font-weight:600}.text-input{width:100%;min-height:3.35rem;padding:.92rem 1rem;border:1px solid rgba(15,23,42,.1);border-radius:16px;background:#f9fbfff5;color:var(--text-main)}.text-input:focus{outline:2px solid rgba(49,130,246,.15);border-color:#3182f67a}.text-input-large{min-height:4.3rem;font-size:1.5rem;text-align:center;letter-spacing:.04em}.primary-button,.secondary-button,.ghost-link,.tab-chip{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:3.2rem;padding:.9rem 1.1rem;border-radius:16px;transition:transform .16s ease,filter .16s ease,border-color .16s ease,background .16s ease}.primary-button{border:none;background:linear-gradient(180deg,#3f8cff,#2678f2);color:#fff;font-weight:700;box-shadow:0 16px 28px -24px #2778f29e}.secondary-button,.ghost-link,.tab-chip{border:1px solid rgba(15,23,42,.08);background:var(--surface-card-strong);color:var(--text-main)}.primary-button:hover,.secondary-button:hover,.ghost-link:hover,.tab-chip:hover,.lock-button:hover{transform:translateY(-1px)}.primary-button:disabled{cursor:wait;opacity:.72}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.split-panel,.wrong-note-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem}.feedback-grid,.wrong-note-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.wrong-note-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{display:flex;flex-direction:column;gap:.42rem;padding:1rem 1rem 1.05rem}.stat-value{font-size:1.56rem;font-weight:700;letter-spacing:-.05em}.stat-value-compact{font-size:1.05rem}.stat-subtext{color:var(--text-subtle);font-size:.82rem}.alert-box{padding:.95rem 1rem;border:1px solid rgba(229,72,77,.18);border-radius:16px;background:#e5484d14;color:var(--danger)}.quiz-heading,.wrong-note-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}.progress-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;color:var(--text-subtle);font-size:.88rem}.progress-strip span{padding:.8rem .9rem;border:1px solid rgba(15,23,42,.06);border-radius:15px;background:#f7f9fceb}.quiz-card,.quiz-feedback{display:grid;gap:1rem}.kana-symbol,.wrong-symbol{display:inline-flex;align-items:center;justify-content:center;min-height:10.5rem;font-family:Noto Sans JP,sans-serif;font-size:5.4rem;font-weight:700;letter-spacing:-.04em}.result-badge{display:inline-flex;align-items:center;justify-content:center;min-width:5.25rem;min-height:2.5rem;padding:0 .95rem;border-radius:999px;font-weight:700}.result-ok{background:#0f9f6e1f;color:var(--success)}.result-bad{background:#e5484d1f;color:var(--danger)}.summary-box{display:grid;gap:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}.wrong-note-card{display:grid;gap:.75rem}.wrong-count{color:var(--accent);font-size:.86rem;font-weight:700}.tab-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.tab-chip-active{background:var(--accent-soft);border-color:#3182f62e;color:var(--accent-deep)}.error-copy{color:var(--danger);margin:0;font-size:.92rem}@keyframes loginReveal{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes loginSheen{0%,72%,to{transform:translate(-120%)}84%{transform:translate(120%)}}@keyframes loginButtonGlow{0%,70%,to{transform:translate(-110%)}84%{transform:translate(110%)}}@keyframes loginDriftPrimary{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(-10px,16px,0) scale(1.05)}}@keyframes loginDriftSecondary{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(16px,-12px,0) scale(1.06)}}@keyframes loginFloatA{0%,to{transform:translateZ(0) rotate(-5deg)}50%{transform:translate3d(4px,-12px,0) rotate(-1deg)}}@keyframes loginFloatB{0%,to{transform:translateZ(0) rotate(4deg)}50%{transform:translate3d(-6px,10px,0) rotate(0)}}@keyframes loginFloatC{0%,to{transform:translateZ(0)}50%{transform:translate3d(10px,-8px,0)}}@media (max-width: 767px){body{background:var(--surface-app)}.device-stage{padding:0}.phone-shell{width:100%;height:100dvh;border:none;border-radius:0;box-shadow:none}.phone-shell:before,.phone-shell:after{display:none}.app-header,.login-screen{padding-top:calc(env(safe-area-inset-top,0px) + 1.2rem)}}@media (max-width: 360px){.stats-grid,.feedback-grid,.wrong-note-meta{grid-template-columns:minmax(0,1fr)}.kana-symbol,.wrong-symbol{font-size:4.5rem}.login-float-chip{transform:scale(.92)}.login-kicker-row{align-items:flex-start;flex-direction:column}}@media (prefers-reduced-motion: reduce){.login-card-animated:after,.login-submit-button:after,.login-reveal,.login-glow,.login-float-chip{animation:none!important;transform:none!important;opacity:1!important}}