:root{--canvas: #e9f1ee;--canvas-deep: #dce9e4;--surface: #fffefb;--ink: #16211d;--muted: #6e7e77;--line: #bbb8d7;--shadow: #cbc8e2;--accent: #887da9;--success: #237354;--success-pale: #e0f2e9;--danger: #a44847;--danger-pale: #fae9e5;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--sans: "Avenir Next", Avenir, "Helvetica Neue", sans-serif}[data-theme=dark]{--canvas: #111916;--canvas-deep: #18231f;--surface: #1d2824;--ink: #f4f1e9;--muted: #9bacA4;--line: #6f6986;--shadow: #38354b;--accent: #bbb0da;--success: #79c7a5;--success-pale: #203c31;--danger: #e18f86;--danger-pale: #402925}*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{margin:0;color:var(--ink);background:radial-gradient(circle at 16% 8%,rgb(255 255 255 / 45%),transparent 28rem),linear-gradient(145deg,var(--canvas) 0%,var(--canvas-deep) 100%);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none;transition:background .24s ease,color .24s ease}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;font:inherit}.page-shell{width:min(100%,1040px);height:100svh;height:100dvh;min-height:0;overflow:hidden;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) clamp(16px,4vw,42px) max(8px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(7px,1.1vh,12px)}.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px}.test-label,.celebration-kicker{margin:0;color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}h1{margin:0;display:flex;align-items:baseline;gap:clamp(8px,1.6vw,14px);white-space:nowrap}.brand-ielts{color:var(--ink);font-family:var(--serif);font-size:clamp(1.85rem,5vw,2.8rem);font-weight:700;letter-spacing:-.045em}.brand-name{color:var(--muted);font-family:var(--sans);font-size:clamp(.78rem,2vw,1rem);font-weight:700;letter-spacing:.04em}.theme-button,.text-button{border:0;background:transparent;cursor:pointer}.theme-button{width:38px;height:38px;flex:0 0 38px;padding:0;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface) 88%,transparent);display:grid;place-items:center;align-items:center;color:var(--muted);box-shadow:0 4px 12px color-mix(in srgb,var(--shadow) 36%,transparent)}.theme-icon{font-size:.94rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.practice{min-height:0;overflow:hidden;display:grid;grid-template-rows:auto 2px auto minmax(0,1fr) auto;align-content:stretch}.practice-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.score{margin:0;color:var(--muted);font-family:var(--serif);font-size:.88rem;font-variant-numeric:tabular-nums}.progress-track{height:2px;margin-top:6px;overflow:hidden;background:color-mix(in srgb,var(--line) 44%,transparent)}.progress-fill{display:block;width:0;height:100%;background:var(--accent);transition:width .38s cubic-bezier(.2,.75,.25,1)}.instruction{min-height:17px;margin:clamp(5px,.8vh,8px) 0;color:var(--muted);font-size:clamp(.72rem,1.6vw,.82rem);text-align:center;letter-spacing:.015em}.instruction[data-tone=ready]{color:var(--accent)}.instruction[data-tone=correct]{color:var(--success)}.instruction[data-tone=wrong]{color:var(--danger)}.audio-stage{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,1.5vw,16px)}.audio-card{position:relative;min-width:0;height:100%;min-height:0;overflow:hidden;border:1.5px solid var(--line);border-radius:clamp(20px,3vw,30px);background:var(--surface);box-shadow:0 12px 30px color-mix(in srgb,var(--shadow) 62%,transparent);display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .2s ease,opacity .16s ease}.audio-card.is-playing{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 15px 36px color-mix(in srgb,var(--accent) 28%,transparent)}.listen-action:focus-visible,.choose-button:focus-visible,.text-button:focus-visible,.theme-button:focus-visible,.primary-button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:4px}.card-body{position:relative;min-height:0;flex:1;padding:clamp(44px,6vw,62px) clamp(18px,3vw,30px) 22px;display:grid;place-items:center}.card-status{position:absolute;top:clamp(13px,2vw,18px);left:clamp(15px,2.4vw,22px);display:flex;align-items:center;gap:8px}.speaker{width:23px;height:23px;color:var(--accent)}.speaker svg{width:100%;height:100%;fill:currentColor}.speaker svg path:nth-child(n+2){fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.is-playing .speaker{animation:breathe .76s ease-in-out infinite alternate}.card-kicker{color:var(--muted);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.term-text{display:block;width:100%;opacity:0;visibility:hidden;font-family:var(--serif);font-size:clamp(1.35rem,3.2vw,2.35rem);font-weight:600;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;transform:translateY(8px)}.term-text[hidden]{display:none!important}.option-card .term-text{font-size:clamp(1.12rem,2.6vw,1.95rem)}.is-revealed .term-text{opacity:1;visibility:visible;transform:translateY(0);transition:none}.question-card.is-revealed .question-text{opacity:1;visibility:visible;transform:translateY(0)}.audio-stage[data-terms-visible=true] .term-text,.audio-stage[data-terms-visible=true] .question-text{display:block!important;opacity:1!important;visibility:visible!important;color:var(--ink)!important;transform:none!important}.audio-stage[data-terms-visible=true] .question-text{position:relative;z-index:6}.card-actions{padding:12px;border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent);display:grid;grid-template-columns:1fr 1fr;gap:9px}.card-actions.single-action{grid-template-columns:1fr}.question-card .card-actions.single-action{position:relative;z-index:4;width:100%;min-height:96px;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;justify-items:end;gap:7px;padding:8px 10px;background:var(--surface)}.question-card .listen-action{position:relative;z-index:5;grid-column:1;grid-row:1;width:min(48%,210px);background:color-mix(in srgb,var(--surface) 92%,var(--canvas));touch-action:manipulation}.option-card .card-actions{position:relative;z-index:4;min-height:96px;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;justify-items:end;gap:7px;padding:8px 10px}.option-card .listen-action,.option-card .choose-button{position:relative;z-index:5;width:min(48%,210px);touch-action:manipulation}.option-card .listen-action{grid-column:1;grid-row:1}.option-card .choose-button{grid-column:1;grid-row:2}.listen-action,.choose-button{min-height:42px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease}.listen-action:hover{color:var(--ink);border-color:var(--accent)}.listen-action:active,.choose-button:not(:disabled):active{transform:scale(.97)}.choose-button{color:var(--accent)}.choose-button:not(:disabled){color:var(--surface);border-color:var(--accent);background:var(--accent)}.choose-button:disabled{cursor:pointer;opacity:1;color:var(--surface);border-color:var(--accent);background:var(--accent)}.audio-card.is-ready{border-color:color-mix(in srgb,var(--accent) 70%,var(--line))}.result-icon{position:absolute;z-index:2;top:13px;right:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--sans);font-size:1.25rem;font-weight:800;line-height:1;opacity:0;pointer-events:none;transform:scale(.55)}.option-card.is-correct .result-icon{opacity:1;background:var(--success);transform:scale(1);transition:opacity .18s ease,transform .26s cubic-bezier(.2,1.5,.35,1)}.option-card.is-correct .result-icon:before{content:"✓"}.audio-card.is-wrong .result-icon{opacity:1;background:var(--danger);transform:scale(1);animation:result-pop .42s cubic-bezier(.2,1.5,.35,1)}.audio-card.is-wrong .result-icon:before{content:"×"}.option-card.is-correct{border-color:var(--success);background:var(--success-pale);box-shadow:clamp(4px,.8vw,7px) clamp(5px,.9vw,8px) 0 color-mix(in srgb,var(--success) 30%,transparent)}.option-card.is-distractor{opacity:.64}.audio-card.is-wrong{border-color:var(--danger);background:var(--danger-pale);animation:wrong-shift .42s ease}.practice-nav{margin:clamp(7px,1vh,10px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,1.5vw,14px)}.text-button{width:min(100%,144px);min-height:40px;padding:8px 16px;border:1.5px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 5px 14px color-mix(in srgb,var(--shadow) 42%,transparent);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:.82rem;font-weight:700;letter-spacing:.01em;transition:transform .15s ease,color .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,opacity .15s ease}.text-button:not(:disabled):hover{color:var(--ink);border-color:var(--accent);transform:translateY(-1px)}.text-button:not(:disabled):active{transform:translateY(1px)}.text-button:disabled{cursor:default;opacity:.38;box-shadow:none}.back-button,.next-button{width:100%;max-width:144px}.back-button{justify-self:start}.restart-button{width:auto;min-height:auto;padding:9px 5px;border:0;background:transparent;box-shadow:none;justify-self:center;font-size:.7rem;font-weight:500}.next-button{justify-self:end;font-weight:700}.next-button:not(:disabled){border-color:color-mix(in srgb,var(--line) 80%,transparent);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--muted);box-shadow:0 5px 14px color-mix(in srgb,var(--shadow) 42%,transparent)}.next-button:not(:disabled):hover{color:var(--ink);border-color:var(--accent)}.site-footer{display:flex;justify-content:center;gap:7px;color:var(--muted);font-size:clamp(.56rem,1.3vw,.68rem);line-height:1.15;text-align:center}.site-footer a{color:inherit;text-decoration:none}.finish-screen{position:fixed;inset:0;z-index:10;padding:24px;display:grid;place-items:center;grid-template-columns:minmax(0,1fr);background:color-mix(in srgb,var(--canvas) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.finish-screen[hidden]{display:none}.finish-card{box-sizing:border-box;min-width:0;max-width:min(100%,520px);width:min(100%,520px);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(30px,6vw,52px);border:1.5px solid var(--line);border-radius:4px;background:var(--surface);box-shadow:9px 11px 0 var(--shadow);text-align:center;animation:finish-in .44s cubic-bezier(.2,.85,.28,1)}.finish-card h2{margin:8px 0 10px;font-family:var(--serif);font-size:clamp(2.45rem,8vw,4.25rem);font-weight:600;letter-spacing:-.055em}.finish-copy{margin:0;color:var(--muted)}.pep-talk{max-width:32rem;margin:12px auto 0;color:var(--ink);font-family:var(--serif);font-size:clamp(1rem,2.8vw,1.3rem);font-style:italic;line-height:1.35}.finish-stats{margin:clamp(24px,5vw,38px) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-block:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.finish-stats div{padding:22px 10px}.finish-stats div+div{border-left:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.finish-stats strong,.finish-stats span{display:block}.finish-stats strong{font-family:var(--serif);font-size:1.65rem}.finish-stats span{margin-top:4px;color:var(--muted);font-size:.72rem}.primary-button,.secondary-button{box-sizing:border-box;width:100%;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;border-radius:999px;padding:14px 18px}.primary-button{border:1px solid var(--ink);color:var(--surface);background:var(--ink);cursor:pointer;font-weight:700}.secondary-button{margin-top:10px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);color:var(--muted);background:transparent;cursor:pointer}.secondary-button:hover{color:var(--ink);border-color:var(--accent)}@keyframes breathe{to{opacity:.45;transform:scale(.92)}}@keyframes wrong-shift{25%{transform:translate(-6px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}@keyframes result-pop{0%{opacity:0;transform:scale(.35)}65%{transform:scale(1.14)}}@keyframes finish-in{0%{opacity:0;transform:translateY(14px) scale(.98)}}@media(max-width:600px){.page-shell{gap:6px;padding-inline:16px}.site-header{align-items:center}.question-card,.option-card{border-radius:21px;box-shadow:0 9px 22px color-mix(in srgb,var(--shadow) 58%,transparent)}.audio-stage{gap:10px 12px}.card-body{padding:42px 12px 12px}.card-status{top:12px;left:13px}.speaker{width:21px;height:21px}.term-text{font-size:clamp(1.05rem,5.3vw,1.48rem)}.option-card .term-text{font-size:clamp(.92rem,4.3vw,1.22rem)}.card-actions{padding:8px;gap:6px}.question-card .card-actions.single-action{min-height:84px;padding:6px 7px;gap:5px}.question-card .listen-action{width:48%}.option-card .card-actions{min-height:84px;padding:6px 7px;gap:5px}.option-card .listen-action,.option-card .choose-button{width:48%}.listen-action,.choose-button{min-height:38px;font-size:.57rem;letter-spacing:.08em}.site-footer{flex-wrap:wrap;gap:3px 7px}.practice-nav{margin-top:8px;gap:7px}.text-button{min-height:40px;padding-inline:14px;font-size:.8rem}.restart-button{min-height:auto;padding-inline:3px;font-size:.64rem}.finish-screen{padding:16px}.finish-card{padding:26px 22px}.finish-stats{margin:20px 0}.finish-stats div{padding:16px 8px}}@media(max-height:700px)and (max-width:600px){.page-shell{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}.brand-ielts{font-size:1.65rem}.brand-name{font-size:.7rem}.theme-button{width:34px;height:34px;flex-basis:34px}.practice-nav{margin-top:6px}.text-button{min-height:36px}.card-body{padding-top:36px}.listen-action,.choose-button{min-height:34px}.card-actions{padding:6px}.option-card .card-actions,.question-card .card-actions.single-action{min-height:78px;padding:5px 6px;gap:4px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;transition-duration:1ms!important}}.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.contents-button{min-height:38px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted);box-shadow:0 4px 12px color-mix(in srgb,var(--shadow) 36%,transparent);cursor:pointer;font-size:.8rem;font-weight:700;letter-spacing:.02em;transition:transform .15s ease,color .15s ease,border-color .15s ease}.contents-button:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-1px)}.contents-button:active{transform:translateY(1px)}.contents-button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:4px}dialog:where([open]){display:block}.contents-dialog{box-sizing:border-box;width:min(92vw,420px);max-width:420px;max-height:min(82dvh,620px);padding:0;border:1.5px solid var(--line);border-radius:clamp(20px,3vw,28px);background:var(--surface);color:var(--ink);box-shadow:0 24px 70px #00000052;overflow:hidden}.contents-dialog::backdrop{background:color-mix(in srgb,var(--canvas) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.contents-dialog.is-fallback{position:fixed;inset:0;margin:auto;display:grid;place-items:center}.contents-panel{position:relative;padding:clamp(20px,4vw,28px)}.contents-title{margin:0 0 14px;padding-right:40px;font-family:var(--serif);font-size:clamp(1.4rem,4.5vw,1.8rem);font-weight:700;letter-spacing:-.02em}.contents-close{position:absolute;top:clamp(14px,3vw,20px);right:clamp(14px,3vw,20px);width:40px;height:40px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--muted);cursor:pointer;font-size:1.25rem;line-height:1;display:grid;place-items:center;transition:color .15s ease,border-color .15s ease,transform .15s ease}.contents-close:hover{color:var(--ink);border-color:var(--accent)}.contents-close:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:3px}.contents-list{list-style:none;margin:0;padding:0;max-height:min(58dvh,460px);overflow-y:auto;overscroll-behavior:contain;display:grid;gap:8px}.contents-book{width:100%;min-height:48px;padding:12px 16px;border:1.5px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:14px;background:color-mix(in srgb,var(--surface) 96%,transparent);color:var(--ink);cursor:pointer;text-align:left;font-size:.92rem;font-weight:700;transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease}.contents-book:hover{border-color:var(--accent);transform:translateY(-1px)}.contents-book:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:3px}.contents-book[aria-current=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 100%,transparent);color:var(--surface)}.contents-book[aria-current=true]:after{content:"Current";float:right;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}@media(max-width:600px){.site-header{gap:8px}h1{gap:6px}.brand-ielts{font-size:clamp(1.35rem,6.4vw,1.85rem)}.brand-name{font-size:.68rem}.header-actions{gap:7px}.contents-button{min-height:34px;padding:7px 12px;font-size:.72rem}.theme-button{width:34px;height:34px;flex-basis:34px}}@media(max-width:360px){.brand-name{display:none}.contents-book{min-height:46px;padding:11px 14px}.finish-card h2{font-size:2rem}}