:root{
  --kj-navy:#16245D;
  --kj-blue:#3F6BFF;
  --kj-blue-2:#4E73DF;
  --kj-bg:#F7F9FC;
  --kj-card:#FFFFFF;
  --kj-border:#E6ECF5;
  --kj-text:#1A1F36;
  --kj-muted:#667085;
  --kj-soft:#EAF2FF;
  --kj-gold:#F59E0B;
  --kj-green:#22C55E;
  --kj-red:#EF4444;
}
*{box-sizing:border-box}
body.kanji-page{margin:0;background:radial-gradient(circle at top left,#edf5ff 0,#f7f9fc 38%,#fff 100%);color:var(--kj-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{text-decoration:none;color:inherit}.kj-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px clamp(16px,4vw,44px);background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--kj-border)}.kj-brand{display:flex;align-items:center;gap:10px}.kj-brand img{width:44px;height:44px;object-fit:contain}.kj-brand b{display:block;color:var(--kj-navy);letter-spacing:.04em}.kj-brand small{display:block;color:var(--kj-muted);font-size:12px}.kj-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.kj-nav a{padding:10px 13px;border-radius:999px;font-weight:800;color:var(--kj-navy);font-size:13px}.kj-nav a:hover,.kj-nav a.active{background:var(--kj-soft);color:var(--kj-blue)}
.kj-wrap{max-width:1220px;margin:0 auto;padding:26px 18px 60px}.kj-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) 380px;gap:24px;align-items:stretch;padding:30px;border-radius:32px;background:linear-gradient(135deg,#16245D 0%,#3156DB 58%,#75A7FF 100%);box-shadow:0 18px 55px rgba(22,36,93,.18);color:#fff}.kj-hero:before{content:"";position:absolute;inset:auto -10% -45% 35%;height:240px;background:rgba(255,255,255,.13);border-radius:50%}.kj-copy{position:relative;z-index:1}.kj-pill{display:inline-flex;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:900;font-size:13px}.kj-copy h1{margin:18px 0 10px;font-size:clamp(34px,6vw,62px);line-height:.95;letter-spacing:-.04em}.kj-copy p{max-width:650px;margin:0;color:rgba(255,255,255,.86);font-weight:650;line-height:1.65}.kj-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.kj-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:15px;font-weight:900;box-shadow:0 10px 28px rgba(22,36,93,.12)}.kj-btn.primary{background:#fff;color:var(--kj-navy)}.kj-btn.white{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}.kj-showcase{position:relative;z-index:1;display:grid;grid-template-columns:150px 1fr;align-items:center;gap:18px;padding:22px;border:1px solid rgba(255,255,255,.28);border-radius:28px;background:rgba(255,255,255,.14);backdrop-filter:blur(14px)}.kj-big-kanji{display:grid;place-items:center;width:150px;height:150px;border-radius:28px;background:#fff;color:var(--kj-navy);font-family:"Noto Sans JP",system-ui,sans-serif;font-size:82px;font-weight:900;box-shadow:inset 0 -8px 0 rgba(63,107,255,.11)}.kj-showcase-info small{display:block;opacity:.78;font-weight:850}.kj-showcase-info b{display:block;margin:8px 0 10px;font-size:20px}.kj-showcase-info span{display:block;margin-top:6px;color:rgba(255,255,255,.86);font-weight:750}
.kj-dashboard{display:grid;grid-template-columns:290px minmax(0,1fr);gap:22px;margin-top:24px}.kj-side{display:flex;flex-direction:column;gap:16px}.kj-level-card,.kj-progress-card,.kj-method-card,.kj-main{background:var(--kj-card);border:1px solid var(--kj-border);border-radius:24px;box-shadow:0 8px 24px rgba(22,36,93,.08)}.kj-level-card{padding:20px}.kj-level-card>b{display:block;color:var(--kj-blue);font-size:42px;line-height:1}.kj-level-card>span{display:block;color:var(--kj-muted);font-weight:750;margin-top:4px}.kj-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:16px}.kj-levels a{display:grid;place-items:center;min-height:38px;border-radius:12px;background:var(--kj-bg);font-weight:900;color:var(--kj-navy)}.kj-levels a.active{background:var(--kj-blue);color:#fff}.kj-progress-card,.kj-method-card{padding:20px}.kj-progress-card h3,.kj-method-card h3{margin:0 0 14px;color:var(--kj-navy)}.kj-ring{display:grid;place-items:center;margin:0 auto 12px;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--kj-blue) 0 43deg,#EAF2FF 43deg 360deg)}.kj-ring span{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#fff;color:var(--kj-navy);font-weight:950;font-size:24px}.kj-progress-card p{margin:0;color:var(--kj-muted);font-weight:650;line-height:1.5}.kj-method-card ol{margin:0;padding-left:20px;color:var(--kj-muted);font-weight:750;line-height:1.9}.kj-main{padding:20px}.kj-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kj-stats article{padding:18px;border-radius:18px;background:linear-gradient(180deg,#F8FBFF,#fff);border:1px solid var(--kj-border)}.kj-stats b{display:block;color:var(--kj-navy);font-size:24px}.kj-stats span{color:var(--kj-muted);font-weight:750;font-size:13px}.kj-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:18px 0}.kj-search{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;padding:0 14px;min-height:48px;background:var(--kj-bg);border:1px solid var(--kj-border);border-radius:16px}.kj-search input{width:100%;border:0;background:transparent;outline:0;font-weight:750;color:var(--kj-text)}.kj-filter{display:flex;gap:8px;flex-wrap:wrap}.kj-filter button{border:0;padding:12px 14px;border-radius:14px;background:var(--kj-bg);color:var(--kj-navy);font-weight:900;cursor:pointer}.kj-filter button.active{background:var(--kj-blue);color:#fff}.kj-section-title{margin:20px 0 12px}.kj-section-title h2{margin:0;color:var(--kj-navy);font-size:22px}.kj-section-title p{margin:5px 0 0;color:var(--kj-muted);font-weight:650}.kj-section-title code{background:var(--kj-soft);color:var(--kj-blue);padding:2px 6px;border-radius:8px}.kj-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.kj-group{display:block;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--kj-border);transition:.2s ease;box-shadow:0 8px 24px rgba(22,36,93,.055)}.kj-group:hover{transform:translateY(-3px);border-color:#bcd0ff}.kj-group i{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:var(--kj-soft);font-style:normal;font-size:24px}.kj-group b{display:block;margin-top:12px;color:var(--kj-navy);font-size:17px}.kj-group span{display:block;margin-top:5px;color:var(--kj-muted);font-weight:750;font-size:13px}.kj-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.kj-card{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;border-radius:22px;background:#fff;border:1px solid var(--kj-border);box-shadow:0 8px 24px rgba(22,36,93,.05);transition:.2s ease}.kj-card:hover{transform:translateY(-2px);border-color:#bcd0ff}.kj-char{display:grid;place-items:center;width:86px;height:86px;border-radius:20px;background:linear-gradient(180deg,#F5F8FF,#fff);border:1px solid var(--kj-border);font-family:"Noto Sans JP",system-ui,sans-serif;font-size:46px;font-weight:950;color:var(--kj-navy)}.kj-card h3{margin:0;color:var(--kj-navy);font-size:18px}.kj-card p{margin:4px 0 0;color:var(--kj-muted);font-weight:700}.kj-readings{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.kj-readings span{padding:5px 8px;border-radius:999px;background:var(--kj-soft);color:var(--kj-blue);font-size:12px;font-weight:900}.kj-tag{align-self:start;padding:7px 10px;border-radius:999px;background:#DCFCE7;color:#15803D;font-weight:950;font-size:12px}.kj-tag.vip{background:#FEF3C7;color:#B45309}.kj-empty{padding:22px;border-radius:18px;background:var(--kj-bg);color:var(--kj-muted);font-weight:800;text-align:center}
@media(max-width:920px){.kj-hero{grid-template-columns:1fr}.kj-dashboard{grid-template-columns:1fr}.kj-stats{grid-template-columns:repeat(2,1fr)}.kj-groups{grid-template-columns:repeat(2,1fr)}.kj-list{grid-template-columns:1fr}.kj-nav{display:none}}
@media(max-width:560px){.kj-wrap{padding:16px 12px 48px}.kj-hero{padding:22px;border-radius:24px}.kj-showcase{grid-template-columns:1fr}.kj-big-kanji{width:100%;height:130px}.kj-stats,.kj-groups{grid-template-columns:1fr}.kj-card{grid-template-columns:70px minmax(0,1fr)}.kj-char{width:70px;height:70px;font-size:38px}.kj-tag{grid-column:1/-1;justify-self:start}}