/* Visual system adapted to the Algorithm Atlas / DSA study interface. */
[data-theme="dark"] {
  color-scheme: dark;
  --primary: #19b3f3;
  --primary-hover: #53caff;
  --primary-light: #123b55;
  --success: #62d4b0;
  --success-bg: #193e3b;
  --success-border: #33876f;
  --danger: #ff9298;
  --danger-bg: #3b2735;
  --danger-border: #8d4b5e;
  --warning: #f3c365;
  --warning-bg: #41372c;
  --warning-border: #8e724a;
  --bg-main: #10151c;
  --bg-card: #141d2b;
  --bg-card-hover: #1c2b3d;
  --bg-surface: #192638;
  --border-color: #2d4052;
  --border-light: #28394b;
  --text-main: #f6f9fd;
  --text-muted: #b8cad9;
  --text-subtle: #92aabd;
  --button-text: #071b29;
  --dsa-header: #0c131e;
  --dsa-sidebar: #0d1622;
  --dsa-stage: #101d2b;
  --dsa-grid: #2074a021;
  --dsa-glow: #07578670;
  --dsa-raised: #17283c;
  --shadow-card: 0 14px 40px #050b1450;
}
[data-theme="light"] {
  color-scheme: light;
  --primary: #0877ab;
  --primary-hover: #095d85;
  --primary-light: #d8eef8;
  --bg-main: #f3f7fb;
  --bg-card: #ffffff;
  --bg-card-hover: #eef6fb;
  --bg-surface: #eaf2f8;
  --border-color: #cbdce8;
  --border-light: #dfebf2;
  --text-main: #122c40;
  --text-muted: #3d586a;
  --text-subtle: #5a7484;
  --button-text: #ffffff;
  --dsa-header: #ffffff;
  --dsa-sidebar: #eaf3f8;
  --dsa-stage: #f2f9fd;
  --dsa-grid: #2a8db01c;
  --dsa-glow: #b3e1f580;
  --dsa-raised: #f4f9fc;
  --shadow-card: 0 10px 35px #17405912;
}
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  background: var(--bg-main);
}
:where(button, a, input, select, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.site-header {
  background: var(--dsa-header);
  border-bottom: 1px solid var(--border-color);
}
.header-container {
  max-width: none;
  min-height: 72px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: .75rem clamp(1rem, 3vw, 3rem);
}
.brand { flex: 0 1 auto; gap: .85rem; }
.brand-icon {
  width: 38px;
  height: 38px;
  background: #10344b;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 10px;
  font: 750 .8rem ui-monospace, Consolas, monospace;
  letter-spacing: -.04em;
}
.brand-text h1 {
  font: 800 1.22rem/1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.045em;
}
.brand-text p { font-size: .72rem; }
.badge-cert { color: var(--primary); border-color: var(--border-color); background: var(--bg-surface); }
.header-actions { display: flex; flex: none; gap: .8rem; }
.portfolio-link { margin: 0; color: var(--text-muted); text-decoration: none; }
.portfolio-link:hover { color: var(--primary); }
.theme-toggle-btn {
  min-height: 36px;
  background: var(--bg-surface);
  border-color: var(--border-color);
  border-radius: 8px;
  padding: .42rem .75rem;
}
.app-shell {
  display: grid;
  grid-template-columns: minmax(245px, 276px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.site-sidebar {
  background: var(--dsa-sidebar);
  border-right: 1px solid var(--border-color);
}
.sidebar-inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 1.9rem .9rem 2rem;
}
.sidebar-heading { padding: 0 .7rem 1.45rem; }
.sidebar-eyebrow, .sidebar-group-label, .panel-eyebrow, .section-intro > span,
.workbench-top, .workbench-sequence > div > span {
  color: var(--primary);
  font: 700 .7rem/1.4 ui-monospace, Consolas, monospace;
  letter-spacing: .11em;
}
.sidebar-heading h2 {
  font: 750 1.35rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
  margin: .65rem 0 .5rem;
}
.sidebar-heading p, .sidebar-footnote {
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.55;
}
.main-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow: visible;
  width: auto;
  min-width: 0;
  margin: 0;
  gap: .15rem;
}
.sidebar-group-label {
  color: var(--text-subtle);
  padding: 1.05rem .7rem .4rem;
  font-size: .66rem;
}
.nav-btn {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  gap: .75rem;
  white-space: normal;
  padding: .68rem .75rem;
  border: 0;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 650;
}
.nav-btn:hover { background: var(--bg-card-hover); color: var(--text-main); }
.nav-btn.active {
  background: var(--primary-light);
  color: var(--primary);
  border: 0;
  box-shadow: inset 3px 0 var(--primary);
}
.nav-index {
  min-width: 1.45rem;
  color: var(--text-subtle);
  font: 650 .69rem ui-monospace, Consolas, monospace;
}
.nav-btn.active .nav-index { color: var(--primary); }
.sidebar-footnote { border-top: 1px solid var(--border-color); margin: 1.5rem .7rem 0; padding-top: .9rem; }
.main-content {
  max-width: 1780px;
  min-width: 0;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2.65rem);
  margin: 0 auto;
}
.page-title, .chapter-main-title, .chapter-section-block .section-title,
.cheat-sheet-box h4, .dash-card-title, .summary-item p, .card-prompt,
.exam-setup-title, .result-score-large {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 760;
  letter-spacing: -.045em;
}
.page-title { font-size: clamp(1.8rem, 3vw, 2.55rem); }
.page-subtitle { font-size: .92rem; }
.hero-banner, [data-theme="light"] .hero-banner {
  padding: clamp(1.4rem, 3vw, 2.6rem);
  background: radial-gradient(ellipse at 45% -45%, var(--dsa-glow), transparent 65%),
    linear-gradient(var(--dsa-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--dsa-grid) 1px, transparent 1px),
    var(--dsa-stage) !important;
  background-size: auto, 36px 36px, 36px 36px, auto !important;
  border: 1px solid var(--border-color) !important;
  border-top: 1px solid var(--primary) !important;
  border-radius: 15px;
  box-shadow: var(--shadow-card) !important;
}
[data-theme] .hero-content h2 {
  font: 800 clamp(2.15rem, 4.5vw, 3.55rem)/1.07 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.055em;
  max-width: 790px;
  color: var(--text-main) !important;
}
[data-theme] .hero-content p {
  color: var(--text-muted) !important;
  font-family: inherit !important;
  font-size: .96rem !important;
}
[data-theme] .hero-content .hero-eyebrow { color: var(--primary) !important; }
.hero-stats { gap: .7rem; border-top: 0; margin-top: 2rem; }
[data-theme] .hero-banner .stat-chip,
[data-theme] .hero-banner .stat-chip + .stat-chip {
  border: 1px solid var(--border-color) !important;
  border-radius: 9px;
  background: var(--dsa-raised) !important;
  padding: .85rem 1rem !important;
}
[data-theme] .hero-banner .stat-info .stat-value {
  font: 760 1.28rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-main) !important;
}
[data-theme] .hero-banner .stat-info .stat-label { color: var(--text-muted) !important; }
.btn { border-radius: 8px; font-size: .83rem; }
.btn-primary { background: var(--primary); color: var(--button-text); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--bg-surface); border-color: var(--border-color); }
.btn-secondary:hover { border-color: var(--primary); }
.badge-tag, .badge-klevel, .glossary-badge, .glossary-acronym { border-radius: 5px; }
.workbench-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, .7fr);
  gap: 1rem;
  align-items: stretch;
  margin: 1rem 0 2.2rem;
}
.workbench-main, .workbench-side {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.workbench-main { overflow: hidden; }
.workbench-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
}
.workbench-top > span:last-child { color: var(--primary); }
.workbench-body { padding: clamp(1.2rem, 2.6vw, 2rem); }
.workbench-body h3 {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.04em;
  margin-bottom: .7rem;
}
.workbench-body > p { color: var(--text-muted); max-width: 670px; line-height: 1.65; }
.workbench-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: 1.5rem 0;
}
.workbench-sequence > div {
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--dsa-raised);
  padding: .8rem;
}
.workbench-sequence > div > span { font-size: .61rem; }
.workbench-sequence strong { display: block; margin: .55rem 0; font-size: 1.05rem; }
.workbench-sequence p { color: var(--text-muted); font-size: .78rem; line-height: 1.45; }
.workbench-side { padding: 1.4rem; }
.workbench-side h3 { font-size: 1.12rem; line-height: 1.28; margin: .65rem 0 1.3rem; letter-spacing: -.025em; }
.workbench-side dl > div { border-top: 1px solid var(--border-color); padding: .65rem 0; }
.workbench-side dt { font-size: .82rem; font-weight: 700; }
.workbench-side dd, .workbench-side > p { color: var(--text-muted); font-size: .78rem; line-height: 1.5; margin: .2rem 0 0; }
.workbench-side > p { border-top: 1px solid var(--border-color); padding-top: .9rem; margin-top: .4rem; }
.section-intro { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.section-intro h2 { font-size: 1.45rem; letter-spacing: -.035em; }
.dash-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  border: 0;
  background: transparent;
}
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  box-shadow: var(--shadow-card);
}
.dash-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.dash-card-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--primary);
  border-radius: 7px;
  background: var(--primary-light);
  color: var(--primary);
}
.dash-card-title { font-size: 1.22rem; }
.dash-card-footer { border-color: var(--border-color); }
.exam-summary-box, .chapter-sidebar, .chapter-content-pane, .practice-controls,
.question-card, .glossary-card, .exam-header-bar, .exam-nav-panel, .card-face,
.exam-mode-card, .explanation-box { border-radius: 12px; }
.exam-summary-box, .chapter-content-pane, .question-card, .glossary-card, .card-face { box-shadow: var(--shadow-card); }
.chapter-nav-item.active { background: var(--primary-light); border-color: var(--border-color); }
.chapter-nav-item.active .chapter-nav-num { color: var(--primary); }
.chapter-main-title { font-size: clamp(2rem, 3.6vw, 3.15rem); }
.chapter-field-note {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--dsa-stage);
  margin: 0 0 2rem;
}
.chapter-field-head {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--primary);
  font: 700 .65rem ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
}
.chapter-field-body { padding: 1.2rem; }
.chapter-field-body h3 { font-size: 1.35rem; letter-spacing: -.035em; margin-bottom: .6rem; }
.chapter-field-body > p { color: var(--text-muted); line-height: 1.6; }
.chapter-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 1rem 0; }
.chapter-field-grid > div { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 8px; padding: .9rem; }
.chapter-field-grid span { color: var(--primary); font: 700 .67rem ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.chapter-field-grid p { color: var(--text-muted); font-size: .83rem; line-height: 1.55; margin-top: .4rem; }
.chapter-field-body .chapter-field-question { margin-bottom: 1rem; }
.chapter-field-question strong { color: var(--text-main); }
.chapter-section-block .section-title { font-size: 1.55rem; }
.markdown-body p { margin: .75rem 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.35rem; margin: .65rem 0 1rem; }
.markdown-body li { margin-left: 0; padding-left: .15rem; margin-bottom: .35rem; }
.markdown-body ul ul, .markdown-body ol ol, .markdown-body ul ol, .markdown-body ol ul { margin: .35rem 0 .5rem; }
.markdown-body pre { border: 1px solid var(--border-color); border-radius: 8px; }
.markdown-table-scroll { max-width: 100%; overflow-x: auto; margin: 1rem 0; }
.markdown-body table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .83rem; }
.markdown-body th, .markdown-body td { text-align: left; border: 1px solid var(--border-color); padding: .7rem .8rem; vertical-align: top; }
.markdown-body th { background: var(--bg-surface); }
.markdown-body td { background: var(--bg-card); }
.markdown-body .study-formula { background: var(--bg-surface); border-left: 3px solid var(--primary); padding: .9rem 1rem; font: 650 .9rem ui-monospace, Consolas, monospace; overflow-x: auto; }
.cheat-item { border-radius: 8px; background: var(--dsa-raised); }
.card-face { min-height: 330px; }
.card-chapter-tag { border-radius: 5px; }
.exam-mode-card.selected { background: var(--primary-light); }
.exam-grid-cell.answered { background: var(--primary); color: var(--button-text); }
.glossary-card:hover { border-color: var(--primary); }
.site-footer {
  background: var(--dsa-header);
  border-top-color: var(--border-color);
  padding: 1.3rem clamp(1rem, 3vw, 3rem);
}
[data-theme="dark"] .qa-lab {
  --lab-canvas: #10151c;
  --lab-paper: #141d2b;
  --lab-soft: #192638;
  --lab-line: #2d4052;
  --lab-ink: #f6f9fd;
  --lab-muted: #b8cad9;
  --lab-accent: #19b3f3;
  --lab-accent-ink: #071b29;
  --lab-alert: #ff9298;
}
[data-theme="light"] .qa-lab {
  --lab-canvas: #f3f7fb;
  --lab-paper: #ffffff;
  --lab-soft: #eaf2f8;
  --lab-line: #cbdce8;
  --lab-ink: #122c40;
  --lab-muted: #3d586a;
  --lab-accent: #0877ab;
  --lab-accent-ink: #ffffff;
  --lab-alert: #a34352;
}
.qa-lab { border: 1px solid var(--lab-line); border-radius: 14px; }
.qa-lab .lab-hero {
  background: radial-gradient(ellipse at 45% -65%, #07578690, transparent 70%),
    linear-gradient(#2282b316 1px,transparent 1px),
    linear-gradient(90deg,#2282b316 1px,transparent 1px),
    #101d2b;
  background-size: auto, 32px 32px, 32px 32px, auto;
  border-bottom: 2px solid var(--lab-accent);
}
.qa-lab .lab-hero h2, .qa-lab .lab-hero-aside > p,
.qa-lab .lab-brief h3, .qa-lab .lab-tool h3,
.qa-lab .lab-mini-tool h4, .qa-lab .lab-output-head strong,
.qa-lab .lab-metric-pair strong, .qa-lab .lab-risk-result span:first-child {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 760;
  letter-spacing: -.05em;
}
.qa-lab .lab-hero h2 em { color: #6bd3ff; font-style: normal; }
.qa-lab .lab-eyebrow, .qa-lab .lab-hero-link { color: #8edcff; }
.qa-lab .lab-brief a { color: var(--lab-accent); font-weight: 700; }
.qa-lab .lab-brief a:hover { color: var(--primary-hover); }
.qa-lab .lab-hero-link { border-bottom-color: #8edcff; }
.qa-lab .lab-mark { color: #8edcff; border-color: #3186b1; border-radius: 7px; }
.qa-lab .lab-hero-aside { border-left-color: #2d6a89; }
.qa-lab .lab-aside-index, .qa-lab .lab-aside-footer { color: #b5cfe0; }
.qa-lab .lab-aside-rule { background: #6bd3ff; }
.qa-lab .lab-code-pane { background: #111b2a; color: #ecf5fc; }
.qa-lab .lab-code-pane .lab-pane-label,
.qa-lab .lab-code-legend, .qa-lab .lab-code-pane .lab-footnote { color: #bed1dd; }
.qa-lab .lab-code .code-flow-line.executed { background: #154259; color: #c6edff; }
.qa-lab .lab-code-legend i { background: #19b3f3; }
.qa-lab .lab-action, .qa-lab .lab-quiet-action,
.qa-lab .lab-preset, .qa-lab .coverage-toggle-card { border-radius: 7px; }
.qa-lab .lab-brief, .qa-lab .lab-section-card,
.qa-lab .lab-workspace, .qa-lab .lab-duo { border-radius: 10px; overflow: hidden; }
@media (max-width: 1260px) {
  .workbench-intro { grid-template-columns: 1fr; }
  .workbench-side dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1rem; }
}
@media (max-width: 1050px) {
  .dash-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workbench-sequence { grid-template-columns: 1fr; }
}
@media (max-width: 1130px) {
  .chapters-layout, .exam-layout { grid-template-columns: 1fr; }
  .chapter-nav-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qa-lab .lab-workspace, .qa-lab .lab-workflow-grid { grid-template-columns: 1fr; }
  .qa-lab .lab-input-pane, .qa-lab .lab-code-pane { border-right: 0; border-bottom: 1px solid var(--lab-line); }
}
@media (max-width: 880px) {
  .app-shell { display: block; }
  .site-sidebar { border-right: 0; border-bottom: 1px solid var(--border-color); }
  .sidebar-inner { position: static; max-height: none; padding: .8rem 1rem .65rem; }
  .sidebar-heading { padding: 0 0 .7rem; }
  .sidebar-heading h2 { display: none; }
  .sidebar-heading p { margin-top: .2rem; font-size: .78rem; }
  .main-nav { flex-direction: row; gap: .45rem; overflow-x: auto; padding: .2rem 0 .45rem; }
  .sidebar-group-label, .sidebar-footnote { display: none; }
  .nav-btn { flex: 0 0 auto; width: auto; border: 1px solid var(--border-color); white-space: nowrap; padding: .55rem .75rem; }
  .nav-btn.active { box-shadow: inset 0 -2px var(--primary); border-color: var(--primary); }
  .main-content { padding: 1.3rem 1rem 2rem; }
}
@media (max-width: 650px) {
  .brand-text p { display: none; }
  .header-container { min-height: 62px; padding: .65rem 1rem; }
  .workbench-side dl { display: block; }
  .dash-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-theme] .hero-banner .stat-chip:nth-child(3) { border-left: 1px solid var(--border-color) !important; }
  .hero-banner { margin-bottom: 1rem; }
  .chapter-field-grid { grid-template-columns: 1fr; }
  .chapter-nav-list { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .brand-text h1 { font-size: 1rem; }
  .theme-toggle-btn { font-size: .67rem; }
}

/* Technical Test Analyst / applied testing interface */
.header-container { max-width: none; }
.site-sidebar .sidebar-inner { top: 72px; max-height: calc(100vh - 72px); }
.sidebar-footnote a, .workbench-side a, .hero-content a,
.inline-source-link, .official-exam-note a, .project-study a { color: var(--primary); }
.sidebar-footnote a, .workbench-side a, .hero-content a,
.inline-source-link, .official-exam-note a, .project-study a { text-decoration: underline; text-underline-offset: 3px; }
.sidebar-footnote a:hover, .workbench-side a:hover, .hero-content a:hover,
.inline-source-link:hover, .official-exam-note a:hover, .project-study a:hover { color: var(--primary-hover); }
.brand-text h1 { flex-wrap: wrap; }
.header-actions { align-items: center; }
.hero-content { position: relative; z-index: 1; }
.hero-eyebrow { display: block; margin-bottom: .8rem; font: 750 .7rem ui-monospace, Consolas, monospace; letter-spacing: .13em; }
.hero-content h2 em { color: var(--primary); font-style: normal; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.hero-stats { grid-template-columns: repeat(5,minmax(0,1fr)); }
.hero-stats .stat-chip { min-width: 0; }
.hero-stats .stat-value { white-space: nowrap; }
.dash-card-icon:empty, .tool-header .stat-icon:empty { display: none; }
.dash-card-header { margin-bottom: .5rem; }
.dash-card-footer { flex-wrap: wrap; gap: .75rem; }
.dash-card-footer .btn { margin-left: auto; }
.dash-grid { margin-bottom: 1.45rem; }
.official-exam-note {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary);
  background: var(--dsa-raised);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.chapter-field-note { margin-top: 1.25rem; }
.chapter-field-body .inline-source-link { display: inline-flex; margin-top: .35rem; font-weight: 700; font-size: .85rem; }
.learning-objectives-box h4, .pitfalls-box h4 { color: var(--text-main); }
.gtaa-layer-card { border-left-color: var(--primary) !important; }
.gtaa-chip { color: var(--text-main); }
.exam-mode-card.selected, .code-tab-btn.active { border-color: var(--primary); }
.code-tab-btn.active { color: var(--button-text); }
.tool-card { box-shadow: var(--shadow-card); border-radius: 12px; }
.repo-code-context { color: var(--text-muted); font-size: .87rem; line-height: 1.55; margin: .25rem 0 .8rem; }
.tool-card > .inline-source-link { display: inline-flex; margin-top: .7rem; font-size: .84rem; font-weight: 700; }
.code-display-block { background: #0f1927; color: #eaf7fc; }
.tools-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.tool-card, .calc-results-box { min-width: 0; }
.project-study {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 1px solid var(--primary);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.project-study-header {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: radial-gradient(ellipse at 30% -95%, var(--dsa-glow), transparent 70%),
    linear-gradient(var(--dsa-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--dsa-grid) 1px, transparent 1px), var(--dsa-stage);
  background-size: auto, 34px 34px, 34px 34px, auto;
  border-bottom: 1px solid var(--border-color);
}
.project-study-header h3 { max-width: 620px; font-size: clamp(1.5rem,2.5vw,2.05rem); line-height: 1.15; letter-spacing: -.045em; margin: .5rem 0; }
.project-study-header p { max-width: 750px; color: var(--text-muted); font-size: .91rem; line-height: 1.6; }
.project-study-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; padding: 1rem; }
.project-study-grid article { min-width: 0; border: 1px solid var(--border-color); background: var(--dsa-raised); border-radius: 9px; padding: 1rem; display: flex; flex-direction: column; }
.project-study-grid article > span, .project-study-code > div > span { color: var(--primary); font: 700 .65rem ui-monospace,Consolas,monospace; letter-spacing: .1em; }
.project-study-grid h4 { font-size: 1.06rem; margin: .55rem 0; letter-spacing: -.02em; }
.project-study-grid p { color: var(--text-muted); font-size: .81rem; line-height: 1.55; margin-bottom: 1rem; }
.project-study-grid a { font-size: .8rem; font-weight: 700; margin-top: auto; }
.project-study-code { margin: .2rem 1rem 1rem; border: 1px solid var(--border-color); border-radius: 9px; overflow: hidden; }
.project-study-code > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); }
.project-study-code > div > a { font-size: .76rem; white-space: nowrap; }
.project-study-code pre { overflow-x: auto; padding: 1rem; background: #0f1927; color: #eaf7fc; line-height: 1.65; font: .81rem/1.65 ui-monospace,Consolas,monospace; }
.project-study-questions { padding: 0 1rem 1rem; }
.project-study-questions > span { display: block; margin: .4rem 0 .8rem; }
.project-study-questions details { border: 1px solid var(--border-color); border-radius: 8px; margin: .5rem 0; background: var(--dsa-raised); }
.project-study-questions summary { cursor: pointer; padding: .75rem 1rem; font-weight: 650; font-size: .86rem; }
.project-study-questions details p { padding: 0 1rem .9rem; color: var(--text-muted); font-size: .84rem; line-height: 1.55; }
.project-study-caveat { border-top: 1px solid var(--border-color); padding: 1rem 1.25rem; color: var(--text-muted); font-size: .86rem; line-height: 1.6; }
.project-study-caveat strong { color: var(--text-main); }

@media (max-width: 1350px) {
  .hero-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .project-study-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1050px) {
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tools-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .site-sidebar .sidebar-inner { max-height: none; }
  .header-actions { gap: .5rem; }
}
@media (max-width: 650px) {
  .header-actions .portfolio-link:nth-child(2) { display: none; }
  .project-study-grid { grid-template-columns: 1fr; }
  .project-study-code > div { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 auto; }
  .workbench-top { flex-wrap: wrap; }
  .project-study-code pre { font-size: .72rem; }
}

.hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-theme] .hero-banner .stat-chip:nth-child(3) { border-left: 1px solid var(--border-color) !important; }
.chapter-title-text { font: 760 clamp(1.85rem,3vw,2.55rem)/1.14 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing: -.045em; }
.chapter-subtitle-text { color: var(--text-muted); line-height: 1.55; }
.chapter-field-body .field-qualifier { padding: .65rem .8rem; background: var(--dsa-raised); border-left: 2px solid var(--primary); font-size: .83rem; }
.exam-rules-note, .tool-note { margin: .8rem 0 .2rem; color: var(--text-muted); font-size: .83rem; line-height: 1.6; }
.exam-rules-note a, .project-study a { color: var(--primary); }
.project-study-code button { font-size: .72rem; }
.project-study-code pre { white-space: pre; }
.coverage-result { background: var(--dsa-raised); border: 1px solid var(--border-color); border-radius: 9px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.coverage-result strong { color: var(--text-main); font-size: 1rem; }
.coverage-result p { color: var(--text-muted); font-size: .85rem; line-height: 1.6; margin: .6rem 0; }
.coverage-result ul { padding-left: 1.2rem; margin: .7rem 0; }
.coverage-result li { color: var(--text-muted); font-size: .85rem; line-height: 1.6; margin: .4rem 0; }
.coverage-result li b { color: var(--primary); }
.coverage-result .coverage-footnote { margin-bottom: 0; border-top: 1px solid var(--border-color); padding-top: .75rem; }
.truth-table { width: 100%; }
.truth-table input[type="checkbox"] { accent-color: var(--primary); inline-size: 18px; block-size: 18px; cursor: pointer; }
.truth-table tr:has(input:checked) { background: var(--primary-light); }
.tool-card { overflow: hidden; }
[data-theme="light"] .tool-card .calc-metric-val { color: var(--primary) !important; }
@media (max-width: 750px) { .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .project-study-grid { grid-template-columns: 1fr; } .project-study-code > div { flex-wrap: wrap; } }
@media (max-width: 420px) { .hero-stats { grid-template-columns: 1fr; } }

/* Quality in DevOps: evidence-led workbench */
.hero-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
[data-theme] .hero-banner .stat-chip:nth-child(3) { border-left: 1px solid var(--border-color) !important; }
.chapter-title-text { font: 760 clamp(1.85rem,3vw,2.55rem)/1.14 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing: -.045em; }
.chapter-subtitle-text { color: var(--text-muted); line-height: 1.55; }
.chapter-field-body .field-qualifier { padding: .65rem .8rem; background: var(--dsa-raised); border-left: 2px solid var(--primary); font-size: .83rem; }
.exam-rules-note,.tool-note { color: var(--text-muted); font-size: .83rem; line-height: 1.62; margin: .7rem 0 1rem; }
.tool-note a,.exam-rules-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.tool-card { min-width: 0; }
.tool-header .stat-icon { width: 35px; height: 35px; flex: none; font: 700 .8rem ui-monospace,Consolas,monospace; border: 1px solid var(--primary); border-radius: 7px; display:grid;place-items:center; background:var(--primary-light);color:var(--primary); }
.tool-header h3 { font: 750 1.3rem/1.22 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.035em; }
.tool-header p { color: var(--text-muted);font-size:.85rem;line-height:1.5;margin-top:.25rem; }
.tool-fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.1rem 0; }
.tool-fields label { display:flex;flex-direction:column;gap:.38rem;color:var(--text-muted);font-size:.82rem;font-weight:650; }
.tool-fields .calc-input { margin-top:auto; }
.metric-list .calc-metric-row { align-items:flex-start; gap:.8rem; }
.metric-list strong,.calc-results-box strong { max-width: 58%;color:var(--primary);text-align:right;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere; }
.gate-planner { margin-top: .75rem; }
.pipeline-stage.pending { background:var(--dsa-raised);border-color:var(--border-color); }
.pipeline-stage.failed { border-color:var(--danger); }
.pipeline-stage.passed { border-color:var(--success); }
.pipeline-stage-status { color:var(--text-muted); }
.pipeline-stage.passed .pipeline-stage-status { color:var(--success); }
.pipeline-stage.failed .pipeline-stage-status { color:var(--danger); }
.project-study-questions summary { color:var(--text-main); }
.project-study-questions details[open] { border-color:var(--primary); }
.project-study-code code { color:#eaf7fc; }
.project-study-code > div { align-items:center; }
@media (max-width: 760px) { .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .tool-fields { grid-template-columns:1fr; } }
@media (max-width: 460px) { .hero-stats { grid-template-columns:1fr; } .calc-metric-row { flex-wrap:wrap; } .metric-list strong,.calc-results-box strong { max-width:100%;text-align:left; } }