@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&family=VT323&display=swap');@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;700;800&family=Noto+Sans+JP:wght@500;700&display=swap');:root{--ink:#1d2a26;--muted:#708078;--paper:#f5f2eb;--card:#fbfaf6;--line:#d8ddd4;--sage:#a9c9b3;--deep:#3d6653;--coral:#e58165}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,sans-serif}.shell{max-width:1120px;min-height:100vh;margin:auto;padding:0 46px;display:flex;flex-direction:column}header{height:84px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font-weight:800;font-size:14px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px}.brand b{font-size:11px;letter-spacing:-1px;color:var(--paper);background:var(--ink);padding:9px;border-radius:8px}.status,small{font:500 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}main{flex:1}#setup{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:92px 4% 100px;align-items:center}.intro h1,h2{font-size:clamp(50px,6vw,78px);line-height:.98;letter-spacing:-.065em;margin:20px 0 26px}.intro h1 i,h2 i{font-family:Georgia,serif;font-weight:400;color:var(--deep)}.intro p{max-width:420px;color:var(--muted);line-height:1.8;font-size:14px}.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 16px 44px #35453c0d}.panel-top,.review-head{display:flex;justify-content:space-between;align-items:center}.panel-top strong{font-size:13px}.panel-top small{font-size:9px}fieldset{border:0;padding:0;margin:30px 0 0}legend{font-weight:700;font-size:12px;margin-bottom:11px}.levels,.modes{display:grid;gap:8px}.levels{grid-template-columns:repeat(5,1fr)}.modes{grid-template-columns:1fr 1fr}.levels button,.modes button{border:1px solid var(--line);background:none;border-radius:10px;padding:11px 8px;text-align:left;font-weight:700;font-size:12px}.levels span,.modes span{display:block;color:var(--muted);font-size:9px;font-weight:500;margin-top:4px;white-space:nowrap}.levels button.active,.modes button.active{background:var(--sage);border-color:var(--sage)}.start{border:0;background:var(--ink);color:#fff;width:100%;border-radius:10px;padding:15px 17px;margin-top:27px;text-align:left;font-weight:700;font-size:12px;display:flex;justify-content:space-between}.start:hover{background:var(--deep)}.note{text-align:center;color:var(--muted);font-size:10px;margin:16px 0 0}#quiz,#results{padding:42px 7% 80px}.quizbar{display:flex;justify-content:space-between;align-items:center}.quizbar button{border:0;background:none;color:var(--muted);font-size:11px}.track{height:4px;background:#e2e5df;margin-top:22px}.track span{display:block;height:100%;background:var(--coral)}.question{text-align:center;max-width:670px;margin:78px auto}.word{margin:21px 0 46px}.word strong{display:block;font-family:'Noto Sans JP',sans-serif;font-size:clamp(70px,12vw,128px);line-height:1;letter-spacing:-.1em}.word span{display:block;font-family:'Noto Sans JP',sans-serif;font-size:18px;letter-spacing:.12em;color:var(--deep);margin-top:14px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:11px;text-align:left}.answers button{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:17px;font-size:13px}.answers button:hover{border-color:var(--deep)}.answers button.correct{background:#d9eadc;border-color:#9bc3a4}.answers button.wrong{background:#f7ddd5;border-color:#e8a18e}.feedback{height:22px;font-size:12px;font-weight:700}.feedback.good{color:var(--deep)}.feedback.bad{color:#ae5940}h2{margin-top:20px}.score{border-block:1px solid var(--line);padding:28px 0;margin:45px 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.score strong{font-size:78px;letter-spacing:-.08em}.score small{flex:1 0 100%;letter-spacing:0;text-transform:none;font:12px Manrope;color:var(--muted)}.review-head{border-bottom:1px solid var(--line);padding-bottom:13px}.review-head h3{font-size:15px;margin:0}.review-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line);padding:17px 0}.review-row strong{font-size:19px}.review-row span{font-family:'Noto Sans JP';color:var(--deep);font-size:13px}.review-row em{font-style:normal;color:var(--muted);text-align:right;font-size:12px}footer{height:68px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}footer span{font:500 9px 'DM Mono';letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}[hidden]{display:none!important}@media(max-width:700px){.shell{padding:0 20px}header{height:72px}.status{font-size:9px}#setup{display:block;padding:55px 0}.intro{margin-bottom:48px}.intro h1{font-size:55px}.panel{padding:22px 18px}.levels{grid-template-columns:repeat(3,1fr)}#quiz,#results{padding:30px 0 65px}.question{margin-top:62px}.answers{grid-template-columns:1fr}.review-row{grid-template-columns:1fr 1fr}.review-row em{grid-column:1/-1;text-align:left;margin-top:5px}}\n+++.learn-link{border:0;background:none;color:var(--deep);width:100%;padding:14px 0 0;font-weight:700;font-size:12px;text-align:left}.learn-link span{float:right}.learn-card{max-width:600px;margin:76px auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:52px 28px}.learn-card strong{display:block;font-family:'Noto Sans JP';font-size:clamp(72px,12vw,130px);line-height:1;margin:24px 0 16px}.learn-card span{font-family:'Noto Sans JP';font-size:20px;letter-spacing:.12em;color:var(--deep)}.learn-card p{font-size:18px;color:var(--muted);margin:14px 0 26px}.reveal{border:1px solid var(--line);background:none;border-radius:9px;padding:12px 20px;font-weight:700;font-size:12px}.learn-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}.learn-actions button{border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:12px 30px;font-weight:700;font-size:12px}.learn-actions button:last-child{background:var(--ink);border-color:var(--ink);color:#fff}\n++.listen{border:0;background:none;color:var(--deep);font-size:11px;font-weight:700;margin-top:14px;cursor:pointer}.listen:before{content:'◌ ';font-size:16px}.learn-card .listen{display:block;margin:12px auto 0}\n+.voice-controls{display:flex;justify-content:center;gap:14px;margin:18px 0 4px}.voice-controls label{font:500 9px 'DM Mono';text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.voice-controls select{display:block;margin-top:5px;border:1px solid var(--line);border-radius:7px;background:var(--paper);padding:6px 8px;color:var(--ink);font:500 11px Manrope}
body{background:#f7efff;color:#33264d;font-family:'VT323',monospace;background-image:linear-gradient(rgba(154,123,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(154,123,255,.08) 1px,transparent 1px);background-size:24px 24px}.shell{padding:0 42px}.brand{font-family:'Press Start 2P',monospace}.brand b{background:#ff3e9d;box-shadow:5px 5px 0 #33264d}.status{font-family:'VT323';color:#9a7bff}header{border-bottom:3px solid #33264d}.intro h1,h2{font-family:'Press Start 2P';text-shadow:4px 4px 0 #6ee7f7}.intro h1 i,h2 i{font-family:'VT323';color:#ff3e9d;text-shadow:3px 3px 0 #ffe38a}.panel,.learn-card{border:3px solid #33264d;box-shadow:8px 8px 0 #9a7bff;border-radius:0}.panel:before{background:#6ee7f7;border:3px solid #33264d;font-family:'Press Start 2P'}.levels button,.modes button,.answers button{border:3px solid #33264d;border-radius:0;box-shadow:3px 3px 0 #d9cce9}.levels button.active,.modes button.active{background:#ffe38a;box-shadow:3px 3px 0 #33264d}.start{background:#ff3e9d;border:3px solid #33264d;border-radius:0;box-shadow:5px 5px 0 #33264d;font-family:'Press Start 2P'}.word strong,.learn-card strong{color:#ff3e9d;text-shadow:5px 5px 0 #ffe38a}.listen{background:#6ee7f7;border:3px solid #33264d;border-radius:0;box-shadow:3px 3px 0 #33264d}.answers button:hover{background:#d6f36b}.learn-actions button:last-child{background:#d6f36b}.track{border:3px solid #33264d}.track span{background:#6ee7f7}footer{border-top:3px solid #33264d}@media(max-width:700px){.shell{padding:0 18px}.intro h1{font-size:39px}}
body{background:#f7f3fb;background-image:none;color:#33264d;font-family:Manrope,Arial,sans-serif;font-size:16px}body:before{display:none}header{border-bottom:1px solid #d9cce9;height:84px}.brand{font-family:Manrope,sans-serif;font-size:14px}.brand b{font-family:Manrope,sans-serif}.status{font-family:Manrope,sans-serif;font-size:12px}.intro h1,h2{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.06em;text-shadow:none;font-size:clamp(44px,6vw,72px)}.intro h1 i,h2 i{font-family:Georgia,serif;font-size:1em;text-shadow:none}.intro p{font-family:Manrope,sans-serif;font-size:15px;line-height:1.75}.panel{border:1px solid #d9cce9;border-radius:16px;box-shadow:0 12px 32px rgba(77,50,110,.1)}.panel:before{font-family:Manrope,sans-serif;font-size:9px;border:1px solid #33264d}.panel-top strong,legend{font-family:Manrope,sans-serif}.levels button,.modes button,.answers button{border:1px solid #cbbddd;border-radius:10px;box-shadow:none;font-family:Manrope,sans-serif;font-size:13px}.levels button.active,.modes button.active{box-shadow:0 0 0 2px #33264d inset}.levels span,.modes span{font-family:Manrope,sans-serif;font-size:10px}.start{border:0;border-radius:10px;box-shadow:none;font-family:Manrope,sans-serif;font-size:13px}.learn-link{font-family:Manrope,sans-serif;font-size:13px}.quizbar button{font-family:Manrope,sans-serif}.quizbar span,.question small,#results>small,.learn-card>small{font-family:'DM Mono',monospace;font-size:10px}.track{height:8px;border:0;padding:0}.word strong,.learn-card strong{font-family:'Noto Sans JP',sans-serif;font-size:clamp(64px,11vw,116px);text-shadow:none}.word span,.learn-card span{font-family:'Noto Sans JP',sans-serif;font-size:18px}.listen{border:1px solid #33264d;border-radius:8px;box-shadow:none;font-family:Manrope,sans-serif;font-size:11px}.answers button{padding:16px}.feedback{font-family:Manrope,sans-serif;font-size:12px}.learn-card{border:1px solid #d9cce9;border-radius:16px;box-shadow:0 12px 32px rgba(255,110,180,.18)}.learn-card p{font-family:Manrope,sans-serif;font-size:16px}.reveal,.learn-actions button{border:1px solid #33264d;border-radius:8px;box-shadow:none;font-family:Manrope,sans-serif;font-size:12px}.review-head h3{font-family:Manrope,sans-serif;font-size:15px}.review-row strong{font-family:'Noto Sans JP',sans-serif;font-size:21px}.review-row span{font-family:'Noto Sans JP',sans-serif;font-size:13px}footer{border-top:1px solid #d9cce9}footer span{font-family:'DM Mono',monospace;font-size:9px}
.answers button.correct{background:#d6f36b!important;border-color:#3d8b56!important;color:#203b2b!important;box-shadow:0 0 0 2px #3d8b56 inset}.answers button.wrong{background:#ffb0c9!important;border-color:#c64270!important;color:#5c1631!important;box-shadow:0 0 0 2px #c64270 inset}.feedback{min-height:28px;margin-top:20px;font-weight:700}.feedback.good:before{content:'✓  '}.feedback.bad:before{content:'Correct answer:  ';color:#c64270}
.modes{grid-template-columns:repeat(3,1fr)}@media(max-width:700px){.modes{grid-template-columns:1fr}}
#quiz .question{margin:104px auto 0;max-width:760px}#quiz .word{margin:28px 0 68px}#quiz .word strong{font-size:clamp(58px,9vw,104px);line-height:1.12}#quiz .listen{margin-top:21px}.answers{gap:16px}.answers button{padding:20px 18px;min-height:64px}@media(max-width:700px){#quiz .question{margin-top:72px}#quiz .word{margin-bottom:52px}.answers{gap:12px}.answers button{padding:17px;min-height:58px}}
.study-note{margin-top:24px}.note-paper{background:#fffdf7;border:3px solid #33264d;padding:34px;box-shadow:6px 6px 0 #6ee7f7}.note-paper h3{font:26px 'Press Start 2P';margin:18px 0;color:#ff3e9d}.note-paper p{font-size:20px;line-height:1.55;color:#33264d}.note-paper ruby{font-family:'Noto Sans JP';font-weight:700;color:#ff3e9d}.note-paper rt{font-size:10px;color:#786c91}.note-words{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.note-words span{border-top:1px dashed #d9cce9;padding-top:10px}.note-words b{display:block;color:#786c91;font:16px Manrope;margin-top:5px}.note-signature{display:block;margin-top:28px;color:#9a7bff;font:9px 'DM Mono';letter-spacing:.1em}@media(max-width:700px){.note-paper{padding:24px}.note-paper h3{font-size:19px}.note-words{grid-template-columns:1fr}}
.note-customize{display:flex;gap:12px;margin:0 0 16px}.note-customize label{font:600 11px Manrope;color:#786c91}.note-customize select{display:block;margin-top:6px;border:1px solid #cbbddd;border-radius:8px;background:#fff;padding:8px 28px 8px 10px;color:#33264d;font:13px Manrope}.note-paper[data-theme=sakura]{--note-bg:#fff8f5;--note-ink:#412d46;--note-accent:#ef659c;--note-soft:#ffcadb;--note-muted:#806b82}.note-paper[data-theme=matcha]{--note-bg:#f6f7e9;--note-ink:#294237;--note-accent:#568b67;--note-soft:#dce8a6;--note-muted:#667665}.note-paper[data-theme=soda]{--note-bg:#f4fbff;--note-ink:#263c59;--note-accent:#328ec4;--note-soft:#9de8ea;--note-muted:#647891}.note-paper[data-theme=night]{--note-bg:#29243d;--note-ink:#fff7e8;--note-accent:#ff83bd;--note-soft:#7869b8;--note-muted:#d5c9e7}.note-paper[data-theme]{background:var(--note-bg);color:var(--note-ink);border-color:var(--note-ink);box-shadow:6px 6px 0 var(--note-soft)}.note-paper[data-theme] h3,.note-paper[data-theme] ruby{color:var(--note-accent)}.note-paper[data-theme] p,.note-paper[data-theme] .note-words b{color:var(--note-ink)}.note-paper[data-theme] rt,.note-paper[data-theme] .note-signature{color:var(--note-muted)}.note-paper[data-layout=grid] #noteStory{display:none}.note-paper[data-layout=grid] .note-words{grid-template-columns:repeat(2,1fr);gap:16px}.note-paper[data-layout=grid] .note-words span{padding:15px;background:color-mix(in srgb,var(--note-soft) 30%,transparent);border:0;border-radius:10px}.note-paper[data-layout=compact]{padding:24px}.note-paper[data-layout=compact] h3{font-size:20px;margin:12px 0}.note-paper[data-layout=compact] #noteStory{font-size:16px;margin:10px 0}.note-paper[data-layout=compact] .note-words{grid-template-columns:repeat(5,1fr);gap:8px}.note-paper[data-layout=compact] .note-words b{font-size:12px}.note-paper[data-layout=compact] .note-signature{margin-top:18px}@media(max-width:700px){.note-customize{flex-wrap:wrap}.note-paper[data-layout=compact] .note-words{grid-template-columns:repeat(2,1fr)}}
.quiz-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}.quiz-actions button{border:1px solid #cbbddd;border-radius:8px;background:transparent;color:#786c91;padding:9px 14px;font:600 12px Manrope,sans-serif}.quiz-actions button:hover:not(:disabled){border-color:#9a7bff;color:#33264d;background:#fff}.quiz-actions button.saved{background:#d6f36b;border-color:#608345;color:#294237}.quiz-actions button:disabled{opacity:.55;cursor:default}@media(max-width:700px){.quiz-actions{margin-top:12px}.quiz-actions button{padding:9px 12px}}
.feedback.bad:before{content:''}
#newNoteStory{align-self:flex-end;min-height:36px;border:1px solid #9a7bff;border-radius:8px;background:#fff;color:#33264d;padding:8px 14px;font:700 12px Manrope,sans-serif;cursor:pointer;transition:background-color .18s ease-out,border-color .18s ease-out,box-shadow .18s ease-out}#newNoteStory:hover{background:#f7efff;border-color:#ff3e9d;box-shadow:0 5px 14px rgba(154,123,255,.18)}#newNoteStory:focus-visible{outline:3px solid #6ee7f7;outline-offset:2px}#newNoteStory:active{box-shadow:none}.note-story-line{display:block;margin-top:12px}.note-story-line:first-child{margin-top:0}@media(max-width:700px){#newNoteStory{width:100%;margin-top:2px}.note-customize label{flex:1}.note-customize select{width:100%}}
.note-gloss{font-size:.82em;color:var(--note-muted);font-weight:600}.note-paper[data-theme] #noteStory{max-width:72ch}.note-paper[data-theme] #noteStory ruby{white-space:nowrap}
.note-customize{align-items:flex-end;flex-wrap:wrap}.ai-story-button{min-height:36px;border:1px solid #33264d;border-radius:8px;background:#33264d;color:#fff;padding:8px 15px;font:700 12px Manrope,sans-serif;cursor:pointer;transition:background-color .18s ease-out,box-shadow .18s ease-out}.ai-story-button:hover:not(:disabled){background:#ff3e9d;box-shadow:0 5px 14px rgba(255,62,157,.2)}.ai-story-button:focus-visible{outline:3px solid #6ee7f7;outline-offset:2px}.ai-story-button:disabled{cursor:wait;opacity:.68}.ai-story-status{min-height:20px;margin:0 0 14px;color:#786c91;font:600 12px/1.5 Manrope,sans-serif}.ai-story-status:empty{display:none}.ai-story-status[data-state=loading]{color:#7655c8}.ai-story-status[data-state=success]{color:#39714c}.ai-story-status[data-state=error]{color:#a33a63}.note-paper #noteStory{overflow-wrap:anywhere}.note-paper #noteStory .note-story-line{margin-block:14px}.note-paper #noteStory .note-story-line:first-child{margin-block-start:0}.note-paper #noteStory .note-story-line:last-child{margin-block-end:0}@media(max-width:700px){.ai-story-button{width:100%}.note-customize{gap:10px}}