:root {
  --bg:#0f1115; --card:#1a1d24; --line:#2a2f3a; --fg:#e6e8ec;
  --mut:#9aa3b2; --accent:#5cc8ff; --best:#37c871; --best-bg:rgba(55,200,113,.14);
  --bar-lo:rgba(240,145,55,.42); --bar-hi:rgba(55,200,113,.22);
  /* dark green star, used as a background icon to mark the best (smallest) cell */
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f7a3d' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f6f7f9; --card:#fff; --line:#e2e5ea; --fg:#1a1d24;
    --mut:#5a6472; --accent:#0a6ebd; --best:#137a3f; --best-bg:rgba(19,122,63,.10);
    --bar-lo:rgba(236,140,45,.34); --bar-hi:rgba(19,122,63,.16); }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
header, main, footer { max-width:1300px; margin:0 auto; padding:0 40px 0 0; }
header { padding-top:48px; }
h1 { font-size:2.2rem; margin:0 0 .3em; letter-spacing:-.02em; }
.lede { color:var(--mut); max-width:72ch; font-size:1.05rem; }
a { color:var(--accent); }
.chapter { margin:64px 0; scroll-margin-top:24px; }
.chapter > h2 { font-size:1.6rem; letter-spacing:-.01em;
  border-bottom:2px solid var(--line); padding-bottom:.3em; }
.chapter > p { color:var(--mut); max-width:72ch; }
.kicker { display:inline-block; font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.image-block { margin:34px 0; }
.image-block h3 { font-size:1.1rem; margin:0 0 12px; }

/* floating chapter navigation */
.chapter-nav { position:fixed; right:24px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:4px; z-index:10;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; font-size:.85rem; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.chapter-nav b { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--mut); margin-bottom:4px; }
.chapter-nav a { color:var(--fg); text-decoration:none; white-space:nowrap;
  padding:2px 0; }
.chapter-nav a:hover { color:var(--accent); }
@media (max-width:1360px) { .chapter-nav { display:none; } }

/* intro cards */
.intro-grid { display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:24px; }
.intro-card { margin:0; background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; }
.intro-card img { width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; }
.intro-card figcaption { padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.intro-card span { font-size:.85rem; color:var(--mut); }

/* chapter 1 dimension row */
.dim-row { display:flex; gap:20px; align-items:flex-start; overflow-x:auto;
  padding:8px 4px 16px; }
.dim { margin:0; flex:0 0 auto; }
.dim img { display:block; border:1px solid var(--line); border-radius:8px; height:auto; }
.dim figcaption { margin-top:8px; font-size:.85rem; color:var(--mut); text-align:center; }

/* image-compare slider */
.compare { max-width:680px; margin:0 0 26px; }
image-compare { display:block; width:100%; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; }
image-compare img { display:block; width:100%; height:auto; }
.compare-legend { display:flex; justify-content:space-between;
  font-size:.85rem; color:var(--mut); margin-top:8px; }
.tagR { text-align:right; }

/* side-by-side comparisons shown at natural pixel size (no resizing) */
/* two comparisons on one row at natural size; scroll sideways if the window is
   too narrow to show both 600px images at once (they are never resized) */
.compare-row { display:flex; flex-wrap:nowrap; gap:24px; align-items:flex-start;
  overflow-x:auto; padding-bottom:8px; }
.compare.fixed { flex:0 0 auto; width:600px; max-width:600px; margin:0; }
.compare.fixed image-compare { width:600px; }
.compare.fixed image-compare img { width:600px; }

/* tables */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table { border-collapse:collapse; width:100%; min-width:460px; background:var(--card); }
th, td { padding:9px 14px; text-align:center; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line); font-variant-numeric:tabular-nums; }
thead th { background:var(--card); color:var(--mut); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em; }
.wcell { font-weight:700; white-space:nowrap; vertical-align:middle; }
.wcell small { color:var(--mut); font-weight:400; }
.rowname { text-align:left; font-weight:600; white-space:nowrap; }
/* Best (smallest) cell: green bold number + a dark green star on the right. */
td.best { color:var(--best); font-weight:700;
  background:var(--star) no-repeat right 8px center / 16px; }
/* Size bar: orange (used size) from the left up to --pct, then green (saved) for
   the rest. Smaller file -> less orange, more green. Comes after td.best so the
   bar wins the background while .best keeps the green bold number. */
td.bar { background:linear-gradient(to right,
  var(--bar-lo) 0, var(--bar-lo) var(--pct), var(--bar-hi) var(--pct), var(--bar-hi) 100%); }
/* Best cell that also has a size bar: star on top of the gradient. Higher
   specificity (two classes) so this wins over td.bar and td.best above. */
td.bar.best { background:var(--star) no-repeat right 8px center / 16px,
  linear-gradient(to right, var(--bar-lo) 0, var(--bar-lo) var(--pct),
    var(--bar-hi) var(--pct), var(--bar-hi) 100%); }

footer { margin:64px auto; color:var(--mut); font-size:.9rem;
  border-top:1px solid var(--line); padding-top:24px; }

/* attribution page (scoped so these rules never touch the lesson page) */
body.attribution { max-width:1100px; margin:0 auto; padding:32px 20px; }
.attribution section { display:flex; gap:20px; flex-wrap:wrap; }
.attribution figure { flex:1; min-width:240px; margin:0; }
.attribution figure img { width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:10px; }
.attribution figcaption { margin-top:8px; }
.attribution figcaption h2 { font-size:1.15rem; margin:.4em 0 .2em; }
.attribution figcaption p { color:var(--mut); font-size:.9rem; margin:.2em 0; }