/* 한능검 회차별 기출문제 /history/past-papers/ (HD001). Loaded after site.css on history pages only; the look is the approved preview
   (planning/history/design/v2/past_papers.html) cut down to what the page uses. Colours and fonts are site.css tokens; nothing is redefined
   in :root. The faint ruled-paper top block is approved. Nothing here is fixed or sticky (the build fails otherwise). */

/* top block */
.hp-top { background-color: var(--tint); border: 1px solid var(--line); padding: 28px 28px 24px; background-image: var(--rule-32); }
.hp-eyebrow { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.2px; }
.hp-top h1 { margin: 6px 0 10px; font-size: 34px; line-height: 1.3; font-weight: 900; letter-spacing: -0.8px; color: var(--navy-deep); text-wrap: balance; }
.hp-lead { margin: 0; color: var(--ink-2); max-width: 640px; }
.hp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border: 1px solid var(--line); background: var(--bg); }
.hp-stats > div { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.hp-stats > div:last-child { border-right: 0; }
.hp-stats small { display: block; color: var(--muted); font-size: 12px; }
.hp-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.hp-note { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.hp-note--in { margin: 4px 0 0; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hp-act { width: auto; height: 52px; font-size: 16px; padding: 0 24px; }

/* sections */
.hp-sec { margin-top: 48px; }
.hp-sec h2 { margin: 0 0 6px; font-size: 23px; line-height: 1.35; font-weight: 800; letter-spacing: -0.4px; color: var(--navy-deep); text-wrap: balance; }
.hp-sub { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; max-width: 620px; }
.hp-h3 { margin: 8px 0 10px; font-size: 17px; line-height: 1.4; color: var(--navy-deep); scroll-margin-top: 16px; }
.hp-h3--next { margin-top: 28px; }

/* the three steps (a real sequence, so numbered) */
.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: hp-s; }
.hp-steps li { border: 1px solid var(--line); background: var(--bg-2); padding: 18px; counter-increment: hp-s; min-width: 0; }
.hp-steps li::before { content: counter(hp-s); display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
                       background: var(--navy-deep); color: var(--ink-inv); font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.hp-steps h3 { margin: 0; font-size: 17px; line-height: 1.4; color: var(--navy-deep); }
.hp-steps p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }

/* the papers: round, date, one button to the official post */
.hp-go { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.hp-pp { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--bg); }
.hp-pp__h, .hp-pp__r { display: grid; grid-template-columns: 96px 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 16px; }
.hp-pp__h { background: var(--bg-2); font-size: 13px; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.hp-pp__r { border-bottom: 1px solid var(--line); }
.hp-pp__r:last-child { border-bottom: 0; }
.hp-pp__r b { color: var(--navy-deep); font-size: 16px; }
.hp-pp__d { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 14px; }
.hp-pp__y { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--navy); background: var(--tint); padding: 6px 16px; border-bottom: 1px solid var(--line); }
.hp-btn { justify-self: start; min-height: 44px; padding: 6px 18px; font-size: 15px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
          text-align: left; }
.hp-btn:hover { background: var(--bg-2); color: var(--ink); }
.hp-btn:focus-visible, .hp-act:focus-visible, .hp-faq summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* 시험 정보 (HD004): one table, stacked as cards on a phone */
.hp-info__t { width: 100%; border-collapse: collapse; border: 1px solid var(--line); background: var(--bg); }
.hp-info__t th, .hp-info__t td { padding: 10px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 15px; }
.hp-info__t thead th, .hp-info__t thead td { background: var(--bg-2); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.hp-info__t tbody th { width: 150px; font-size: 13px; font-weight: 700; color: var(--navy-deep); }
.hp-info__t tr:last-child > * { border-bottom: 0; }
.hp-info__t small { font-size: 13px; color: var(--ink-2); }
.hp-info__lv { display: none; font-weight: 700; }
.hp-info__wait { color: var(--muted); }
.hp-info__noterow td { padding-top: 0; }
.hp-info__t tr:has(+ .hp-info__noterow) > * { border-bottom: 0; }
.hp-info__src { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 640px) {
  .hp-info__t, .hp-info__t tbody, .hp-info__t tr, .hp-info__t th, .hp-info__t td { display: block; }
  .hp-info__t thead { display: none; }
  .hp-info__t tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .hp-info__t th, .hp-info__t td { padding: 0; border: 0; width: auto; }
  .hp-info__t tbody th { margin-bottom: 4px; }
  .hp-info__t td { padding: 2px 0; }
  .hp-info__lv { display: inline; margin-right: 6px; }
  .hp-info__noterow { padding-top: 0; border-bottom: 1px solid var(--line); }
}

/* visually hidden, still read by screen readers (site.css has no such class) */
.hp-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* FAQ */
.hp-faq details { border: 1px solid var(--line); border-top: 0; background: var(--bg); }
.hp-faq details:first-child { border-top: 1px solid var(--line); }
.hp-faq summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 18px; font-weight: 700; position: relative; min-height: 48px; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 20px; color: var(--navy); }
.hp-faq details[open] summary::after { content: "−"; }
.hp-faq details p { margin: 0; padding: 0 18px 16px; color: var(--ink-2); font-size: 15px; }

.hp-disc { font-size: 13px; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); padding: 14px 16px; margin: 48px 0 0; }

@media (max-width: 760px) {
  .hp-top { padding: 22px 16px 18px; }
  .hp-top h1 { font-size: 26px; }
  .hp-sec h2 { font-size: 20px; }
  .hp-steps { grid-template-columns: 1fr; }
  .hp-stats strong { font-size: 17px; }
  .hp-actions .hp-act { flex: 1 1 100%; }
  .hp-pp__h { display: none; }
  .hp-pp__r { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px 14px; }
  .hp-pp__r b { grid-column: 1; }
  .hp-pp__d { grid-column: 2; text-align: right; }
  .hp-btn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; text-align: center; }
}
@media (max-width: 520px) {
  .hp-stats { grid-template-columns: minmax(0, 1fr); }
  .hp-stats > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .hp-stats > div:last-child { border-bottom: 0; }
}

/* 예상문제 sets (HD005): the 세트 page, the 정답과 해설 page and the card on /history/past-papers/. The approved look is
   planning/history/design/v2/set.html and answers.html. Same tokens, nothing fixed or sticky. */
.hp-extra { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); max-width: 680px; }
.hp-tabs { display: flex; border-bottom: 1px solid var(--line); margin-top: 20px; overflow-x: auto; scrollbar-width: none; }
.hp-tabs a { min-height: 48px; display: inline-flex; align-items: center; padding: 0 18px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
             border-bottom: 3px solid transparent; margin-bottom: -1px; }
.hp-tabs a:hover { color: var(--navy); text-decoration: none; }
.hp-tabs a[aria-current] { color: var(--navy-deep); border-bottom-color: var(--navy-deep); }
.hp-tabs a:focus-visible, .hp-set:focus-visible, .hp-qa a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.hp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.hp-head .hp-sub, .hp-head .hp-note { margin: 0; }
.hp-head h2 { margin: 0 0 6px; }
.hp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; }

/* 문제지 구성: three cells computed from the data (HD011: no page cell, the sets have no PDF) */
.hp-comp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--bg); }
.hp-comp li { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.hp-comp li:last-child { border-right: 0; }
.hp-comp small { display: block; color: var(--muted); font-size: 12px; }
.hp-comp strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.hp-comp span { display: block; font-size: 13px; color: var(--ink-2); min-height: 20px; }

/* bars: one scale per chart, the value is also written as a number */
.hp-chart { list-style: none; margin: 0; padding: 16px 18px; border: 1px solid var(--line); background: var(--bg); }
.hp-chart__row, .hp-chart__axis { display: grid; grid-template-columns: 112px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.hp-chart__row > span:first-child { min-width: 0; }
.hp-chart__row b { text-align: right; font-variant-numeric: tabular-nums; }
.hp-bar { display: block; height: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.hp-bar i { display: block; height: 100%; background: var(--navy); }
.hp-chart__axis { padding: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hp-chart__axis > span:nth-child(2) { display: flex; justify-content: space-between; }

/* the 「바로 풀기」 box below the sample (HD011) */
.hp-dl { border: 2px solid var(--navy-deep); background: var(--bg); padding: 20px 22px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hp-dl__f { min-width: 0; flex: 1 1 320px; }
.hp-dl__f p, p.hp-dl__f { margin: 0; font-size: 14px; color: var(--ink-2); }

/* the sample question (item 1, without its answer) */
.hp-sample { border: 1px solid var(--line); background: var(--bg); padding: 18px 20px; }
.hp-sample__q { margin: 0; }
.hp-qn { font-weight: 800; color: var(--navy-deep); }
.hp-src { border: 1px solid var(--line); background: var(--bg-2); padding: 12px 14px; margin: 10px 0; font-size: 15px; }
.hp-src small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.hp-src p { margin: 0; }
.hp-sample ol { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.hp-sample li { padding: 4px 0; }
.hp-report { font-size: 14px; color: var(--ink-2); margin: 24px 0 0; }

/* 정답과 해설 */
.hp-qa { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.hp-qa a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
           color: var(--ink); background: var(--bg); font-variant-numeric: tabular-nums; }
.hp-qa a:hover { background: var(--tint); text-decoration: none; }
.hp-qa small { font-size: 11px; color: var(--muted); }
.hp-qa b { font-size: 18px; color: var(--navy-deep); }
.hp-exp { border: 1px solid var(--line); background: var(--bg); padding: 18px 20px; scroll-margin-top: 16px; }
.hp-exp + .hp-exp { border-top: 0; }
.hp-exp__h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.hp-exp__n { font-weight: 900; font-size: 20px; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
.hp-exp__stem { flex: 1 1 300px; min-width: 0; color: var(--ink); }
.hp-exp__ans { font-weight: 800; color: var(--red); white-space: nowrap; }
.hp-exp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.hp-pill { display: inline-block; font-size: 11px; font-weight: 700; background: var(--tint); color: var(--navy); border: 1px solid var(--navy-pale-bd); padding: 1px 6px; }
.hp-exp p { margin: 10px 0 0; color: var(--ink-2); }
.hp-exp p b { color: var(--ink); }
.hp-opts { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px dashed var(--line); }
.hp-opts li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }
.hp-opts li.hp-ok { color: var(--ink); font-weight: 700; }
.hp-opts li.hp-ok span:first-child { color: var(--red); font-weight: 800; }
.hp-exp .hp-more { font-size: 13px; margin: 6px 0 0; }
.hp-exp__trap { display: inline-flex; align-items: center; min-height: 44px; }
.hp-traps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: hp-t; }
.hp-trap { border: 1px solid var(--line); background: var(--bg-2); padding: 16px; min-width: 0; counter-increment: hp-t; color: var(--ink-2); font-size: 15px; scroll-margin-top: 16px; }
.hp-trap::before { content: counter(hp-t); display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; background: var(--navy-deep);
                   color: var(--ink-inv); font-weight: 800; font-size: 13px; margin-bottom: 8px; }

/* the 예상문제 card on /history/past-papers/ */
.hp-sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }   /* U143c: 2 columns from 720px, 3 from 1024px, 1 on phones; the cards of a row share one height */
@media (min-width: 1024px) { .hp-sets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-set { display: grid; align-content: start; gap: 4px; border: 1px solid var(--line); background: var(--bg); padding: 18px; color: var(--ink); min-width: 0; }
.hp-set:hover { background: var(--bg-2); text-decoration: none; }
.hp-set b { font-size: 17px; color: var(--navy-deep); }
.hp-set span { font-size: 14px; color: var(--ink-2); }
.hp-set .hp-set__go { font-style: normal; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 760px) {
  .hp-comp { grid-template-columns: minmax(0, 1fr); }
  .hp-comp li { border-right: 0; border-bottom: 1px solid var(--line); }
  .hp-comp li:last-child { border-bottom: 0; }
  .hp-two { grid-template-columns: 1fr; }
  .hp-chart__row, .hp-chart__axis { grid-template-columns: 92px minmax(0, 1fr) 36px; gap: 8px; }
  .hp-dl .hp-act { flex: 1 1 100%; }
  .hp-qa { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hp-exp { padding: 16px; }
  .hp-traps { grid-template-columns: 1fr; }
}
@media (max-width: 719px) { .hp-sets { grid-template-columns: 1fr; } }

/* 한능검 풀기 page /history/<level>/<set>/solve/ (HD011): one question at a time, built by static/js/history_solve.js. Same tokens. The only thing that sticks is the
   bottom navigation on a phone (the build's check allows `fixed`/`sticky` for `.hs-` selectors only). Text never breaks inside a word (keep-all), long
   unbroken strings still wrap (overflow-wrap). */
.hs-top { padding: 4px 0 0; }
.hs-top h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.35; font-weight: 900; letter-spacing: -0.6px; color: var(--navy-deep); text-wrap: balance; word-break: keep-all; }
.hs-guide { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.hs-noscript { margin: 16px 0 0; border: 1px solid var(--line); background: var(--bg-2); padding: 14px 16px; }
.hs { margin-top: 18px; word-break: keep-all; overflow-wrap: break-word; }
.hs-resume { margin: 0 0 12px; border: 1px solid var(--navy-pale-bd); background: var(--tint); padding: 10px 14px; font-size: 14px; color: var(--navy-deep); }
.hs-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.hs-prog { font-weight: 800; font-size: 17px; color: var(--navy-deep); }
.hs-pts { font-size: 14px; color: var(--ink-2); }
.hs-meter { height: 8px; margin: 8px 0 16px; background: var(--bg-2); border: 1px solid var(--line); }
.hs-meter i { display: block; height: 100%; background: var(--navy); }
.hs-q { border: 1px solid var(--line); background: var(--bg); padding: 20px; }
.hs-stem { margin: 0 0 12px; font-size: 18px; line-height: 1.65; }
.hs-stem:focus { outline: none; }
.hs-stem:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.hs-qn { font-weight: 900; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
.hs-src { border: 1px solid var(--line); background: var(--bg-2); padding: 12px 14px; margin: 0 0 14px; font-size: 15px; }
.hs-src small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.hs-src p { margin: 0 0 4px; }
.hs-src p:last-child { margin-bottom: 0; }
.hs-tlbox { border: 1px solid var(--line); background: var(--bg-2); padding: 12px 14px; margin: 0 0 14px; }
.hs-tlbox small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.hs-tl { list-style: none; margin: 0; padding: 0; }
.hs-tl__e { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-left: 4px solid var(--navy-deep); background: var(--bg); font-size: 15px; }
.hs-tl__e b { font-variant-numeric: tabular-nums; color: var(--navy-deep); }
.hs-tl__g { padding: 3px 10px 3px 12px; border-left: 4px dotted var(--navy); font-weight: 800; font-size: 14px; color: var(--navy); }
.hs-tl__g span { display: inline-block; min-height: 18px; }
.hs-choices { display: grid; gap: 8px; margin-top: 14px; }
.hs-choice { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; text-align: left;
             font: inherit; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.hs-choice:hover { background: var(--bg-2); }
.hs-choice[aria-disabled="true"] { cursor: default; }
.hs-choice[aria-disabled="true"]:hover { background: var(--bg); }
.hs-ctext { min-width: 0; }
.hs-tag { flex: 0 0 auto; font-size: 13px; font-weight: 800; }
.hs-choice--right, .hs-choice--right:hover { border-color: var(--navy-deep); box-shadow: inset 0 0 0 2px var(--navy-deep); background: var(--tint); }
.hs-choice--right .hs-tag { color: var(--navy-deep); }
.hs-choice--wrong { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.hs-choice--wrong .hs-tag { color: var(--red); }
.hs-fb { margin-top: 16px; }
.hs-fb:empty { margin: 0; }
.hs-verdict { margin: 0; padding: 10px 14px; border-left: 4px solid var(--navy-deep); background: var(--tint); font-size: 17px; color: var(--navy-deep); }
.hs-verdict--wrong { border-left-color: var(--red); background: var(--bg-2); color: var(--red); }
.hs-explain, .hs-notes { margin-top: 14px; }
.hs-explain h3, .hs-notes h3 { margin: 0 0 4px; font-size: 15px; color: var(--navy-deep); }
.hs-explain p { margin: 4px 0; color: var(--ink-2); }
.hs-opts { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px dashed var(--line); }
.hs-opts li { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }
.hs-opts li.hs-ok { color: var(--ink); font-weight: 700; }
.hs-opts li.hs-ok em { font-style: normal; color: var(--navy-deep); }
.hs-nav { display: flex; gap: 10px; margin-top: 16px; }
.hs-nav .btn { flex: 1 1 0; height: 52px; padding: 0 16px; font-size: 16px; }
.hs-nav .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.hs-result { border: 1px solid var(--line); background: var(--tint); padding: 24px 20px; text-align: center; }
.hs-score { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 900; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
.hs-score:focus { outline: none; }
.hs-score:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.hs-count { margin: 6px 0 0; color: var(--ink-2); }
.hs-wrong { margin-top: 24px; }
.hs-wrong h3 { margin: 0 0 10px; font-size: 17px; color: var(--navy-deep); }
.hs-wlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hs-wbtn { min-width: 64px; min-height: 48px; padding: 0 14px; font: inherit; font-weight: 700; color: var(--ink); background: var(--bg); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.hs-wbtn:hover { background: var(--bg-2); }
.hs-none { margin: 0; color: var(--ink-2); }
.hs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-bottom: 20px; }   /* the card (.hs, overflow hidden, rounded) must not clip the last button's border */
.hs-act { flex: 1 1 200px; height: 52px; padding: 0 18px; font-size: 16px; }
.hs-choice:focus-visible, .hs-wbtn:focus-visible, .hs-nav .btn:focus-visible, .hs-act:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 760px) {
  .hs-top h1 { font-size: 24px; }
  .hs-q { padding: 16px; }
  .hs-stem { font-size: 17px; }
  .hs-nav { position: sticky; bottom: 0; margin-top: 12px; padding: 10px 0; background: var(--bg); border-top: 1px solid var(--line); }
  .hs-score { font-size: 26px; }
  .hs-act { flex: 1 1 100%; }
}