@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,wght@0,400;0,500;0,600;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #F8F7F3;
  --surface: #FFFFFF;
  --surface2: #F2F1ED;
  --border: #E3E1D9;
  --text: #18170F;
  --muted: #6A6860;
  --accent: #C0421C;
  --accent-bg: #FAECE7;
  --accent-text: #712B13;
  --why-bg: #EAF3DE;  --why-border: #97C459; --why-text: #27500A;
  --int-bg: #FAEEDA;  --int-border: #EF9F27; --int-text: #633806;
  --exp-bg: #E6F1FB;  --exp-border: #85B7EB; --exp-text: #0C447C;
  --code-bg: #F4F3EF;
  --tag-bg: #FAECE7;  --tag-text: #712B13;
  --must-bg: #FEE2E2; --must-text: #7F1D1D;
  --high-bg: #FEF3C7; --high-text: #78350F;
  --good-bg: #D1FAE5; --good-text: #064E3B;
}

body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.7; }

/* ── Sidebar ── */
.sidebar { position: fixed; top: 0; left: 0; width: 224px; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 28px 0 40px; z-index: 10; }
.sidebar-head { padding: 0 20px 20px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sidebar-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.sidebar-title { font-size: 13px; font-weight: 600; }
.nav-item { display: block; padding: 7px 20px; font-size: 13px; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; transition: all .15s; }
.nav-item:hover { color: var(--text); background: var(--surface2); }
.nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-bg); font-weight: 500; }
.nav-num { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); margin-right: 6px; }

/* ── Main ── */
.main { margin-left: 224px; padding: 52px 60px 100px; max-width: 1000px; }

/* ── Page header ── */
.page-header { margin-bottom: 56px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.page-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.page-title { font-size: 32px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 10px; }
.page-subtitle { font-size: 15px; color: var(--muted); max-width: 560px; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pill { font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: var(--tag-bg); color: var(--tag-text); padding: 3px 10px; border-radius: 20px; }

/* ── Topic ── */
.topic { margin-bottom: 72px; scroll-margin-top: 32px; }
.topic-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.topic-num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; background: var(--tag-bg); color: var(--tag-text); padding: 4px 10px; border-radius: 6px; margin-top: 4px; white-space: nowrap; }
.topic-title { font-size: 22px; font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
.topic-subtitle { font-size: 14px; color: var(--muted); margin-top: 4px; }
.priority-tag { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 4px; margin-top: 6px; }
.must { background: var(--must-bg); color: var(--must-text); }
.high { background: var(--high-bg); color: var(--high-text); }
.good { background: var(--good-bg); color: var(--good-text); }

/* ── Section cards ── */
.section-card { border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.section-label { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.section-body { padding: 18px 22px 20px; font-size: 14.5px; line-height: 1.72; }
.section-body p + p { margin-top: 10px; }

.card-why .section-label { background: var(--why-bg); color: var(--why-text); border-bottom: 1px solid var(--why-border); }
.card-why .section-body  { background: var(--why-bg); color: var(--why-text); }
.card-int .section-label { background: var(--int-bg);  color: var(--int-text);  border-bottom: 1px solid var(--int-border); }
.card-int .section-body  { background: var(--int-bg);  color: var(--int-text); }
.card-exp .section-label { background: var(--exp-bg);  color: var(--exp-text);  border-bottom: 1px solid var(--exp-border); }
.card-exp .section-body  { background: var(--exp-bg);  color: var(--exp-text); }

/* ── Concept blocks ── */
.concept { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-top: 14px; overflow: hidden; }
.concept-title { font-size: 13px; font-weight: 600; padding: 10px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', monospace; color: var(--text); }
.concept-body { padding: 14px 16px; font-size: 14px; line-height: 1.7; color: var(--text); }
.concept-body p + p { margin-top: 8px; }

/* ── Math block ── */
.math-block { font-family: 'IBM Plex Mono', monospace; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 14px 18px; border-radius: 0 6px 6px 0; margin: 12px 0; color: var(--text); line-height: 1.75; white-space: pre; overflow-x: auto; }

/* ── Bullets ── */
ul.pts { list-style: none; margin-top: 10px; }
ul.pts li { padding-left: 16px; position: relative; font-size: 14px; margin-bottom: 6px; line-height: 1.6; }
ul.pts li::before { content: '→'; position: absolute; left: 0; color: var(--muted); font-size: 12px; top: 2px; }

/* ── Two col ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.mini-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.mini-card-title { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; color: var(--accent); margin-bottom: 6px; }
.mini-card-body { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── Four col grid ── */
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }

/* ── Interview box ── */
.interview-box { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 0 0 8px 8px; margin-top: 16px; padding: 16px 20px; }
.interview-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.interview-q { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.interview-a { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; background: var(--code-bg); padding: 1px 6px; border-radius: 4px; color: var(--accent); }

.topic-divider { height: 1px; background: var(--border); margin-bottom: 72px; }
.footer { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); padding-top: 16px; }

/* ── Highlight callout ── */
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 12px 16px; margin-top: 12px; font-size: 13.5px; color: var(--text); line-height: 1.65; }
.callout strong { color: var(--accent); }

/* ── Mobile nav ── */
.mobile-topbar { display: none; }
.mobile-backdrop { display: none; }

@media (max-width: 760px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 32px 20px 80px; }
  .page-title { font-size: 24px; }
  .two-col, .four-col { grid-template-columns: 1fr; }
  .math-block { font-size: 11.5px; }

  .mobile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 20px; z-index: 30; }
  .mobile-topbar-title { font-size: 13px; font-weight: 600; }
  .mobile-menu-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; }
  .mobile-menu-btn:hover { border-color: var(--accent); color: var(--accent); }

  .sidebar.mobile-open { display: block; position: fixed; top: 0; left: 0; height: 100vh; width: 82%; max-width: 300px; z-index: 40; box-shadow: 2px 0 24px rgba(0,0,0,.18); }
  .mobile-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(24,23,15,.35); z-index: 35; }
}