:root{
  --bg:#eef1f0;
  --surface:#ffffff;
  --ink:#161f1e;
  --muted:#5a6b68;
  --border:#d7dedc;
  --accent:#1f6e63;
  --accent-ink:#ffffff;
  --accent-soft:#dcece7;
  --warm:#c4791f;
  --warm-soft:#f5e6d0;
  --code-bg:#f2f0e8;
  --shadow:0 1px 2px rgba(20,30,28,.06),0 4px 14px rgba(20,30,28,.05);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101513;
    --surface:#171e1c;
    --ink:#e7ece9;
    --muted:#8fa19c;
    --border:#293330;
    --accent:#57bfa9;
    --accent-ink:#08110f;
    --accent-soft:#1b2c28;
    --warm:#e2a34f;
    --warm-soft:#2c2418;
    --code-bg:#1c2320;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#101513;
  --surface:#171e1c;
  --ink:#e7ece9;
  --muted:#8fa19c;
  --border:#293330;
  --accent:#57bfa9;
  --accent-ink:#08110f;
  --accent-soft:#1b2c28;
  --warm:#e2a34f;
  --warm-soft:#2c2418;
  --code-bg:#1c2320;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,Segoe UI,sans-serif;
  line-height:1.55;
}
.wrap{max-width:800px;margin:0 auto;padding:36px 20px 80px;}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;text-wrap:balance;margin:0 0 6px;}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
header.top{margin-bottom:22px;}
header.top h1{font-size:34px;font-weight:600;}
header.top p{color:var(--muted);margin:6px 0 0;max-width:60ch;font-size:15px;}

/* nav */
nav.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:22px 0 26px;
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
}
nav.tabs button{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
nav.tabs button:hover{border-color:var(--accent);color:var(--ink);}
nav.tabs button.active{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
  font-weight:600;
}

section.panel{display:none;}
section.panel.active{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}

/* progress */
.progress-row{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.progress-track{flex:1;height:6px;background:var(--border);border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;background:var(--accent);width:0%;transition:width .3s ease;}
.progress-label{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);white-space:nowrap;}

/* roadmap */
.phase{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.phase-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.phase-head h3{font-size:18px;}
.phase-when{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--warm);background:var(--warm-soft);padding:3px 9px;border-radius:999px;white-space:nowrap;}
.phase ul{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:14.5px;}
.phase li{margin-bottom:4px;}
.phase li b{color:var(--ink);font-weight:600;}

/* brief */
.brief-card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.brief-card h3{font-size:16px;margin-bottom:8px;}
.brief-card p, .brief-card li{color:var(--ink);font-size:14.5px;}
.brief-card ul{margin:8px 0 0;padding-left:20px;}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.tag{font-family:"IBM Plex Mono",monospace;font-size:11px;background:var(--accent-soft);color:var(--accent);padding:3px 9px;border-radius:999px;}

/* question cards */
.qcard{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  margin-bottom:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.qcard-top{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;}
.qcard input[type=checkbox]{
  margin-top:4px;
  width:17px;height:17px;
  accent-color:var(--accent);
  flex-shrink:0;
  cursor:pointer;
}
.qcard-body{flex:1;}
.qtag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.qtext{font-weight:600;margin-top:3px;font-size:15.5px;}
details{border-top:1px solid var(--border);}
details summary{
  cursor:pointer;
  list-style:none;
  padding:10px 18px;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:var(--accent);
  user-select:none;
}
details summary::-webkit-details-marker{display:none;}
details summary::before{content:"▸ reveal answer";}
details[open] summary::before{content:"▾ hide answer";}
.answer{padding:0 18px 16px;color:var(--muted);font-size:14.5px;}
.answer strong{color:var(--ink);}

.daynote{color:var(--muted);font-size:13.5px;margin-bottom:16px;}
.daynote b{color:var(--ink);}

/* quiz */
.quizcard{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
}
.quizcard .qtext{margin-bottom:10px;}
.opt-list{display:flex;flex-direction:column;gap:7px;}
.opt{
  text-align:left;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  padding:9px 12px;
  border-radius:9px;
  font-family:"IBM Plex Sans",sans-serif;
  font-size:14px;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.opt:hover{border-color:var(--accent);}
.opt.correct{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:600;}
.opt.wrong{background:var(--warm-soft);border-color:var(--warm);color:var(--ink);}
.opt[disabled]{cursor:default;}
.quiz-explain{margin-top:10px;font-size:13.5px;color:var(--muted);padding-top:10px;border-top:1px solid var(--border);display:none;}
.quiz-explain.show{display:block;}
.quiz-score{
  position:sticky;top:0;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;color:var(--muted);
  margin-bottom:14px;
}

footer.note{margin-top:36px;padding-top:18px;border-top:1px solid var(--border);color:var(--muted);font-size:12.5px;font-family:"IBM Plex Mono",monospace;}

/* --- added for the standalone Interview Prep Lab site --- */
.container-note{color:var(--muted);font-size:13px;}
.spotlight{
  border:1px solid var(--accent);
  background:var(--accent-soft);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:22px;
  box-shadow:var(--shadow);
}
.spotlight .eyebrow2{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:6px;
}
.spotlight h3{font-size:17px;margin:4px 0 8px;}
.spotlight .source-pill{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  background:var(--surface);color:var(--muted);padding:2px 8px;border-radius:999px;
  border:1px solid var(--border);margin-bottom:10px;
}
.spotlight-refresh{
  background:none;border:1px solid var(--border);color:var(--muted);
  font-family:"IBM Plex Mono",monospace;font-size:11px;padding:5px 10px;
  border-radius:999px;cursor:pointer;margin-left:8px;
}
.spotlight-refresh:hover{border-color:var(--accent);color:var(--accent);}
.status-pill{
  font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;padding:2px 8px;border-radius:999px;margin-left:8px;
  background:var(--warm-soft);color:var(--warm);
}
.status-pill.active{background:var(--accent-soft);color:var(--accent);}
.resource-card{
  border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);
}
.resource-card .rtitle{font-weight:600;font-size:15px;}
.resource-card .rmeta{color:var(--muted);font-size:12.5px;margin:2px 0 8px;}
.resource-card .rnote{font-size:14px;color:var(--ink);}
.resource-card a{color:var(--accent);text-decoration:none;}
.resource-card a:hover{text-decoration:underline;}
.home-grid{display:grid;gap:14px;margin-top:18px;}
.home-card{
  border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s;
}
.home-card:hover{border-color:var(--accent);}
.home-card h3{font-size:16px;margin-bottom:4px;}
.home-card p{color:var(--muted);font-size:13.5px;margin:0;}
.empty-state{color:var(--muted);font-size:14px;padding:20px 0;}