:root {
  --ink: #182e38;
  --slate: #4c646d;
  --edge: #d3dedc;
  --teal: #086752;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}
body {
  background-color: #f3f5f2;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.top {
  min-height: 62px;
  background: #102c36;
  border-bottom: 1px solid #29434a;
}
.brand { display: inline-flex; align-items: center; font-size: 22px; letter-spacing: -.8px; }
.logo { border-radius: 7px; background: #bef1d9; font: bold 27px/1 Georgia, serif; }
.sep { font-size: 14px; }
.demo { color: #c7eadc; letter-spacing: .15px; }
.wrap { max-width: 1570px; padding-top: 20px; }
.crumb, .meta, .eyebrow, th, .sub { font-family: var(--mono); }
.crumb { color: #50656b; font-size: 10.5px; margin-bottom: 14px; }
.hero {
  padding: clamp(23px,2.1vw,34px) clamp(24px,3.1vw,49px);
  background: linear-gradient(110deg, #163e46, #113640 53%, #17444b);
  box-shadow: inset 0 0 0 1px #cee9da1c;
  border-radius: 14px;
}
.hero h1 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(37px,4vw,62px);
  line-height: 1.04;
  letter-spacing: -.045em;
  margin: 9px 0 10px;
}
.hero p { color: #d8e7e7; }
.hero .eyebrow { color: #aee8cb; font-size: 10.5px; letter-spacing: 1.5px; }
.art {
  width: 39%;
  background-size: 19px 19px;
  background-color: #153f481c;
  mask-image: linear-gradient(90deg,transparent,#000 18%,#000 100%);
}
.art svg { opacity: .95; }
.metrics { gap: 0; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; margin: 14px 0 12px; background: #fff; }
.metric { border: 0; border-radius: 0; padding: 13px 22px; gap: 13px; }
.metric + .metric { border-left: 1px solid var(--edge); }
.metric strong { color: var(--ink); font-family: var(--sans); font-size: 28px; font-weight: 650; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.metric span { color: var(--slate); font-weight: 550; }
.tabs { gap: clamp(18px,2.5vw,38px); margin: 0 0 17px; border-color: #cad6d3; scrollbar-width: thin; }
.tab { font-size: 14px; font-weight: 550; padding: 11px 1px; }
.tab.on { color: #075e4b; border-color: var(--teal); }
.tab:hover { color: var(--teal); }
.grid { align-items: start; gap: 16px; }
.panel {
  padding: clamp(17px,1.7vw,26px);
  border-color: var(--edge);
  border-radius: 11px;
  box-shadow: 0 2px 5px #102e3606;
  min-width: 0;
}
.panel h2 { margin-top: 0; }
.head h2, .panel > h2 { font-size: clamp(20px,1.7vw,25px); line-height: 1.2; letter-spacing: -.04em; }
.panel > h3 { font-size: 18px; letter-spacing: -.035em; }
.control, .close, select {
  min-height: 35px;
  border-color: #bdcec8;
  font-family: var(--sans);
  font-weight: 600;
}
.control:hover:not(:disabled), .close:hover { background: #f0f6f2; }
.primary { background: var(--teal); border-color: var(--teal); }
.primary:hover:not(:disabled) { background: #075541; color: white; }
.table { margin-top: 17px; }
th { background: #f0f4f2; color: #4f666a; font-size: 10px; letter-spacing: .85px; }
td { padding: 10px 9px; font-size: 14px; }
th:first-child { border-radius: 5px 0 0 5px; }
th:last-child { border-radius: 0 5px 5px 0; }
tr:has(.item):hover td { background-color: #f8faf8; }
.item { color: var(--ink); font-size: 15px; line-height: 1.35; }
.sub { font-size: 11.5px; color: #51696c; }
.pill { font-size: 11.5px; padding: 3px 8px; border-radius: 5px; vertical-align: middle; }
.aside { background: #e9f1eb; border-color: #cadcd1; position: relative; overflow: hidden; }
.aside .eyebrow { color: #346957; letter-spacing: 1.3px; font-size: 10px; }
.aside h2 { font-size: clamp(25px,2.25vw,33px); line-height: 1.09; letter-spacing: -.045em; margin: 12px 0 10px; }
.aside p { color: #324e4c; font-size: 14px; line-height: 1.58; }
.aside .control { margin-top: 4px; }
.box { background: #f8faf8; border-color: var(--edge); }
.notice { background: #fff3da; border-radius: 0 5px 5px 0; }
.doclink { color: #075c4a; text-underline-offset: 3px; overflow-wrap: anywhere; }
.stage { padding-left: 13px; border-left-color: #9abcae; }
.footer { margin-top: 16px; }
dialog { border: 1px solid #c4d4cf; box-shadow: 0 24px 90px #0d283844; }
dialog::backdrop { background: #0f2836aa; }
dialog h2 { letter-spacing: -.035em; }
dialog .doc { padding-top: 14px; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #c47a1b; outline-offset: 2px; }
@media (min-width: 851px) and (max-height: 800px) {
  .top { min-height: 54px; padding-top: 10px; padding-bottom: 10px; }
  .wrap { padding-top: 13px; }
  .hero { padding-top: 19px; padding-bottom: 19px; }
  .hero h1 { font-size: clamp(37px,3.6vw,52px); }
  .metric { padding-top: 10px; padding-bottom: 10px; }
}
@media (max-width: 850px) {
  .hero h1, .hero p { max-width: 75%; }
  .art { width: 35%; opacity: .6; }
  .metrics { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .metric { padding: 12px; gap: 8px; }
  .metric span { line-height: 1.2; }
  .aside { margin: 0; }
}
@media (max-width: 620px) {
  .top { min-height: 52px; gap: 7px; }
  .wrap { padding-left: 13px; padding-right: 13px; }
  .brand { font-size: 20px; }
  .logo { height: 31px; width: 31px; }
  .demo { font-size: 10px; }
  .hero { padding: 23px 19px; }
  .hero h1, .hero p { max-width: 100%; }
  .art { display: none; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric + .metric:nth-child(odd) { border-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--edge); }
  .metric { padding: 10px 12px; }
  .metric strong { font-size: 24px; }
  .metric span { font-size: 12px; }
  .tabs { gap: 15px; }
  .tab { font-size: 13px; }
  .panel { padding: 15px; }
  th { padding: 8px 5px; font-size: 9px; letter-spacing: .4px; }
  td { padding: 10px 5px; font-size: 12px; }
  .item { font-size: 14px; }
  .sub { font-size: 10.5px; }
  .head { align-items: flex-start; }
  .footer { align-items: flex-start; }
  dialog { padding: 18px; }
}