:root{
  --ink:#13213a;
  --muted:#5c6b82;
  --line:#d9e2ef;
  --panel:#ffffff;
  --wash:#f4f8fd;
  --brand:#2b61cf;
  --brand-dark:#1847ad;
  --good:#178b48;
  --good-bg:#e8f7ee;
  --bad:#b72f38;
  --bad-bg:#fdebed;
  --warn:#9b6500;
  --warn-bg:#fff4d8;
  --shadow:0 14px 35px rgba(35,59,99,.10);
  --font-scale:1;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,#f8fbff 0,#edf4fc 100%);
  color:var(--ink);
  font:calc(17px * var(--font-scale))/1.52 "Trebuchet MS","Segoe UI",Arial,sans-serif;
}
button,input,select{font:inherit}
button,select,input{color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.52}
a{color:inherit}
.sr-only{
  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;
}
.skip-link{
  position:fixed;left:12px;top:-80px;z-index:9999;background:#fff;padding:12px 16px;
  border:2px solid var(--brand);border-radius:12px;font-weight:800;
}
.skip-link:focus{top:12px}
.site-header{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px);
}
.header-inner{
  max-width:1540px;margin:auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 22px;
}
.brand{font-size:1.22rem;font-weight:900;letter-spacing:-.03em;white-space:nowrap}
.top-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.top-nav a{
  text-decoration:none;font-weight:800;padding:10px 15px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
}
.top-nav a:hover,.top-nav a:focus-visible{border-color:var(--brand);outline:3px solid rgba(43,97,207,.17)}
.top-nav a.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.page-wrap{max-width:1540px;margin:auto;padding:24px 22px 120px}
.hero{
  background:linear-gradient(125deg,#183f98,#3475e7);color:#fff;border-radius:24px;
  padding:26px 30px;margin-bottom:22px;box-shadow:var(--shadow);
}
.hero h1{margin:0 0 7px;font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.1}
.hero p{margin:0;max-width:1000px;color:#eff5ff}
.app-grid{display:grid;grid-template-columns:minmax(310px,390px) minmax(0,1fr);gap:22px;align-items:start}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--shadow);
}
.controls{position:sticky;top:94px;padding:22px}
.workspace{padding:24px;min-width:0}
.section-title{margin:0 0 18px;font-size:1.4rem;line-height:1.15}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label,.control-label{font-weight:900}
select,input[type=text]{
  width:100%;border:1.5px solid var(--line);background:#fff;border-radius:14px;
  padding:12px 14px;min-height:49px;
}
select:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible{
  outline:3px solid rgba(43,97,207,.25);outline-offset:2px;
}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.btn{
  border:1.5px solid var(--line);background:#fff;border-radius:15px;padding:12px 14px;
  min-height:52px;font-weight:900;line-height:1.15;
}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover:not(:disabled){background:var(--brand-dark)}
.btn.play{background:var(--good);color:#fff;border-color:var(--good)}
.btn.reveal{background:#a36c00;color:#fff;border-color:#a36c00}
.btn.full{grid-column:1/-1}
.rate-row{display:flex;align-items:center;gap:12px}
.rate-row input{width:100%}
.rate-value{min-width:50px;text-align:right;font-weight:900}
.helper{
  margin:12px 0 0;color:var(--muted);font-size:.95rem;
}
.tip{
  background:var(--warn-bg);border:1px solid #efd28c;border-radius:17px;padding:14px 16px;
  margin:18px 0;color:#3d3524;
}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.stat{background:var(--wash);border:1px solid var(--line);border-radius:17px;padding:13px}
.stat strong{display:block;font-size:1.55rem;line-height:1.1}
.stat span{color:var(--muted);font-size:.9rem}
.mode-note{
  border-left:5px solid var(--brand);background:#edf4ff;border-radius:12px;padding:12px 14px;
  margin-bottom:18px;
}
.status-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{
  border:1px solid var(--line);background:var(--wash);padding:7px 11px;border-radius:999px;
  font-size:.88rem;font-weight:800;
}
.question-label{color:var(--muted);font-weight:800;margin-bottom:4px}
.question{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.2;margin:0 0 19px}
.context{
  background:var(--wash);border:1px solid var(--line);border-radius:16px;padding:13px 15px;
  margin-bottom:15px;
}
.options{display:grid;gap:12px}
.option{
  width:100%;text-align:left;border:2px solid var(--line);border-radius:18px;background:#fff;
  padding:15px 17px;font-weight:800;display:flex;align-items:center;gap:13px;
}
.option:hover:not(:disabled){border-color:#91afea;background:#f7faff}
.option.selected{border-color:var(--brand);background:#edf4ff}
.option.correct{border-color:var(--good);background:var(--good-bg)}
.option.wrong{border-color:var(--bad);background:var(--bad-bg)}
.letter{
  display:inline-grid;place-items:center;flex:0 0 38px;height:38px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:900;
}
.visual-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.visual-option{
  display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;min-height:230px;
}
.visual-option .visual{
  display:grid;place-items:center;min-height:145px;background:linear-gradient(145deg,#eff6ff,#fdfefe);
  border-bottom:1px solid var(--line);padding:14px;text-align:center;
}
.visual-icon{font-size:4.2rem;line-height:1;filter:drop-shadow(0 5px 4px rgba(0,0,0,.08))}
.visual-caption{font-size:.78rem;color:var(--muted);margin-top:8px}
.visual-option .choice-foot{display:flex;gap:11px;align-items:center;padding:14px}
.feedback{
  margin-top:16px;border-radius:15px;padding:13px 15px;font-weight:800;display:none;
}
.feedback.show{display:block}
.feedback.good{background:var(--good-bg);border:1px solid #9dd5b3;color:#0d6333}
.feedback.bad{background:var(--bad-bg);border:1px solid #eab1b5;color:#8a1f27}
.feedback.neutral{background:#edf4ff;border:1px solid #b6caf2;color:#214b9c}
details.review-block{
  border:1px solid var(--line);border-radius:18px;background:#fff;margin-top:15px;overflow:hidden;
}
details.review-block summary{padding:15px 18px;font-weight:900;cursor:pointer}
.details-body{padding:0 18px 18px}
.transcript-shell{
  border:1px solid var(--line);border-radius:16px;background:#fbfdff;padding:10px 18px;
  min-height:90px;
}
.transcript-placeholder{color:var(--muted);padding:15px 0}
.turn{
  display:grid;grid-template-columns:minmax(105px,160px) 1fr;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line);
}
.turn:last-child{border-bottom:0}
.speaker{font-weight:900}
.speech{min-width:0}
.vocab-row{display:flex;flex-wrap:wrap;gap:8px}
.vocab-pill{background:#edf4ff;color:#214b9c;border-radius:999px;padding:7px 11px;font-weight:800}
.empty-state{
  min-height:390px;display:grid;place-items:center;text-align:center;padding:30px;
  border:2px dashed #c8d6e9;border-radius:20px;background:#fbfdff;color:var(--muted);
}
.empty-state strong{display:block;color:var(--ink);font-size:1.35rem;margin-bottom:6px}
.round-complete{
  background:#eef8f2;border:1px solid #a9d9bb;border-radius:20px;padding:22px;
}
.review-list{display:grid;gap:12px;margin-top:16px}
.review-card{border:1px solid var(--line);border-radius:16px;padding:15px;background:#fff}
.review-card h3{margin:0 0 7px;font-size:1rem}
.review-card p{margin:5px 0}
.supported-tag{display:inline-block;background:var(--warn-bg);color:#765000;border-radius:999px;padding:3px 8px;font-size:.78rem;font-weight:900}
.gap-list{display:grid;gap:13px}
.gap-row{
  display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:12px;
  align-items:center;border:1px solid var(--line);border-radius:16px;padding:13px;background:#fbfdff;
}
.gap-row label{font-weight:800}
.gap-row input{margin:0}
.gap-result{font-weight:900;min-width:82px}
.gap-result.good{color:var(--good)}
.gap-result.bad{color:var(--bad)}
.hint{font-size:.84rem;color:#815700;margin-top:5px}
.question-card{
  border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:15px;background:#fff;
}
.question-card h3{margin:0 0 12px;font-size:1.08rem}
.question-card .options{gap:8px}
.question-card .option{padding:11px 13px;min-height:48px}
.question-explanation{margin-top:10px;color:var(--muted);display:none}
.question-card.checked .question-explanation{display:block}
.progress-track{height:9px;background:#e6edf7;border-radius:999px;overflow:hidden;margin:12px 0 18px}
.progress-bar{height:100%;width:0;background:var(--brand);transition:width .2s ease}
.settings-button{
  border:1px solid var(--brand);border-radius:999px;background:var(--brand);color:#fff;
  font-weight:900;padding:10px 15px;white-space:nowrap;box-shadow:none;
}
.settings-drawer{
  position:fixed;right:0;top:0;height:100vh;width:min(410px,94vw);z-index:110;background:#fff;
  box-shadow:-15px 0 45px rgba(0,0,0,.22);padding:24px;transform:translateX(110%);
  transition:transform .2s ease;overflow:auto;
}
.settings-drawer.open{transform:translateX(0)}
.settings-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.settings-head h2{margin:0}
.icon-button{border:1px solid var(--line);background:#fff;border-radius:50%;width:44px;height:44px;font-weight:900}
.settings-backdrop{
  position:fixed;inset:0;background:rgba(10,24,48,.45);z-index:105;display:none;
}
.settings-backdrop.open{display:block}
.settings-section{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.settings-status{color:var(--muted);font-size:.9rem}
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.home-card{padding:22px;text-decoration:none;display:block}
.home-card h2{margin-top:0}
.home-card:hover{transform:translateY(-2px);border-color:#9eb8ea}
.qa-table{width:100%;border-collapse:collapse}
.qa-table th,.qa-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.qa-pass{font-weight:900;color:var(--good)}
.qa-warn{font-weight:900;color:var(--warn)}
body.settings-open{overflow:hidden}
@media(max-width:980px){
  .app-grid{grid-template-columns:1fr}
  .controls{position:static}
  .visual-options{grid-template-columns:1fr}
  .visual-option{min-height:0;display:grid;grid-template-columns:150px 1fr}
  .visual-option .visual{min-height:130px;border-bottom:0;border-right:1px solid var(--line)}
  .home-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  body{font-size:calc(16px * var(--font-scale))}
  .header-inner{padding:10px 12px;align-items:flex-start}
  .brand{font-size:1rem;margin-top:7px}
  .top-nav{gap:5px}
  .top-nav a{padding:8px 10px;font-size:.88rem}
  .page-wrap{padding:14px 10px 105px}
  .hero{padding:20px;border-radius:18px}
  .controls,.workspace{padding:17px;border-radius:18px}
  .button-grid{grid-template-columns:1fr 1fr}
  .turn{grid-template-columns:1fr;gap:3px}
  .speaker{color:var(--brand)}
  .gap-row{grid-template-columns:1fr}
  .visual-option{grid-template-columns:110px 1fr;min-height:145px}
  .visual-icon{font-size:3.1rem}
  .settings-button{padding:8px 10px}
  .settings-button .settings-label{display:none}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .header-inner{display:block}
  .top-nav{justify-content:flex-start;margin-top:9px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
  .top-nav a{white-space:nowrap}
  .button-grid{grid-template-columns:1fr}
  .btn.full{grid-column:auto}
  .visual-option{grid-template-columns:90px 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}

/* Methodology layer */
.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.home-actions .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.method-home-card{border:2px solid #9eb8ea;background:linear-gradient(145deg,#eef4ff,#ffffff)}
.northstar-callout{border:2px solid #9eb8ea;background:#eef4ff;border-radius:18px;padding:18px 20px;margin-bottom:20px}
.northstar-callout strong{font-size:1.13rem}
.northstar-callout p{margin:8px 0 0;color:var(--muted)}
.method-section{margin-top:22px}
.section-lead{color:var(--muted);margin-top:-8px}
.method-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.method-principles article,.pattern-card{border:1px solid var(--line);background:var(--wash);border-radius:18px;padding:17px}
.method-principles article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900}
.method-principles h3,.pattern-card h3{margin:10px 0 6px}
.method-principles p,.pattern-card p{margin:5px 0;color:var(--muted)}
.pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.pattern-part{display:inline-block;border-radius:999px;padding:4px 9px;background:#dce9ff;color:#214b9c;font-size:.78rem;font-weight:900}
.definition-done{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.definition-done code{display:block;border:1px solid var(--line);border-radius:12px;background:var(--wash);padding:12px;font-weight:900}
.method-analysis{display:grid;gap:12px}
.method-intro{margin:0;color:var(--muted)}
.method-row{display:grid;grid-template-columns:minmax(145px,190px) 1fr;gap:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.method-row:last-child{border-bottom:0}
.method-row strong{color:var(--brand-dark)}
.method-list{display:grid;gap:6px}
.method-list ul{margin:0;padding-left:22px}
.method-list li{margin:5px 0}
.listening-map,.question-skill-grid{display:grid;gap:9px}
.map-step,.question-skill-row{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);background:var(--wash);border-radius:14px;padding:11px 13px}
.map-step>div,.question-skill-row>div{display:grid;gap:2px}
.map-step span:not(.map-number),.question-skill-row span:not(.map-number){color:var(--muted);font-size:.9rem}
.map-number{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900}
.prediction-tag,.skill-tag{display:inline-block;margin-left:8px;border-radius:999px;background:#e8f0ff;color:#214b9c;padding:3px 8px;font-size:.76rem;font-weight:900;vertical-align:middle}
.skill-tag{margin:0 0 11px}
.goal-table td:first-child{font-weight:900;width:30%}

/* Dark appearance */
html[data-theme="dark"]{
  --ink:#edf4ff;
  --muted:#b2c0d4;
  --line:#3b4d67;
  --panel:#172238;
  --wash:#1e2c45;
  --brand:#5f91f2;
  --brand-dark:#b8d0ff;
  --good:#55c980;
  --good-bg:#173a29;
  --bad:#ff858d;
  --bad-bg:#442127;
  --warn:#ffd06f;
  --warn-bg:#403318;
  --shadow:0 14px 35px rgba(0,0,0,.28);
}
html[data-theme="dark"] body{background:linear-gradient(180deg,#0f1727 0,#111d31 100%)}
html[data-theme="dark"] .site-header{background:rgba(18,27,44,.97)}
html[data-theme="dark"] .top-nav a,
html[data-theme="dark"] .btn,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] .option,
html[data-theme="dark"] details.review-block,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .settings-drawer,
html[data-theme="dark"] .icon-button{background:#1a2941;color:var(--ink)}
html[data-theme="dark"] .visual-option .visual{background:linear-gradient(145deg,#223551,#1a2941)}
html[data-theme="dark"] .transcript-shell,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .gap-row{background:#142036}
html[data-theme="dark"] .mode-note{background:#1b3153}
html[data-theme="dark"] .tip{color:#ffe9b1;border-color:#775d22}
html[data-theme="dark"] .option:hover:not(:disabled){background:#243957}
html[data-theme="dark"] .option.selected{background:#203b67}
html[data-theme="dark"] .method-home-card{background:linear-gradient(145deg,#1b3153,#172238)}
html[data-theme="dark"] .northstar-callout{background:#1b3153}
html[data-theme="dark"] .pattern-part,
html[data-theme="dark"] .prediction-tag,
html[data-theme="dark"] .skill-tag{background:#263e68;color:#dbe8ff}
html[data-theme="dark"] .skip-link{background:#172238;color:var(--ink)}

@media(max-width:1100px){.method-principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .pattern-grid,.method-principles,.definition-done{grid-template-columns:1fr}
  .method-row{grid-template-columns:1fr;gap:3px}
  .goal-table td:first-child{width:auto}
  .prediction-tag{display:block;margin:6px 0 0;width:max-content}
}
@media(max-width:430px){
  .top-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;width:100%;overflow:visible}
  .top-nav a{padding:7px 2px;font-size:.72rem;text-align:center;min-width:0}
  .settings-button{position:fixed;right:14px;bottom:18px;z-index:95;width:50px;height:50px;padding:0;display:grid;place-items:center;border-radius:50%;box-shadow:0 8px 24px rgba(20,50,100,.28)}
}

/* Keep the floating mobile Settings control attached to the viewport rather than
   the sticky header's backdrop-filter containing block. */
@media(max-width:430px){
  .site-header{backdrop-filter:none}
}

/* Settings is part of the header, not a floating control, so it never covers
   transcript, questions or methodology content. */
@media(max-width:430px){
  .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
  .brand{grid-column:1;grid-row:1;margin-top:0}
  .settings-button{grid-column:2;grid-row:1;position:static;width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:50%;box-shadow:none}
  .top-nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;width:100%;overflow:visible;margin-top:8px}
}

/* Part 1 exam-style visuals: keep the image cue and A/B/C, hide written matching labels. */
body[data-task-mode="exam"] .visual-option .visual-caption,
body[data-task-mode="exam"] .visual-option .choice-text{display:none}
body[data-task-mode="exam"] .visual-option .choice-foot{justify-content:center}
body[data-task-mode="exam"] .visual-option .letter{margin-inline:auto}