.hsk-tests {
  color-scheme: light;
  --paper: var(--surface-page, #f8f6f1);
  --surface: var(--surface-card, #fffefa);
  --ink: var(--text-body, #272722);
  --muted: var(--text-muted, #605c53);
  --line: var(--border-default, #e3ded3);
  --red: var(--accent-ink, #ad242d);
  --blush: var(--accent-soft, #fdf0eb);
  --jade: #1d5847;
  --mint: #e7f1e8;
  --gold: #77511d;
  --honey: #f9efd9;
  --blue: #35597e;
  --sky: #eaf0f8;
  --site-header-height: 73px;
  max-width: 1112px;
  padding: clamp(20px, 4vw, 44px) 16px;
  line-height: 1.5;
  color: var(--ink);
}
.hsk-tests [hidden] { display: none !important; }
.hsk-tests h1, .hsk-tests h2, .hsk-tests h3, .hsk-tests p, .hsk-tests ul, .hsk-tests dl, .hsk-tests dd, .hsk-tests fieldset, .hsk-tests figure { margin: 0; }
.hsk-tests input, .hsk-tests select { font: inherit; color: inherit; }
.hsk-tests button, .hsk-tests label:has(input[type=radio]), .hsk-tests summary, .hsk-tests select { cursor: pointer; }
.hsk-tests button:disabled { cursor: default; }
.hsk-tests :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.hsk-tests .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.hsk-tests h1 { font-size: clamp(31px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -.065em; font-weight: 780; margin: 5px 0 8px; }
.hsk-tests h2 { font-size: clamp(22px, 3vw, 29px); line-height: 1.18; letter-spacing: -.04em; font-weight: 770; }
.hsk-tests h3 { font-size: 17px; letter-spacing: -.025em; }
.hsk-tests .subtle { color: var(--muted); font-size: 13px; }
.hsk-tests .intro { margin-bottom: 22px; }
.hsk-tests .panel { min-width: 0; padding: clamp(14px, 2.4vw, 24px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.hsk-tests .catalog-layout, .hsk-tests .summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 14px; }
.hsk-tests fieldset { border: 0; min-width: 0; padding: 0; }
.hsk-tests legend { padding: 0; margin-bottom: 9px; font-weight: 770; }
.hsk-tests .level-options, .hsk-tests .variant-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hsk-tests .variant-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hsk-tests .pick { position: relative; display: grid; align-content: center; gap: 3px; padding: 9px 10px; min-height: 68px; border: 1px solid var(--line); border-radius: 8px; }
.hsk-tests .pick:hover { border-color: var(--red); }
.hsk-tests .pick:has(:checked), .hsk-tests .pick[aria-current=page], .hsk-tests .answer:has(:checked) { border-color: var(--red); background: var(--blush); box-shadow: inset 0 0 0 1px var(--red); }
.hsk-tests .pick:has(:focus-visible), .hsk-tests .answer:has(:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.hsk-tests .pick strong { font-size: 21px; letter-spacing: -.05em; line-height: 1.08; }
.hsk-tests .pick small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.hsk-tests .pick .marker { position: absolute; right: 8px; bottom: 11px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--muted); }
.hsk-tests .pick:has(:checked) .marker { background: var(--red); border-color: var(--red); color: white; }
.hsk-tests .pick:has(:checked) .marker::after { content: "✓"; font-size: 11px; line-height: 1; }
.hsk-tests .chooser, .hsk-tests .summary-panel { display: grid; gap: 14px; }
.hsk-tests .chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; list-style: none; }
.hsk-tests .chips li, .hsk-tests .tag { padding: 3px 8px; background: var(--paper); border-radius: 5px; color: var(--muted); font-size: 12px; font-weight: 720; }
.hsk-tests .tag.blue { background: var(--sky); color: var(--blue); }
.hsk-tests .tag.green { background: var(--mint); color: var(--jade); }
.hsk-tests .tag.red { background: var(--blush); color: var(--red); }
.hsk-tests .tag.gold { background: var(--honey); color: var(--gold); }
.hsk-tests .chooser-footer, .hsk-tests .task-actions, .hsk-tests .attempt-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.hsk-tests .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hsk-tests .chooser-footer { padding-top: 12px; border-top: 1px solid var(--line); }
.hsk-tests .eddy-btn { min-height: 44px; height: auto; padding: 7px 13px; font-size: 14px; white-space: normal; }
.hsk-tests .eddy-btn--primary:not(:disabled) {
  background: var(--accent-hover, #ad242d);
  color: var(--text-inverse, #fff);
  text-decoration: none;
}
.hsk-tests .eddy-btn--primary:not(:disabled):hover { background: var(--red); }
.hsk-tests .skip-task { margin-bottom: 8px; }
.hsk-tests .skip-task:not(:focus) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; clip-path: inset(50%); overflow: hidden; }
.hsk-tests .eddy-btn--ghost { padding-inline: 8px; color: var(--muted); }
.hsk-tests .eddy-btn.compact { padding-inline: 9px; font-size: 12px; }
.hsk-tests select { min-height: 44px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 720; font-size: 14px; }
.hsk-tests .notice { color: var(--red); background: var(--blush); padding: 8px; border-radius: 6px; font-size: 14px; }
.hsk-tests .attempt-top, .hsk-tests .result-top { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: end; gap: 8px 15px; margin-bottom: 16px; }
.hsk-tests .attempt-top h1, .hsk-tests .result-top h1 { font-size: clamp(28px, 4.5vw, 46px); }
.hsk-tests .progress { width: min(100%, 210px); display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.hsk-tests progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 10px; overflow: hidden; appearance: none; background: var(--line); }
.hsk-tests progress::-webkit-progress-bar { background: var(--line); }
.hsk-tests progress::-webkit-progress-value { background: var(--red); border-radius: 10px; }
.hsk-tests progress::-moz-progress-bar { background: var(--red); }
.hsk-tests .attempt-layout { display: grid; grid-template-columns: minmax(182px, .35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.hsk-tests .navigator summary { font-weight: 770; min-height: 38px; }
.hsk-tests .nav-group { display: grid; gap: 4px; margin-block: 6px 13px; }
.hsk-tests .nav-group h3 { font-size: 13px; color: var(--muted); }
.hsk-tests .number-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(34px, 1fr)); gap: 4px; }
.hsk-tests .number { min-height: 38px; padding: 3px 2px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.hsk-tests .number[aria-current=step] { border-color: var(--red); background: var(--blush); color: var(--red); font-weight: 800; }
.hsk-tests .number.answered:not([aria-current=step]) { background: var(--mint); color: var(--jade); }
.hsk-tests .number .tick { margin-left: 2px; font-size: 10px; }
.hsk-tests .task-column, .hsk-tests .task, .hsk-tests .player { display: grid; gap: 12px; }
.hsk-tests .player { gap: 6px; padding-block: 12px; }
.hsk-tests .player h2 { font-size: 17px; letter-spacing: -.025em; }
.hsk-tests .player audio { width: 100%; min-width: 0; display: block; }
.hsk-tests #retry-audio { justify-self: start; }
.hsk-tests #audio-status:empty { display: none; }
.hsk-tests .audio-parts summary { min-height: 44px; padding-block: 10px; font-size: 13px; color: var(--muted); font-weight: 720; }
.hsk-tests .audio-parts[open] > .eddy-btn { margin-top: 6px; }
.hsk-tests .cues { display: flex; flex-wrap: wrap; gap: 5px; }
.hsk-tests .cues:empty { display: none; }
.hsk-tests .cues .eddy-btn[aria-current=true] { background: var(--sky); border-color: #a8b9ce; color: var(--blue); }
.hsk-tests .materials { display: grid; gap: 10px; }
.hsk-tests .materials figure { min-width: 0; }
.hsk-tests .materials img { display: block; width: min(100%, 730px); height: auto; border-radius: 5px; }
.hsk-tests .materials img.natural { width: auto; max-width: 100%; max-height: 520px; object-fit: contain; }
.hsk-tests .material-zoom { display: none; }
.hsk-tests .material-text { white-space: pre-wrap; font: 500 clamp(17px, 2.2vw, 24px)/1.8 var(--font-hanzi, "PingFang SC", sans-serif); }
.hsk-tests .task-actions { border-top: 1px solid var(--line); padding-top: 12px; }
.hsk-tests .answers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 6px; }
.hsk-tests .answers-grid.with-labels { grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); }
.hsk-tests .answers-grid.with-pictures { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hsk-tests .answer { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; overflow-wrap: anywhere; }
.hsk-tests .answer.picture-answer { display: grid; align-items: start; padding: 6px; }
.hsk-tests .picture-answer img { width: 100%; aspect-ratio: 4/3; display: block; object-fit: contain; background: var(--paper); border-radius: 4px; }
.hsk-tests .picture-label { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hsk-tests .answer input { accent-color: var(--red); }
.hsk-tests .answer span[lang=zh] { font-size: 17px; }
.hsk-tests .character-label { display: grid; gap: 5px; width: min(100%, 260px); font-weight: 700; }
.hsk-tests .character { min-height: 54px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font: 500 23px/1.4 var(--font-hanzi, "PingFang SC", sans-serif); }
.hsk-tests .writing-label { display: grid; gap: 8px; }
.hsk-tests .writing-label textarea, .hsk-tests .order-response select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: inherit; font: inherit;
}
.hsk-tests .writing-label textarea { resize: vertical; font-size: 20px; line-height: 1.6; }
.hsk-tests .order-response { display: grid; gap: 8px; }
.hsk-tests .order-response label { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: center; gap: 8px; }
.hsk-tests .order-options { padding-left: 1.5em; }
.hsk-tests .attempt-footer { margin-top: 15px; }
.hsk-tests .result-banner { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 14px; overflow: hidden; background: var(--jade); color: #fff9eb; padding: clamp(19px, 3.2vw, 34px); border-radius: 14px; margin-bottom: 14px; }
.hsk-tests .result-banner .eddy-eyebrow { grid-area: 1 / 1; color: #dcecdc; }
.hsk-tests .result-banner > h2 { grid-area: 2 / 1; font-size: clamp(45px, 7vw, 74px); line-height: 1.05; letter-spacing: -.078em; margin-block: 3px 8px; }
.hsk-tests .result-banner > h2 span { color: #cce4d1; font-size: .53em; letter-spacing: -.035em; margin-left: .12em; white-space: nowrap; }
.hsk-tests .result-banner > p:not(.eddy-eyebrow) { grid-column: 1/-1; color: #e7eee6; font-size: 14px; }
.hsk-tests .stamp { grid-area: 1 / 2 / 3 / 3; align-self: center; width: clamp(42px, 8vw, 80px); aspect-ratio: 1; display: grid; place-items: center; border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 4px; border-radius: 8px; transform: rotate(-8deg); color: #bcdac5; opacity: .7; font: 500 clamp(27px, 6vw, 55px)/1 "PingFang SC", "Microsoft YaHei", sans-serif; pointer-events: none; }
.hsk-tests .summary-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-bottom: 14px; }
.hsk-tests .summary-panel { gap: 10px; align-content: start; }
.hsk-tests .section-results { padding: 0; list-style: none; }
.hsk-tests .section-results li { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center; padding-block: 7px; border-bottom: 1px solid var(--line); }
.hsk-tests .section-results li:last-child { border: 0; }
.hsk-tests .section-results strong { color: var(--jade); }
.hsk-tests .section-results progress { grid-column: 1/-1; height: 5px; }
.hsk-tests .section-results progress::-webkit-progress-value { background: var(--jade); }
.hsk-tests .section-results progress::-moz-progress-bar { background: var(--jade); }
.hsk-tests .stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.hsk-tests .stats:has(> div:nth-child(4)) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.hsk-tests .stats > div { padding: 7px 8px; border-radius: 7px; background: var(--mint); color: var(--jade); }
.hsk-tests .stats > div:nth-child(2) { background: var(--blush); color: var(--red); }
.hsk-tests .stats > div:nth-child(3) { background: var(--honey); color: var(--gold); }
.hsk-tests .stats > div:nth-child(4) { background: var(--sky); color: var(--blue); }
.hsk-tests .stats dt { font-size: 12px; }
.hsk-tests .stats dd { font-size: 26px; font-weight: 780; line-height: 1.16; }
.hsk-tests .review { display: grid; gap: 9px; }
.hsk-tests .filters, .hsk-tests .filter-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hsk-tests .filters { justify-content: space-between; }
.hsk-tests .filters select { max-width: 100%; }
.hsk-tests .filter-buttons .eddy-btn[aria-pressed=true] { color: var(--red); background: var(--blush); border-color: var(--red); }
.hsk-tests .review-list { display: grid; gap: 7px; }
.hsk-tests .review-item { border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.hsk-tests .review-item summary { min-height: 48px; padding: 10px; }
.hsk-tests .review-item summary .tag { margin-left: 5px; }
.hsk-tests .review-item summary strong { margin-right: 5px; }
.hsk-tests .review-detail { display: grid; gap: 10px; padding: 0 11px 12px; }
.hsk-tests .answer-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.hsk-tests .answer-box, .hsk-tests .explanation { padding: 8px 10px; border-radius: 6px; overflow-wrap: anywhere; }
.hsk-tests .answer-box { background: var(--blush); color: var(--red); }
.hsk-tests .answer-box.correct { background: var(--mint); color: var(--jade); }
.hsk-tests .answer-box.skipped, .hsk-tests .answer-box.openSkipped { background: var(--honey); color: var(--gold); }
.hsk-tests .answer-box.review { background: var(--sky); color: var(--blue); white-space: pre-wrap; }
.hsk-tests .answer-box b, .hsk-tests .explanation strong { display: block; font-size: 12px; }
.hsk-tests .answer-picture { display: inline-block; width: min(135px,100%); height: 105px; object-fit: contain; border-radius: 4px; margin: 4px 4px 0 0; vertical-align: top; }
.hsk-tests .explanation { background: var(--sky); color: var(--blue); font-size: 14px; }
.hsk-tests .explanation [lang=zh] { margin-top: 4px; font-size: 17px; color: var(--ink); }
.hsk-tests .result-actions { margin-top: 14px; }
.hsk-tests dialog { max-width: min(450px, 100% - 30px); max-height: calc(100dvh - 16px); overflow: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 20px; }
.hsk-tests dialog::backdrop { background: #1e1b17a0; }
.hsk-tests dialog p { margin-block: 8px 15px; }
.hsk-tests #share-result-dialog { width: min(540px, calc(100% - 24px)); max-width: none; }
.hsk-tests #share-result-preview { display: block; width: 100%; max-height: 54dvh; object-fit: contain; margin-bottom: 12px; }
.hsk-tests #share-result-link { display: block; margin-top: 8px; overflow-wrap: anywhere; }
.hsk-tests #share-result-dialog [hidden] { display: none; }
.hsk-tests .writing-label textarea[aria-invalid="true"] { border-color: var(--red); }
.hsk-tests #material-dialog { width: min(820px,calc(100% - 22px)); max-width: none; padding: 12px; }
.hsk-tests .material-dialog-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 9px; }
.hsk-tests .material-dialog-head h2 { font-size: 18px; }
.hsk-tests .material-viewport { max-height: min(64dvh,580px); overflow: auto; border: 1px solid var(--line); }
.hsk-tests .material-viewport img { display: block; width: max(100%,620px); height: auto; }
@media (max-width: 1023px) {
  .hsk-tests { --site-header-height: 61px; }
}
@media (min-height: 640px) {
  .hsk-tests .player:not([hidden], :has(.audio-parts[open], #audio-status:not(:empty))) { position: sticky; top: calc(var(--site-header-height) + 8px); z-index: 1; }
  .hsk-tests .player:not([hidden], :has(.audio-parts[open], #audio-status:not(:empty))) + .task :is(header, #question-heading) { scroll-margin-top: calc(var(--site-header-height) + 182px); }
}
@media (max-width: 820px), (max-width: 1100px) and (max-height: 520px) {
  .hsk-tests .attempt-layout { grid-template-columns: 1fr; }
  .hsk-tests .navigator { padding-block: 0; }
  .hsk-tests .navigator summary { min-height: 44px; padding-top: 9px; }
  .hsk-tests .number-grid { grid-template-columns: repeat(auto-fill,minmax(44px,1fr)); }
  .hsk-tests .number { min-height: 44px; }
  .hsk-tests .material-zoom { display: inline-block; }
}
@media (max-width: 1100px) and (max-height: 520px) {
  .hsk-tests { padding-block: 12px; }
  .hsk-tests .attempt-top { align-items: center; margin-bottom: 8px; }
  .hsk-tests .attempt-top > div:first-child { display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; }
  .hsk-tests .attempt-top .eddy-eyebrow { display: none; }
  .hsk-tests .attempt-top h1 { font-size: clamp(25px, 4vw, 32px); margin: 0; }
  .hsk-tests .attempt-top .progress { width: min(100%, 160px); }
  .hsk-tests .attempt-layout, .hsk-tests .task-column { gap: 8px; }
}
@media (min-width: 480px) and (max-width: 1100px) and (max-height: 520px) {
  .hsk-tests .player { grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 14px; padding-block: 8px; }
  .hsk-tests .player :is(.audio-parts, #retry-audio, #audio-status) { grid-column: 1/-1; }
}
@media (max-width: 720px) {
  .hsk-tests .catalog-layout, .hsk-tests .summary-grid { grid-template-columns: 1fr; }
  .hsk-tests .variant-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hsk-tests .answer-pair { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
  .hsk-tests .answers-grid.with-pictures { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hsk-tests .task-actions { gap: 6px; }
}
@media (max-width: 365px) {
  .hsk-tests { padding-inline: 10px; }
  .hsk-tests .task-actions .eddy-btn { padding-inline: 6px; font-size: 12px; }
}

.hsk-tests .breadcrumbs { margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.hsk-tests .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.hsk-tests .breadcrumbs li + li::before { content: "›"; margin-right: 8px; }
.hsk-tests .preview-tag { display: inline-block; margin-bottom: 12px; }
.hsk-tests .level-list { display: grid; align-content: start; gap: 12px; }
.hsk-tests a.pick { color: var(--ink); text-decoration: none; }
.hsk-tests .catalog-pick { min-height: 108px; padding: 12px; }
.hsk-tests .catalog-pick span { font-size: 14px; font-weight: 650; }
.hsk-tests .level-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.hsk-tests .level-guide > section { display: grid; align-content: start; gap: 10px; }
.hsk-tests .level-guide [lang=zh], .hsk-tests .answer span[lang=zh], .hsk-tests .explanation [lang=zh] { font-family: var(--font-hanzi, "PingFang SC", sans-serif); }
.hsk-tests .related { margin-top: 16px; font-size: 14px; }
.hsk-tests .entry { display: grid; align-content: start; gap: 8px; max-width: 570px; }
.hsk-tests .entry .actions { margin-top: 8px; }
.hsk-tests .check-error { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hsk-tests :where(.task > header, #question-heading, #confirm-dialog, #retry-check, #reload-variant) { scroll-margin-top: calc(var(--site-header-height) + 12px); }
@media (max-width: 580px) {
  .hsk-tests .level-guide { grid-template-columns: 1fr; }
}
.hsk-tests .voice-controls { display: grid; justify-items: start; gap: 8px; }
.hsk-tests .voice-controls audio, .hsk-tests .answer-box audio { width: min(100%, 400px); }
.hsk-tests .voice-answer { width: 100%; }
.hsk-tests .level-result {
  display: grid; gap: 5px; padding: clamp(12px, 3vw, 22px); margin-bottom: 14px; border-radius: 12px;
  background: var(--sky); color: var(--blue);
}
.hsk-tests .level-result h2 { font-size: clamp(18px, 3vw, 23px); }
.hsk-tests .level-result a { justify-self: start; text-decoration: underline; }