@media(max-width:900px){
:root{
--body:25px;
--heading:36px;
--support:22px}
.slide-inner{
padding:35px 32px}
.layout-split .slide-inner{
grid-template-columns:1fr;
gap:25px}
.layout-split figure{
max-width:700px}
.screenshot-img{
max-height:45dvh}
.title-credit{
margin-top:55px}
.feature-list>div{
grid-template-columns:210px 1fr;
gap:20px}
.nav-brand{
display:none}
.columns,.grid-2{
gap:25px}
.long-prompt-slide .prompt-good{
max-height:calc(100dvh - 240px)}
.stage .prompt-block{
font-size:24px}
}
@media(max-width:600px){
:root{
--body:23px;
--heading:32px;
--support:20px}
.slide-inner{
padding:28px 23px;
justify-content:flex-start;
gap:22px}
h1{
max-width:340px}
h2{
margin-bottom:22px}
.title-slide .slide-inner{
justify-content:center}
.series-position{
top:25px;
right:24px;
font-size:16px}
.subtitle{
font-size:22px}
.title-credit{
margin-top:55px}
.title-credit>p:first-child{
font-size:21px}
.title-credit .small{
font-size:17px}
.columns,.grid-2,.comparison{
grid-template-columns:1fr;
gap:22px}
.feature-list>div{
grid-template-columns:1fr;
gap:8px}
.roadmap{
gap:26px;
padding-left:1.55em}
.roadmap li{
padding-left:9px}
.roadmap span{
font-size:20px}
.steps{
gap:24px}
.layout-content .slide-inner:has(>.steps:last-child){
justify-content:flex-start;
gap:24px}
.layout-split .slide-inner{
display:flex;
align-items:stretch;
gap:24px}
.screenshot-img{
max-height:none}
.layout-content figure .screenshot-img{
max-height:150px}
.note,.tip-box{
padding-left:14px}
.prompt-block{
padding:18px;
font-size:22px}
.prompt-container>pre{
padding-top:64px}
.prompt-container>.copy-btn,.prompt-container>[data-example-copy]{
min-height:44px}
.long-prompt-slide .prompt-good{
max-height:none;
overflow:visible;
min-height:0;
font-size:20px}
.rubric,.rubric tbody,.rubric tr,.rubric th,.rubric td{
display:block}
.rubric thead{
display:none}
.rubric tr{
border-top:1px solid var(--border);
padding:13px 0}
.rubric th:first-child{
width:100%}
.rubric th,.rubric td{
border:0;
padding:6px 0;
font-size:22px}
#outline-dialog{
width:calc(100vw - 24px);
max-width:calc(100vw - 24px);
max-height:calc(100dvh - 24px);
padding:20px 18px}
#outline-dialog .dialog-heading{
gap:12px;
margin-bottom:20px}
#outline-dialog .dialog-heading h2{
font-size:22px;
line-height:1.25}
#outline-dialog .dialog-heading button{
flex:none;
min-height:44px;
padding:7px 10px;
font-size:15px}
#outline-dialog .dialog-heading button:focus-visible{
outline-offset:2px}
#outline-dialog .series-links{
gap:12px;
font-size:19px;
padding-left:1.25em}
#outline-dialog>.small{
padding:12px 0;
font-size:16px}
#outline-list button{
font-size:17px;
min-height:44px;
padding:9px 8px;
gap:12px}
#outline-list .outline-number{
min-width:24px}
.layout-divider .slide-inner{
justify-content:center}
.source,.small{
font-size:var(--support)}
}
@media(max-width:600px), (pointer:coarse) and (max-width:1100px), (max-height:500px) and (max-width:1100px){
:root{--nav-height:calc(112px + env(safe-area-inset-bottom,0px))}
#nav-bar{
display:grid;
grid-template-columns:44px minmax(64px,1fr) 44px 44px auto;
grid-template-rows:44px 44px;
gap:4px 8px;
padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
font-size:16px}
#nav-bar button{font-size:15px;padding:8px;min-width:44px;min-height:44px}
#slide-progress{grid-column:1 / -1;grid-row:1;width:100%;min-width:0;height:44px;margin:0}
#overview-button{justify-self:end}
.nav-info{
display:flex;
align-items:center;
justify-content:center;
column-gap:4px;
min-width:0;
min-height:44px;
line-height:1.2;
color:var(--text);
font-variant-numeric:tabular-nums}
#nav-bar svg{width:20px}
}
@media(max-height:500px) and (min-width:601px) and (max-width:1100px){
:root{--nav-height:calc(66px + env(safe-area-inset-bottom,0px))}
#nav-bar{display:flex;padding-top:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.nav-info{min-width:110px}
#slide-progress{width:auto}
}
@media(max-height:800px) and (min-width:901px){
.slide-inner{
padding-top:24px;
padding-bottom:24px;
gap:17px}
:root{
--body:clamp(26px,2.25vw,32px);
--support:clamp(22px,1.9vw,27px)}
.title-credit{
margin-top:45px}
.long-prompt-slide .prompt-good{
max-height:calc(100dvh - 220px)}
.roadmap{
gap:16px}
.steps{
gap:24px}
.rubric th,.rubric td{
padding-top:12px;
padding-bottom:12px}
}
@media print{
@page{
size:landscape;
margin:15mm}
html,body{
height:auto;
overflow:visible;
background:white;
color:black;
font-size:14pt}
#deck{
height:auto}
#nav-bar,.deck-header,dialog,.copy-btn,.skip-link,.sr-only{
display:none!important}
.slide{
display:block!important;
position:relative;
overflow:visible;
break-after:page;
page-break-after:always}
.slide-inner{
min-height:0;
padding:0;
display:block!important}
.slide .slide-inner>*{
margin-bottom:15px}
.long-prompt-slide .prompt-good{
max-height:none;
overflow:visible;
color:black;
font-size:12pt;
break-inside:avoid}
.prompt-block{
border-color:#bbb;
background:#f4f4f4;
color:black;
font-size:12pt}
p,span,li,dd,strong,h1,h2,h3,h4{
color:black!important}
.title-slide .series-position{
position:static}
.title-credit{
margin-top:40px}
.screenshot-img{
max-height:120mm}
.source{
font-size:11pt}
.rubric{
font-size:12pt}
}
@media(max-width:600px){
.sample-prompt-slide .prompt-block{
font-size:22px}
.progression-slide .columns{
font-size:23px}
.long-prompt-slide .prompt-good{
max-height:none}
}
@media print{
.long-prompt-slide .prompt-good{
max-height:none}
}

@media print {
.rubric td, .label, .section-label, figcaption, a { color: #111 !important; }
}

/* Screenshot slides reserve the viewport for the image. */
.screenshot-slide .slide-inner { display:flex; height:100%; min-height:0; padding:18px 24px 12px; gap:12px; justify-content:flex-start; }
.response-comparison-slide .slide-inner { gap:32px; }
.screenshot-slide h1 { font-size:var(--heading); line-height:1.13; flex:none; max-width:none; margin:0; }
.screenshot-slide figure { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
body[data-workshop="knowledge"] .screenshot-slide figure { gap:clamp(24px,3.2vh,32px); }
.screenshot-slide figure .screenshot-img { width:100%; max-width:var(--screenshot-max-width,100%); align-self:center; flex:0 1 auto; height:auto; min-height:0; max-height:none; object-fit:contain; object-position:center top; border:0; border-radius:0; background:transparent; }
.screenshot-slide figcaption { flex:none; margin:0; font-size:var(--support); line-height:1.35; max-width:none; }
.slide [data-fragment-step][hidden] { display:none; }
.exercise-slide [data-fragment-step] { display:flex; flex-direction:column; gap:22px; }
.exercise-slide [data-fragment-step] > :is(p,ul,ol,.grid-2) { margin:0; }
.exercise-slide [data-fragment-step] > h3 { margin:0; font-size:clamp(24px,2vw,30px); }
.model-options .card { display:flex; flex-direction:column; gap:12px; padding:24px; border:1px solid var(--border); border-radius:10px; }
.model-options .model-kind { font-size:var(--support); }
.model-options h4 { margin:0; font-size:var(--body); }
.model-options .card>p { margin:0; }
.exercise-slide [data-fragment-step] > .exercise-followup { max-width:none; padding-top:20px; border-top:1px solid var(--border); font-size:var(--support); }
.prompt-control-slide .prompt-control-layout figure { align-self:start; }
.prompt-control-slide .prompt-control-layout figure .screenshot-img { flex:none; height:auto; }
.prompt-control-slide figcaption a { overflow-wrap:anywhere; }
.agenda { display:grid; gap:10px; }
.agenda li+li { margin:0; }
@media(max-width:600px) { .screenshot-slide .slide-inner { padding:16px 10px 8px; gap:10px; } .screenshot-slide figcaption { font-size:20px; } body[data-workshop="knowledge"] .screenshot-slide figure { gap:20px; } }
@media print { .screenshot-slide .slide-inner { height:auto; } .screenshot-slide figure .screenshot-img { height:auto; max-height:70vh; } }

@media(max-width:900px){
.prompt-control-slide .slide-inner{
height:auto;
min-height:100%}
.prompt-control-layout{
flex:none;
grid-template-columns:1fr}
.prompt-control-slide .prompt-control-layout figure .screenshot-img{
flex:none;
height:auto;
max-height:none}
.prompt-control-copy{
align-self:stretch}
.prompt-control-copy .prompt-block{
font-size:22px}
}
@media(max-width:600px){
.screenshot-slide .slide-inner{
height:auto;
min-height:100%}
.screenshot-slide figure{
flex:none}
.screenshot-slide figure .screenshot-img{
flex:none;
height:auto}
.response-comparison{
grid-template-columns:1fr;
gap:40px}
.response-comparison-slide .slide-inner{gap:24px}
.response-comparison figure>h2{
font-size:24px}
.response-comparison-slide .response-comparison figure{
gap:18px}
}
@media print{
.slide [data-fragment-step][hidden] { display:block; }
.response-comparison,.prompt-control-layout{
display:grid}
.prompt-control-slide .prompt-control-layout figure .screenshot-img{
height:auto}
}

@media screen and (max-width:600px) {
  .fragment-slide .slide-inner { height:100%; min-height:0; }
  .fragment-slide figure { flex:1; }
  .fragment-slide figure .screenshot-img { flex:1; height:0; }
  .component-list,.stream-list.component-list { grid-template-columns:1fr; gap:20px; }
  .component-list>li { padding-top:16px; }
  #image-dialog {
    width:100vw;
    height:100dvh;
    max-width:100vw;
    max-height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
    padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  }
  #image-dialog[open] { gap:10px; }
  #image-dialog p { font-size:18px; }
}

/* Keep returning exercise content directly below its heading. */
.workflow-slide [data-fragment-step] { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; gap:24px; }
.workflow-slide [data-fragment-step] > figure { flex:1; }
.workflow-slide [data-fragment-step].comparison-instructions {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
  align-content:start;
  gap:clamp(32px,5vw,72px);
}
.comparison-instructions > p { margin:0; }
.comparison-instructions > p + p { padding-left:32px; border-left:1px solid var(--border); }
@media(max-width:900px) {
  .workflow-slide [data-fragment-step].comparison-instructions { grid-template-columns:1fr; gap:28px; }
  .comparison-instructions > p + p { padding:24px 0 0; border-left:0; border-top:1px solid var(--border); }
}
@media (max-width:600px) {
  .workflow-slide [data-fragment-step] { flex:none; min-height:0; }
  .workflow-slide [data-fragment-step] > figure { flex:none; }
}

.screenshot-aside .screenshot-columns{min-height:0;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:24px 36px}
.screenshot-aside .screenshot-columns>h1{grid-column:2;grid-row:1;align-self:end}
.screenshot-aside .screenshot-columns>figure{display:contents}
.screenshot-aside .screenshot-columns .screenshot-img{grid-column:1;grid-row:1/3;align-self:stretch;flex:none;height:100%;max-height:100%;object-position:center}
.screenshot-aside .screenshot-columns figcaption{grid-column:2;grid-row:2;align-self:start}
.screenshot-slide .slide-footer{font-size:22px}
@media(min-width:1001px) and (max-width:1100px) and (max-height:800px){
 .slide-inner{padding:16px 32px}
 .task-columns{column-gap:32px}
 .task-copy,.task-example{gap:16px}
}
@media(max-width:1000px){
 .lowered-content .slide-inner,.lowered-reflection .slide-inner:has(>[data-fragment-step="1"]:not([hidden])){padding-top:clamp(48px,8vh,80px)}
 .task-columns{grid-template-columns:1fr;gap:32px;align-content:start}
 .task-layout .slide-inner{justify-content:flex-start}
 .task-example .prompt-block{font-size:24px}
 .roadmap.roadmap-columns,.feature-list.feature-columns{grid-template-columns:1fr;gap:24px}
 .roadmap-columns>li{display:block;grid-row:auto}
 .roadmap-columns span{margin-top:12px}
 .feature-columns>div{gap:10px}
 .screenshot-aside .slide-inner{height:auto;min-height:100%}
 .screenshot-aside .screenshot-columns{display:flex;flex-direction:column;gap:18px;flex:none}
 .screenshot-aside .screenshot-columns>h1{align-self:stretch}
 .screenshot-aside .screenshot-columns>figure{display:flex;flex:none;gap:18px}
 .screenshot-aside .screenshot-columns .screenshot-img{width:100%;height:auto;flex:none;max-height:none}
 .screenshot-aside .screenshot-columns figcaption{align-self:stretch}
}
@media(max-width:600px){
 .slide[data-agenda="prompts"] .agenda{font-size:26px}
 .slide-stack{justify-content:flex-start}
 .slide-footer,.screenshot-slide .slide-footer{font-size:20px;row-gap:12px}
 .slide-footer>a{flex-wrap:wrap;column-gap:8px}
 .slide-footer .link-label{max-width:100%}
 .agenda.agenda-columns{columns:1}
 .agenda-columns>li{padding-right:0;margin-bottom:14px}
 .comparison-columns{grid-template-columns:1fr;gap:24px}
 .comparison-columns>li:first-child{grid-column:auto}
 .comparison-columns>li:not(:first-child){padding-top:0;border:0}
 .task-copy,.task-example{gap:22px}
}

@media(max-width:700px){
 .resource-directory{grid-template-columns:1fr;gap:24px}
 .resource-group{display:block}
 .resource-group ul{display:grid;gap:20px;padding:0;margin-top:14px}
 .resource-group .link-url{font-size:20px}
 :root{--header-height:54px}
 .deck-header{padding-inline:max(23px,env(safe-area-inset-left,0px)) max(23px,env(safe-area-inset-right,0px));padding-block:calc(5px + env(safe-area-inset-top,0px)) 5px}
 .deck-brand{width:156px}
 .discussion-slide .slide-inner{gap:24px}
 .discussion-questions,.sign-in-columns{grid-template-columns:1fr;gap:28px}
 .discussion-questions p{font-size:clamp(26px,7vw,30px)}
}

@media(min-width:1001px) and (max-height:800px){
 .sign-in-slide .slide-inner{gap:14px;padding-top:20px;padding-bottom:20px}
 .slide-stack:has(.rubric){gap:16px}
 .rubric th,.rubric td{padding-top:8px;padding-bottom:8px}
 .skill-test-slide .slide-stack{gap:16px;line-height:1.35}
}
.skill-test-slide .comparison-steps{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:24px 48px;
 max-width:none;
}
.skill-test-slide .comparison-steps li+li{margin:0}
.skill-test-slide .comparison-steps>li:nth-child(4){padding-top:14px;border-top:1px solid var(--border)}
@media(max-width:1000px){
 .skill-test-slide .comparison-steps{grid-template-columns:1fr}
}

/* Center selected content groups together; preserve full-size screenshot steps. */
@media screen and (min-width:1001px){
 .balanced-content:not(.workflow-slide),
 .balanced-content.workflow-slide:has([data-fragment-step="1"]:not([hidden])){
  --body:clamp(30px,2.45vw,36px);
  font-size:var(--body);
 }
 .balanced-content:not(.workflow-slide) .slide-inner,
 .balanced-content.workflow-slide .slide-inner:has(>[data-fragment-step="1"]:not([hidden])){
  padding-top:clamp(28px,4.4vh,54px);
  padding-bottom:clamp(28px,4.4vh,54px);
  justify-content:safe center;
 }
 .balanced-content .slide-body{flex:none;margin-block:auto}
 .balanced-content .slide-footer{margin-top:0}
 .balanced-content .task-example .prompt-block{font-size:var(--body)}
 .balanced-content.response-comparison-slide .response-comparison{flex:none}
 .balanced-content.response-comparison-slide .response-comparison figure>h2{font-size:var(--body)}
 .balanced-content.workflow-slide [data-fragment-step="1"]{flex:none}
}

/* Keep destinations visible and wrap long model URLs within their cards. */
.raw-url { overflow-wrap:anywhere; }
.model-options .raw-url { font-size:var(--support); line-height:1.3; }
.source-urls { display:flex; flex-wrap:wrap; gap:4px 24px; font-size:24px; line-height:1.3; }
.slide-footer > .link-label { display:block; }
.resource-group li > .resource-label { display:block; }


/* Spatial rhythm: group instructions, retain image clearance, and align edges. */
.screenshot-slide .slide-inner { padding-inline:clamp(24px,5vw,72px); gap:20px; }
.screenshot-slide figcaption { display:grid; gap:12px; line-height:1.4; }
.screenshot-slide figcaption p + p { margin-top:0; }
.screenshot-slide figcaption p { max-width:78ch; }
.resource-slide .slide-inner { gap:12px; padding-block:20px; }
.resource-directory { gap:16px 40px; padding-top:4px; }
.resource-group { gap:10px; }
.resource-group li { padding-top:8px; }
body[data-workshop="knowledge"] .resource-directory { grid-template-columns:1fr; flex:none; gap:24px; }
body[data-workshop="knowledge"] .resource-group { display:grid; grid-template-columns:190px minmax(0,1fr); gap:12px 32px; }
body[data-workshop="knowledge"] .resource-group h3 { padding-top:10px; }
body[data-workshop="knowledge"] .resource-group ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px; padding:0; }
@media(max-width:900px) {
  body[data-workshop="knowledge"] .resource-group { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 .screenshot-slide .slide-inner { padding-inline:23px; gap:18px; }
 .screenshot-slide figcaption { gap:14px; }
 body[data-workshop="knowledge"] .resource-group ul { grid-template-columns:1fr; }
 .resource-group ul { margin-top:8px; }
}

@media screen and (min-width:1001px) {
 .layout-content:not(.resource-slide):not(.title-slide) .slide-body { flex:none; margin-block:auto; }
}

/* Retain full context on desktop; enlarge both directory controls on phones. */
.directory-screenshot { display:contents; }
@media screen and (max-width:600px) {
 .screenshot-slide .directory-screenshot .screenshot-img {
  width:100%; max-width:440px; height:auto; flex:none;
  padding:16px; background:#151515; border-radius:8px; box-sizing:border-box;
 }
}