:root{color-scheme:light;--bg: #f6f5f1;--surface: #ffffff;--surface-2: #efeee9;--ink: #1b2430;--ink-soft: #4a5563;--ink-faint: #7b8593;--line: #e2e0d8;--accent: #2f7d64;--accent-strong: #256552;--accent-soft: #e4efe9;--ok: #2f7d64;--ok-soft: #dcefe4;--warn: #b9772a;--warn-soft: #f4e9d8;--radius: 18px;--radius-lg: 26px;--shadow: 0 6px 22px rgba(20, 30, 45, .08);--shadow-lift: 0 12px 34px rgba(20, 30, 45, .14);--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--tap: 4.5rem}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.4;font-size:19px}button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}#app{min-height:100%}.home{max-width:640px;margin:0 auto;padding:clamp(1.5rem,5vw,3rem) clamp(1.1rem,5vw,2rem) 3rem;display:flex;flex-direction:column;gap:1.6rem}.home-head h1{margin:0;font-size:clamp(2.2rem,8vw,3rem);letter-spacing:-.02em;color:var(--accent-strong)}.tagline{margin:.4rem 0 0;color:var(--ink-soft);font-size:1.1rem}.settings-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:1.1rem}.setting{display:flex;flex-direction:column;gap:.6rem}.setting-label{font-weight:600;color:var(--ink)}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.seg{display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;padding:.7rem .8rem;background:var(--surface-2);border:2px solid transparent;border-radius:12px;text-align:left}.seg-label{font-weight:600}.seg-hint{font-size:.78rem;color:var(--ink-faint);line-height:1.2}.seg.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}.seg.on .seg-hint{color:var(--accent-strong)}.toggle{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer}.toggle input{position:absolute;opacity:0;width:0;height:0}.switch{flex:none;width:3.2rem;height:1.9rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;transition:background .15s ease}.switch:after{content:"";position:absolute;top:3px;left:3px;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .15s ease}.toggle input:checked+.switch{background:var(--accent);border-color:var(--accent)}.toggle input:checked+.switch:after{transform:translate(1.3rem)}.toggle input:focus-visible+.switch{outline:3px solid var(--accent);outline-offset:3px}.ex-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}.ex-tile{width:100%;display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-align:left;transition:transform .12s ease,box-shadow .12s ease}.ex-tile:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lift)}.ex-tile:disabled{opacity:.5;cursor:default}.ex-ico{font-size:2rem;flex:none}.ex-text{display:flex;flex-direction:column;gap:.15rem;flex:1}.ex-title{font-weight:700;font-size:1.2rem}.ex-sub{color:var(--ink-soft);font-size:.95rem}.ex-go{color:var(--accent);font-size:1.6rem;flex:none}.empty-note{color:var(--ink-faint);text-align:center;padding:1rem}.home-foot{text-align:center;margin-top:.5rem}.link{background:none;border:none;color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px}.link:hover{color:var(--accent)}.ex{max-width:900px;margin:0 auto;height:100dvh;padding:clamp(.6rem,2.5vh,1.3rem) clamp(1rem,5vw,2rem);display:flex;flex-direction:column;gap:clamp(.5rem,2vh,1rem);overflow:hidden}.ex-top{display:flex;align-items:center;justify-content:space-between;flex:none}.ex-top .icon-btn{width:3.25rem;height:3.25rem;min-width:3.25rem;font-size:1.4rem}.icon-btn{width:var(--tap);height:var(--tap);min-width:var(--tap);display:grid;place-items:center;font-size:1.7rem;line-height:1;background:var(--surface);border:1px solid var(--line);border-radius:50%;box-shadow:var(--shadow)}.ex-count{font-weight:600;color:var(--accent-strong);font-variant-numeric:tabular-nums}.prompt{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0;flex:none}.say{width:3.6rem;height:3.6rem;flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);border:2px solid var(--accent);border-radius:50%}.say-ico{font-size:1.7rem}.say:active{transform:scale(.94)}.prompt-word{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.article{color:var(--ink-faint);font-size:1.3rem;line-height:1}.word{font-size:clamp(1.8rem,min(7vh,8.5vw),3.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;max-width:100%;overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.choices{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(.6rem,2vh,1.1rem)}.card{min-height:0;min-width:0;position:relative;background:var(--surface);border:3px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;transition:transform .12s ease,border-color .15s ease,opacity .2s ease}.card img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;padding:clamp(.7rem,3vmin,1.5rem);box-sizing:border-box;pointer-events:none}.card:hover:not(:disabled){transform:translateY(-3px);border-color:var(--accent)}.card:active:not(:disabled){transform:scale(.97)}.card:disabled{cursor:default}.card.correct{border-color:var(--ok);background:var(--ok-soft);animation:pop .35s ease}.card.wrong{border-color:var(--warn);opacity:.45;animation:nudge .3s ease}.picture-prompt{flex:1;min-height:0;position:relative}.picture-prompt img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;padding:clamp(.3rem,2vh,1rem);box-sizing:border-box}.word-choices{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,2vh,1.1rem)}.word-choice{min-height:var(--tap);min-width:0;padding:clamp(.7rem,2vh,1.1rem) .8rem;background:var(--surface);border:3px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);font-size:clamp(1.15rem,min(3.6vh,5.5vw),2rem);font-weight:700;display:flex;align-items:baseline;justify-content:center;gap:.4em;flex-wrap:wrap;text-align:center;line-height:1.12;transition:transform .12s ease,border-color .15s ease,opacity .2s ease}.word-choice .wc-article{font-size:.6em;font-weight:600;color:var(--ink-faint)}.word-choice .wc-word{min-width:0;overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.word-choice:hover:not(:disabled){transform:translateY(-2px);border-color:var(--accent)}.word-choice:active:not(:disabled){transform:scale(.98)}.word-choice:disabled{cursor:default}.word-choice.correct{border-color:var(--ok);background:var(--ok-soft);animation:pop .35s ease}.word-choice.correct .wc-article{color:var(--ok)}.word-choice.wrong{border-color:var(--warn);opacity:.45;animation:nudge .3s ease}.feedback{height:2rem;flex:none;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(1.1rem,3.2vh,1.4rem);font-weight:700}.feedback.ok{color:var(--ok)}.feedback.hint{color:var(--warn)}.advancer{height:6px;flex:none;border-radius:999px;background:var(--surface-2);overflow:hidden;opacity:0;transition:opacity .25s ease}.advancer.show{opacity:1}.advancer-bar{height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(1)}.advancer.run .advancer-bar{transform:scaleX(0);transition:transform var(--adv, 2s) linear}.about{max-width:560px;margin:0 auto;padding:clamp(1.5rem,5vw,3rem) clamp(1.1rem,5vw,2rem) 3rem;display:flex;flex-direction:column;gap:1rem}.about h2{margin:.5rem 0 0;font-size:1.8rem}.about p{margin:0;color:var(--ink-soft)}.about .credit{font-size:.9rem;color:var(--ink-faint)}.about a{color:var(--accent)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes nudge{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}