:root{--bg:#f4f5fb;--bg-grad:radial-gradient(1200px 600px at 90% -10%, #eef0ff 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #ffe7df 0%, transparent 55%), #f4f5fb;--surface:#fff;--surface-2:#f9faff;--surface-3:#f1f3fb;--ink:#0f172a;--ink-2:#475569;--ink-3:#94a3b8;--line:#e6e8f2;--line-2:#d8dceb;--primary:#4f46e5;--primary-2:#7c3aed;--primary-soft:#eef0ff;--primary-grad:linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);--accent:#fb7185;--accent-2:#f97316;--accent-soft:#fff1ec;--accent-grad:linear-gradient(135deg, #fb7185 0%, #f97316 100%);--success:#10b981;--success-soft:#ecfdf5;--warn:#f59e0b;--danger:#ef4444;--shadow-sm:0 1px 2px #0f172a0a, 0 1px 1px #0f172a0f;--shadow:0 8px 24px -8px #0f172a1a, 0 2px 4px #0f172a0a;--shadow-lg:0 24px 48px -16px #0f172a2e, 0 8px 16px -8px #0f172a14;--shadow-glow:0 12px 32px -8px #4f46e559;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px}@supports (font-variation-settings:normal){body{font-feature-settings:"kern", "liga", "calt"}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{background:var(--bg-grad);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background-attachment:fixed;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Inter,Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif;font-size:15px;line-height:1.55}button{color:inherit;font-family:inherit}a{color:var(--primary);text-decoration:none}.app{background:var(--surface);max-width:440px;min-height:100vh;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 0 80px #0f172a1a,0 0 0 1px #0f172a05}.topbar{z-index:50;-webkit-backdrop-filter:saturate(160%)blur(14px);background:#ffffffd9;border-bottom:1px solid #0f172a0f;align-items:center;gap:10px;min-height:54px;padding:14px 18px;display:flex;position:sticky;top:0}.topbar h1{letter-spacing:-.01em;flex:1;margin:0;font-size:16px;font-weight:700}.topbar .back{background:var(--surface-3);cursor:pointer;width:34px;height:34px;color:var(--ink);border:none;border-radius:50%;place-items:center;font-size:16px;line-height:1;transition:background .15s;display:grid}.topbar .back:hover{background:var(--line)}.topbar .icon-btn{cursor:pointer;color:var(--ink-2);background:0 0;border:none;padding:6px;font-size:18px}.page{padding:18px 16px 110px}.tabbar{-webkit-backdrop-filter:saturate(160%)blur(18px);z-index:100;width:100%;max-width:440px;padding:6px 4px max(6px, env(safe-area-inset-bottom));background:#ffffffeb;border-top:1px solid #0f172a0f;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.tabbar button{cursor:pointer;color:var(--ink-3);letter-spacing:.02em;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 4px 6px;font-size:10px;font-weight:600;transition:color .15s;display:flex;position:relative}.tabbar button .ic{font-size:22px;transition:transform .2s}.tabbar button.active{color:var(--primary)}.tabbar button.active .ic{transform:translateY(-2px)}.tabbar button.active:before{content:"";background:var(--primary-grad);border-radius:0 0 3px 3px;width:22px;height:3px;position:absolute;top:0;left:50%;transform:translate(-50%)}.hero{border-radius:var(--r-xl);color:#fff;background:radial-gradient(circle at 90% 10%, #ffffff38, transparent 40%), radial-gradient(circle at -10% 110%, #ffffff2e, transparent 50%), var(--primary-grad);box-shadow:var(--shadow-glow);margin:4px 0 18px;padding:18px 20px 22px;position:relative;overflow:hidden}.hero:after{content:"";pointer-events:none;background:radial-gradient(circle,#ffffff2e 0%,#0000 70%);width:160px;height:160px;position:absolute;top:-40px;right:-40px}.hero .greeting{color:#ffffffd9;letter-spacing:.02em;margin:0 0 4px;font-size:12px;font-weight:500}.hero h2{letter-spacing:-.015em;margin:0 0 14px;font-size:22px;font-weight:700;line-height:1.3}.hero p.greeting+h2{color:#fff}.streak{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff38;border:1px solid #ffffff4d;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-flex}.hero.plain{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);border:1px solid var(--line)}.hero.plain .greeting{color:var(--ink-2)}.hero.plain h2{color:var(--ink)}.hero.plain .streak{color:#c84a1f;background:linear-gradient(135deg,#fff4ee,#ffe6d8);border:0}.pillars{gap:12px;margin-bottom:22px;display:grid}.pillar{border-radius:var(--r-lg);color:#fff;cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow);isolation:isolate;border:none;padding:20px 22px;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}.pillar:before{content:"";z-index:-1;background:radial-gradient(circle at 100% 0,#fff3 0%,#0000 50%);position:absolute;inset:0}.pillar:active{transform:scale(.985)}.pillar:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.pillar.vocab{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 60%,#a855f7 100%)}.pillar.eiken{background:linear-gradient(135deg,#f97316 0%,#fb7185 60%,#ec4899 100%)}.pillar h3{letter-spacing:-.01em;margin:0 0 4px;font-size:18px;font-weight:700}.pillar p{opacity:.92;margin:0;font-size:12px;line-height:1.5}.pillar .pillar-emoji{opacity:.9;filter:drop-shadow(0 6px 14px #00000040);font-size:52px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.sec-head{justify-content:space-between;align-items:baseline;margin:22px 4px 12px;display:flex}.sec-head h4{color:var(--ink);letter-spacing:.02em;text-transform:uppercase;margin:0;font-size:13px;font-weight:700}.sec-head a{color:var(--primary);cursor:pointer;font-size:12px;font-weight:600}.today{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:6px 14px}.today .row{cursor:pointer;align-items:center;gap:14px;padding:14px 0;transition:padding-left .15s;display:flex}.today .row+.row{border-top:1px solid var(--line)}.today .row:hover{padding-left:4px}.today .row .ico{background:var(--primary-grad);color:#fff;border-radius:12px;flex-shrink:0;place-items:center;width:40px;height:40px;font-size:18px;display:grid;box-shadow:0 4px 10px -4px #4f46e573}.today .row .ico.orange{background:var(--accent-grad);box-shadow:0 4px 10px -4px #fb718580}.today .row .text{flex:1;min-width:0}.today .row .text strong{letter-spacing:-.005em;font-size:14px;font-weight:600;display:block}.today .row .text span{color:var(--ink-2);font-size:12px}.today .row .chev{color:var(--ink-3);font-size:18px}.progress{background:var(--surface-3);border-radius:6px;height:6px;margin-top:8px;overflow:hidden}.progress>span{background:var(--primary-grad);border-radius:6px;height:100%;transition:width .4s cubic-bezier(.16,1,.3,1);display:block}.list{gap:10px;display:grid}.list-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow-sm);align-items:center;gap:12px;padding:14px;transition:transform 80ms,border-color .15s,box-shadow .15s;display:flex}.list-item:active{transform:scale(.99)}.list-item:hover{border-color:var(--line-2);box-shadow:var(--shadow)}.list-item .badge{background:var(--primary-soft);width:42px;height:42px;color:var(--primary);border-radius:12px;flex-shrink:0;place-items:center;font-size:13px;font-weight:700;display:grid}.list-item .badge.orange{background:var(--accent-soft);color:var(--accent-2)}.list-item .badge.green{background:var(--success-soft);color:var(--success)}.list-item .badge.gray{background:var(--surface-3);color:var(--ink-2)}.list-item .body{flex:1;min-width:0}.list-item .body strong{letter-spacing:-.005em;margin-bottom:2px;font-size:15px;font-weight:600;display:block}.list-item .body small{color:var(--ink-2);font-size:12px}.list-item .right{color:var(--ink-3);text-align:right;font-size:12px}.list-item .right .num{color:var(--ink);font-size:16px;font-weight:700}.modes{grid-template-columns:1fr 1fr;gap:10px;display:grid}.mode{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);padding:16px 14px;transition:transform 80ms,box-shadow .15s,border-color .15s}.mode:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-1px)}.mode .em{margin-bottom:8px;font-size:26px;display:block}.mode strong{margin-bottom:2px;font-size:14px;font-weight:600;display:block}.mode small{color:var(--ink-2);font-size:11px}.flashcard{border:1px solid var(--line);border-radius:var(--r-xl);text-align:center;min-height:280px;box-shadow:var(--shadow);cursor:pointer;background:linear-gradient(#fff 0%,#fafbff 100%);flex-direction:column;justify-content:center;margin:16px 0;padding:40px 24px;transition:transform .15s;display:flex}.flashcard:active{transform:scale(.99)}.flashcard .word{letter-spacing:-.015em;margin-bottom:8px;font-size:38px;font-weight:700}.flashcard .pron{color:var(--ink-2);margin-bottom:20px;font-size:14px}.flashcard .meaning{color:var(--ink);background:var(--primary-soft);border-radius:12px;margin:0 auto 12px;padding:12px 18px;font-size:16px;font-weight:500;display:inline-block}.flashcard.hidden-meaning .meaning{visibility:hidden}.card-actions{grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px;display:grid}.card-actions button{border:1.5px solid var(--line);background:var(--surface);cursor:pointer;border-radius:12px;padding:12px 4px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s,transform 80ms}.card-actions button:active{transform:scale(.97)}.card-actions .again{color:var(--danger);border-color:#ef444459}.card-actions .again:hover{background:#fef2f2}.card-actions .hard{color:var(--warn);border-color:#f59e0b59}.card-actions .hard:hover{background:#fffbeb}.card-actions .good{color:var(--success);border-color:#10b98159}.card-actions .good:hover{background:var(--success-soft)}.card-counter{text-align:center;color:var(--ink-2);margin-bottom:12px;font-size:12px}.quiz-q{background:linear-gradient(135deg, var(--surface), var(--surface-2));border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);margin:12px 0;padding:20px}.quiz-q .q-label{color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:11px;font-weight:600}.quiz-q .q-text{letter-spacing:-.01em;font-size:18px;font-weight:600;line-height:1.4}.choices{gap:8px;display:grid}.choice{background:var(--surface);border:1.5px solid var(--line);cursor:pointer;text-align:left;border-radius:12px;align-items:center;gap:12px;width:100%;padding:14px;font-size:14px;transition:border-color .15s,background .15s,transform 80ms;display:flex}.choice:active{transform:scale(.99)}.choice:hover:not(:disabled){border-color:var(--primary);background:var(--primary-soft)}.choice:disabled{cursor:default}.choice .letter{background:var(--primary-soft);width:28px;height:28px;color:var(--primary);border-radius:50%;flex-shrink:0;place-items:center;font-size:12px;font-weight:700;display:grid}.choice.correct{border-color:var(--success);background:var(--success-soft)}.choice.correct .letter{background:var(--success);color:#fff}.choice.wrong{border-color:var(--danger);background:#fef2f2}.choice.wrong .letter{background:var(--danger);color:#fff}.ai-panel{border-radius:var(--r-lg);background:radial-gradient(circle at 90% 10%,#7c3aed14 0%,#0000 50%),linear-gradient(135deg,#f5f0ff 0%,#ecf0ff 100%);border:1px solid #dde3fb;margin-bottom:14px;padding:18px;position:relative;overflow:hidden}.ai-panel:before{content:"";pointer-events:none;background:radial-gradient(circle,#7c3aed1f,#0000 65%);width:220px;height:220px;position:absolute;top:-50%;right:-20%}.ai-panel .tag{color:var(--primary);letter-spacing:.08em;background:#fff;border-radius:999px;align-items:center;margin-bottom:10px;padding:4px 10px;font-size:10px;font-weight:800;display:inline-flex;box-shadow:0 2px 6px #4f46e526}.ai-panel h4{letter-spacing:-.01em;margin:0 0 4px;font-size:16px}.ai-panel p{color:var(--ink-2);margin:0;font-size:12px;line-height:1.6}.field{margin-bottom:14px}.field label{color:var(--ink-2);letter-spacing:.02em;margin-bottom:6px;font-size:12px;font-weight:600;display:block}.field input,.field select,.field textarea{border:1.5px solid var(--line);background:#fff;border-radius:10px;width:100%;padding:12px 14px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #4f46e526}.chips{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.chip{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:500;transition:all .15s}.chip:hover{border-color:var(--line-2)}.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}.btn{background:var(--primary-grad);color:#fff;cursor:pointer;letter-spacing:.01em;border:none;border-radius:12px;width:100%;padding:14px;font-size:15px;font-weight:600;transition:transform 80ms,box-shadow .15s,opacity .15s;display:block;box-shadow:0 6px 18px -6px #4f46e58c}.btn:active:not(:disabled){transform:scale(.99);box-shadow:0 4px 12px -6px #4f46e58c}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn.secondary{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}.btn.secondary:hover{border-color:var(--line-2)}.btn.accent{background:var(--accent-grad);box-shadow:0 6px 18px -6px #fb71858c}.stats{grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0 18px;display:grid}.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);text-align:center;box-shadow:var(--shadow-sm);padding:14px 8px;transition:transform .15s,box-shadow .15s}.stat:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.stat .n{color:var(--ink);letter-spacing:-.02em;background:var(--primary-grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:800;line-height:1.1}.stat .l{color:var(--ink-2);margin-top:4px;font-size:11px;font-weight:500}.passage{background:linear-gradient(135deg, var(--surface), var(--surface-2));border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);margin:12px 0;padding:16px;font-size:14px;line-height:1.75}.passage .src{color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;font-size:10px;font-weight:700}.placeholder{color:var(--ink-3);text-align:center;padding:32px 20px;font-size:13px}.spinner{border:3px solid var(--line);border-top-color:var(--primary);border-right-color:var(--primary-2);border-radius:50%;width:26px;height:26px;margin:18px auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.err{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;margin:10px 0;padding:11px 13px;font-size:13px}.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes page-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.page>*{animation:.32s cubic-bezier(.16,1,.3,1) both page-in}.page>:first-child{animation-delay:20ms}.page>:nth-child(2){animation-delay:60ms}.page>:nth-child(3){animation-delay:.1s}.page>:nth-child(4){animation-delay:.14s}.page>:nth-child(5){animation-delay:.18s}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}