/* Layout: one working column (max 1080px) under a sticky top bar; typing surfaces get the width, the keyboard sits below like the real one. */
:root{
  --bg:#F4F3F8; --surface:#FFFFFF; --surface-2:#ECE9F3; --ink:#1D1928; --muted:#655E78; --line:#D9D4E4;
  --accent:#A61E57; --accent-soft:#F7E3EC; --accent-ink:#FFFFFF; --gold:#C98A0B; --gold-soft:#FBEFD3;
  --good:#1D7F55; --good-soft:#DDF2E7; --bad:#C0352C; --bad-soft:#FBE3E0; --blue:#2F5FB3; --blue-soft:#E2EAF8;
  --key:#FFFFFF; --key-edge:#CCC5DA; --key-ink:#1D1928;
  --f0:#C2417A; --f1:#D9822B; --f2:#3E9B6B; --f3:#3B6FC4; --f4:#6C55C8; --f5:#3B9BA8; --f6:#B9862C; --f7:#C24E4E; --f8:#8A8398;
  --display:'Baloo Paaji 2','Mukta Mahee',system-ui,sans-serif;
  --body:'Mukta Mahee',system-ui,-apple-system,'Segoe UI',sans-serif;
  --guru:'Raavi','Noto Sans Gurmukhi','Mukta Mahee','Nirmala UI',sans-serif;
  --type-size:1.6rem;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14121B; --surface:#1E1B28; --surface-2:#282434; --ink:#EEEAF6; --muted:#A39CB6; --line:#383247;
  --accent:#EC5C93; --accent-soft:#3A1E2C; --accent-ink:#1A0B12; --gold:#F0B53D; --gold-soft:#3A2F14;
  --good:#4CC28A; --good-soft:#163527; --bad:#F2695E; --bad-soft:#3E1D1B; --blue:#7FA6EE; --blue-soft:#1C2A44;
  --key:#272333; --key-edge:#403952; --key-ink:#EEEAF6; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14121B; --surface:#1E1B28; --surface-2:#282434; --ink:#EEEAF6; --muted:#A39CB6; --line:#383247;
  --accent:#EC5C93; --accent-soft:#3A1E2C; --accent-ink:#1A0B12; --gold:#F0B53D; --gold-soft:#3A2F14;
  --good:#4CC28A; --good-soft:#163527; --bad:#F2695E; --bad-soft:#3E1D1B; --blue:#7FA6EE; --blue-soft:#1C2A44;
  --key:#272333; --key-edge:#403952; --key-ink:#EEEAF6; color-scheme:dark}
:root[data-size="s"]{--type-size:1.3rem} :root[data-size="l"]{--type-size:2rem}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.guru{font-family:var(--guru)}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
button{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:60px;flex-wrap:wrap;padding-block:6px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.brand b{font-family:var(--guru);font-size:1.7rem;font-weight:600;color:var(--accent);line-height:1}
.brand span{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.nav a{padding:6px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a.on{color:var(--accent);background:var(--accent-soft)}
.tools{display:flex;gap:6px;align-items:center}
.ghost{background:none;border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.85rem;color:var(--muted);cursor:pointer}
.ghost:hover{color:var(--ink);border-color:var(--muted)}
select,input[type=number]{font:inherit;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px}

main{padding-block:28px 64px}
section{display:flex;flex-direction:column;gap:24px}
.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--accent)}
.h-sec{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.h-sec h1{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.lede{color:var(--muted);max-width:62ch}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:11px 18px;font-weight:700;cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:1rem}
.btn:hover{filter:brightness(1.07)}
.btn.alt{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.alt:hover{border-color:var(--muted)}
.btn.danger{background:var(--bad);color:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.pill{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.acc{background:var(--accent-soft);color:var(--accent)}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:center}
.hero h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{margin-top:12px;font-size:1.08rem}
.hero .row{margin-top:22px}
.demo{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.demo-out{font-family:var(--guru);font-size:2.2rem;min-height:3.4rem;line-height:1.5;padding:4px 10px;border-bottom:2px solid var(--accent)}
.demo-out::after{content:'';display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:3px;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.s-v{font-family:var(--display);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}
.s-l{font-size:.85rem;color:var(--muted)}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.path{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;text-decoration:none;color:var(--ink)}
.path:hover{border-color:var(--accent)}
.path h3{font-size:1.25rem}
.path .pa{font-family:var(--guru);color:var(--accent);font-size:1.05rem}
.path p{color:var(--muted);font-size:.95rem}
.rules{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}
.rules h2{font-size:1.4rem;margin-bottom:10px}
.rules ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.formula{font-variant-numeric:tabular-nums;background:var(--surface-2);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.formula code{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:.88rem}

/* lessons */
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.lesson{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:4px 14px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer}
.lesson:hover{border-color:var(--accent)}
.lesson.is-next{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.l-num{grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-family:var(--display);font-weight:700;color:var(--muted)}
.is-done .l-num{background:var(--good-soft);color:var(--good)}
.is-next .l-num{background:var(--accent);color:var(--accent-ink)}
.l-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.l-t{font-weight:700}
.l-pa{color:var(--muted);font-size:.95rem}
.l-keys{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.kc{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 4px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:1.15rem}
.kc-all{font-size:.85rem;color:var(--muted)}
.l-state{grid-column:2}

/* stages */
.stages{display:flex;flex-direction:column;gap:30px}
.stage{display:flex;flex-direction:column;gap:12px}
.stage-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.stage-h h2{font-size:1.3rem}
.stage-n{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--accent)}
.stage-pa{color:var(--muted)}
.stage-h .pill{margin-left:auto}
.steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.step{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--surface-2);color:var(--muted);font-variant-numeric:tabular-nums}
.step.done{background:var(--good-soft);color:var(--good)}
.step.on{background:var(--accent);color:var(--accent-ink)}
.step-name{margin-left:6px;font-size:.9rem;color:var(--muted);font-weight:600}

/* drill */
.drill-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:start}
.drill-head h1{font-size:clamp(1.3rem,2.6vw,1.75rem)}
.drill-head .sub{font-family:var(--guru);color:var(--accent);font-size:1.1rem}
.tip{background:var(--gold-soft);border-radius:10px;padding:10px 14px;font-size:.95rem}
.live{display:flex;gap:22px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.live div{display:flex;flex-direction:column}
.live b{font-family:var(--display);font-size:1.5rem;line-height:1.1}
.live span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bar{height:4px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.typebox{font-family:var(--guru);font-size:var(--type-size);line-height:2.05;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;max-height:calc(var(--type-size) * 2.05 * 4 + 34px);overflow-y:auto;word-break:normal;overflow-wrap:anywhere;color:var(--muted)}
.ch{border-radius:4px}
.ch.done{color:var(--ink)}
.ch.done.err{color:var(--bad);text-decoration:underline wavy var(--bad);text-decoration-thickness:1px;text-underline-offset:6px}
.ch.cur{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.ch.cur.err{background:var(--bad-soft);color:var(--bad);box-shadow:inset 0 -3px 0 var(--bad)}
.ch.sp.cur{padding:0 .2em}
.shake{animation:shake .18s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.hint{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;min-height:2.6rem}
.hint-ch{font-size:1.8rem;line-height:1;color:var(--accent);min-width:2.2rem;text-align:center}
.hint-key{font-weight:800;background:var(--ink);color:var(--bg);border-radius:6px;padding:2px 10px;font-variant-numeric:tabular-nums}
.hint-f{color:var(--muted);font-size:.92rem}
.hint-note{font-size:.88rem;color:var(--gold);font-weight:600}
.result{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.result .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}

/* keyboard */
.kb{display:flex;flex-direction:column;gap:5px;user-select:none;-webkit-user-select:none;touch-action:manipulation;min-width:0}
.kb-wrap{overflow-x:auto;background:var(--surface-2);border-radius:14px;padding:10px}
.kb-row{display:flex;gap:5px}
.key{flex:1 1 0;min-width:0;position:relative;height:clamp(40px,5.4vw,58px);border-radius:8px;border:1px solid var(--key-edge);border-bottom-width:3px;background:color-mix(in srgb,var(--fc,var(--f8)) 9%,var(--key));color:var(--key-ink);cursor:pointer;padding:0;display:block;transition:transform .06s}
.key.mod{background:var(--key);color:var(--muted)}
.key .k-n{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-size:clamp(.95rem,1.9vw,1.35rem);line-height:1}
.key .k-s{position:absolute;left:5px;top:3px;font-size:clamp(.62rem,1.1vw,.82rem);color:var(--muted);line-height:1.2}
.key .k-e{position:absolute;right:5px;top:3px;font-size:clamp(.55rem,.95vw,.72rem);color:var(--muted);font-weight:700;font-family:var(--body)}
.key.mod .k-e{position:static;display:grid;place-items:center;height:100%;font-size:clamp(.6rem,1vw,.8rem)}
.kb.shifted .key:not(.mod) .k-n{opacity:.25}
.kb.shifted .key:not(.mod) .k-s{color:var(--accent);font-size:clamp(.95rem,1.9vw,1.35rem);left:0;right:0;top:auto;bottom:16%;text-align:center}
.kb.shifted [data-code^="Shift"]{background:var(--accent-soft)}
.key.bump::after{content:'';position:absolute;bottom:5px;left:50%;width:12px;height:2px;margin-left:-6px;border-radius:2px;background:var(--muted)}
.f0{--fc:var(--f0)}.f1{--fc:var(--f1)}.f2{--fc:var(--f2)}.f3{--fc:var(--f3)}.f4{--fc:var(--f4)}.f5{--fc:var(--f5)}.f6{--fc:var(--f6)}.f7{--fc:var(--f7)}.f8{--fc:var(--f8)}
.key.next{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft)}
.key.next .k-s,.key.next .k-e{color:var(--accent-ink);opacity:.85}
.key.hit{transform:translateY(2px)}
.key.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.heat .key:not(.mod){background:color-mix(in srgb,var(--bad) calc(var(--heat,0) * 70%),var(--key))}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;background:var(--fc);vertical-align:-1px}
.drill-tools{display:flex;gap:6px;flex-wrap:wrap}

/* practice */
.prac-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.passages{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.passage{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;min-width:0}
.passage:hover{border-color:var(--accent)}
.p-t{font-size:1.3rem;font-weight:600}
.p-en{font-weight:600;color:var(--muted);font-size:.9rem}
.p-meta{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.p-prev{color:var(--muted);font-size:.95rem;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* exam */
.setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:4px}
.field label,.field .lab{font-weight:700;font-size:.92rem}
.field small{color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.check input{margin-top:5px;accent-color:var(--accent)}
.examhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 16px}
.examhead .t{font-family:var(--guru);font-size:1.15rem}
.clock{font-family:var(--display);font-size:1.9rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.clock.low{color:var(--gold)}
.src{font-family:var(--guru);font-size:calc(var(--type-size) * .8);line-height:1.95;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;max-height:13.5em;overflow-y:auto}
.src .cw{background:var(--gold-soft);border-radius:4px;box-shadow:inset 0 -2px 0 var(--gold)}
textarea{width:100%;font-family:var(--guru);font-size:calc(var(--type-size) * .8);line-height:1.9;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:12px 16px;min-height:9em;resize:vertical}
textarea:focus{border-color:var(--accent);outline:none}
.verdict{font-family:var(--display);font-size:2rem;font-weight:800}
.verdict.good{color:var(--good)} .verdict.bad{color:var(--bad)}
.cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cell{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.c-l{font-size:.8rem;color:var(--muted);font-weight:600}
.c-v{font-family:var(--display);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.c-u{font-size:.78rem;color:var(--muted)}
.cells .cell:first-child{background:var(--accent-soft);border-color:transparent}
.cells .cell:first-child .c-v{color:var(--accent)}
.diff{font-family:var(--guru);font-size:1.15rem;line-height:2.3;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;max-height:24em;overflow-y:auto}
.w.sub{background:var(--bad-soft);border-radius:4px;padding:0 3px}
.w.sub s{color:var(--bad)} .w.sub b{font-weight:500;color:var(--good);margin-left:4px;font-size:.85em}
.w.omit{color:var(--muted);text-decoration:line-through;border:1px dashed var(--muted);border-radius:4px;padding:0 3px}
.w.extra{background:var(--gold-soft);border-radius:4px;padding:0 3px}
.w.space{background:var(--blue-soft);color:var(--blue);border-radius:4px;padding:0 3px}
.dlegend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.85rem;color:var(--muted)}
.dlegend span{display:inline-flex;gap:6px;align-items:center}
.dlegend i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* keyboard page */
.combos{width:100%;border-collapse:collapse}
.combos th,.combos td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.combos th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.combos td.g{font-family:var(--guru);font-size:1.35rem;white-space:nowrap}
.combos kbd,.kbd{font-family:var(--body);font-weight:700;font-size:.85rem;background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 7px;white-space:nowrap}
.tbl{overflow-x:auto}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}

/* progress */
.chart{width:100%;height:auto;display:block}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-target{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:5 4}
.ch-lab{fill:var(--muted);font-size:11px;font-family:var(--body)}
.ch-lab.tgt{fill:var(--gold);font-weight:700}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.ch-area{fill:var(--accent);opacity:.12}
.ch-dot{fill:var(--surface);stroke:var(--accent);stroke-width:2}
.ch-dot.ok{fill:var(--accent)}
.ch-empty{fill:var(--muted);font-size:14px;font-family:var(--body)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums}
footer{border-top:1px solid var(--line);padding-block:20px;color:var(--muted);font-size:.85rem}

@media (max-width:860px){
  .hero,.rules,.setup,.two{grid-template-columns:minmax(0,1fr)}
  .paths,.prac-top{grid-template-columns:minmax(0,1fr)}
  .stats,.cells,.result .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .nav a{white-space:nowrap}
}
@media (max-width:560px){
  .kb-wrap{padding:6px} .kb,.kb-row{gap:3px}
  .key .k-e{display:none} .key.mod .k-e{display:grid;font-size:.55rem}
  .key .k-s{left:2px;top:1px}
  .typebox{padding:12px 14px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* content pages */
.article{max-width:780px;display:flex;flex-direction:column;gap:14px}
.article h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:4px}
.article h2{font-size:1.4rem;margin-top:18px}
.article h3{font-size:1.1rem;margin-top:8px}
.article ul,.article ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.article .g{font-family:var(--guru);font-size:1.1em}
.article kbd{font-family:var(--body);font-weight:700;font-size:.85rem;background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 7px;white-space:nowrap}
.article .note{background:var(--gold-soft);border-radius:10px;padding:10px 14px;font-size:.95rem}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.foot{display:flex;flex-direction:column;gap:8px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 6px}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--accent)}

/* ad slots: hidden until AdSense is configured in js/ads.js */
.ad-slot{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:10px;min-height:120px;display:flex;flex-direction:column;gap:4px}
.ad-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.guides a{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;background:var(--surface-2);text-decoration:none;color:var(--ink)}
.guides a:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.guides a span{color:var(--muted);font-size:.92rem}
@media (max-width:860px){.guides{grid-template-columns:minmax(0,1fr)}}

/* PSSSB exam page: cards before and after, a full-screen shell while typing that looks like exam software */
#ex-app{display:flex;flex-direction:column;gap:18px;margin-block:8px 12px}
.ex-card{display:flex;flex-direction:column;gap:16px}
.ex-cardhead{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.ex-cardhead .guru{color:var(--accent);font-size:1.25rem}
.ex-cardhead b{font-family:var(--display);font-size:1.15rem}
fieldset.field{border:0;padding:0;margin:0}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:6px}
.preset{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.preset:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.preset input{margin-top:5px;accent-color:var(--accent)}
.preset b{display:block;font-size:.95rem}
.preset small{color:var(--muted);font-size:.82rem}
.ex-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ex-card input[type=text]{font:inherit;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
.ex-card input.guru{font-family:var(--guru);font-size:1.2rem;max-width:16rem}
.field .err{color:var(--bad)} .field .ok{color:var(--good);font-weight:600}
.ex-instr{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.ex-card kbd{font-family:var(--body);font-weight:700;font-size:.85rem;background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 6px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}

body.exam-lock{overflow:hidden}
/* exam screen: a fixed light skin modelled on the board's mock software, in both themes */
.ex-shell{position:fixed;inset:0;z-index:50;background:#fff;color:#111;color-scheme:light;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);font-family:Arial,Helvetica,var(--body)}
.ex-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid #bbb;background:#fff}
.ex-who{display:flex;align-items:center;gap:14px;min-width:0}
.ex-photo{width:52px;height:60px;border:1px solid #888;background:#eef1f6;display:grid;place-items:end center;overflow:hidden;flex:none}
.ex-photo svg{width:48px;height:52px;fill:#6b7790}
.ex-name{font-weight:700;font-size:1.25rem;background:#dfe5f2;border:1px solid #888;padding:1px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-title{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ex-title #ex-part{color:#777;font-weight:700;font-size:1.35rem}
.ex-badge{background:#fde3cf;font-weight:700;padding:1px 6px;font-size:1.05rem}
.ex-time{justify-self:end;background:#dfe5f2;font-weight:700;font-size:1.15rem;padding:4px 10px;white-space:nowrap}
.ex-time #ex-clock{color:#e00000;margin-left:10px;font-variant-numeric:tabular-nums}
.ex-body{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;position:relative;overflow-y:auto}
.ex-ref,.ex-typ{border:0;margin:0;padding:6px 32px 18px;display:flex;flex-direction:column;min-height:0}
.ex-ref{background:#fff8b0;flex:1 1 45%} .ex-typ{background:#dfe5f2;flex:1 1 45%}
.ex-ref legend,.ex-typ legend{float:left;width:100%;font-weight:700;color:#4b3e63;font-size:1rem;padding:2px 0 8px}
.ex-src{font-family:var(--guru);font-size:1.75rem;line-height:1.75;background:#fff;color:#000;border:2px solid #4b3e63;padding:8px 14px;overflow-y:auto;flex:1;min-height:5em;user-select:none;-webkit-user-select:none}
#ex-input{flex:1;min-height:5em;resize:none;font-family:var(--guru);font-size:1.75rem;line-height:1.75;background:#fff;color:#000;border:2px solid #4b3e63;border-radius:0;padding:8px 14px}
#ex-input:focus{border-color:#4b3e63;outline:2px solid #8aa4d6;outline-offset:0}
.ex-src.en,#ex-input.en{font-family:Arial,Helvetica,sans-serif;font-size:1.4rem}
.diff.en,.sbox.en{font-family:var(--body);font-size:1.1rem}
.ex-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 16px;background:#fff}
.ex-foot #ex-msg{color:#555;font-size:.9rem} .ex-foot #ex-msg.warn{color:#c00;font-weight:700}
.ex-btns{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.ex-btn{background:#f3f3f3;border:1px solid #999;border-radius:4px;padding:8px 12px;cursor:pointer;color:#111}
.ex-submit{background:#f00;color:#fff;border:0;border-radius:5px;padding:10px 20px;font-size:1.05rem;cursor:pointer}
.ex-submit:hover{background:#d00}
#ex-kbwrap{padding:0 16px 10px}
.ex-break{align-items:center;justify-content:center}
.ex-break .panel{max-width:30rem;display:flex;flex-direction:column;gap:12px}
.ex-shell .panel{background:#fff;color:#111;border-color:#bbb}
.ex-shell .panel .muted{color:#555}
.ex-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;padding:16px}
.ex-modal .panel{max-width:24rem;display:flex;flex-direction:column;gap:10px}

.ex-sheet{display:flex;flex-direction:column;gap:18px}
.rs-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 18px;margin:0}
.rs-meta dt{font-size:.78rem;color:var(--muted);font-weight:600}
.rs-meta dd{margin:0;font-weight:600}
.rs-table th[scope=row]{text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink);font-weight:600}
.rs-table .ok{color:var(--good)} .rs-table .no{color:var(--bad)}
.note-box{background:var(--bad-soft);border-radius:10px;padding:10px 14px;font-size:.95rem}
.note-box ul{margin:4px 0 0}
.rs-part{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.rs-part summary{cursor:pointer;font-weight:600;color:var(--accent)}
.side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:8px}
.sbox{font-family:var(--guru);font-size:1.1rem;line-height:2;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;max-height:20em;overflow-y:auto;white-space:pre-wrap}
@media (max-width:640px){.ex-two,.side{grid-template-columns:minmax(0,1fr)} .ex-bar{grid-template-columns:1fr auto;padding:6px 10px} .ex-title{grid-column:1/-1;grid-row:2} .ex-photo{display:none} .ex-name{font-size:1rem} .ex-title #ex-part{font-size:1.05rem} .ex-ref,.ex-typ{padding:4px 10px 10px} .ex-src,#ex-input{font-size:1.2rem} .ex-src.en,#ex-input.en{font-size:1.05rem}}
@media print{
  .top,footer,.ad-slot,.no-print,.article>:not(#ex-app),#s-login,#s-instr{display:none!important}
  body{background:#fff;color:#000} .panel{border:1px solid #999}
}

/* CBT mock test: question on the left, palette on the right, fixed light skin like the exam software */
#c-app{display:flex;flex-direction:column;gap:18px;margin-block:8px 12px}
.ex-card select{font:inherit;padding:8px 10px}
.c-legend-help{background:var(--surface-2);border-radius:10px;padding:10px 14px;font-size:.93rem}
.c-legend-help ul{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.c-pb{display:inline-grid;place-items:center;width:38px;height:34px;border:1px solid #999;border-radius:4px;background:#e9e9e9;color:#111;font-weight:700;font-size:.9rem;cursor:pointer;font-family:Arial,Helvetica,sans-serif}
.c-pb.sm{width:22px;height:20px;font-size:.72rem;cursor:default;vertical-align:middle}
.c-pb.an{background:#2e9e48;border-color:#2e9e48;color:#fff;border-radius:12px 12px 4px 4px}
.c-pb.na{background:#e5482f;border-color:#e5482f;color:#fff;border-radius:4px 4px 12px 12px}
.c-pb.mk{background:#6c3fb5;border-color:#6c3fb5;color:#fff;border-radius:50%}
.c-pb.am{background:#6c3fb5;border-color:#6c3fb5;color:#fff;border-radius:50%;box-shadow:inset -6px -6px 0 -3px #2e9e48}
.c-pb.cur{outline:3px solid #f0a500;outline-offset:1px}
.c-shell .ex-title #c-title{color:#777;font-weight:700;font-size:1.35rem}
.c-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px}
.c-q{display:flex;flex-direction:column;min-height:0;border-right:1px solid #bbb}
.c-qhead{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid #ddd;font-size:1.1rem}
#c-paltoggle{display:none}
.c-qarea{flex:1;overflow-y:auto;padding:16px 22px}
.c-qtext{font-size:1.2rem;line-height:1.55;margin:0 0 16px;color:#111}
.c-opts{display:flex;flex-direction:column;gap:10px}
.c-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #ccc;border-radius:6px;cursor:pointer;font-size:1.08rem;color:#111;background:#fff}
.c-opt:has(input:checked){border-color:#2f5fb3;background:#eaf0fb}
.c-opt input{margin-top:5px}
.c-let{font-weight:700;color:#555;min-width:1.2em}
.c-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px;border-top:1px solid #ddd;background:#f7f7f7}
.c-act{border:1px solid #888;border-radius:4px;padding:10px 14px;font-weight:700;cursor:pointer;font-size:.95rem}
.c-act.mark{background:#6c3fb5;border-color:#6c3fb5;color:#fff}
.c-act.clear{background:#fff;color:#111}
.c-act.save{background:#2e9e48;border-color:#2e9e48;color:#fff;margin-left:auto}
.c-side{display:flex;flex-direction:column;gap:12px;padding:12px;background:#e8eef9;overflow-y:auto}
.c-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;font-size:.8rem;color:#222}
.c-legend span{display:flex;align-items:center;gap:5px}
.c-pal{display:grid;grid-template-columns:repeat(auto-fill,38px);gap:8px;align-content:start}
.c-side .ex-submit{margin-top:auto}
.c-shell #c-sum{margin:6px 0}
.c-shell #c-sum th{text-transform:none;letter-spacing:0;font-size:.92rem;color:#111}
.c-review{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.c-rev{border-bottom:1px solid var(--line);padding-bottom:12px}
.c-revq{font-weight:600;margin-bottom:6px}
.c-rev ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.c-rev ul li{padding:3px 8px;border-radius:6px;display:flex;gap:8px}
.c-rev li.right{background:var(--good-soft);color:var(--good);font-weight:600}
.c-rev li.mine{background:var(--bad-soft);color:var(--bad)}
.c-exp{color:var(--muted);font-size:.92rem;margin-top:6px}
.c-tag{font-size:.75rem;font-weight:700;padding:1px 8px;border-radius:99px;margin-left:6px;white-space:nowrap}
.c-tag.ok{background:var(--good-soft);color:var(--good)} .c-tag.no{background:var(--bad-soft);color:var(--bad)} .c-tag.skip{background:var(--surface-2);color:var(--muted)}
.verdict small{font-size:.5em;color:var(--muted)}
@media (max-width:760px){
  .c-main{grid-template-columns:minmax(0,1fr);position:relative}
  #c-paltoggle{display:inline-block}
  .c-side{position:absolute;inset:0 0 0 auto;width:min(300px,88vw);transform:translateX(100%);transition:transform .2s;box-shadow:-4px 0 16px rgba(0,0,0,.2);z-index:2}
  .c-side.open{transform:none}
  .c-act{flex:1 1 auto;padding:10px 8px;font-size:.88rem}
  .c-act.save{margin-left:0}
  .c-qarea{padding:12px 14px}
}
.ex-time #c-clock{color:#e00000;margin-left:10px;font-variant-numeric:tabular-nums}