/* Exercise Graphs Practice: a sports lab. Cool grey floor, the courses as numbered running-track lanes between brick
   red rails (the chosen lane filled red), the question count and New set on the sheet's own header, questions numbered like lanes, and graphs on white
   engineering paper (blue-grey grid, navy trace; the key adds orange and teal dashed construction lines and shaded
   areas) in both themes, as on paper. On paper everything prints black and grey on white. */
:root {
  --bg: #eef2f5;
  --paper: #ffffff;
  --ink: #14202b;
  --muted: #4a5866;
  --line: #d2dbe3;
  --edge: #6c7a87;
  --accent: #a83a22;
  --accent-ink: #ffffff;
  --accent-soft: #f7e6e1;
  --track: #a83a22;
  --track-ink: #ffffff;
  --track-muted: #f6d9d1;
  --info: #155a8a;
  --ok: #17663a;
  --ok-soft: #dcefe0;
  --close: #7a5300;
  --close-soft: #f6ecd2;
  --bad: #a3241d;
  --bad-soft: #f8e0dd;
  --focus: #0b6fb8;
  --head: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --r: 3px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11161b;
    --paper: #1a2129;
    --ink: #e4eaf0;
    --muted: #a4b1bd;
    --line: #2e3842;
    --edge: #6e7d8b;
    --accent: #f08a6c;
    --accent-ink: #20100b;
    --accent-soft: #3a211a;
    --track: #8e3220;
    --track-ink: #ffffff;
    --track-muted: #f3cfc4;
    --info: #8cc4ef;
    --ok: #8adca6;
    --ok-soft: #14301f;
    --close: #f0c56b;
    --close-soft: #352a12;
    --bad: #ff9c8f;
    --bad-soft: #3a1c18;
    --focus: #7cc0f5;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
a { color: var(--info); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.12; font-weight: 700; }

/* ---------- title with a heart rate trace ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px; padding: 22px 0 14px; }
.hero h1 { font-size: clamp(28px, 4.6vw, 44px); margin: 0 0 6px; letter-spacing: -0.01em; max-width: 20ch; }
.lede { margin: 0; max-width: 60ch; }
.pulse { width: 150px; height: 60px; }
.pulse path { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.pulse line { stroke: var(--line); stroke-width: 2; }

/* ---------- controls: lanes on a track, the set toolbar on the sheet ---------- */
.tool { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.setup { border-top: 6px solid var(--track); border-bottom: 2px solid var(--track); padding: 8px 0 0; }
.courses legend, .fld span { color: var(--muted); font: 600 14px var(--sans); margin-bottom: 3px; }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; gap: 10px; min-height: 44px; height: 100%; padding: 0 10px 0 0; border: 1px solid var(--edge); border-radius: var(--r); background: var(--paper); font: 600 15.5px/1.2 var(--sans); color: var(--ink); overflow: hidden; }
.seg i { font: 700 italic 22px/1 var(--head); align-self: stretch; display: flex; align-items: center; justify-content: center; width: 34px; flex: none; background: var(--track); color: var(--track-ink); }
.seg input:checked + span { background: var(--track); border-color: var(--track); color: var(--track-ink); }
.seg input:checked + span i { background: var(--track-ink); color: var(--track); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.ctl { display: flex; gap: 8px; align-items: center; }
.fld { display: flex; gap: 6px; align-items: center; min-width: 0; }
.fld span { margin: 0; }
.ctl select { min-width: 4.2em; }
.more { display: flex; flex-wrap: wrap; gap: 0 22px; }
.more details[open] { flex-basis: 100%; }
.more details > div { background: var(--paper); color: var(--ink); padding: 8px 10px; margin: 0 0 10px; border-radius: var(--r); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font: 600 15px var(--sans); color: var(--muted); padding: 0; margin-bottom: 4px; }
.tdet summary, .rules summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: 10px 0; display: list-item; }
.tsum { font-weight: 400; color: var(--muted); font-size: 15px; }
.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; padding-top: 4px; }
.tg, .zopt { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; min-height: 44px; background: var(--paper); }
.tg input, .zopt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.tg b, .zopt b { display: block; font-weight: 600; font-size: 15.5px; }
.tg small, .zopt small { display: block; color: var(--muted); font-size: 14px; line-height: 1.3; }
.zones { margin-top: 10px; }
.zones legend { color: var(--ink); }
.zgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); min-height: 44px; padding: 6px 10px; max-width: 100%; }
.btn { font: 600 16px var(--sans); min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.small { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.link { font: inherit; background: none; border: 0; color: var(--info); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; padding: 0 4px; }
.rl { margin: 4px 0 0; padding-left: 20px; font-size: 15.5px; line-height: 1.45; }
.rl li { margin: 0 0 4px; }

/* ---------- the sheet ---------- */
.note { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--bad); background: var(--bad-soft); font-size: 16px; border-radius: var(--r); }
#store-note { overflow-wrap: anywhere; }
.note.info { border-color: var(--info); background: var(--paper); }
.sheet:focus { outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; }
.sheet-head h2 { font-size: 28px; margin: 6px 0 0; }
.code { font-family: var(--mono); letter-spacing: 0.06em; }
.score { margin: 0; color: var(--muted); font-size: 15px; }
.sline { margin: 2px 0 10px; color: var(--muted); font-size: 15px; }
.qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.q { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.qhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 12px 14px 0; }
.qhead h3 { flex: 1 1 13em; }
.q h3 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.qn { font: 700 17px var(--head); border: 2px solid var(--accent); color: var(--accent); width: 1.9em; height: 1.9em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50% 50% 4px 4px; flex: none; }
.scen { margin: 6px 14px 8px; max-width: 75ch; }
.figview { padding: 0 14px; min-width: 0; }
.qparts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px 14px 14px; }
.zoom { display: none; min-height: 40px; padding: 4px 12px; white-space: nowrap; }

/* ---------- drawings: white like paper in both themes ---------- */
.docwrap { color: #14202b; max-width: 100%; }
svg.doc { display: block; background: #fff; }
svg.graph { width: 100%; max-width: 660px; height: auto; border: 1px solid #c3cfda; }
.gmin { stroke: #dde8f1; stroke-width: 1; }
.gmaj { stroke: #93afc6; stroke-width: 1.3; }
.ax { stroke: #14202b; stroke-width: 2; }
.tx, .ty { fill: #14202b; font: 17px "Helvetica Neue", Arial, sans-serif; }
.al { fill: #14202b; font: 600 17px "Helvetica Neue", Arial, sans-serif; }
.cv { fill: none; stroke: #12355b; stroke-width: 2.6; stroke-linejoin: round; }
.dem { fill: none; stroke: #14202b; stroke-width: 2; stroke-dasharray: 10 6; }
.dl, .spl { fill: #14202b; font: italic 16px "Helvetica Neue", Arial, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.gd { stroke: #14202b; stroke-width: 1.2; stroke-dasharray: 2 3; }
.sp { stroke: #4a5866; stroke-width: 1.5; stroke-dasharray: 3 4; }
.br, .brt { stroke: #a83a22; stroke-width: 2.2; }
.lt { fill: #a83a22; font: 700 21px "Helvetica Neue", Arial, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.k1, .k2, .k3 { fill: none; stroke-width: 2; }
.k1 { stroke: #d9480f; stroke-dasharray: 9 5; }
.k2 { stroke: #0b7a75; stroke-dasharray: 4 4; }
.k3 { stroke: #4a5866; stroke-dasharray: 12 4 3 4; }
.kd { fill: #d9480f; }
.sh1 { fill: rgba(217, 72, 15, 0.28); stroke: none; }
.sh2 { fill: rgba(11, 122, 117, 0.25); stroke: none; }
.klg { list-style: none; margin: 0; padding: 4px 8px 6px; background: #fff; color: #14202b; border: 1px solid #c3cfda; border-top: 0; max-width: 660px; font: 14.5px/1.35 "Helvetica Neue", Arial, sans-serif; }
.klg li { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.klg .sw { width: 36px; height: 14px; flex: none; }
.tw { max-width: 100%; overflow-x: auto; }
table.doc { border-collapse: collapse; background: #fff; color: #14202b; font-size: 15.5px; font-variant-numeric: tabular-nums; border: 1.5px solid #14202b; }
table.doc th, table.doc td { border: 1px solid #b8c5d1; padding: 6px 10px; text-align: right; }
table.doc thead th { background: #ecf2f7; font-size: 14.5px; text-align: center; font-weight: 600; }
table.doc tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
td.blank { background: #fbefe9; color: #a83a22; font-weight: 700; text-align: center !important; }
td.fill { color: #a83a22; font-weight: 700; background: #fbefe9; }

/* answer boxes */
.part { border: 0; margin: 0; padding: 0; min-width: 0; }
.part .prompt, .part legend { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 4px; color: var(--ink); }
.ain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ain input { width: 9em; max-width: 100%; font-variant-numeric: tabular-nums; }
.ain .unit { color: var(--muted); }
.opts { display: grid; gap: 4px; }
.opts.row { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.opt { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.part.is-right input[inputmode] { border-color: var(--ok); background: var(--ok-soft); }
.part.is-wrong input[inputmode] { border-color: var(--bad); background: var(--bad-soft); }
.part.is-close input[inputmode], .part.is-unread input[inputmode] { border-color: var(--close); background: var(--close-soft); }
.fb { margin: 4px 0 0; font-size: 15px; line-height: 1.4; padding: 4px 8px; }
.fb.right { color: var(--ok); background: var(--ok-soft); }
.fb.wrong { color: var(--bad); background: var(--bad-soft); }
.fb.close, .fb.unread { color: var(--close); background: var(--close-soft); }
.qfoot { display: flex; gap: 10px; align-items: center; }
details.work { margin-top: 2px; border-top: 1px solid var(--line); padding-top: 4px; }
details.work summary { cursor: pointer; color: var(--info); min-height: 44px; display: flex; align-items: center; font-weight: 600; }
details.work .figview { padding: 0; margin: 6px 0 8px; }
.ans { margin: 8px 0 2px; }
ul.steps { margin: 0 0 4px; padding-left: 20px; color: var(--muted); font-size: 15.5px; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 6px; }
.ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--accent-soft); padding: 6px 10px; }
.share { margin: 16px 0 6px; }
.print-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.print-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; max-width: 100%; }
.print-row select { max-width: 100%; min-width: 0; }
.share-out label { display: grid; gap: 4px; font-weight: 600; margin-top: 8px; }
.share-out input { width: 100%; }
.recent { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); padding: 4px 12px; }
.recent summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.recent small { display: block; color: var(--muted); font-size: 14px; }
.hint { color: var(--muted); font-size: 15px; margin: 0; }
.toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(150%); background: var(--ink); color: var(--paper); padding: 10px 16px; max-width: min(92vw, 520px); font-size: 15.5px; transition: transform 0.2s; z-index: 20; }
.toast.on { transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- content ---------- */
.content { max-width: 72ch; padding: 26px 0 20px; }
.content h2 { font-size: 27px; margin: 26px 0 6px; }
table.ref { border-collapse: collapse; font-size: 15.5px; background: var(--paper); }
table.ref th, table.ref td { border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
table.ref thead th { font-size: 14.5px; color: var(--muted); }
.small { font-size: 15.5px; color: var(--muted); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }
.faq p { margin: 0 0 12px; }
.sources { font-size: 15px; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 16px 0 28px; font-size: 15px; color: var(--muted); }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.print-root { display: none; }

@media (min-width: 900px) {
  .qparts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 22px; }
  .qparts .qfoot, .qparts details.work, .qparts .part.wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .seg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pulse { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .zoom { display: inline-block; }
  .zoomed .dw-graph { overflow-x: auto; }
  .zoomed svg.graph { width: 660px; max-width: none; }
}
@media (max-width: 480px) {
  .hero { padding: 10px 0 10px; }
  .hero h1 { font-size: 26px; }
  .lede { font-size: 15.5px; line-height: 1.45; }
  .seg { gap: 4px; }
  .seg span { gap: 8px; padding-right: 6px; font-size: 14.5px; }
  .seg i { width: 28px; font-size: 19px; }
  .q h3 { font-size: 20px; }
  .qhead { padding: 8px 8px 0; flex-wrap: nowrap; align-items: flex-start; }
  .qhead h3 { flex: 1 1 auto; min-width: 0; }
  .qhead .zoom { flex: none; min-height: 36px; padding: 2px 10px; font-size: 14.5px; }
  .scen { font-size: 16px; line-height: 1.45; }
  .scen { margin: 6px 8px; }
  .figview { padding: 0 8px; }
  .qparts { padding: 8px 8px 12px; }
  table.doc { font-size: 14px; }
  table.doc th, table.doc td { padding: 4px 6px; }
  table.doc thead th { font-size: 12.5px; }
  .tdet summary, .rules summary { min-height: 40px; padding: 8px 0; }
}
@media (max-width: 360px) {
  #rules-sum { display: none; } /* the course is already in the lanes above; the suffix wrapped */
  table.doc th, table.doc td { padding: 3px 4px; }
  table.doc { font-size: 13px; }
  table.doc thead th { font-size: 12px; }
}

/* ---------- print ---------- */
@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --paper: #fff; --edge: #555; }
  @page { margin: 12mm 12mm; }
  body { background: #fff; color: #000; font: 10.5pt/1.36 var(--sans); }
  main, footer, .toast, .skip { display: none !important; }
  .print-root { display: block; }
  svg, table.doc, td.blank, td.fill, thead th { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  table.pt { width: 100%; border-collapse: collapse; }
  table.pt > tbody > tr > td, table.pt > thead > tr > td { padding: 0; }
  .prun { font: 8.5pt var(--sans); color: #444; padding-bottom: 5pt !important; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; border-bottom: 2pt solid #000; margin-bottom: 4pt; }
  .ph h2 { font: 700 17pt var(--head); margin: 0; white-space: nowrap; }
  .ph p { margin: 0; font-size: 9pt; text-align: right; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 4pt 0 4pt; }
  .pround { margin: 0 0 4pt; font-size: 8.4pt; line-height: 1.3; border: 0.8pt solid #000; padding: 3pt 6pt; }
  .pround ul { margin: 0; padding-left: 11pt; columns: 2; column-gap: 8mm; }
  .pround li { break-inside: avoid; margin: 0 0 1pt; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; }
  .pq > li, .pk > li { padding: 6pt 0 7pt; border-bottom: 0.75pt solid #999; break-inside: avoid; page-break-inside: avoid; }
  .pq > li.half { display: inline-block; vertical-align: top; width: calc(50% - 3mm); margin-right: 5mm; }
  .pq > li.half + li.half { margin-right: 0; }
  .pq h3, .pk h3 { font: 700 12pt var(--head); margin: 0 0 2pt; }
  .pscen { margin: 0 0 4pt; font-size: 10.2pt; }
  .pbody { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 6mm; align-items: start; }
  .pk-text .pbody { grid-template-columns: minmax(0, 1fr); }
  /* a graph prints 120 mm wide: small squares about 2 mm across */
  .pfig svg.graph { width: 120mm; max-width: none; border-color: #777; }
  .pkfig svg.graph { width: 78mm; max-width: none; }
  .pk-graph .pkbody { grid-template-columns: 78mm minmax(0, 1fr); column-gap: 4mm; align-items: start; }
  .pk-graph table.pkt td.pkq { width: 34%; }
  .pk-graph table.pkt td.pka { width: 28%; }
  .klg { font-size: 8.5pt; line-height: 1.25; padding: 1mm 1.5mm; max-width: 78mm; border-color: #777; }
  .klg .sw { width: 7mm; height: 3mm; }
  .pkfig .tx, .pkfig .ty { font-size: 19px; }
  .gmin { stroke: #c9c9c9; stroke-width: 0.8; }
  .gmaj { stroke: #7a7a7a; stroke-width: 1.2; }
  .cv { stroke: #000; stroke-width: 2.2; }
  .dem { stroke: #000; }
  .br, .brt, .lt { stroke: #000; }
  .lt { fill: #000; stroke: #fff; }
  .k1, .kd { stroke: #000; }
  .kd { fill: #000; }
  .k2 { stroke: #555; }
  .k3 { stroke: #444; }
  .sh1 { fill: rgba(0, 0, 0, 0.22); }
  .sh2 { fill: rgba(0, 0, 0, 0.1); }
  .tw { overflow: visible; }
  table.doc { font-size: 9.6pt; border-width: 1pt; }
  table.doc th, table.doc td { padding: 2pt 7pt; border-color: #777; }
  table.doc thead th { font-size: 8.8pt; background: #eee; }
  td.blank { background: #fff; color: #000; }
  td.fill { color: #000; background: #e6e6e6; }
  .pparts { display: grid; grid-template-columns: 1fr; gap: 3pt; font-size: 9.8pt; }
  .pk-text .pparts, .pk-table .pparts { grid-template-columns: 1fr 1fr; column-gap: 8mm; }
  .pq .pk-table .pbody { grid-template-columns: minmax(0, 1fr); row-gap: 3mm; }
  .pq > li.half .pparts { grid-template-columns: 1fr; }
  .pparts .pp { break-inside: avoid; }
  .pparts .pp p { margin: 0; }
  .pparts .pp.wide { grid-column: 1 / -1; }
  .pline { margin: 8pt 0 3pt !important; white-space: nowrap; }
  .uline { display: inline-block; width: 30mm; border-bottom: 0.8pt solid #000; }
  .pk-graph .uline { width: 22mm; }
  .popts { display: flex; flex-wrap: wrap; gap: 1pt 10pt; margin: 2pt 0 0 !important; }
  .pkey { break-before: page; page-break-before: always; }
  .psheet + .psheet { break-before: page; page-break-before: always; }
  .pkey + .pkey { break-before: page; page-break-before: always; }
  .pkbody { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2mm; }
  .pkfig { justify-self: start; }
  table.pkt { width: 100%; border-collapse: collapse; font-size: 8.8pt; table-layout: fixed; }
  table.pkt td { border-top: 0.5pt solid #bbb; padding: 2pt 4pt; vertical-align: top; }
  table.pkt td.pkq { width: 30%; }
  table.pkt td.pka { width: 26%; font-weight: 700; }
}