@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root {
  color-scheme: light;
  --paper: #f4f2eb;
  --surface: #fffefa;
  --surface-soft: #eceae0;
  --ink: #202a26;
  --muted: #657168;
  --muted-light: #747d73;
  --line: #dbdacf;
  --forest: #18382f;
  --forest-mid: #244b3e;
  --green: #dce9df;
  --coral: #e87c61;
  --coral-dark: #a34d39;
  --sand: #eee9d8;
  --success: #366649;
  --error: #984c3a;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --radius-sm: 9px;
  --radius-md: 16px;
  --radius-lg: 24px;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 18px; }
body { min-width: 320px; min-height: 100vh; margin: 0; font-size: 1rem; line-height: 1.5; }
button, textarea, select, input { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #a44d39; outline-offset: 3px; }
::selection { color: var(--ink); background: #f3c9b8; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 50; top: 12px; left: 12px; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.app-shell { min-height: 100vh; }
.site-header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 4.3vw, 64px); border-bottom: 1px solid #e1dfd6; background: #f8f7f2; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: flex; align-items: end; justify-content: center; gap: 3px; padding: 8px 7px; border-radius: 10px; background: var(--forest); transform: rotate(-5deg); }
.brand-mark span { width: 4px; border-radius: 4px; background: #f1c66d; }.brand-mark span:nth-child(1) { height: 11px; }.brand-mark span:nth-child(2) { height: 17px; }.brand-mark span:nth-child(3) { height: 13px; }
.brand-copy { display: grid; line-height: 1.1; }.brand-copy strong { font-size: 1.1rem; letter-spacing: -.045em; }.brand-copy small { padding-top: 4px; color: var(--muted); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.header-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .71rem; }
.status-dot, .saved-dot { width: 7px; height: 7px; border-radius: 50%; background: #709a72; }
.main-content { width: min(100% - 40px, 1296px); margin: 0 auto; padding: 26px 0 42px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; color: #6e7a70; font-size: .65rem; font-weight: 700; letter-spacing: .13em; line-height: 1.35; }
.eyebrow-rule { width: 20px; height: 1px; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; }
h1 { margin-bottom: 16px; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: .97; text-wrap: balance; }
h1 em { color: #f0c970; font-weight: 400; }
h2 { margin-bottom: 0; font-size: clamp(1.7rem, 2.7vw, 2.35rem); line-height: 1.04; }
.setup-hero { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 338px; overflow: hidden; border-radius: var(--radius-lg); background: var(--forest); color: #f8f5e9; }
.hero-content { align-self: center; padding: 42px clamp(26px, 5vw, 66px); }
.hero-content .eyebrow { color: #c4cbbf; }
.hero-description { max-width: 510px; margin-bottom: 20px; color: #d4ddd2; font-size: .94rem; line-height: 1.62; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 7px; }.hero-tags span { padding: 5px 8px; border: 1px solid #658072; border-radius: 4px; color: #d5dfd4; font-size: .55rem; font-weight: 700; letter-spacing: .1em; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 330px; overflow: hidden; isolation: isolate; }.hero-art::before { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 55% 48%, #2a5142, var(--forest) 70%); content: ''; }
.hero-orbit { position: absolute; border: 1px solid #6a8575; border-radius: 50%; opacity: .4; }.orbit-a { width: 330px; height: 180px; transform: rotate(-29deg); }.orbit-b { width: 360px; height: 240px; transform: rotate(47deg); opacity: .24; }
.exam-ticket { position: relative; z-index: 1; width: 248px; min-height: 246px; padding: 18px 21px; color: #3e4b3f; background: #f0e5c9; box-shadow: 0 16px 35px #0c251d55; transform: rotate(5deg); }.ticket-top, .ticket-bottom { display: flex; justify-content: space-between; align-items: center; }.ticket-top { color: #747b69; font-size: .56rem; font-weight: 700; letter-spacing: .13em; }.ticket-line { height: 1px; margin-top: 10px; background: #d7ccb0; }.ticket-label { margin-top: 18px; color: #747a69; font-size: .69rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }.ticket-level { display: flex; align-items: baseline; gap: 11px; margin-top: 2px; font-family: var(--serif); font-size: 4.7rem; line-height: .95; letter-spacing: -.07em; }.ticket-level span { color: #a76149; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .16em; }.ticket-bottom { align-items: end; margin-top: 16px; color: #6e7767; font-size: .48rem; font-weight: 700; letter-spacing: .1em; }.ticket-bottom span:last-child { color: #c27052; font-size: 1rem; }
.hero-sticker { position: absolute; right: 12%; bottom: 13%; padding: 9px 11px; border: 1px solid #a6b6a3; border-radius: 50%; color: #d5dfd3; font-size: .5rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-align: center; transform: rotate(9deg); }
.setup-layout { display: grid; grid-template-columns: 1.03fr .97fr; gap: 18px; margin-top: 19px; }
.setup-card, .how-card { border: 1px solid #dfddd3; border-radius: var(--radius-md); background: var(--surface); }
.setup-card { padding: 24px clamp(20px, 3vw, 34px) 21px; }.setup-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }.step-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #e4eee5; color: #49684f; font-family: var(--serif); font-size: 1rem; }.setup-card-heading .eyebrow { margin-bottom: 4px; }.setup-card-heading h2 { font-size: 1.8rem; }
.level-picker { margin: 0; padding: 0; border: 0; }.level-picker legend { margin-bottom: 7px; color: var(--muted); font-size: .7rem; font-weight: 600; }.level-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.level-option { min-height: 50px; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid #e0e1d8; border-radius: 8px; background: #f8f7f2; color: #56635a; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }.level-option:hover { border-color: #9eb29f; }.level-option.is-selected { border-color: #6d8a70; background: #edf3ec; color: #254432; }.level-code { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; background: #e8e9e0; font-size: .72rem; font-weight: 700; }.is-selected .level-code { background: #d9e7d9; }.level-text { font-size: .75rem; font-weight: 600; }
.setup-fields { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 16px; }.field-label { margin-top: 5px; color: #58645b; font-size: .7rem; font-weight: 600; }.select-field, .audio-speed { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #dcded4; border-radius: 7px; background: #fffefa; color: #344138; font-size: .8rem; }.select-field:hover, .audio-speed:hover { border-color: #9eab9e; }
.timer-setting { display: flex; align-items: center; gap: 10px; margin: 15px 0 14px; color: #3c493f; cursor: pointer; }.timer-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; }.switch-track { width: 36px; height: 21px; display: inline-flex; align-items: center; flex: 0 0 auto; padding: 3px; border-radius: 20px; background: #d6d8ce; transition: background .15s ease; }.switch-track span { width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 2px #0002; transition: transform .15s ease; }.timer-setting input:checked + .switch-track { background: #52775d; }.timer-setting input:checked + .switch-track span { transform: translateX(15px); }.timer-setting input:focus-visible + .switch-track { outline: 3px solid #a44d39; outline-offset: 3px; }.timer-setting strong, .timer-setting small { display: block; }.timer-setting strong { font-size: .72rem; }.timer-setting small { margin-top: 2px; color: var(--muted); font-size: .64rem; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 0 17px; border: 0; border-radius: 8px; font-size: .8rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .16s ease, background-color .16s ease, color .16s ease; }.button:hover { transform: translateY(-1px); }.button:active { transform: translateY(0); }.button span { font-size: 1.15rem; font-weight: 400; line-height: 0; }.button-primary { background: var(--coral); color: #2a372f; }.button-primary:hover { background: #f08e71; }.button-secondary { border: 1px solid #d7d9ce; background: transparent; color: #4d6152; }.button-secondary:hover { background: #e9eee7; }.button-submit { background: var(--forest); color: #f5f2e8; }.button-submit:hover { background: #285743; }.setup-card > .button { width: 100%; }.exam-summary { min-height: 19px; margin: 8px 0 0; color: #747e73; text-align: center; font-size: .65rem; }
.how-card { display: flex; flex-direction: column; align-self: start; padding: 25px clamp(20px, 3vw, 34px) 19px; background: #eee9d8; }.how-card .eyebrow { color: #7e7867; }.how-card h2 { max-width: 430px; font-size: clamp(1.75rem, 2.8vw, 2.35rem); }.how-list { display: grid; gap: 13px; margin: 19px 0 18px; padding: 0; list-style: none; }.how-list li { display: grid; grid-template-columns: 25px 1fr; gap: 10px; align-items: start; }.how-list li > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #c7bba3; border-radius: 50%; color: #6e715f; font-family: var(--serif); font-size: .77rem; }.how-list p { margin: 0; color: #62695f; font-size: .74rem; line-height: 1.47; }.how-list strong { color: #344239; }.how-footer { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px; border-top: 1px solid #ddd5c1; color: #6c7367; font-size: .65rem; }.how-spark { color: #b9674e; font-size: 1.05rem; }
.library-section { margin-top: 36px; padding-top: 25px; border-top: 1px solid var(--line); }.library-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 15px; }.library-heading .eyebrow { margin-bottom: 5px; }.library-heading h2 { font-size: 1.95rem; }.library-heading > p { max-width: 290px; margin: 0 0 4px; color: var(--muted); font-size: .7rem; text-align: right; }.paper-library { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #d9d7cd; border-bottom: 1px solid #d9d7cd; }.library-item { min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: 13px 16px; border-right: 1px solid #e0ded4; }.library-item:first-child { padding-left: 2px; }.library-item:last-child { border-right: 0; }.library-item strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }.library-item span { margin-top: 3px; color: #68756a; font-size: .62rem; }.library-item em { margin-top: 5px; color: #477050; font-size: .56rem; font-style: normal; font-weight: 700; letter-spacing: .06em; }.official-note { margin: 12px 0 0; color: #737c72; font-size: .65rem; }

/* Exam runner */
.runner-view { padding-top: 4px; }.runner-topbar { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.2fr) minmax(190px, 1fr); align-items: center; gap: 12px; min-height: 60px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.back-button { justify-self: start; min-height: 40px; padding: 0 8px 0 0; border: 0; background: transparent; color: #59685d; font-size: .73rem; font-weight: 600; cursor: pointer; }.back-button span { margin-right: 6px; font-size: 1.15rem; }.runner-title-wrap { display: grid; justify-items: center; gap: 2px; text-align: center; }.runner-paper-label { color: #718076; font-size: .58rem; font-weight: 700; letter-spacing: .12em; }.runner-section-label { color: #304438; font-size: .75rem; font-weight: 700; letter-spacing: .045em; }.timer-widget { justify-self: end; display: flex; align-items: center; gap: 9px; min-width: 160px; padding: 8px 10px; border: 1px solid #d7dbd0; border-radius: 9px; background: #fbfaf5; }.timer-ring { color: #58745c; font-size: 1.15rem; }.timer-widget > div { display: grid; }.timer-value { color: #304238; font-size: .85rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .035em; }.timer-caption { color: #7c867b; font-size: .49rem; font-weight: 700; letter-spacing: .1em; }.timer-toggle { width: 30px; height: 30px; margin-left: auto; border: 0; border-radius: 7px; background: #e9eee7; color: #42604a; font-size: .8rem; cursor: pointer; }.timer-toggle:hover { background: #dce8dc; }.timer-widget.is-paused .timer-ring { color: #a45b42; }.timer-widget.is-paused .timer-toggle { background: #f4e4da; color: #9a503b; }
.section-nav { display: flex; gap: 7px; overflow-x: auto; margin: 14px 0 25px; padding: 1px 1px 7px; scrollbar-color: #c5cabf transparent; scrollbar-width: thin; }.section-nav button { display: flex; align-items: center; gap: 8px; min-height: 42px; flex: 0 0 auto; padding: 0 13px; border: 1px solid #dcded4; border-radius: 8px; background: #fbfaf5; color: #687269; font-size: .69rem; font-weight: 600; cursor: pointer; }.section-nav button:hover { border-color: #aab8aa; }.section-nav button.is-active { border-color: #607e65; background: #e8f0e7; color: #294535; }.section-nav button.is-complete .section-index { background: #dce9dd; color: #3b694a; }.section-index { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #edede6; color: #778077; font-size: .58rem; }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 17px; }.section-intro .eyebrow { margin-bottom: 5px; }.section-intro h1 { margin-bottom: 6px; color: #24342b; font-size: clamp(2rem, 3.3vw, 3.1rem); }.section-intro > div:first-child > p:last-child { max-width: 620px; margin: 0; color: #68736a; font-size: .78rem; }.section-progress { width: min(100%, 245px); flex: 0 0 auto; margin-bottom: 3px; }.section-progress > span { display: block; margin-bottom: 6px; color: #6c796e; text-align: right; font-size: .63rem; }.progress-track { height: 5px; overflow: hidden; border-radius: 4px; background: #e0e1d8; }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #628468; transition: width .2s ease; }
.runner-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(370px, .82fr); gap: 16px; align-items: start; }.document-panel, .answer-panel { min-width: 0; overflow: hidden; border: 1px solid #dcdacf; border-radius: 12px; background: #fffefa; }.document-panel { box-shadow: 0 5px 16px #273c3010; }.document-toolbar { min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #e5e3da; background: #faf9f3; }.document-title { display: flex; align-items: center; gap: 9px; }.pdf-icon { width: 32px; height: 34px; display: grid; place-items: center; border-radius: 6px; background: #f8e5dc; color: #a9533d; font-size: .55rem; font-weight: 700; }.document-title strong, .document-title small { display: block; }.document-title strong { color: #39483e; font-size: .72rem; }.document-title small { margin-top: 2px; color: #778177; font-size: .58rem; }.document-toolbar > a { color: #516b56; font-size: .65rem; font-weight: 600; text-decoration: none; white-space: nowrap; }.document-toolbar > a:hover { text-decoration: underline; }.question-pdf { display: block; width: 100%; height: min(74vh, 860px); min-height: 590px; border: 0; background: #e7e5de; }
.answer-panel { position: sticky; top: 12px; padding: 17px 17px 13px; }.answer-heading, .audio-heading { display: flex; align-items: center; gap: 10px; }.answer-heading { justify-content: space-between; }.answer-heading .eyebrow { margin-bottom: 4px; }.answer-heading h2, .audio-heading h2 { font-size: 1.45rem; }.answer-count { color: #49694f; font-family: var(--serif); font-size: 1.45rem; font-variant-numeric: tabular-nums; }.answer-help { margin: 7px 0 12px; color: #737d73; font-size: .66rem; line-height: 1.45; }.part-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 11px; padding: 0 0 5px; scrollbar-width: thin; }.part-tabs button { min-width: 52px; min-height: 34px; flex: 0 0 auto; padding: 0 8px; border: 1px solid #e0e1d8; border-radius: 6px; background: #f8f7f2; color: #717a70; font-size: .63rem; font-weight: 600; cursor: pointer; }.part-tabs button.is-active { border-color: #6a876e; background: #eaf1e9; color: #35563d; }.part-instruction { min-height: 33px; margin-bottom: 8px; padding: 8px 9px; border-left: 2px solid #d58465; background: #f7f3e9; color: #656f64; font-size: .62rem; line-height: 1.4; }.answer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 390px; overflow-y: auto; padding: 1px 3px 4px 1px; }.answer-item { min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 41px; padding: 5px 6px; border: 1px solid #e7e6df; border-radius: 7px; background: #fffefa; }.answer-item.is-answered { border-color: #b5c8b4; background: #f5f9f3; }.answer-number { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #efefe8; color: #637064; font-size: .6rem; font-weight: 700; }.answer-item input[type="text"] { width: 100%; min-width: 0; height: 29px; padding: 0 7px; border: 1px solid #dedfd6; border-radius: 5px; background: white; color: #29382e; font-size: .7rem; text-transform: uppercase; }.answer-item input[type="text"]::placeholder { color: #7d857b; text-transform: none; }.answer-choices { display: flex; flex: 1; justify-content: end; gap: 2px; }.answer-choice { min-width: 25px; height: 29px; padding: 0 3px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #69756b; font-size: .61rem; font-weight: 600; cursor: pointer; }.answer-choice:hover { border-color: #cbd5c8; }.answer-choice.is-selected { border-color: #8aa68a; background: #e3ede1; color: #31523b; }.answer-choice.is-correct { border-color: #82a485; background: #dfeee0; color: #305f3b; }.answer-choice.is-wrong { border-color: #d49987; background: #f8e7df; color: #984c3a; }.answer-item.is-correct { border-color: #93b39a; background: #f0f6ee; }.answer-item.is-wrong { border-color: #d9a292; background: #fbf0ec; }.answer-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ebeae3; color: #6d786f; font-size: .58rem; }.answer-footer > span { display: inline-flex; align-items: center; gap: 6px; }.saved-dot { width: 6px; height: 6px; }.clear-button { min-height: 32px; padding: 0 3px; border: 0; background: transparent; color: #7b7069; font-size: .6rem; cursor: pointer; }.clear-button:hover { color: var(--error); text-decoration: underline; }
.audio-panel { margin: -17px -17px 15px; padding: 16px 17px 14px; border-bottom: 1px solid #d9e2d9; background: #e9f0e8; }.audio-heading { gap: 9px; }.audio-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #d6e5d6; color: #416348; font-size: 1.05rem; }.audio-heading .eyebrow { margin-bottom: 2px; color: #66796a; font-size: .54rem; }.audio-heading h2 { font-size: 1.25rem; }.audio-track-count { margin-left: auto; color: #617464; font-size: .58rem; }.audio-help { margin: 8px 0 9px; color: #5d6d60; font-size: .63rem; line-height: 1.45; }.audio-tracks { display: grid; gap: 7px; }.audio-track-select { width: 100%; min-height: 37px; padding: 0 9px; border: 1px solid #cbd8cc; border-radius: 6px; background: #fbfdf9; color: #385640; font-size: .68rem; }.audio-player { width: 100%; height: 40px; display: block; }.audio-speed-label { display: block; margin: 7px 0 4px; color: #647267; font-size: .58rem; }.audio-speed { min-height: 33px; padding: 0 8px; border-color: #cad8cc; background: #fbfdf9; font-size: .65rem; }
.writing-response, .speaking-response { margin-top: 17px; padding: 22px; border: 1px solid #dfddd3; border-radius: 12px; background: #fbfaf5; }.writing-response-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; }.writing-response-heading .eyebrow { margin-bottom: 5px; }.writing-response-heading h2, .speaking-response h2 { font-size: 1.8rem; }.writing-limit { padding: 6px 8px; border: 1px solid #d9ddd2; border-radius: 20px; color: #617263; font-size: .63rem; white-space: nowrap; }.writing-instruction { margin: 8px 0 15px; color: #657168; font-size: .73rem; }.writing-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.writing-field label { display: block; margin-bottom: 6px; color: #49594d; font-size: .68rem; font-weight: 700; }.writing-field textarea { width: 100%; min-height: 170px; resize: vertical; padding: 12px; border: 1px solid #dcded5; border-radius: 8px; background: #fffefa; color: #26352c; font-size: .83rem; line-height: 1.55; }.writing-field textarea::placeholder { color: #7c857b; }.writing-counter { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; color: #747f75; font-size: .59rem; }.speaking-response { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #eee9d8; }.speaking-response > div:first-child { max-width: 670px; }.speaking-response .eyebrow { color: #797462; }.speaking-response h2 { margin-bottom: 5px; }.speaking-response p:last-child { margin-bottom: 0; color: #626a5f; font-size: .73rem; }.speaking-controls { display: grid; justify-items: center; gap: 9px; }.speaking-controls > span { color: #465b4a; font-family: var(--serif); font-size: 2.6rem; font-variant-numeric: tabular-nums; }.speaking-controls .button { white-space: nowrap; }
.runner-actions { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; }.runner-actions .button { min-height: 42px; font-size: .7rem; }.runner-actions .button-secondary:first-child { margin-right: auto; }.runner-answer-status { margin: 0 auto; color: #707a70; font-size: .61rem; }.runner-actions .button-submit { display: none; }.runner-actions.is-last .button-submit { display: inline-flex; }.runner-actions.is-last #next-section { display: none; }

/* Results */
.result-banner { padding: clamp(25px, 4vw, 48px); border-radius: var(--radius-md); background: var(--forest); color: #f6f3e8; }.eyebrow-light { color: #c1cabe; }.result-banner h1 { max-width: 700px; margin-bottom: 8px; font-size: clamp(2.5rem, 4.7vw, 4.1rem); }.result-banner > p:last-child { max-width: 700px; margin-bottom: 0; color: #d4ddd2; font-size: .87rem; }.result-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; border-top: 1px solid #d7d6cc; border-bottom: 1px solid #d7d6cc; }.result-stat { display: flex; flex-direction: column; justify-content: center; min-height: 105px; padding: 15px 18px; border-right: 1px solid #deddd3; }.result-stat:first-child { padding-left: 0; }.result-stat:last-child { border-right: 0; }.result-stat span { color: #727d73; font-size: .58rem; font-weight: 700; letter-spacing: .1em; }.result-stat strong { margin-top: 2px; color: #34513c; font-family: var(--serif); font-size: 2.5rem; font-weight: 400; line-height: 1.1; }.result-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }.result-review, .result-key-card { padding: 20px; border: 1px solid #dfddd4; border-radius: 12px; background: #fffefa; }.result-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 14px; }.result-section-heading .eyebrow { margin-bottom: 4px; }.result-section-heading h2, .result-key-card h2 { font-size: 1.8rem; }.objective-score { color: #45644c; font-family: var(--serif); font-size: 1.6rem; }.result-parts { display: grid; gap: 8px; }.result-part { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 7px; background: #f4f3ec; }.result-part strong { color: #455449; font-size: .7rem; }.result-part span { color: #6e7b70; font-size: .64rem; }.result-key-card { background: #eee9d8; }.key-icon { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: #dfe9dc; color: #3c6645; font-weight: 700; }.result-key-card .eyebrow { color: #777462; }.result-key-card p:not(.eyebrow) { margin: 8px 0 14px; color: #656c61; font-size: .72rem; line-height: 1.5; }.result-key-card .button { width: 100%; }.result-key-card .button-secondary { margin-top: 8px; }
.site-footer { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(18px, 4.3vw, 64px); border-top: 1px solid #e0ded5; color: #747d72; font-size: .64rem; }.footer-brand { color: #35473b; font-weight: 700; letter-spacing: -.04em; }.footer-brand span { margin-left: 4px; color: #b8664e; }.site-footer a { text-decoration: none; }.site-footer a:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .hero-sticker { display: none; }
  .main-content { width: min(100% - 32px, 900px); }.setup-hero { grid-template-columns: 1.1fr .9fr; }.hero-content { padding-left: 35px; padding-right: 25px; }.setup-layout { grid-template-columns: 1fr 1fr; }.runner-grid { grid-template-columns: 1fr; }.document-panel { order: 2; }.answer-panel { position: static; order: 1; }.answer-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 300px; }.question-pdf { height: 68vh; min-height: 510px; }.runner-actions { flex-wrap: wrap; }.runner-answer-status { order: 3; width: 100%; text-align: center; }.runner-actions .button-secondary:first-child { margin-right: 0; }.paper-library { grid-template-columns: repeat(3, minmax(0, 1fr)); }.library-item:nth-child(3) { border-right: 0; }.library-item:nth-child(n+4) { border-top: 1px solid #e0ded4; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 12px; }.site-header { height: 62px; padding-right: 16px; padding-left: 16px; }.brand-mark { width: 30px; height: 30px; padding: 7px 6px; }.brand-copy strong { font-size: 1rem; }.brand-copy small { font-size: .55rem; }.header-status { max-width: 150px; gap: 6px; font-size: .58rem; line-height: 1.25; }.status-dot { flex: 0 0 auto; }.main-content { width: calc(100% - 26px); padding-top: 14px; padding-bottom: 28px; }
  .setup-hero { grid-template-columns: 1fr; min-height: 0; border-radius: 17px; }.hero-content { padding: 29px 22px 20px; }.hero-content .eyebrow { font-size: .58rem; }.hero-content h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); }.hero-description { margin-bottom: 14px; font-size: .83rem; }.hero-tags { gap: 5px; }.hero-tags span { font-size: .49rem; }.hero-art { min-height: 212px; }.exam-ticket { width: 188px; min-height: 187px; padding: 14px 16px; }.ticket-top { font-size: .46rem; }.ticket-label { margin-top: 11px; font-size: .6rem; }.ticket-level { font-size: 3.6rem; }.ticket-level span { font-size: .56rem; }.ticket-bottom { margin-top: 12px; font-size: .42rem; }.hero-orbit.orbit-a { width: 275px; height: 145px; }.hero-orbit.orbit-b { width: 300px; height: 195px; }.hero-sticker { display: block; right: 9%; bottom: 12%; font-size: .43rem; }
  .setup-layout { grid-template-columns: 1fr; gap: 11px; margin-top: 12px; }.setup-card, .how-card { padding: 19px 17px 17px; }.setup-card-heading { margin-bottom: 14px; }.setup-card-heading h2 { font-size: 1.6rem; }.level-option { min-height: 48px; justify-content: center; gap: 5px; padding: 5px 3px; }.level-code { width: 27px; height: 27px; font-size: .65rem; }.level-text { font-size: .65rem; }.select-field { min-height: 44px; font-size: .74rem; }.how-card { min-height: 0; }.how-card h2 { font-size: 1.9rem; }.how-list { gap: 10px; margin: 15px 0; }.how-list p { font-size: .7rem; }
  .library-section { margin-top: 25px; padding-top: 20px; }.library-heading { display: block; }.library-heading h2 { font-size: 1.7rem; }.library-heading > p { margin: 7px 0 0; text-align: left; }.paper-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }.library-item { min-height: 76px; padding: 10px 11px; border-top: 1px solid #e0ded4; }.library-item:first-child { padding-left: 11px; }.library-item:nth-child(2n) { border-right: 0; }.library-item:nth-child(3) { border-right: 1px solid #e0ded4; }.library-item:nth-child(3) { border-top: 1px solid #e0ded4; }.library-item:nth-child(4) { border-top: 1px solid #e0ded4; }.library-item:nth-child(5) { grid-column: 1 / -1; min-height: 66px; border-right: 0; }.official-note { font-size: .61rem; }
  .runner-view { padding-top: 0; }.runner-topbar { grid-template-columns: 1fr auto; gap: 5px 8px; min-height: 74px; padding: 5px 0 10px; }.back-button { grid-column: 1; grid-row: 1; min-height: 33px; font-size: .64rem; }.runner-title-wrap { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; }.runner-paper-label { font-size: .5rem; }.runner-section-label { font-size: .65rem; }.timer-widget { grid-column: 2; grid-row: 1 / span 2; min-width: 132px; padding: 7px 8px; }.timer-value { font-size: .78rem; }.timer-caption { font-size: .44rem; }.timer-toggle { width: 28px; height: 28px; }.section-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 11px 0 19px; }.section-nav button { min-height: 38px; padding: 0 10px; font-size: .63rem; }.section-intro { display: block; margin-bottom: 12px; }.section-intro h1 { font-size: 2.25rem; }.section-intro > div:first-child > p:last-child { font-size: .72rem; }.section-progress { width: 100%; margin-top: 12px; }.section-progress > span { text-align: left; }
  .runner-grid .document-panel { order: 1; }.runner-grid .answer-panel { order: 2; }
  .answer-panel { padding: 14px 12px 11px; }.answer-heading h2 { font-size: 1.35rem; }.answer-count { font-size: 1.2rem; }.answer-help { margin: 6px 0 10px; font-size: .63rem; }.answer-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 340px; gap: 6px; }.answer-item { min-height: 40px; gap: 5px; padding: 4px; }.answer-number { width: 21px; height: 21px; font-size: .57rem; }.answer-item input[type="text"] { height: 28px; font-size: .68rem; }.answer-choice { min-width: 24px; height: 28px; font-size: .59rem; }.answer-footer { font-size: .56rem; }.audio-panel { margin: -14px -12px 13px; padding: 13px 12px; }.audio-heading h2 { font-size: 1.15rem; }.audio-help { font-size: .61rem; }.question-pdf { height: 64vh; min-height: 430px; }.document-toolbar { min-height: 54px; padding: 7px 10px; }.document-title strong { font-size: .66rem; }.document-title small { font-size: .53rem; }.document-toolbar > a { font-size: .58rem; }
  .writing-response, .speaking-response { margin-top: 12px; padding: 16px 13px; }.writing-response-heading h2, .speaking-response h2 { font-size: 1.55rem; }.writing-limit { padding: 5px 7px; font-size: .56rem; }.writing-instruction { font-size: .68rem; }.writing-fields { grid-template-columns: 1fr; gap: 11px; }.writing-field textarea { min-height: 150px; font-size: .8rem; }.writing-counter { font-size: .55rem; }.speaking-response { display: grid; grid-template-columns: 1fr; gap: 10px; }.speaking-controls { grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; }.speaking-controls > span { font-size: 2rem; }.speaking-controls .button { min-height: 41px; padding: 0 11px; font-size: .68rem; }
  .runner-actions { gap: 7px; }.runner-actions .button { min-height: 40px; padding: 0 10px; font-size: .64rem; }.runner-answer-status { font-size: .58rem; }.result-banner { padding: 24px 19px; }.result-banner h1 { font-size: 2.7rem; }.result-banner > p:last-child { font-size: .77rem; }.result-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.result-stat { min-height: 85px; padding: 10px 8px; }.result-stat:first-child { padding-left: 0; }.result-stat span { font-size: .48rem; }.result-stat strong { font-size: 1.9rem; }.result-body { grid-template-columns: 1fr; gap: 11px; }.result-review, .result-key-card { padding: 16px 13px; }.result-section-heading h2, .result-key-card h2 { font-size: 1.55rem; }.result-part { padding: 9px; }.result-part strong { font-size: .64rem; }.result-part span { font-size: .59rem; }
  .site-footer { flex-wrap: wrap; gap: 5px 10px; padding: 12px 16px; font-size: .58rem; }.site-footer > span:nth-child(2) { order: 3; width: 100%; }
}
@media (max-width: 365px) {
  .main-content { width: calc(100% - 20px); }.hero-content { padding-right: 17px; padding-left: 17px; }.hero-content h1 { font-size: 2.35rem; }.hero-sticker { display: none; }.level-options { gap: 4px; }.level-option { gap: 3px; }.level-text { font-size: .61rem; }.answer-fields { gap: 5px; }.answer-choice { min-width: 21px; padding: 0 2px; }.runner-actions .button { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Simulated Cambridge Scale estimate */
.grade-estimate { margin: 16px 0; padding: clamp(18px, 3vw, 27px); border: 1px solid #d8dcd0; border-radius: 12px; background: #f3f4ed; }
.grade-estimate.is-pass { border-color: #c5d6c5; background: #edf4eb; }
.grade-estimate.is-not-yet { border-color: #e2d2c7; background: #f7f0e9; }
.grade-estimate-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.grade-estimate-heading .eyebrow { margin-bottom: 5px; color: #687768; }
.grade-estimate-heading h2 { max-width: 760px; margin: 0; color: #293b30; font-family: var(--serif); font-size: clamp(1.55rem, 2.7vw, 2.35rem); font-weight: 400; line-height: 1.08; }
.grade-estimate-score { display: grid; gap: 1px; flex: 0 0 auto; text-align: right; }
.grade-estimate-score span { color: #687768; font-size: .53rem; font-weight: 700; letter-spacing: .1em; }
.grade-estimate-score strong { color: #31583d; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: 400; line-height: 1; }
.grade-estimate-description { max-width: 820px; margin: 11px 0 15px; color: #5e6b61; font-size: .76rem; line-height: 1.55; }
.grade-estimate-components { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.grade-component { min-width: 0; display: grid; gap: 4px; padding: 10px 11px; border: 1px solid #e0e3d8; border-radius: 8px; background: #fffefa; }
.grade-component > span { overflow-wrap: anywhere; color: #59665b; font-size: .62rem; font-weight: 700; }
.grade-component > span em { display: inline-block; margin-left: 3px; color: #71806f; font-size: .48rem; font-style: normal; font-weight: 500; }
.grade-component strong { color: #34513c; font-family: var(--serif); font-size: 1.65rem; font-weight: 400; line-height: 1; }
.grade-component small { color: #778075; font-size: .53rem; line-height: 1.3; }
.grade-adjustments { margin-top: 14px; border-top: 1px solid #d8dcd0; padding-top: 12px; }
.grade-adjustments summary { width: fit-content; color: #3d6046; font-size: .7rem; font-weight: 700; cursor: pointer; }
.grade-adjustments summary:focus-visible { outline: 3px solid #a44d39; outline-offset: 4px; border-radius: 2px; }
.grade-adjustments > p { max-width: 790px; margin: 8px 0 11px; color: #677368; font-size: .65rem; line-height: 1.5; }
.grade-adjustment-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grade-adjustment-fields label { min-width: 0; display: grid; gap: 5px; color: #445449; font-size: .65rem; font-weight: 700; }
.grade-adjustment-fields label span { color: #788276; font-size: .56rem; font-weight: 500; }
.grade-adjustment-fields input { width: 100%; min-width: 0; min-height: 42px; padding: 0 10px; border: 1px solid #d7dacf; border-radius: 6px; background: #fffefa; color: #304338; font: inherit; font-variant-numeric: tabular-nums; }
.grade-adjustment-fields input:focus-visible { outline: 3px solid #a44d39; outline-offset: 2px; }
.grade-adjustment-fields input::placeholder { color: #899187; font-size: .6rem; font-weight: 400; }
.grade-estimate-note { max-width: 930px; margin: 14px 0 0; color: #6d776c; font-size: .59rem; line-height: 1.5; }
.grade-estimate-note a { color: #3f6549; font-weight: 700; text-underline-offset: 2px; }
.grade-estimate.is-partial .grade-estimate-components { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
@media (max-width: 760px) {
  .grade-estimate-heading { align-items: start; }
  .grade-estimate-components { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .grade-estimate { padding: 16px 13px; }
  .grade-estimate-heading { gap: 10px; }
  .grade-estimate-heading h2 { font-size: 1.55rem; }
  .grade-estimate-score span { max-width: 92px; font-size: .45rem; line-height: 1.4; }
  .grade-estimate-score strong { font-size: 2.25rem; }
  .grade-estimate-description { font-size: .68rem; }
  .grade-estimate-components { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .grade-component { padding: 8px; }
  .grade-component strong { font-size: 1.5rem; }
  .grade-adjustment-fields { grid-template-columns: 1fr; gap: 8px; }
  .grade-adjustment-fields label { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .grade-adjustment-fields label span { justify-self: end; }
  .grade-adjustment-fields input { grid-column: 1 / -1; }
  .grade-estimate-note { font-size: .55rem; }
}
@media (max-width: 365px) {
  .result-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-stat { min-height: 72px; }
  .result-stat:nth-child(2) { border-right: 0; }
  .result-stat:nth-child(3) { grid-column: 1 / -1; min-height: 62px; padding-left: 0; border-top: 1px solid #deddd3; border-right: 0; }
}

.runner-grid.single-document { grid-template-columns: minmax(0, 1fr); }
.answer-feedback { color: var(--success); font-size: .85rem; font-weight: 700; }
.answer-select { width: 100%; min-width: 0; min-height: 31px; padding: 0 7px; border: 1px solid #dedfd6; border-radius: 5px; background: #fffefa; color: #29382e; font-size: .7rem; }
.audio-track-label { display: block; margin: 4px 0 3px; color: #647267; font-size: .58rem; }
.audio-player { margin-top: 6px; }
.audio-track-note { display: block; color: #65766a; font-size: .56rem; }
.answer-key-links { display: grid; gap: 8px; }
.load-error { grid-column: 1 / -1; color: var(--error); font-size: .85rem; }

/* In-app Cambridge question sheets */
.document-part-tabs { margin: 0; padding: 10px 14px 8px; border-bottom: 1px solid #e9e7dd; background: #f8f7f2; }
.document-part-tabs button { min-width: 62px; min-height: 38px; border-radius: 20px; font-size: .66rem; }
.document-panel > .audio-panel { margin: 0; padding: 15px 16px; border-bottom: 1px solid #d9e2d9; }
.question-content { display: grid; gap: 13px; padding: 16px; }
.question-page { min-width: 0; padding: clamp(17px, 2vw, 26px); border: 1px solid #e8e5db; border-radius: 9px; background: #fffefa; }
.question-page-label { display: block; margin-bottom: 10px; color: #788276; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.question-visual { width: fit-content; max-width: 100%; margin: 0 auto 14px; padding: 7px; border: 1px solid #e3e2d9; border-radius: 7px; background: #f8f7f1; }
.question-visual img { display: block; width: auto; max-width: min(100%, 430px); max-height: 280px; object-fit: contain; }
.question-visual figcaption { max-width: 430px; padding-top: 5px; color: #778176; font-size: .55rem; line-height: 1.4; }
.question-copy { margin: 0; color: #29362e; font-family: var(--sans); font-size: .88rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.question-empty { margin: 0; padding: 24px; color: #69756b; font-size: .82rem; }

/* Full Writing prompts with selectable Part 2 tasks */
.writing-response { padding: clamp(16px, 2.4vw, 26px); }
.writing-prompts { display: grid; gap: 19px; margin-bottom: 20px; }
.writing-part-group { min-width: 0; }
.writing-group-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.writing-group-heading h3 { margin: 0; color: #3e5345; font-family: var(--serif); font-size: 1.34rem; font-weight: 400; }
.writing-group-heading > span { color: #6b796c; font-size: .6rem; text-align: right; }
.writing-prompt-card { min-width: 0; padding: 14px; border: 1px solid #dedfd5; border-radius: 9px; background: #fffefa; }
.writing-prompt-card.is-selected { border-color: #829a7d; box-shadow: 0 0 0 2px #e6eee2; }
.writing-prompt-header { display: flex; align-items: start; gap: 10px; }
.writing-prompt-header h3 { margin: 2px 0 0; color: #35483b; font-family: var(--serif); font-size: 1.22rem; font-weight: 400; line-height: 1.15; }
.writing-prompt-part { flex: 0 0 auto; padding: 5px 7px; border-radius: 5px; background: #f0efe7; color: #687467; font-size: .53rem; font-weight: 700; letter-spacing: .08em; }
.writing-option { flex: 0 0 122px; display: flex; align-items: center; gap: 7px; min-height: 34px; cursor: pointer; }
.writing-option input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #45684d; }
.writing-option span { display: grid; line-height: 1.15; }
.writing-option strong { color: #3e5a44; font-size: .62rem; }
.writing-option small { margin-top: 3px; color: #7b8579; font-size: .49rem; }
.writing-prompt-context { margin: 12px 0 6px; color: #69766b; font-size: .67rem; line-height: 1.5; }
.writing-prompt-text { margin: 6px 0 0; color: #2f3d34; font-size: .78rem; line-height: 1.55; white-space: pre-line; }
.writing-prompt-card ul { margin: 8px 0; padding-left: 19px; color: #3d4d41; font-size: .72rem; line-height: 1.5; }
.writing-prompt-instruction { margin: 9px 0 0; color: #5d705f; font-size: .68rem; font-weight: 600; line-height: 1.45; }
.writing-options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.writing-options-grid .writing-prompt-card { display: flex; flex-direction: column; }
.writing-options-grid .writing-prompt-header { display: grid; gap: 7px; }
.writing-options-grid .writing-option { flex: 0 0 auto; order: 0; }
.writing-options-grid .writing-prompt-header > div { order: 1; }
.writing-options-grid .writing-prompt-context { margin-top: 9px; }
.writing-field textarea { min-height: 230px; }

/* Speaking prompts, partner questions and picture tasks */
.speaking-part-intro { padding: 15px 17px; border-left: 3px solid #c47c5d; border-radius: 5px; background: #f5f0e4; }
.speaking-part-label { display: inline-block; margin-bottom: 5px; color: #715b45; font-size: .58rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.speaking-part-intro p { margin: 0; color: #414c42; font-size: .77rem; line-height: 1.5; }
.speaking-task { min-width: 0; padding: clamp(15px, 2.2vw, 22px); border: 1px solid #e3e0d5; border-radius: 10px; background: #fffefa; }
.speaking-task-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.speaking-task-heading h3 { margin: 0; color: #364a3b; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.1; }
.speaking-task-time { flex: 0 0 auto; padding: 5px 8px; border-radius: 20px; background: #eaf0e8; color: #4f6a51; font-size: .57rem; font-weight: 700; }
.speaking-context { margin: 0 0 7px; color: #6d786e; font-size: .7rem; line-height: 1.5; }
.speaking-task > p:not(.speaking-context) { margin: 0; color: #303d34; font-size: .84rem; line-height: 1.55; }
.speaking-task ul { margin: 8px 0 0; padding-left: 20px; color: #354239; font-size: .8rem; line-height: 1.55; }
.speaking-timing { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.speaking-timing span { padding: 5px 8px; border-radius: 20px; background: #eaf0e8; color: #4f6a51; font-size: .55rem; font-weight: 700; }
.speaking-list-block { margin-top: 12px; padding: 10px 12px; border-radius: 7px; background: #f5f4ed; }
.speaking-list-block h4 { margin: 0 0 5px; color: #50614f; font-size: .64rem; }
.speaking-list-block ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; font-size: .73rem; }
.speaking-callout { margin-top: 11px; padding: 10px 12px; border-left: 2px solid #c47c5d; background: #f8f3e8; color: #596356; font-size: .7rem; line-height: 1.5; }
.speaking-callout strong { color: #4c5b4d; }
.speaking-followups { display: grid; gap: 4px; margin-top: 10px; color: #69756b; font-size: .62rem; line-height: 1.45; }
.speaking-followups strong { color: #4f6251; }
.speaking-followups span { font-style: italic; }
.speaking-stimuli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 14px; }
.speaking-stimuli figure { min-width: 0; margin: 0; padding: 7px; border: 1px solid #e2e3da; border-radius: 8px; background: #f7f6ef; }
.speaking-stimuli img { display: block; width: 100%; max-height: 340px; aspect-ratio: 4 / 3; border-radius: 4px; object-fit: contain; background: #ecebe3; }
.speaking-stimuli figcaption { padding: 6px 2px 0; color: #667267; font-size: .59rem; line-height: 1.4; }

/* In-app answer review */
.result-parts { gap: 7px; }
.result-review-part { overflow: hidden; border: 1px solid #e5e3da; border-radius: 8px; background: #f8f7f2; }
.result-review-part > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 47px; padding: 10px 12px; cursor: pointer; list-style: none; }
.result-review-part > summary::-webkit-details-marker { display: none; }
.result-review-part > summary strong { color: #455449; font-size: .7rem; }
.result-review-part > summary span { color: #6e7b70; font-size: .62rem; text-align: right; }
.result-review-part > summary i { display: inline-block; margin-left: 4px; font-size: .9rem; font-style: normal; transition: transform .15s ease; }
.result-review-part[open] > summary i { transform: rotate(180deg); }
.review-answer-list { display: grid; gap: 5px; padding: 0 8px 8px; }
.review-answer { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 8px; padding: 8px; border: 1px solid #e6e5de; border-radius: 6px; background: #fffefa; }
.review-answer.is-correct { border-color: #bbcfbb; }
.review-answer.is-wrong { border-color: #e1c0b4; }
.review-answer-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #edeee7; color: #59675c; font-size: .58rem; font-weight: 700; }
.review-answer-state { display: block; margin-bottom: 4px; color: #637266; font-size: .55rem; font-weight: 700; text-transform: uppercase; }
.review-answer.is-correct .review-answer-state { color: #38674a; }
.review-answer.is-wrong .review-answer-state { color: #994f3d; }
.review-answer p { display: grid; gap: 2px; margin: 0 0 5px; }
.review-answer p:last-child { margin-bottom: 0; }
.review-answer p small { color: #7a837a; font-size: .51rem; }
.review-answer p strong { color: #35443a; font-size: .62rem; font-weight: 600; overflow-wrap: anywhere; }
.manual-answer-key { margin: 10px 0 14px; padding: 10px 11px; border: 1px solid #dbd8ca; border-radius: 7px; background: #f8f5eb; }
.manual-answer-key summary { color: #4e624e; font-size: .65rem; font-weight: 700; cursor: pointer; }
.manual-answer-key p { margin: 7px 0; color: #6b7368; font-size: .58rem; line-height: 1.45; }
.manual-answer-key ol { display: grid; gap: 5px; margin: 0; padding-left: 21px; color: #49564a; font-size: .59rem; line-height: 1.4; }
.manual-answer-key li { padding-left: 2px; }

@media (max-width: 1080px) {
  .writing-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-content { padding: 12px; }
}
@media (max-width: 700px) {
  .document-part-tabs { gap: 6px; padding: 9px 10px 7px; }
  .document-part-tabs button { min-width: 62px; min-height: 40px; }
  .document-panel > .audio-panel { padding: 13px 12px; }
  .question-content { gap: 9px; padding: 9px; }
  .question-page { padding: 14px 12px; }
  .question-copy { font-size: .79rem; line-height: 1.58; }
  .writing-response { margin-top: 12px; padding: 16px 13px; }
  .writing-prompts { gap: 15px; margin-bottom: 16px; }
  .writing-group-heading { align-items: start; }
  .writing-group-heading h3 { font-size: 1.2rem; }
  .writing-group-heading > span { max-width: 125px; font-size: .54rem; }
  .writing-options-grid { grid-template-columns: 1fr; gap: 7px; }
  .writing-options-grid .writing-prompt-header { grid-template-columns: 1fr; gap: 4px; }
  .writing-prompt-card { padding: 12px; }
  .writing-prompt-header h3 { font-size: 1.12rem; }
  .writing-prompt-text { font-size: .75rem; }
  .writing-field textarea { min-height: 190px; }
  .speaking-part-intro { padding: 12px; }
  .speaking-task { padding: 14px 12px; }
  .speaking-task-heading h3 { font-size: 1.3rem; }
  .speaking-task > p:not(.speaking-context), .speaking-task ul { font-size: .78rem; }
  .speaking-list-block ul { grid-template-columns: 1fr; gap: 3px; font-size: .71rem; }
  .speaking-callout { font-size: .66rem; }
  .speaking-stimuli { gap: 7px; }
  .speaking-stimuli figure { padding: 5px; }
  .speaking-stimuli figcaption { font-size: .52rem; }
  .result-review-part > summary { align-items: start; padding: 10px; }
  .result-review-part > summary strong { font-size: .64rem; }
  .result-review-part > summary span { max-width: 46%; font-size: .56rem; }
  .review-answer { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; padding: 7px; }
  .review-answer-number { width: 23px; height: 23px; }
}
@media (max-width: 365px) {
  .speaking-stimuli { grid-template-columns: 1fr; }
  .writing-option { flex-basis: auto; }
}