/* Neutral Open WebUI palette;
no remote fonts or presentation dependencies. */
:root{
color-scheme:dark;
--bg:#171717;
--surface:#242424;
--text:#f1f1f1;
--muted:#cdcdcd;
--border:#454545;
--body:clamp(26px,2.25vw,32px);
--heading:clamp(36px,3.2vw,44px);
--nav-height:calc(66px + env(safe-area-inset-bottom,0px));
--header-height:58px;
--support:clamp(22px,1.9vw,27px);
--accent-cyan:var(--text);
--accent-blue:var(--text);
--accent-red:var(--text);
--accent-amber:var(--text);
--accent-green:var(--text)}
*{
box-sizing:border-box}
html,body{
margin:0;
width:100%;
height:100%;
overflow:hidden}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
background:var(--bg);
color:var(--text);
font-size:var(--body);
line-height:1.48;
-webkit-font-smoothing:antialiased}
button,input{
font:inherit}
button,a,input{
touch-action:manipulation}
a{
color:inherit;
text-decoration:underline;
text-underline-offset:4px;
text-decoration-color:#818181}
a:hover{
text-decoration-color:var(--text)}
button{
cursor:pointer;
color:var(--text);
background:transparent;
border:1px solid var(--border);
border-radius:7px;
padding:9px 15px}
button:hover{
background:#303030}
button:disabled{
opacity:.35;
cursor:default}
:focus-visible{
outline:2px solid #eee;
outline-offset:5px}
h1,h2,h3,h4,p,ol,ul,figure,dl{
margin:0}
h1,h2{
font-weight:580;
letter-spacing:-.033em;
line-height:1.13;
text-wrap:balance}
h1{
font-size:var(--heading);
max-width:1050px}
h2{
font-size:var(--heading);
margin-bottom:28px;
max-width:1050px}
h3,h4{
font-size:1em;
font-weight:650;
line-height:1.3;
margin-bottom:12px}
p+ p{
margin-top:20px}
p,li,dd{
max-width:68ch;
text-wrap:pretty}
p{
color:var(--muted)}
strong{
color:var(--text);
font-weight:650}
ul,ol{
padding-left:1.25em}
li+li{
margin-top:14px}
#deck{
height:calc(100dvh - var(--nav-height) - var(--header-height) - env(safe-area-inset-top,0px));
width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
margin:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);
position:relative}
.deck-header{
height:calc(var(--header-height) + env(safe-area-inset-top,0px));
padding:calc(7px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 7px max(24px,env(safe-area-inset-left,0px));
display:flex;
align-items:center;
justify-content:flex-end}
.deck-brand{
display:flex;
align-items:center;
min-height:44px;
width:184px;
border-radius:3px}
.deck-brand img{display:block;width:100%;height:auto}
body:has(.workshop-cover.active) .deck-header{display:none}
body:has(.workshop-cover.active) #deck{height:calc(100dvh - var(--nav-height))}
#deck{touch-action:pan-y pinch-zoom}
.discussion-slide .slide-inner{gap:32px}
.lowered-content .slide-inner,.lowered-reflection .slide-inner:has(>[data-fragment-step="1"]:not([hidden])){padding-top:clamp(72px,16vh,180px)}
.slide[data-agenda="prompts"] .agenda{font-size:clamp(30px,2.7vw,38px);line-height:1.4;gap:16px}
.discussion-questions{
flex:1;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start;
align-content:start;
gap:clamp(36px,5vw,80px)}
.discussion-questions p{
font-size:clamp(32px,3vw,42px);
line-height:1.35;
color:var(--text);
text-wrap:balance;
margin:0}
.sign-in-columns{
flex:1;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start;
align-content:start;
gap:clamp(36px,5vw,80px)}
.sign-in-columns>div{display:flex;flex-direction:column;gap:16px;min-width:0}
.sign-in-columns h3,.sign-in-columns p{margin:0}
.sign-in-columns .steps{gap:16px;line-height:1.35}
.slide{
position:absolute;
inset:0;
display:none;
overflow:auto;
overscroll-behavior:contain}
.slide.active{
display:block}
.slide-inner{
width:min(1440px,100%);
min-height:100%;
padding:clamp(28px,4.4vh,54px) clamp(26px,5vw,84px);
margin:auto;
display:flex;
flex-direction:column;
justify-content:flex-start;
gap:22px}
.slide-inner>h2{
margin-bottom:8px}
.slide-inner>p{
max-width:1000px;
margin-top:0}
.title-slide .slide-inner{
position:relative;
justify-content:center;
gap:0}
.series-position{
position:absolute;
top:38px;
right:clamp(26px,5vw,84px);
font-size:18px}
.title-copy{
margin-top:10px}
.subtitle{
font-size:24px;
line-height:1.45;
margin-top:28px;
color:#bbb}
.title-credit{
margin-top:75px}
.title-credit>p:first-child{
font-size:24px;
color:#ddd}
.title-credit p+p{
margin-top:6px}
.small,.source{
font-size:var(--support);
line-height:1.4;
color:var(--muted)}
.source{
margin-top:4px}
.lead{
font-size:clamp(28px,2.5vw,34px);
line-height:1.4;
color:var(--text);
max-width:1000px}
.note,.tip-box{
font-size:var(--support);
line-height:1.45;
border-left:2px solid #666;
padding:4px 0 4px 20px;
margin-top:8px;
max-width:1000px}
.note p,.tip-box p{
color:var(--muted)}
.steps{
display:grid;
gap:clamp(24px,3.2vh,36px);
max-width:62ch;
padding-inline-start:1.5em}
.steps>li{
padding-inline-start:.2em;
text-wrap:balance}
.steps li+li{
margin-top:0}
.layout-content .slide-inner:has(>.steps:last-child){
justify-content:flex-start;
gap:clamp(28px,4vh,44px)}
.columns,.grid-2,.comparison{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:35px}
.columns>div,.card,.comparison-panel{
border-top:1px solid var(--border);
padding-top:20px}
.grid-2{
gap:28px 38px}
.card p{
font-size:var(--body)}
.roadmap{
list-style:decimal-leading-zero;
display:grid;
gap:24px;
padding-left:2.2em;
max-width:1100px}
.roadmap li{
padding-left:18px;
margin:0}
.roadmap li::marker{
color:#929292;
font-size:20px}
.roadmap strong,.roadmap span{
display:block}
.roadmap span{
color:var(--muted);
font-size:.94em;
margin-top:5px}
.feature-list{
display:grid;
gap:22px}
.feature-list>div{
display:grid;
grid-template-columns:260px 1fr;
gap:30px;
border-top:1px solid var(--border);
padding-top:19px}
.feature-list dt{
font-weight:650}
.feature-list dd{
margin:0;
color:var(--muted)}
.layout-split .slide-inner{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
align-items:center;
gap:48px}
.content,.stage{
min-width:0}
.content>p{
margin-bottom:22px}
.content ul,.content ol{
font-size:.94em}
.stage{
display:flex;
flex-direction:column;
gap:22px}
.stage .template{
width:100%}
.stage .prompt-block{
font-size:clamp(24px,2vw,28px)}
.stage .small{
margin-top:12px}
figure{
width:100%}
.screenshot-img{
display:block;
width:100%;
height:auto;
max-height:64dvh;
object-fit:contain;
cursor:zoom-in;
border:1px solid #424242;
border-radius:8px;
background:#141414}
figcaption{
font-size:var(--support);
color:var(--muted);
line-height:1.45;
margin-top:12px}
.layout-content figure .screenshot-img{
max-height:160px;
object-fit:contain}
.response-slide .quoted-prompt{
margin:12px 0;
font-size:clamp(32px,3.2vw,44px);
line-height:1.35}
.response-slide .quoted-prompt p{
color:var(--text)}
.template{
position:relative}
.copy-btn{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:flex-end;
width:auto;
margin:0 0 8px auto;
padding:4px 8px;
font-size:13px;
line-height:20px;
min-height:30px}
.prompt-container{
position:relative;
min-width:0}
.prompt-container>.copy-btn,.prompt-container>[data-example-copy]{
position:absolute;
top:8px;
right:8px;
z-index:1;
margin:0;
padding:4px 8px;
font-size:13px;
line-height:20px;
min-height:30px;
background:var(--surface)}
.prompt-container>pre{
padding-top:52px}
.prompt-block{
font-family:inherit;
white-space:pre-wrap;
font-size:clamp(24px,2vw,28px);
line-height:1.45;
background:var(--surface);
color:var(--text);
padding:24px 28px;
border:1px solid #3c3c3c;
border-radius:10px;
overflow-wrap:anywhere;
max-width:100%;
margin:0;
overflow:auto;
scrollbar-color:#666 var(--surface)}
.prompt-block .prompt-label{
display:block;
font-size:var(--support);
color:var(--muted);
margin-bottom:14px}
.prompt-block.prompt-bad{
background:transparent;
padding-left:0;
border:0;
border-bottom:1px solid var(--border);
border-radius:0;
padding-bottom:22px;
font-size:1.2em}
.long-prompt-slide .prompt-good{
max-height:calc(100dvh - 250px);
min-height:200px;
font-size:clamp(24px,2vw,28px);
line-height:1.5}
.long-prompt-slide .slide-inner{
gap:12px}
.long-prompt-slide h2{
font-size:var(--heading)}
.label,.section-label{
font-size:22px;
color:var(--muted);
display:block;
margin-bottom:15px}
.progression-header{
display:flex;
align-items:center;
gap:20px}
.progression-header .label{
margin:0}
.progression-dots,.divider-line{
display:none}
.layout-divider h2{
font-size:var(--heading);
max-width:900px}
.layout-divider .slide-inner{
justify-content:center;
gap:5px}
.why-better{
margin-top:2px}
.why-better ul{
font-size:.9em}
.rubric{
border-collapse:collapse;
width:100%;
font-size:var(--body)}
.rubric th,.rubric td{
padding:18px 20px 18px 0;
border-bottom:1px solid var(--border);
text-align:left;
vertical-align:top}
.rubric th{
font-weight:600;
color:var(--text)}
.rubric td{
color:var(--muted)}
.rubric th:first-child{
width:30%}
.rubric thead th{
font-size:var(--support);
color:var(--muted);
font-weight:500}
#nav-bar{
position:fixed;
inset:auto 0 0;
height:var(--nav-height);
display:flex;
align-items:center;
gap:15px;
padding:0 max(30px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(30px,env(safe-area-inset-left,0px));
border-top:1px solid var(--border);
background:var(--bg);
z-index:5;
font-size:20px}
#nav-bar button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 10px;
min-height:44px;
border-color:transparent}
#nav-bar button:hover{
border-color:#555}
#nav-bar svg{
width:23px;
height:23px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round}
.nav-brand{
margin-right:12px;
color:var(--muted)}
.nav-info{
min-width:58px;
text-align:center;
color:var(--muted);
touch-action:pan-y;
user-select:none;
-webkit-user-select:none}
#slide-progress{
flex:1;
min-width:120px;
height:44px;
margin:0 15px;
appearance:none;
-webkit-appearance:none;
background:transparent;
cursor:pointer;
touch-action:pan-y}
#slide-progress::-webkit-slider-runnable-track{
height:8px;
border-radius:4px;
background:#666}
#slide-progress::-webkit-slider-thumb{
appearance:none;
-webkit-appearance:none;
width:26px;
height:26px;
margin-top:-9px;
border:2px solid var(--bg);
border-radius:50%;
background:var(--text)}
#slide-progress::-moz-range-track{
height:8px;
border-radius:4px;
background:#666}
#slide-progress::-moz-range-thumb{
width:24px;
height:24px;
border:2px solid var(--bg);
border-radius:50%;
background:var(--text)}
.access-link a{overflow-wrap:anywhere;font-size:clamp(22px,2.6vw,32px)}
dialog{
background:#1d1d1d;
color:var(--text);
border:1px solid #555;
border-radius:12px;
max-width:calc(100vw - 40px);
max-height:calc(100dvh - 40px);
padding:25px}
dialog::backdrop{
background:#000c}
#image-dialog{
width:min(1440px,calc(100vw - 32px));
height:calc(100dvh - 32px);
max-width:none;
max-height:none;
padding:16px;
overflow:hidden}
#image-dialog[open]{
display:flex;
flex-direction:column;
gap:14px}
.image-toolbar{
display:flex;
justify-content:flex-end;
gap:10px;
flex:none}
.image-toolbar button{
font-size:17px;
min-height:44px}
#image-stage{
flex:1;
min-height:0;
min-width:0;
overflow:auto;
background:#111;
overscroll-behavior:contain;
touch-action:pan-x pan-y;
scrollbar-color:#777 #111}
#image-dialog img{
display:block;
width:100%;
height:100%;
max-width:none;
max-height:none;
margin:0;
object-fit:scale-down}
#image-stage.is-zoomed img{
width:var(--zoom-width);
height:auto;
object-fit:contain}
#image-dialog p{
flex:none;
font-size:20px;
line-height:1.4;
max-width:none;
margin:0}
#image-dialog p:empty{display:none}
#outline-dialog{
width:min(850px,90vw)}
.dialog-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
margin-bottom:20px}
.dialog-heading h2{
font-size:28px;
margin:0}
.dialog-heading button{
font-size:16px}
#outline-dialog .dialog-heading{
position:sticky;
top:0;
z-index:2;
background:#1d1d1d;
padding-bottom:12px}
#outline-list{
margin:16px 0 0;
padding:16px 0 0;
border-top:1px solid var(--border);
list-style:none;
display:grid;
gap:2px}
#outline-list li{
margin:0}
#outline-list button{
border:0;
width:100%;
display:flex;
text-align:left;
gap:18px;
font-size:19px;
border-radius:5px}
#outline-list .outline-number{
color:var(--muted);
min-width:28px}
#outline-list button[aria-current]{
background:#353535}
[hidden]{
display:none!important}
.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}
.skip-link{
position:fixed;
top:-100px;
left:16px;
z-index:10;
background:#eee;
color:#111;
padding:12px;
font-size:18px}
.skip-link:focus{
top:10px}
.progression-slide .slide-inner{
gap:18px}
.progression-slide .columns{
font-size:var(--body);
gap:36px}
.progression-slide .columns>div{
padding-top:17px}
.progression-slide .columns ul{
font-size:inherit}
.progression-slide .prompt-mid{
font-size:clamp(24px,2vw,28px)}
.sample-prompt-slide .prompt-block{
font-size:clamp(24px,2vw,28px);
line-height:1.38}
.sample-prompt-slide .slide-inner{
gap:16px}
.sample-prompt-slide .copy-btn{
margin-bottom:7px}
.long-prompt-slide .prompt-good{
max-height:calc(100dvh - 278px)}

/* Shared series controls and imported content. */
.series-links { display:grid; gap:12px; margin:0 0 20px; line-height:1.4; }
.series-links li { margin:0; padding-left:4px; }
.series-links .unavailable { color:#858585; }
#outline-dialog>.small { margin:0; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); line-height:1.6; }
#outline-dialog .series-links a[aria-current] { font-weight:700; }
.layout-split .slide-inner > h2 { grid-column:1 / -1; }
.step-hidden { opacity:1; visibility:visible; }
.template-code { white-space:pre-wrap; overflow-wrap:anywhere; }
.template-header { display:flex; justify-content:flex-end; }
.template-box { min-width:0; }
.label, .section-label { color:var(--muted); }
.progression-header { flex-wrap:wrap; }
.slide-inner > .content { min-width:0; }
.prompt-block { overflow-wrap:anywhere; }
.prompt-block .prompt-label { display:block; }
.flow-arrow, .divider-line { color:var(--muted); }
.series-position { font-size:22px; }
@media (max-width:600px) { #nav-bar { gap:5px; padding:8px; } #nav-bar button { font-size:14px; padding:8px; } }

/* Authentic response crops stay at or below their captured pixel width. */
.response-comparison{
flex:1;
min-height:0;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(40px,5vw,72px);
align-content:start;
align-items:start}
.response-comparison-slide .response-comparison figure{
flex:none;
gap:24px;
align-items:flex-start}
.response-comparison figure>h2{
font-size:28px;
margin:0}
.response-comparison-slide .response-comparison .screenshot-img{
flex:none;
width:auto;
max-width:100%;
height:auto;
min-height:0}
.prompt-control-layout{
flex:1;
min-height:0;
display:grid;
grid-template-columns:minmax(0,1.85fr) minmax(320px,1fr);
gap:24px;
align-items:stretch}
.prompt-control-copy{
min-width:0;
align-self:start;
display:flex;
flex-direction:column;
gap:20px}
.prompt-control-copy>p{
font-size:var(--support);
line-height:1.4}
.prompt-control-copy .prompt-block{
font-size:clamp(24px,1.9vw,27px);
line-height:1.4;
padding:54px 20px 20px}

/* Keep explanations aligned and distinguish parallel components. */
.layout-content .slide-inner{text-align:left}
.component-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px 32px;
list-style:none;
padding:0}
.component-list>li{
margin:0;
padding:20px 0 0;
border-top:1px solid var(--border)}
.stream-list.component-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.comparison-steps{list-style:none;padding-left:0}
.comparison-steps>li:nth-child(-n+2){
border-left:2px solid #777;
padding-left:18px}
.comparison-steps>li:nth-child(3){
padding-top:14px;
border-top:1px solid var(--border)}

/* Pair instructions with examples; keep references below slide content. */
.slide-body{flex:1;min-width:0}
.slide-stack{display:flex;flex-direction:column;justify-content:flex-start;gap:24px}
.slide-stack>h1,.slide-stack>h2,.slide-stack>p{margin:0}
.task-columns{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4vw,64px);align-items:start;align-content:start}
.task-copy,.task-example{min-width:0;display:flex;flex-direction:column;gap:24px}
.task-copy>h1,.task-copy>h2,.task-copy>p,.task-example>p{margin:0}
.task-copy>h1,.task-copy>h2{max-width:none}
.task-example .prompt-block{font-size:clamp(26px,2.1vw,30px);line-height:1.45}
.task-example .columns{grid-template-columns:1fr;gap:24px}
.task-example .columns>div{padding-top:16px}
.task-columns .steps{max-width:none}
.slide-footer{flex:none;margin-top:auto;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;column-gap:28px;row-gap:8px;font-size:22px;line-height:1.3;min-width:0}
.slide-footer>a{display:inline-flex;align-items:baseline;gap:4px 12px;min-width:0;max-width:100%;overflow-wrap:anywhere;text-decoration:none}
.slide-footer .link-label{flex:none;color:var(--muted)}
.slide-footer .link-url{min-width:0;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#818181}
.slide-footer>a:hover .link-url{text-decoration-color:var(--text)}
.slide-footer>a:not(:has(.link-url)){text-decoration:underline}
.slide-footer>.footer-action{margin:0;font-size:inherit;line-height:inherit}
.resource-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;flex:1;margin:0;padding-top:12px;border:0}
.resource-group{display:flex;flex-direction:column;gap:16px;min-width:0}
.resource-group h3{font-size:var(--support);margin:0;color:var(--muted)}
.resource-group ul{display:contents;list-style:none}
.resource-group li{min-width:0;max-width:none;margin:0;padding-top:12px;border-top:1px solid var(--border)}
.resource-group a{display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none}
.resource-label{font-size:var(--body);color:var(--text)}
.resource-group .link-url{font-size:22px;line-height:1.3}
.resource-group a:hover .link-url{text-decoration-color:var(--text)}
.agenda.agenda-columns{display:block;columns:2;column-gap:64px;padding-left:1.4em}
.agenda-columns>li{break-inside:avoid;padding:0 16px 0 8px;margin:0 0 18px}
.agenda.agenda-columns>li+li{margin:0 0 18px}
.roadmap.roadmap-columns{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;list-style:none;padding:0;gap:32px}
.roadmap-columns>li{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:18px;padding:20px 0 0;border-top:1px solid var(--border)}
.roadmap-columns span{margin-top:0}
.feature-list.feature-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.feature-columns>div{display:flex;flex-direction:column;gap:16px;min-width:0}
.feature-columns:has(>div:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.comparison-columns{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;column-gap:64px;row-gap:32px}
.comparison-columns>li:first-child{grid-column:1/-1}
.comparison-columns>li:not(:first-child){padding-top:20px;border-top:1px solid var(--border)}

.roadmap-dated>li{grid-row:span 3}
.roadmap-dated .workshop-date{display:block;color:#d3b98b;font-size:clamp(22px,1.9vw,26px);line-height:1.4}
@media(max-width:1000px){.roadmap-dated .workshop-date{margin-top:14px}}