/* Generated by scripts/preview/build_pages.mjs — edit CARD_CSS/PAGE_CSS there. */


*{box-sizing:border-box;margin:0;padding:0}
/* Flat, not gradient: these cards are committed by the hundred, and a smooth
   1200px gradient needs a dithered palette that triples the PNG (240 KB vs 40 KB
   after pngquant) for a difference nobody sees in a feed. */
.card{width:1200px;height:630px;position:relative;overflow:hidden;
  background:#eef6f2;
  color:#17211d;font-family:"Liberation Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;display:flex;flex-direction:column;
  padding:46px 54px 40px;gap:0}
.card::after{content:"";position:absolute;inset:0;border:14px solid #147d69;
  border-width:0 0 0 14px}
.net{position:absolute;right:-118px;top:-124px;width:430px;height:430px;opacity:.11;pointer-events:none}
.head{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:1}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font-family:Georgia, "Bitstream Charter", Charter, "Liberation Serif", serif;font-size:30px;font-weight:700;letter-spacing:-.4px;color:#0b4f42}
.brand span{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#66746e}
.chip{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#0b4f42;
  background:#ffffff;border:1px solid #aebfb8;border-radius:999px;padding:7px 16px;white-space:nowrap}
.title{font-family:Georgia, "Bitstream Charter", Charter, "Liberation Serif", serif;font-weight:700;line-height:1.1;letter-spacing:-.6px;
  margin:26px 0 0;color:#17211d;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;position:relative;z-index:1}
.title.s1{font-size:56px;-webkit-line-clamp:2}
.title.s2{font-size:46px;-webkit-line-clamp:3}
.title.s3{font-size:38px;-webkit-line-clamp:3}
.body{display:flex;gap:30px;align-items:stretch;margin-top:24px;flex:1;min-height:0;position:relative;z-index:1}
.left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
.panel{background:#ffffff;border:1px solid #d9e2de;border-radius:14px;padding:16px 18px;
  box-shadow:0 10px 26px rgba(32,47,41,.07);overflow:hidden;max-height:250px}
/* Shrink-to-fit, so a two-column answer reads as a pair instead of a label and
   a number stranded at opposite edges of the card. */
table.mini{border-collapse:collapse;width:auto;min-width:78%;max-width:100%;font-size:19px}
table.mini th{text-align:left;font-weight:600;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  color:#0b4f42;border-bottom:2px solid #e3f0ec;padding:0 14px 8px 0;white-space:nowrap}
table.mini td{padding:9px 14px 9px 0;border-bottom:1px solid #eef3f1;white-space:nowrap;
  color:#17211d;max-width:340px;overflow:hidden;text-overflow:ellipsis}
table.mini tr:last-child td{border-bottom:0}
table.mini td.num{font-variant-numeric:tabular-nums;font-weight:600;color:#0b4f42}
table.mini .more{color:#66746e;font-weight:400}
pre.peek{font-family:"Cascadia Mono", "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, monospace;font-size:17px;line-height:1.5;color:#17211d;white-space:pre;overflow:hidden}
pre.peek .kw{color:#8a3d5a;font-weight:600}
pre.peek .v{color:#147d69}
/* The drawing views (graph / map / timeline) show the answer they actually drew.
   The panel is height-bound, so object-fit:cover (filling it, cropping the
   margins) shows the drawing larger than contain, which would letterbox it into
   a thumbnail. The capture already frames the drawing itself, not the panel. */
.shot{background:#ffffff;border:1px solid #d9e2de;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 26px rgba(32,47,41,.07);height:266px;display:flex}
.shot img{width:100%;height:100%;object-fit:cover;object-position:center}
.rail{flex:0 0 300px;display:flex;flex-direction:column;justify-content:center;gap:12px;
  border-left:1px solid #aebfb8;padding-left:28px}
.rail .icon{font-size:44px;line-height:1}
.rail .key{font-family:"Cascadia Mono", "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, monospace;font-size:23px;font-weight:600;color:#0b4f42;
  word-break:break-word;line-height:1.2}
.rail .facts{font-size:18px;color:#66746e;line-height:1.5}
.rail .facts b{color:#17211d;font-weight:600;font-variant-numeric:tabular-nums}
.rail .answer{margin-top:4px;padding-top:12px;border-top:1px solid #d9e2de}
.rail .answer .big{font-family:Georgia, "Bitstream Charter", Charter, "Liberation Serif", serif;font-size:32px;font-weight:700;color:#147d69;line-height:1.15}
.rail .answer .sub{font-size:17px;color:#66746e;margin-top:2px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;
  padding-top:18px;border-top:1px solid #aebfb8;position:relative;z-index:1}
/* The call to action reads as a button. A card in a feed is an ad for one
   click, and an unfurl linter is right that a flat sentence does not look like
   one — so the action is a filled pill and the reassurance sits beside it. */
.foot .cta{display:flex;align-items:center;gap:16px;min-width:0}
.foot .cta .btn{background:#147d69;color:#ffffff;font-size:21px;font-weight:600;
  padding:11px 24px;border-radius:999px;white-space:nowrap;line-height:1.2}
.foot .cta .why{font-size:18px;color:#66746e;white-space:nowrap}
.foot .url{font-family:"Cascadia Mono", "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, monospace;font-size:17px;color:#66746e;white-space:nowrap}
.bullets{list-style:none;display:flex;flex-direction:column;gap:11px}
.bullets li{font-size:22px;color:#17211d;line-height:1.3;display:flex;gap:11px;align-items:baseline;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bullets li::before{content:"▸";color:#147d69;font-size:18px;flex:0 0 auto}
.lead{font-size:23px;line-height:1.42;color:#17211d;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:4;overflow:hidden}
.card.doc .body{align-items:center}
.card.doc .lead{font-size:26px;-webkit-line-clamp:5;max-width:1000px}
/* A dataset card has no result panel to centre on, so its list and its facts
   hang from the title instead of floating in the middle of the card. */
.card.dataset .left,.card.dataset .rail{justify-content:flex-start;padding-top:8px}
.card.dataset .left{gap:16px}
.card.dataset .lead{-webkit-line-clamp:3;font-size:21px;color:#66746e}

html{background:#f6f8f7}
body{margin:0;font-family:"Liberation Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;color:#17211d;background:#f6f8f7;
  display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding:32px 24px}
.wrap{width:100%;max-width:1200px}
/* The card is authored at a fixed 1200x630 so the PNG and the page cannot
   diverge; on a narrow screen it is scaled down as a whole rather than reflowed. */
.stage{width:1200px;height:630px;transform-origin:top left;border-radius:18px;overflow:hidden;
  border:1px solid #d9e2de;box-shadow:0 24px 60px rgba(32,47,41,.13)}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.go{display:inline-block;background:#147d69;color:#ffffff;text-decoration:none;
  font-size:18px;font-weight:600;padding:14px 26px;border-radius:10px}
.go:hover{background:#0b4f42}
.alt{color:#66746e;font-size:15px}
.alt a{color:#147d69}
.q{margin-top:22px;background:#ffffff;border:1px solid #d9e2de;border-radius:12px;
  padding:16px 18px;font-family:"Cascadia Mono", "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, monospace;font-size:14px;line-height:1.55;white-space:pre-wrap;
  overflow-x:auto;color:#17211d}
.q h2{font-family:"Liberation Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#66746e;margin:0 0 10px;font-weight:600}
@media (prefers-color-scheme: dark){
  html,body{background:#0f1512;color:#dde8e2}
  .q{background:#171f1b;border-color:#2a352f;color:#dde8e2}
  .alt{color:#93a69d}
}