:root{
  --paper: white;
  --paper-dim:#F8F8F0;
  --ink:#22242A;
  --ink-soft:#5B5E66;
  --pen:#2B4EA3;
  --pen-soft:#DFE6F5;
  --ok:#22694B;
  --ok-soft:#E2EFE7;
  --bad:#A83A32;
  --bad-soft:#F6E4E1;
  --rule:#DCD8CD;
  --serif:"STIX Two Text", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --ui:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0; color:var(--ink); font-family:var(--serif);
  font-size:17.5px; line-height:1.65;
  padding-bottom:40px;
}
.wrap{max-width:730px; margin:0 auto; padding:48px 24px 0}

/* ---------- exam title block ---------- */
header.exam-head{margin-bottom:36px}
.exam-eyebrow{
  font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px;
}
h1.exam-title{
  font-size:34px; font-weight:700; line-height:1.2; margin:0 0 14px;
  letter-spacing:-.01em;
}
.exam-desc{
  font-family:var(--ui); font-size:14.5px; color:var(--ink-soft);
  margin:0 0 16px; max-width:60ch; line-height:1.55;
}
.exam-desc:empty{display:none}
.exam-meta{
  font-family:var(--ui); font-size:13px; color:var(--ink-soft);
  display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px;
}
.exam-meta b{color:var(--ink); font-weight:600}
.double-rule{border:0; border-top:3px solid var(--ink); margin:0 0 3px}
.double-rule + hr{border:0; border-top:1px solid var(--ink); margin:0}

/* ---------- prose ---------- */
#exam h1,#exam h2,#exam h3{font-weight:600; letter-spacing:-.005em; line-height:1.25}
#exam h1{font-size:25px; margin:44px 0 14px; padding-top:20px; border-top:1px solid var(--rule)}
#exam h2{font-size:21px; margin:36px 0 12px}
#exam p{margin:14px 0}
#exam code{
  font-family:var(--mono); font-size:.85em; background:var(--paper-dim);
  padding:1px 5px; border-radius:3px;
}
#exam a{color:var(--pen)}
#exam img{max-width:100%; height:auto; vertical-align:middle; border-radius:4px}

/* p5.js sketch (rendered in a sandboxed iframe) */
.p5-slot{margin:16px 0}
.p5-frame{
  display:block; max-width:100%; border:1px solid var(--rule);
  border-radius:6px; background:var(--paper);
}

/* Coq proof box (::coq blocks) */
.coq-slot{margin:16px 0}
.coq-wrap{border:1px solid var(--rule); border-radius:6px; background:var(--paper); overflow:hidden}
.coq-head{display:flex; align-items:center; gap:12px; padding:7px 12px; border-bottom:1px solid var(--rule)}
.coq-title{
  font-family:var(--ui); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.coq-status{font-family:var(--ui); font-size:12px; color:var(--ink-soft); margin-right:auto}
.coq-status[data-state="ready"]{color:var(--ok)}
.coq-status[data-state="failed"]{color:var(--bad)}
.coq-verdict{font-family:var(--ui); font-size:12px; color:var(--ink-soft)}
.coq-verdict[data-state="ok"]{color:var(--ok); font-weight:600}
.coq-verdict[data-state="bad"]{color:var(--bad)}
.coq-setup{
  margin:0; padding:9px 12px; font-family:var(--mono); font-size:12.5px;
  background:var(--paper-dim); color:var(--ink); border-bottom:1px solid var(--rule);
  white-space:pre-wrap; overflow-x:auto;
}
.coq-in{
  display:block; width:100%; min-height:76px; padding:9px 12px;
  font-family:var(--mono); font-size:13px; line-height:1.5; color:var(--pen);
  background:var(--paper); border:0; border-bottom:1px solid var(--rule);
  outline:none; resize:vertical;
}
.coq-in:focus{background:#FCFCF7}
.coq-in:disabled{opacity:.45}
.coq-in::placeholder{color:#8E8B82; opacity:.7}
/* Coq syntax colours, on the light setup/preamble background */
.coq-vern{color:#7A3E9D; font-weight:600}
.coq-kw{color:#2B4EA3}
.coq-tac{color:#1B6B72}
.coq-com{color:#7C8A7E; font-style:italic}
.coq-str{color:#A05A2C}

/* shared preamble (::coq prelude): collapsed, with a contents list */
.coq-prelude-slot{margin:16px 0}
.coq-pre{
  border:1px solid var(--rule); border-radius:6px;
  background:var(--paper-dim); overflow:hidden;
}
.coq-pre-head{
  display:flex; align-items:baseline; gap:10px; cursor:pointer;
  padding:8px 12px; font-family:var(--ui); font-size:12px; color:var(--ink-soft);
}
.coq-pre-head::-webkit-details-marker{display:none}
.coq-pre-head::before{content:"▸"; font-size:10px; color:var(--ink-soft)}
.coq-pre[open] .coq-pre-head::before{content:"▾"}
.coq-pre[open] .coq-pre-head{border-bottom:1px solid var(--rule)}
.coq-pre-title{
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:11px; color:var(--ink-soft);
}
.coq-pre-count{margin-left:auto}
.coq-pre-decls{
  margin:0; padding:10px 12px; display:grid; gap:2px 14px;
  grid-template-columns:max-content minmax(0,1fr);
  font-family:var(--mono); font-size:12px; line-height:1.5;
}
.coq-pre-name{color:var(--pen); font-weight:600}
.coq-pre-sig{margin:0; color:var(--ink-soft); overflow-wrap:anywhere}
.coq-pre-src{border-top:1px solid var(--rule); max-height:340px; overflow:auto}
.coq-out{
  max-height:220px; overflow-y:auto; padding:9px 12px;
  font-family:var(--mono); font-size:12px; line-height:1.45;
  background:#1E2126; color:#ABB2BF; white-space:pre-wrap; word-break:break-word;
}
.coq-out:empty{display:none}
/* one line per Coq message, then the goal state left by the script */
.coq-msg{margin-bottom:6px}
.coq-error{color:#E06C75}
.coq-warning{color:#E5C07B}
.coq-info, .coq-notice{color:#61AFEF}
.coq-goals{margin:0; font:inherit; color:#ABB2BF; white-space:pre-wrap}

.math[data-display="1"]{display:block; text-align:center; margin:10px 0}

/* ---------- answer blank (signature element) ---------- */
.ans-wrap{display:inline}
.ans{display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap; vertical-align:baseline}
.ans-input{
  font-family:var(--mono); font-size:15px; color:var(--pen);
  background:transparent; border:0; border-bottom:1.6px solid var(--ink);
  padding:2px 4px 3px; min-width:190px; outline:none;
  transition:border-color .15s, background .15s;
}
.ans-input::placeholder{color:#B7B4AA; font-size:13px}
.ans-input:focus{border-bottom-color:var(--pen); background:var(--pen-soft)}
.ans-preview{
  color:var(--pen); font-size:.95em; min-height:1em;
}
.ans-preview:not(:empty)::before{content:"→"; color:var(--ink-soft); font-family:var(--ui); font-size:12px; margin-right:7px}
.ans-preview.err{font-family:var(--ui); font-size:12px; color:var(--bad)}

/* dropdown (custom listbox so choices can hold KaTeX) */
.dd-wrap{position:relative; display:inline-block; vertical-align:baseline}
.dd-btn{
  font:inherit; font-family:var(--serif); font-size:.95em; color:var(--pen);
  background:transparent; border:0; border-bottom:1.6px solid var(--ink);
  padding:1px 3px 2px; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:7px;
  transition:border-color .15s, background .15s;
}
.dd-btn:focus-visible{outline:2px solid var(--pen); outline-offset:2px}
.dd-btn .dd-placeholder{color:#8E8B82; font-family:var(--ui); font-size:13px}
.dd-caret{font-size:10px; color:var(--ink-soft); transform:translateY(-1px)}
.dd-pop{
  position:absolute; left:0; top:calc(100% + 5px); z-index:20;
  min-width:max-content; background:var(--paper);
  border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 6px 22px rgba(20,20,25,.12); padding:4px;
}
.dd-opt{padding:6px 16px 6px 12px; border-radius:4px; cursor:pointer; white-space:nowrap}
.dd-opt:hover, .dd-opt:focus{background:var(--pen-soft); outline:none}
.dd-opt[aria-selected="true"]{color:var(--pen); font-weight:600}

/* true / false */
.tf{display:inline-flex; border:1.4px solid var(--ink); border-radius:4px; overflow:hidden; vertical-align:middle}
.tf button{
  font-family:var(--ui); font-size:13px; font-weight:500; cursor:pointer;
  background:transparent; color:var(--ink); border:0; padding:4px 14px;
}
.tf button + button{border-left:1.4px solid var(--ink)}
.tf button.sel{background:var(--pen); color:#fff}
.tf button:focus-visible{outline:2px solid var(--pen); outline-offset:-2px}

/* mc / multi lists */
ul.mc-list{list-style:none; padding-left:6px; margin:12px 0}
ul.mc-list li{margin:8px 0; display:flex; align-items:baseline; gap:11px}
ul.mc-list input{
  accent-color:var(--pen); width:16px; height:16px; flex:none;
  position:relative; top:2px; cursor:pointer;
}
ul.mc-list label{cursor:pointer}
.q-meta{display:block; margin-top:2px}

/* points chip + result marks */
.pts{
  font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-soft); background:var(--paper-dim); border-radius:999px;
  padding:2px 8px; margin-left:8px; vertical-align:2px; white-space:nowrap;
}
.mark{font-family:var(--ui); font-weight:600; font-size:14px; margin-left:6px}
.q-ok .mark{color:var(--ok)}
.q-bad .mark{color:var(--bad)}
.q-partial .mark{color:var(--pen)}
.q-ok .ans-input, .q-ok .dd-btn{border-bottom-color:var(--ok); background:var(--ok-soft)}
.q-bad .ans-input, .q-bad .dd-btn{border-bottom-color:var(--bad); background:var(--bad-soft)}
.q-ok .tf button.sel{background:var(--ok)}
.q-bad .tf button.sel{background:var(--bad)}
.wrong-note{
  display:block; font-family:var(--ui); font-size:13px; color:var(--bad); margin-top:4px;
}

/* worked solutions */
.solution{
  display:none; margin:16px 0 22px; padding:12px 18px 6px;
  background:var(--paper-dim); border-left:3px solid var(--pen);
  font-size:16px;
}
.solution.show{display:block}
.solution-label{
  font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pen); margin-bottom:2px;
}

/* ---------- floating panels ----------
   A column of independent panels; each collapses on its own. */
.panel-stack{
  position:fixed; top:24px; right:24px; z-index:10;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  max-height:calc(100vh - 48px);
}
.panel{
  width:232px; background:var(--paper); flex:0 1 auto; min-height:0;
  box-shadow:0 10px 34px rgba(20,20,25,.16);
  font-family:var(--ui); overflow:hidden; display:flex; flex-direction:column;
}
.panel[hidden]{display:none}
.panel-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; cursor:pointer; font-family:var(--ui);
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--paper-dim);
  border: 0 !important;
}
.panel-head:focus-visible{outline:2px solid var(--pen); outline-offset:-2px;}
.panel-caret{font-size:23.7px; transition:transform .18s}
.panel.collapsed{width:auto}
.panel.collapsed .panel-head{border:0}
.panel.collapsed .panel-caret{transform:rotate(-90deg)}
.panel.collapsed .panel-body{display:none}
.panel-body{
  padding:14px; display:flex; flex-direction:column; align-items:stretch; gap:10px;
}
.engine{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft)}
.dot{width:8px; height:8px; border-radius:50%; background:#C9A227; flex:none}
.dot.ready{background:var(--ok)} .dot.fail{background:var(--bad)}
.score{font-size:15px; font-weight:600}
.score:empty{display:none}
.panel button, .panel label.filebtn{
  font-family:var(--ui); font-size:13.5px; font-weight:500; cursor:pointer; text-align:center;
  border-radius:6px; padding:8px 14px;
  border:1.4px solid var(--ink);
  background:transparent; color:var(--ink); transition:background .15s;
}
.panel label.filebtn{display:block}
.gh-link{
  align-self:center; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-soft); padding:4px; margin-top:2px; border-radius:6px;
  transition:color .15s;
}
.gh-link:hover{color:var(--ink)}
.gh-link:focus-visible{outline:2px solid var(--pen); outline-offset:2px}

/* ---------- drag-and-drop overlay ---------- */
.drop-overlay{
  position:fixed; inset:0; z-index:50; display:none;
  align-items:center; justify-content:center;
  background:rgba(43,78,163,.10); pointer-events:none;
}
.drop-overlay.show{display:flex}
.drop-card{
  font-family:var(--ui); font-size:16px; font-weight:600; color:var(--pen);
  background:var(--paper); border:2px dashed var(--pen); border-radius:12px;
  padding:22px 34px; box-shadow:0 10px 34px rgba(20,20,25,.16);
}
.drop-card code{
  font-family:var(--mono); font-size:.85em; background:var(--pen-soft);
  padding:1px 6px; border-radius:4px;
}
.panel button.primary{background:var(--pen); border-color:var(--pen); color:#fff}
.panel button.primary:hover{background:#233F85}
.panel button:disabled{opacity:.45; cursor:default}
.panel button:focus-visible, .panel label.filebtn:focus-within{outline:2px solid var(--pen); outline-offset:2px}
input[type=file]{position:absolute; width:1px; height:1px; opacity:0}

@media (max-width: 1024px){
  .panel{top:12px; right:12px; width:210px}
}

footer.colophon{
  margin:56px 0 20px; padding-top:14px; border-top:1px solid var(--rule);
  font-family:var(--ui); font-size:12px; color:var(--ink-soft);
}
footer.colophon a{color:var(--ink-soft)}

/* ---------- exam queue: a floating, resizable window ----------
   Compact on purpose: ~20px rows, 11px labels, one hairline border and no
   shadow-heavy chrome, so it reads as a tool window rather than a card. */
.panel-float{
  position:fixed; z-index:11; width:236px;
  border:1px solid var(--rule); border-radius:4px;
  box-shadow:0 6px 18px rgba(20,20,25,.13);
  resize:both; overflow:hidden;             /* native corner grip */
  min-width:180px; min-height:78px; max-width:96vw; max-height:92vh;
}
.panel-float.collapsed{resize:none; min-height:0; height:auto !important}
.panel-float .panel-head{
  padding:4px 7px; gap:6px; cursor:grab; user-select:none;
  font-size:10px; letter-spacing:.1em;
}
.panel-float .panel-head:active{cursor:grabbing}
.panel-float .panel-caret{font-size:12px; line-height:1; transition:transform .15s}
.panel-float.collapsed .panel-caret{transform:rotate(-90deg)}
.panel-float .panel-title{margin-right:auto}
.panel-float .panel-body{
  padding:4px; gap:4px; flex:1 1 auto; min-height:0; overflow:hidden;
}

.queue-count{font-family:var(--mono); font-size:9.5px; letter-spacing:0; color:var(--ink-soft)}
.queue-list{
  list-style:none; margin:0; padding:0; overflow-y:auto; min-height:0; flex:1 1 auto;
  display:flex; flex-direction:column;
}
.queue-item{display:flex; align-items:stretch; border-top:1px solid transparent; border-bottom:1px solid transparent}
.queue-item.dragging{opacity:.35}
.queue-item.drop-above{border-top-color:var(--pen)}
.queue-item.drop-below{border-bottom-color:var(--pen)}

/* scoped with .panel so these beat the generic `.panel button` rule, which is
   (0,1,1) and would otherwise win over a bare `.queue-open` (0,1,0) */
.panel .queue-grip{
  flex:none; width:13px; padding:0; cursor:grab; background:transparent; border:0;
  color:var(--rule); font-size:11px; line-height:1; border-radius:3px;
}
.panel .queue-grip:hover{color:var(--ink-soft)}
.panel .queue-grip:focus-visible{outline:1.5px solid var(--pen); outline-offset:-1px}
.panel .queue-open{
  flex:1 1 auto; min-width:0; display:block; text-align:left; cursor:pointer;
  font-family:var(--ui); background:transparent; border:0; border-radius:3px;
  padding:3px 5px; color:var(--ink); line-height:1.25;
}
.panel .queue-open:hover{background:var(--paper-dim)}
.panel .queue-open:focus-visible{outline:1.5px solid var(--pen); outline-offset:-1px}
.panel .queue-open[aria-current="true"]{background:var(--pen-soft)}
.panel .queue-open[aria-current="true"] .queue-title{color:var(--pen); font-weight:600}
.queue-line{display:flex; align-items:baseline; justify-content:space-between; gap:6px}
.queue-title{font-size:11.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.queue-meta{display:block; font-size:9.5px; color:var(--ink-soft); opacity:.85}
.queue-score{font-family:var(--mono); font-size:10px; font-weight:600; flex:none; color:var(--ok)}
.queue-score.partial{color:var(--pen)}
.queue-score.bad{color:var(--bad)}
.queue-score.pending{color:var(--ink-soft); font-weight:500; opacity:.55}
.queue-total{
  font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); flex:none;
  border-top:1px solid var(--rule); padding-top:4px;
}
.queue-total:empty{display:none}

/* ---------- share panel (hidden shortcut) ----------
   Floating like the exams window, but its content is fixed-height, so it wants
   a little more breathing room than the dense list does. */
#share-panel{min-width:210px}
/* one button taller than it used to be, so a panel someone resized small
   scrolls rather than hiding Close behind the edge */
#share-panel .panel-body{padding:7px; gap:7px; overflow:auto}
.share-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11.5px; color:var(--ink-soft);
}
.share-row select{
  font-family:var(--ui); font-size:11.5px; color:var(--ink);
  background:var(--paper-dim); border:1px solid var(--rule); border-radius:5px;
  padding:3px 5px; cursor:pointer;
}
.share-row select:focus-visible{outline:2px solid var(--pen); outline-offset:-2px}
.share-status{font-size:11.5px; color:var(--ink-soft); line-height:1.4}
.share-link{
  width:100%; font-family:var(--mono); font-size:11px; color:var(--ink);
  background:var(--paper-dim); border:1px solid var(--rule); border-radius:5px;
  padding:6px 7px;
}
.share-link:focus{outline:2px solid var(--pen); outline-offset:-2px}
/* the one irreversible button in the panel, so it does not look like Copy */
#share-delete{border-color:var(--bad); color:var(--bad)}
#share-delete:hover{background:var(--bad-soft)}
#share-delete[disabled]{opacity:.55; cursor:default}

/* ---------- countdown timer ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.timer{
  position:fixed; right:24px; bottom:24px; z-index:10;
  font-family:var(--ui); display:flex; align-items:center;
}
.timer-face{
  display:flex; align-items:center; gap:2px;
  background:var(--paper); border:1px solid var(--rule); border-radius:999px;
  padding:4px 6px 4px 12px; box-shadow:0 4px 16px rgba(20,20,25,.08);
}
.timer-time{
  width:8ch; border:0; background:transparent; padding:0; margin-right:4px;
  font-family:var(--mono); font-size:15px; font-weight:500; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; text-align:center; outline:none;
  transition:color .15s;
}
.timer-time:not(:read-only){cursor:text}
.timer-time:not(:read-only):focus{color:var(--pen); background:var(--pen-soft); border-radius:4px}
.timer[data-state="running"] .timer-time{color:var(--ink)}
.timer[data-state="done"] .timer-time,
.timer.low .timer-time{color:var(--bad)}
.timer.low .timer-show>span{color:var(--bad)}

.timer-btn, .timer-show{
  font-family:var(--ui); font-size:12px; line-height:1; cursor:pointer;
  color:var(--ink-soft); background:transparent; border:0; border-radius:50%;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.timer-btn:hover, .timer-show:hover{background:var(--paper-dim); color:var(--ink)}
.timer-btn:disabled{opacity:.35; cursor:default; background:transparent}
.timer-btn:focus-visible, .timer-show:focus-visible{outline:2px solid var(--pen); outline-offset:1px}

/* collapsed: just a small clock glyph */
.timer-show{
  display:none; font-size:16px;
  background:var(--paper); border:1px solid var(--rule);
  box-shadow:0 4px 16px rgba(20,20,25,.08);
  width:32px; height:32px;
}
.timer.hidden .timer-face{display:none}
.timer.hidden .timer-show{display:flex}

@media (max-width: 1024px){
  .timer{right:12px; bottom:12px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }