/* System Sketch: Connect house style (tokens from https://www.cloudflare.com/connect/) */

@font-face { font-family: "STK Bureau Sans"; src: url(assets/fonts/STKBureauSans-Book.woff2) format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "STK Bureau Sans"; src: url(assets/fonts/STKBureauSans-Regular.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Paper Mono"; src: url(assets/fonts/PaperMono.woff2) format("woff2"); font-weight: 100 800; font-display: block; }

:root {
  --sans: "STK Bureau Sans", sans-serif;
  --mono: "Paper Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --orange: #f46021;
  --orange-hi: #ff8839;
  --amber: #fea700;
  --orange-0: #fff8ea;
  --orange-100: #ffefd4;
  --orange-text: #b33806;

  --text: #292929;
  --text-default: #707070;
  --text-muted: #8f8f8f;
  --text-faint: #d1d1d1;

  --bg: #ffffff;
  --surface: #fdfdfd;
  --border: #f4f4f4;
  --border-dashed: #ebebeb;

  --dark: #0a0a0a;
  --flue: #007aff;

  --shadow: inset 0 0 0 1px transparent, 0 24px 32px -12px rgb(0 0 0 / 3%), 0 6px 12px 0 rgb(0 0 0 / 1%), 0 3px 6px 0 rgb(0 0 0 / 1%), 0 0 0 1px rgb(0 0 0 / 4%);
  --shadow-button: inset 0 -1px 3px 0 rgb(254 189 129 / 12%), inset 0 4px 8px 0 rgb(254 189 129 / 12%), inset 0 .5px .5px 0 rgb(254 189 129 / 32%), inset 0 .25px .25px 0 #f69032, 0 6px 10px -4px rgb(235 87 41 / 24%), 0 2px 4px -1px rgb(235 87 41 / 12%);

  --grid: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.25' y='0.25' width='79.5' height='79.5' stroke='%23f1f1f1' stroke-width='0.5' /%3E%3C/svg%3E");

  --shiki-foreground: #292929;
  --shiki-background: transparent;
  --shiki-token-keyword: #f46021;
  --shiki-token-function: #292929;
  --shiki-token-constant: #b33806;
  --shiki-token-string-expression: #707070;
  --shiki-token-punctuation: #8f8f8f;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #111; overflow: hidden; }
body { font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; }

/* ---------- Stage: 1920×1080 canvas, scaled to fit ---------- */

.deck { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; }
.slide { position: absolute; inset: 0; display: none; overflow: hidden; background: var(--surface) var(--grid); padding: 150px 120px 110px; }
.slide.active { display: block; }
.notes { display: none; }

/* ---------- Chrome: section label, logo, page number ---------- */

.chrome { position: absolute; left: 120px; right: 120px; top: 56px; display: flex; align-items: center; justify-content: space-between; font: 400 18px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.chrome .sec b { color: var(--orange); font-weight: 400; margin-right: 18px; }
.chrome .brand { display: flex; align-items: center; gap: 22px; }
.chrome .brand img { height: 30px; }
.chrome .brand .x { color: var(--text-faint); }
.chrome .brand .flue { display: flex; align-items: center; gap: 10px; font: 400 26px/1 var(--sans); letter-spacing: -.03em; text-transform: none; color: var(--text); }
.chrome .brand .flue img { height: 24px; border-radius: 3px; }
.pageno { position: absolute; right: 120px; bottom: 48px; font: 400 18px/1 var(--mono); letter-spacing: .08em; color: var(--text-muted); }

/* ---------- Type ---------- */

h1, h2, h3, p { margin: 0; }
.title { font: 400 76px/1.04 var(--sans); letter-spacing: -.045em; max-width: 1500px; }
.title em, .hero em, .claim em { font-style: normal; color: var(--orange); }
.sub { margin-top: 26px; font: 300 32px/1.35 var(--sans); letter-spacing: -.02em; color: var(--text-default); max-width: 1300px; }
.label { font: 400 18px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.mono { font-family: var(--mono); }

/* ---------- Cards ---------- */

.cards { display: grid; gap: 28px; margin-top: 72px; }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.card { position: relative; background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; padding: 40px 40px 44px; }
.card .label { margin-bottom: 30px; }
.card h3 { font: 400 44px/1.05 var(--sans); letter-spacing: -.04em; }
.card p { margin-top: 18px; font: 300 28px/1.35 var(--sans); color: var(--text-default); letter-spacing: -.01em; }
.card.dashed { background: transparent; box-shadow: none; border: 2px dashed var(--text-faint); }
.card.lit { background: var(--orange-0); box-shadow: 0 0 0 2px var(--orange), 0 24px 32px -12px rgb(244 96 33 / 18%); }

/* ---------- Click-to-reveal steps ---------- */

.step { opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.step.on { opacity: 1; transform: none; }

/* ---------- Orange cover / end slides ---------- */

.slide.orange { background: var(--orange) url(assets/cover-orange.png) center / cover no-repeat; color: #fff; }
.slide.orange .chrome, .slide.orange .pageno { color: rgb(255 255 255 / 75%); }
.slide.white-art { background: var(--bg) url(assets/cover-white.png) center / cover no-repeat; }
.slide.dark { background: var(--dark) url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.25' y='0.25' width='79.5' height='79.5' stroke='%231a1a1a' stroke-width='0.5' /%3E%3C/svg%3E"); color: #e6e6e6; }
.slide.dark .chrome, .slide.dark .pageno { color: #707070; }
.slide.dark .title em { color: var(--orange-hi); }

.tag { display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; border-radius: 999px; font: 400 20px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--orange); color: #fff; box-shadow: var(--shadow-button); }
.slide.orange .tag { background: #fff; color: var(--orange); box-shadow: none; }

/* Slide 1: cover */
.cover-logo { position: absolute; left: 120px; top: 80px; height: 44px; }
.cover-body { position: absolute; left: 120px; bottom: 130px; width: 1100px; }
.cover-body .kicker { font: 400 22px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / 85%); margin-bottom: 30px; }
.cover-body h1 { font: 400 124px/.98 var(--sans); letter-spacing: -.05em; }
.cover-body .tag { margin-top: 48px; }
.speakers { display: flex; gap: 72px; margin-top: 64px; }
.speaker { display: flex; align-items: center; gap: 22px; }
.speaker .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff; }
.speaker strong { display: block; font: 400 32px/1.1 var(--sans); letter-spacing: -.02em; }
.speaker span { display: block; margin-top: 6px; font: 300 24px/1.2 var(--sans); color: rgb(255 255 255 / 85%); }

/* Slide 2: promise */
.hero { font: 400 116px/1.0 var(--sans); letter-spacing: -.05em; max-width: 1180px; margin-top: 110px; }
.hero-sub { margin-top: 56px; font: 400 26px/1.4 var(--mono); letter-spacing: .02em; color: var(--text-default); }
.hero-sub b { font-weight: 400; color: var(--orange); }

/* Slide 3: poll */
.poll .card h3 { font-size: 52px; }
.poll .card .big { position: absolute; right: 36px; top: 34px; font: 300 22px/1 var(--mono); color: var(--text-faint); }
.footnote { position: absolute; left: 120px; bottom: 120px; display: flex; align-items: center; gap: 18px; font: 400 22px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-default); }
.footnote img { width: 34px; }

/* Slide 4: fence matrix */
.fence { margin-top: 64px; display: grid; grid-template-columns: 420px repeat(4, 1fr); gap: 0 22px; }
.fence .col { background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; padding: 30px 0 14px; }
.fence .col.lit { background: var(--orange-0); box-shadow: 0 0 0 2px var(--orange), 0 24px 32px -12px rgb(244 96 33 / 18%); }
.fence .head { padding: 0 32px 26px; border-bottom: 2px dashed var(--border-dashed); height: 160px; }
.fence .head .label { color: var(--text-muted); }
.fence .lit .head .label { color: var(--orange); }
.fence .head p { margin-top: 18px; font: 300 26px/1.25 var(--sans); color: var(--text-default); }
.fence .cell { height: 92px; display: grid; place-items: center; font: 400 34px/1 var(--mono); color: var(--text-faint); border-bottom: 1px dashed var(--border-dashed); }
.fence .cell:last-child { border-bottom: 0; }
.fence .cell.y { color: var(--text); }
.fence .lit .cell.y { color: var(--orange); }
.fence .rows { padding-top: 190px; }
.fence .rows div { height: 92px; display: flex; align-items: center; font: 400 34px/1.1 var(--sans); letter-spacing: -.03em; border-bottom: 1px dashed var(--border-dashed); }
.fence .rows div:last-child { border-bottom: 0; }

/* ---------- The agent blueprint ---------- */

.blueprint { position: relative; margin-top: 80px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; }
.blueprint::before { content: ""; position: absolute; left: 40px; right: 40px; top: 70px; border-top: 2px dashed var(--text-faint); }
.blueprint .packet { position: absolute; top: 63px; left: 40px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgb(244 96 33 / 15%); animation: packet 5s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes packet { 0% { left: 40px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 56px); opacity: 0; } }
.nk { position: relative; background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; padding: 0 30px 32px; }
.nk .num { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 28px; border-radius: 50%; background: var(--orange); color: #fff; font: 400 22px/1 var(--mono); box-shadow: var(--shadow-button), 0 0 0 10px var(--surface); }
.blueprint { padding-top: 32px; }
.nk h3 { font: 400 46px/1 var(--sans); letter-spacing: -.04em; }
.nk .q { margin-top: 14px; font: 300 26px/1.3 var(--sans); color: var(--text-default); min-height: 68px; }
.nk .cf { margin: 26px 0 0; padding: 22px 0 0; border-top: 2px dashed var(--border-dashed); list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.nk .cf li { font: 400 17px/1 var(--mono); letter-spacing: .02em; padding: 10px 12px; border-radius: 999px; background: var(--orange-0); color: var(--orange-text); }
.nk .fl { margin-top: 22px; display: flex; gap: 10px; align-items: flex-start; font: 400 17px/1.35 var(--mono); color: var(--text-default); }
.nk .fl img { width: 18px; margin-top: 2px; border-radius: 2px; }
.nk .val { margin-top: 18px; font: 400 30px/1.15 var(--sans); letter-spacing: -.02em; color: var(--orange); }
.legend { display: flex; gap: 40px; margin-top: 48px; font: 400 19px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 12px; }
.legend i { display: inline-block; width: 22px; height: 22px; border-radius: 999px; background: var(--orange-0); box-shadow: inset 0 0 0 1px var(--orange-100); }
.legend img { width: 20px; border-radius: 2px; }

/* Slide 6: code */
.code-wrap { margin-top: 64px; display: grid; grid-template-columns: 1fr; gap: 28px; }
.code { position: relative; background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; overflow: hidden; }
.code .bar { display: flex; justify-content: space-between; padding: 22px 36px; border-bottom: 2px dashed var(--border-dashed); font: 400 18px/1 var(--mono); letter-spacing: .06em; color: var(--text-muted); }
.code .bar b { font-weight: 400; color: var(--orange); }
.code pre { margin: 0; padding: 34px 36px 38px; font: 400 25px/1.75 var(--mono); }
.code pre .line { display: block; padding-left: 16px; margin-left: -16px; border-left: 4px solid transparent; }
.code pre .line.hl { border-left-color: var(--orange); background: linear-gradient(90deg, var(--orange-0), transparent 70%); }
.maps { display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; gap: 28px; }
.map { padding: 26px 30px; border: 2px dashed var(--text-faint); border-radius: 4px; }
.map .label { margin-bottom: 14px; }
.map p { font: 400 22px/1.3 var(--mono); color: var(--text); }
.map.cmd p { color: var(--text-default); font-size: 20px; line-height: 1.6; }

/* Slide 7: stories */
.story h3 { font-size: 50px; }
.story .flow { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 400 20px/1 var(--mono); }
.story .flow span { padding: 14px 16px; border-radius: 999px; background: var(--orange-0); color: var(--orange-text); }
.story .flow i { font-style: normal; color: var(--text-faint); }
.story .mini { margin-top: 36px; display: grid; grid-template-columns: 170px 1fr; border-top: 2px dashed var(--border-dashed); }
.story .mini div { padding: 14px 0; border-bottom: 1px dashed var(--border-dashed); font: 300 24px/1.25 var(--sans); color: var(--text); }
.story .mini div:nth-child(odd) { font: 400 17px/1.8 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.story .who { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.story .who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--orange-100); }
.story .who .label { margin-bottom: 0; }
.story .placeholder { margin-top: 36px; height: 360px; display: grid; place-items: center; border: 2px dashed var(--text-faint); border-radius: 4px; font: 400 22px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* Slide 8: surprise (dark) */
.slide.dark .title { color: #fff; }
.slide.dark .sub { color: #8f8f8f; }
.term { margin-top: 64px; width: 1080px; background: #0f0f0f; border-radius: 6px; box-shadow: 0 0 0 1px rgb(255 255 255 / 8%), 0 40px 80px -20px rgb(0 0 0 / 60%); font: 400 24px/1.9 var(--mono); }
.term .bar { display: flex; gap: 10px; padding: 18px 24px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.term .bar i { width: 14px; height: 14px; border-radius: 50%; background: #2a2a2a; }
.term .body { padding: 26px 34px 30px; color: #cfcfcf; }
.term .dim { color: #595d67; }
.term .ok { color: #7bd88f; }
.term .bad { color: var(--orange-hi); }
.term .cursor { display: inline-block; width: 14px; height: 26px; vertical-align: -4px; background: var(--orange-hi); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.guarantees { position: absolute; right: 120px; top: 430px; width: 520px; display: grid; gap: 22px; }
.guarantees div { padding: 26px 30px; border: 1px dashed rgb(255 255 255 / 16%); border-radius: 4px; font: 300 30px/1.25 var(--sans); color: #e6e6e6; }
.guarantees .label { display: block; margin-bottom: 12px; color: var(--orange-hi); }

/* Slide 9: starter cards */
.ncard h3 { font-size: 46px; }
.ncard .rows { margin-top: 30px; border-top: 2px dashed var(--border-dashed); }
.ncard .rows div { display: grid; grid-template-columns: 150px 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px dashed var(--border-dashed); font: 300 26px/1.25 var(--sans); }
.ncard .rows div:last-child { border-bottom: 0; }
.ncard .rows b { font: 400 16px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }

/* Slide 10: live build */
.prompt { margin-top: 64px; display: flex; align-items: center; gap: 30px; width: 1500px; padding: 30px 30px 30px 40px; background: var(--bg); border-radius: 999px; box-shadow: var(--shadow); }
.prompt p { flex: 1; font: 400 28px/1.3 var(--mono); color: var(--text); }
.prompt p::before { content: "> "; color: var(--orange); }
.btn { flex: none; padding: 20px 32px; border-radius: 999px; background: var(--orange); color: #fff; font: 400 24px/1 var(--sans); box-shadow: var(--shadow-button); }
.stretch { position: absolute; right: 120px; top: 150px; }

/* Slide 12: contributions */
.todo { margin-top: 60px; display: grid; gap: 0; width: 1500px; border-top: 2px dashed var(--border-dashed); }
.todo div { display: grid; grid-template-columns: 90px 520px 1fr; align-items: baseline; padding: 30px 0; border-bottom: 2px dashed var(--border-dashed); }
.todo .n { font: 400 20px/1 var(--mono); color: var(--orange); }
.todo strong { font: 400 40px/1.1 var(--sans); letter-spacing: -.035em; font-weight: 400; }
.todo span { font: 400 23px/1.35 var(--mono); color: var(--text-default); word-break: break-word; }

/* Slide 11: recap */
.claim { font: 400 92px/1.02 var(--sans); letter-spacing: -.05em; max-width: 1500px; }
.slogan { margin-top: 64px; display: inline-flex; align-items: center; gap: 18px; font: 400 28px/1 var(--mono); color: var(--text); }
.slogan img { width: 28px; border-radius: 3px; }

/* Slide 13: survey */
.survey h1 { font: 300 96px/1 var(--sans); letter-spacing: -.045em; margin-top: 150px; }
.survey .sub { color: #fff; max-width: 820px; }
.survey .steps { margin-top: 56px; width: 760px; }
.survey .steps div { display: grid; grid-template-columns: 80px 1fr; align-items: center; padding: 20px 0; border-top: 2px dashed rgb(255 255 255 / 60%); font: 400 34px/1 var(--sans); }
.survey .steps div:last-child { border-bottom: 2px dashed rgb(255 255 255 / 60%); }
.survey .steps span { font: 400 20px/1 var(--mono); color: var(--text); }
.phone { position: absolute; right: 260px; bottom: -150px; width: 470px; height: 720px; border-radius: 64px 64px 0 0; border: 6px solid #fff; border-bottom: 0; background: #ffe3d6; padding: 90px 28px 0; box-shadow: 0 40px 80px rgb(0 0 0 / 25%); color: var(--text); }
.phone .notch { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
.phone .notch i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
.phone .notch b { display: block; width: 60px; height: 10px; border-radius: 99px; background: var(--orange); }
.phone .app { background: #fff; border-radius: 18px; overflow: hidden; }
.phone .app-bar { display: flex; align-items: center; gap: 14px; padding: 22px; border-bottom: 1px solid var(--border); font: 400 22px/1 var(--sans); }
.phone .app-bar img { height: 18px; }
.phone .app-body { padding: 36px 30px 48px; }
.phone .app-body .label { font-size: 14px; }
.phone .app-body h4 { margin: 16px 0 12px; font: 400 36px/1.05 var(--sans); letter-spacing: -.03em; }
.phone .app-body p { font: 300 20px/1.35 var(--sans); color: var(--text-default); }
.phone .app-body .btn { display: inline-block; margin-top: 28px; font-size: 20px; padding: 16px 26px; }

/* ---------- Presenter view (?presenter) ---------- */

body.presenter { background: #0a0a0a; color: #e6e6e6; overflow: auto; }
body.presenter .deck { display: none; }
.pv { display: none; }
body.presenter .pv { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto 1fr; gap: 24px; padding: 24px; height: 100vh; }
.pv .frame { position: relative; overflow: hidden; background: #000; border-radius: 6px; box-shadow: 0 0 0 1px #222; }
.pv .frame .slide { display: block; transform-origin: 0 0; width: 1920px; height: 1080px; position: absolute; left: 0; top: 0; }
.pv .frame .step { opacity: .2; transform: none; transition: none; }
.pv .frame .step.on { opacity: 1; }
.pv .now { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 16px; }
.pv .now .frame { aspect-ratio: 16 / 9; }
.pv .meta { display: flex; justify-content: space-between; align-items: center; font: 400 20px/1 var(--mono); color: #8f8f8f; }
.pv .meta .timer { font-size: 44px; color: #fff; }
.pv .meta button { font: 400 16px/1 var(--mono); background: #1a1a1a; color: #cfcfcf; border: 1px solid #333; border-radius: 99px; padding: 10px 16px; cursor: pointer; }
.pv .side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.pv .side .frame { aspect-ratio: 16 / 9; opacity: .85; }
.pv .label { color: var(--orange-hi); }
.pv .notes-text { flex: 1; overflow: auto; font: 300 26px/1.45 var(--sans); color: #e6e6e6; padding: 4px 4px 24px; }
.pv .notes-text p + p { margin-top: 14px; }
.pv .notes-text b { font-weight: 400; color: var(--orange-hi); }
.pv .steps-left { color: var(--orange-hi); }

/* ---------- Print / PDF: one slide per page, all steps visible ---------- */

@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { background: none; overflow: visible; height: auto; }
  .deck { position: static; transform: none !important; width: 1920px; height: auto; }
  .slide { position: relative; display: block !important; width: 1920px; height: 1080px; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .step { opacity: 1 !important; transform: none !important; }
  .blueprint .packet, .term .cursor { animation: none; }
  .blueprint .packet { display: none; }
  .pv { display: none !important; }
}