:root{--ink:#182238;--blue:#4569aa;--muted:#647184;--pale:#f4f7fc;--edge:#dce3ec;--bg:#f9fafc;--white:#fff;--orange:#e57a1f}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #7fa2e2;outline-offset:3px}a{color:inherit;text-decoration:none}.site-header{height:66px;border-bottom:1px solid #e3e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1220px)/2));background:#f6f8fb;gap:15px}.wordmark{font-weight:900;letter-spacing:-.065em;font-size:20px;color:#152943;white-space:nowrap}.wordmark span{color:#4d70aa}.wordmark small{font-size:12px;font-weight:500;letter-spacing:normal;color:#4770a1}.header-right{font-weight:750;font-size:10px;letter-spacing:.13em;color:#647c9b}.header-sep{color:#b3bcc9;padding:0 8px}.site-body{max-width:1220px;margin:auto;padding:30px 22px 25px}.breadcrumb,.eyebrow,.kicker,.tiny-title{font-weight:800;letter-spacing:.16em;font-size:11px;color:var(--blue)}.breadcrumb{margin:4px 0 42px;color:#70819c}.breadcrumb span{padding:0 11px;color:#bec8d7}.hidden{display:none!important}h1{font-size:clamp(42px,5vw,71px);letter-spacing:-.075em;line-height:1.04;margin:17px 0 24px;font-weight:860}h2{font-size:clamp(24px,2.2vw,33px);letter-spacing:-.045em;line-height:1.18;margin:15px 0}.period{color:var(--blue)}.lead{font-size:17px;color:#53627c;line-height:1.7;max-width:560px;margin:0 0 25px}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}.hero-art,.art-frame{border:1px solid #d9e0ea;box-shadow:0 16px 35px rgba(25,42,70,.05);background:white;border-radius:20px;overflow:hidden}.hero-art img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.meta{display:flex;gap:9px;flex-wrap:wrap;margin:23px 0 31px}.meta span,.tag,.question-tag{display:inline-flex;border-radius:100px;background:#edf2f9;color:#405a81;font-size:11px;font-weight:800;letter-spacing:.035em;padding:8px 12px}.mode-picker{border:0;padding:0;margin:0 0 14px}.mode-picker legend{font-weight:800;font-size:14px;margin-bottom:12px}.mode-card{display:flex;gap:13px;align-items:flex-start;border:1px solid #dce2ec;border-radius:14px;padding:15px 16px;max-width:530px;margin-bottom:9px;background:white;cursor:pointer}.mode-card:has(input:checked){border-color:#7293c3;background:#f0f5fc;box-shadow:inset 0 0 0 1px #7293c3}.mode-card input{margin-top:4px;accent-color:#4569aa}.mode-card strong{font-size:14px;display:block}.mode-card small{display:block;font-size:12px;color:#5c6b81;line-height:1.5;margin-top:4px}.minor-note{font-size:12px;line-height:1.7;color:#718096;max-width:600px}.button{border:1px solid transparent;border-radius:11px;padding:12px 18px;font-weight:780;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px}.button.primary{background:#1c2b43;color:#fff}.button.primary:hover{background:#354b70}.button.secondary{background:#fff;color:#2b4165;border:1px solid #cad6e7}.button.secondary:hover{background:#eef2f8}.button.large{padding:15px 24px;margin-top:9px;font-size:15px;min-height:52px}.button:disabled{opacity:.45;cursor:default}.helper{font-size:12px;line-height:1.55;color:#7a8799}.section-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}.section-title{font-size:27px;margin:7px 0}.text-button{border:0;background:transparent;color:#4d678b;font-size:13px;font-weight:760;padding:10px}.text-button:hover{text-decoration:underline}.question-tag{white-space:nowrap}.progress{display:flex;gap:6px;max-width:100%;margin:14px 0 19px}.progress span{flex:1;background:#e4e9f1;border-radius:99px;height:5px}.progress span.done{background:#8aa6cf}.progress span.active{background:#365c98}.practice-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(370px,.98fr);gap:23px;align-items:stretch}.art-frame img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain}.art-caption{padding:8px 14px;text-align:center;font-size:11px;color:#8190a4;border-top:1px solid #e5e8ec}.action-panel{border:1px solid #dce3ee;border-radius:20px;background:#fff;padding:clamp(25px,3vw,45px);display:flex;flex-direction:column;min-height:460px;justify-content:center}.action-panel>.tag{align-self:flex-start}.action-panel h2{font-size:clamp(26px,3.1vw,40px);letter-spacing:-.06em}.explain{color:#5f6d81;line-height:1.72;max-width:380px;min-height:66px;margin:7px 0 13px}.timer-zone{margin:18px 0 5px;padding:20px 0 10px;border-top:1px solid #e6ebf3;border-bottom:1px solid #e6ebf3}.clock{font-size:clamp(52px,7vw,76px);font-weight:770;letter-spacing:-.065em;font-variant-numeric:tabular-nums;line-height:1.2;margin:5px 0}.clock.warn{color:#c85b32}.sound-indicator{display:flex;align-items:center;gap:5px;height:32px;margin-top:10px}.sound-indicator span{width:5px;height:9px;background:#a3b0c2;border-radius:4px}.sound-indicator span:nth-child(2){height:20px}.sound-indicator span:nth-child(3){height:28px}.sound-indicator span:nth-child(4){height:16px}.sound-indicator span:nth-child(5){height:11px}.sound-indicator.playing span{background:#557dbd;animation:beat .75s ease-in-out infinite alternate}.sound-indicator.playing span:nth-child(2){animation-delay:.12s}.sound-indicator.playing span:nth-child(3){animation-delay:.29s}.sound-indicator.playing span:nth-child(4){animation-delay:.18s}.sound-indicator.recording span{background:#d06a44;animation:beat .6s ease-in-out infinite alternate}.sound-indicator.recording span:nth-child(2){animation-delay:.15s}.sound-indicator.recording span:nth-child(3){animation-delay:.08s}@keyframes beat{to{transform:scaleY(.4)}}.status{font-size:14px;font-weight:700;color:#4b5e7c;min-height:22px;margin:5px 0 20px}.actions{display:flex;flex-wrap:wrap;gap:9px}.mic-banner{padding:10px 12px;border:1px solid #e9d6b0;background:#fff9ec;border-radius:10px;font-size:12px;line-height:1.6;color:#79613b;margin-top:15px}.below-panel{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:0 5px;color:#8d9aab;font-size:10px;font-weight:700;letter-spacing:.1em}.review-list{display:grid;gap:13px;margin:30px 0}.review-card{border:1px solid var(--edge);background:white;border-radius:16px;padding:21px 24px}.review-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.review-card-head strong{font-size:16px}.review-text{font-size:16px;line-height:1.58;letter-spacing:-.005em}.review-tracks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.track-label{display:block;font-size:11px;color:#61728a;font-weight:800;margin-bottom:5px}audio{width:100%;max-width:100%;height:43px}.download{display:inline-block;font-size:12px;color:#3e649d;font-weight:800;margin-top:6px}.download:hover{text-decoration:underline}.no-record{padding:11px 0;font-size:12px;color:#8a98aa}.review-actions{display:flex;gap:10px;flex-wrap:wrap}footer{border-top:1px solid #e4eaf2;margin:70px 0 0;padding-top:20px;font-size:11px;color:#8a98ad}#intro .art-frame{align-self:start}
@media(max-width:850px){.hero-grid,.practice-grid{grid-template-columns:1fr;gap:21px}.hero-art{max-width:540px;grid-row:1}.hero-grid>div:first-child{grid-row:2}.art-frame{max-width:630px;width:100%;margin:0 auto}.action-panel{min-height:0}.site-body{padding:20px 16px}.breadcrumb{margin:5px 0 20px}.site-header{padding:0 16px}.header-right{display:none}}
@media(max-width:520px){.hero-art{max-width:100%}h1{font-size:44px}.site-header{height:58px}.review-tracks{grid-template-columns:1fr}.section-header{align-items:flex-start}.action-panel{padding:25px}.button{width:100%}.actions{flex-direction:column}.clock{font-size:64px}.mode-card{padding:13px}.lead{font-size:16px}}
@media(prefers-reduced-motion:reduce){.sound-indicator.playing span,.sound-indicator.recording span{animation:none}}
/* v2 refinements: smaller title, informative mode picker, realistic exam canvas. */
#setup h1{font-size:clamp(35px,4vw,54px);letter-spacing:-.058em;line-height:1.14;margin:12px 0 17px}
#setup .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:start}
#setup .hero-art{max-width:420px;width:100%;justify-self:end;align-self:start;margin-top:22px}
#setup .meta{margin:18px 0 24px}
#setup .mode-card small{font-size:13px;line-height:1.58}
#setup .mode-card{padding:17px 18px}
#setup .mode-card strong{font-size:15px}
#setup .lead{font-size:15px;line-height:1.65}
#intro .art-frame{max-width:470px;justify-self:center}
#exercise .section-title{font-size:21px;letter-spacing:-.035em}
#exercise .art-frame{max-width:440px;width:100%;margin:0 auto;align-self:start}
#exercise .practice-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
#exercise .action-panel{min-height:410px;padding:28px 36px}
#exercise .action-panel h2{font-size:29px;letter-spacing:-.045em}
#exercise .clock{font-size:60px}
#exercise .explain{min-height:0}
.exam-topline,.exam-instruction,.exam-audio,.exam-scenario-copy,.stop-overlay{display:none}
.exam-audio{display:none;align-items:center;gap:9px;max-width:310px;border-radius:8px;border:1px solid #dbdfe4;box-shadow:0 2px 7px rgba(20,29,40,.10);padding:8px 12px;background:white;color:#8397a0;font-size:10px;white-space:nowrap;margin:0 auto 24px}
.exam-audio-symbol{height:23px;width:23px;display:flex;align-items:center;justify-content:center;border-radius:99px;background:#e5f0f0;color:#5a999d;font-size:13px}
.exam-audio-track{height:6px;flex:1;background:#e5e9ee;border-radius:12px;overflow:hidden;min-width:55px}
.exam-audio-track>div{width:0;height:100%;background:#69aeb0;transition:width .12s linear}
.exam-audio-speed{color:#6e9fa2}
.stop-overlay{position:fixed;inset:0;background:rgba(0,0,0,.18);z-index:20;align-items:center;justify-content:center;padding:20px}
.stop-dialog{background:#fff;border-radius:15px;padding:36px 44px;box-shadow:0 10px 40px rgba(0,0,0,.18);max-width:345px;width:100%;min-height:245px;color:#585858;font-family:Arial,sans-serif}
.stop-heading{text-align:left;font-size:16px;color:#555}
.stop-divider{height:1px;background:#d3d3d3;margin:19px 0 31px}
.stop-dialog p{max-width:220px;margin:0 auto;font-size:13px;line-height:1.55}
.completion-dino{font-size:49px;line-height:1.25;margin-bottom:15px}
#review h1{font-size:clamp(32px,4vw,46px);margin:10px 0}
#review .review-subheading{font-size:22px;font-weight:650;margin:18px 0 9px}
/* Exam layout: deliberate visual resemblance to the user-provided test screens, not ETS branding. */
body.exam-mode{background:#fff;color:#333;font-family:Arial,Helvetica,sans-serif}
body.exam-mode .site-header,body.exam-mode .breadcrumb{display:none}
body.exam-mode .site-body{max-width:none;padding:0;min-height:100vh}
body.exam-mode .site-body footer{display:none}
body.exam-mode #intro,body.exam-mode #exercise{padding-top:62px}
body.exam-mode #intro:before,body.exam-mode #exercise:before{content:"";display:block;position:fixed;top:0;left:0;right:0;height:61px;background:#060606;z-index:1}
body.exam-mode .exam-topline{display:block;position:absolute;top:62px;left:0;right:0;height:22px;padding:3px 18px;background:#f6f6f6;color:#4a4a4a;font-size:12px;letter-spacing:0}
body.exam-mode .exam-topsep{padding:0 11px;color:#999}
body.exam-mode .practice-intro-header,body.exam-mode #intro .action-panel,body.exam-mode #intro .section-header,body.exam-mode #exercise .section-header,body.exam-mode #exercise .progress,body.exam-mode #exercise .below-panel,body.exam-mode #exercise .art-caption{display:none}
body.exam-mode #intro .exam-scenario-copy{display:block;max-width:920px;margin:36px auto 24px;padding:0 20px;font-size:19px;line-height:1.55;text-align:center;color:#333}
body.exam-mode #intro .practice-grid{display:block}
body.exam-mode #intro .art-frame{width:218px;height:218px;border:1px solid #bbb;border-radius:0;box-shadow:none;margin:0 auto}
body.exam-mode #intro .art-frame img{width:100%;height:100%;object-fit:contain}
body.exam-mode .exam-intro-player{display:flex;margin:20px auto;max-width:310px}
body.exam-mode #exercise .exam-instruction{display:block;text-align:center;font-size:22px;font-weight:400;margin:34px 10px 49px;color:#333}
body.exam-mode #exercise .practice-grid{display:flex;flex-direction:column;align-items:center;gap:22px}
body.exam-mode #exercise .art-frame{height:218px;width:218px;max-width:218px;border:1px solid #bbb;border-radius:0;box-shadow:none}
body.exam-mode #exercise .art-frame img{width:100%;height:100%;object-fit:contain}
body.exam-mode #exercise .action-panel{background:transparent;min-height:0;padding:0;display:flex;align-items:center;justify-content:flex-start;border:0;border-radius:0;width:100%;max-width:340px;margin:0 auto;text-align:center}
body.exam-mode #exercise .exam-audio{display:flex;width:310px;max-width:calc(100vw - 36px);margin:0 auto 14px}
body.exam-mode #exercise .tag,body.exam-mode #exercise .action-panel h2,body.exam-mode #exercise .explain,body.exam-mode #exercise .sound-indicator,body.exam-mode #exercise .status{display:none}
body.exam-mode #exercise .timer-zone{width:216px;max-width:100%;border:0;margin:0 auto;padding:0;text-align:center}
body.exam-mode #exercise .tiny-title{background:#6b6b6b;border-radius:12px 12px 0 0;color:white;padding:9px 12px;letter-spacing:0;font-size:13px;font-weight:700}
body.exam-mode #exercise .clock{background:#ececec;font-size:32px;color:#333;letter-spacing:0;padding:12px 8px;font-weight:600}
body.exam-mode #exercise .clock.warn{color:#b54d3d}
body.exam-mode #exercise .timer-zone .helper{display:none}
body.exam-mode #exercise .actions{justify-content:center}
body.exam-mode #exercise .actions>.button{border-radius:7px;font-weight:500}
body.exam-mode #exercise .mic-banner{font-size:12px;text-align:left}
body.exam-mode #exercise .stop-overlay:not(.hidden){display:flex}
body.exam-mode #intro .intro-status-caption{display:block;text-align:center;color:#697480;font-size:13px}
@media(max-width:850px){
#setup .hero-grid{grid-template-columns:1fr}
#setup .hero-art{max-width:350px;grid-row:1;justify-self:center;margin-top:0}
#setup .hero-grid>div:first-child{grid-row:2}
#exercise .practice-grid{grid-template-columns:1fr}
#exercise .action-panel{min-height:0}
}
@media(max-width:520px){
#setup h1{font-size:37px}
#setup .hero-art{max-width:230px}
#setup .hero-grid{gap:20px}
body.exam-mode #intro .exam-scenario-copy{font-size:15px;margin-top:35px;line-height:1.5}
body.exam-mode #exercise .exam-instruction{font-size:19px;margin:36px 8px 45px}
body.exam-mode #intro .art-frame,body.exam-mode #exercise .art-frame{height:205px;width:205px;max-width:205px}
}
/* Accessible fallback if exam-mode autoplay is blocked by a browser. */
body.exam-mode #intro .action-panel{display:flex;width:100%;max-width:410px;min-height:0;margin:0 auto;padding:0;border:0;border-radius:0;background:transparent;align-items:center;text-align:center}
body.exam-mode #intro .action-panel .tag,body.exam-mode #intro .action-panel h2,body.exam-mode #intro .action-panel .explain,body.exam-mode #intro .action-panel .sound-indicator,body.exam-mode #intro .action-panel .helper{display:none}
body.exam-mode #intro .action-panel .status{font-size:12px;color:#747d86;margin:0 0 8px}
body.exam-mode #intro .action-panel .button{font-size:12px}
body.exam-mode #exercise.phase-listening .timer-zone{display:none}
body.exam-mode #exercise.phase-recording .timer-zone{display:block}