:root { color-scheme: light; }
body { background: #f6f8fb; color: #243247; }
.app-container { max-width: 1080px; }
.site-header { padding: 1.1rem 0; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: #243247; font-size: 1.2rem; font-weight: 700; }
.brand:hover { color: #0d6efd; }
.brand-mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; background: #0d6efd; color: white; border-radius: .65rem; font-size: 1.2rem; }
.eyebrow { color: #58677b; text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; font-weight: 700; margin-bottom: .65rem; }
.intro { max-width: 680px; }
.intro h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 650; letter-spacing: -.035em; }
.intro .lead { color: #657287; font-size: 1.05rem; line-height: 1.7; }
.card { border-color: #e1e7ef; border-radius: .85rem; box-shadow: 0 3px 12px rgb(23 43 77 / 3%); }
.card-body { padding: 1.6rem; }
.card h2, .card h3 { font-weight: 650; }
.form-label { display: block; width: 100%; font-weight: 500; }
.form-control, .form-select { margin-top: .4rem; min-height: 2.7rem; border-color: #cbd5e1; border-radius: .45rem; }
.form-control:focus, .form-select:focus { border-color: #86b7fe; }
.btn { border-radius: .45rem; font-weight: 500; }
.btn:not(.btn-sm) { padding: .65rem 1rem; }
.code-input { font-family: ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; }
.lesson-summary { background: #edf4ff; border-color: #d9e7fc; box-shadow: none; }
.lesson-meta { color: #596b83; font-size: .9rem; }
.lesson-step h3 { font-size: 1rem; }
.lesson-step p:last-child { margin-bottom: 0; }
.table { font-size: .875rem; margin-bottom: 0; }
.table thead th { color: #66758a; font-size: .75rem; font-weight: 600; background: #f8fafc; border-bottom-width: 1px; }
.table td, .table th { padding: .9rem; vertical-align: middle; }
.table td:last-child { min-width: 125px; }
.table-responsive { border: 1px solid #e1e7ef; border-radius: .6rem; }
.student-list .list-group-item { background: transparent; border-color: #e8edf3; padding: .75rem 0; }
.exercise-card { border: 1px solid #dce4ef; border-radius: .7rem; padding: 1.25rem; margin-bottom: 1.5rem; min-width: 0; background: white; }
.exercise-card legend { float: none; width: auto; padding: 0 .4rem; font-size: .85rem; font-weight: 700; color: #526782; }
.exercise-card label { font-size: 1rem; }
.exercise-card input { max-width: 280px; }
.exercise-feedback:empty, #message:empty { display: none; }
.exercise-feedback { margin: 1rem 0 0; }
.hint-panel { background: #f3f6fc; border-left: 3px solid #a3bff0; padding: 1rem; margin-top: 1rem; border-radius: .35rem; }
.hint-panel h4 { font-size: .9rem; }
.hint-panel li + li { margin-top: .6rem; }
.hint-panel ol { margin-bottom: 0; padding-left: 1.25rem; }
.result-list { padding-left: 1.25rem; }
.result-list li { padding: .75rem 0; }
.result-list p { margin-bottom: .4rem; }
.lesson-footer { line-height: 1.6; }
.skip-link { position: absolute; left: 1rem; top: .25rem; background: white; z-index: 10; }
@media (max-width: 575.98px) {
  .card-body { padding: 1.2rem; }
  .site-header .badge { font-size: .65rem; }
  .exercise-actions { display: grid; gap: .5rem; }
  .exercise-card input { max-width: none; }
}

/* Lessons fill the viewport; long slides scroll independently of navigation. */
.lesson-mode { overflow: hidden; }
.lesson-mode .site-header, .lesson-mode .site-footer { display: none; }
.lesson-mode > .app-container { max-width: none; padding: 0 !important; }
.lesson-mode #app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 1.25rem clamp(1rem, 5vw, 5rem); }
.lesson-mode #back { align-self: flex-start; flex-shrink: 0; margin-bottom: .5rem !important; }
.lesson-mode #message:not(:empty) { position: fixed; top: .75rem; right: 1rem; z-index: 20; max-width: min(650px, 75vw); box-shadow: 0 3px 15px #d1d9e3; }
.lesson-slide { flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 1080px; margin: 0 auto !important; padding: clamp(1rem, 3vh, 3rem) clamp(.25rem, 3vw, 2.5rem); border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: slide-enter .2s ease-out; }
.lesson-slide[hidden], #slide-next[hidden] { display: none !important; }
.lesson-slide.intro { display: flex; flex-direction: column; justify-content: center; }
.lesson-slide h1 { font-size: clamp(2rem, 5vw, 4rem); }
.lesson-slide h2, .lesson-slide legend { font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 650; color: #243247; }
.lesson-slide p, .lesson-slide label { font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.65; }
.lesson-slide .small, .lesson-slide details { font-size: .9rem; }
.lesson-slide .card-body { padding: 0; }
.lesson-slide input { font-size: 1.4rem; max-width: 420px; }
.lesson-slide legend { padding: 0; margin-bottom: 1rem; }
.lesson-slide details { margin-top: 2rem; color: #657287; }
.lesson-slide details p { font-size: .9rem; }
.lesson-mode #answers, .lesson-mode #answers > div { display: contents; }
.slide-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #dce4ef; padding-top: 1rem; margin-top: 1rem; flex-shrink: 0; }
.slide-progress { display: flex; flex-direction: column; text-align: center; gap: .2rem; }
#slide-count { font-weight: 600; }
@keyframes slide-enter { from { opacity: .5; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .lesson-slide { animation: none; } }
@media (max-width: 575.98px) {
  .lesson-mode #app { padding: .75rem; }
  .slide-toolbar { flex-wrap: wrap; gap: .6rem; }
  .slide-progress { order: -1; width: 100%; font-size: .85rem; }
  .slide-toolbar .btn { padding: .6rem .8rem; }
  .lesson-slide { padding: 1rem .3rem; }
}