:root{color:#24211d;font-synthesis:none;text-rendering:optimizelegibility;--ink:#24211d;--muted:#726b61;--paper:#fffdf8;--cream:#f5efe4;--line:#ddd4c6;--red:#c64b40;--red-dark:#9d352d;--green:#16775b;--green-dark:#0d5b44;--blue:#2f79bf;background:#f5efe4;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%}body{background:radial-gradient(circle at 10% 4%, #2f79bf1c, transparent 30%), linear-gradient(180deg, #fffaf0 0%, var(--cream) 100%);min-width:320px;min-height:100dvh;margin:0}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.app-shell{width:100%;max-width:620px;min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;gap:14px;margin:0 auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.eyebrow{color:var(--red);letter-spacing:.16em;text-transform:uppercase;margin:0 0 4px;font-size:.72rem;font-weight:800}.topbar h1{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,8vw,3rem);line-height:1}.mode-switch{border:1px solid var(--line);background:#ffffffb8;border-radius:18px;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;display:grid}.lesson-switch{grid-template-columns:1fr 1fr;gap:8px;display:grid}.mode-button,.lesson-button,.secondary-button{cursor:pointer;border-radius:14px;min-height:48px;padding:10px 14px;font-weight:800}.mode-button,.lesson-button{color:var(--muted);background:0 0;border:0}.lesson-button{border:1px solid var(--line);background:#ffffffb8}.mode-button.active,.lesson-button.active{color:#fff;background:linear-gradient(145deg,#3187d7,#1d5e9a);box-shadow:0 9px 20px #2721191f}.secondary-button{color:var(--ink);border:1px solid var(--line);background:#fff}.practice-card{background:var(--paper);border:1px solid var(--line);border-radius:30px;flex:1;grid-template-rows:auto minmax(0,1fr) 58px auto auto;place-items:center;min-height:0;padding:18px 16px;display:grid;position:relative;overflow:hidden;box-shadow:0 18px 55px #4e3a201f}.practice-card:before{content:"";pointer-events:none;border:1px solid #c64b401c;border-radius:22px;position:absolute;inset:10px}.prompt-label{color:var(--muted);letter-spacing:.05em;font-size:.82rem;font-weight:700}.word-card{text-align:center;color:#111;word-break:break-word;width:100%;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;font-size:clamp(3.4rem,14vw,6rem);font-weight:600;line-height:1.08}.word-card.english{font-family:Georgia,Times New Roman,serif;font-size:clamp(2.2rem,9vw,4rem)}.image-card,.image-hint{aspect-ratio:1.35;border:1px solid var(--line);text-align:center;background:radial-gradient(circle at 22% 18%,#ffffff7a,#0000 28%),linear-gradient(145deg,#e9f3ff,#fff7dc);border-radius:24px;place-items:center;width:min(100%,360px);padding:18px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 8px #ffffff61,0 14px 36px #4e3a2021}.image-hint{aspect-ratio:1.55;width:min(100%,260px);padding:12px}.image-card img,.image-hint img{object-fit:contain;filter:drop-shadow(0 10px 14px #4e3a201f);width:min(86%,240px);max-height:86%;display:block}.answer-space{place-items:center;height:58px;display:grid}.answer{align-items:baseline;gap:10px;display:flex}.answer-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:700}.answer strong{color:var(--red-dark);font-family:Georgia,Times New Roman,serif;font-size:clamp(1.4rem,5vw,2rem)}.learning-tools{flex-wrap:wrap;justify-content:center;gap:4px 10px;width:100%;display:flex}.tool-button{min-height:46px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:8px 14px;font-weight:700;display:inline-flex}.tool-button svg,.next-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:22px}.audio-error{color:var(--red-dark);text-align:center;margin:6px 0 0;font-size:.74rem;font-weight:700}.breakdown{border-top:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;width:min(100%,440px);margin-top:10px;padding:10px;display:grid}.breakdown-part{border:1px solid var(--line);background:#f8f2e8;border-radius:8px;align-content:center;gap:2px;min-height:56px;padding:8px 10px;display:grid}.breakdown-part strong{color:var(--ink);font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;font-size:1.15rem}.breakdown-part span{color:var(--muted);font-size:.78rem;font-weight:700}.controls{grid-template-columns:1fr 1fr;gap:12px;min-height:76px;display:grid}.answer-button,.next-button{color:#fff;cursor:pointer;border:0;border-radius:20px;justify-content:center;align-items:center;gap:10px;min-height:76px;padding:12px 13px;transition:transform .15s,filter .15s;display:flex;box-shadow:0 9px 20px #27211929}.answer-button:active,.next-button:active{transform:scale(.97)}.answer-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:31px;height:31px}.answer-button span{flex-direction:column;align-items:flex-start;display:flex}.answer-button strong{font-size:1rem}.answer-button small{opacity:.78;font-size:.7rem}.unsure-button{background:linear-gradient(145deg, #d66459, var(--red-dark))}.confident-button{background:linear-gradient(145deg, #21896a, var(--green-dark))}.next-button{background:var(--green);grid-column:1/-1;font-size:1.05rem;font-weight:800}.progress-note{color:var(--muted);text-align:center;margin:-4px 0 0;font-size:.76rem}.answer-enter-active,.answer-leave-active{transition:opacity .18s,transform .18s}.answer-enter-from,.answer-leave-to{opacity:0;transform:translateY(6px)}@media (height<=650px){.app-shell{gap:8px;padding-top:9px;padding-bottom:9px}.topbar h1{font-size:1.75rem}.practice-card{border-radius:24px;grid-template-rows:auto minmax(0,1fr) 48px auto auto}.word-card{font-size:clamp(2.8rem,12vw,4.6rem)}.word-card.english{font-size:clamp(1.9rem,8vw,3rem)}.answer-space{height:48px}.controls,.answer-button,.next-button{min-height:62px}}@media (width<=480px){.topbar{align-items:flex-start}.reset-button{min-width:92px}.mode-switch,.lesson-switch{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}