body:has(.tutorial){--paper:#f5f6f2;--paper-2:#eaf0e9;--ink:#192f2c;--ink-2:#4c605b;--rule:#ccd8d0;--teal:#166c64;--teal-soft:#dcefe6;color-scheme:light;background:var(--paper)}
.tutorial{max-width:1440px;padding:0 28px 32px}.tutorial [hidden]{display:none!important}.tutorial a:focus-visible,.tutorial button:focus-visible,.tutorial select:focus-visible,.tutorial summary:focus-visible{outline:3px solid #ad7118;outline-offset:3px}.tutorial button,.tutorial select{font:500 13px var(--sans);border:1px solid var(--rule);border-radius:6px;background:white;color:var(--ink);padding:9px 12px;cursor:pointer}.tutorial button:hover{background:var(--teal-soft)}.tutorial-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0}.tour-brand{display:flex;gap:20px;align-items:center;font-size:14px}.tour-brand a{font-size:13px}.tour-brand>span{font-weight:600}.tour-brand>.tour-title{font:600 14px/1.55 var(--sans);letter-spacing:normal;margin:0}.tour-tools{display:flex;gap:8px;align-items:center}.tour-tools select{max-width:250px}.tutorial .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scene{content-visibility:auto;contain-intrinsic-size:auto 900px;background:white;border:1px solid var(--rule);border-radius:14px;box-shadow:0 12px 35px #1a3e2910;padding:30px 38px 18px;margin:0 0 32px;scroll-margin-top:70px;overflow-wrap:break-word}.scene-heading{margin-bottom:22px}.scene-kicker{display:flex;justify-content:space-between;gap:20px;font:10px var(--mono);letter-spacing:.08em;color:var(--teal);text-transform:uppercase;margin-bottom:16px}.scene-count{white-space:nowrap;color:var(--ink-2)}.tutorial .scene .scene-title{font:500 clamp(29px,2.5vw,40px)/1.1 var(--serif);letter-spacing:-.015em;max-width:none;margin:0 0 12px;text-wrap:balance}.scene .scene-title:focus{outline:none}.scene-heading>p{font-size:16px;line-height:1.55;max-width:88ch;margin:0;color:var(--ink-2)}
.scene-figure{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:28px;margin:0 0 18px;align-items:stretch}.scene-diagram{border-radius:12px;min-height:235px;padding:28px;background:#D8F3F3;display:flex;gap:24px;align-items:center;justify-content:center;position:relative;isolation:isolate}.scene-node{position:relative;flex:1;min-width:0;min-height:105px;border:1px solid #ABE3E3;border-radius:9px;background:#fff;display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center;padding:14px;box-shadow:0 4px 0 #0E5A6310}.scene-node>strong{font:600 16px/1.35 var(--sans);max-width:22ch}.pin{display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:50%;font:500 11px var(--mono);background:var(--teal);color:var(--on-action)}.scene-node:not(:last-child)::after{content:'→';position:absolute;left:calc(100% + 5px);top:calc(50% - 14px);font:24px var(--sans);color:#0E7F7F}.annotations{padding:8px 0;align-self:center;min-width:0}.annotation-label{font:10px var(--mono);letter-spacing:.1em;color:var(--ink-2);margin:0 0 14px}.annotations ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:17px}.annotations li{display:flex;gap:12px;align-items:flex-start}.annotations strong{display:block;font-size:14px;font-weight:600;margin-bottom:3px}.annotations p{font-size:14px;line-height:1.45;margin:0;color:var(--ink-2);max-width:38ch}.annotations .pin{background:#D8F3F3;color:var(--teal);border:1px solid #ABE3E3}.scene-figure figcaption{grid-column:1/-1;font-size:10px;line-height:1.4;color:var(--ink-2);margin-top:-16px}
.scene-handoff{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--rule)}.section-tag{font:10px var(--mono);letter-spacing:.08em;color:var(--teal);display:block;margin-bottom:7px}.scene-handoff>div+div{border-left:1px solid var(--rule);padding-left:20px}.scene-handoff p{font-size:14px;line-height:1.5;margin:0;max-width:62ch}.behind{display:flex;gap:12px;padding:12px 16px;background:#FCF2DC;border-radius:7px}.behind-icon{font-size:24px;color:#92600A;line-height:1.2}.behind strong{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#92600A}.behind p{font-size:13px;line-height:1.45;margin:4px 0 0;color:#566476}.scene-footer{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.03em;color:var(--ink-2);padding-top:16px}.scene-controls{display:flex;align-items:center;gap:20px;justify-content:space-between;margin:18px 0 8px}.scene-controls button{min-width:135px}.scene-controls #scene-next{background:var(--teal);color:var(--on-action);border-color:var(--teal)}.scene-controls button:disabled{opacity:.4;cursor:default}.scene-progress{width:320px;max-width:40%;text-align:center}.scene-progress p{font-size:12px;margin:0 0 6px;color:var(--ink-2)}.scene-progress progress{width:100%;height:4px;display:block;accent-color:var(--teal);border:0}.tutorial-note{text-align:center;font-size:11px;color:var(--ink-2);margin:15px 0 0}.tutorial[data-guided] .scene{margin-bottom:0}.tutorial[data-guided] .scene-stage{min-height:0}
.tutorial #scene-index{max-width:1000px;width:80vw;max-height:85vh;padding:30px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 20px 70px #0004}.tutorial #scene-index::backdrop{background:#132c25aa}.index-heading{display:flex;justify-content:space-between;align-items:start;gap:20px}.tutorial #scene-index h2{font-size:35px;margin:0 0 18px}.index-heading .eyebrow{font-size:10px}.tutorial #scene-index>p{font-size:14px;max-width:70ch}.tutorial #scene-index details{border-top:1px solid var(--rule);padding:12px 0}.tutorial #scene-index summary{cursor:pointer;font-size:17px;font-weight:500}.tutorial #scene-index summary span{font:12px var(--mono);color:var(--teal);padding-right:10px}.tutorial #scene-index summary small{display:block;font-size:12px;font-weight:400;color:var(--ink-2);margin:4px 0 0 30px}.tutorial #scene-index ol{list-style:none;padding:8px 0 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.tutorial #scene-index a{display:block;font-size:13px;text-decoration:none;padding:5px 0}.tutorial #scene-index a:hover{text-decoration:underline}.tutorial #scene-index a span{font:10px var(--mono);color:var(--ink-2);padding-right:8px}
.tutorial-download{text-align:center;font-size:12px;color:var(--ink-2);margin:12px 0 0}
.tutorial-controls{position:sticky;top:52px;z-index:9;background:var(--paper)}.scene{scroll-margin-top:128px}
.kind-hierarchy .scene-node:last-child::after,.kind-pico .scene-node:last-child::after{display:none}
.kind-branch .scene-node{align-self:stretch;min-height:130px}.scene-diagram .scene-node.destructive{background:#fff0ed;border-color:#c18a80}.scene-node.destructive .pin{background:#963c2e}.annotations li.destructive strong{color:#963c2e}
/* Visual grammars: sequence, choice, document, hierarchy, evidence and handoff. */
.kind-comparison .scene-diagram{background:#edf0f5;gap:12px}.kind-comparison .scene-node{min-height:155px;justify-content:flex-start;border-color:#bacbd8;border-top:4px solid #597993}.kind-comparison .scene-node::after{display:none}.kind-comparison .scene-node:nth-child(2){border-top-color:#ad7118}.kind-comparison .scene-node:nth-child(3){border-top-color:#166c64}.kind-branch .scene-diagram{align-items:flex-end;padding-top:65px;background:linear-gradient(#f5efe0,#f8f5ec)}.kind-branch .scene-diagram::before{content:'A CHOICE TO MAKE';position:absolute;top:24px;font:11px var(--mono);letter-spacing:.12em;color:#775925}.kind-branch .scene-node{border-color:#d5c49f}.kind-branch .scene-node::after{content:'';position:absolute;left:50%;top:-23px;height:22px;border-left:1px dashed #ad7118}.kind-branch .scene-node::before{content:'';position:absolute;left:0;right:0;top:-24px;border-top:1px dashed #ad7118}
.kind-document .scene-diagram,.kind-outcome .scene-diagram{flex-direction:column;gap:9px;padding:44px 40px 18px;background:linear-gradient(115deg,#e1eae3,#eef3e8)}.kind-document .scene-diagram::before,.kind-outcome .scene-diagram::before{content:'';position:absolute;inset:13px 22px;background:white;border:1px solid #c7d6cc;border-radius:3px 24px 3px 3px;z-index:-1;box-shadow:5px 7px 0 #729b8017}.document-stamp{position:absolute;top:26px;left:42px;font:9px var(--mono);letter-spacing:.1em;color:var(--teal)}.kind-document .scene-node,.kind-outcome .scene-node{min-height:46px;width:100%;flex-direction:row;justify-content:flex-start;padding:10px;gap:12px;background:#f4f7f1;border:0;box-shadow:none}.kind-document .scene-node::after,.kind-outcome .scene-node::after{display:none}.kind-document .scene-node>strong,.kind-outcome .scene-node>strong{max-width:none;font-size:14px}.kind-outcome .scene-diagram{background:#d0e9db}
.kind-hierarchy .scene-diagram{flex-direction:column;gap:12px;align-items:stretch;padding:25px}.kind-hierarchy .scene-node{min-height:49px;flex-direction:row;justify-content:flex-start;padding:10px 14px;box-shadow:none}.kind-hierarchy .scene-node:nth-child(2){margin-left:25px}.kind-hierarchy .scene-node:nth-child(3){margin-left:50px}.kind-hierarchy .scene-node::after{content:'↳';left:0;top:100%;font-size:20px}.kind-map .scene-diagram{display:grid;grid-template-columns:1fr 1fr;gap:14px}.kind-map .scene-node{min-height:80px;box-shadow:none}.kind-map .scene-node:last-child{grid-column:1/-1;flex-direction:row;justify-content:center;align-items:center;min-height:60px}.kind-map .scene-node::after{display:none}.kind-pipeline .scene-diagram{background:#edf1ed}.kind-pipeline .scene-node{border-radius:32px 8px 8px 8px;min-height:120px}.kind-pipeline .scene-node:last-child{background:#d5ebdf;border-color:#76ad92}
.kind-evidence .scene-diagram{background:#f1eee5;gap:12px}.kind-evidence .scene-node{border-radius:2px;min-height:154px;border:1px solid #d5ccb7;border-top:5px solid #bd9547;transform:rotate(-2deg)}.kind-evidence .scene-node:nth-child(2){transform:rotate(2deg);border-top-color:#448375}.kind-evidence .scene-node:nth-child(3){transform:rotate(-1deg);border-top-color:#607d91}.kind-evidence .scene-node::after{display:none}.kind-handoff .scene-diagram{background:#e8eff2}.kind-handoff .scene-node{align-items:center;text-align:center;min-height:150px;border:0;background:transparent;box-shadow:none}.kind-handoff .scene-node .pin{width:54px;height:54px;border-radius:50% 50% 12px 12px;font-size:19px;border:6px solid white;box-shadow:0 2px 0 #90a8b3}.kind-pico .scene-node{background:#e2eee5;border:0;border-bottom:3px solid #76ad92;min-height:135px}.kind-pico .scene-node::after{content:'+'}
@media(min-height:800px) and (min-width:1200px){.tutorial[data-guided] .scene-diagram{min-height:280px}.tutorial[data-guided] .scene{padding-top:36px;padding-bottom:22px}.tutorial[data-guided] .scene-heading{margin-bottom:28px}}
@media(max-width:1100px){.tutorial{padding-left:18px;padding-right:18px}.scene{padding:24px}.scene-figure{grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr);gap:20px}.scene-diagram{gap:17px;padding:18px;min-height:230px}.scene-node{padding:10px}.scene-node>strong{font-size:14px}.tour-brand>span{display:none}.tour-tools{gap:5px}.tutorial button,.tutorial select{font-size:12px}.tour-tools select{max-width:220px}}
@media print{@page{size:A4 landscape;margin:8mm}body:has(.tutorial){background:white}.tutorial{padding:0;max-width:none}nav.site,footer.site,.tutorial-controls,.scene-controls,.tutorial-note,.tutorial-download,#scene-index,.skip-link{display:none!important}.tutorial .scene[hidden]{display:block!important}.scene{box-shadow:none;border:0;border-radius:0;margin:0;padding:8mm;break-after:page;break-inside:avoid;min-height:182mm}.scene:last-child{break-after:auto}.scene-heading{margin-bottom:14px}.tutorial .scene .scene-title{font-size:27px}.scene-heading>p{font-size:12px}.scene-figure{grid-template-columns:1.4fr 1fr;gap:20px;margin-bottom:12px}.scene-diagram{min-height:200px}.scene-node>strong{font-size:13px}.annotations strong,.annotations p{font-size:11px}.annotations ol{gap:12px}.scene-handoff{padding:12px 0}.scene-handoff p,.behind p{font-size:11px}.behind{padding:10px}.scene-footer{font-size:9px}.scene-kicker{font-size:9px}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* Illustrations are light document surfaces, even when the surrounding site is dark. */
.scene-node>strong{color:#0B0F14}.annotations .pin{color:#0E5A63}