:root {
  --red: #E31837;
  --ink: #1D252D;
  --paper: #F8F8F6;
  --muted: #626A70;
  --line: #D9DDDF;
  --white: #FFFFFF;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  line-height: 1.55;
}

html {
  font-size: 90%;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 18rem; }

a { color: inherit; }

.shell { width: min(70rem, calc(100% - 3rem)); margin: 0 auto; }

.site-header { background: var(--ink); color: var(--white); border-bottom: 0.35rem solid var(--red); }

.header-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.7rem; }

.header-inner { flex-wrap: wrap; padding: 0.8rem 0; }

.brand { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--white); text-decoration: none; }

.brand-mark { width: 3.5rem; height: 3.5rem; object-fit: contain; background: var(--white); border-radius: 0.15rem; }

.brand-name { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.08em; }

.brand-name span { color: var(--red); }

.header-kicker { color: #D9DDDF; font-size: 0.82rem; letter-spacing: 0.04em; }

.header-account { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; min-width: 0; max-width: 100%; }

.header-account form { margin: 0; }

.header-user { max-width: 12rem; color: #D9DDDF; font-size: 0.85rem; overflow-wrap: anywhere; }

.header-link { color: var(--white); font-size: 0.85rem; font-weight: 700; }

.link-button { border: 0; cursor: pointer; font: inherit; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; align-items: center; gap: 4rem; padding: 5.5rem 0 4.5rem; }

.hero-copy { max-width: 46rem; }

.hero-art { display: grid; place-items: center; }

.hero-art img { display: block; width: 100%; max-height: 14rem; object-fit: contain; mix-blend-mode: multiply; }

.eyebrow { margin: 0 0 0.8rem; color: var(--red); font-size: 0.77rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

h1, h2 { line-height: 1.08; letter-spacing: -0.03em; }

h1 { max-width: 48rem; margin: 0; font-size: clamp(2.5rem, 6vw, 5.1rem); }

h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); }

.lede { max-width: 43rem; margin: 1.4rem 0 0; font-size: clamp(1.15rem, 2vw, 1.55rem); }

.hero-note { max-width: 40rem; margin: 1.2rem 0 0; color: var(--muted); }

.course-overview { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); }

.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.5rem; }

.section-summary { max-width: 22rem; margin: 0; color: var(--muted); font-size: 0.95rem; }

.section-summary p { margin: 0; }

.progress-summary { color: var(--muted); font-size: 0.9rem; }

.progress-summary strong { color: var(--ink); }

.page-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.course-section { margin-top: 2rem; }

.course-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }

.course-section-heading h3 { margin: 0; font-size: 1.25rem; }

.course-section-heading span { color: var(--muted); font-size: 0.85rem; }

.page-card { display: flex; align-items: center; gap: 0.9rem; min-height: 9rem; padding: 1.25rem; background: var(--white); border: 1px solid var(--line); text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; }

.page-card:hover, .page-card:focus-visible { border-color: var(--red); transform: translateY(-0.15rem); }

.page-card.is-complete { border-left: 0.3rem solid #0B6B3A; }

.page-number { color: var(--red); font-size: 1.4rem; font-weight: 800; align-self: start; }

.page-card-copy { display: grid; gap: 0.35rem; flex: 1; }

.page-section { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.page-complete { color: #0B6B3A; font-size: 0.8rem; font-weight: 700; }

.arrow { color: var(--red); font-size: 1.4rem; }

.callout { display: flex; gap: 0.85rem; align-items: start; margin: 0 0 4rem; padding: 1.1rem 1.25rem; background: #F1E5E7; border-left: 0.3rem solid var(--red); }

.callout p { margin: 0; color: var(--ink); }

.callout-mark { display: grid; flex: 0 0 1.35rem; place-items: center; height: 1.35rem; margin-top: 0.15rem; color: var(--white); background: var(--red); border-radius: 50%; font-size: 0.8rem; font-weight: 800; }

code { padding: 0.1rem 0.3rem; color: var(--ink); background: #E9ECEC; border-radius: 0.2rem; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.88em; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 2rem 0 1.5rem; color: var(--muted); font-size: 0.9rem; }

.breadcrumbs a:hover { color: var(--red); }

.course-article { max-width: 50rem; padding: 1.5rem 0 3rem; }

.article-header { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

.article-header h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); }

.resources-menu { margin-top: 1.8rem; background: var(--white); border: 1px solid var(--line); }

.resources-menu summary { padding: 0.9rem 1.2rem; color: var(--ink); cursor: pointer; font-weight: 700; }

.resources-panel { padding: 0 1.2rem 1rem; }

.resource-intro { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.9rem; }

.resources-panel ul { margin: 0.45rem 0 0; padding-left: 1.2rem; }

.resources-panel li { margin-top: 0.8rem; }

.resource-item { display: grid; gap: 0.25rem; }

.resources-panel code { margin-left: 0.35rem; color: var(--muted); }

.resource-command { color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }

.resource-command code { color: var(--ink); }

.completion-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 1rem 1.2rem; background: #F1E5E7; border-left: 0.3rem solid var(--red); }

.completion-panel form { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; }

.completion-panel label { font-weight: 700; }

.completion-panel input { width: 1.1rem; height: 1.1rem; margin-right: 0.35rem; vertical-align: -0.15rem; accent-color: var(--red); }

.completion-hint { margin: 0; color: var(--muted); font-size: 0.82rem; }

.completion-panel .progress-summary { margin: 0; text-align: right; }

.markdown-body { padding-top: 2.2rem; font-size: 1.08rem; line-height: 1.75; overflow-wrap: anywhere; }

.markdown-body > :first-child { margin-top: 0; }

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin: 2.5rem 0 1rem; line-height: 1.25; }

.markdown-body h1 { font-size: 2.1rem; }

.markdown-body h2 { padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); font-size: 1.75rem; }

.markdown-body h3 { font-size: 1.35rem; }

.markdown-body h4 { font-size: 1.15rem; }

.markdown-body p, .markdown-body ul, .markdown-body ol { margin: 0 0 1.2rem; }

.markdown-body ul, .markdown-body ol { padding-left: 1.7rem; }

.markdown-body li { margin: 0.35rem 0; }

.markdown-body li > ul, .markdown-body li > ol { margin-bottom: 0.5rem; }

.markdown-body a { color: #B9122D; text-underline-offset: 0.15em; }

.markdown-body hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--line); }

.markdown-body img { max-width: 100%; height: auto; }

.markdown-body pre { max-width: 100%; overflow-x: auto; margin: 0; padding: 1.2rem 1.4rem; color: #E6EDF3; background: #0D1117; font-size: 0.95rem; line-height: 1.7; overflow-wrap: normal; tab-size: 4; }

.markdown-body pre code { padding: 0; color: inherit; background: transparent; font-size: inherit; line-height: inherit; white-space: pre; }

.markdown-body blockquote { margin: 1.5rem 0; padding: 1rem 1.2rem; color: var(--muted); background: var(--white); border-left: 0.25rem solid var(--red); }

.markdown-body blockquote > :last-child { margin-bottom: 0; }

.markdown-body table { display: block; max-width: 100%; width: max-content; margin: 1.5rem 0; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; }

.markdown-body th, .markdown-body td { padding: 0.65rem 0.9rem; border: 1px solid var(--line); text-align: left; }

.markdown-body th { background: #E9ECEC; }

.markdown-body tbody tr:nth-child(even) { background: var(--white); }

.code-block { min-width: 0; margin: 1.5rem 0; overflow: hidden; border: 1px solid #30363D; border-radius: 0.65rem; background: #0D1117; box-shadow: 0 3px 10px rgb(13 17 23 / 6%); }

.code-toolbar { display: flex; align-items: center; gap: 0.75rem; min-height: 2.8rem; padding: 0.45rem 0.85rem 0.45rem 1.2rem; color: #B1BAC4; background: #161B22; border-bottom: 1px solid #30363D; font-size: 0.8rem; line-height: 1.4; }

.code-language { flex-shrink: 0; color: #C9D1D9; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.82rem; font-weight: 600; }

.code-copy-status { flex: 1; min-width: 0; text-align: right; font-size: 0.75rem; }

.code-copy-button { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0.3rem 0.65rem; color: #C9D1D9; background: #21262D; border: 1px solid #484F58; border-radius: 0.35rem; cursor: pointer; font: inherit; font-weight: 600; }

.code-copy-button[hidden] { display: none; }

.code-copy-button:hover { color: var(--white); background: #30363D; border-color: #8B949E; }

.code-copy-button:focus-visible, .code-content:focus-visible { outline: 2px solid #79C0FF; outline-offset: -3px; }

.code-block[data-language="bash"] .code-content { color: #A5D6FF; }

.page-navigation { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 4rem; border-top: 1px solid var(--line); }

.admin-page { padding: 3.5rem 0 5rem; }

.admin-page > h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); }

.admin-intro { max-width: 44rem; margin: 1rem 0 2rem; color: var(--muted); font-size: 1.08rem; }

.admin-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 2rem 0; }

.admin-panel { padding: 1.5rem; background: var(--white); border: 1px solid var(--line); }

.admin-panel h2 { margin-bottom: 0.8rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }

.admin-help { margin: 0.4rem 0 1rem; color: var(--muted); font-size: 0.88rem; }

.admin-form { display: grid; gap: 0.55rem; }

.admin-form label { margin-top: 0.35rem; color: var(--ink); font-size: 0.88rem; font-weight: 700; }

.admin-form label span { color: var(--muted); font-weight: 400; }

.admin-form input:not([type="hidden"]), .admin-form select { width: 100%; min-width: 8rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line); background: var(--white); font: inherit; }

.admin-form button { justify-self: start; margin-top: 0.35rem; border: 0; cursor: pointer; font: inherit; }

.form-success { margin: 1.2rem 0; padding: 0.75rem 1rem; color: #0B6B3A; background: #E2F3EA; border-left: 0.25rem solid #0B6B3A; }

.admin-table-panel { margin-top: 1.2rem; }

.admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

.admin-section-heading .eyebrow { margin-bottom: 0.4rem; }

.admin-section-heading > span { color: var(--muted); font-size: 0.88rem; }

.table-scroll { overflow-x: auto; }

.admin-table { width: 100%; min-width: 62rem; border-collapse: collapse; font-size: 0.88rem; }

.admin-table th, .admin-table td { padding: 0.85rem 0.65rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }

.admin-table thead th { color: var(--muted); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }

.admin-table tbody th { min-width: 10rem; font-weight: 700; }

.admin-table tbody th strong, .admin-table tbody th small { display: block; }

.admin-table tbody th small { margin-top: 0.2rem; color: var(--muted); font-size: 0.78rem; font-weight: 400; }

.admin-table code { overflow-wrap: anywhere; }

.admin-actions { display: grid; gap: 0.6rem; min-width: 13rem; }

.admin-actions form { display: grid; grid-template-columns: minmax(8rem, 1fr) auto; gap: 0.35rem; align-items: center; }

.admin-actions form:last-child { display: block; }

.admin-actions input:not([type="hidden"]) { min-width: 0; padding: 0.45rem 0.5rem; border: 1px solid var(--line); font: inherit; }

.admin-actions .button { padding: 0.45rem 0.6rem; font-size: 0.8rem; }

.compact-form { min-width: 12rem; }

.compact-form input:not([type="hidden"]), .compact-form select { padding: 0.45rem 0.5rem; }

.state-active, .state-inactive { font-weight: 700; }

.state-active { color: #0B6B3A; }

.state-inactive, .muted { color: var(--muted); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.auth-card { max-width: 34rem; margin: 4rem auto 6rem; padding: 2rem; background: var(--white); border: 1px solid var(--line); }

.auth-card h1 { font-size: clamp(2.3rem, 5vw, 4rem); }

.auth-form { display: grid; gap: 0.6rem; margin-top: 1.5rem; }

.auth-form label { margin-top: 0.45rem; font-weight: 700; }

.auth-form input:not([type="hidden"]) { width: 100%; padding: 0.7rem; border: 1px solid var(--line); font: inherit; }

.auth-form button { justify-self: start; margin-top: 0.8rem; border: 0; cursor: pointer; font: inherit; }

.form-error { padding: 0.75rem 1rem; color: #8E1025; background: #F1E5E7; border-left: 0.25rem solid var(--red); }

.learn-page { max-width: 58rem; margin: 4rem auto 6rem; }

.learn-page h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); }

.learn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }

.learn-card { display: grid; overflow: hidden; background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; }

.learn-card:hover, .learn-card:focus-visible { border-color: var(--red); transform: translateY(-0.15rem); }

.learn-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.learn-logo { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 2rem; }

.learn-card .learn-logo img { width: 100%; max-width: 20rem; height: auto; aspect-ratio: auto; object-fit: contain; }

.learn-card-copy { display: grid; gap: 0.2rem; padding: 1.25rem; }

.learn-card-copy strong { font-size: 1.45rem; }

.learn-card-copy span { color: var(--muted); }

.dashboard { max-width: 52rem; margin: 4rem auto 6rem; }

.dashboard h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); }

.dashboard-intro { max-width: 38rem; margin: 1rem 0 2rem; color: var(--muted); font-size: 1.08rem; }

.connection-card { padding: 1.6rem; background: var(--white); border: 1px solid var(--line); }

.credentials-prompt { padding: 2rem; background: var(--white); border: 1px solid var(--line); border-left: 0.35rem solid var(--red); }

.credentials-prompt h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }

.credentials-prompt p:not(.eyebrow) { max-width: 34rem; color: var(--muted); }

.credentials-button { margin-top: 0.4rem; }

.connection-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }

.connection-heading h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }

.assignment-badge { padding: 0.35rem 0.65rem; color: #0B6B3A; background: #E2F3EA; font-size: 0.77rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }

.credential-list { margin: 0; }

.credential-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }

.credential-row dt { color: var(--muted); font-size: 0.87rem; font-weight: 700; }

.credential-row dd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; margin: 0; }

.credential-value { min-width: 0; overflow-wrap: anywhere; user-select: text; }

.copy-button { flex: 0 0 auto; padding: 0.45rem 0.7rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700; }

.copy-button:hover, .copy-button:focus-visible { color: var(--red); border-color: var(--red); }

.ssh-example { margin-top: 1.5rem; padding: 1rem; background: var(--ink); color: var(--white); }

.ssh-example .eyebrow { margin-bottom: 0.45rem; color: #FFB2BE; }

.ssh-example code { padding: 0; color: var(--white); background: transparent; overflow-wrap: anywhere; }

.ssh-example .copy-button { margin-left: 0.8rem; color: var(--white); background: transparent; border-color: #7B858C; }

.ssh-example .copy-button:hover, .ssh-example .copy-button:focus-visible { color: var(--white); border-color: var(--white); }

.copy-status { min-height: 1.55em; margin: 0.8rem 0 0; color: var(--muted); font-size: 0.85rem; }

.credentials-back { display: inline-block; margin-top: 1rem; color: var(--ink); }

.waiting-panel { padding: 1.8rem; background: var(--white); border: 1px solid var(--line); border-left: 0.35rem solid var(--red); }

.waiting-panel h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }

.waiting-panel p:last-child { max-width: 40rem; margin-bottom: 0; color: var(--muted); }

.credential-error { margin: 2rem 0 0; }

.credential-error h2 { margin: 0 0 0.4rem; font-size: 1.35rem; }

.credential-error p { color: var(--muted); }

.button { display: inline-block; padding: 0.65rem 1rem; color: var(--white); background: var(--red); text-decoration: none; font-weight: 700; }

.button:hover, .button:focus-visible { background: #B9122D; }

.button.secondary { color: var(--ink); background: var(--white); border: 1px solid var(--line); }

.site-footer { color: #D9DDDF; background: var(--ink); font-size: 0.8rem; }

.footer-inner { min-height: 4rem; }

@media (max-width: 48rem) {
  .shell { width: min(100% - 2rem, 40rem); }
  .header-kicker { display: none; }
  .hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 3.5rem 0 3rem; }
  .hero-art { justify-content: start; max-width: 12rem; }
  .page-list { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-summary { margin-top: 0.8rem; }
  .admin-panels { grid-template-columns: 1fr; }
  .learn-cards { grid-template-columns: 1fr; }
  .admin-page { padding-top: 2.5rem; }
}

@media (max-width: 30rem) {
  .header-inner, .footer-inner { align-items: start; flex-direction: column; justify-content: center; padding: 0.8rem 0; }
  .brand-mark { width: 2.8rem; height: 2.8rem; }
  .page-navigation { align-items: stretch; flex-direction: column; }
  .dashboard { margin-top: 2.5rem; }
  .connection-card { padding: 1.1rem; }
  .completion-panel { align-items: start; flex-direction: column; }
  .completion-panel .progress-summary { text-align: left; }
  .credential-row { grid-template-columns: 1fr; gap: 0.45rem; }
  .credential-row dd { align-items: start; flex-direction: column; gap: 0.65rem; }
  .ssh-example .copy-button { display: block; margin: 0.9rem 0 0; }
}