/* Awra Permit Prep v2 — minimalist premium theme */
@font-face{font-family:"Inter";src:url(fonts/Inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Ethiopic: the bundled Permit Ethiopic Light 2.5 first (modified from Abyssinica SIL, SIL Open Font License 1.1,
   see fonts/OFL-PermitEthiopic.txt), then the bundled Noto Sans Ethiopic for anything it lacks. Latin and digits use Inter.
   Permit Ethiopic has one weight; declaring 100-900 makes bold UI text use it as-is instead of a synthetic (faux) bold. */
@font-face{font-family:"Permit Ethiopic Light 2.5";src:url(fonts/PermitEthiopicLight25-Regular.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+1200-139F,U+2D80-2DDF,U+AB00-AB2F}
@font-face{font-family:"Noto Sans Ethiopic";src:url(fonts/NotoSansEthiopic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+1200-139F,U+2D80-2DDF,U+AB00-AB2F,U+25CC}
:root{
  --bg:#F6F5F1;--surface:#FFFFFF;--surface2:#FBFAF7;--ink:#141C24;--muted:#5F6B76;--faint:#8A949D;--line:#E7E3DA;
  --primary:#1E3A5C;--primary-ink:#FFFFFF;--primary-soft:#E9EEF5;--accent:#B8913A;--accent-soft:#F6EEDC;
  --ok:#2F7D53;--ok-soft:#E6F3EB;--bad:#B4382E;--bad-soft:#FBEAE7;--warn:#9A6B00;
  --shadow:0 1px 2px rgba(20,28,36,.04),0 6px 20px rgba(20,28,36,.06);
  --r:18px;--r-sm:12px;--tap:56px;
  --font:"Inter","Permit Ethiopic Light 2.5","Noto Sans Ethiopic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --eth:"Permit Ethiopic Light 2.5","Noto Sans Ethiopic","Inter",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0E1317;--surface:#161D23;--surface2:#1B242B;--ink:#E8EDF1;--muted:#A0ACB6;--faint:#7C8892;--line:#26313A;
  --primary:#9DBFE6;--primary-ink:#0E1317;--primary-soft:#1D2A37;--accent:#D8B868;--accent-soft:#2A2518;
  --ok:#6CC495;--ok-soft:#15281F;--bad:#F08C80;--bad-soft:#2E1A18;--warn:#E2B34A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0E1317;--surface:#161D23;--surface2:#1B242B;--ink:#E8EDF1;--muted:#A0ACB6;--faint:#7C8892;--line:#26313A;
  --primary:#9DBFE6;--primary-ink:#0E1317;--primary-soft:#1D2A37;--accent:#D8B868;--accent-soft:#2A2518;
  --ok:#6CC495;--ok-soft:#15281F;--bad:#F08C80;--bad-soft:#2E1A18;--warn:#E2B34A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);color-scheme:dark}}
*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%;--qs:1}html.big{font-size:19.5px}
/* Aa question text size: normal / large / extra large (question, answers, explanation) */
html.qs1{--qs:1.18}html.qs2{--qs:1.36}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(84px + env(safe-area-inset-bottom))}
body.focus{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.eth,html[lang=am] body{font-family:var(--eth)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:620px;margin:0 auto;padding:0 18px}

/* header */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  padding-top:env(safe-area-inset-top)}
.hbar{max-width:620px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em;font-size:1.02rem;flex:1;min-width:0}
.brand img{width:30px;height:30px;border-radius:8px}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px;height:48px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:.95rem}
.iconbtn svg{width:22px;height:22px}
.hmid{flex:1;min-width:0;text-align:center;font-weight:600;font-size:.95rem;color:var(--muted)}
.hmid .qof{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timer{display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:3px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-family:var(--font);font-variant-numeric:tabular-nums;font-size:1rem}
.timer b{font-weight:750}.timer svg{width:16px;height:16px}
.timer.warn{background:var(--accent-soft);color:var(--warn)}.timer.low{background:var(--bad-soft);color:var(--bad)}
/* Aa button + text size panel */
.iconbtn.aa{padding:0 10px;font-family:var(--font);font-weight:700;color:var(--ink);gap:0;line-height:1}
.iconbtn.aa .a1{font-size:1.2rem}.iconbtn.aa .a2{font-size:.9rem}
.iconbtn.aa.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.tsz{max-width:620px;margin:0 auto;padding:4px 14px 12px}
.tsz .in{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px}
.tsz .t{font-weight:650;margin-bottom:8px;font-size:.95rem}
.seg.big button{min-height:58px;font-size:1.05rem;padding:4px 2px;line-height:1.2}
.tsz .seg button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:66px;padding:4px}
.tsz .A{font-family:var(--font);font-weight:700;line-height:1.1}.tsz .A.s0{font-size:1rem}.tsz .A.s1{font-size:1.3rem}.tsz .A.s2{font-size:1.6rem}
.tsz .w{font-size:.8rem;font-weight:600}
/* bookmark */
.meta .chip{white-space:nowrap}.chip .cnt{font-variant-numeric:tabular-nums}
.bmk{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-weight:650;font-size:.9rem;cursor:pointer;flex:none;transition:background .2s,color .2s,border-color .2s}
.bmk svg{width:20px;height:20px}
.bmk.on{background:var(--accent-soft);border-color:var(--accent);color:var(--warn)}
.bmk.on svg{fill:currentColor}
.empty{text-align:center;margin-top:8vh}
.empty .eic{width:84px;height:84px;margin:0 auto 8px;border-radius:26px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.empty .eic svg{width:42px;height:42px}
.empty .sub{max-width:420px;margin:6px auto 22px}
.savedlist{margin-top:16px}
.sitem{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sitem:last-child{border-bottom:0}
.sitem .q{flex:1;min-width:0;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sitem .q .en2{display:none}
.rm{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--bad);font-weight:600;font-size:.85rem;cursor:pointer}
.rm svg{width:16px;height:16px}
.pbar{height:4px;background:var(--line);border-radius:4px;overflow:hidden;max-width:620px;margin:0 auto}
.pbar>i{display:block;height:100%;background:var(--primary);border-radius:4px;transition:width .35s ease}

/* language pill */
.lang{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;flex:none}
.lang button{border:0;background:transparent;min-width:54px;height:44px;padding:0 12px;border-radius:999px;font-weight:650;font-size:.95rem;cursor:pointer;color:var(--muted);transition:background .2s,color .2s}
.lang button.on{background:var(--primary);color:var(--primary-ink)}
.lang button .b{font-size:.6rem;vertical-align:super;margin-left:1px}

/* tabs */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1.5px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px rgba(20,28,36,.06)}
#tabs .in{max-width:620px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
#tabs button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 12px;min-height:68px;cursor:pointer;color:var(--muted);font-size:.88rem;font-weight:700}
#tabs button svg{width:28px;height:28px;stroke-width:2.35}
#tabs button.on{color:var(--primary);font-weight:750}
#tabs button.on svg{stroke-width:2.7}
body.focus #tabs{display:none}

/* layout */
main{display:block;outline:none}
.screen{max-width:620px;margin:0 auto;padding:8px 18px 24px;animation:fadein .28s ease both}
h1{font-size:1.65rem;line-height:1.25;letter-spacing:-.02em;margin:10px 0 4px;font-weight:700}
h2{font-size:1.12rem;margin:26px 0 10px;font-weight:650;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin:12px 0}
.muted{color:var(--muted)}.small{font-size:.86rem}.center{text-align:center}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:var(--tap);padding:14px 18px;border-radius:16px;border:0;background:var(--primary);color:var(--primary-ink);font-weight:650;font-size:1.04rem;cursor:pointer;transition:transform .12s ease,filter .2s}
.btn:active{transform:scale(.985)}.btn:disabled{opacity:.45}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.soft{background:var(--primary-soft);color:var(--primary)}
.btn svg{width:22px;height:22px;flex:none}
.row{display:flex;gap:10px}.row>*{flex:1}

/* home */
.hero{display:flex;align-items:center;gap:18px}
.hero .txt{flex:1;min-width:0}
.hero .lbl{font-size:.85rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
html[lang=am] .hero .lbl{text-transform:none;letter-spacing:0}
.hero .state{font-size:1.25rem;font-weight:700;margin:2px 0 4px}
.cta{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;margin:12px 0;min-height:84px;transition:transform .12s ease}
.cta:active{transform:scale(.99)}
.cta .ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--primary-soft);color:var(--primary)}
.cta .ic svg{width:26px;height:26px}
.cta .t{font-weight:650;font-size:1.08rem}.cta .s{color:var(--muted);font-size:.9rem;margin-top:2px}
.cta .chev{margin-left:auto;color:var(--faint);flex:none}
.cta.primary{background:var(--primary);color:var(--primary-ink);border-color:transparent}
.cta.primary .ic{background:color-mix(in srgb,var(--primary-ink) 16%,transparent);color:var(--primary-ink)}
.cta.primary .s,.cta.primary .chev{color:color-mix(in srgb,var(--primary-ink) 75%,transparent)}
.cta.accent .ic{background:var(--accent-soft);color:var(--accent)}
.cta.bad .ic{background:var(--bad-soft);color:var(--bad)}
.note{display:flex;gap:12px;align-items:flex-start;background:var(--accent-soft);border-radius:var(--r-sm);padding:12px 14px;margin:12px 0;font-size:.92rem}
.note .x{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--muted);min-width:40px;min-height:40px}

/* ring */
.ring{position:relative;flex:none}
.ring svg{display:block;transform:rotate(-90deg)}
.ring .bg{stroke:var(--line)}.ring .fg{stroke:var(--primary);transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.ring.ok .fg{stroke:var(--ok)}.ring.bad .fg{stroke:var(--bad)}
.ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:750;letter-spacing:-.02em}
.ring .v small{font-size:.7rem;font-weight:600;color:var(--muted);letter-spacing:0}

/* question */
.meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:.86rem;font-weight:600;margin:10px 0 6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:.8rem;font-weight:650}
.figure{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:10px 0 6px;display:flex;justify-content:center}
.figure img.sign{width:min(52vw,190px);height:min(52vw,190px);object-fit:contain;display:block}
.illus{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;margin:12px 0}
.illus img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.exp .illus{margin:4px 0 12px}
.qtext{font-size:calc(1.36rem*var(--qs));line-height:1.42;font-weight:650;letter-spacing:-.01em;margin:14px 0 6px}
html[lang=am] .qtext{font-size:calc(1.42rem*var(--qs));line-height:1.62;font-weight:600;letter-spacing:0}
.en2{display:block;font-family:var(--font);font-size:.82em;font-weight:500;color:var(--muted);margin-top:6px;line-height:1.45}
.opts{display:flex;flex-direction:column;gap:10px;margin:16px 0 8px;padding:0;list-style:none}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;min-height:64px;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:calc(1.06rem*var(--qs));line-height:1.4;transition:border-color .2s,background .25s,opacity .25s,transform .12s}
html[lang=am] .opt{font-size:calc(1.12rem*var(--qs));line-height:1.55}
.opt:active{transform:scale(.99)}
.opt .k{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;background:var(--surface2);border:1px solid var(--line);font-family:var(--font);transition:background .25s,color .25s,border-color .25s}
.opt .tx{flex:1;min-width:0}
.opt.sel{border-color:var(--primary);background:var(--primary-soft)}
.opt.sel .k{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.opt.ok{border-color:var(--ok);background:var(--ok-soft)}
.opt.ok .k{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.bad{border-color:var(--bad);background:var(--bad-soft)}
.opt.bad .k{background:var(--bad);color:#fff;border-color:var(--bad)}
.opts.done .opt:not(.ok):not(.bad){opacity:.55}
.opts.done .opt{cursor:default}
.opt.ok.fresh .k{animation:pop .42s cubic-bezier(.2,1.4,.4,1)}
.opt.bad.fresh{animation:shake .38s ease}
.exp{border-radius:var(--r);padding:18px;margin:14px 0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.exp.fresh{animation:rise .32s ease both}
.exp .head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.12rem;margin-bottom:8px}
.exp .head svg{width:26px;height:26px}
.exp.okk .head{color:var(--ok)}.exp.badd .head{color:var(--bad)}
.exp .body{font-size:calc(1.02rem*var(--qs));line-height:1.6}
html[lang=am] .exp .body{font-size:calc(1.06rem*var(--qs));line-height:1.75}
.src{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--faint);font-size:.8rem;font-family:var(--font)}
.listen{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--primary);border-radius:999px;padding:8px 14px;font-size:.9rem;font-weight:600;cursor:pointer;min-height:40px}
.listen.playing{background:var(--primary);color:var(--primary-ink)}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:9;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
.dock .in{max-width:584px;margin:0 auto;display:flex;gap:10px}
.dock .btn{flex:1}
.dock .btn.fresh{animation:rise .3s ease both}

/* lists, bars */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin:12px 0}
.item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;min-height:72px;border:0;background:none;border-bottom:1px solid var(--line);cursor:pointer}
.item:last-child{border-bottom:0}
.item .ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--primary-soft);color:var(--primary)}
.item .ic svg{width:24px;height:24px}
.item .mid{flex:1;min-width:0}
.item .t{font-weight:600;font-size:1.02rem}.item .s{color:var(--muted);font-size:.86rem;margin-top:2px}
.bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--primary);border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bar.ok>i{background:var(--ok)}.bar.warn>i{background:var(--accent)}.bar.bad>i{background:var(--bad)}
.pct{font-variant-numeric:tabular-nums;font-weight:650;color:var(--muted);font-size:.9rem;min-width:44px;text-align:right}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 12px;box-shadow:var(--shadow)}
.stat .n{font-size:1.45rem;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .n small{font-size:.8rem;color:var(--muted);font-weight:600}
.stat .l{font-size:.8rem;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.3}
.chart{display:flex;align-items:flex-end;gap:6px;height:120px;position:relative;margin:14px 0 6px;padding-top:4px}
.chart .b{flex:1;border-radius:6px 6px 3px 3px;background:var(--bad);min-height:4px;opacity:.85;transition:height .8s cubic-bezier(.2,.8,.2,1)}
.chart .b.p{background:var(--ok)}
.chart .line{position:absolute;left:0;right:0;border-top:1.5px dashed var(--faint)}
.chart .line span{position:absolute;right:0;top:-18px;font-size:.72rem;color:var(--faint);font-weight:600}
.hist{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.hist:last-child{border-bottom:0}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.tag.ok{background:var(--ok-soft);color:var(--ok)}.tag.bad{background:var(--bad-soft);color:var(--bad)}
.seg{display:flex;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;min-height:48px;border-radius:10px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;min-height:64px;border-bottom:1px solid var(--line);cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left}
.switch:last-child{border-bottom:0}
.tog{width:52px;height:32px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .2s}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch[aria-checked=true] .tog{background:var(--ok)}.switch[aria-checked=true] .tog::after{transform:translateX(20px)}
.setgroup{padding:16px 18px;border-bottom:1px solid var(--line)}.setgroup:last-child{border-bottom:0}
.setgroup .t{font-weight:600;margin-bottom:10px}
details.miss{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:10px 0;box-shadow:var(--shadow)}
details.miss summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;line-height:1.45;display:flex;gap:12px;align-items:flex-start}
details.miss summary::-webkit-details-marker{display:none}
details.miss summary .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--bad-soft);color:var(--bad);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;font-family:var(--font)}
details.miss .in{padding:0 18px 16px}
.ans{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;margin:8px 0;font-size:.98rem}
.ans.y{background:var(--bad-soft)}.ans.c{background:var(--ok-soft)}
.ans b{flex:none;font-family:var(--font)}
.gate{max-width:420px;margin:12vh auto 0;padding:0 18px;text-align:center}
.gate img{width:72px;height:72px;border-radius:18px;box-shadow:var(--shadow)}
.gate input{width:100%;min-height:60px;font:inherit;font-size:1.3rem;text-align:center;letter-spacing:.2em;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);margin:18px 0 12px;padding:0 14px}
.err{color:var(--bad);min-height:1.5em;margin-top:8px}
.sample{position:absolute;top:10px;right:10px;background:#B4382E;color:#fff;font:700 .72rem/1 var(--font);padding:6px 8px;border-radius:8px;letter-spacing:.06em}
.foot{color:var(--faint);font-size:.8rem;text-align:center;margin:26px 0 8px;line-height:1.5}

@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (min-width:900px){.screen{padding-top:20px}h1{font-size:1.9rem}}
/* focus header: room for the Aa button at phone width */
body.focus .hbar{gap:8px}
@media (max-width:420px){body.focus .lang button{min-width:46px;padding:0 9px}body.focus .hmid{font-size:.9rem}}
/* clear selected state for the big pickers (exam length, time limit, text size) */
.seg.big button.on{background:var(--primary);color:var(--primary-ink);box-shadow:none}