/* Colorbook UI, generated from colorbook.tech, scoped under .cbx.
   Rendered at 1600x1000: at 1280 the app sits at its most cramped, which
   reads as "zoomed in" once the whole thing is scaled down to fit. A
   roomier desktop gives the same proportions a reader would see.
   Viewport units are rewritten against that stage - left as vh/vw they
   resolve against the real browser window and tear the layout apart. */
.cbx{--blue:#324DC7;
    --blue-dark:#26399b;
    --ink:#1e1e1e;
    --muted:#5c5c5c;
    --line:#d4d4d4;
    --bg:#ffffff;
    --shell:#f4f4f4;
    --flag:#c8102e;
    --ok:#0a7d3f;
    --bad:#c8102e;
    /* Colorbook palette. Used for the wordmark and the drifting blob field;
       the working UI keeps a single accent so the app does not turn into a
       fruit salad. The -lt set is for the dark loading splash. */
    --cb1:#e4572e; --cb2:#f2a104; --cb3:#179c6b; --cb4:#1b9aaa;
    --cb5:#3b4ee0; --cb6:#6c4bd6; --cb7:#d6336c;
    --cb1lt:#ff9f7a; --cb2lt:#ffd166; --cb3lt:#5fe0ac; --cb4lt:#6fdcea;
    --cb5lt:#a8b4ff; --cb6lt:#c3aaff; --cb7lt:#ff8fb6;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  display:block;width:1600px;height:1000px;background:var(--shell);color:var(--ink);
  transform-origin:0 0;position:absolute;top:0;left:0;overflow:hidden;
  contain:layout paint;font-size:16px;line-height:1.5;text-align:left;}
.cbx *,.cbx *::before,.cbx *::after{box-sizing:border-box}
.cbx h1{font-size:34px;font-weight:400;margin:0 0 14px}
.cbx p{margin:0 0 10px}
.cbx /* one <i> per letter, .cbx coloured in sequence */
  .cbmark i{font-style:normal}
.cbx .cbmark i:nth-child(1){color:var(--cb1)}
.cbx .cbmark i:nth-child(2){color:var(--cb2)}
.cbx .cbmark i:nth-child(3){color:var(--cb3)}
.cbx .cbmark i:nth-child(4){color:var(--cb4)}
.cbx .cbmark i:nth-child(5){color:var(--cb5)}
.cbx .cbmark i:nth-child(6){color:var(--cb6)}
.cbx .cbmark i:nth-child(7){color:var(--cb7)}
.cbx .cbmark i:nth-child(8){color:var(--cb1)}
.cbx .cbmark i:nth-child(9){color:var(--ink)}
.cbx .screen{display:none;flex:1;min-height:0;flex-direction:column}
.cbx .screen.on{display:flex}
.cbx /* ---------- start / generic pages ---------- */
  .page{flex:1;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:32px 20px}
.cbx .card{max-width:660px;width:100%;position:relative}
.cbx .eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.cbx .lede{color:var(--muted);margin-bottom:24px}
.cbx .spec{border:1px solid var(--line);border-radius:8px;margin-bottom:22px}
.cbx .spec div{display:flex;justify-content:space-between;gap:16px;padding:11px 15px;border-bottom:1px solid var(--line);font-size:15px}
.cbx .spec div:last-child{border-bottom:none}
.cbx .spec span:first-child{color:var(--muted)}
.cbx .spec span:last-child{font-weight:600;text-align:right}
.cbx #s-source .page{flex-direction:column;align-items:center}
.cbx .sheetbody > div > h2.sec:first-child, .cbx .sheetbody h2.sec:first-child{margin-top:0}
.cbx /* ---- app frame: header and footer stay put, .cbx only the panel scrolls ----
     Every tab was taller than the viewport, .cbx so the whole card scrolled and the
     tab strip and Start button disappeared off screen. */
  #s-source .page{align-items:stretch;justify-content:center}
.cbx .intro-cta .btn{min-width:180px}
.cbx .intro{pointer-events:none}
.cbx h2.sec{margin:16px 0 7px;font-size:11.5px}
.cbx /* ---- opening splash, .cbx over the blob field ---- */
  .intro{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
    padding:28px;text-align:center;pointer-events:none}
.cbx .intro.done{animation:introOut .8s cubic-bezier(.4,0,.2,1) forwards}
.cbx .intro-inner{max-width:820px}
.cbx .intro-mark{font-size:14px;font-weight:750;letter-spacing:2.6px;text-transform:uppercase;
    color:var(--brand-ink);opacity:0;animation:introUp .8s .15s cubic-bezier(.2,.7,.3,1) forwards}
.cbx .intro-mark .star{color:var(--brand)}
.cbx .intro-l1{font-size:clamp(25px,67.2px,46px);line-height:1.18;letter-spacing:-1.1px;font-weight:750;
    color:#141c46;margin:20px 0 0}
.cbx .intro-l1 .w{display:inline-block;opacity:0;transform:translateY(16px);filter:blur(6px)}
.cbx /* Paced so each line lands before the next starts moving - the sequence reads
     rather than flashes. */
  .intro-l1 .w1{animation:wordIn .9s .5s cubic-bezier(.2,.7,.3,1) forwards}
.cbx .intro-l1 .w2{animation:wordIn .9s 1.15s cubic-bezier(.2,.7,.3,1) forwards}
.cbx .intro-l1 .w3{animation:wordIn .9s 2.1s cubic-bezier(.2,.7,.3,1) forwards}
.cbx /* the phrase the whole product is about: brightened, .cbx then underlined by a sweep */
  .intro-l1 em{font-style:normal;position:relative;white-space:nowrap;
    background:linear-gradient(90deg,var(--brand),#7856ff);-webkit-background-clip:text;
    background-clip:text;color:transparent}
.cbx .intro-l1 em::after{content:"";position:absolute;left:0;bottom:-.08em;height:.09em;width:100%;
    background:linear-gradient(90deg,var(--brand),#7856ff);border-radius:2px;
    transform:scaleX(0);transform-origin:left;animation:sweep .85s 1.85s cubic-bezier(.2,.7,.3,1) forwards}
.cbx .intro-feats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:30px}
.cbx .feat{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;
    background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);
    backdrop-filter:blur(8px);font-size:12.5px;color:#2b3566;max-width:280px;text-align:left;
    opacity:0;transform:translateY(12px)}
.cbx .feat .fi{display:flex;flex-shrink:0}
.cbx .f1 .fi{color:var(--cb1)}
.cbx .f2 .fi{color:var(--cb6)}
.cbx .f3 .fi{color:var(--cb4)}
.cbx .f4 .fi{color:var(--cb3)}
.cbx .f1{animation:introUp .7s 3s cubic-bezier(.2,.7,.3,1) forwards}
.cbx .f2{animation:introUp .7s 3.35s cubic-bezier(.2,.7,.3,1) forwards}
.cbx .f3{animation:introUp .7s 3.7s cubic-bezier(.2,.7,.3,1) forwards}
.cbx .f4{animation:introUp .7s 4.05s cubic-bezier(.2,.7,.3,1) forwards}
.cbx .intro-cta .btn{min-width:190px}
.cbx #s-source .page{opacity:0;transform:translateY(10px)}
.cbx #s-source.revealed .page{animation:cardIn .7s .05s cubic-bezier(.2,.7,.3,1) forwards}
.cbx #s-source.revealed .intro{display:none}
.cbx .intro-l1 em::after{transform:scaleX(1);animation:none}
.cbx #s-source .page{opacity:1;transform:none}
.cbx #s-results .page{padding:34px 26px}
.cbx /* let the blobs breathe around the card */
  #s-source .page{padding:34px 26px}
.cbx /* Miss cards reuse the question dropdown, .cbx tinted to read as a problem list. */
  .wq.miss>summary{background:#fff7f4}
.cbx .wq.miss[open]{border-color:#f4cdbb}
.cbx /* "How you worked": one dropdown per question, .cbx opening onto its timeline. */
  .wq-body>.wq-p{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:12px 0 0;
    background:#fbfcfe;font-size:14.5px;line-height:1.6}
.cbx .wq-body>.wq-p p{margin:0 0 8px}
.cbx .wq-body>.wq-p p:last-child{margin-bottom:0}
.cbx .wq-s{margin:12px 0 0;font-weight:700;font-size:15px;line-height:1.5}
.cbx .wq-c{list-style:none;margin:10px 0 0;padding:0}
.cbx .wq-c li{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:9px;
    border:1px solid transparent;font-size:14.5px;line-height:1.5}
.cbx .wq-c li+li{margin-top:3px}
.cbx .wq-c li>b{flex:0 0 16px;font-weight:800}
.cbx /* the SPR rows are labelled with a word, .cbx not a letter, .cbx so they need room */
  .wq-c.spr li>b{flex:0 0 auto;min-width:72px;white-space:nowrap}
.cbx /* tables inside a recalled passage keep the exam's rules */
  .wq-p table{border-collapse:collapse;margin:8px 0;font-size:14px}
.cbx .wq-p th, .cbx .wq-p td{border:1px solid var(--line);padding:5px 11px;text-align:left}
.cbx .wq-p th{background:#f3f5fb;font-weight:700}
.cbx .wq-c li>span:not(.wq-tags){flex:1;min-width:0}
.cbx .wq-c li.key{background:#effaf5;border-color:#bfe8d6}
.cbx .wq-c li.wrong{background:#fff6f0;border-color:#ffe0cc}
.cbx /* Struck options carry the same cross-out the exam draws: the rule through the
     option, .cbx plus the dimmed line-through underneath it. */
  .wq-c li{position:relative}
.cbx .wq-c li.struck>b, .cbx .wq-c li.struck>span:not(.wq-tags){opacity:.42;text-decoration:line-through}
.cbx .wq-c li.struck::after{content:"";position:absolute;left:8px;right:96px;top:50%;height:2px;
    background:var(--ink);pointer-events:none}
.cbx .wq-c li.struck:not(:has(.wq-tags em))::after{right:10px}
.cbx .wq-hint{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.cbx .wq-h{margin-top:16px;font-size:11.5px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)}
.cbx .wq{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#fff;overflow:hidden}
.cbx .wq[open]{border-color:#c9d3f5}
.cbx .wq>summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;align-items:center;
    gap:10px;flex-wrap:wrap;font-size:14.5px}
.cbx .wq>summary::-webkit-details-marker{display:none}
.cbx .wq>summary:hover{background:var(--brand-wash)}
.cbx .wq-id{font-weight:800}
.cbx .wq-t{color:var(--muted)}
.cbx .wq-time{color:var(--muted);font-size:13.5px}
.cbx .wq .tag{margin-left:auto}
.cbx .wq-body{padding:4px 14px 14px;border-top:1px solid var(--line)}
.cbx .wtl{list-style:none;margin:12px 0 0;padding:0 0 0 4px}
.cbx .wtl li{position:relative;display:flex;gap:12px;padding:0 0 14px 22px;line-height:1.5}
.cbx /* the spine, .cbx drawn behind the dots and stopped after the last row */
  .wtl li::before{content:"";position:absolute;left:5px;top:12px;bottom:-2px;width:2px;background:var(--line)}
.cbx .wtl li:last-child::before{display:none}
.cbx .wtl li::after{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;
    border:2px solid var(--muted);background:#fff;box-sizing:border-box}
.cbx .wtl li.good::after{border-color:var(--cb3);background:var(--cb3);box-shadow:0 0 0 2px #fff inset}
.cbx .wtl li.bad::after{border-color:var(--cb1);background:var(--cb1);box-shadow:0 0 0 2px #fff inset}
.cbx .wtl li.note::after{border-color:var(--cb2);background:var(--cb2);box-shadow:0 0 0 2px #fff inset}
.cbx .wtl li.start::after{border-color:#b9c0d8;background:#fff}
.cbx .wtl-t{flex:0 0 62px;text-align:right;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.cbx .wtl-d{flex:1;font-size:14.5px}
.cbx .wtl li.good .wtl-d{color:var(--cb3)}
.cbx .wtl li.bad .wtl-d{color:var(--cb1)}
.cbx .wtl-t{flex-basis:48px;font-size:12px}
.cbx /* iPad: allow text selection in the annotatable regions, .cbx and keep the browser
     from hijacking a drag as a page scroll on the handles */
  .passage, .cbx .stem, .cbx .choice .txt{-webkit-user-select:text;user-select:text;-webkit-touch-callout:none}
.cbx .dragbar, .cbx .lr-head, .cbx .lr-drag, .cbx .calcdots, .cbx .calcresize, .cbx .notestoggle, .cbx .grip{touch-action:none}
.cbx .brandmark .star{color:var(--brand)}
.cbx h2.sec{color:#6b7280;letter-spacing:.8px}
.cbx .btn{border-radius:10px}
.cbx .btn.lg{border-radius:12px}
.cbx /* docked (not maximised) the question column slides left, .cbx it does not overlap */
  /* Panels resize the question row itself. Doing this on .pane.right loses to
     the math single-column rule (margin:0 auto), .cbx which is what let the reference
     sheet sit on top of the question. */
  .qwrap{transition:padding .12s}
.cbx /* ---- math exam chrome ---- */
  .examtoolbtn.mathonly{display:none}
.cbx .refico{font-family:"Times New Roman",Times,serif;font-weight:700;font-size:17px;font-style:italic}
.cbx .refico sup{font-size:.62em}
.cbx /* the section title can be long ("Section 2, .cbx Module 1: Math"), .cbx so it must not
     run under the centred clock */
  /* only clamp the title when the window is genuinely tight; on a normal test
     screen it should read in full */
  .topbar .sec{white-space:nowrap}
.cbx /* The two-pane split is reserved solely for the student-produced-response
     directions. A figure is shown inline above the stem instead, .cbx so it can
     never be clipped by a short pane or ride over the question text. */
  body.mathmode.figmode .pane.left{display:block;flex:1 1 50%!important;width:auto!important}
.cbx /* inline figure sits in the normal flow above the stem, .cbx so it pushes the
     question down rather than overlapping it */
  .figinline{position:relative;z-index:0;margin:0 0 16px;max-width:100%;overflow:hidden}
.cbx .figinline img{max-width:100%;max-height:460.0px;width:auto;height:auto;display:block;margin:0 auto;
    object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
.cbx .figinline .mathfig{padding:0}
.cbx .brandmark .star{color:var(--blue);margin-left:2px}
.cbx h2.sec{font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);
    margin:22px 0 10px;display:flex;align-items:baseline;gap:8px}
.cbx .tabpanel > .panelgrid > div > h2.sec:first-child{margin-top:0}
.cbx .btn.lg{padding:11px 26px;font-size:15.5px}
.cbx .btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.cbx /* instant feedback in-exam */
  .choice.fb-correct .body{border-color:#1f9254;background:#f2fbf5}
.cbx .choice.fb-wrong .body{border-color:var(--bad);background:#fdf3f3}
.cbx .btn.sm{padding:6px 12px;font-size:13px}
.cbx .btn{background:var(--blue);color:#fff;border-radius:999px;padding:12px 30px;font-weight:700;font-size:15px}
.cbx .btn:hover{background:var(--blue-dark)}
.cbx .btn.ghost{background:none;color:var(--blue);border:2px solid var(--blue);padding:10px 26px}
.cbx .btn.ghost:disabled{background:none;color:var(--muted);border-color:var(--line);cursor:not-allowed}
.cbx .btn.ghost:hover{background:#eef1fc}
.cbx .btn:disabled{background:#bfbfbf;cursor:not-allowed}
.cbx .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cbx /* ---------- exam chrome ---------- */
  .topbar{position:relative;display:flex;align-items:flex-start;padding:12px 22px 10px;background-color:#e6ecf8;background-image:repeating-linear-gradient(to right,#000 0 1.7361%,transparent 1.7361% 1.8519%);background-position:bottom;background-size:100% 2px;background-repeat:no-repeat;gap:16px;flex-shrink:0}
.cbx .topbar .sec{font-weight:800;font-size:16.7px}
.cbx .topbar .sub{font-size:13px;color:var(--muted)}
.cbx .dirbtn{margin-top:6px;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink);font-weight:600}
.cbx .dirbtn .car{font-size:9px;transition:transform .15s}
.cbx .dirbtn.on .car{transform:rotate(180deg)}
.cbx .examtools{display:flex;gap:22px;align-items:center;min-width:200px;justify-content:flex-end;margin-left:auto;align-self:center}
.cbx .examtoolbtn{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;color:var(--ink);font-weight:600}
.cbx .examtoolbtn .icorow{display:flex;gap:5px;font-size:15px;color:var(--muted)}
.cbx .examtoolbtn .lbl{padding-bottom:1px}
.cbx .examtoolbtn.active .lbl{border-bottom:1.5px solid var(--ink)}
.cbx .dragbar{position:relative;width:11px;margin:0 -5px;cursor:col-resize;display:flex;align-items:flex-start;justify-content:center;z-index:5;flex-shrink:0}
.cbx .dragbar::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:#9a9a9a}
.cbx .dragbar .grip{position:absolute;top:25%;transform:translateY(-50%);width:16px;height:30px;border-radius:0;background:#1e1e1e;border:1px solid #fff;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cbx .dragbar:hover .grip, .cbx .dragbar.active .grip{background:var(--blue)}
.cbx .dragbar .tri{width:0;height:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.cbx .dragbar .tri.left{border-right:4px solid #fff}
.cbx .dragbar .tri.right{border-left:4px solid #fff}
.cbx .clockwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
.cbx .clock{font-size:19.4px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cbx .clock.low{color:var(--flag)}
.cbx .clock.hidden-time{letter-spacing:.2em}
.cbx .clocktoggle{font-size:13px;font-weight:700;border:1.5px solid #000;border-radius:999px;padding:2px 12px;color:var(--ink);position:relative;top:-3px}
.cbx .clocktoggle:hover{border-color:var(--ink)}
.cbx .clocktoggle:disabled{opacity:.4;cursor:not-allowed}
.cbx .clocktoggle:disabled:hover{border-color:var(--line)}
.cbx /* ---------- question area ---------- */
  .qwrap{flex:1;display:flex;min-height:0}
.cbx .pane{flex:1;overflow-y:auto;padding:24px 34px 40px}
.cbx .pane.left{border-right:2px solid var(--line)}
.cbx .passage{font-size:15.3px;line-height:1.62;font-family:Georgia,'Times New Roman',serif;max-width:525px;margin:0 auto}
.cbx .passage ul, .cbx .passage ol{margin:0 0 14px 0;padding-left:22px}
.cbx .passage li{margin-bottom:6px}
.cbx .qcontent{max-width:525px;margin:0 auto}
.cbx .passage p{margin-bottom:14px}
.cbx .passage table{border-collapse:collapse;width:100%;margin:6px 0 16px;font-size:15px}
.cbx .passage caption{text-align:left;font-weight:700;margin-bottom:8px;font-size:15px}
.cbx .passage th, .cbx .passage td{border:1px solid var(--ink);padding:7px 10px;text-align:left}
.cbx .passage th{background:#f2f2f2;font-weight:700}
.cbx .qhead{position:relative;display:flex;align-items:center;margin:0 0 20px;padding:13px 0;background-color:#eee;background-image:repeating-linear-gradient(to right,#000 0 6px,transparent 6px 10px);background-position:bottom;background-size:100% 2px;background-repeat:no-repeat}
.cbx .qnum{position:absolute;left:0;top:0;bottom:0;width:34px;background:var(--ink);color:#fff;border-radius:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
.cbx .markbtn{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:400;color:var(--ink);margin-left:46px}
.cbx .markbtn .fl{display:flex;color:var(--ink)}
.cbx .markbtn .fl svg{fill:#fff}
.cbx .markbtn.on .fl{color:var(--flag)}
.cbx .markbtn.on .fl svg{fill:var(--flag)}
.cbx .abcbtn{position:absolute;right:10px;top:50%;width:34px;height:34px;border-radius:6px;background:#fff;border:1.5px solid #000;box-sizing:border-box;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2;overflow:hidden}
.cbx .abcbtn span{color:#000;font-weight:800;font-size:12px;letter-spacing:.01em}
.cbx .abcbtn::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:2px;background:#000;transform:rotate(-24deg)}
.cbx .abcbtn.on{background:#324DC7;border-color:#324DC7}
.cbx .abcbtn.on span{color:#fff}
.cbx .abcbtn.on::after{background:#fff}
.cbx .stem{font-size:15.3px;line-height:1.6;font-weight:400;font-family:Georgia,'Times New Roman',serif;margin-bottom:18px}
.cbx .choices{display:flex;flex-direction:column;gap:11px}
.cbx .choice{position:relative;display:flex;align-items:center;gap:11px}
.cbx .choice .body{flex:1;display:flex;gap:11px;align-items:flex-start;border:2px solid var(--line);border-radius:8px;padding:11px 14px;text-align:left;font-size:15.3px;line-height:1.6;font-family:Georgia,'Times New Roman',serif;user-select:text;-webkit-user-select:text}
.cbx .choice .body .txt{user-select:text;-webkit-user-select:text}
.cbx .choice .body:hover{border-color:var(--blue)}
.cbx .choice .ltr{width:24px;height:24px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:700;flex-shrink:0}
.cbx .choice.sel .body{border-color:var(--blue)}
.cbx .choice.sel .ltr{background:var(--blue);border-color:var(--blue);color:#fff}
.cbx .choice.struck .body{opacity:.42}
.cbx .choice.struck .body .txt{text-decoration:line-through}
.cbx .choice.struck::after{content:"";position:absolute;left:11px;right:65px;top:50%;height:2px;background:var(--ink);pointer-events:none}
.cbx /* ---------- bottom bar ---------- */
  .botbar{position:relative;display:flex;align-items:center;padding:11px 22px;background-color:#e6ecf8;background-image:repeating-linear-gradient(to right,#000 0 1.7361%,transparent 1.7361% 1.8519%);background-position:top;background-size:100% 2px;background-repeat:no-repeat;gap:14px;flex-shrink:0}
.cbx .who{font-weight:700;font-size:14.5px;min-width:150px}
.cbx .navbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;justify-content:center}
.cbx .navbtn button{background:var(--ink);color:#fff;border-radius:8px;padding:8px 18px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.cbx .pager{display:flex;gap:9px;justify-content:flex-end;min-width:230px;margin-left:auto}
.cbx .pager .btn{padding:9px 22px;font-size:14.5px;border-radius:999px}
.cbx .pager .btn.ghost{background:var(--blue);color:#fff;border:none}
.cbx .pager .btn.ghost:hover{background:var(--blue-dark)}
.cbx .tag{font-weight:700;font-size:12.5px;padding:1px 7px;border-radius:4px;white-space:nowrap}
.cbx .tag.y{background:#e3f4ea;color:var(--ok)}
.cbx .tag.n{background:#fbe6e9;color:var(--bad)}
.cbx .roomcode .lbl{font-size:12px;color:#aaa;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.cbx .dotring{position:relative;width:56px;height:56px;margin:0 auto}
.cbx .dotring i{position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--blue);opacity:.25;animation:dotfade 1s linear infinite}
.cbx .dotring-light i{background:#fff}
.cbx .dotring i:nth-child(1){transform:rotate(0deg) translate(24px);animation-delay:0s}
.cbx .dotring i:nth-child(2){transform:rotate(45deg) translate(24px);animation-delay:.125s}
.cbx .dotring i:nth-child(3){transform:rotate(90deg) translate(24px);animation-delay:.25s}
.cbx .dotring i:nth-child(4){transform:rotate(135deg) translate(24px);animation-delay:.375s}
.cbx .dotring i:nth-child(5){transform:rotate(180deg) translate(24px);animation-delay:.5s}
.cbx .dotring i:nth-child(6){transform:rotate(225deg) translate(24px);animation-delay:.625s}
.cbx .dotring i:nth-child(7){transform:rotate(270deg) translate(24px);animation-delay:.75s}
.cbx .dotring i:nth-child(8){transform:rotate(315deg) translate(24px);animation-delay:.875s}
.cbx .mk-underline.style-dashed{text-decoration-style:dashed}
.cbx .mk-underline.style-dotted{text-decoration-style:dotted}
.cbx .notepop .row{display:flex;justify-content:flex-end;gap:6px;margin-top:7px}
.cbx .notescol{position:relative;flex:0 0 300px;background:#efefef;display:none;min-height:0}
.cbx .notescol.on{display:block}
.cbx .notescol.collapsed{flex:0 0 0px}
.cbx .notescol-inner{height:100%;overflow-y:auto;padding:14px}
.cbx .notescol.collapsed .notescol-inner{display:none}
.cbx .notecard.c-yellow .notecard-head{background:#fdf3ad}
.cbx .notecard.c-blue .notecard-head{background:#c3e2fb}
.cbx .notecard.c-pink .notecard-head{background:#fbd0e4}
.cbx .noteconfirm .row{display:flex;align-items:center;gap:22px}
.cbx .notestoggle{position:absolute;left:0;bottom:8%;width:34px;height:34px;border-radius:0 17px 17px 0;background:#6f6f6f;color:#fff;display:flex;align-items:center;justify-content:center;z-index:6}
.cbx .notescol.collapsed .notestoggle{left:auto;right:0;border-radius:17px 0 0 17px}
.cbx .notestoggle:hover{background:#5f5f5f}
.cbx .notescol.collapsed .notestoggle svg{transform:rotate(180deg)}
.cbx mark.mk-hl{padding:0 1px;border-radius:2px}
.cbx mark.mk-hl.c-yellow{background:#fff3a3}
.cbx mark.mk-hl.c-blue{background:#bcdcff}
.cbx mark.mk-hl.c-pink{background:#ffc9de}
.cbx mark.mk-hl.mk-note{border-bottom:2px dotted var(--flag);cursor:pointer}
.cbx .mk-underline{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px;text-underline-offset:2px}
.cbx .pane.left{border-right:none;border-bottom:2px solid var(--line);max-height:460.0px;flex:1!important}
.cbx .pane{padding:18px 18px 26px}
.cbx .dragbar{display:none}
.cbx .tools, .cbx .examtools{min-width:auto}
.cbx .who{display:none}
.cbx .pager{min-width:auto}
.cbx .topbar{padding:10px 14px 8px}
.cbx .clock{font-size:21px}
.cbx .aiq-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.cbx .aiq-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;
    border:1px solid var(--cb5,#3b4ee0);background:transparent;color:var(--cb5,#3b4ee0);
    font:600 13px/1 inherit;cursor:pointer;transition:background .15s,color .15s}
.cbx .aiq-btn:hover:not(:disabled){background:var(--cb5,#3b4ee0);color:#fff}
.cbx .aiq-btn:disabled{opacity:.55;cursor:default}
.cbx .aiq-credits{font-size:11.5px;color:var(--muted,#5a6394)}
.cbx .aiq-out{margin-top:12px;padding:13px 15px;border-radius:12px;
    background:rgba(59,78,224,.06);border:1px solid rgba(59,78,224,.18)}
.cbx .aiq-out p{margin:0 0 9px;font-size:13.5px;line-height:1.6}
.cbx .aiq-out p:last-child{margin-bottom:0}
.cbx .screen{display:none;flex-direction:column;width:1600px;height:1000px}
.cbx .screen.on{display:flex}
.cbx .page{flex:1;width:100%;max-width:none}
/* Defensive reset: the portfolio styles bare elements - notably
   section{padding:14vh 7vw} - and these screens are <section>s. */
.cbx section{padding:0;margin:0;position:static;background:none}
.cbx div,.cbx span,.cbx i,.cbx em,.cbx b{margin:0}
.cbx ul,.cbx ol{margin:0;padding:0;list-style:none}
.cbx li{margin:0}
/* Borders reset too: the portfolio styles bare buttons with its own border
   colour, which was drawing a blue-grey outline around the exam's Next
   button. The app's own rules are more specific, so anything that should
   have a border still gets one. */
.cbx button{margin:0;font-family:inherit;border:0;background:none;color:inherit}
.cbx h1,.cbx h2,.cbx h3{letter-spacing:normal;text-transform:none}
.cbx .cbx-scroll{overflow:auto;height:100%}

/* No shadows of any kind inside the demo. The portfolio sets text-shadow on
   body text for its own dark theme, and it was inheriting into the app, which
   is a white paper-like interface where glowing text looks wrong. */
.cbx,.cbx *{box-shadow:none !important;text-shadow:none !important}

/* The app toggles the pane divider with a pair of !important rules whose order
   depends on runtime body classes; flattened into one sheet the hiding rule
   won and the divider disappeared. The exam always shows it, so assert that. */
@media(min-width:981px){ .cbx .qwrap .dragbar{display:flex !important} }

/* ---- phone ----------------------------------------------------------
   Colorbook has its own mobile layout for the exam - the panes stack,
   the divider goes, the chrome tightens. Shrinking the 1600px desktop
   layout into a phone-width frame rendered 15px text at 3px, which is
   unreadable; this renders the app's real phone layout at phone-native
   size (390x844) instead, so the text lands at close to full size.
   Viewport units are rewritten against that stage. */
@media(max-width:980px){
  .cbx{width:390px;height:844px}
  .cbx .screen{width:390px;height:844px}
  .cbx #s-results .page{padding:16px 12px}
  .cbx #s-source .page{padding:16px 12px}
  .cbx .wtl li{padding-left:20px}
  .cbx .wtl-t{flex-basis:48px;font-size:12px}
  .cbx .topbar .sec{max-width:30%;overflow:hidden;text-overflow:ellipsis}
  .cbx .qwrap{flex-direction:column}
  .cbx .pane.left{border-right:none;border-bottom:2px solid var(--line);max-height:388.24px;flex:1!important}
  .cbx .pane{padding:18px 18px 26px}
  .cbx .dragbar{display:none}
  .cbx .tools, .cbx .examtools{min-width:auto}
  .cbx .who{display:none}
  .cbx .pager{min-width:auto}
  .cbx .topbar{padding:10px 14px 8px}
  .cbx .clock{font-size:21px}
}