@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@600;700&display=swap";:root{color:#282622;font-synthesis:none;--paper:#fbfaf6;--paper-deep:#f3eee3;--ink:#282622;--muted:#777168;--line:#3b352b1f;--red:#c54832;--red-dark:#a83927;--red-soft:#f8e6df;--green:#2f745d;--green-soft:#e1f0e8;--yellow:#e9b653;--shadow:0 18px 60px #342c2017, 0 3px 14px #342c200d;background:#e9e4d9;font-family:Noto Sans JP,Hiragino Sans,PingFang SC,system-ui,sans-serif}*{box-sizing:border-box}html{background:#e9e4d9}body{min-width:320px;min-height:100vh;margin:0}button{font:inherit;color:inherit}button:focus-visible{outline-offset:2px;outline:3px solid #c5483247}.app-shell{background:var(--paper);width:100%;max-width:620px;min-height:100vh;margin:0 auto;position:relative;box-shadow:0 0 80px #372f231f}.topbar{height:70px;padding:max(12px, env(safe-area-inset-top)) 22px 8px;border-bottom:1px solid var(--line);z-index:20;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fbfaf6eb;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.brand{cursor:pointer;background:0 0;border:0;align-items:center;gap:9px;padding:4px;font-family:Noto Serif JP,serif;font-size:17px;font-weight:700;display:flex}.brand-mark{color:#fff;background:var(--red);border-radius:50% 44% 48% 45%;place-items:center;width:34px;height:34px;font-size:18px;display:grid;transform:rotate(-3deg);box-shadow:inset 0 0 0 1px #0000000f}.streak{color:#8d5b20;background:#f8edcf;border:1px solid #9d69261f;border-radius:999px;align-items:center;gap:5px;padding:7px 10px;font-size:12px;font-weight:600;display:flex}main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}main>section{padding:36px 22px 40px}.page-enter{animation:.28s ease-out both enter}@keyframes enter{0%{opacity:0;transform:translateY(5px)}}.eyebrow,.kicker{color:var(--red);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700}h1,h2,p{margin-top:0}h1{letter-spacing:-.04em;text-wrap:balance;margin:10px 0 12px;font-family:Noto Serif JP,serif;font-size:clamp(30px,8vw,42px);line-height:1.2}h2{letter-spacing:-.025em;margin:4px 0 0;font-family:Noto Serif JP,serif;font-size:22px}.lead{color:var(--muted);max-width:440px;margin-bottom:28px;font-size:15px;line-height:1.75}.today-card{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:22px;padding:22px;position:relative;overflow:hidden}.today-card:before{content:"";border:1px solid #c5483217;border-radius:50%;width:120px;height:120px;position:absolute;top:-55px;right:-48px;box-shadow:0 0 0 18px #c5483206,0 0 0 36px #c5483205}.kana-preview{justify-content:space-between;align-items:center;gap:7px;min-height:78px;display:flex}.kana-preview span{color:#aaa49a;text-align:center;flex:1;font-family:Noto Serif JP,serif;font-size:31px}.kana-preview .current{color:var(--red);font-size:54px}.today-meta{color:var(--muted);border-top:1px dashed #3c373021;justify-content:space-between;padding:13px 2px 17px;font-size:12px;display:flex}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:13px;justify-content:center;align-items:center;gap:8px;width:100%;min-height:52px;font-weight:700;transition:transform .15s,background .15s;display:flex}.primary-button{color:#fff;background:var(--red);box-shadow:0 7px 18px #c548322e}.primary-button:hover{background:var(--red-dark)}.primary-button:active,.secondary-button:active{transform:scale(.985)}.secondary-button{color:#fff;background:#2d2a26;margin-top:24px}.section-heading{justify-content:space-between;align-items:flex-end;margin:36px 0 15px;display:flex}.text-button{color:var(--red);cursor:pointer;background:0 0;border:0;padding:8px 0;font-size:12px;font-weight:700}.progress-strip{border:1px solid var(--line);background:var(--paper-deep);border-radius:18px;grid-template-columns:110px 1fr;align-items:center;gap:20px;padding:19px;display:grid}.progress-ring{background:conic-gradient(var(--red) var(--value), #35302a14 0);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:94px;height:94px;display:flex;position:relative}.progress-ring:after{content:"";background:var(--paper-deep);border-radius:50%;position:absolute;inset:7px}.progress-ring strong,.progress-ring span{z-index:1}.progress-ring strong{font-family:Noto Serif JP;font-size:25px}.progress-ring span{color:var(--muted);font-size:10px}.progress-copy>strong{font-size:14px}.progress-copy p{color:var(--muted);margin:6px 0 8px;font-size:12px;line-height:1.6}.progress-copy button{color:var(--red);cursor:pointer;background:0 0;border:0;padding:0;font-size:11px;font-weight:700}.tip{color:#835b23;background:#f7edd4;border-radius:15px;gap:12px;margin-top:14px;padding:16px;display:flex}.tip svg{flex:none;margin-top:2px}.tip strong{font-size:12px}.tip p{color:#8b704c;margin:3px 0 0;font-size:11px;line-height:1.55}.bottom-nav{z-index:30;width:min(100%,620px);height:calc(70px + env(safe-area-inset-bottom));padding:5px 13px env(safe-area-inset-bottom);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fbfaf6f5;grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-button{color:#948e84;cursor:pointer;background:0 0;border:0;border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:56px;font-size:10px;display:flex}.nav-button.active{color:var(--red);font-weight:700}.nav-button.active svg{stroke-width:2.5px}.segment{background:var(--paper-deep);border-radius:12px;grid-template-columns:1fr 1fr;margin-bottom:20px;padding:4px;display:grid}.segment button{min-height:42px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9px;font-weight:600}.segment button.active{color:var(--ink);background:#fff;box-shadow:0 2px 9px #2c272012}.kana-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.kana-grid button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;min-height:67px;padding:7px 2px;transition:all .15s;display:flex}.kana-grid button:hover{border-color:#c5483247;transform:translateY(-2px);box-shadow:0 7px 18px #30281e0f}.kana-grid strong{font-family:Noto Serif JP;font-size:25px;font-weight:600}.kana-grid span{color:var(--muted);margin-top:2px;font-size:9px}.kana-grid button.seen{background:var(--green-soft);border-color:#2f745d2e}.kana-grid button.weak{background:var(--red-soft);border-color:#c548322e}.lesson-screen{padding-top:18px}.back-button{min-height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0;align-items:center;gap:3px;padding:4px 0;font-size:13px;display:flex}.lesson-hero{text-align:center;padding:18px 0 30px}.script-label{background:var(--red-soft);color:var(--red);border-radius:999px;padding:5px 10px;font-size:10px;font-weight:700;display:inline-block}.lesson-character-nav{grid-template-columns:64px 1fr 64px;align-items:center;margin-top:8px;display:grid}.lesson-character-display{justify-content:center;align-items:center;gap:18px;min-width:0;display:flex}.lesson-character-nav h1{color:var(--red);margin:6px 0 4px;font-size:112px;font-weight:600;line-height:1}.hero-pair{border:1px solid var(--line);background:#ffffffb8;border-radius:13px;justify-items:center;gap:2px;padding:9px 12px;display:grid}.hero-pair span{color:var(--muted);white-space:nowrap;font-size:10px}.hero-pair strong{color:var(--ink);font-family:Noto Serif JP;font-size:34px;line-height:1.15}.lesson-character-nav button{border:1px solid var(--line);min-width:56px;min-height:56px;color:var(--red);cursor:pointer;background:#fff;border-radius:50%;justify-content:center;align-items:center;gap:0;padding:0 5px;transition:transform .15s,border-color .15s;display:flex;box-shadow:0 3px 10px #2b251d0a}.lesson-character-nav button:hover:not(:disabled){border-color:#c5483259;transform:scale(1.06)}.lesson-character-nav button:disabled{opacity:.22;cursor:default}.lesson-character-nav button span{font-family:Noto Serif JP;font-size:16px}.romaji{color:var(--muted);letter-spacing:.08em;font-size:18px}.audio-actions{justify-content:center;gap:9px;margin-top:18px;display:flex}.audio-actions button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:7px;min-height:45px;padding:0 15px;font-size:12px;font-weight:600;display:flex;box-shadow:0 3px 10px #2b251d0a}.audio-actions button:first-child{color:#fff;background:var(--red);border-color:#0000}.origin-card{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:19px;grid-template-columns:105px 1fr;align-items:center;gap:18px;padding:18px;display:grid}.origin-glyph{background:var(--paper-deep);border-radius:13px;flex-direction:column;justify-content:center;align-items:center;min-height:108px;font-family:Noto Serif JP;display:flex}.origin-glyph span{color:#777166;font-size:38px}.origin-glyph i{color:var(--red);font-style:normal;line-height:1}.origin-glyph strong{color:var(--red);font-size:29px}.origin-card h2{margin:3px 0 8px;font-size:19px}.origin-card p,.lesson-block p{color:var(--muted);margin:0;font-size:12px;line-height:1.75}.lesson-block{border-bottom:1px solid var(--line);gap:13px;padding:20px 2px;display:flex}.block-icon{color:#2f745d;background:var(--green-soft);border-radius:11px;flex:none;place-items:center;width:38px;height:38px;display:grid}.block-icon.warm{color:#8b621f;background:#f7edd4}.lesson-block .kicker{color:var(--ink);letter-spacing:.05em}.lesson-block p{margin-top:5px;font-size:13px}.pair-card{color:#fff;text-align:left;cursor:pointer;background:#302e2a;border:0;border-radius:15px;grid-template-columns:1fr auto auto auto;align-items:center;gap:12px;width:100%;margin:18px 0;padding:14px 18px;transition:transform .15s,background .15s;display:grid}.pair-card:hover{background:#3a3833;transform:translateY(-1px)}.pair-card:active{transform:translateY(0)}.pair-card span{color:#c5c0b7;font-size:12px}.pair-card strong{font-family:Noto Serif JP;font-size:28px}.pair-card em{color:#aaa49a;font-size:12px;font-style:normal}.sticky-action{margin-top:10px}.quiz-screen{flex-direction:column;min-height:calc(100vh - 70px);padding-top:12px;display:flex}.quiz-top{color:var(--muted);justify-content:space-between;align-items:center;font-size:12px;display:flex}.quiz-progress{background:#e8e2d8;border-radius:99px;height:4px;overflow:hidden}.quiz-progress i{background:var(--red);border-radius:inherit;height:100%;transition:width .25s;display:block}.quiz-prompt{text-align:center;padding:45px 0 25px}.quiz-prompt h1{color:#292723;margin:18px 0 10px;font-size:120px;font-weight:600;line-height:1}.quiz-prompt p{color:var(--muted);margin-top:14px;font-size:14px}.round-audio{border:1px solid var(--line);width:45px;height:45px;color:var(--red);cursor:pointer;background:#fff;border-radius:50%}.choices{grid-template-columns:1fr 1fr;gap:10px;display:grid}.choices button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:14px;justify-content:center;align-items:center;gap:8px;min-height:68px;font-size:17px;font-weight:700;display:flex;box-shadow:0 3px 12px #30281e09}.choices button:hover{border-color:#c5483259}.choices button.correct{color:var(--green);background:var(--green-soft);border-color:#2f745d4d}.choices button.muted{opacity:.42}.feedback{padding:20px 22px calc(22px + env(safe-area-inset-bottom));justify-content:space-between;align-items:center;gap:12px;margin:auto -22px -40px;display:flex}.feedback.correct{background:var(--green-soft);color:#245c4a}.feedback.wrong{background:var(--red-soft);color:#8b3022}.feedback strong{font-family:Noto Serif JP;font-size:18px}.feedback p{margin:3px 0 0;font-size:11px}.feedback button{color:#fff;cursor:pointer;background:currentColor;border:0;border-radius:11px;min-height:44px;padding:0 17px;font-weight:700}.feedback.correct button{background:var(--green)}.feedback.wrong button{background:var(--red)}.report-total{color:#fff;background:#302e2a;border-radius:18px;grid-template-columns:repeat(3,1fr);padding:21px 8px;display:grid}.report-total div{text-align:center;border-right:1px solid #ffffff1a}.report-total div:last-child{border:0}.report-total strong{font-family:Noto Serif JP;font-size:27px;display:block}.report-total span{color:#bdb7ad;font-size:10px}.weak-list{flex-direction:column;gap:8px;display:flex}.weak-list>button{border:1px solid var(--line);cursor:pointer;text-align:left;background:#fff;border-radius:13px;grid-template-columns:38px 40px 1fr 58px;align-items:center;gap:8px;min-height:62px;padding:10px 13px;display:grid}.weak-list>button>strong{font-family:Noto Serif JP;font-size:26px}.weak-list>button>span{color:var(--muted);font-size:11px}.weak-list>button>div{background:#ebe6dc;border-radius:9px;height:5px;overflow:hidden}.weak-list>button i{background:var(--red);height:100%;display:block}.weak-list>button em{color:var(--red);text-align:right;font-size:10px;font-style:normal}.empty-state{background:var(--paper-deep);min-height:150px;color:var(--muted);text-align:center;border:1px dashed #37322c2e;border-radius:17px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex}.empty-state strong{max-width:260px;font-size:13px;line-height:1.6}@media (width<=370px){main>section{padding-left:16px;padding-right:16px}.origin-card{grid-template-columns:88px 1fr;gap:13px;padding:14px}.progress-strip{grid-template-columns:94px 1fr;gap:12px;padding:14px}.kana-grid{gap:6px}.kana-grid button{min-height:61px}.feedback{margin-left:-16px;margin-right:-16px}}@media (width>=700px){body{padding:24px 0}.app-shell{border-radius:24px;min-height:calc(100vh - 48px);overflow:hidden}.bottom-nav{border-radius:0 0 24px 24px;bottom:24px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}