.cyber-home { max-width: 1100px; margin-inline: auto; }
.cyber-back { display: inline-block; margin-bottom: .8rem; color: var(--good); font-size: .88rem; text-decoration: underline; text-underline-offset: .18em; }
.cyber-home-title { margin-bottom: clamp(1.45rem, 3vw, 2.5rem); }
.cyber-home-title h1 { max-width: 22ch; margin: 0 0 .7rem; }
.cyber-home-title p { max-width: 67ch; margin: 0; line-height: 1.65; color: var(--muted); }
.cyber-home-start, .cyber-home-curriculum { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(15rem, 1fr); gap: 1.8rem 2.5rem; }
.cyber-home-curriculum { margin-top: 2.5rem; }
.cyber-home h2 { margin: 0 0 .6rem; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.25; }
.cyber-next { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 1.15rem; padding: 1.25rem clamp(1rem, 2.4vw, 1.5rem); border: 1px solid var(--line); border-inline-start: 3px solid var(--good); border-radius: 6px; background: var(--panel); }
.cyber-next p, .cyber-home-curriculum section > p { margin: 0 0 .75rem; color: var(--muted); font-size: .9rem; }
.cyber-next img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; }
.cyber-next progress { display: block; width: min(100%, 16rem); height: 5px; margin-bottom: 1.1rem; }
.cyber-next h2 { margin-bottom: 1.1rem; }
.cyber-next a.primary, .cyber-practice-action a.primary, .cyber-resume-quiz { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .85rem; border-radius: 6px; line-height: 1.35; }
.cyber-practice-action { display: grid; justify-items: start; gap: .35rem; padding-block: .4rem .65rem; }
.cyber-practice-action a { min-inline-size: 9rem; justify-content: center; }
.cyber-practice-action p { margin: 0; }
.cyber-practice-action p, .cyber-distributions dd { color: var(--muted); font-size: .88rem; }
.cyber-syllabus details { border-top: 1px solid var(--line); }
.cyber-syllabus details:last-child { border-bottom: 1px solid var(--line); }
.cyber-syllabus summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 50px; padding: .55rem .35rem; cursor: pointer; list-style: none; font-weight: 650; }
.cyber-syllabus summary::-webkit-details-marker { display: none; }
.cyber-syllabus summary span::before { display: inline-block; width: 1.25rem; color: var(--good); content: "+"; }
.cyber-syllabus details[open] summary span::before { content: "−"; }
.cyber-syllabus summary small { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.cyber-syllabus ol { margin: 0 0 .55rem; padding: 0; list-style: none; }
.cyber-syllabus li a { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: baseline; gap: .5rem; padding: .75rem .5rem; border-radius: 5px; font-size: .92rem; }
.cyber-syllabus li a:hover { background: var(--panel2); }
.cyber-lesson-number { color: var(--muted); font-variant-numeric: tabular-nums; }
.cyber-lesson-status { color: var(--good); }
.cyber-distributions dl { margin: 0; }
.cyber-distributions dl > div { display: grid; gap: .15rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.cyber-distributions a { color: var(--good); text-decoration: underline; text-underline-offset: .18em; }
.cyber-distributions dd { margin: 0; }
.cyber-home :is(a, summary):focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }

@media (max-width: 740px) {
  .cyber-home-start, .cyber-home-curriculum { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cyber-home-curriculum { margin-top: 1.85rem; }
}

@media (max-width: 475px), (min-width: 741px) and (max-width: 1040px) {
  .cyber-next { grid-template-columns: minmax(0, 1fr); }
  .cyber-next img { max-width: 21rem; }
}

@media (max-width: 360px) {
  .cyber-syllabus li a { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .cyber-syllabus li a small { grid-column: 2; }
}