:root{color-scheme:light;--bg:#f7f7f5;--ink:#182c33;--muted:#526663;--petrol:#24666a;--sage:#dcefe1;--gold:#f4eac8;--card:#fff;--line:#cbd7d3;--focus:#a94a29;--shadow:3px 6px 18px #182c3314;--radius:16px}
:root[data-theme=dark]{color-scheme:dark;--bg:#142629;--ink:#eef5ef;--muted:#bacdc5;--petrol:#99d4ce;--sage:#244c46;--gold:#54472a;--card:#1b3438;--line:#4a6563;--focus:#ffbb94;--shadow:3px 6px 18px #0003}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#142629;--ink:#eef5ef;--muted:#bacdc5;--petrol:#99d4ce;--sage:#244c46;--gold:#54472a;--card:#1b3438;--line:#4a6563;--focus:#ffbb94;--shadow:3px 6px 18px #0003}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}a{color:var(--petrol);text-underline-offset:.18em}button,.button,select,input,textarea,summary{font:inherit}button,.button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:.5em .85em;border-radius:9px;cursor:pointer;display:inline-block;text-decoration:none;line-height:1.2}button:hover,.button:hover{border-color:var(--petrol);background:var(--sage)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--petrol);border-color:var(--petrol);color:var(--bg);font-weight:650}.primary:hover{background:var(--ink);color:var(--bg)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}input,select,textarea{max-width:100%;min-width:0;padding:.45em .6em;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink)}textarea{resize:vertical}label{display:block}label>input:not([type=checkbox]),label>select,label>textarea{display:block;width:100%;margin-top:.2em}.check{display:flex;align-items:flex-start;gap:.6em}.check input,input[type=checkbox]{width:1.1em;height:1.1em;flex:none;accent-color:var(--petrol)}p{margin:.4em 0 .8em}h1,h2,h3{line-height:1.12;letter-spacing:-.025em;margin:0 0 .5em}h2{font-size:1.75em}details summary{cursor:pointer;color:var(--petrol);font-weight:600}details>p{margin:.6em 0}img{display:block;max-width:100%;height:auto}figure{margin:0}figcaption{font-size:.75em;color:var(--muted);margin-top:.5em}.small{font-size:.78em;color:var(--muted)}.large{font-size:1.45em;line-height:1.45}.eyebrow{font-size:.72em;color:var(--petrol);font-weight:750;letter-spacing:.13em;margin:0 0 .6em}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}.skip{position:fixed;top:-100px;left:20px;z-index:99;background:var(--card);padding:10px}.skip:focus{top:8px}
.deck{width:min(100vw,calc((100svh - 68px)*16/9));aspect-ratio:16/9;container-type:inline-size;position:relative;flex:none;outline:none}.slide{position:relative;width:100%;height:100%;padding:2.8cqw 4.2cqw 1.6cqw;display:flex;flex-direction:column;gap:1.1cqw;font-size:1.32cqw;overflow:auto}.js .slide{display:none}.js .slide.active{display:flex}.slide-head{flex:none;padding-right:15cqw;min-height:5.9cqw}.slide-head h1{font-size:2.65cqw;margin:0;line-height:1.13}.slide-head .subtitle{font-size:1.32cqw;color:var(--muted);margin:.5cqw 0 0}.slide-sources{font-size:.65cqw;color:var(--muted);margin-top:auto;flex:none;line-height:1.5}.slide-sources a{white-space:nowrap}.bottom-line{font-size:1.35cqw;margin:.3cqw 0 0;color:var(--petrol);font-weight:700}.bottom-line span{font-weight:400;color:var(--muted)}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:2.5cqw;flex:1;min-height:0}.comparison>article{min-height:0;display:flex;flex-direction:column}.compare-label{font-size:1cqw;letter-spacing:.06em;font-weight:700;margin:0 0 .5cqw}.demo-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.15cqw 1.6cqw;box-shadow:var(--shadow);font-size:1.05cqw;display:flex;flex-direction:column;gap:.5cqw;color:var(--ink)}.demo-brand{font-size:.85em;font-weight:700;display:flex;justify-content:space-between;gap:1em;color:var(--petrol)}.demo-brand span{font-weight:400;color:var(--muted)}.demo-form h3{font-size:1.5em;margin:.25em 0 0}.demo-form p{margin:0}.demo-lead{color:var(--muted);font-size:.88em}.demo-fields{display:grid;grid-template-columns:1fr 1fr;gap:.8cqw}.demo-form label{font-size:.91em}.demo-form input,.demo-form select{padding:.32em .5em}.demo-advanced{font-size:.9em}.demo-advanced summary{padding:.3em 0}.demo-buttons{display:flex;gap:.4cqw;flex-wrap:wrap;margin-top:.4cqw}.demo-buttons button{font-size:.85em}.demo-status{font-size:.8em;min-height:2.1em;color:var(--muted)}.demo-status.error{color:var(--focus)}.busy{background:var(--gold);transform:rotate(-.25deg);gap:.32cqw}.busy .noise{font-size:.75em;letter-spacing:.12em;color:var(--ink)}.busy .fake-banner{padding:.5em;background:#bd5029;color:#fff;font-size:.8em;font-weight:bold}.busy h3{text-align:center;color:#9e3f22}.busy .demo-buttons button{background:#326b8c;color:white;border:2px solid #1c4f6c;border-radius:3px;font-weight:bold;flex:1}.busy .demo-buttons .loud{background:#a43a20;border-color:#822d17}.busy .demo-advanced{border:1px dashed #8a7562;padding:.3em .6em}.simple .demo-buttons button:not(.primary){background:transparent;font-size:.78em}.simple .demo-buttons .primary{flex:1}.simple .demo-advanced{border-top:1px solid var(--line);padding-top:.25em}.comparison .demo-form{flex:1;justify-content:space-between}.comparison .simple{padding-top:1.6cqw;padding-bottom:1.6cqw}.cover .slide-head{min-height:6.1cqw}
.cockpit-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:5cqw;flex:1;align-items:center}.journey{display:grid;gap:1.1cqw}.journey label{display:flex;align-items:center;gap:1.1cqw;border-bottom:1px solid var(--line);padding:1cqw 0}.journey label input{width:1.7cqw;height:1.7cqw}.journey label b{display:block;font-size:1.5cqw;margin-bottom:.3em}.journey label:has(:checked){color:var(--muted)}.focus-panel h2{font-size:3cqw}.focus-panel p{margin:1em 0}.focus-panel .primary{font-size:1.3cqw}.ui-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5cqw;flex:1;min-height:0}.teaching{font-size:1.5cqw;padding-top:.2cqw}.teaching p{margin-bottom:1.25em}.callout{padding:.8em 1em;background:var(--sage);border-left:4px solid var(--petrol);border-radius:0 10px 10px 0}.switch-demo{min-height:0;display:flex;flex-direction:column;gap:.7cqw}.segmented{display:flex;gap:.4cqw;flex-wrap:wrap;align-items:center}.segmented button{font-size:.9em}.segmented button[aria-pressed=true]{background:var(--petrol);color:var(--bg);border-color:var(--petrol)}.switch-demo .tab-panel{flex:1;min-height:0;overflow:auto}.switch-demo .demo-form{min-height:100%}.task-actions{display:flex;align-items:center;gap:1.5cqw;flex:none;margin-top:.25cqw}.task-actions>.primary{font-size:1.05cqw;padding:.65em 1em}.wrap{font-size:1cqw;flex:1}.wrap[open]{position:relative}.wrap>p{padding:.8em;background:var(--sage);border-radius:9px;margin:.4em 0 0}.station-timer{position:absolute;top:2.6cqw;right:4.2cqw;display:flex;align-items:center;gap:.35cqw;font-size:.8cqw;color:var(--muted);z-index:2}.station-timer label select{margin:0;padding:.25em .3em;width:6cqw;font-size:inherit}.station-timer output{font-size:.95cqw;font-weight:650;font-variant-numeric:tabular-nums;color:var(--petrol);min-width:3cqw}.station-timer button{padding:.25em .5em;background:transparent}.station-timer.finished output{color:var(--focus)}
.safari-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:4cqw;flex:1;min-height:0}.safari-main{padding-top:.5cqw}.safari-main .large{margin-top:0}.safari-main details{font-size:1.1cqw;margin:1em 0}.style-card{border:1px solid var(--line);border-radius:16px;padding:1.3cqw 1.6cqw;background:var(--card);display:flex;flex-direction:column;gap:.65cqw;font-size:1cqw}.style-card .palette{display:flex;gap:.4em;align-items:center}.palette i{display:inline-block;width:1.7cqw;height:1.7cqw;border-radius:50%;border:1px solid #bacbc3;background:#f7f7f5}.palette i:nth-child(2){background:#24666a}.palette i:nth-child(3){background:#dcefe1}.palette span{font-size:.85em;margin-left:.4em}.style-card .small{margin:0}.style-card button{align-self:flex-start;font-size:.9em}
.base-layout{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;flex:1;min-height:0}.image-brief{display:flex;flex-direction:column;align-items:flex-start;gap:.55cqw}.image-brief .large{font-size:1.55cqw;line-height:1.4;margin:0 0 .3cqw}.image-brief h2{font-size:2cqw;margin:.5cqw 0 0}.image-brief p{margin:.3cqw 0}.image-brief .button,.image-brief button{font-size:1cqw}.image-brief .callout{font-size:1.25cqw;margin-top:.65cqw}.base-photo{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:0}.base-photo img{max-height:29cqw;max-width:100%;width:auto;object-fit:contain;border-radius:13px;box-shadow:var(--shadow)}.base-photo figcaption{font-size:.72cqw;max-width:100%;text-align:center}.edit-controls{display:flex;align-items:flex-end;gap:1.3cqw;flex:none;font-size:.95cqw}.edit-controls label{min-width:15cqw}.edit-controls label:nth-child(2){min-width:24cqw}.edit-controls button{height:2.5cqw}.edit-pair{display:grid;grid-template-columns:1fr 1fr .8fr;gap:2cqw;flex:1;min-height:0;align-items:center}.edit-pair figure{display:flex;flex-direction:column;align-items:center;min-height:0;height:100%;justify-content:center}.edit-pair img{max-width:100%;max-height:25cqw;width:auto;border-radius:12px;box-shadow:var(--shadow);object-fit:contain}.edit-pair figcaption{font-size:.8cqw;text-align:center}.edit-check h2{font-size:2cqw}.edit-check{font-size:1.2cqw}.edit-check .small{line-height:1.5}.build-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:4cqw;flex:1;align-items:center}.build-layout h2{font-size:2.5cqw}.large-steps{font-size:1.4cqw;padding-left:1.3em;line-height:1.5;margin:1.4em 0}.large-steps li{margin:.7em 0}.test-panel{background:var(--sage);padding:2cqw;border-radius:18px}.test-panel .check{margin:.8em 0;font-size:1.2cqw}.test-panel p{font-size:1.2cqw}.test-panel .small{font-size:.85cqw}.test-panel a{font-size:1cqw}.final-tabs{flex:none}.final-panel{flex:1;min-height:0}.final-panel figure{height:100%;display:flex;flex-direction:column;align-items:center;gap:.5cqw}.final-panel img{max-height:29cqw;width:auto;border-radius:14px;box-shadow:var(--shadow);object-fit:contain}.five-stages{width:100%;display:flex;gap:.7cqw;justify-content:space-between;font-size:1.12cqw;color:var(--petrol)}.closing{text-align:center;font-size:1.5cqw;font-weight:650;margin:.8cqw 0 0}.closing-check{margin:1cqw 10cqw;font-size:1.6cqw}.closing-check label{margin:1em 0}.source-columns{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:1.5cqw 3cqw;font-size:1.4cqw}.source-columns h2{font-size:2cqw}.source-columns p{margin:1em 0}
.deck-nav{width:min(100vw,1760px);height:58px;flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 22px;position:relative;font-size:12px;border-top:1px solid var(--line);margin-top:4px}.brand{color:var(--muted);font-size:11px}.nav-controls,.utility{display:flex;gap:6px;align-items:center}.nav-controls select{max-width:290px;padding:.3em .4em}.nav-controls button{padding:.35em .7em}.utility button{font-size:11px;padding:.5em .6em}.deck-nav progress{position:absolute;bottom:0;left:0;width:100%;height:3px;border:0;accent-color:var(--petrol)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--petrol)}dialog{width:min(1100px,94vw);max-height:91svh;overflow:auto;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:28px 34px;font-size:19px;box-shadow:0 25px 100px #0004}dialog::backdrop{background:#10222699;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.dialog-top .eyebrow{margin:0}.dialog-top button{font-size:13px}.dialog-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.brief-grid p{padding:14px;background:var(--sage);border-radius:9px;font-size:16px}.brief-grid b,.brief-grid span{display:block}.brief-grid b{margin-bottom:.4em}#promptText{width:100%;line-height:1.5;margin-top:8px;font-size:16px;font-family:inherit;min-height:210px}#promptDialog>label{font-size:14px;font-weight:700}.principles-image{width:100%;max-height:48vh;object-fit:contain;border-radius:12px;box-shadow:var(--shadow)}.rules{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;list-style:none;padding:0;font-size:13px;line-height:1.4}.rules b,.rules span{display:block}.rules b{margin-bottom:.4em;color:var(--petrol)}.qr-pair{display:flex;justify-content:center;gap:70px;margin:30px}.qr-pair img{width:250px;max-width:32vw;border-radius:10px}.qr-pair figcaption{font-size:18px;text-align:center}.toast{position:fixed;bottom:75px;padding:9px 16px;background:var(--ink);color:var(--bg);border-radius:9px;z-index:50;font-size:15px;display:none}.toast.visible{display:block}.nojs .deck{height:auto;aspect-ratio:auto}.nojs .slide{height:auto;min-height:52vw;display:flex;border-bottom:2px solid var(--line)}.nojs .deck-nav{display:none}
@media(max-width:900px){.brand{display:none}.deck-nav{padding:8px;gap:4px}.nav-controls select{max-width:210px}.utility button{font-size:10px}.slide-head h1{font-size:2.65cqw}.rules{grid-template-columns:repeat(2,1fr)}dialog{font-size:17px;padding:20px}.qr-pair{gap:20px}.brief-grid{grid-template-columns:1fr}.deck{width:100vw}}
@media(max-width:600px){body{justify-content:flex-start}.deck{min-height:600px;aspect-ratio:auto}.slide{font-size:15px;padding:24px;gap:16px}.slide-head{padding-right:0;min-height:0}.slide-head h1{font-size:27px}.slide-head .subtitle{font-size:16px}.slide .eyebrow{font-size:11px}.comparison,.cockpit-layout,.ui-layout,.safari-layout,.base-layout,.build-layout{grid-template-columns:1fr;gap:22px}.comparison .demo-form,.demo-form{font-size:14px;padding:16px;gap:8px}.compare-label,.slide-sources,.bottom-line{font-size:12px}.teaching{font-size:17px}.focus-panel h2,.build-layout h2{font-size:28px}.focus-panel .primary,.image-brief button,.image-brief .button{font-size:14px}.journey label b{font-size:17px}.journey label input{width:20px;height:20px}.task-actions{align-items:stretch;flex-direction:column;gap:12px}.task-actions>.primary,.wrap{font-size:14px}.station-timer{position:static;font-size:13px;justify-content:flex-end}.station-timer label select{width:100px}.station-timer output{font-size:15px;min-width:45px}.style-card{font-size:14px;padding:18px;gap:12px}.palette i{width:23px;height:23px}.safari-main details{font-size:14px}.image-brief .large{font-size:18px}.image-brief h2,.edit-check h2{font-size:24px}.image-brief .callout{font-size:16px}.base-photo img{max-height:400px}.base-photo figcaption{font-size:11px}.edit-controls{font-size:13px;flex-wrap:wrap;align-items:center}.edit-controls button{height:auto}.edit-pair{grid-template-columns:1fr 1fr}.edit-pair img{max-height:330px}.edit-pair figcaption{font-size:11px}.edit-check{grid-column:1/-1;font-size:16px}.large-steps,.test-panel .check,.test-panel p{font-size:16px}.test-panel{padding:20px}.test-panel .small,.test-panel a{font-size:13px}.five-stages{font-size:11px;flex-wrap:wrap}.final-panel img{max-height:400px}.closing{font-size:17px}.closing-check{margin:20px 0;font-size:17px}.source-columns{grid-template-columns:1fr;font-size:16px}.source-columns h2{font-size:22px}.deck-nav{height:auto;min-height:65px;flex-wrap:wrap;justify-content:center}.utility button{font-size:11px}.nav-controls select{max-width:240px}.safari-main .large{font-size:22px}.slide-sources{margin-top:15px}.comparison .simple{padding:16px}.simple .demo-buttons{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@page{size:A4 landscape;margin:10mm}
@media print{:root,:root[data-theme=dark]{color-scheme:light;--bg:#fff;--ink:#182c33;--muted:#526663;--petrol:#24666a;--sage:#dcefe1;--card:#fff;--line:#cbd7d3;--gold:#f4eac8}body{display:block;background:#fff}.deck{width:100%;height:auto;aspect-ratio:auto}.js .slide,.slide{display:flex!important;width:100%;height:176mm;min-height:0;overflow:visible;break-after:page;padding:4mm 5mm;font-size:11pt;gap:3mm}.slide-head{padding-right:0}.slide-head h1{font-size:24pt}.slide-head .subtitle{font-size:12pt}.slide-head{min-height:18mm}.deck-nav,.station-timer,.task-actions,.segmented,dialog,.toast,.skip,noscript{display:none!important}.slide-sources{font-size:7pt}.slide button:not(.demo-buttons button),.edit-controls button{display:none}.comparison .demo-form,.demo-form{font-size:9pt}.comparison .demo-form{padding:4mm}.base-photo img{max-height:120mm}.edit-pair img{max-height:90mm}.final-panel img{max-height:110mm}.final-panel#final-picture{display:block!important}.final-panel:not(#final-picture){display:none!important}.tab-panel#ui-after{display:block!important}.tab-panel#ui-before{display:none!important}.wrap>p{display:block}.teaching{font-size:13pt}.small{font-size:9pt}.print-appendix{display:block!important;font-size:9pt;padding:5mm}.print-appendix h2{font-size:18pt}.print-appendix li{margin:3mm 0}.print-appendix a{overflow-wrap:anywhere}.print-appendix p{margin:2mm 0}}
.print-appendix{display:none}
.principles-image{width:auto;margin-inline:auto}
.final-panel#final-picture{display:flex;flex-direction:column;justify-content:center;align-items:center}
.final-panel figure{height:auto}
.final-panel img{max-height:33cqw}
.final-panel figcaption:not(.five-stages){text-align:center;font-size:.72cqw}
@media(max-width:600px){.final-panel img{max-height:400px}.final-panel figcaption:not(.five-stages){font-size:11px}}
@media print{.final-panel#final-picture{display:flex!important}.final-panel img{max-height:115mm}}