@font-face{font-family:Geist;src:url('assets/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--bg:oklch(.99 .003 170);--surface:oklch(1 0 0);--ink:oklch(.23 .018 178);--muted:oklch(.49 .018 178);--teal:oklch(.49 .1 177);--tint:oklch(.95 .023 174);--border:oklch(.9 .009 177);--sidebar:oklch(.975 .006 175);--topbar:64px;--sidebar-width:230px;--z-sticky:20;--z-dialog:40}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Geist,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}button,video{font:inherit}button{cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid var(--teal);outline-offset:4px}button{color:inherit}h1,h2,h3,p,figure{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}img{display:block;max-width:100%}button{border:0;background:none}strong,b{font-weight:620}.skip-link{position:fixed;z-index:50;top:-80px;left:12px;background:var(--teal);color:white;padding:12px 20px}.skip-link:focus{top:8px}
.topbar{height:var(--topbar);position:fixed;inset:0 0 auto;z-index:var(--z-sticky);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:var(--surface);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand strong{font-size:16px;letter-spacing:-.02em}.brand-symbol{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--teal);color:white}.brand-symbol svg{width:25px;height:25px}.brand-divider{height:18px;width:1px;background:var(--border);margin:0 3px}.brand-label{font-size:14px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:24px}.sample-tag{color:var(--teal);background:var(--tint);border-radius:5px;padding:3px 9px;font-size:12px}.text-button{padding:5px 0;color:var(--muted);font-size:13px}.text-button:hover{color:var(--teal)}
.sidebar{position:fixed;inset:var(--topbar) auto 0 0;width:var(--sidebar-width);background:var(--sidebar);padding:34px 18px 26px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.sidebar-heading{font-weight:640;font-size:14px;padding:0 14px;margin-bottom:14px}.nav-link{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 14px;border-radius:6px;color:var(--muted);font-size:13px;transition:background .15s,color .15s}.nav-link:hover{background:oklch(.95 .009 175);color:var(--ink)}.nav-link.active{background:var(--tint);color:var(--teal);font-weight:630}.nav-number,.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:17px;font-size:12px;font-variant-numeric:tabular-nums}.nav-icon{font-size:18px}.nav-caption{padding:24px 14px 8px;color:var(--muted);font-size:12px}.nav-faq{margin-top:20px}.sidebar-note{margin:auto 14px 0;padding-top:42px;font-size:12px;color:var(--muted)}.small-label{font-size:11px}.sidebar-note p{margin:8px 0 16px;line-height:1.85}.sidebar-note a{color:var(--teal);font-weight:600}
main{margin-left:var(--sidebar-width);padding:112px 48px 0;max-width:1450px}.intro{margin-bottom:30px}.breadcrumb{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:13px}.breadcrumb span{color:var(--border)}h1{font-size:34px;line-height:1.35;letter-spacing:-.025em;font-weight:680}.lede{font-size:16px;margin-top:12px;color:var(--muted)}.metadata{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:12px;color:var(--muted)}.metadata span+span{position:relative}.metadata b{color:var(--ink);font-weight:500}.section-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}h2{font-size:19px;font-weight:650;letter-spacing:-.01em}.inline-link{font-size:13px;color:var(--teal)}.inline-link:hover{text-decoration:underline;text-underline-offset:4px}.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 206px;gap:24px;align-items:start}.film-wrap{overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--surface)}video{display:block;width:100%;aspect-ratio:1440/1020;object-fit:contain;background:#162824}.film-note{display:flex;gap:8px;align-items:center;padding:10px 14px;font-size:11px;color:var(--muted);border-top:1px solid var(--border)}.film-note>span:last-child{margin-left:auto}.caption-mark{display:inline-flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-weight:700;font-size:9px;border:1px solid currentColor;border-radius:2px;width:18px;height:14px}.chapter-heading{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:11px}.chapter-button{display:flex;align-items:center;text-align:left;gap:10px;width:100%;border-radius:6px;padding:11px 10px;margin:3px 0;transition:background .15s;color:var(--muted);line-height:1.5}.chapter-button:hover{background:var(--sidebar);color:var(--ink)}.chapter-button.active{background:var(--tint);color:var(--teal)}.chapter-button time{font-size:11px;min-width:33px;font-variant-numeric:tabular-nums}.chapter-button span{font-size:12px;font-weight:560}.chapter-tip{font-size:12px;line-height:1.85;margin:22px 10px 0;color:var(--muted);border-top:1px solid var(--border);padding-top:18px}.demo-note{font-size:11px;color:var(--muted);margin-top:12px;max-width:85ch}.watch-section{padding-bottom:44px;border-bottom:1px solid var(--border)}.steps-heading{margin:42px 0 0}.steps-heading>span{font-size:12px;color:var(--muted)}.step{padding:32px 0 34px;border-bottom:1px solid var(--border);scroll-margin-top:20px}.step-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:22px}.step-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 29px;width:29px;height:29px;background:var(--tint);color:var(--teal);border-radius:7px;font-size:14px;font-weight:640;margin-top:2px}h3{font-size:19px;line-height:1.6;font-weight:640}.step-heading p{font-size:13px;color:var(--muted);margin-top:4px}.step-content{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1fr);gap:32px;margin-left:42px;align-items:start}.instruction{font-size:14px}.instruction>p+p{margin-top:14px}.instruction strong{color:var(--ink)}code{font-size:12px;white-space:nowrap;padding:2px 4px;border-radius:4px;background:var(--sidebar);color:var(--teal)}.expected{font-size:13px;color:var(--muted);padding-top:14px;border-top:1px solid var(--border);margin-top:20px!important}.expected>span{display:block;color:var(--teal);font-size:11px;font-weight:630;margin-bottom:5px}.watch-step{font-size:12px;color:var(--teal);padding:11px 0;margin-top:5px}.watch-step:hover{text-decoration:underline;text-underline-offset:4px}blockquote{margin:15px 0 0;background:var(--tint);border-radius:6px;padding:12px 14px;font-size:13px;line-height:1.85}.screenshot{display:block;position:relative;width:100%;border:1px solid var(--border);border-radius:8px;overflow:hidden;padding:0;background:var(--surface);isolation:isolate;aspect-ratio:1.55}.screenshot img{max-width:none;position:absolute;height:auto;transform-origin:top left}.zoom-label{position:absolute;bottom:8px;right:8px;font-size:10px;padding:3px 7px;background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--muted);opacity:.95}.screenshot:hover .zoom-label{color:var(--teal);border-color:var(--teal)}.crop-header{aspect-ratio:2}.crop-header img{width:140%;left:-40%;top:0}.crop-issue img{width:273%;left:-174%;top:-62%}.crop-annotation img{width:162%;left:-4%;top:-60%}.crop-thread img{width:272%;left:-173%;top:-83%}.crop-dialog img{width:224%;left:-63%;top:-63%}figcaption{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.7}.result-strip{display:flex;align-items:center;gap:13px;margin:26px 0 0 42px;padding:17px 18px;background:var(--tint);border-radius:8px}.result-icon{display:flex;align-items:center;justify-content:center;width:25px;height:25px;flex-shrink:0;border-radius:50%;background:var(--teal);color:white;font-size:13px}.result-strip strong{font-size:14px}.result-strip p{font-size:12px;color:var(--muted);margin-top:3px}.result-strip .text-button{margin-left:auto;white-space:nowrap;color:var(--teal)}.faq-section{padding:38px 0 42px}.faq-section h2{margin-bottom:15px}details{border-bottom:1px solid var(--border)}summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-size:14px;font-weight:560;padding:17px 0}summary::-webkit-details-marker{display:none}summary span{font-size:20px;font-weight:400;color:var(--muted)}details[open] summary span{transform:rotate(45deg)}details p{font-size:13px;color:var(--muted);max-width:76ch;padding:0 28px 18px 0}.page-footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
dialog{border:0;background:var(--surface);color:var(--ink);border-radius:10px;padding:0;width:min(1500px,94vw);max-width:none;max-height:94vh;z-index:var(--z-dialog)}dialog::backdrop{background:rgb(14 28 23 / 76%)}.viewer-toolbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--border)}.viewer-toolbar p{font-size:13px}.viewer-toolbar button{font-size:12px;white-space:nowrap;padding:5px}.viewer-toolbar kbd{font:inherit;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:2px 4px;margin-left:6px}.viewer-scroll{overflow:auto;max-height:calc(94vh - 60px)}.viewer-scroll img{width:100%;height:auto}
@media(min-width:1700px){main{margin-left:max(var(--sidebar-width),calc((100vw - 1400px)/2 + 210px));padding-right:54px;max-width:1270px}.sidebar{padding-left:max(18px,calc((100vw - 1640px)/2));width:max(var(--sidebar-width),calc((100vw - 1400px)/2 + 210px))}}
@media(max-width:1250px){:root{--sidebar-width:202px}main{padding:102px 30px 0}.sidebar{padding-left:12px;padding-right:12px}.watch-layout{grid-template-columns:1fr}.chapters{display:none}.step-content{gap:23px;grid-template-columns:minmax(200px,.8fr) minmax(0,1fr)}.result-strip{align-items:flex-start;flex-wrap:wrap}.result-strip .text-button{margin-left:38px}}
@media(max-width:850px){:root{--topbar:60px}.topbar{padding:0 20px}.brand-label{font-size:12px}.top-actions{gap:12px}.print-button{display:none}.sidebar{display:none}main{margin-left:0;padding:90px 24px 0}.intro{margin-bottom:26px}.watch-layout{grid-template-columns:minmax(0,1fr) 190px}.chapters{display:block}.step-content{margin-left:0}.step-heading{margin-bottom:18px}.result-strip{margin-left:0}h1{font-size:30px}}
@media(max-width:620px){.brand{gap:8px}.brand-divider{margin:0 2px}.brand strong{font-size:14px}.sample-tag{font-size:10px;padding:3px 6px}main{padding:86px 18px 0}h1{font-size:27px}.lede{font-size:14px;max-width:24em}.metadata{gap:6px 14px;font-size:11px}.watch-layout{grid-template-columns:1fr;gap:14px}.chapters{display:block}.chapter-heading{margin-bottom:8px}#chapter-buttons{display:grid;grid-template-columns:1fr 1fr;gap:4px}.chapter-button{padding:9px 8px;margin:0;background:var(--sidebar)}.chapter-tip{display:none}.section-top{gap:12px;align-items:baseline}h2{font-size:17px}.inline-link{font-size:11px}.film-note{font-size:10px;padding:9px}.film-note>span:last-child{display:none}.demo-note{font-size:10px}.watch-section{padding-bottom:28px}.steps-heading{margin-top:28px;align-items:flex-start;flex-direction:column;gap:4px}.step{padding:26px 0}.step-content{grid-template-columns:1fr;gap:19px}.instruction{font-size:14px}.step-heading h3{font-size:18px}.step-heading p{font-size:12px}.step-number{flex-basis:27px;width:27px;height:27px}.expected{padding-top:11px;margin-top:15px!important}.watch-step{padding-bottom:0}.screenshot{aspect-ratio:1.65}.crop-header{aspect-ratio:2}.result-strip{padding:15px;gap:10px}.result-strip>div{flex:1;min-width:0}.result-strip .text-button{margin-left:35px}.faq-section{padding-top:27px}summary{font-size:13px;padding:15px 0}.page-footer{font-size:10px}dialog{width:96vw;border-radius:6px}.viewer-toolbar{padding:10px;gap:10px}.viewer-toolbar p{font-size:11px}.viewer-toolbar kbd{display:none}.viewer-scroll img{width:1440px;max-width:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Focused crops keep the source screenshot intact; the viewer opens its full context. */
.crop-header{aspect-ratio:540/350}.crop-header img{width:266.667%;left:-166.667%;top:0}
.crop-issue{aspect-ratio:514/285}.crop-issue img{width:280.156%;left:-177.432%;top:-122.807%}
.crop-annotation{aspect-ratio:530/410}.crop-annotation img{width:271.698%;left:-12.264%;top:-146.341%}
.crop-thread{aspect-ratio:520/210}.crop-thread img{width:276.923%;left:-173.077%;top:-309.524%}
.crop-dialog{aspect-ratio:560/295}.crop-dialog img{width:257.143%;left:-78.571%;top:-137.288%}
@media print{.topbar,.sidebar,.watch-section,.watch-step,.zoom-label,.skip-link,dialog,.text-button{display:none!important}main{margin:0;padding:0;max-width:none}.intro{margin:0 0 20px}body{font-size:11px;background:white;color:black}.step{break-inside:avoid;padding:20px 0}.step-content{grid-template-columns:.8fr 1fr;gap:20px}.screenshot{print-color-adjust:exact}.steps-heading{margin-top:20px}.result-strip{print-color-adjust:exact}details p{display:block!important}.page-footer{margin-top:12px}@page{size:A4;margin:15mm}}

/* 2026-09-18 five-role tutorial. Reuse the guide's existing visual language. */
.brand-logo{width:86px;height:auto}.brand strong{font-size:15px}.downloads a:hover{text-decoration:underline;text-underline-offset:4px}video{aspect-ratio:16/9}.downloads{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--teal)}.sidebar-note a{display:block;margin-top:9px}.sidebar{overflow-y:auto}.sidebar .nav-link{font-size:12px}.actual-shot{aspect-ratio:auto}.actual-shot img{position:static;max-width:100%;width:100%;height:auto;transform:none}.evidence-stack{display:grid;gap:22px;min-width:0}.evidence-stack figcaption{font-size:12px}.step-heading p{max-width:64ch}.chapter-button span{line-height:1.5}.watch-section{scroll-margin-top:80px}
@media(max-width:1250px) and (min-width:851px){.chapters{display:block}#chapter-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.chapter-button{margin:0;background:var(--sidebar)}}
@media(max-width:850px){.watch-layout{grid-template-columns:1fr}.chapters{display:block}#chapter-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}}
@media(max-width:620px){.brand-logo{width:64px}.brand strong{font-size:13px}.brand-label,.brand-divider{display:none}.brand{gap:9px}.topbar{padding:0 16px}.metadata{font-size:11px}.evidence-stack{gap:18px}.actual-shot{aspect-ratio:auto}.downloads{gap:8px 18px}.step-content{gap:22px}}
@media print{.quick-links,.downloads{display:none!important}.step{break-inside:auto}.step-heading,figure{break-inside:avoid}.step-content{display:block;margin-left:0}.evidence-stack{grid-template-columns:1fr 1fr;margin-top:16px;gap:14px}.actual-shot img{width:100%;height:auto}.instruction{font-size:11px}.expected{font-size:10px}}
.caption-mark{display:inline-flex;align-items:center;justify-content:center;min-width:32px;white-space:nowrap;font-size:10px;line-height:1.2}

/* Prominent role navigation: generous targets, immediate feedback, native anchors. */
.quick-links{margin-top:26px;padding:18px;background:var(--tint);border:1px solid oklch(.84 .045 177);border-radius:12px}
.quick-links-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
.quick-links-heading p{font-size:15px;font-weight:650;color:var(--ink)}
.quick-links-heading>span{font-size:12px;color:var(--muted)}
.role-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.quick-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:88px;min-width:0;padding:16px;background:var(--surface);border:1px solid oklch(.82 .04 177);border-radius:8px;text-align:left;color:var(--ink);transition:background-color 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out,transform 180ms cubic-bezier(.22,1,.36,1)}
.role-link-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.role-link-text strong{font-size:17px;font-weight:680;line-height:1.4}
.role-link-text>span{font-size:12px;line-height:1.5;color:var(--muted);transition:color 180ms ease-out}
.role-link-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--teal);transition:transform 180ms cubic-bezier(.22,1,.36,1),background-color 180ms ease-out,color 180ms ease-out}
.role-link-arrow svg{width:19px;height:19px}
.quick-links a:focus-visible{background:var(--teal);border-color:var(--teal);color:white;outline:3px solid var(--teal);outline-offset:3px}
.quick-links a:focus-visible .role-link-text>span{color:oklch(.95 .015 177)}
.quick-links a:focus-visible .role-link-arrow{background:rgb(255 255 255 / 16%);color:white;transform:translateX(3px)}
@media(hover:hover){.quick-links a:hover{background:var(--teal);border-color:var(--teal);color:white;transform:translateY(-2px)}.quick-links a:hover .role-link-text>span{color:oklch(.95 .015 177)}.quick-links a:hover .role-link-arrow{background:rgb(255 255 255 / 16%);color:white;transform:translateX(3px)}}
.quick-links a:active{background:var(--teal);border-color:var(--teal);color:white;transform:translateY(0) scale(.985);transition-duration:80ms}
.quick-links a:active .role-link-text>span,.quick-links a:active .role-link-arrow{color:white}
.quick-links a:active .role-link-arrow{background:rgb(255 255 255 / 16%)}
.step[tabindex="-1"]:focus{outline:none}
.step[tabindex="-1"]:focus-visible>.step-heading{outline:2px solid var(--teal);outline-offset:7px;border-radius:4px}
.step[tabindex="-1"]:target>.step-heading{animation:role-arrival 1.4s ease-out}
@keyframes role-arrival{0%,35%{background:var(--tint)}100%{background:transparent}}
@media(max-width:620px){.quick-links{padding:14px;margin-top:22px}.quick-links-heading{margin-bottom:10px}.role-links{grid-template-columns:1fr;gap:8px}.quick-links a{min-height:70px;padding:12px 14px}.role-link-text strong{font-size:16px}.role-link-text{gap:2px}.role-link-arrow{flex-basis:32px;width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.quick-links a,.quick-links a:hover,.quick-links a:active,.role-link-arrow,.quick-links a:focus-visible .role-link-arrow,.quick-links a:hover .role-link-arrow{transform:none}}

@media(min-width:621px) and (max-width:1280px){.role-links{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Role introduction, workflow and navigation form a single opening section. */
.role-hub{margin-top:26px;border:1px solid oklch(.84 .045 177);border-radius:12px;background:var(--surface);overflow:hidden;scroll-margin-top:20px}
.role-overview{padding:18px 18px 14px}
.role-overview h2{font-size:18px;line-height:1.5}
.role-overview p{margin-top:7px;font-size:12px;line-height:1.7;color:var(--muted)}





.role-hub .quick-links{margin-top:0;padding:16px 18px 18px;border:0;border-top:1px solid oklch(.84 .045 177);border-radius:0}
.role-hub:focus{outline:none}
.role-hub:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
@media(max-width:620px){.role-hub{margin-top:22px}.role-overview{padding:14px 14px 12px}.role-overview h2{font-size:17px}.role-hub .quick-links{padding:14px}}
@media print{.role-hub{margin-top:18px;border:0;border-radius:0;overflow:visible;break-inside:avoid}.role-overview{padding:0 0 8px}}

/* Preserve the original green workflow strip above role selection. */
.workflow{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px 20px;background:var(--tint);border-radius:8px;font-size:13px}
.role-hub .workflow{margin:0 18px 18px}
.workflow b{color:var(--teal)}
.workflow small{font-size:11px;color:var(--muted)}
@media(max-width:620px){.role-hub .workflow{margin:0 14px 14px}.workflow{flex-direction:column;align-items:center;gap:8px;padding:14px 16px;text-align:center;font-size:12px}.workflow b{line-height:1;transform:rotate(90deg)}}
@media print{.role-hub .workflow{margin:8px 0 14px}.workflow{print-color-adjust:exact;flex-direction:row;text-align:left}.workflow b{transform:none}}