:root{--font:"Segoe UI", "Noto Sans Arabic", "Noto Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--r-sm:10px;--r-md:16px;--r-lg:24px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--accent:#8b6cf0;--accent-2:#6fb6d6;--accent-ink:#fff;--grad:linear-gradient(135deg, #6a50d8 0%, #8b6cf0 55%, #6fb6d6 100%);--good:#3ecf9a;--warn:#f0b24a;--bad:#f2677a;--ease:cubic-bezier(.2, .8, .2, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root,:root[data-theme=dark]{--bg:#0b0e17;--surface:#131826;--surface-2:#1b2237;--border:#ffffff17;--text:#eef0f8;--muted:#a2abc4;--accent-text:#b5a2ff;--shadow:0 10px 30px #00000059}:root[data-theme=light]{--bg:#f4f5fb;--surface:#fff;--surface-2:#eceef8;--border:#141a321c;--text:#141a2c;--muted:#565f7e;--accent:#6246d6;--accent-text:#5238c4;--shadow:0 10px 30px #2832641f;--good:#0a6b4a;--warn:#7a4b00;--bad:#b0233a}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100dvh;margin:0;line-height:1.55}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px;border-radius:8px}.en{text-align:start;direction:ltr;unicode-bidi:isolate}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip{background:var(--accent);color:var(--accent-ink);z-index:100;border-radius:8px;padding:8px 14px;position:absolute;inset-block-start:-60px;inset-inline-start:8px}.skip:focus{inset-block-start:8px}.shell{grid-template-columns:248px 1fr;min-height:100dvh;display:grid}.side{height:100dvh;padding:var(--s5) var(--s4);border-inline-end:1px solid var(--border);background:var(--surface);gap:var(--s5);flex-direction:column;display:flex;position:sticky;top:0}.brand{align-items:center;gap:var(--s3);letter-spacing:-.02em;font-size:1.35rem;font-weight:800;display:flex}.brand img{border-radius:12px;width:40px;height:40px}.brand b{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text}.brand small{color:var(--muted);letter-spacing:0;font-size:.72rem;font-weight:500;display:block}.nav{gap:var(--s1);flex-direction:column;display:flex}.nav a,.tabbar a{align-items:center;gap:var(--s3);border-radius:var(--r-sm);color:var(--muted);transition:background .2s var(--ease), color .2s;padding:11px 14px;font-weight:600;text-decoration:none;display:flex}.nav a:hover{background:var(--surface-2);color:var(--text)}.nav a[aria-current=page]{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent-text)}.main{padding:var(--s6) var(--s6) 120px;width:100%;max-width:1080px;margin-inline:auto}.tabbar{display:none}@media (max-width:860px){.shell{grid-template-columns:1fr}.side{display:none}.main{padding:var(--s5) var(--s4) 110px}.tabbar{inset-inline:0;background:var(--surface);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:20;grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0}.tabbar a{text-align:center;border-radius:12px;flex-direction:column;gap:2px;padding:8px 2px;font-size:.72rem}.tabbar a[aria-current=page]{color:var(--accent-text);background:color-mix(in srgb, var(--accent) 15%, transparent)}}h1{margin:0 0 var(--s2);letter-spacing:-.02em;font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1.2}h2{margin:0 0 var(--s3);font-size:1.15rem}h3{margin:0 0 var(--s2);font-size:1rem}.lead{color:var(--muted);margin:0 0 var(--s5);max-width:62ch}.muted{color:var(--muted)}.eyebrow{color:var(--accent-text);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;font-weight:700}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s5);box-shadow:var(--shadow)}.card.flat{box-shadow:none}.grid{gap:var(--s4);display:grid}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)}@media (max-width:760px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}.stat .num{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:2rem;font-weight:800}.stat .lbl{color:var(--muted);font-size:.86rem}.hero{background:var(--grad);color:#fff;border:0;position:relative;overflow:hidden}.hero .muted{color:#ffffffe0}.hero:after{content:"";background:#ffffff1f;border-radius:50%;width:220px;height:220px;position:absolute;inset-block-start:-60px;inset-inline-end:-60px}.row{gap:var(--s3);flex-wrap:wrap;align-items:center;display:flex}.between{justify-content:space-between}.stack>*+*{margin-block-start:var(--s4)}.btn{justify-content:center;align-items:center;gap:var(--s2);border:1px solid var(--border);background:var(--surface-2);min-height:46px;transition:transform .15s var(--ease), background .2s, box-shadow .2s;border-radius:14px;padding:12px 20px;font-weight:700;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)scale(.98)}.btn.primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);border:0}.btn.white{color:#4a35b8;background:#fff;border:0}.btn.ghost{background:0 0}.btn.sm{min-height:38px;padding:8px 14px;font-size:.9rem}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.icon-btn{border-radius:50%;width:44px;height:44px;padding:0}.input,select.input,textarea.input{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;width:100%;min-height:46px;padding:12px 14px}textarea.input{resize:vertical;min-height:96px}.field{gap:6px;display:grid}.field label{font-size:.92rem;font-weight:700}.help{color:var(--muted);font-size:.84rem}.seg{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;gap:4px;padding:4px;display:inline-flex}.seg button{color:var(--muted);background:0 0;border:0;border-radius:9px;min-height:38px;padding:8px 14px;font-weight:700}.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}:root[data-theme=dark] .seg button[aria-pressed=true]{color:#fff;background:#6a50d8}.toggle{gap:var(--s3);align-items:flex-start;display:flex}.toggle input{width:22px;height:22px;accent-color:var(--accent);margin-block-start:3px}.badge{background:var(--surface-2);color:var(--muted);border:1px solid var(--border);border-radius:99px;align-items:center;gap:6px;padding:3px 10px;font-size:.74rem;font-weight:700;display:inline-flex}.badge.ai{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 45%, transparent)}.badge.ok{color:var(--good);border-color:color-mix(in srgb, var(--good) 45%, transparent)}.badge.hosp{color:var(--accent-text)}.banner{gap:var(--s3);padding:var(--s4);border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);align-items:flex-start;margin-block-end:var(--s4);display:flex}.banner.bad{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 12%, var(--surface))}.banner.warn{border-color:var(--warn);background:color-mix(in srgb, var(--warn) 10%, var(--surface))}.banner.info{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface))}.banner p{flex:1;margin:0}.ring{--size:150px;width:var(--size);height:var(--size);flex:none;position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring .track{stroke:var(--surface-2)}.ring .bar{stroke:url(#rg);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}.ring .inner{text-align:center;place-items:center;display:grid;position:absolute;inset:0}.ring .inner b{font-size:2rem;line-height:1;display:block}.ring .inner span{color:var(--muted);font-size:.75rem}.session{max-width:680px;margin-inline:auto}.progress{background:var(--surface-2);height:8px;border-radius:99px;margin-block-end:var(--s5);overflow:hidden}.progress i{background:var(--grad);height:100%;transition:width .4s var(--ease);border-radius:99px;display:block}.word-hero{text-align:center;padding:var(--s6) var(--s4)}.word-hero .w{letter-spacing:-.02em;font-size:clamp(2.2rem,8vw,3.2rem);font-weight:800}.word-hero .en,.word-hero .ipa{text-align:center}.ipa{color:var(--accent-text);font-family:Noto Sans,Segoe UI,serif;font-size:1.1rem}.choices{gap:var(--s3);margin-block:var(--s4);display:grid}.choice{text-align:start;border:2px solid var(--border);background:var(--surface);transition:border-color .2s, background .2s, transform .15s var(--ease);border-radius:14px;min-height:56px;padding:16px 18px;font-size:1.05rem;font-weight:700}.choice:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.choice.right{border-color:var(--good);background:color-mix(in srgb, var(--good) 14%, var(--surface))}.choice.wrong{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 12%, var(--surface))}.feedback{padding:var(--s4);border-radius:var(--r-md);margin-block:var(--s3);animation:pop .35s var(--ease);font-weight:700}.feedback.good{background:color-mix(in srgb, var(--good) 14%, var(--surface));color:var(--good)}.feedback.bad{background:color-mix(in srgb, var(--bad) 12%, var(--surface));color:var(--bad)}.feedback.warn{background:color-mix(in srgb, var(--warn) 12%, var(--surface));color:var(--warn)}.rate{gap:var(--s2);grid-template-columns:repeat(4,1fr);display:grid}.rate button{border:1px solid var(--border);background:var(--surface-2);border-radius:14px;gap:2px;min-height:62px;padding:12px 6px;font-weight:700;display:grid}.rate small{color:var(--muted);font-weight:500}.rate button:hover{border-color:var(--accent)}.example{padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--surface-2);margin-block:var(--s2)}.example .tr{color:var(--muted);font-size:.95rem}.example mark{background:color-mix(in srgb, var(--accent) 28%, transparent);color:inherit;border-radius:4px;padding-inline:2px}.chip{background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:4px 10px;font-size:.85rem}.list{gap:var(--s2);display:grid}.list-item{align-items:center;gap:var(--s3);border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border);text-align:start;width:100%;padding:12px 14px;display:flex}.list-item:hover{border-color:var(--accent)}.list-item .w{font-size:1.05rem;font-weight:800}.grow{flex:1;min-width:0}.bars{align-items:flex-end;gap:var(--s2);height:130px;display:flex}.bars .b{flex:1;grid-template-rows:1fr auto;place-items:end center;gap:4px;height:100%;font-size:.8rem;display:grid}.bars .b i{background:var(--grad);border-radius:8px 8px 3px 3px;align-self:end;width:100%;min-height:3px;display:block}.meter{background:var(--surface-2);border-radius:99px;height:10px;overflow:hidden}.meter i{background:var(--grad);height:100%;display:block}.modal-bg{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#05081299;place-items:end center;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;width:min(640px,100%);max-height:92dvh;padding:var(--s5);animation:slide .3s var(--ease);overflow:auto}@media (min-width:700px){.modal-bg{place-items:center}.modal{border-radius:var(--r-lg)}}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes slide{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.fade{animation:pop .35s var(--ease)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}