:root{--bg:#f7f6f2;--bg-soft:#edeae2;--card:#fff;--ink:#18181b;--ink-2:#3f3f46;--muted:#71717a;--line:#e4e1d8;--primary:#3730a3;--primary-ink:#fff;--primary-soft:#eef2ff;--brand:#f05a1a;--brand-soft:#fff1eb;--brand-ink:#fff;--ok:#059669;--ok-soft:#ecfdf5;--err:#e11d48;--star:#f59e0b;--chart-avg:#4f46e5;--chart-raw:#f05a1a;--cur:#fef08a;--f-lp:#ea580c;--f-lr:#d97706;--f-lm:#059669;--f-li:#2563eb;--f-ri:#7c3aed;--f-rm:#059669;--f-rr:#d97706;--f-rp:#ea580c;--f-th:#71717a;--radius:22px;--radius-sm:14px;--shadow-sm:0 2px 4px #18181b0a, 0 1px 2px #18181b08;--shadow:0 4px 12px -2px #18181b0f, 0 16px 36px -6px #18181b12;--shadow-lg:0 8px 20px -4px #18181b14, 0 28px 56px -12px #3730a324;--sans:"Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;--mono:"JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;--wrap:1200px}html[lang=zh-CN]{--sans:"Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans", sans-serif}html[data-theme=dark]{--bg:#0b0f19;--bg-soft:#161f33;--card:#131b2e;--ink:#f8fafc;--ink-2:#cbd5e1;--muted:#94a3b8;--line:#94a3b829;--primary:#6366f1;--primary-ink:#fff;--primary-soft:#6366f129;--brand:#ff6b2b;--brand-soft:#ff6b2b29;--brand-ink:#fff;--ok:#10b981;--ok-soft:#10b98129;--err:#f43f5e;--star:#fbbf24;--chart-avg:#60a5fa;--chart-raw:#ff6b2b;--cur:#fbbf243d;--f-lp:#fb923c;--f-lr:#fbbf24;--f-lm:#34d399;--f-li:#60a5fa;--f-ri:#a78bfa;--f-rm:#34d399;--f-rr:#fbbf24;--f-rp:#fb923c;--f-th:#94a3b8;--shadow-sm:0 2px 8px #00000047;--shadow:0 8px 28px -4px #00000073, inset 0 1px 0 #ffffff0f;--shadow-lg:0 20px 50px -10px #000000a6, 0 0 32px #6366f129, inset 0 1px 0 #ffffff1a}*{box-sizing:border-box}html,body{margin:0}body{background-color:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;background-image:radial-gradient(960px 460px at 15% -60px,#f05a1a17,#0000 70%),radial-gradient(960px 500px at 88% -40px,#4f46e51a,#0000 70%);background-repeat:no-repeat;line-height:1.75}html[data-theme=dark] body{background-image:radial-gradient(900px 500px at 20% -80px,#6366f138,#0000 70%),radial-gradient(850px 460px at 85% 0,#ff6b2b26,#0000 70%),radial-gradient(1000px 600px at 50% 60%,#10b9810d,#0000 75%)}a{color:inherit}main{max-width:var(--wrap);margin:0 auto;padding:40px 28px 96px}h1,h2,h3{letter-spacing:-.025em;color:var(--ink)}h1{margin:.3em 0;font-size:2.3rem;font-weight:800;line-height:1.2}h2{letter-spacing:-.02em;font-weight:800}.muted{color:var(--muted);font-size:.92rem}.lead{color:var(--ink-2);font-size:1.08rem}.center{text-align:center;padding:80px 0}.site-header-bar{z-index:20;-webkit-backdrop-filter:saturate(1.8)blur(16px);backdrop-filter:saturate(1.8)blur(16px);background:#f7f6f2d6;border-bottom:1px solid #18181b12;position:sticky;top:0}html[data-theme=dark] .site-header-bar{border-bottom-color:var(--line);background:#0b0f19c7}.site-header{max-width:var(--wrap);justify-content:space-between;align-items:center;gap:16px;height:70px;margin:0 auto;padding:0 28px;display:flex}.logo{letter-spacing:-.02em;align-items:center;gap:11px;font-size:1.25rem;font-weight:800;text-decoration:none;display:inline-flex}.logo-mark{border-radius:11px;flex:none;display:block;box-shadow:0 4px 12px #f05a1a52}html[data-theme=dark] .logo-mark{box-shadow:0 0 18px #ff6b2b73}.site-header nav{align-items:center;gap:8px;display:flex}.site-header .nav-pill{white-space:nowrap;height:38px;color:var(--ink-2);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;align-items:center;gap:7px;padding:0 15px;font-family:inherit;font-size:.92rem;font-weight:700;text-decoration:none;transition:background .15s,color .15s,transform .12s,box-shadow .15s,border-color .15s;display:inline-flex}.site-header .nav-pill:hover,.site-header .nav-pill:focus-within{color:var(--primary);box-shadow:0 2px 0 var(--line), 0 4px 10px #18181b0d;background:#fff}html[data-theme=dark] .site-header .nav-pill:hover,html[data-theme=dark] .site-header .nav-pill:focus-within{color:#fff;box-shadow:none;background:#ffffff14}.site-header .nav-pill.lang-switch,.site-header .nav-pill.theme-switch{border-color:var(--line);background:#ffffffbf;border-radius:12px}.site-header .nav-pill.lang-switch{padding:0 14px}.site-header .nav-pill.theme-switch{justify-content:center;width:38px;padding:0}html[data-theme=dark] .site-header .nav-pill.lang-switch,html[data-theme=dark] .site-header .nav-pill.theme-switch{border-color:var(--line);background:#ffffff0d}.site-header nav>a.nav-pill:last-child{background:var(--primary);color:var(--primary-ink);border-bottom:3px solid #1e1b4b;border-radius:12px;padding:0 18px;box-shadow:0 4px 12px #3730a338}.site-header nav>a.nav-pill:last-child:hover{color:#fff;background:#4338ca;transform:translateY(-1px);box-shadow:0 6px 16px #3730a34d}html[data-theme=dark] .site-header nav>a.nav-pill:last-child{background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);border:1px solid #ffffff2e;border-radius:999px;box-shadow:0 4px 16px #6366f161}html[data-theme=dark] .site-header nav>a.nav-pill:last-child:hover{background:linear-gradient(135deg,#818cf8 0%,#6366f1 100%);box-shadow:0 6px 22px #6366f18c}.site-header .nav-pill .icon{flex:none}.site-footer{background:var(--card);border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}html[data-theme=dark] .site-footer{background:#131b2e99}.site-footer p{max-width:var(--wrap);text-align:center;margin:0 auto;padding:36px 28px}.btn{cursor:pointer;background:var(--primary);color:var(--primary-ink);border:1px solid #0000;border-bottom:3px solid #1e1b4b;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:10px 24px;font-family:inherit;font-size:.98rem;font-weight:700;line-height:1.4;text-decoration:none;transition:background .15s,box-shadow .15s,transform .12s,filter .15s;display:inline-flex;box-shadow:0 4px 12px #3730a32e}.btn:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 8px 20px #3730a342}.btn:active{transform:translateY(1px)}.btn.brand{background:linear-gradient(#ff6b2b 0%,#f05a1a 100%);border-bottom:4px solid #b93800;box-shadow:0 8px 22px -4px #f05a1a73}.btn.brand:hover{background:linear-gradient(#ff7a40 0%,#f56222 100%);box-shadow:0 12px 28px -4px #f05a1a8c}.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm);border-bottom:3px solid #d4d0c5}.btn.ghost:hover{background:#fff;border-color:#c7c2b5 #c7c2b5 #b8b2a3}html[data-theme=dark] .btn{background:linear-gradient(#6366f1 0%,#4f46e5 100%);border:1px solid #ffffff24;border-radius:999px;box-shadow:0 6px 20px -2px #6366f173,inset 0 1px #ffffff40}html[data-theme=dark] .btn.brand{background:linear-gradient(#ff7a40 0%,#ff5714 100%);box-shadow:0 8px 26px -2px #ff6b2b80,inset 0 1px #ffffff4d}html[data-theme=dark] .btn.ghost{color:var(--ink);border-color:var(--line);box-shadow:none;background:#ffffff0f}html[data-theme=dark] .btn.ghost:hover{background:#ffffff1f;border-color:#ffffff47}.btn.large{border-radius:16px;padding:14px 32px;font-size:1.08rem}html[data-theme=dark] .btn.large{border-radius:999px}.btn.small{border-bottom-width:2px;border-radius:10px;padding:5px 14px;font-size:.85rem}.btn.danger{background:var(--err);border-bottom-color:#9f1239}.btn:disabled{opacity:.5;cursor:default;transform:none}.kbd{text-align:center;min-width:1.8em;font-family:var(--mono);background:#fffefb;border:1px solid #d6d2c6;border-bottom-width:3px;border-radius:7px;margin:0 2px;padding:0 7px;font-size:.9em;font-weight:700;display:inline-block}html[data-theme=dark] .kbd{color:#f8fafc;background:#1e293b;border-color:#ffffff2e}.hero{grid-template-columns:1.05fr 1fr;align-items:center;gap:56px;padding:44px 0 76px;display:grid}.hero h1{letter-spacing:-.03em;margin:0 0 20px;font-size:3.3rem;font-weight:800;line-height:1.15}html[data-theme=dark] .hero h1{background:linear-gradient(135deg,#fff 30%,#a5b4fc 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero .lead{max-width:34em;color:var(--ink-2);font-size:1.14rem;line-height:1.75}.hero-cta{flex-wrap:wrap;gap:14px;margin:32px 0 26px;display:flex}.hero-cta .text-link{background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm);border-bottom:3px solid #d4d0c5;border-radius:16px;justify-content:center;align-items:center;padding:13px 26px;font-size:1.02rem;font-weight:700;text-decoration:none;transition:transform .12s,border-color .15s,box-shadow .15s,background .15s;display:inline-flex}.hero-cta .text-link:hover{box-shadow:var(--shadow);border-color:#c7c2b5;transform:translateY(-1px)}html[data-theme=dark] .hero-cta .text-link{border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0f;border-radius:999px}html[data-theme=dark] .hero-cta .text-link:hover{background:#ffffff1f;border-color:#ffffff47}.courses{scroll-margin-top:88px}.hero-points{color:var(--ink-2);flex-wrap:wrap;gap:10px 14px;margin:0;padding:0;font-size:.88rem;font-weight:700;list-style:none;display:flex}.hero-points li{border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#ffffffc7;border-radius:99px;padding:5px 14px}html[data-theme=dark] .hero-points li{background:#ffffff0d}.hero-points li:before{content:"✓";color:var(--ok);margin-right:6px;font-weight:900}.hero-art{filter:drop-shadow(0 24px 44px #18181b1f);width:100%;height:auto;display:block}html[data-theme=dark] .hero-art{filter:drop-shadow(0 24px 48px #0000008c)}.hero-art .ha-dark,html[data-theme=dark] .hero-art .ha-light{display:none}html[data-theme=dark] .hero-art .ha-dark{display:inline}.level-group{margin:16px 0 56px}.level-head{flex-wrap:wrap;align-items:baseline;gap:14px;display:flex}.level-title{margin:0;font-size:1.55rem;font-weight:800}.level-group>.muted{margin:4px 0 0;font-size:.96rem}.course-list{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px;margin:22px 0 0;display:grid}.course-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);border-bottom:4px solid #dcd8cc;flex-direction:column;text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s cubic-bezier(.16,1,.3,1),border-color .2s;display:flex;overflow:hidden}.course-card:hover{box-shadow:var(--shadow-lg);border-color:#c7c2b4;transform:translateY(-5px)}html[data-theme=dark] .course-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:var(--shadow);background:#131b2ec7}html[data-theme=dark] .course-card:hover{border-color:#6366f173}.course-card-art{background-color:#312e81;background-image:radial-gradient(#ffffff29 1px,#0000 1px),linear-gradient(135deg,#312e81 0%,#4338ca 55%,#6366f1 100%);background-size:16px 16px,100% 100%;justify-content:center;align-items:center;gap:10px;height:128px;display:flex;position:relative}.course-card.ja .course-card-art{background-color:#c2410c;background-image:radial-gradient(#ffffff2e 1px,#0000 1px),linear-gradient(135deg,#c2410c 0%,#ea580c 52%,#f59e0b 100%);background-size:16px 16px,100% 100%}html[data-theme=dark] .course-card-art{border-bottom:1px solid var(--line);background:radial-gradient(circle at 50% 0,#6366f159,#0000 70%),linear-gradient(#172036 0%,#0f172a 100%)}html[data-theme=dark] .course-card.ja .course-card-art{background:radial-gradient(circle at 50% 0,#ff6b2b59,#0000 70%),linear-gradient(#27171c 0%,#16121e 100%)}.course-card-art .cap{width:54px;height:54px;color:var(--ink);background:linear-gradient(#fffefb 0%,#f5f2ea 100%);border:1px solid #ffffffe6;border-radius:13px;place-items:center;font-size:1.3rem;font-weight:800;display:grid;transform:translateY(-2px);box-shadow:inset 0 1px #fff,0 5px #cbd5e1,0 8px 18px #00000038}.course-card-art .cap.lit{color:#fff;background:linear-gradient(#ff783d 0%,#f05a1a 100%);border-color:#ff9b6e;box-shadow:inset 0 1px #fff6,0 5px #9a3412,0 10px 22px #f05a1a73}.course-card.ja .course-card-art .cap.lit{color:#fff;background:linear-gradient(#4f46e5 0%,#3730a3 100%);border-color:#818cf8;box-shadow:inset 0 1px #ffffff59,0 5px #1e1b4b,0 10px 22px #1e1b4b73}html[data-theme=dark] .course-card-art .cap{color:#e2e8f0;background:linear-gradient(#26334d 0%,#1a2438 100%);border-color:#ffffff24;box-shadow:0 4px #090d16,0 8px 16px #00000073}html[data-theme=dark] .course-card-art .cap.lit{color:#fff;background:linear-gradient(#6366f1 0%,#4338ca 100%);border-color:#a5b4fc;box-shadow:0 4px #1e1b4b,0 0 22px #6366f1a6}html[data-theme=dark] .course-card.ja .course-card-art .cap.lit{color:#fff;background:linear-gradient(#ff783d 0%,#ea580c 100%);border-color:#fdba74;box-shadow:0 4px #7c2d12,0 0 22px #ff6b2ba6}.course-card.code .course-card-art{background-color:#0f172a;background-image:radial-gradient(#10b98138 1px,#0000 1px),linear-gradient(135deg,#090d16 0%,#1e293b 100%);background-size:16px 16px,100% 100%}html[data-theme=dark] .course-card.code .course-card-art{background:radial-gradient(circle at 50% 0,#10b98152,#0000 70%),linear-gradient(#0d2224 0%,#09131c 100%)}.course-card.code .course-card-art .cap{font-family:var(--mono);color:#f8fafc;background:linear-gradient(#334155 0%,#1e293b 100%);border-color:#475569;box-shadow:inset 0 1px #ffffff26,0 5px #090d16,0 8px 18px #0006}.course-card.code .course-card-art .cap.lit{color:#022c22;background:linear-gradient(#34d399 0%,#10b981 100%);border-color:#6ee7b7;box-shadow:inset 0 1px #ffffff80,0 5px #047857,0 10px 22px #10b98166}.course-card.code .badge,.code>.badge{color:#047857;background:#ecfdf5}html[data-theme=dark] .course-card.code .badge,html[data-theme=dark] .code>.badge{color:#34d399;background:#10b98129}.course-card-body{flex-direction:column;flex:1;gap:6px;padding:22px 26px 24px;display:flex}.course-card h2,.course-card h3{margin:4px 0 2px;font-size:1.25rem;font-weight:800;line-height:1.4}.course-card p{color:var(--muted);margin:0 0 18px;font-size:.95rem;line-height:1.65}.course-card .go{color:var(--primary);margin-top:auto;font-size:.95rem;font-weight:800}html[data-theme=dark] .course-card .go{color:#818cf8}.pbar{background:var(--line);border-radius:99px;height:8px;display:block;overflow:hidden}.pbar>span{border-radius:inherit;background:var(--primary);height:100%;transition:width .4s;display:block}.ja .pbar>span{background:var(--brand)}.code .pbar>span{background:#10b981}.done .pbar>span{background:var(--ok)}.keyboard-notice{background:var(--brand-soft);color:var(--ink);border:1px solid #fdba74;border-radius:14px;align-items:flex-start;gap:12px;margin:0 0 18px;padding:14px 16px;display:flex}html[data-theme=dark] .keyboard-notice{border-color:#ff6b2b66}.keyboard-notice-icon{font-size:1.5rem;line-height:1.2}.keyboard-notice-body{flex:1;min-width:0}.keyboard-notice-body p{color:var(--ink-2);margin:4px 0 10px;font-size:.9rem;line-height:1.6}.keyboard-notice-close{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:2px 4px;font-size:1.4rem;line-height:1}.card-progress{align-items:center;gap:10px;margin:-6px 0 14px;display:flex}.card-progress .pbar{flex:1}.card-progress-text{color:var(--muted);white-space:nowrap;font-size:.82rem;font-weight:800}.card-progress.done .card-progress-text{color:var(--ok)}.card-progress.done .card-progress-text:before{content:"✓ "}.continue{margin:8px 0 48px}.continue h2{margin:0 0 14px;font-size:1.3rem;font-weight:800}.continue-list{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;display:grid}.continue-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-direction:column;gap:14px;padding:20px 22px;display:flex}.continue-card.ja{border-left-color:var(--brand)}.continue-card.code{border-left-color:#10b981}html[data-theme=dark] .continue-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#131b2ec7}.continue-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px;display:flex}.continue-course{color:var(--ink);font-size:1.08rem;font-weight:800;text-decoration:none}.continue-course:hover{text-decoration:underline}.continue-stat{color:var(--muted);font-size:.86rem;font-weight:700}.continue-stat .star{color:var(--star)}.continue-card .btn{text-overflow:ellipsis;white-space:nowrap;align-self:flex-start;max-width:100%;overflow:hidden}.badge{letter-spacing:.03em;background:var(--primary-soft);color:var(--primary);border-radius:99px;align-self:flex-start;padding:3px 11px;font-size:.73rem;font-weight:800}html[data-theme=dark] .badge{color:#a5b4fc}.ja>.badge,.course-card.ja .badge{background:var(--brand-soft);color:#c2410c}html[data-theme=dark] .ja>.badge,html[data-theme=dark] .course-card.ja .badge{color:#fdba74}.features-band{color:#fff;box-shadow:var(--shadow-lg);background-color:#1e1b4b;background-image:radial-gradient(#ffffff1a 1px,#0000 1px),linear-gradient(135deg,#1e1b4b 0%,#312e81 55%,#3730a3 100%);background-size:24px 24px,100% 100%;border-radius:30px;margin:80px 0 0;padding:64px 48px}html[data-theme=dark] .features-band{border:1px solid var(--line);background:radial-gradient(600px 260px at 50% 0,#6366f140,#0000 70%),linear-gradient(#161f33e6 0%,#0f172ae6 100%)}.features-band h2{text-align:center;color:#fff;margin:0 0 40px;font-size:1.75rem}.features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;display:grid}.feature{text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:22px;padding:28px 22px}.feature-icon{color:#fff;background:linear-gradient(135deg,#ff783d,#f05a1a);border-radius:16px;place-items:center;width:58px;height:58px;margin-bottom:16px;display:inline-grid;box-shadow:0 6px 16px #f05a1a59}html[data-theme=dark] .feature-icon{color:#a5b4fc;background:#6366f129;border:1px solid #a5b4fc40;box-shadow:0 0 24px #6366f140}.feature-icon svg{width:26px;height:26px}.feature h3{color:#fff;margin:0 0 8px;font-size:1.15rem}.feature p{color:#ffffffd1;margin:0;font-size:.94rem;line-height:1.7}.faq{max-width:780px;margin-top:72px;margin-left:auto;margin-right:auto}.faq h2{text-align:center;margin-bottom:24px;font-size:1.55rem}.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);border-bottom:3px solid #dcd8cc;margin-bottom:12px;padding:16px 22px}html[data-theme=dark] .faq details{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-size:1.02rem;font-weight:700}.faq details p{color:var(--ink-2);margin:10px 0 0}.course-layout{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:36px;display:grid}.course-side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);border-bottom:4px solid #dcd8cc;padding:26px;position:sticky;top:92px}html[data-theme=dark] .course-side{border-bottom:1px solid var(--line)}.course-side h1{margin:10px 0 8px;font-size:1.45rem}.course-side .lead{color:var(--muted);margin:0;font-size:.92rem}.course-stats{border-top:1px solid var(--line);grid-template-columns:auto 1fr;align-items:center;gap:16px;margin:22px 0 18px;padding-top:20px;display:grid}.ring{width:84px;height:84px}.ring circle{fill:none;stroke-width:9px}.ring .track{stroke:var(--bg-soft)}.ring .bar{stroke:var(--ok);stroke-linecap:round;transition:stroke-dashoffset .4s}.ring text{fill:var(--ink);font-size:19px;font-weight:800}.course-stats dl{gap:6px;margin:0;display:grid}.course-stats dt{color:var(--muted);font-size:.78rem}.course-stats dd{margin:0 0 4px;font-size:1.05rem;font-weight:800}.course-stats dd .star{color:var(--star)}.course-side .btn{width:100%}.login-hint{margin:14px 0 0;font-size:.85rem}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:18px;margin:0;padding:0;list-style:none;display:grid}.lesson-card a{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);height:100%;box-shadow:var(--shadow-sm);border-bottom:4px solid #dcd8cc;flex-direction:column;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;position:relative;overflow:hidden}.lesson-card a:hover{box-shadow:var(--shadow-lg);border-color:#b8b2a3;transform:translateY(-4px)}html[data-theme=dark] .lesson-card a{border:1px solid var(--line)}html[data-theme=dark] .lesson-card a:hover{border-color:#6366f173}.lesson-card .top{justify-content:space-between;align-items:flex-start;padding:15px 16px 0;display:flex}.lesson-card .no{color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.85rem;font-weight:800;line-height:1}.lesson-card .state{border-radius:99px;padding:2px 9px;font-size:.72rem;font-weight:700}.lesson-card .keys{justify-content:center;align-items:center;gap:6px;min-width:0;height:76px;padding:0 12px;display:flex}.lesson-card .keys .cap{min-width:0;height:40px;font-family:var(--mono);color:var(--ink-2);background:#fffefb;border:1px solid #d6d2c6;border-bottom-width:3px;border-radius:10px;flex:0 40px;place-items:center;padding:0 2px;font-size:1.05rem;font-weight:700;display:grid;overflow:hidden}html[data-theme=dark] .lesson-card .keys .cap{background:#1e293b;border-color:#ffffff1f #ffffff1f #090d16}.lesson-card .keys .cap.more{font-family:var(--sans);color:var(--muted);background:0 0;border-style:dashed;border-bottom-width:1px;font-size:.8rem}.lesson-card .preview{-webkit-line-clamp:3;background:var(--bg);height:74px;color:var(--muted);word-break:break-word;border-radius:10px;-webkit-box-orient:vertical;margin:10px 14px 0;padding:7px 10px 0;font-size:.74rem;line-height:1.45;display:-webkit-box;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,#0000);mask-image:linear-gradient(#000 60%,#0000)}html[data-theme=dark] .lesson-card .preview{background:var(--bg-soft)}.lesson-card .preview.en{font-family:var(--mono)}.lesson-card .min{color:var(--muted);font-size:.75rem}.lesson-card .foot{border-top:1px solid var(--line);flex-direction:column;gap:2px;margin-top:auto;padding:11px 16px 13px;display:flex}.lesson-card .t{font-size:.92rem;font-weight:700;line-height:1.4}.lesson-card .s{color:var(--star);letter-spacing:2px;font-size:.9rem}.lesson-card.cleared .state{background:var(--ok-soft);color:var(--ok)}.lesson-card.cleared .keys .cap{background:var(--ok-soft);color:var(--ok);border-color:#a7f3d0}html[data-theme=dark] .lesson-card.cleared .state{color:#34d399}html[data-theme=dark] .lesson-card.cleared .keys .cap{color:#34d399;border-color:#34d39959}.lesson-card.next a{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft), var(--shadow);border-bottom-color:#c2410c}.lesson-card.next .state{background:var(--brand);color:#fff}.lesson-card.next .keys .cap{background:var(--brand-soft);color:#c2410c;border-color:#fdba74}html[data-theme=dark] .lesson-card.next .keys .cap{color:#fdba74;border-color:#ff6b2b80}.off{color:#dcd8cc}html[data-theme=dark] .off{color:#334155}.syllabus{color:var(--ink-2);margin-top:56px;font-size:.9rem}.syllabus summary{cursor:pointer;color:var(--ink);font-size:1.1rem;font-weight:800}.lesson-page{max-width:960px;margin:0 auto}.lesson-head{justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:4px;display:flex}.lesson-head h1{margin:2px 0 0;font-size:1.6rem}.crumbs{justify-content:space-between;align-items:center;font-size:.9rem;display:flex}.crumbs a{color:var(--muted);font-weight:600;text-decoration:none}.crumbs a:hover{color:var(--primary)}.counter{color:var(--primary);background:var(--primary-soft);white-space:nowrap;border-radius:99px;padding:3px 12px;font-size:.8rem;font-weight:700}html[data-theme=dark] .counter{color:#a5b4fc}.lesson{margin-top:10px}.lesson-bar{flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px;display:flex}.lesson-progress{background:var(--bg-soft);border-radius:99px;flex:1;min-width:160px;height:9px;overflow:hidden}.lesson-progress div{background:linear-gradient(90deg,#10b981,#059669);height:100%;transition:width .15s}html[data-theme=dark] .lesson-progress div{background:linear-gradient(90deg,#6366f1,#10b981)}.notice{background:var(--brand-soft);border-radius:var(--radius-sm);border:1px solid #fdba74;margin-bottom:8px;padding:8px 14px}html[data-theme=dark] .notice{border-color:#ff6b2b66}.kb-confirm{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.kb-confirm-actions{gap:8px;display:inline-flex}.kb-switch{border:1px solid var(--line);background:var(--card);border-radius:99px;font-size:.8rem;display:inline-flex;overflow:hidden}.kb-switch button{cursor:pointer;color:var(--muted);font:inherit;background:0 0;border:0;padding:3px 12px;font-weight:600}.kb-switch button.on{background:var(--primary);color:#fff}.sound-switch{color:var(--muted);align-items:center;gap:6px;display:inline-flex}.sound-switch .icon{flex:none}.bar-controls{align-items:center;gap:6px;display:inline-flex}.play-settings .bar-controls{margin-left:auto}.bar-btn{border:1px solid var(--line);background:var(--card);font:inherit;color:var(--muted);cursor:pointer;border-radius:99px;align-items:center;gap:5px;padding:3px 12px;font-size:.8rem;font-weight:600;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.bar-btn:hover:not(:disabled){color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}.bar-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}.bar-btn:disabled{opacity:.45;cursor:default}.start-gate{text-align:center;background:var(--primary-soft);color:var(--primary);border-radius:var(--radius-sm);margin-bottom:8px;padding:9px 14px;font-weight:700}html[data-theme=dark] .start-gate{color:#a5b4fc}.start-gate.clickable{cursor:pointer;transition:filter .15s}.start-gate.clickable:hover{filter:brightness(.97)}.start-gate.countdown,.start-gate.paused{background:var(--brand-soft);color:#c2410c;border:1px solid #fdba74;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;display:flex}html[data-theme=dark] .start-gate.countdown,html[data-theme=dark] .start-gate.paused{color:#fdba74;border-color:#ff6b2b73}.countdown-num{background:var(--brand);color:#fff;width:30px;height:30px;font-family:var(--mono);border-radius:99px;place-items:center;font-size:1.05rem;font-weight:900;animation:.25s cubic-bezier(.16,1,.3,1) pop-in;display:inline-grid}@keyframes pop-in{0%{opacity:.5;transform:scale(.75)}to{opacity:1;transform:scale(1)}}.text-box.waiting{opacity:.55}.dev-login{border-top:1px dashed var(--line);margin-top:32px;padding-top:8px}.text-box{--tb-pad:20px;--tb-lines:3;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--shadow);padding:var(--tb-pad) 42px;max-height:calc(var(--tb-lines) * 2.1em + 2 * var(--tb-pad));-webkit-user-select:none;user-select:none;border-bottom:4px solid #dcd8cc;border-radius:24px;font-size:clamp(1.25rem,3.4vh,1.9rem);line-height:2.1;overflow-y:auto}html[data-theme=dark] .text-box{box-shadow:var(--shadow-lg);background:#131b2ee6;border:1px solid #94a3b838}.w{white-space:nowrap;display:inline-block}.text-box.en{font-family:var(--mono);font-size:clamp(1.15rem,3vh,1.7rem)}.u{border-radius:5px;padding:0 2px}.u.done{color:#c4c0b6}html[data-theme=dark] .u.done{color:#475569}.u.done.err{color:var(--err)}.u.cur{background:var(--cur);box-shadow:inset 0 -3px 0 var(--brand);color:var(--ink)}.u.todo{color:var(--ink)}.u.space.cur{background:#fed7aa}html[data-theme=dark] .u.space.cur{background:#ff6b2b47}.u.skip{color:var(--muted)}.text-box.ja{max-height:calc(var(--tb-lines) * 2.5em + 2 * var(--tb-pad));line-height:2.5}.rb{ruby-position:over}.rb rt{letter-spacing:.02em;font-size:.5em;line-height:1.2}.rb.done{color:#c4c0b6}html[data-theme=dark] .rb.done{color:#475569}.rb.done.err{color:var(--err)}.rb.cur{color:var(--ink);box-shadow:inset 0 -3px 0 var(--brand)}.rb rt .u.cur{box-shadow:none}.romaji-guide{font-family:var(--mono);letter-spacing:.06em;white-space:nowrap;text-align:center;min-height:1.6em;padding:8px 40px 0;font-size:clamp(1.1rem,2.6vh,1.4rem);overflow:hidden}.romaji-guide .done{color:#c4c0b6}.romaji-guide .cur{color:var(--brand);font-weight:800;text-decoration:underline}.romaji-guide .rest{color:#cbc7bd;margin-left:.6em}html[data-theme=dark] .romaji-guide .done{color:#475569}html[data-theme=dark] .romaji-guide .rest{color:#64748b}.finger-hint{text-align:center;min-height:1.8em;margin:10px 0 8px}.kb{-webkit-user-select:none;user-select:none;max-width:880px;box-shadow:inset 0 1px 0 #ffffffb3, var(--shadow);background:linear-gradient(#e2ded5 0%,#d5d0c5 100%);border:1px solid #c8c2b6;border-bottom:5px solid #b5afa2;border-radius:22px;margin:0 auto;padding:14px}html[data-theme=dark] .kb{box-shadow:inset 0 1px 0 #ffffff14, var(--shadow-lg);background:linear-gradient(#161f33 0%,#0f1626 100%);border:1px solid #94a3b82e}.kb-error{background:#ffe4e6;animation:.15s shake}html[data-theme=dark] .kb-error{background:#f43f5e40}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.kb-row{gap:6px;margin-bottom:6px;display:flex}.kb-row:last-child{justify-content:center;margin-bottom:0}.kb-key{min-width:0;height:clamp(34px,5.2vh,50px);font-family:var(--mono);color:var(--ink-2);background:linear-gradient(#fffefb 0%,#f7f4ec 100%);border:1px solid #fffc;border-bottom:4px solid #c9c3b5;border-radius:9px;flex-basis:0;justify-content:center;align-items:center;font-size:.95rem;font-weight:700;display:flex;position:relative;box-shadow:0 1px 2px #18181b14}html[data-theme=dark] .kb-key{color:#e2e8f0;background:linear-gradient(#243049 0%,#1b253b 100%);border:1px solid #ffffff14;border-bottom:4px solid #090d16}.kb-key.sp{color:var(--muted);background:linear-gradient(#efece3 0%,#e5e1d6 100%);border-bottom-color:#b8b2a4;font-size:.7rem}html[data-theme=dark] .kb-key.sp{background:#151d30;border-bottom-color:#090d16}.kb-key.on{color:#fff;background:linear-gradient(#ff783d 0%,#f05a1a 100%);border-color:#ff9b6e #ff9b6e #9a3412;transform:translateY(2px)}html[data-theme=dark] .kb-key.on{box-shadow:0 0 18px #ff6b2ba6}.kb-key.on .kb-kana,.kb-key.on .kb-shift{color:#ffedd5}.kb-shift{color:var(--muted);font-size:.65rem;position:absolute;top:2px;left:6px}.kb-kana{color:#a1a1aa;font-size:.65rem;position:absolute;bottom:1px;right:5px}html[data-theme=dark] .kb-kana{color:#64748b}.kb-bump{opacity:.5;background:currentColor;width:10px;height:2px;position:absolute;bottom:8px}.kb.numpad{grid-template-columns:repeat(4,64px);grid-auto-rows:clamp(34px,5.2vh,50px);gap:6px;width:max-content;display:grid}.kb.numpad .kb-key{height:auto}.result{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center;border-radius:20px;margin-top:16px;padding:32px}.stars{color:var(--star);letter-spacing:6px;font-size:2.8rem}.result-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0;display:grid}.result-grid div{background:var(--bg);border-radius:14px;flex-direction:column;padding:14px;display:flex}.result-grid b{font-size:1.7rem;font-weight:800}.result-grid span{color:var(--muted);font-size:.85rem}.speed-chart{text-align:left;background:var(--bg);border-radius:14px;margin:4px 0 18px;padding:14px 16px 8px}.speed-chart-head{flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:.85rem;display:flex}.speed-chart-legend{color:var(--muted);flex-wrap:wrap;gap:4px 14px;display:inline-flex}.speed-chart-legend>span{align-items:center;gap:6px;display:inline-flex}.speed-chart-stat{color:var(--muted);margin-left:auto}.speed-chart-stat b{color:var(--ink);font-size:1rem}.speed-chart .key{border-radius:1px;width:16px;height:2px;font-style:normal;display:inline-block}.speed-chart .key.avg{background:var(--chart-avg)}.speed-chart .key.raw{background:var(--chart-raw)}.speed-chart .key.err{width:auto;height:auto;color:var(--err);background:0 0;font-weight:800;line-height:1}.speed-chart-plot{position:relative}.speed-chart svg{touch-action:pan-y;width:100%;height:auto;display:block}.speed-chart .grid{stroke:var(--line);stroke-width:1px}.speed-chart .tick{fill:var(--muted);font-size:11px;font-family:var(--sans)}.speed-chart .ln{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.speed-chart .ln.avg{stroke:var(--chart-avg)}.speed-chart .ln.raw{stroke:var(--chart-raw)}.speed-chart .dot{stroke:var(--bg);stroke-width:2px}.speed-chart .dot.avg{fill:var(--chart-avg)}.speed-chart .dot.raw{fill:var(--chart-raw)}.speed-chart .err-mark{fill:var(--err);font-size:15px;font-weight:800;font-family:var(--sans)}.speed-chart .err-count{font-size:10px}.speed-chart .end-label{fill:var(--ink);font-size:13px;font-weight:800;font-family:var(--sans)}.speed-chart .crosshair{stroke:var(--muted);stroke-width:1px;stroke-dasharray:3 3}.speed-chart-tip{pointer-events:none;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);white-space:nowrap;z-index:2;border-radius:10px;padding:8px 12px;font-size:.8rem;position:absolute;top:8px}.speed-chart-tip .tip-title{color:var(--muted);margin-bottom:2px}.speed-chart-tip div{align-items:center;gap:6px;display:flex}.speed-chart-tip b{font-size:.95rem}.speed-chart-tip span{color:var(--muted);margin-left:4px}.speed-chart-table summary{cursor:pointer;color:var(--muted);padding:4px 0;font-size:.8rem}.speed-chart-table table{border-collapse:collapse;font-variant-numeric:tabular-nums;margin:4px 0 8px;font-size:.8rem}.speed-chart-table th,.speed-chart-table td{text-align:right;border-top:1px solid var(--line);padding:2px 12px 2px 0}.result-actions{justify-content:center;gap:12px;margin-top:16px;display:flex}.result .cheer{margin:8px 0 4px}.result .cheer b{color:var(--brand)}.site-rank-badge{background:var(--primary-soft);color:var(--primary);border-radius:99px;margin:2px auto 6px;padding:4px 14px;font-size:.88rem;font-weight:700;display:inline-block}.site-rank-badge.top1{background:var(--brand-soft);color:var(--brand)}.best-tables{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px 32px;margin:8px 0 4px;display:flex}.best-table{border-collapse:collapse;font-variant-numeric:tabular-nums;margin:12px auto 4px;font-size:.9rem}.best-tables .best-table{margin:4px 0}.best-table caption{margin-bottom:4px;font-weight:700}.best-table.site-best caption{color:var(--primary)}.best-table th,.best-table td{text-align:left;border-top:1px solid var(--line);padding:4px 10px}.best-table .s{color:var(--star);letter-spacing:1px}.best-table .s .off{color:var(--line)}.best-table tr.this{background:var(--bg);font-weight:700}.account{max-width:960px}.account>p,.account .account-actions{max-width:640px}.account h2{margin-top:2.2em;font-size:1.1rem}.account-actions{flex-wrap:wrap;gap:10px;margin:16px 0;display:flex}.form-error{color:var(--err);font-weight:600}.prose{max-width:720px}.prose h2{margin-top:1.8em;font-size:1.15rem}.lang-switch{padding:0 14px;position:relative}.lang-switch select{appearance:none;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;outline:0;height:100%;padding:0 18px 0 0}.lang-switch select option{color:var(--ink)}.lang-switch .chevron{pointer-events:none;position:absolute;right:14px}.lang-suggest{background:var(--primary);color:#fff;justify-content:center;align-items:center;gap:12px;padding:6px 12px;font-size:.9rem;display:flex}.lang-suggest a,.lang-suggest .btn{color:#fff}.lang-suggest button{cursor:pointer;color:#ffffffb3;background:0 0;border:0;font-size:1.1rem}.admin{font-size:.95rem}.admin h1{font-size:1.5rem}.admin table{border-collapse:collapse;background:var(--card);border-radius:12px;width:100%;margin-bottom:28px;overflow:hidden}.admin th,.admin td{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:8px 12px}.admin th{color:var(--muted);background:#f8f9fc;font-size:.8rem}.admin .preview{font-family:var(--mono);color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:360px;overflow:hidden}.form{background:var(--card);border:1px solid var(--line);border-radius:12px;gap:14px;padding:20px;display:grid}.form label{gap:4px;font-size:.9rem;font-weight:600;display:grid}.form input,.form textarea,.form select{font:inherit;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;font-weight:400}.form textarea{font-family:var(--mono);min-height:140px}.form .row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;display:grid}.form .actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.gen-box{border:1px solid var(--line);background:#f8f9fc;border-radius:10px;gap:8px;padding:12px;display:grid}.warn{color:var(--err);font-size:.85rem}.ok{color:var(--ok);font-size:.85rem}.admin .err{color:var(--err);margin:0;font-size:.9rem}.admin-top{border-bottom:1px solid var(--line);align-items:center;gap:24px;margin-bottom:20px;padding-bottom:12px;font-size:.9rem;display:flex}.admin-brand{color:var(--ink);font-weight:800;text-decoration:none}.admin-tabs{gap:4px;display:flex}.admin-tabs a,.filters a{color:var(--muted);border-radius:99px;padding:4px 12px;font-weight:600;text-decoration:none}.admin-tabs a:hover,.filters a:hover{color:var(--primary)}.admin-tabs a.on,.filters a.on{background:var(--primary-soft);color:var(--primary)}.admin-top-right{align-items:center;gap:12px;margin-left:auto;display:flex}.admin-top-right a{text-decoration:none}.admin h2 .muted,.admin h3 .muted{font-size:.85rem;font-weight:500}.admin .data-note{margin:0 0 16px;font-size:.8rem}.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:28px;display:grid}.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;gap:2px;padding:14px 16px;display:grid}.kpi-label{color:var(--muted);font-size:.8rem;font-weight:600}.kpi-value{font-variant-numeric:tabular-nums;font-size:1.6rem;line-height:1.2}.kpi-value small{color:var(--muted);font-size:.8rem;font-weight:600}.kpi-sub{color:var(--muted);font-size:.78rem}.admin-cols{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:0 24px;display:grid}.admin-cols h3{margin:0 0 8px;font-size:1rem}.admin table.compact td,.admin table.compact th{padding:6px 12px}.stat-bar{align-items:center;gap:8px;min-width:120px;display:flex}.stat-bar-track{background:#eef1f7;border-radius:99px;flex:1;height:8px;overflow:hidden}.stat-bar-track span{background:var(--primary);border-radius:99px;height:100%;display:block}.stat-bar-num{text-align:right;font-variant-numeric:tabular-nums;min-width:2.5em;font-size:.85rem}.flag{color:#c2410c;background:#fff4e6;border-radius:99px;margin:0 4px 2px 0;padding:1px 8px;font-size:.75rem;font-weight:600;display:inline-block}.flag.dropoff{color:var(--err);background:#ffe3e3}.warn-num{color:var(--err);font-weight:700}.filters{color:var(--muted);flex-wrap:wrap;gap:20px;margin-bottom:12px;font-size:.85rem;display:flex}.tag{color:var(--muted);vertical-align:middle;background:#f1f3f5;border-radius:99px;padding:1px 8px;font-size:.72rem;font-weight:600}.admin kbd{font-family:var(--mono);border:1px solid var(--line);background:#fff;border-bottom-width:2px;border-radius:5px;margin-right:4px;padding:0 6px;font-size:.8rem}.course-meta{flex-wrap:wrap;gap:20px;display:flex}.plain-list{margin:0;padding-left:1.2em}.lesson-stats .preview{max-width:300px;font-size:.8rem}.lesson-stats tr.unpublished td{opacity:.55}fieldset.translation{border:1px dashed var(--line);border-radius:10px;gap:8px;padding:8px 12px;display:grid}fieldset.translation legend{color:var(--muted);padding:0 4px;font-size:.85rem}@media (max-width:900px){.hero{grid-template-columns:1fr;gap:28px;padding-top:16px}.hero h1{font-size:2.1rem}.course-layout{grid-template-columns:minmax(0,1fr)}.course-side{position:static}}@media (max-width:720px){main{padding:20px 16px 64px}.site-header{padding:0 16px}.site-header .nav-sub{display:none}.text-box{padding:18px;font-size:1.4rem}.romaji-guide{padding:10px 18px 0}.kb-key{height:38px;font-size:.75rem}.result-grid{grid-template-columns:repeat(2,1fr)}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lesson-card .keys{gap:4px;padding:0 10px}.lesson-card .keys .cap{flex-basis:32px;height:32px;font-size:.85rem}.lesson-card .no{font-size:1.5rem}.course-list{grid-template-columns:minmax(0,1fr)}.site-header nav{gap:8px}.site-header .nav-pill{height:34px;padding:0 14px;font-size:.9rem}.site-header .nav-pill.theme-switch{width:34px;padding:0}.site-header .lang-switch{padding:0 12px}.lang-switch .chevron{right:12px}.logo{font-size:1.1rem}}@media (max-width:480px){.logo{gap:8px;font-size:1rem}.logo-mark{width:30px;height:30px}.site-header nav{gap:6px}.site-header .nav-pill{gap:4px;padding:0 10px;font-size:.85rem}.site-header .nav-pill.theme-switch{width:34px;padding:0}.lang-switch select{padding-right:0}.lang-switch .chevron{display:none}.site-header .nav-pill .nav-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.site-header nav>a.nav-pill:last-child{justify-content:center;width:38px;padding:0}}.play-page{max-width:960px}.play-page h1{margin-bottom:4px}.back-link{color:var(--muted);font-size:.9rem;text-decoration:none}.back-link:hover{color:var(--primary)}.play-settings{flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 12px;display:flex}.play-settings .muted{margin-left:auto;font-size:.85rem}.kb-switch button:disabled{cursor:default;opacity:.6}.play-hud{gap:10px;margin-bottom:10px;display:flex}.play-hud>div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);align-items:baseline;gap:6px;padding:6px 14px;font-size:.85rem;display:flex}.play-hud b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.35rem}.play-hud b.warn{color:var(--err)}.play-hud .lives{color:var(--err);letter-spacing:2px;font-size:1.1rem}.play-hud .lives .off{color:var(--line)}.play .lesson-progress{margin-bottom:14px}.play .lesson-progress div{background:var(--primary);transition:width .1s linear}.test-next{white-space:nowrap;text-overflow:ellipsis;margin:14px 40px 0;font-size:.95rem;overflow:hidden}.test-rank{margin:6px 0 0;font-size:1.05rem}.test-rank b{color:var(--primary)}.play-result h2{margin:0}.rain-field{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(#eef3fd 0%,#fff 70%);border-radius:20px;transition:box-shadow .15s;position:relative;overflow:hidden}html[data-theme=dark] .rain-field{background:linear-gradient(#0f172a 0%,#161f33 70%)}.rain-field.hit{box-shadow:inset 0 0 0 3px var(--err), var(--shadow)}.rain-ground{border-top:2px solid var(--brand);background:linear-gradient(#ffe3d0,#ffd2b3);height:30px;position:absolute;bottom:0;left:0;right:0}html[data-theme=dark] .rain-ground{background:linear-gradient(#ff6b2b33,#ff6b2b61)}.rain-intro{text-align:center;color:var(--ink-2);place-content:center;gap:8px;padding:24px;display:grid;position:absolute;inset:0}.rain-intro.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2;background:#f7f6f2d1}html[data-theme=dark] .rain-intro.overlay{background:#0f172ad1}.rain-drop{position:absolute;transform:translate(-10%)}.rain-drop .text-box.rain-text{white-space:nowrap;max-height:none;box-shadow:var(--shadow-sm);border-radius:12px;padding:4px 12px;font-size:1.35rem;line-height:1.9;overflow:visible}.rain-drop .text-box.rain-text.en{font-size:1.2rem;line-height:1.5}.rain-drop.target .text-box{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft), var(--shadow)}.rain-drop .w{display:inline}.rain-guide{font-family:var(--mono);color:var(--brand);text-align:center;margin-top:2px;font-size:.8rem}.hunt-target{width:120px;height:120px;font-size:3.4rem;font-weight:800;font-family:var(--mono);color:var(--primary);background:var(--card);border:1px solid var(--line);border-bottom:6px solid var(--primary);box-shadow:var(--shadow);border-radius:22px;place-items:center;margin:8px auto 20px;display:grid}.hunt-target.miss{border-bottom-color:var(--err);color:var(--err)}.game-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:24px;display:grid}.game-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);color:var(--ink);flex-direction:column;gap:6px;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s;display:flex}.game-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.game-icon{background:var(--brand-soft);width:64px;height:64px;color:var(--brand);border-radius:16px;place-items:center;display:grid}.game-card h2{margin:8px 0 0;font-size:1.25rem}.game-card p{color:var(--muted);margin:0 0 8px;font-size:.95rem}.game-card .badge{align-self:flex-start}.game-card .go{color:var(--primary);margin-top:auto;padding-top:8px;font-weight:700}.my{margin-top:28px}.my-tiles{grid-template-columns:repeat(5,1fr);gap:12px;display:grid}.my-tiles>div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-direction:column;gap:2px;padding:16px 18px;display:flex}.my-tiles b{font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:800}.my-tiles b small{color:var(--muted);font-size:.9rem;font-weight:600}.my-tiles span{color:var(--muted);font-size:.85rem}.my-streak{background:var(--brand-soft);color:var(--brand);border-radius:99px;margin-left:6px;padding:1px 8px;font-size:.75rem;font-style:normal;font-weight:700;display:inline-block}.my-section{margin-top:32px}.my-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.account .my-head h2{margin:0 0 12px}.my-head .text-link{color:var(--primary);font-size:.9rem;font-weight:700;text-decoration:none}.my-head .text-link:hover{text-decoration:underline}.my-courses{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.my-courses li{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:var(--radius-sm);align-items:center;gap:16px;padding:14px 18px;display:flex}.my-courses li.ja{border-left-color:var(--brand)}.my-course-main{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.my-course-title{color:var(--ink);font-weight:700;text-decoration:none}.my-course-title:hover{color:var(--primary)}.my-course-main .muted{font-size:.85rem}.my-bar{background:var(--bg-soft);border-radius:99px;height:8px;overflow:hidden}.my-bar div{background:var(--ok);height:100%}.my-complete{color:var(--ok);white-space:nowrap;font-weight:700}.my-tests{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;display:grid}.my-test{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}.my-test h3{justify-content:space-between;gap:8px;margin:0 0 10px;font-size:1rem;display:flex}.my-test h3 .muted{font-size:.85rem;font-weight:600}.my-test .best-table{width:100%;margin:8px 0 0}.my-test .best-table td{white-space:nowrap;padding:4px 6px}.my-spark{border-bottom:1px solid var(--line);align-items:flex-end;gap:4px;height:48px;padding:0 2px;display:flex}.my-spark span{background:var(--primary-soft);border-radius:4px 4px 0 0;flex:1;max-width:22px}.my-spark span.best{background:var(--primary)}.my-games{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.my-game{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);flex-direction:column;gap:4px;padding:16px 18px;text-decoration:none;display:flex}.my-game:hover{border-color:var(--primary)}.my-game b{color:var(--brand);font-size:1.6rem;font-weight:800}.my-game b small{color:var(--muted);font-size:.85rem}.my-game .muted{font-size:.85rem}.account h2.my-danger{border-top:1px solid var(--line);margin-top:48px;padding-top:24px}@media (max-width:720px){.my-tiles{grid-template-columns:repeat(2,1fr)}.play-hud{flex-wrap:wrap}}.fall-field{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(#1b2440 0%,#24305a 100%);border-radius:20px;position:relative;overflow:hidden}.fall-lane{border-right:1px solid #ffffff0f;transition:background .12s;position:absolute;top:0;bottom:0}.fall-lane.lit{background:#ffffff1a}.f-lp{--lane:var(--f-lp)}.f-lr{--lane:var(--f-lr)}.f-lm{--lane:var(--f-lm)}.f-li{--lane:var(--f-li)}.f-ri{--lane:var(--f-ri)}.f-rm{--lane:var(--f-rm)}.f-rr{--lane:var(--f-rr)}.f-rp{--lane:var(--f-rp)}.fall-line{background:linear-gradient(90deg,#ff9b54,#f06a1d,#ff9b54);height:4px;margin-top:-2px;position:absolute;left:0;right:0;box-shadow:0 0 14px #f06a1dcc}.fall-note{color:#18181b;font-family:var(--mono);border-bottom:5px solid var(--lane,var(--brand));background:#fff;border-radius:10px;place-items:center;font-size:1.15rem;font-weight:800;display:grid;position:absolute;box-shadow:0 4px 10px #0000004d}.fall-note.near{box-shadow:0 0 0 3px #ffffff8c, 0 0 18px var(--lane,var(--brand))}.fall-keys{display:flex;position:absolute;left:0;right:0}.fall-keys span{text-align:center;font-family:var(--mono);color:#ffffff73;font-size:.9rem;font-weight:700}.fall-judge{letter-spacing:.06em;pointer-events:none;white-space:nowrap;font-size:1.1rem;font-weight:900;animation:.45s ease-out forwards fall-judge;position:absolute;transform:translate(-50%)}.fall-judge.perfect{color:#ffd43b;text-shadow:0 0 10px #ffd43bb3}.fall-judge.good{color:#8ce99a}.fall-judge.miss{color:#ff8787}@keyframes fall-judge{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-24px)}}.fall-field .rain-intro{color:#e6ecf8;background:#1b2440bf}@media (prefers-reduced-motion:reduce){.fall-judge{animation:none}}