:root{color-scheme:light;--ink:#142d45;--muted:#405b71;--navy:#163249;--gold:#ffc541;--line:#c6d6e3;--bg:#eef4f8;--teal:#126451;font-family:"Segoe UI",Arial,sans-serif;font-size:clamp(18px,1.2vw,22px);color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input,a{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button,a{border-radius:.6rem}button{border:1px solid var(--line);background:#fff;color:var(--ink);padding:.6rem .9rem;min-height:48px;font-weight:700}button:hover:not(:disabled){border-color:#315f84;background:#e9f3fa}button:disabled{opacity:.48;cursor:default}button.primary{background:var(--gold);border-color:#bd881b;color:#142d45}button.primary:hover{background:#ffdb7c}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2269a4;outline-offset:4px}[hidden]{display:none!important}h1,h2,h3,p,figure{margin:0}p{line-height:1.55}svg{display:block}a{color:inherit}small{font-size:.8rem}.eyebrow{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#45627a}
.top{padding:.85rem max(1rem,calc((100vw - 1440px)/2));background:var(--navy);color:#fff;border-bottom:3px solid var(--gold);display:flex;gap:1rem;align-items:center;justify-content:space-between}.top .eyebrow{color:#ffcf60}.top h1{font-size:clamp(1.1rem,2vw,1.65rem);line-height:1.25;margin-top:.25rem}.home{display:inline-flex;align-items:center;min-height:48px;padding:.5rem .8rem;text-decoration:none;border:1px solid #aac4d5;white-space:nowrap;font-size:.85rem;font-weight:750}.home:hover{background:#ffffff16}.home:focus-visible{outline-color:var(--gold)}
main{max-width:1480px;margin:auto;padding:1.2rem clamp(1rem,2vw,2rem) 1.6rem}.intro{display:flex;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1rem}.intro p{max-width:65ch;font-size:1rem}.progress{min-width:11rem;display:grid;gap:.35rem;font-size:.85rem;font-weight:750}.progress progress{width:100%;height:.55rem;accent-color:var(--teal)}progress::-webkit-progress-bar{background:#dce6ed;border-radius:1rem}progress::-webkit-progress-value{background:var(--teal);border-radius:1rem}.step-nav{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.1rem}.step-nav button{display:grid;place-items:center;position:relative;min-width:2.5rem;padding:.4rem .6rem;background:#fff}.step-nav button[aria-current=step]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 3px 0 var(--gold)}.step-nav button[data-correct=true]::after{content:'✓';position:absolute;right:-.25rem;top:-.3rem;background:#126451;color:#fff;font-size:.6rem;border-radius:50%;width:.95rem;height:.95rem;border:1px solid #fff;display:grid;place-items:center}
.step-heading{display:flex;gap:.75rem;align-items:center;margin-bottom:1rem}.step-heading>span{display:grid;place-items:center;flex-shrink:0;width:2.6rem;height:2.6rem;border-radius:.8rem;background:var(--gold);font-size:1.25rem;font-weight:850}.step-heading h2{font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.25}.step-heading p{margin-top:.2rem;color:var(--muted);font-size:.85rem}.workspace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1rem;align-items:start}.panel{padding:clamp(1rem,1.7vw,1.5rem);background:#fff;border:1px solid var(--line);border-radius:1rem;box-shadow:0 8px 26px #173d5810}.panel h3{font-size:1rem;display:flex;gap:.5rem;align-items:center;margin-bottom:.8rem}.phase{background:#e5eef5;color:#194666;display:grid;place-items:center;border-radius:50%;font-size:.75rem;width:1.4rem;height:1.4rem}.capture{border:1px solid #b7c9d7;border-radius:.7rem;overflow:hidden;background:#dfeaf1}.capture svg{width:100%;height:clamp(11rem,23vw,18rem)}.capture rect{stroke:#ffc541;stroke-width:3;fill:#ffc5411a;vector-effect:non-scaling-stroke}.capture-error{padding:1rem;color:#85401b;background:#fff4df}.capture-tools{margin-top:.65rem;display:flex;gap:.5rem;flex-wrap:wrap}.capture-tools button{font-size:.85rem}.observe{margin-top:1rem;color:var(--ink);font-size:1rem}.capture-note{margin-top:.7rem;color:var(--muted);font-size:.75rem}.question{border:0;padding:0;margin:0}.question legend{font-size:1.15rem;font-weight:750;line-height:1.45;margin-bottom:.8rem;float:left;width:100%}.options{clear:both;display:grid;gap:.6rem}.option{display:flex;gap:.7rem;align-items:center;padding:.75rem .8rem;border:1px solid var(--line);border-radius:.65rem;line-height:1.35;cursor:pointer;font-size:1rem;background:#f7fafc}.option input{width:1.1rem;height:1.1rem;flex-shrink:0;accent-color:#215780;margin:0}.option:has(input:checked){border-color:#215780;background:#e9f2fb;box-shadow:inset 3px 0 #215780}.option:has(input:focus-visible){outline:3px solid #2269a4;outline-offset:2px}.option[data-right=true]{border-color:#126451;background:#e9f6f0;box-shadow:inset 3px 0 #126451}.verify{margin-top:1rem;width:100%}.feedback{margin-top:1rem;border-left:4px solid #ad7114;background:#fff3d8;padding:.8rem 1rem;border-radius:.4rem;line-height:1.5;font-size:.95rem}.feedback[data-kind=correct]{background:#e8f5ee;border-color:#126451}.feedback b{display:block;margin-bottom:.3rem}.feedback p{font-size:.95rem}.next-note{font-size:.8rem;color:var(--muted);margin-top:.7rem}
.navigation{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:.8rem 0;border-top:1px solid var(--line)}.navigation span{font-size:.8rem;color:var(--muted);text-align:center}.signature{text-align:center;color:var(--muted);font-size:.7rem;line-height:1.5;padding:.7rem 1rem 1rem}.summary h2{font-size:1.5rem}.summary>p{margin-top:.6rem}.summary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:1rem 0;padding:0;list-style:none}.summary-list button{width:100%;text-align:left;font-size:.9rem;display:flex;gap:.65rem;align-items:center}.summary-list span{font-weight:850;color:var(--teal)}.summary-actions{display:flex;flex-wrap:wrap;gap:.6rem}.local-note{font-size:.75rem;color:var(--muted);margin-top:1rem}
dialog{border:1px solid var(--line);border-radius:1rem;padding:1.2rem;color:var(--ink);background:#f6f9fc;max-width:min(96vw,1480px);width:96vw;max-height:94dvh;overflow:auto}dialog::backdrop{background:#091a2dc7}dialog .dialog-head{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:.8rem}dialog h2{font-size:1.15rem}dialog .capture svg{height:65dvh;min-height:220px;touch-action:none;cursor:grab}dialog .capture svg:active{cursor:grabbing}.zoom-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}.zoom-controls button{font-size:.85rem}.dialog-hint{font-size:.8rem;color:var(--muted);margin-top:.7rem}#reset-dialog{width:min(32rem,94vw)}#reset-dialog p{margin:.8rem 0 1rem}
@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr)}.capture svg{height:15rem}.intro{align-items:flex-start;flex-direction:column;gap:.8rem}.progress{width:100%;grid-template-columns:auto 1fr;align-items:center;gap:.8rem}.top{align-items:flex-start}.home{white-space:normal;text-align:center}.summary-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:540px){.top{flex-direction:column;gap:.6rem}.home{font-size:.8rem;min-height:42px}main{padding-top:.9rem}.step-nav{gap:.4rem}.step-nav button{min-width:2.4rem}.panel{padding:1rem}.navigation{flex-wrap:wrap}.navigation span{order:3;width:100%}.summary-actions{flex-direction:column}.capture-tools button{flex:1}.dialog-head{align-items:flex-start!important}dialog{padding:.8rem}dialog .capture svg{height:55dvh}.progress{grid-template-columns:1fr}.option{padding:.8rem .65rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.workspace{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}#capture{height:auto;aspect-ratio:2048/1118}.zone-marker{cursor:pointer}.zone-marker circle{fill:#ffcf53;stroke:#142d45;stroke-width:2;vector-effect:non-scaling-stroke}.zone-marker text{font:800 29px "Segoe UI",Arial,sans-serif;fill:#142d45;pointer-events:none}.zone-marker:hover circle,.zone-marker:focus circle{fill:white;stroke:#2269a4;stroke-width:4}.zone-marker:focus{outline:none}.continue-path{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;margin-top:1rem;background:#e1edf5;border:1px solid var(--line);border-radius:.8rem}.continue-path p{font-size:.9rem}.continue-path a{background:var(--gold);border-color:#bc8d2e;white-space:normal}@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr)}.continue-path{flex-direction:column;align-items:stretch}}
.intro-copy{display:grid;gap:.65rem}.intro-copy>button{justify-self:start;background:#e0f0eb;border-color:#77aa9c;color:#145746}.zone-videos{display:grid;gap:.55rem;margin-top:.85rem}.video-launch{text-align:left;display:grid;gap:.25rem;background:#e8f4ef;border-color:#95b7a9;color:#145746}.video-launch:hover:not(:disabled){background:#d5eee4;border-color:#126451}.video-launch small{font-weight:500;line-height:1.4;font-size:.85rem}#video-dialog{width:96vw;max-width:1480px}#video-player{display:block;width:100%;max-height:62dvh;aspect-ratio:16/9;background:#111;border-radius:.6rem;margin-top:.8rem}#video-dialog .navigation{margin-top:.65rem;padding-bottom:0}.video-choice{display:flex;gap:.7rem;align-items:center}.video-choice label{font-size:.9rem;font-weight:700;flex-shrink:0}.video-choice select{width:100%;min-width:0;min-height:48px;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:.6rem;padding:.5rem}.video-choice select:focus-visible{outline:3px solid #2269a4;outline-offset:3px}#video-error button{margin-top:.6rem}@media(max-width:700px){.video-choice{align-items:stretch;flex-direction:column}.video-choice select{font-size:.85rem}#video-dialog .dialog-head{flex-direction:column}#video-player{max-height:50dvh}#video-dialog .navigation button{font-size:.8rem;padding:.5rem}#video-dialog .navigation{gap:.5rem}}