:root { color-scheme:light; --ink:#173f36; --paper:#fffdf7; --line:#d5dfd7; --green:#155f52; --soft:#e8efe3; --accent:#d79859; font-family:system-ui,sans-serif; color:var(--ink); background:#f5f3ed; }
* { box-sizing:border-box; } body { margin:0; } button,a,input,select { -webkit-tap-highlight-color:transparent; } button,input,select { font:inherit; } button,a { touch-action:manipulation; } button { cursor:pointer; } button:disabled { opacity:.55; cursor:default; } :focus-visible { outline:3px solid #b7682f; outline-offset:3px; }
header { max-width:760px; margin:auto; padding:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { font-size:1.4rem; font-weight:850; color:var(--green); text-decoration:none; } .brand span { color:#bf743c; padding:0 8px; }
header label { display:grid; gap:6px; font-size:.75rem; min-width:0; max-width:60%; } select { width:100%; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:8px; color:inherit; background:var(--paper); }
main { width:min(100% - 32px,620px); margin:12px auto 24px; background:var(--paper); border:1px solid var(--line); border-radius:28px; padding:clamp(20px,5vw,36px); box-shadow:0 14px 40px #173f3609; }
h1 { font-family:Georgia,serif; font-size:clamp(1.8rem,6vw,2.7rem); line-height:1.12; margin:18px 0; } h2 { font-size:1.4rem; } p { line-height:1.6; } .eyebrow { display:block; margin-bottom:14px; font-size:.7rem; letter-spacing:.1em; font-weight:800; }
.steps { display:flex; list-style:none; margin:0; padding:0; gap:8px; } .steps li { flex:1; padding:9px 4px; border-top:4px solid var(--line); font-size:.8rem; color:#5f7068; } .steps .current { border-color:var(--green); color:var(--green); font-weight:750; } .steps .done { border-color:var(--accent); }
progress { width:100%; height:5px; margin-top:12px; accent-color:var(--green); }
.phrase { width:100%; min-height:96px; margin:16px 0 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px; text-align:start; border:1px solid #bbceb9; border-radius:20px; color:var(--ink); background:var(--soft); font-size:1.35rem; font-weight:750; }
.phrase span[lang=nl] { direction:ltr; } .phrase svg { width:27px; height:27px; flex-shrink:0; } .audio-tools { display:flex; gap:10px; margin:10px 0; }
.secondary { border:1px solid var(--line); background:var(--paper); color:var(--green); padding:12px 16px; border-radius:14px; min-height:46px; font-weight:700; }
.primary { display:block; text-align:center; width:100%; padding:17px; margin:20px 0 8px; border:0; border-radius:17px; background:var(--green); color:white; font-weight:750; text-decoration:none; min-height:54px; }
.answers { display:grid; gap:10px; margin:20px 0; } .answer { padding:17px; min-height:56px; text-align:start; background:white; border:2px solid var(--line); color:var(--ink); border-radius:16px; font-size:1rem; } .answer[aria-pressed=true] { border-color:var(--green); background:var(--soft); }
.recall-label { display:grid; gap:10px; font-weight:700; } input { min-width:0; width:100%; padding:16px; border:2px solid #a4b9ad; border-radius:14px; background:white; color:var(--ink); direction:ltr; }
.hint { padding:12px; border-inline-start:4px solid var(--accent); background:#fff2dc; } .feedback { min-height:28px; line-height:1.5; margin-top:14px; } .feedback[data-kind=incorrect] { color:#963e35; } .feedback[data-kind=correct] { color:var(--green); font-weight:700; }
.success-mark { display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:var(--soft); font-size:2.6rem; margin:20px 0; } .fine { font-size:.8rem; color:#52695e; } footer { max-width:620px; padding:0 22px 30px; margin:auto; font-size:.76rem; color:#52695e; } footer a { color:inherit; } .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
@media(prefers-reduced-motion:no-preference) { .playing svg { animation:voice-pulse .8s ease-in-out infinite alternate; } @keyframes voice-pulse { to { transform:scale(1.15); opacity:.65; } } button { transition:background .15s,transform .15s; } button:active { transform:scale(.985); } }