:root{color:#263238;font-synthesis:none;text-rendering:optimizelegibility;background:#f7fbff;font-family:Hiragino Maru Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button{font:inherit}.app-shell{background:linear-gradient(#e8f6ff 0%,#fbfdff 58%,#fff7e8 100%);place-items:center;min-height:100vh;padding:clamp(14px,3vw,36px);display:grid}.learning-card{background:#fff;border:6px solid #fff;border-radius:8px;flex-direction:column;gap:clamp(14px,2.5vw,24px);width:min(100%,1080px);min-height:min(820px,100vh - 28px);padding:clamp(16px,3vw,36px);display:flex;box-shadow:0 18px 42px #24537024}.mode-layout{flex:1;gap:clamp(14px,2.5vw,24px);min-height:0;display:grid}.card-mode-layout{grid-template-rows:auto minmax(0,1fr) auto auto}.quiz-mode-layout{grid-template-rows:minmax(0,1fr) auto}.mode-switch,.top-row,.nav-buttons,.audio-area,.quiz-actions{align-items:center;gap:12px;display:flex}.mode-switch{flex-wrap:wrap;justify-content:center}.mode-switch button{color:#41515c;cursor:pointer;background:#eef4f7;border:4px solid #0000;border-radius:8px;min-width:min(42vw,220px);min-height:64px;padding:12px 22px;font-size:clamp(1.3rem,3vw,2rem);font-weight:900}.mode-switch button.is-active{color:#fff;background:#2c7be5;border-color:#1455ad}.mode-label{color:#667982;text-align:center;margin:-4px 0 0;font-size:clamp(1rem,2.2vw,1.25rem);font-weight:900}.top-row{flex-wrap:wrap;justify-content:space-between}.category-pill,.domain-pill,.level-pill,.counter{border-radius:999px;justify-content:center;align-items:center;min-height:48px;padding:8px 18px;font-size:clamp(1rem,2.3vw,1.32rem);font-weight:900;display:inline-flex}.category-pill{color:#fff}.category-pill.seion{background:#1d9a8a}.category-pill.dakuon{background:#e05263}.category-pill.handakuon{background:#ee8b2f}.category-pill.youon{background:#4c7bd9}.category-pill.special{background:#6f5db8}.domain-pill{color:#41515c;background:#edf6f2;font-size:clamp(.9rem,1.8vw,1.08rem)}.domain-pill.working_vehicle{background:#e8f6ef}.domain-pill.vehicle{background:#eef7ff}.domain-pill.transportation{background:#f1efff}.domain-pill.tool{background:#fff4db}.domain-pill.special{background:#f4eefc}.level-pill{color:#6a4b22;background:#fff0b8}.counter{color:#41515c;background:#eef4f7}.card-content{flex:1;grid-template-columns:minmax(220px,.85fr) minmax(320px,1.4fr);align-items:stretch;gap:clamp(18px,4vw,34px);display:grid}.kana-panel,.quiz-kana-panel,.vehicle-panel{border-radius:8px}.kana-panel,.quiz-kana-panel{background:#fff0b8;border:4px solid #ffd45c;align-content:center;place-items:center;min-width:0;min-height:300px;padding:clamp(20px,4vw,36px);display:grid;overflow:hidden}.kana-label{color:#65512c;margin:0 0 8px;font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:900}.kana-text{color:#263238;letter-spacing:0;white-space:nowrap;writing-mode:horizontal-tb;text-orientation:mixed;justify-content:center;align-items:center;max-width:100%;margin:0;font-size:clamp(6.8rem,18vw,13rem);line-height:.95;display:inline-flex}.kana-text.multi-kana{font-size:clamp(4.6rem,10vw,8rem)}.vehicle-panel{grid-template-rows:minmax(260px,1fr) auto;gap:clamp(16px,3vw,24px);min-width:0;display:grid}.image-frame{background:#f3fbfd;border:4px dashed #9fd0df;border-radius:8px;place-items:center;min-height:260px;display:grid;overflow:hidden}.image-frame img{object-fit:contain;width:100%;height:100%;max-height:420px;padding:clamp(16px,3vw,26px)}.image-placeholder{color:#4d6874;text-align:center;place-items:center;gap:12px;font-size:clamp(1.15rem,3vw,1.8rem);font-weight:900;display:grid}.placeholder-icon{color:#fff;background:#4c7bd9;border-radius:8px;place-items:center;width:clamp(120px,22vw,180px);height:clamp(72px,12vw,108px);font-size:clamp(1.2rem,3vw,2rem);line-height:1;display:grid}.word-area{text-align:center;gap:6px;padding:8px 4px 0;display:grid}.word{color:#263238;overflow-wrap:anywhere;margin:0;font-size:clamp(2.1rem,5.4vw,4rem);font-weight:900;line-height:1.15}.reading{color:#667982;overflow-wrap:anywhere;margin:0;font-size:clamp(1.05rem,2.8vw,1.55rem);font-weight:900}.audio-area{flex-wrap:wrap;justify-content:center;min-height:76px}.sound-button,.nav-buttons button,.quiz-actions button,.answer-button{color:#fff;cursor:pointer;white-space:nowrap;border:0;border-radius:8px;min-height:72px;font-size:clamp(1.28rem,2.8vw,1.9rem);font-weight:900;transition:transform .16s,box-shadow .16s,background-color .16s;box-shadow:0 8px #00000024}.sound-button:active,.nav-buttons button:active,.quiz-actions button:active,.answer-button:active{transform:translateY(5px);box-shadow:0 3px #00000024}.sound-button{background:#2c9f67;justify-content:center;align-items:center;gap:12px;min-width:min(100%,320px);padding:14px 28px;display:inline-flex}.nav-buttons{grid-template-columns:1fr 1fr;display:grid}.fixed-bottom-actions{align-self:end}.nav-buttons button{padding:16px 22px}.nav-buttons button:first-child{background:#75859a}.nav-buttons button:last-child,.quiz-actions button{background:#f06a3c}.quiz-view{grid-template-columns:minmax(220px,.85fr) minmax(320px,1.25fr);grid-template-areas:"kana answer""actions actions";align-items:stretch;gap:clamp(18px,4vw,34px);min-height:0;display:grid}.quiz-kana-panel{grid-area:kana}.quiz-hidden-answer,.quiz-answer{grid-area:answer;align-content:center;gap:clamp(16px,3vw,24px);min-width:0;display:grid}.answer-button{background:#2c7be5;width:min(100%,360px);margin:0 auto;padding:16px 24px}.quiz-answer .image-frame{min-height:300px}.quiz-answer .sound-button{justify-self:center}.quiz-actions{grid-area:actions;justify-content:center}.quiz-actions button{min-width:min(100%,360px);padding:16px 24px}@media (width<=820px){.learning-card{min-height:calc(100vh - 24px)}.card-content,.quiz-view{grid-template-columns:1fr}.quiz-view{grid-template-areas:"kana""answer""actions"}.kana-panel,.quiz-kana-panel{min-height:220px}.vehicle-panel{grid-template-rows:minmax(220px,auto) auto}}@media (width<=520px){.top-row{align-items:stretch}.category-pill,.domain-pill,.level-pill,.counter{min-height:44px;padding:8px 12px}.mode-switch button{min-width:min(44vw,180px);min-height:58px;padding:10px 14px}.nav-buttons{gap:12px}.sound-button,.nav-buttons button,.quiz-actions button,.answer-button{min-height:64px}.kana-text{font-size:clamp(5rem,26vw,8rem)}.kana-text.multi-kana{font-size:clamp(3.9rem,18vw,6.4rem)}}