@font-face{font-family:Geist;src:url("./geist-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("./geist-mono-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#171717;--muted:#8a8a8a;--line:#e8e8e8;--blue:#0070f3;--scale:1}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#ececec;color:var(--ink);font-family:Geist,Arial,sans-serif}
body{overflow:hidden}
button{font:inherit;cursor:pointer}
code{font-family:"Geist Mono",ui-monospace,monospace}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;background:#fff;overflow:hidden;box-shadow:0 20px 70px #1717171c}
.slide{display:none;position:absolute;inset:0;background:#fff;overflow:hidden}
.slide.active{display:block}
.slide-inner{position:absolute;inset:0;padding:84px 96px;display:flex;align-items:center;justify-content:center}
.accent{color:var(--blue)}
h1,h2,p{margin:0;letter-spacing:-.065em;font-weight:620}
h1{font-size:130px;line-height:1}
h2{font-size:112px;line-height:1.02}
.cover-grid{position:absolute;inset:0;background-image:linear-gradient(to right,#ededed 1px,transparent 1px),linear-gradient(to bottom,#ededed 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 85% 96% at 81% 46%,#000 0%,transparent 75%)}
.cover-content{align-items:flex-start;justify-content:flex-start;flex-direction:column;padding-top:144px;z-index:1}
.cover-label{position:absolute;top:70px;font-size:21px;font-weight:570;letter-spacing:-.02em}
.cover-content h1{font-size:112px}
.cover-link{display:block;width:100%;margin-top:40px;padding:24px 30px 28px;border-radius:10px;background:var(--blue);color:#fff;text-decoration:none}
.cover-link-label{display:block;margin-bottom:12px;font-size:23px;font-weight:500;letter-spacing:-.02em}
.cover-link-url{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:76px;font-weight:620;line-height:1.1;letter-spacing:-.055em;white-space:nowrap}
.cover-link-url>span{font-size:64px;font-weight:400}
.cover-link:hover{background:#005ac2}
.cover-link:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.cover-timing{position:absolute;bottom:65px;display:flex;gap:42px;color:#777;font:17px "Geist Mono",monospace}
.preview-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:65px}
.preview-layout h2{font-size:118px}
.browser-frame{width:100%;height:474px;border:1px solid #dedede;border-radius:11px;box-shadow:0 24px 60px #1717170d;overflow:hidden}
.browser-top{height:50px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:0 20px}
.browser-top i{width:8px;height:8px;border-radius:50%;background:#ddd}
.browser-top span{margin-left:auto;color:#777;font:15px "Geist Mono",monospace}
.browser-body{padding:24px 30px}
.browser-body strong{display:block;font-size:38px;line-height:46px;font-weight:610;letter-spacing:-.055em;margin-bottom:16px}
.preview-ideas{height:116px;overflow:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:0;border-top:1px solid var(--line);scrollbar-width:thin}
.preview-ideas li{min-height:54px;border-bottom:1px solid var(--line);padding:15px 0;font-size:20px;line-height:24px;overflow-wrap:anywhere}
.preview-form{display:flex;gap:10px;margin-top:18px;height:48px}
.preview-form input{width:0;min-width:0;flex:1;border:1px solid #dedede;border-radius:6px;padding:0 13px;font:18px Geist,Arial,sans-serif;color:var(--ink);background:#fff}
.preview-form input::placeholder{color:#888}
.preview-form button{width:52px;border:0;border-radius:6px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:29px;font-weight:400}
.preview-form button:hover{background:#005ac2}
.preview-footer{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:#707070;line-height:18px}
.preview-footer button{border:0;padding:3px 0;background:none;color:#707070;font-size:14px}
.preview-footer button:hover{color:var(--blue)}
.preview-form :focus-visible,.preview-footer button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.concept-layout{display:grid;grid-template-columns:1fr 1fr;padding-top:135px;padding-bottom:135px}
.concept-layout>div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.concept-layout>div+div{border-left:1px solid var(--line)}
.concept-layout strong{font-size:105px;font-weight:620;letter-spacing:-.07em}
.concept-layout span{font:25px "Geist Mono",monospace;color:var(--muted)}
.route-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.route-title{font-size:92px;font-weight:610;letter-spacing:-.065em;margin-bottom:53px}
.route-title span{color:var(--blue)}
.route-row{display:grid;grid-template-columns:1fr 70px 180px;align-items:center;border-top:1px solid var(--line);padding:26px 0}
.route-row:last-child{border-bottom:1px solid var(--line)}
.route-row code{font-size:31px}
.route-row span{font-size:38px;color:#aaa}
.route-row strong{font:43px "Geist Mono",monospace;color:var(--blue)}
.boundary-layout{gap:42px}
.boundary-card{height:255px;flex:1;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:42px 47px}
.boundary-card strong{font-size:78px;line-height:1;font-weight:610;letter-spacing:-.065em}
.boundary-card span,.boundary-card code{font:24px "Geist Mono",monospace;color:var(--muted)}
.boundary-card.client{border-color:#b8d9ff;background:#f6faff}
.boundary-card.client strong,.boundary-card.client code{color:var(--blue)}
.boundary-arrow{font-size:48px;color:#aaa}
.recap-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:70px}
.recap-layout h2{font-size:97px}
.recap-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recap-grid>div{height:178px;display:flex;flex-direction:column;justify-content:space-between;padding:19px 32px 28px;border-right:1px solid var(--line)}
.recap-grid>div:first-child{padding-left:0}
.recap-grid>div:last-child{border-right:0}
.recap-grid span{font:35px "Geist Mono",monospace;color:var(--blue)}
.recap-grid strong{font-size:32px;letter-spacing:-.045em;font-weight:560}
.section-dark{background:#111;color:#fff}
.build-title{justify-content:flex-start}
.build-title h1{font-size:154px}
.command-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0}
.command-line{display:flex;align-items:center;min-height:106px;border-bottom:1px solid var(--line)}
.command-line:first-child{border-top:1px solid var(--line)}
.command-line span{width:52px;flex:none;font:25px "Geist Mono",monospace;color:#aaa}
.command-line code{font-size:31px;white-space:nowrap}
.file-layout{display:flex;align-items:center;justify-content:space-between;gap:37px}
.file-layout code{font-size:49px;white-space:nowrap}
.file-layout>span{font-size:54px;color:#aaa}
.file-layout strong{font:94px "Geist Mono",monospace;color:var(--blue);white-space:nowrap}
.list-layout{flex-direction:column;align-items:stretch;gap:63px}
.list-layout>code{font-size:75px;color:var(--blue)}
.idea-list{border-top:1px solid var(--line);width:100%}
.idea-list>div{display:flex;align-items:center;gap:45px;padding:20px 0;border-bottom:1px solid var(--line);font-size:33px}
.idea-list span{font:16px "Geist Mono",monospace;color:var(--muted)}
.state-layout{gap:40px}
.state-layout>code{font-size:79px;color:var(--blue)}
.state-arrow{font-size:50px;color:#aaa}
.state-form{display:flex;gap:12px;width:430px;height:72px}
.state-form div{flex:1;border:1px solid #d8d8d8;border-radius:7px}
.state-form b{width:76px;border-radius:7px;background:#171717;color:#fff;display:grid;place-items:center;font-size:40px;font-weight:400}
.final-layout{flex-direction:column;gap:65px}
.final-layout .file-layout{width:100%}
.final-layout .file-layout code{font-size:43px}
.final-layout .file-layout strong{font-size:75px}
.final-layout p{font-size:55px;align-self:flex-start}
.slide-actions{position:absolute;right:42px;bottom:27px;z-index:3;display:flex;gap:8px;opacity:.42;transition:opacity .15s}
.slide:hover .slide-actions,.slide-actions:focus-within{opacity:1}
.slide-actions button{width:34px;height:34px;border:0;background:transparent;color:#555;font-size:22px;line-height:1}
.slide-actions button:hover{color:var(--blue)}
.slide-actions button:focus-visible,#notes-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.section-dark .slide-actions button{color:#aaa}
.progress{position:absolute;bottom:0;left:0;height:3px;background:var(--blue);z-index:4;transition:width .25s ease}
.speaker-note{display:none}
#notes{display:none;position:fixed;z-index:30;top:20px;right:20px;bottom:20px;width:min(460px,calc(100vw - 40px));overflow:auto;padding:25px 30px;background:#fff;border:1px solid #dedede;border-radius:8px;box-shadow:0 20px 70px #17171733;color:#171717}
#notes.open{display:block}
#notes h2{font-size:28px;letter-spacing:-.04em;margin-bottom:20px}
#notes p{font-size:18px;line-height:1.5;color:#555}
#notes code{font:16px "Geist Mono",monospace}
#notes a{color:#0070f3}
#notes-close{float:right;background:#fff;border:1px solid #ddd;border-radius:6px;font-size:15px;padding:6px 10px}
@media (prefers-reduced-motion:reduce){.progress,.slide-actions{transition:none}}
@media print{@page{size:13.333in 7.5in;margin:0}html,body{background:#fff;overflow:visible}#stage{position:static;width:auto;height:auto;transform:none;box-shadow:none;overflow:visible}.slide,.slide.active{display:block;position:relative;width:1280px;height:720px;break-after:page;page-break-after:always;-webkit-print-color-adjust:exact;print-color-adjust:exact}.slide-actions,#notes{display:none!important}}

/* One-hour workshop additions. Keep the teaching detail in notes and resources. */
.cover-timing span{color:var(--blue)}
.flow-layout{gap:18px}
.flow-layout>div{min-width:205px;height:160px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;font-size:38px;font-weight:590;letter-spacing:-.05em}
.flow-layout>span{font-size:43px;color:#aaa}
.flow-layout .flow-end{color:var(--blue);border-color:#b8d9ff;background:#f6faff}
.focus-layout{flex-direction:column;align-items:flex-start;gap:15px}
.focus-layout>strong{font-size:150px;line-height:1;font-weight:620;letter-spacing:-.075em}
.focus-layout>span{font-size:38px;color:var(--blue);letter-spacing:-.04em}
.focus-layout code{margin-top:40px;font-size:35px;color:#555}
.focus-layout code i{font-style:normal;color:#aaa}
.data-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-content:center}
.data-layout>strong{font-size:160px;letter-spacing:-.075em;line-height:1;grid-row:1/3}
.data-layout>span{position:absolute;left:101px;top:420px;font-size:32px;color:var(--blue)}
.tiny-table{border-top:1px solid var(--line);margin-top:24px}
.tiny-table>div{display:grid;grid-template-columns:80px 1fr;padding:19px 0;border-bottom:1px solid var(--line);font:22px "Geist Mono",monospace}
.tiny-table b{font-size:17px;color:var(--muted);font-weight:500}
.tiny-table i{font-style:normal}
.section-blue{background:#0767e8;color:#fff}
.transition-title{justify-content:flex-start}
.transition-title h1{font-size:145px}
.section-blue .transition-title h1 span{color:#a9d0ff}
.process-layout{gap:20px}
.process-layout>div{height:180px;min-width:285px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;font-size:39px;font-weight:580;letter-spacing:-.05em}
.process-layout>div:last-child{border-color:#b8d9ff;background:#f6faff;color:var(--blue)}
.process-layout>span{font-size:39px;color:#aaa}
.ai-plan-layout{flex-direction:column;align-items:stretch;gap:32px}
.chat-question{width:70%;border:1px solid var(--line);border-radius:16px;padding:30px 38px;font-size:55px;font-weight:600;letter-spacing:-.055em}
.chat-answer{margin-left:auto;width:78%;display:flex;gap:20px;border:1px solid #b8d9ff;background:#f6faff;border-radius:16px;padding:36px;color:var(--blue)}
.chat-answer span{flex:1;font:25px "Geist Mono",monospace}
.review-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:70px}
.review-layout h2{font-size:112px}
.review-layout>div{width:100%;border-top:1px solid var(--line)}
.review-layout>div span{display:block;padding:20px 0;border-bottom:1px solid var(--line);font-size:30px}
.review-layout>div span:first-child{color:var(--blue)}
.debug-layout{gap:18px}
.debug-layout>div{min-width:285px;padding:52px 25px;border:1px solid var(--line);border-radius:8px;text-align:center;font-size:37px;font-weight:580;letter-spacing:-.05em}
.debug-layout>div:last-child{background:#f6faff;border-color:#b8d9ff;color:var(--blue)}
.debug-layout>span{font-size:42px;color:#aaa}
.service-layout{display:grid;grid-template-columns:1fr 1fr;padding-top:145px;padding-bottom:145px}
.service-layout>div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.service-layout>div+div{border-left:1px solid var(--line)}
.service-layout strong{font-size:84px;letter-spacing:-.07em;font-weight:620}
.service-layout span{font:34px "Geist Mono",monospace;color:var(--blue)}
.schema-layout{flex-direction:column;align-items:flex-start;gap:70px}
.schema-layout>code{font-size:69px;color:var(--blue)}
.schema-layout>div{display:flex;gap:22px;width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:35px 0}
.schema-layout span{font:34px "Geist Mono",monospace;color:#555;min-width:210px}
.migration-layout{flex-direction:column;gap:24px}
.migration-layout code{font-size:68px;color:var(--blue)}
.migration-layout span{font:27px "Geist Mono",monospace;color:var(--muted)}
.binding-layout{gap:60px}
.binding-layout code{font-size:116px;color:var(--blue)}
.binding-layout span{font-size:65px;color:#aaa}
.binding-layout strong{font-size:130px;letter-spacing:-.07em}
.endpoints-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;padding-top:135px;padding-bottom:135px}
.endpoints-layout>div{height:100%;display:flex;flex-direction:column;justify-content:center;gap:25px}
.endpoints-layout>div+div{border-left:1px solid var(--line);padding-left:65px}
.endpoints-layout span{font-size:94px;font-weight:630;letter-spacing:-.06em;color:var(--blue)}
.endpoints-layout code{font-size:38px}
.sql-layout{flex-direction:column;align-items:flex-start;gap:20px}
.sql-layout code{font-size:66px}
.sql-layout code b{color:var(--blue);font-weight:500}
.fetch-layout{gap:32px}
.fetch-layout code{font-size:53px;color:var(--blue)}
.fetch-layout>span{font-size:47px;color:#aaa}
.fetch-layout strong{font-size:48px;letter-spacing:-.05em}
.persist-layout{gap:20px}
.persist-layout>div{min-width:255px;padding:50px 21px;text-align:center;border:1px solid var(--line);border-radius:8px;font-size:36px;font-weight:580;letter-spacing:-.045em}
.persist-layout>span{font-size:38px;color:#aaa}
.persist-layout .persist-result{color:var(--blue);background:#f6faff;border-color:#b8d9ff}
.ship-layout{gap:35px}
.ship-layout>div{font-size:92px;letter-spacing:-.065em;font-weight:610}
.ship-layout>div:last-child{color:var(--blue)}
.ship-layout>span{font-size:68px;color:#aaa}
.resources-layout{display:grid;grid-template-columns:1fr 1fr;gap:65px}
.resources-layout h2{font-size:105px}
.resources-layout>div{width:100%;border-top:1px solid var(--line)}
.resources-layout a{display:block;padding:19px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:31px;text-decoration:none}
.resources-layout a:hover{color:var(--blue)}
.slide-resource{position:absolute;right:48px;top:33px;z-index:3;color:#a0a0a0;font-size:25px;text-decoration:none;opacity:.62}
.slide-resource:hover,.slide-resource:focus-visible{color:var(--blue);opacity:1}
.slide-resource:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.section-dark .slide-resource{color:#b8b8b8}
.section-blue .slide-resource,.section-blue .slide-actions button{color:#e0eeff}
.section-blue .progress{background:#fff}
@media print{.slide-resource{display:none!important}}

/* AI tools and the workshop starter. */
.assistant-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.assistant-layout h2{font-size:106px}
.tool-maker{display:block;font:21px "Geist Mono",monospace;color:var(--muted);margin-bottom:20px}
.tool-card{border:1px solid var(--line);border-radius:10px;padding:36px;min-height:270px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.tool-card code{font-size:24px;color:var(--blue)}
.tool-card p{font-size:34px;line-height:1.2;letter-spacing:-.045em;font-weight:500}
.tool-card>span{font:18px "Geist Mono",monospace;color:#777}
.starter-layout{flex-direction:column;align-items:flex-start}
.starter-layout h2{font-size:104px}
.starter-layout>div{display:flex;gap:34px;margin-top:40px;font:25px "Geist Mono",monospace;color:#777}
.starter-layout>a{margin-top:55px;font-size:26px;color:var(--blue);text-decoration:none}
.starter-layout>a:hover{text-decoration:underline}