:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#e7f4ff;background:#082a49;--ink:#e7f4ff;--green:#51ddf6;--line:#164364;--muted:#51ddf6;--pale:#082a49}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit}h1,h2,h3,p,figure{margin:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #51ddf6;outline-offset:3px}[hidden]{display:none!important}.wrap{width:min(1300px,calc(100% - 72px));margin:auto}.icon{width:18px;height:18px;display:block;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.draftbar{background:#164364;color:#51ddf6;font-size:11px}.draftbar>.wrap{display:flex;gap:8px;align-items:center;min-height:28px}.dot{width:5px;height:5px;background:#51ddf6;border-radius:50%}.draftlabel{margin-left:auto;font-size:10px}header{background:#082a49f5;border-bottom:1px solid var(--line)}.header{min-height:72px;display:flex;align-items:center;gap:25px}.brand img{display:block;width:162px;height:auto}.header-caption{font-size:12px;color:var(--muted);margin-right:auto}.languages{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px}.languages button{border:0;background:transparent;font-size:11px;padding:7px;border-radius:5px}.languages [aria-pressed=true]{background:var(--ink);color:#082a49}.intro{padding:28px 0 24px;display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:center}.eyebrow{color:#51ddf6;text-transform:uppercase;font-size:10px;font-weight:650;letter-spacing:1.3px}h1{font-size:clamp(26px,2.7vw,38px);letter-spacing:-1.2px;line-height:1.15;margin:10px 0 12px;font-weight:620}.lead{font-size:13px;line-height:1.65;color:var(--muted);max-width:640px}.quick{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.quick>span{margin-right:4px}.quick button{display:flex;gap:6px;align-items:center;border:1px solid var(--line);background:#082a49;border-radius:6px;padding:6px 9px;font-size:11px}.quick .icon{width:13px;height:13px}.ready{display:flex;gap:12px;align-items:flex-start;background:var(--pale);border:1px solid #164364;padding:17px;border-radius:12px;font-size:12px;line-height:1.65}.ready>.icon{color:#51ddf6;margin-top:2px}.ready strong{font-size:12px}.ready p{color:var(--muted);margin-top:5px;font-size:11px}.guide-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:22px;align-items:start}.contents{position:sticky;top:16px;background:#082a49;border:1px solid var(--line);border-radius:12px;padding:16px 10px 12px;max-height:calc(100vh - 32px);overflow:auto}.contents-top{display:flex;justify-content:space-between;align-items:center;padding:0 8px 12px;gap:8px;font-size:12px}.contents-top span{font-size:10px;color:var(--muted);white-space:nowrap}.contents nav{display:flex;flex-direction:column;gap:3px}.contents nav button{display:flex;gap:9px;align-items:center;text-align:left;font-size:11px;line-height:1.4;border:0;border-radius:7px;background:none;padding:8px;width:100%}.contents nav button:hover{background:#082a49}.contents nav button[aria-current=step]{background:var(--pale);color:#e7f4ff;font-weight:650}.step-num{height:21px;min-width:21px;display:grid;place-items:center;border:1px solid #164364;border-radius:6px;color:#51ddf6;font-size:10px}.is-done .step-num{background:#164364;border-color:#164364;color:#e7f4ff}.saved{font-size:10px;color:#51ddf6;display:flex;gap:7px;margin:14px 7px 0;padding-top:12px;border-top:1px solid var(--line);line-height:1.5}.saved .icon{width:13px;height:13px}.reader{min-width:0}.step-card{background:#082a49;border:1px solid var(--line);border-radius:16px;padding:22px;scroll-margin-top:18px;outline:none}.step-top{display:flex;gap:12px;justify-content:space-between;align-items:center}.step-top>span:last-child{font-size:11px;color:#51ddf6}.progress{height:3px;background:#082a49;border-radius:4px;margin:12px 0 19px;overflow:hidden}.progress>span{display:block;background:#51ddf6;height:100%;transition:width .2s}.step-card h2{font-size:23px;line-height:1.3;font-weight:610;letter-spacing:-.6px;margin-bottom:20px}.step-content{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(0,1.3fr);gap:24px;align-items:start}.instruction>ol{padding:0;list-style:none;counter-reset:action;margin:0}.instruction>ol li{position:relative;padding-left:29px;font-size:12px;line-height:1.7;margin-bottom:15px;counter-increment:action}.instruction>ol li:before{content:counter(action);position:absolute;left:0;top:2px;width:19px;height:19px;display:grid;place-items:center;background:#082a49;color:#51ddf6;font-size:10px;border-radius:50%;font-weight:650}.instruction b{font-weight:620;color:#e7f4ff}.expected{display:flex;gap:9px;background:#082a49;border-radius:9px;padding:12px;margin-top:20px;color:#51ddf6;line-height:1.55}.expected .icon{width:16px;height:16px;margin-top:1px}.expected strong{font-size:10px;text-transform:uppercase;letter-spacing:.4px}.expected p{font-size:11px;color:#51ddf6;margin-top:4px}.hint{font-size:11px;line-height:1.65;color:#51ddf6;margin-top:13px}.hint:empty{display:none}.url-copy{display:flex;gap:6px;flex-wrap:wrap;background:#082a49;border:1px solid var(--line);border-radius:8px;margin-top:13px;padding:9px;align-items:center}.url-copy code{font-size:12px;overflow-wrap:anywhere}.url-copy .button{font-size:10px;padding:6px;min-height:30px}.url-copy [role=status]{font-size:10px;color:var(--green)}figure{min-width:0}figure>button{padding:0;border:1px solid #164364;border-radius:10px;width:100%;background:#082a49;position:relative;display:block;overflow:hidden;text-align:left}figure img{width:100%;height:auto;display:block}.zoom-label{position:absolute;bottom:8px;right:8px;display:flex;gap:6px;align-items:center;background:#082a49f2;border:1px solid var(--line);border-radius:6px;padding:5px 7px;color:#51ddf6;font-size:9px}.zoom-label .icon{width:12px;height:12px}figcaption{display:flex;gap:6px;font-size:9px;line-height:1.5;color:#51ddf6;margin-top:9px}figcaption .icon{width:12px;height:12px;margin-top:1px}#legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:10px;color:#51ddf6}#legend li{display:flex;gap:6px;align-items:center}#legend i{font-style:normal;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;color:#082a49;background:#51ddf6;font-size:9px;flex-shrink:0}.step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.button{border:1px solid var(--line);background:#082a49;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 13px;border-radius:8px;font-size:11px;line-height:1.4;min-height:38px}.button.primary{background:var(--ink);color:#082a49;border-color:var(--ink)}.button:disabled{opacity:.4;cursor:default}.button .icon{width:14px;height:14px}.done-label{font-size:11px;display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer}.done-label input{accent-color:#51ddf6;width:15px;height:15px}.glossary,.troubles{background:#082a49;border:1px solid var(--line);padding:18px 20px;border-radius:12px;margin-top:18px}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:13px}.section-title>.icon{color:#51ddf6}.section-title h2{font-size:15px;font-weight:600}.glossary>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.term strong{font-size:12px}.term p{font-size:11px;line-height:1.65;color:var(--muted);margin-top:5px}.troubles details{border-top:1px solid var(--line)}.troubles summary{padding:11px 0;cursor:pointer;font-size:12px}.troubles details p{font-size:11px;color:var(--muted);line-height:1.65;margin:0 0 12px}.finish{margin-top:18px;border:1px solid #164364;background:#164364;border-radius:12px;display:flex;gap:15px;padding:20px;align-items:center}.finish>.icon{width:25px;height:25px;color:#51ddf6}.finish h2{font-size:17px}.finish p{font-size:12px;line-height:1.6;margin-top:5px;color:var(--muted)}.finish .button{margin-left:auto}.sources{font-size:10px;line-height:1.6;color:#51ddf6;margin:17px 2px 28px}.sources a{text-underline-offset:2px}footer{background:#082a49;border-top:1px solid var(--line);font-size:10px;color:#51ddf6}footer>.wrap{min-height:45px;display:flex;gap:12px;justify-content:space-between;align-items:center}dialog{width:min(1100px,calc(100% - 30px));max-height:calc(100vh - 30px);padding:17px;border:1px solid var(--line);border-radius:12px;color:var(--ink)}dialog::backdrop{background:#e7f4ffb8;backdrop-filter:blur(3px)}.dialog-head{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:10px}.dialog-head strong{font-size:14px}.dialog-head button{font-size:23px;min-width:36px;padding:1px}.zoom-scroll{overflow:auto;border-radius:8px;border:1px solid var(--line)}.zoom-scroll img{display:block;width:100%;min-width:740px;height:auto}dialog>p{font-size:11px;line-height:1.5;margin-top:10px;color:var(--muted)}#contents-toggle{display:none}
@media(min-width:1450px){.step-content{grid-template-columns:.75fr 1.4fr}.step-card{padding:26px}.instruction>ol li{font-size:13px}}
@media(max-width:1100px){.wrap{width:calc(100% - 40px)}.guide-layout{grid-template-columns:215px minmax(0,1fr);gap:16px}.intro{grid-template-columns:1fr 290px;gap:24px}.step-content{grid-template-columns:1fr;gap:20px}.step-card h2{margin-bottom:15px}.instruction{display:block}.expected{margin-top:10px}figure{max-width:700px}.hint{margin-top:8px}}
@media(max-width:700px){.wrap{width:calc(100% - 28px)}.header{gap:10px;min-height:64px;justify-content:space-between}.brand img{width:126px}.header-caption{display:none}.languages button{padding:6px 5px;font-size:10px}.draftlabel{display:none}.draftbar{font-size:10px}.intro{display:block;padding:22px 0 18px}h1{font-size:28px;letter-spacing:-1px}.lead{font-size:12px}.ready{padding:12px;margin-top:16px}.ready p{font-size:10px}.guide-layout{display:block}.contents{position:static;padding:0;max-height:none;margin-bottom:14px;border-radius:10px}.contents-top,.saved{display:none}#contents-toggle{width:100%;display:flex;align-items:center;border:0;background:none;padding:12px;gap:9px;font-size:12px}#contents-toggle>.icon:last-child{margin-left:auto}#step-nav{display:none;padding:0 8px 10px;max-height:330px;overflow:auto}.contents.expanded #step-nav{display:flex}.step-card{padding:16px;border-radius:12px}.step-card h2{font-size:21px}.step-top .eyebrow{font-size:9px}.step-top>span:last-child{font-size:10px}.step-footer{gap:8px;flex-wrap:wrap;padding-top:14px;margin-top:18px}.done-label{order:3;justify-content:center;width:100%;margin-top:8px}.step-footer .button{font-size:11px}.step-card .progress{margin:11px 0 16px}.glossary,.troubles{padding:15px}.glossary>div:last-child{grid-template-columns:1fr;gap:12px}.term p{margin-top:3px}.finish{align-items:start;flex-wrap:wrap;padding:16px}.finish>div{flex:1}.finish .button{margin-left:40px}footer>.wrap{padding-block:12px;align-items:start;line-height:1.6}footer>.wrap>span:last-child{text-align:right;max-width:220px}.instruction>ol li{font-size:12px}.zoom-label{font-size:8px}dialog{padding:11px}.quick{gap:6px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Real tutorial captures retain their own aspect ratio; annotations are UI overlays. */
.step-card.has-capture .step-content{grid-template-columns:minmax(0,1fr)}
.step-card.has-capture figure{max-width:none}
.capture-frame,.zoom-frame{position:relative;display:block}
.capture-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.capture-overlay rect{fill:none;stroke:#f4c884;stroke-width:2;vector-effect:non-scaling-stroke}
.capture-overlay circle{fill:#f4c884;stroke:#082a49;stroke-width:1;vector-effect:non-scaling-stroke}
.capture-overlay text{fill:#082a49;font:600 11px system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}
.frame-nav{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.frame-nav button{border:1px solid var(--line);border-radius:6px;padding:7px 9px;font-size:11px;background:#082a49;max-width:100%;text-align:left}
.frame-nav button[aria-pressed=true]{background:var(--pale);color:#e7f4ff;border-color:#8ae5ef}
figcaption.is-simulated{color:#abc6df;background:#082a49;border-radius:6px;padding:8px;font-size:11px}
#legend{overflow-wrap:anywhere}
.zoom-frame{min-width:960px}
.zoom-scroll img{min-width:0;width:100%;height:auto}
@media(min-width:1101px){.has-capture .instruction>ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.has-capture .expected{margin-top:4px}}
@media(max-width:700px){.frame-nav button{font-size:10px}.zoom-frame{min-width:1000px}}

/* Public guide navigation uses the approved guide layout. */
.languages a{display:block;text-decoration:none;font-size:11px;padding:7px;border-radius:5px}
.languages a[aria-current=page]{background:var(--ink);color:#082a49}
.guide-shortcuts{display:flex;gap:8px;align-items:center;margin-left:auto}.guide-shortcuts a{font-size:12px;text-decoration:none;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#082a49;display:flex;align-items:center;gap:6px}
.guide-footer>.wrap{flex-wrap:wrap;justify-content:flex-start;padding:14px 0 85px;gap:12px 20px}.guide-footer a{text-underline-offset:3px;font-size:11px}.guide-footer .copyright{margin-right:auto}
@media(max-width:700px){.header{flex-wrap:wrap;padding:12px 0;gap:10px}.header .brand{margin-right:auto}.guide-shortcuts{order:3;width:100%;margin:0}.guide-shortcuts a{flex:1;justify-content:center}.languages a{font-size:10px;padding:6px 5px}.guide-footer .copyright{width:100%}.guide-footer>.wrap{padding-bottom:88px}}