:root { color-scheme: light dark; font-family: Inter, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: #18211e; background: #fbfbfa; line-height: 1.7; }
a { color: #086851; text-underline-offset: 3px; }
a:hover { color: #064a3a; }
.site-header, .site-footer { max-width: 1060px; margin: auto; padding: 16px 24px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.site-header { border-bottom: 1px solid #e3e8e3; }
.brand { color: #17251e; font-weight: 800; font-size: 19px; text-decoration: none; }
.site-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-nav a { font-weight: 600; }
main { max-width: 900px; margin: 20px auto 50px; padding: 0 24px; }
article { background: white; border: 1px solid #e3e8e3; border-radius: 14px; padding: clamp(20px, 4vw, 48px); }
.eyebrow { color: #086851; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
h1 { font-size: clamp(29px, 4vw, 42px); line-height: 1.16; margin: 12px 0 16px; }
h2 { font-size: 23px; line-height: 1.25; margin: 38px 0 12px; }
h3 { font-size: 18px; line-height: 1.3; margin: 25px 0 8px; }
p, li { max-width: 70ch; }
li { margin: 8px 0; }
code { padding: 1px 5px; border-radius: 4px; background: #f0f5f1; color: #124d37; overflow-wrap: anywhere; }
.callout { margin: 24px 0; padding: 16px 20px; background: #eef8f2; border-left: 4px solid #12805b; border-radius: 6px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 16px; margin-top: 22px; }
.guide-card { border: 1px solid #dde7df; padding: 18px; border-radius: 10px; background: #fbfdfb; }
.guide-card h2, .guide-card h3 { margin: 0 0 8px; font-size: 18px; }
.guide-card p { margin: 0 0 10px; }
.start-here { margin: 20px 0 12px; padding: 18px 20px; border: 1px solid #cce2d4; border-radius: 10px; background: #eef8f2; }
.start-here h2 { margin: 4px 0 6px; font-size: 21px; }
.start-here p { margin: 0; }
.start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.start-actions a { font-weight: 700; }
.start-actions .start-primary { display: inline-block; padding: 8px 14px; border-radius: 7px; background: #086851; color: white; text-decoration: none; }
.start-actions .start-primary:hover, .start-actions .start-primary:focus-visible { background: #064a3a; color: white; }
.next-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.next-guides a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid #dde7df; border-radius: 9px; background: #fbfdfb; text-decoration: none; }
.next-guides a:hover, .next-guides a:focus-visible { border-color: #086851; }
.next-guides span { color: #536058; font-size: 14px; line-height: 1.4; }
#job-task-guides { margin-top: 22px; scroll-margin-top: 20px; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 16px 0 30px; }
.task-card { display: flex; flex-direction: column; gap: 6px; min-height: 145px; padding: 16px; border: 1px solid #dde7df; border-radius: 10px; background: #fbfdfb; color: #18211e; text-decoration: none; }
.task-card:hover, .task-card:focus-visible { border-color: #086851; box-shadow: 0 4px 14px #0b5e4330; outline-offset: 2px; }
.task-icon { font-size: 22px; line-height: 1; }
.task-card strong { font-size: 17px; line-height: 1.3; }
.task-card > span:not(.task-icon) { color: #536058; font-size: 14px; line-height: 1.45; }
.task-card small { margin-top: auto; color: #086851; font-size: 13px; font-weight: 700; }
.practice-preview { margin: 18px 0 24px; padding: 18px 20px; border: 1px solid #cce2d4; border-radius: 10px; background: #f3faf5; }
.practice-preview h3 { margin: 0 0 8px; }
.practice-preview p { margin: 8px 0; }
.practice-preview p:last-child { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; max-width: 640px; margin: 20px 0; font-variant-numeric: tabular-nums; }
th, td { border: 1px solid #dbe4dd; padding: 8px 12px; text-align: left; }
th { background: #edf4ef; }
.table-wrap { overflow-x: auto; }
.site-footer { border-top: 1px solid #e3e8e3; color: #536058; font-size: 13px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 560px) { .next-guides { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  body { background: #0b0f19; color: #e9eef0; }
  article, .guide-card, .task-card, .next-guides a { background: #111827; border-color: #2c3a43; }
  .start-here { background: #173429; border-color: #3a6950; }
  .next-guides span { color: #aab6b0; }
  .next-guides a:hover, .next-guides a:focus-visible { border-color: #8ce0b9; }
  .task-card { color: #e9eef0; }
  .task-card > span:not(.task-icon) { color: #aab6b0; }
  .task-card small { color: #8ce0b9; }
  .task-card:hover, .task-card:focus-visible { border-color: #8ce0b9; }
  .practice-preview { background: #173429; border-color: #3a6950; }
  .brand { color: #f0f5f2; }
  a, .eyebrow { color: #8ce0b9; }
  a:hover { color: #b2f3d1; }
  .site-header, .site-footer { border-color: #2c3a43; }
  code, .callout, th { color: #c9efdb; background: #173429; }
  td, th { border-color: #3a4b42; }
  .site-footer { color: #aab6b0; }
}