.mock-hub{max-width:1120px;margin:auto}.mock-levels,.exam-guide-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.mock-levels button[aria-pressed=true],.exam-guide-tabs button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.mock-overview,.exam-guide-facts,.exam-skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:14px;margin:24px 0}.mock-overview>div,.exam-guide-facts>div,.exam-skill-grid>div{border-radius:16px;padding:20px;background:color-mix(in srgb,var(--fg) 5%,var(--bg));display:flex;flex-direction:column;gap:8px}.mock-overview strong,.exam-guide-facts strong,.exam-skill-grid strong{font-size:27px}.mock-overview span,.mock-paper-meta,.mock-paper-state,.exam-encounter-source,.exam-guide-checked{color:var(--muted);font-size:13px}.mock-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:24px 0}.mock-list .mock-card{border:1px solid color-mix(in srgb,var(--fg) 9%,transparent);border-radius:20px;padding:24px;box-shadow:0 12px 28px #00000009;display:flex;flex-direction:column;gap:18px}.mock-card h2{margin:0;font-size:20px}.mock-card .wide{margin-top:auto}.mock-paper-meta{display:flex;flex-wrap:wrap;gap:8px 14px}.mock-resume,.mock-recommend{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px;border-radius:16px;background:color-mix(in srgb,#5ea687 13%,var(--bg));margin:16px 0}.mock-recommend>div{display:flex;flex-direction:column;gap:6px}.mock-controls{padding:12px 0}.mock-mix{padding:20px;border-radius:16px;background:color-mix(in srgb,var(--fg) 4%,var(--bg))}.mock-mix summary{cursor:pointer}.exam-guide{max-width:800px}.exam-guide h3{margin-top:24px}.exam-guide li{margin:10px 0;line-height:1.65}.exam-guide-image{width:100%;height:auto;display:block;border-radius:18px;margin:20px 0}.exam-guide-warning{padding:18px 22px;border-radius:18px;background:color-mix(in srgb,#d99c55 13%,var(--bg));margin:24px 0}.exam-guide-warning h3{margin-top:0}.exam-guide-checked{margin-top:22px}.exam-guide-tabs{position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:1}.exam-section-progress{display:flex;align-items:center;gap:16px;margin:16px 0;font-size:13px}.exam-section-progress progress{flex:1;accent-color:#6aaf91}.hskduel-ui .exam-side{padding:20px;border-radius:20px;background:var(--bg);box-shadow:0 8px 28px #00000010}.hskduel-ui .exam-options button{min-height:48px;border-radius:12px}.hskduel-ui .q-grid button{border-radius:9px}.hskduel-ui .q-grid .current{outline:2px solid var(--fg);outline-offset:2px}.hskduel-ui .q-grid .flagged{box-shadow:inset 0 -4px #d69a45}.exam-encounter{max-width:850px;margin:auto}.exam-encounter h2{margin:0 0 12px}.exam-encounter h3{font-size:22px;line-height:1.6}.exam-encounter-paper{display:block;width:100%;height:auto;max-height:60dvh;object-fit:contain;background:#fff;border-radius:12px;margin:18px auto}.exam-encounter .exam-options{display:flex;flex-wrap:wrap;gap:12px}.exam-encounter .exam-options button{flex:1 1 110px;padding:16px;text-align:left;white-space:normal;line-height:1.6}.exam-listen{display:flex;gap:16px;align-items:center;margin:24px 0}.exam-listen span{font-size:13px}.exam-transcript{padding:20px;background:color-mix(in srgb,#73a994 12%,var(--bg));border-radius:14px;line-height:1.9;font-size:22px}.exam-encounter li{margin:18px 0;line-height:1.65}.exam-encounter input{display:block;width:100%;margin:16px 0;font-size:24px}#encounter-sentence{min-height:60px;font-size:26px;margin:20px 0}#encounter-skip{margin-top:22px}.exam-encounter-report article{padding:20px;margin-top:16px;border-radius:16px;background:color-mix(in srgb,var(--fg) 5%,var(--bg))}.exam-encounter-report details{margin:20px 0}.exam-encounter-report summary{cursor:pointer}
@media(max-width:720px){.mock-overview{grid-template-columns:repeat(2,1fr);gap:10px}.mock-resume,.mock-recommend{align-items:stretch;flex-direction:column}.mock-list{grid-template-columns:1fr}.mock-levels button{flex:1}.hskduel-ui .exam-layout{display:flex;flex-direction:column;gap:14px}.hskduel-ui .exam-side{position:static;padding:16px}.hskduel-ui .exam-top h1{font-size:20px}.exam-section-progress{gap:10px}.exam-guide-tabs{gap:6px}.exam-guide-tabs button{flex:1 1 42%;padding:10px}.exam-encounter-paper{max-height:none}.exam-listen{align-items:flex-start;flex-direction:column}.exam-encounter .exam-options button{flex:1 1 100%}.exam-encounter-source{line-height:1.5}.hskduel-ui .duel-page:has(.exam-encounter){overflow:visible}.hskduel-ui .duel-page:has(.exam-encounter) #duel-stage{overflow:visible}}
.hskduel-ui dialog:has(.exam-guide){width:min(860px,calc(100vw - 28px));max-width:860px}.hskduel-ui .exam-guide-tabs{border:0}.hskduel-ui .exam-guide-tabs button{border-radius:12px!important;padding:12px 16px!important;min-height:44px;border:1px solid var(--line)!important}.hskduel-ui .exam-guide-tabs button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.hskduel-ui dialog:has(.exam-guide) #close-modal{display:none}
.exam-side{min-width:0;box-sizing:border-box}.exam-paper-scroll{overflow:auto;max-height:65dvh;margin-top:16px}.exam-paper-scroll img{display:block;width:100%;height:auto;margin:12px 0;background:#fff}.hskduel-ui dialog:has(.exam-paper-dialog){width:min(1050px,calc(100vw - 24px));max-width:1050px}.exam-paper-dialog .row{justify-content:flex-start;gap:12px}#exam-paper-zoom{margin:4px 0}
@media(max-width:720px){.hskduel-ui .exam-side{width:100%;min-width:0}.hskduel-ui .exam-side .q-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.hskduel-ui .question-nav .row{flex-wrap:wrap;gap:10px}.hskduel-ui .question-nav .row button{flex:1;min-width:0;padding:10px;font-size:12px}.hskduel-ui .exam-side .q-grid button{min-width:0;padding:9px 3px}.hskduel-ui .exam-side .exam-options{grid-template-columns:repeat(3,minmax(0,1fr))}.mock-overview>div:last-child{grid-column:1/-1}}
.hskduel-ui:has(.exam-layout) .hsk-learn-links,.hskduel-ui:has(.exam-encounter) .hsk-learn-links{display:none}
@media(max-width:720px){.hskduel-ui .exam-top{position:static!important}.hskduel-ui .exam-side .exam-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
.exam-listen{flex-wrap:wrap}.exam-listen label{display:flex;align-items:center;gap:10px}.exam-listen select{min-width:90px}.exam-encounter>strong{display:block;font-size:28px;line-height:1.5;margin:16px 0}.exam-transcript{overflow-wrap:anywhere}
@media(min-width:900px){.exam-encounter{max-width:1100px;width:100%}.exam-encounter h2{font-size:30px}.exam-encounter h3,.exam-transcript{font-size:clamp(32px,2.8vw,44px);line-height:1.7}.exam-transcript{padding:28px 34px}.exam-encounter .exam-options button{font-size:30px;min-height:80px;padding:20px 26px}.exam-encounter>strong{font-size:36px}.exam-encounter li{font-size:19px}.exam-encounter #encounter-sentence{font-size:36px}.exam-listen button,.exam-listen select{font-size:18px}.exam-encounter .exam-options kbd{font-size:16px}}

/* Large transcripts scroll inside the arena instead of being centred above its clipping edge. */
.hskduel-ui .duel-page[data-status]:has(.exam-encounter){overflow:hidden}.hskduel-ui .duel-page[data-status] #duel-stage:has(.exam-encounter){justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}.duel-page[data-status] #duel-stage>.exam-encounter{flex:none;width:100%;margin:auto 0}

.mock-focus #app{max-width:none;padding:0 18px}.mock-focus #app>header,.mock-focus .hsk-learn-links{display:none!important}.mock-focus #main{height:100vh;height:100dvh;min-height:0;padding:12px 0;display:flex;flex-direction:column;gap:10px}.mock-focus .exam-top{position:static!important;padding:0!important;margin:0!important;flex:none}.mock-focus .exam-top h1{font-size:18px;margin:0}.mock-focus .exam-top .row{gap:10px}.mock-focus .exam-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;flex:1;min-height:0;gap:18px;margin:0}.mock-focus .paper-stack{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:white;border-radius:14px;padding:8px;align-items:center}.mock-focus .paper-stack .paper{display:block;width:100%;height:100%;min-height:0;object-fit:contain;margin:0;flex:1}.mock-focus .paper-stack .paper[hidden]{display:none}.exam-paper-pages{display:flex;gap:8px;flex:none;margin-bottom:6px}.exam-paper-pages button{min-height:30px;padding:5px 12px;font-size:12px}.exam-paper-pages button[aria-pressed=true]{background:#222;color:white}.mock-focus .exam-side{position:static!important;display:flex;flex-direction:column;gap:10px;min-height:0;width:auto;margin:0;padding:14px;overflow:auto}.mock-focus .exam-side .exam-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.mock-focus .exam-options button{min-height:48px;padding:10px;font-size:20px}.mock-focus .exam-side h2{font-size:18px}.mock-focus #section-done{margin-top:auto}.mock-focus .exam-side>button{padding:9px;min-height:38px}.mock-focus .audio-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0}.mock-focus .audio-line:empty{display:none}.mock-focus .audio-line audio{height:32px;max-width:340px}.mock-focus .audio-line button,.mock-focus .audio-line select{min-height:30px;padding:5px 8px;font-size:12px}.mock-focus .audio-line .row{justify-content:flex-start}.mock-focus .exam-section-progress{margin:4px 0;gap:12px;font-size:12px}.exam-tools{display:flex;gap:8px;justify-content:flex-end}.mock-focus .exam-tools button{font-size:12px;padding:4px 8px;min-height:26px;margin:0}.exam-report-sections{display:grid;gap:12px;margin:18px 0 24px}.exam-report-sections>div{display:grid;grid-template-columns:110px 140px 1fr 85px;gap:12px;align-items:center}.exam-report-sections progress{width:100%}.exam-review-focus{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;background:var(--soft);border-radius:14px;margin:20px 0 30px}.exam-question-picker{max-width:620px}.mock-focus .writing-answer{min-height:52px;padding:10px;font-size:20px}.mock-focus .exam-side textarea{width:100%}@media(max-width:720px){.mock-focus #app{padding:0 8px}.mock-focus #main{gap:6px;padding:8px 0}.mock-focus .exam-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(120px,1fr) auto;gap:8px}.mock-focus .exam-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;max-height:48vh}.mock-focus .exam-side>.row:first-child,.mock-focus .exam-side>.exam-options,.mock-focus .exam-side>.writing-answer{grid-column:1/-1}.mock-focus .exam-side .exam-options button{min-height:40px;padding:6px}.mock-focus .exam-side>button{min-height:32px;padding:6px;font-size:12px}.mock-focus .exam-top h1{font-size:15px}.mock-focus .exam-tools{position:absolute;top:4px;right:8px}.mock-focus .exam-top>.row{padding-right:110px}.mock-focus .timer{font-size:16px}.exam-report-sections>div{grid-template-columns:1fr 1fr}.exam-review-focus{align-items:stretch;flex-direction:column}}

.exam-exercise-instruction{flex:none;background:var(--soft);padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.4}.exam-exercise-instruction small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.mock-focus .paper-stack .paper{flex:1 1 0;object-fit:contain}.mock-focus .paper-stack .paper:only-child{flex-basis:auto}@media(max-height:650px){.mock-focus .exam-exercise-instruction{padding:6px 10px;font-size:12px}.mock-focus .exam-side{gap:6px;padding:10px}.mock-focus .exam-side .exam-options button{min-height:40px;padding:7px}.mock-focus .exam-top .audio-line{margin:0}.mock-focus .exam-top .exam-tools{float:right}.mock-focus .exam-section-progress{max-width:75%}}

.mock-focus .paper-stack .paper:first-child:not(:only-child){flex-grow:.4}.mock-focus .paper-stack .paper:last-child:not(:only-child){flex-grow:1}.mock-focus #prev-q,.mock-focus #next-q{padding:8px 12px;min-height:36px;font-size:13px}
