/* The blog (scripts/blog/build_blog.py writes its pages) in the home page's look: Geist, the blueprint grid, glass
   cards, blue for links and yellow for the key button. Light by default, dark when theme.js sets data-theme. */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/geist-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/geist-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/geist-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F7F8FB; --paper-2:#FFFFFF; --card:rgba(255,255,255,.8); --ink:#0B1430; --ink-2:#3B4660; --ink-3:#667089;
  --line:rgba(11,20,48,.13); --line-2:rgba(11,20,48,.07); --grid:rgba(47,91,234,.055);
  --blue:#2F5BEA; --blue-soft:rgba(47,91,234,.09); --blue-line:rgba(47,91,234,.28);
  --yellow:#FFB547; --yellow-2:#FFC46B; --video:#0B1430; --rec:#E5484D;
  --shadow:0 1px 0 rgba(11,20,48,.03),0 22px 48px -28px rgba(11,20,48,.32);
  --sans:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --pad:clamp(16px,4vw,48px); --max:1180px; --text:760px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#070B14; --paper-2:#0C1220; --card:rgba(12,18,32,.78); --ink:#EAF0FF; --ink-2:#B4BED4; --ink-3:#8790A8;
  --line:rgba(234,240,255,.13); --line-2:rgba(234,240,255,.07); --grid:rgba(110,142,255,.065);
  --blue:#6E8EFF; --blue-soft:rgba(110,142,255,.12); --blue-line:rgba(110,142,255,.32);
  --video:#03060D; --shadow:0 1px 0 rgba(0,0,0,.25),0 26px 56px -30px rgba(0,0,0,.85);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.bl{margin:0;background-color:var(--paper);color:var(--ink);font:17px/1.7 var(--sans);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;background-position:-1px -1px}
a{color:var(--blue)}
img{max-width:100%}
.th-dark{display:none}
:root[data-theme="dark"] .th-light{display:none}
:root[data-theme="dark"] .th-dark{display:inline}
.bl-label{display:inline-block;margin:0 0 18px;font:500 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}

/* ---- the bar on top ---- */
.bl-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:28px;padding:14px var(--pad);
  background:var(--paper);background:color-mix(in srgb,var(--paper) 84%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.bl-logo{display:inline-flex;line-height:0}
.bl-logo img{height:28px;width:auto}
.bl-links{display:flex;gap:26px;margin-left:auto}
.bl-links a{padding:6px 0;border-bottom:2px solid transparent;font:500 12.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.bl-links a:hover{color:var(--ink)}
.bl-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)}
.bl-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:999px;border:1px solid transparent;
  background:var(--yellow);color:#2A1600;font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(255,150,30,.85);transition:transform .15s,background .15s}
.bl-btn:hover{background:var(--yellow-2);transform:translateY(-1px)}
.bl-btn.bl-sm{padding:10px 18px;font-size:14px}
.bl-btn.bl-ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.bl-btn.bl-ghost:hover{background:var(--paper-2)}

main{padding:0 var(--pad)}

/* ---- the index ---- */
.bl-hero{max-width:var(--max);margin:0 auto;padding:clamp(48px,8vw,104px) 0 34px}
.bl-hero h1{margin:0 0 24px;max-width:15em;font-size:clamp(40px,6.4vw,84px);line-height:1;letter-spacing:-.045em;font-weight:620}
.bl-hero h1 em{font-style:normal;color:var(--blue)}
.bl-lede{margin:0;max-width:40em;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink-2)}
.bl-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.bl-filter[hidden]{display:none}
.bl-filter button{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;
  font:500 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.bl-filter button:hover{color:var(--ink);border-color:var(--ink-3)}
.bl-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bl-empty{max-width:var(--max);margin:24px auto;color:var(--ink-3)}
.bl-empty[hidden]{display:none}

.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bl-list{max-width:var(--max);margin:8px auto 0}
.bl-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--card);
  color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.bl-card:hover{transform:translateY(-3px);border-color:var(--blue)}
.bl-card[hidden]{display:none}
.bl-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--video);border-bottom:1px solid var(--line-2)}
.bl-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.bl-card:hover .bl-thumb img{transform:scale(1.025)}
.bl-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(11,20,48,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);transition:transform .2s,background .2s}
.bl-play::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent #fff}
.bl-card:hover .bl-play{background:var(--blue);transform:scale(1.08)}
.bl-card-body{display:flex;flex:1;flex-direction:column;gap:10px;padding:20px 22px 22px}
.bl-card-tags{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.bl-card b{font-size:20px;line-height:1.25;font-weight:620;letter-spacing:-.02em}
.bl-card-sum{font-size:15px;line-height:1.6;color:var(--ink-2)}
.bl-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:8px;
  font:500 12px/1.3 var(--mono);color:var(--ink-3)}
.bl-watch{color:var(--blue)}
.bl-watch::after{content:" \2192"}
/* the newest post, wide */
.bl-feature{grid-column:1/-1;flex-direction:row}
.bl-feature .bl-thumb{flex:1.45;min-height:360px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line-2)}
.bl-feature .bl-card-body{flex:1;justify-content:center;padding:36px 36px 32px}
.bl-feature b{font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.03em}
.bl-feature .bl-card-sum{font-size:16.5px}
.bl-feature .bl-play{width:72px;height:72px;margin:-36px 0 0 -36px}
.bl-feature .bl-play::after{left:29px;top:22px;border-width:14px 0 14px 21px}

/* ---- a post ---- */
.bl-article{max-width:var(--max);margin:0 auto}
.bl-head{max-width:var(--text);margin:0 auto;padding:clamp(40px,7vw,88px) 0 6px}
.bl-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px;font:500 12px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bl-crumb a{color:var(--blue);text-decoration:none}
.bl-crumb a:hover{text-decoration:underline}
.bl-chip{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-2)}
.bl-head h1{margin:0 0 20px;font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.04em;font-weight:640}
.bl-head .bl-lede{font-size:clamp(18px,1.7vw,21px);color:var(--ink-2)}
.bl-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

.bl-body{padding:22px 0 8px}
.bl-body>*{max-width:var(--text);margin-left:auto;margin-right:auto}
.bl-body p{margin-top:0;margin-bottom:20px;color:var(--ink-2)}
.bl-body li{color:var(--ink-2)}
.bl-body strong{color:var(--ink);font-weight:620}
.bl-body h2{margin-top:60px;margin-bottom:18px;font-size:clamp(24px,2.6vw,31px);line-height:1.2;letter-spacing:-.025em;
  font-weight:620;color:var(--ink)}
.bl-body h3{margin-top:34px;margin-bottom:10px;font-size:20px;letter-spacing:-.015em;color:var(--ink)}
.bl-body ul,.bl-body ol{margin-top:0;margin-bottom:26px;padding:0;list-style:none}
.bl-body ul>li{position:relative;margin:13px 0;padding-left:30px}
.bl-body ul>li::before{content:"";position:absolute;left:5px;top:.66em;width:8px;height:8px;border-radius:2px;
  background:var(--blue);transform:rotate(45deg)}
.bl-body ol{counter-reset:step}
.bl-body ol>li{position:relative;margin:18px 0;padding-left:46px;counter-increment:step}
.bl-body ol>li::before{content:counter(step);position:absolute;left:0;top:.05em;display:grid;place-items:center;width:30px;
  height:30px;border-radius:50%;border:1px solid var(--blue-line);background:var(--blue-soft);font:600 13px/1 var(--mono);color:var(--blue)}
.bl-body code{padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--paper-2);font:14px/1.4 var(--mono)}

/* the prompt Genie was given, and a tip */
.bl-body blockquote{margin-top:30px;margin-bottom:30px}
.bl-prompt{position:relative;padding:22px 26px 22px 70px;border:1px solid var(--line);border-radius:18px;
  background:var(--paper-2);box-shadow:var(--shadow)}
.bl-prompt::before{content:"";position:absolute;left:22px;top:22px;width:30px;height:30px;border-radius:10px;
  background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.1 6.4 6.4 2.1-6.4 2.1L12 19.5l-2.1-6.4L3.5 11l6.4-2.1z' fill='%232A1600'/%3E%3C/svg%3E") center/17px no-repeat}
.bl-prompt::after{content:"Prompt";position:absolute;left:70px;top:-10px;padding:3px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--paper-2);font:600 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bl-prompt p{margin:0;font-size:18.5px;line-height:1.55;color:var(--ink)}
.bl-tip{padding:20px 24px;border:1px solid var(--blue-line);border-radius:16px;background:var(--blue-soft)}
.bl-tip p{margin:0;color:var(--ink)}
.bl-tip strong{color:var(--blue)}

/* a recording: wider than the text */
.bl-body>.bl-video{max-width:1040px;margin-top:38px;margin-bottom:42px}
.bl-frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--video);
  box-shadow:0 34px 70px -38px rgba(11,20,48,.6)}
.bl-frame video{display:block;width:100%;height:auto;aspect-ratio:16/10}
.bl-big-play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;padding:0;border:0;border-radius:50%;
  background:rgba(11,20,48,.76);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7),0 0 0 8px rgba(255,255,255,.12);transition:transform .2s,background .2s,opacity .2s}
.bl-big-play::after{content:"";position:absolute;left:37px;top:29px;border-style:solid;border-width:17px 0 17px 26px;
  border-color:transparent transparent transparent #fff}
.bl-big-play:hover{background:var(--blue);transform:scale(1.06)}
.bl-big-play:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.is-playing .bl-big-play{opacity:0;pointer-events:none}
@media (max-width:720px){ .bl-big-play{width:68px;height:68px;margin:-34px 0 0 -34px} .bl-big-play::after{left:27px;top:21px;border-width:13px 0 13px 20px} }
.bl-video figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;max-width:var(--text);margin:14px auto 0;
  font-size:14px;line-height:1.55;color:var(--ink-3)}
.bl-rec{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.bl-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 3px rgba(229,72,77,.18)}

/* a table of facts */
.bl-table{margin-top:26px;margin-bottom:30px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.bl-table table{width:100%;border-collapse:collapse;font-size:15px}
.bl-table th{padding:13px 18px;border-bottom:1px solid var(--line);text-align:left;font:600 11.5px/1.3 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bl-table td{padding:13px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink-2)}
.bl-table tr:last-child td{border-bottom:0}
.bl-table td:first-child{font-weight:600;white-space:nowrap;color:var(--ink)}

/* ---- try it, more posts, the footer ---- */
.bl-try{display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:var(--max);margin:80px auto 0;
  padding:38px 42px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
  background:radial-gradient(120% 160% at 0% 0%,var(--blue-soft),transparent 62%),var(--card)}
.bl-try .bl-label{margin:0}
.bl-try b{display:block;margin:8px 0 10px;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.025em}
.bl-try p{margin:0;max-width:42em;color:var(--ink-2)}
.bl-try-go{display:flex;flex:none;flex-wrap:wrap;gap:10px}
.bl-more{max-width:var(--max);margin:80px auto 0}
.bl-more h2{margin:0 0 22px;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em}
.bl-foot{margin-top:100px;padding:52px var(--pad) 36px;border-top:1px solid var(--line);
  background:var(--paper-2);background:color-mix(in srgb,var(--paper-2) 72%,transparent)}
.bl-foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;max-width:var(--max);margin:0 auto}
.bl-foot-grid b{display:block;margin-bottom:14px;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bl-foot-grid a{display:block;margin:9px 0;font-size:15px;color:var(--ink-2);text-decoration:none}
.bl-foot-grid a:hover{color:var(--ink)}
.bl-foot-brand .bl-logo img{height:24px}
.bl-foot-brand p{margin:14px 0 0;font-size:14.5px;color:var(--ink-3)}
.bl-foot-line{max-width:var(--max);margin:36px auto 0;padding-top:20px;border-top:1px solid var(--line-2);
  font:500 12px/1.5 var(--mono);color:var(--ink-3)}

@media (max-width:1000px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-feature{flex-direction:column}
  .bl-feature .bl-thumb{min-height:0;aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--line-2)}
  .bl-feature .bl-card-body{padding:24px 24px 26px}
  .bl-try{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  body.bl{font-size:16.5px}
  .bl-links{display:none}
  .bl-nav{gap:12px}
  .bl-nav .bl-btn{margin-left:auto}
  .bl-logo img{height:24px}
  .bl-grid{grid-template-columns:1fr}
  .bl-card-body{padding:18px 18px 20px}
  .bl-try{padding:28px 22px}
  .bl-prompt{padding:20px 18px 18px 60px}
  .bl-prompt::before{left:16px;top:20px}
  .bl-prompt::after{left:60px}
  .bl-foot-grid{grid-template-columns:1fr 1fr}
  .bl-foot-brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .bl-card,.bl-thumb img,.bl-play,.bl-btn{transition:none}
  .bl-card:hover,.bl-btn:hover,.bl-card:hover .bl-thumb img,.bl-card:hover .bl-play{transform:none}
}