: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:1fr 1fr;gap:6px;padding:5px;display:grid}.mode-button,.secondary-button{cursor:pointer;border-radius:14px;min-height:48px;padding:10px 14px;font-weight:800}.mode-button{color:var(--muted);background:0 0;border:0}.mode-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;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)}.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{justify-items:center;width:100%;display:grid}.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}.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}.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}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}