* { box-sizing: border-box; }
:root { color-scheme: light; }
body { margin:0; background:#e7e7e7; color:#111; font-family:Arial,sans-serif; }
button, input { font:inherit; }
.toolbar { position:sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid #aaa; padding:9px 14px; text-align:center; }
.toolbar strong { font-size:18px; }
.actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:7px; }
.actions button,.pagelinks button,.pagelinks a { font-size:14px; padding:6px 10px; background:#fff; border:1px solid #555; color:#111; border-radius:3px; cursor:pointer; text-decoration:none; }
button:focus-visible,a:focus-visible,.opt:focus-visible,canvas.write-canvas:focus-visible { outline:3px solid #2867b2; outline-offset:2px; }
.toolbar p { margin:4px; font-size:13px; }
.handwriting-help { color:#333; }
#answer-panel { max-width:900px; margin:8px auto 0; padding:8px 14px; border:1px solid #777; background:#fafafa; text-align:left; font:14px/1.6 Arial,sans-serif; }
#answer-panel[hidden] { display:none; }
#answer-list { display:grid; grid-template-columns:repeat(5,minmax(100px,1fr)); gap:2px 15px; margin:5px 0 0; }
.pagelinks { position:sticky; top:var(--toolbar-height,95px); z-index:4; text-align:center; padding:6px; background:#eee; }
.page { width:210mm; height:297mm; margin:14px auto; padding:12mm 15mm 13mm; position:relative; overflow:hidden; background:#fff; box-shadow:0 2px 8px #aaa; font:20px/1.42 "Times New Roman",serif; }
.pagehead { display:flex; justify-content:flex-end; padding-bottom:2px; font-weight:bold; font-size:14px; }
.name { margin:5px 0 8px; }
.name span { display:inline-block; border-bottom:1px solid; width:52mm; height:25px; vertical-align:bottom; }
.syllabus { text-align:center; text-decoration:underline; margin:0 0 14px; }
.page h2 { font-size:22px; line-height:1.25; margin:12px 0 7px; }
.page h2 small { font-size:17px; font-weight:normal; }
.scene { border:1.5px solid #111; margin:8px 0 12px; padding:9px; }
.desserts { min-height:120px; display:flex; align-items:center; }
.dessert-row { width:100%; display:grid; gap:7px; }
.count-group { display:flex; align-items:center; gap:12px; font-size:17px; }
.icons { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:2px; vertical-align:middle; }
.icons img { width:38px; height:38px; object-fit:contain; }
.aquarium { height:135px; display:flex; align-items:center; justify-content:center; }
.aquarium-groups { display:flex; align-items:center; gap:38px; }
.animal-group { max-width:225px; }
.q { position:relative; margin:11px 0; min-height:36px; }
.q input { font:inherit; border:0; border-bottom:1px solid #111; width:56px; height:32px; text-align:center; background:transparent; outline:none; }
.q input:focus { background:#fffbe6; }
.q input[readonly] { border:1px solid #222; background:#fff; }
.answer-pad { position:relative; display:inline-flex; width:56px; height:32px; border-bottom:1px solid #111; vertical-align:middle; line-height:1; }
.write-canvas { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; touch-action:none; cursor:crosshair; }
.clear-pad { position:absolute; top:-8px; right:-8px; z-index:2; width:17px; height:17px; padding:0; border:1px solid #777; border-radius:50%; background:#fff; color:#333; font:10px/15px Arial,sans-serif; text-align:center; cursor:pointer; }
.write-canvas.incorrect { outline:2px solid #ba3737; outline-offset:1px; border-radius:2px; }
.choice { display:inline-flex; flex-wrap:wrap; gap:9px; vertical-align:baseline; }
.opt { display:inline-block; padding:0 5px; border:1px solid transparent; border-radius:50%; cursor:pointer; }
.opt.selected { border-color:#111; }
.opt.correct { font-weight:bold; text-decoration:underline; }
.basket-pictures,.chair-pictures { display:flex; justify-content:center; gap:18px; margin:6px auto; }
.picture-box { width:47%; min-height:84px; padding:10px; border:1px solid #222; display:flex; align-items:center; justify-content:center; }
.picture-box .icons { max-width:310px; justify-content:center; }
.picture-box .icons img { width:39px; height:39px; }
.work { margin:7px 18px; }
.work .answer-pad { width:55px; }
.bond { width:230px; margin:7px auto; text-align:center; }
.bond-top { display:flex; justify-content:center; align-items:center; gap:8px; }
.bond .bond-circle { width:52px; height:52px; border:1.5px solid; border-radius:50%; display:inline-grid; place-items:center; }
.bond .bond-circle input { width:100%!important; height:100%!important; border:0!important; border-radius:50%; background:transparent!important; }
.bond .bond-circle .answer-pad { width:100%; height:100%; border:0; }
.bond .bond-circle .write-canvas { border:0; }
.bond input { width:53px!important; height:43px!important; }
.bond-arrows { height:31px; display:flex; justify-content:space-evenly; }
.bond-arrows i { display:block; position:relative; width:72px; border-top:1px solid; transform:rotate(25deg); transform-origin:left; }
.bond-arrows i:last-child { transform:rotate(155deg); transform-origin:right; }
.bond-bottom { display:flex; align-items:center; justify-content:space-between; }
.mcq { min-height:110px; padding-right:65px; }
.options { display:grid; grid-template-columns:repeat(2,1fr); gap:3px 18px; margin:8px 18px; }
.answerbox { position:absolute; right:7px; top:30%; width:43px; height:43px; border:1px solid #111; display:grid; place-items:center; }
.answerbox .answer-pad { width:100%; height:100%; border:0; }
.answerbox .write-canvas { border:0; }
.queue { border:1px solid #333; margin:9px 0 17px; padding:10px 8px; }
.ticket { font-size:15px; font-weight:bold; text-align:left; }
.front-arrow { font-size:16px; }
.queue-animals,.labels { display:grid; grid-template-columns:repeat(9,1fr); align-items:center; text-align:center; }
.queue-animals { border-bottom:1px solid #111; padding-top:3px; }
.queue-animals img { width:39px; height:39px; justify-self:center; }
.labels { font-size:14px; }
.shelf { border:1px solid #222; margin:10px auto 16px; width:100%; }
.shelfrow { height:95px; display:grid; grid-template-columns:repeat(5,1fr); border-bottom:2px solid #222; }
.shelfrow:last-child { border:0; }
.shelfrow span { display:flex; align-items:center; justify-content:center; flex-direction:column; border-right:1px solid #888; font-size:16px; }
.shelfrow span:last-child { border:0; }
.shelfrow img { height:45px; width:45px; object-fit:contain; }
.numberbox { display:inline-grid; width:52px; height:47px; border:1px solid #111; vertical-align:middle; }
.numberbox .answer-pad { width:100%; height:100%; border:0; }
.numberbox .write-canvas { border:0; }
.end { text-align:center; margin-top:26px; font-weight:bold; }
.pagefoot { position:absolute; bottom:5mm; left:15mm; right:15mm; border-top:1px solid #aaa; padding-top:3px; font:9px Arial,sans-serif; display:flex; justify-content:space-between; }
.sitefoot { text-align:center; padding:14px; font:13px Arial,sans-serif; }
.sitefoot a { color:#222; }
.incorrect { text-decoration:underline wavy; }
.zoomed .page { width:210mm; height:297mm; margin:10px auto; }
.zoomed .pagefoot { position:absolute; }
@media (max-width:700px) {
  .toolbar { position:relative; }
  .pagelinks { top:0; }
  .actions button { font-size:12px; padding:5px 7px; }
  .page { transform-origin:top left; margin:10px 0; }
  body.fit-mobile .page { zoom:var(--page-scale,1); margin-left:calc((100vw - 210mm * var(--page-scale,1))/2); }
  body:not(.fit-mobile) .page { zoom:1; }
  #answer-list { grid-template-columns:repeat(2,minmax(100px,1fr)); }
}
@media print {
  @page { size:A4; margin:0; }
  html,body { width:210mm; margin:0!important; background:#fff!important; zoom:1!important; }
  .toolbar,.pagelinks,.sitefoot { display:none!important; }
  #sheet { margin:0; padding:0; }
  .page { display:block!important; width:210mm!important; height:297mm!important; margin:0!important; padding:12mm 15mm 13mm!important; box-shadow:none!important; overflow:hidden!important; zoom:1!important; break-after:page; page-break-after:always; }
  .page:last-child { break-after:auto; page-break-after:auto; }
  .page,.page * { visibility:visible!important; }
  .page input:not([readonly]) { color:transparent!important; text-shadow:none!important; }
  .page input[readonly] { color:#111!important; }
  .page .write-canvas { visibility:hidden!important; outline:none!important; }
  .answer-pad .clear-pad { display:none!important; }
  .page .selected { border-color:transparent!important; }
  .page .opt.correct,.page .incorrect { color:inherit!important; text-decoration:none!important; font-weight:normal!important; }
}