@media (max-width: 1080px) {
  .control-button span { display: none; }
  .main-nav a { padding-inline: .55rem; font-size: .82rem; }
  .virtual-lab { grid-template-columns: .9fr 1.1fr; }
  .pc-visual { grid-template-columns: 1fr; }
  .performance-card { grid-template-columns: 1fr auto; align-items: center; }
  .score-ring { width: 125px; }
  .interactive-workspace { grid-template-columns: 1fr; }
  .component-inspector { min-height: 230px; }
  .theory-grid { grid-template-columns: repeat(2, 1fr); }
  .badge-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .header-inner { min-height: 68px; }
  .nav-toggle { display: inline-grid; place-items: center; margin-left: auto; }
  .main-nav { position: absolute; inset: 68px 1rem auto; display: none; padding: .75rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(7, 17, 29, .98); box-shadow: var(--shadow); }
  .main-nav.open { display: grid; }
  .main-nav a { padding: .85rem; }
  .header-actions { margin-left: 0; }
  .hero { grid-template-columns: 1fr; }
  .mission-panel { min-height: 240px; }
  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip article + article { border-left: 0; border-top: 1px solid var(--line); }
  .virtual-lab { grid-template-columns: 1fr; }
  .lab-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .pc-visual { min-height: 560px; grid-template-columns: 1fr 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .progress-hero { grid-template-columns: auto 1fr; }
  .reset-progress { grid-column: 1 / -1; justify-self: start; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .lesson-title-row { grid-template-columns: 1fr; }
  .lesson-xp { width: auto; aspect-ratio: auto; grid-template-columns: auto auto auto; justify-content: start; gap: .35rem; padding: .65rem .8rem; border-radius: 12px; }
  .lesson-xp small { max-width: none; }
  .lesson-stepper { top: 80px; overflow-x: auto; grid-template-columns: repeat(5, minmax(115px, 1fr)); }
  .lesson-status { grid-template-columns: 1fr; gap: .8rem; }
  .system-map, .cpu-explorer { min-height: 520px; }
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .brand-copy { display: none; }
  .xp-pill { min-width: 86px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .lesson-grid { grid-template-columns: 1fr; }
  .hero-main { padding: 2rem 1.25rem; }
  .hero h1 { font-size: clamp(2.2rem, 12vw, 3.5rem); }
  .section-heading { align-items: start; }
  .module-overview { align-items: start; padding: 1.2rem; }
  .module-overview > div:first-child { align-items: start; gap: .8rem; }
  .module-index { font-size: 3rem; }
  .module-score { min-width: auto; }
  .exercise-grid, .challenge-grid { grid-template-columns: 1fr; }
  .pc-visual { grid-template-columns: 1fr; }
  .performance-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .progress-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.2rem; }
  .progress-hero .progress-label { text-align: left; }
  .reset-progress { grid-column: auto; justify-self: center; }
  .badge-grid { grid-template-columns: 1fr; }
  .lesson-section { grid-template-columns: 1fr; padding: 1.1rem; }
  .section-index { padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
  .outcome-grid, .theory-grid { grid-template-columns: 1fr; }
  .system-map, .cpu-explorer { min-height: 620px; }
  .input-node { left: 6%; top: 11%; }.cpu-node { left: auto; right: 6%; top: 11%; transform: none; }.cpu-node:hover, .cpu-node.active { transform: translateY(-3px); }.output-node { left: 6%; right: auto; top: 29%; }
  .ram-node { left: auto; right: 6%; top: 29%; }.storage-node { left: 6%; right: auto; top: 47%; }.board-node { left: auto; right: 6%; bottom: auto; top: 47%; transform: none; }.board-node:hover, .board-node.active { transform: translateY(-3px); }.bus-node { left: 50%; top: auto; bottom: 8%; width: calc(100% - 2rem); min-width: 0; }
  .flow-arrow { display: none; }
  .cpu-die { width: 145px; }
  .spec-node { min-width: 116px; }
  .spec-1 { left: 3%; top: 5%; }.spec-2 { left: auto; right: 3%; top: 5%; }.spec-3 { left: 3%; right: auto; top: 26%; }.spec-4 { left: auto; right: 3%; top: 26%; }.spec-5 { left: 3%; right: auto; top: auto; bottom: 25%; }.spec-6 { left: auto; right: 3%; bottom: 25%; }.spec-7 { left: 50%; right: auto; bottom: 4%; transform: translateX(-50%); }.spec-7:hover, .spec-7.active { transform: translateX(-50%) translateY(-3px); }
  .match-board { grid-template-columns: 1fr; }
  .game-card > header { grid-template-columns: 1fr auto; }
  .game-number { grid-column: 1 / -1; }
  .quiz-options { grid-template-columns: 1fr; }
  .follow-up, .processor-pick, .evidence-pick { grid-template-columns: 1fr; }
  .quiz-submit-row { align-items: stretch; flex-direction: column; }
  .quiz-submit-row .button { width: 100%; }
  .completion-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .completion-stats { width: 100%; grid-template-columns: repeat(2, 1fr); text-align: left; }
  .completion-actions { justify-content: center; }
}

@media (max-width: 430px) {
  .header-inner { width: min(calc(100% - 1rem), 1380px); gap: .45rem; }
  .control-button { display: inline-grid; place-items: center; width: 42px; padding: 0; }
  main { width: min(calc(100% - 1rem), var(--content)); padding-top: 1rem; }
  .hero-actions .button { width: 100%; }
  .card-bottom { grid-template-columns: 1fr; }
  .card-button { width: 100%; }
  .site-footer { flex-direction: column; }
  .stats-grid, .metric-grid { gap: .5rem; }
  .stat-card { min-height: 80px; padding: .7rem; }
  .stat-icon { width: 36px; }
  .module-overview { display: grid; }
  .module-score { text-align: left; }
  .pc-visual { padding: 1rem; }
  .pc-case { max-width: 285px; }
  .lesson-stepper { top: 72px; }
  .lesson-stepper a { min-height: 48px; }
  .system-node { min-width: 108px; }
  .choice-grid { grid-template-columns: 1fr; }
  .match-target { grid-template-columns: 88px 1fr; }
  .sequence-list li { grid-template-columns: auto 1fr; }
  .sequence-actions { grid-column: 1 / -1; justify-self: end; }
  .completion-actions .button { width: 100%; }
  .lesson-progress-list > a { grid-template-columns: auto 1fr; }
  .lesson-progress-list > a > b { grid-column: 2; }
}

@media (min-width: 1200px) {
  .classroom-mode .lesson-section { grid-template-columns: 85px 1fr; }
  .classroom-mode .lesson-section, .classroom-mode .lesson-hero { padding: 2.4rem; }
}