: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;
}
/* No backdrop-filter, filter, transform or will-change on any ancestor of the
   widget: each of those creates a containing block for position:fixed and a
   stacking context. The widget attaches its calendar to the body through
   Angular CDK Overlay and computes the position from getBoundingClientRect(),
   so it would land offset and be painted over by the next card. */
.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; }
[hidden] { display:none !important; }
details.selfcheck > summary { font-size:13px; text-transform:uppercase; letter-spacing:.07em;
  color:#4a5a53; font-weight:620; cursor:pointer; }
details.selfcheck[open] > summary { margin-bottom:14px; }
.sc-state { text-transform:none; letter-spacing:0; }
.try { margin:10px 0 0; font-size:13px; color:#4a5a53; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.try button, .copy, .builder button { font:inherit; font-size:13px; border:1px solid rgba(22,36,31,.2);
  background:#fff; color:#16241f; border-radius:8px; padding:5px 12px; cursor:pointer; }
.try button.on, .builder button[type=submit] { background:#16241f; color:#fff; border-color:#16241f; }
.copy { margin-top:8px; }
form.builder { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; align-items:end; }
form.builder label { display:block; font-size:13px; color:#4a5a53; }
form.builder input, form.builder select { display:block; width:100%; margin-top:4px; font:inherit; font-size:14px;
  padding:8px 10px; border:1px solid rgba(22,36,31,.2); border-radius:8px; background:#fff; color:#16241f; }
form.builder button { padding:9px 14px; }