:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #16241f;
  background:
    radial-gradient(1200px 600px at 15% -10%, #cfe6d8 0%, rgba(207,230,216,0) 60%),
    radial-gradient(900px 500px at 95% 0%, #e6ddc8 0%, rgba(230,221,200,0) 55%),
    linear-gradient(170deg, #f4f7f4 0%, #e8efe9 45%, #dfe8e2 100%);
  background-attachment: fixed;
}
/* Kein backdrop-filter, filter, transform oder will-change auf einem Vorfahren
   des Widgets: jedes davon erzeugt einen Containing Block fuer position:fixed
   und einen Stacking Context. Das Widget haengt seinen Kalender ueber Angular
   CDK Overlay an den Body und rechnet die Position aus getBoundingClientRect()
   -- er landet sonst versetzt und wird von der naechsten Karte ueberdeckt. */
.band { background:#16241f; color:#dfe8e2; font-size:12px; letter-spacing:.06em;
        text-transform:uppercase; padding:9px 20px; text-align:center; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 32px 20px 64px; }
nav.variants { display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 26px; }
nav.variants a {
  font-size:13px; text-decoration:none; color:#16241f;
  border:1px solid rgba(22,36,31,.16); border-radius:999px; padding:6px 14px;
  background: rgba(255,255,255,.7);
}
nav.variants a.here { background:#16241f; color:#fff; border-color:#16241f; }
header h1 { font-size:25px; margin:0 0 6px; font-weight:620; letter-spacing:-.01em; }
header p  { margin:0 0 26px; color:#4a5a53; max-width:70ch; }
.verdict { font-weight:620; }
.verdict.good { color:#1a6b45; }
.verdict.bad  { color:#a3341f; }
.card { background: rgba(255,255,255,.93); border:1px solid rgba(22,36,31,.09);
        border-radius:14px; padding:22px;
        box-shadow: 0 1px 2px rgba(22,36,31,.04), 0 12px 32px -20px rgba(22,36,31,.35); }
.card + .card { margin-top:22px; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:#4a5a53;
     margin:0 0 14px; font-weight:620; }
table { border-collapse:collapse; width:100%; font-size:14px; }
td { padding:7px 10px 7px 0; border-bottom:1px solid rgba(22,36,31,.07); vertical-align:top; }
td:first-child { color:#4a5a53; width:42%; }
code { font:12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
       background:rgba(22,36,31,.06); padding:1px 5px; border-radius:4px; }
pre { font:12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
      background:#16241f; color:#dfe8e2; padding:14px 16px; border-radius:10px;
      overflow-x:auto; }
.ok{color:#1a6b45;font-weight:600}.bad{color:#a3341f;font-weight:600}.wait{color:#7a6a3a}
footer { margin-top:28px; font-size:12.5px; color:#6a7a72; }