:root{--bg:#F5F6FA;--surface:#fff;--sunk:#EAEEF6;--ink:#121C33;--muted:#5A6680;--line:#E1E5EE;--accent:#C8102E;--accent-ink:#fff;--accent-soft:#FCE8EB;--blue:#1F3A8A;--blue-soft:#E7ECF9;--good:#1E7A4C;--good-soft:#E2F3E9;--bad:#B3261E;--bad-soft:#FBE6E3;
  --shadow:0 1px 2px rgba(18,28,51,.04),0 6px 20px rgba(18,28,51,.05);--display:"Archivo","Segoe UI",system-ui,sans-serif;--body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0E1424;--surface:#151D31;--sunk:#1B2440;--ink:#E8EDF8;--muted:#9AA6C0;--line:#232D47;--accent:#FF5A6E;--accent-ink:#1A0A0E;--accent-soft:#3A1A24;--blue:#93ABFF;--blue-soft:#1C2648;--good:#4CC38A;--good-soft:#12321F;--bad:#FF7A70;--bad-soft:#3A1916;--shadow:0 1px 2px rgba(0,0,0,.3);color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body)}
a{color:var(--blue)}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:8px;font:800 1.15rem var(--display);color:var(--ink);text-decoration:none;min-height:44px}
.logo img{border-radius:7px}.logo span{color:var(--accent)}
.top-cta{font-weight:700;font-size:.92rem;text-decoration:none;color:var(--accent);min-height:44px;display:flex;align-items:center}
main{max-width:680px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-left)) 48px;display:flex;flex-direction:column;gap:18px}
h1{font:800 clamp(1.8rem,7vw,2.5rem)/1.12 var(--display);letter-spacing:-.025em;margin:0;text-wrap:balance}
h2{font:700 1.2rem/1.25 var(--display);margin:6px 0 0}
h3{font:700 1.05rem var(--display);margin:0}
p{margin:0}
.crumb{font-size:.9rem;color:var(--muted)}.crumb a{color:var(--muted);display:inline-block;min-height:32px}
.lead{color:var(--muted);font-size:1.05rem}
.card{background:var(--surface);border-radius:20px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.hero{align-items:center;text-align:center;padding:26px 18px}
.rs{font:900 clamp(2.2rem,11vw,3.4rem)/1.05 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.ipa{color:var(--muted)}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.btn{font:700 1rem var(--body);min-height:46px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn.play{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.mic{border-color:var(--accent);color:var(--accent)}
.btn.on{outline:3px solid var(--accent-soft)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.out{width:100%;border-radius:14px;padding:12px 14px;text-align:left;background:var(--sunk)}
.out.ok{background:var(--good-soft);color:var(--good)}.out.no{background:var(--bad-soft);color:var(--bad)}
.out .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tip{background:var(--surface);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.tip .hint{color:var(--muted)}
.lesson{font-weight:700;text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.ex .exrow{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);margin-top:8px}
.ex p{font-weight:700;font-size:1.05rem}
.ib{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--blue-soft);color:var(--blue);font-size:1rem;cursor:pointer}
.cta{background:var(--ink);color:var(--bg)}
.cta h2{margin:0;color:var(--bg)}.cta p{opacity:.8}
.go{align-self:flex-start;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:13px 20px;border-radius:14px;min-height:48px;display:inline-flex;align-items:center}
@media (prefers-color-scheme:dark){.cta{background:var(--surface);color:var(--ink)}.cta h2{color:var(--ink)}.go{color:#1A0A0E}}
.rel{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rel a{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 13px;text-decoration:none;color:var(--ink);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
footer{max-width:680px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-left)) 40px;color:var(--muted);font-size:.88rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
footer a{color:var(--muted)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}