@font-face{font-family:'Scheherazade New';src:url('/fonts/ScheherazadeNew-Regular.ttf') format('truetype');font-weight:400}
@font-face{font-family:'Scheherazade New';src:url('/fonts/ScheherazadeNew-Bold.ttf') format('truetype');font-weight:700}
@font-face{font-family:'STIXTwoMath';src:url('/fonts/STIXTwoMath-Regular.ttf') format('truetype');font-weight:100 900}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/PlexSansArabic-Regular.ttf') format('truetype');font-weight:400}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/PlexSansArabic-Medium.ttf') format('truetype');font-weight:500}

:root{
  --paper:#FBFBF8; --ink:#1E2A4A; --pencil:#6B7080; --rule:#D8DAD4; --rule-strong:#1E2A4A; --wash:#F1F1EC;
  --q:21px; --ui:17px; --hdr:14px; --list:18px;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#14161C; --ink:#D9DDE8; --pencil:#8A90A0; --rule:#2C3040; --rule-strong:#D9DDE8; --wash:#1B1E26;}
}
@media (min-width:900px){ :root{--q:24px; --ui:18px; --hdr:15px; --list:19px;} }

*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:var(--ui);line-height:1.6;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:1px solid var(--rule);border-radius:4px;padding:14px 18px;cursor:pointer;min-height:52px}
button:hover{background:var(--wash)}
button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
button[aria-pressed="true"]{border-color:var(--rule-strong)}
a{color:inherit}
.q,.scheme,math{font-family:"Scheherazade New","STIXTwoMath",serif;font-size:var(--q);line-height:1.9}
math{font-size:1.08em}
mi,mn,mo,msup>mo{font-family:"Scheherazade New","STIXTwoMath",serif;font-style:normal}

/* layout: question column with the copybook margin rule on its right */
.page{min-height:100vh;display:grid;grid-template-columns:1fr;}
.col{padding:24px 20px 48px;border-right:1px solid var(--rule);margin-right:12px;max-width:38em}
.scan{display:none;padding:24px 20px;color:var(--pencil)}
@media (min-width:900px){
  .page{grid-template-columns:minmax(0,640px) 1fr;column-gap:40px;padding:0 40px}
  .col{margin-right:0;padding:48px 32px 64px}
  .scan{display:block;position:sticky;top:0;height:100vh;overflow:auto}
  .scan-toggle{display:none}
}
.hdr{font-size:var(--hdr);color:var(--pencil);margin:0 0 24px}
.stem{margin:0 0 24px}
.opts{margin:0 0 24px;padding:0;list-style:none}
.opts li{margin:6px 0}
.opts b{font-weight:400;margin-left:.6em}
.scan-toggle{display:inline-block;font-size:var(--hdr);margin:0 0 24px;text-decoration:underline;text-underline-offset:4px}
.scan-inline{display:none;margin:0 0 24px}
.scan-inline.open{display:block}
.scanbox{border:1px solid var(--rule);aspect-ratio:4/3;display:grid;place-items:center;font-size:var(--hdr);color:var(--pencil)}
hr{border:0;border-top:1px solid var(--rule);margin:40px 0 24px}
.prompt{margin:0 0 16px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row button{flex:1 1 0;min-width:0}
.row.three button{flex-basis:calc(33.333% - 8px)}
@media (max-width:480px){ .row.three{flex-direction:column} .row.three button{flex-basis:auto} }
.dim{color:var(--pencil)}
.scheme h2{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:var(--ui);font-weight:500;margin:32px 0 12px}
.scheme ol{margin:0;padding:0 1.6em 0 0}
.scheme li{margin:0 0 10px}
.scheme li::marker{color:var(--pencil)}
.thumb{margin:16px 0 0;width:160px}
.reveal{overflow:hidden}
@media (prefers-reduced-motion:no-preference){ .reveal{animation:open .25s ease-out} }
@keyframes open{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[hidden]{display:none!important}

/* home */
.home h1{font-size:var(--ui);font-weight:500;margin:0 0 8px}
.home p{margin:0 0 32px}
.home ul{list-style:none;margin:0 0 32px;padding:0;font-size:var(--list)}
.home li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.home li span:last-child{color:var(--pencil);font-size:var(--ui);white-space:nowrap}
.home .last{color:var(--pencil);font-size:var(--hdr)}
.nav{position:fixed;bottom:12px;left:12px;font-size:12px;color:var(--pencil);display:flex;gap:8px}
.nav button{padding:4px 8px;min-height:0;font-size:12px}

.scanimg{max-width:100%;border:1px solid var(--rule)}
.answerline{margin-top:10px;font-weight:bold}

.saveerr{color:var(--ink);font-size:var(--hdr);margin:12px 0 0}

.note{font:inherit;width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--ink);border-radius:6px;color:var(--ink);margin-top:12px}.reason{margin-top:12px}.reason p{font:inherit;color:var(--ink);margin:0 0 6px}.reason-row{display:flex;flex-wrap:wrap;gap:6px}.reason-row button{font:inherit;color:var(--ink);background:none;border:1px solid var(--ink);border-radius:6px;padding:6px 12px;cursor:pointer}

.report{margin:16px 0 0}.report-toggle,.report-menu button{font:inherit;color:var(--ink);background:none;border:1px solid var(--ink);border-radius:6px;padding:6px 12px;cursor:pointer}.report-menu{margin-top:8px;display:flex;flex-direction:column;gap:6px}.report-menu button{text-align:right}.report-menu span{font:inherit;color:var(--ink)}