.home-guide{margin-top:24px;padding:30px;background:#fff;border:1px solid #d7e0ec;border-radius:11px;scroll-margin-top:98px}
.hg-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.hg-eyebrow{display:block;color:#7a8ba3;font-size:11px;line-height:1.6;margin-bottom:7px;letter-spacing:.06em}.hg-heading h2{font-size:25px;line-height:1.4;color:#182333;letter-spacing:-.02em;margin:0}.hg-heading>p{font-size:12px;line-height:1.8;color:#7a8ba3;margin:0 0 3px}
.hg-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px;background:#f1f5fa;border:1px solid #e1e7f0;border-radius:8px;gap:6px;margin-bottom:24px}.hg-tabs>button{border:1px solid transparent;background:transparent;border-radius:6px;min-height:45px;padding:9px 12px;color:#697b94;font:inherit;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;white-space:nowrap}.hg-tabs>button>span{font-size:11px;font-weight:500;color:#91a3bc}.hg-tabs>button[aria-selected="true"]{background:#fff;color:#1769e0;border-color:#d4e2f5;box-shadow:0 2px 5px #31537f08}.hg-tabs>button[aria-selected="true"]>span{color:#4b87dc}.hg-tabs>button:hover{color:#1769e0;background:#ffffffb0}
.hg-intro{display:flex;align-items:baseline;gap:18px;margin-bottom:18px}.hg-intro h4{font-size:17px;line-height:1.5;font-weight:650;margin:0;color:#27364c}.hg-intro p{font-size:12px;line-height:1.8;color:#7c8ba0;margin:0}.hg-panel-host:focus{outline:none}.hg-panel-host:focus-visible{outline:2px solid #7da7ed;outline-offset:6px;border-radius:6px}
.hg-demo{display:grid;grid-template-columns:minmax(0,3.25fr) minmax(205px,1fr);align-items:center;gap:28px}.hg-visual{width:100%;min-width:0}.hg-stage{position:relative;aspect-ratio:1340/908;overflow:hidden;border:1px solid #d9e3f0;border-radius:8px;background:#f5f8fc;isolation:isolate}.hg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;pointer-events:none}.hg-focus{position:absolute;border:1.5px solid #4c86df;border-radius:4px;box-shadow:0 0 0 3px #99bdff25;pointer-events:none}.hg-cursor{position:absolute;width:18px;height:23px;z-index:2;pointer-events:none;transition:left .26s ease-out,top .26s ease-out;filter:drop-shadow(0 1px 2px #23497625)}.hg-cursor>svg{width:100%;height:100%;display:block}.hg-click-ring{position:absolute;left:-9px;top:-9px;width:24px;height:24px;border:2px solid #548ef0;border-radius:50%;opacity:0;pointer-events:none}.hg-cursor.hg-clicking .hg-click-ring{animation:hg-click .45s ease-out}
.hg-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:31px;margin-top:10px;color:#8291a5;font-size:11px;line-height:1.7}.hg-action{min-width:0;overflow-wrap:anywhere}.hg-controls{display:flex;gap:5px;flex-shrink:0}.hg-controls>button{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:#6d83a2;min-height:31px;padding:5px 8px;border-radius:5px;font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}.hg-controls>button:hover{background:#edf4ff;color:#1769e0}.hg-controls svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hg-load-status{font-size:11px;line-height:1.7;color:#8b6c35;margin:8px 0 0}
.hg-instructions{list-style:none;padding:0;margin:0;display:grid;gap:8px}.hg-instructions>li{margin:0;padding:0}.hg-step{position:relative;display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;border:1px solid transparent;border-radius:8px;background:transparent;padding:13px 14px;font:inherit;cursor:pointer;overflow:hidden}.hg-step-number{flex-shrink:0;font-size:11px;color:#98aac1;line-height:1.8;padding-top:2px;font-weight:600}.hg-step-copy{display:block;min-width:0}.hg-step-copy>strong{display:block;color:#566b88;font-size:14px;font-weight:600;line-height:1.7;margin-bottom:4px}.hg-step-copy>span{display:block;font-size:12px;line-height:1.85;color:#8090a6}.hg-step[aria-current="step"]{background:#f2f7ff;border-color:#dae7f8}.hg-step[aria-current="step"] .hg-step-copy>strong,.hg-step[aria-current="step"] .hg-step-number{color:#1769e0}.hg-step[aria-current="step"] .hg-step-copy>span{color:#607b9e}.hg-step:hover{background:#f7faff}.hg-progress{position:absolute;bottom:0;left:0;width:var(--hg-progress,0%);height:2px;background:#78a7ef;opacity:0}.hg-step[aria-current="step"] .hg-progress{opacity:1}.hg-note{margin:15px 0 0;padding-top:13px;border-top:1px solid #edf1f6;color:#8593a5;font-size:11px;line-height:1.8}.hg-tabs>button:focus-visible,.hg-controls>button:focus-visible,.hg-step:focus-visible{outline:2px solid #6b9ae4;outline-offset:2px}
@keyframes hg-click{0%{opacity:.8;transform:scale(.35)}100%{opacity:0;transform:scale(1.5)}}
@media(min-width:1100px){.hg-demo{gap:34px}.hg-step{padding:16px}.hg-instructions{gap:11px}}
@media(max-width:900px){.home-guide{padding:24px}.hg-demo{grid-template-columns:minmax(0,2.9fr) minmax(180px,1fr);gap:20px}.hg-step{padding:10px;gap:8px}.hg-step-copy>strong{font-size:13px}.hg-step-copy>span{font-size:11px}.hg-intro{gap:12px}}
@media(max-width:700px){.home-guide{padding:21px 17px;margin-top:20px;scroll-margin-top:80px}.hg-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:19px}.hg-heading h2{font-size:23px}.hg-heading>p{font-size:11px;margin:0}.hg-eyebrow{font-size:10px}.hg-tabs{gap:4px;padding:4px;margin-bottom:20px}.hg-tabs>button{flex-direction:column;gap:1px;min-height:54px;font-size:11px;padding:6px 3px}.hg-tabs>button>span{font-size:10px}.hg-intro{display:block;margin-bottom:15px}.hg-intro h4{font-size:16px;margin-bottom:5px}.hg-intro p{font-size:11px}.hg-demo{grid-template-columns:1fr;gap:16px}.hg-stage{border-radius:6px}.hg-panel[data-guide="guide-register"] .hg-stage{aspect-ratio:1/1}.hg-demo-footer{font-size:10px;gap:6px}.hg-controls{gap:2px}.hg-controls>button{font-size:10px;padding:4px 5px}.hg-controls svg{width:14px;height:14px}.hg-instructions{gap:5px}.hg-step{padding:12px;gap:10px}.hg-step-copy>strong{font-size:13px;margin-bottom:2px}.hg-step-copy>span{font-size:11px}.hg-cursor{width:15px;height:19px}.hg-focus{border-width:1px;box-shadow:none}.hg-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hg-cursor{transition:none}.hg-cursor.hg-clicking .hg-click-ring{animation:none}}
.hg-ai-stage{position:relative;width:100%;aspect-ratio:1331/985;overflow:hidden;background:#edf1f5;border:1px solid #d9e3f0;border-radius:8px;container-type:inline-size;isolation:isolate}.hg-ai-screen{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}.hg-ai-task-caption{position:absolute;left:9%;top:18.2%;width:36.5%;height:4.5%;display:flex;align-items:center;background:#fff;color:#8396b1;font-size:1cqw;line-height:1.6;padding-left:.5%;box-sizing:border-box}.hg-ai-generate-caption{position:absolute;left:1.65%;top:90.55%;width:40.35%;height:4.2%;display:grid;place-items:center;color:#fff;background:#1769e0;border-radius:3px;font-size:1.05cqw;line-height:1.4;font-weight:600}.hg-ai-result-caption{position:absolute;left:48.3%;top:82.6%;width:50.3%;height:11.8%;padding:1% 1.2%;box-sizing:border-box;background:#edf1f5;color:#7e94b0;font-size:1cqw;line-height:1.8}.hg-ai-result-caption small{font-size:.88cqw;color:#93a3b8}.hg-ai-hotspot{position:absolute;z-index:3;border:1px solid transparent;background:transparent;padding:0;border-radius:3px;cursor:pointer}.hg-ai-hotspot:hover{border-color:#1769e0;background:#1769e018}.hg-ai-hotspot:focus-visible{outline:2px solid #1769e0;outline-offset:2px}.hg-ai-highlight{position:absolute;z-index:4;border:2px solid #1769e0;background:#1769e00b;box-shadow:0 0 0 3px #1769e01c;border-radius:4px;pointer-events:none;box-sizing:border-box;transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease}.hg-ai-highlight>span{position:absolute;top:-11px;left:-10px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid #fff;color:#fff;background:#1769e0;font-size:10px;line-height:1;font-weight:700;box-shadow:0 1px 4px #1f508f30}.hg-ai-settings-inset{position:absolute;left:1.65%;top:64.25%;width:44.03%;height:25.5%;padding:0 .25% .5%;box-sizing:border-box;background:#fff;color:#516c8c;font-size:1cqw;line-height:1.6;display:flex;flex-direction:column;gap:6%;pointer-events:none}.hg-ai-settings-inset strong{display:block;font-size:1cqw;color:#334b65;font-weight:650;margin-bottom:2%}.hg-ai-settings-views>div{display:flex;gap:1.3%;white-space:nowrap}.hg-ai-settings-views>div>span{border:1px solid #dbe4f1;border-radius:3px;padding:1.4% 1.8%;font-size:.9cqw;color:#8a9eb9}.hg-ai-settings-views>div>.is-selected{color:#fff;background:#1769e0;border-color:#1769e0}.hg-ai-settings-row{display:grid;grid-template-columns:1fr 1fr;gap:3%}.hg-ai-settings-row>div>span{display:flex;justify-content:space-between;align-items:center;padding:3.2% 4%;border:1px solid #d7e1f0;border-radius:3px;background:#fff;min-height:20px;box-sizing:border-box;font-size:1.03cqw}.hg-ai-settings-row b{font-weight:400;color:#97a8be}.hg-ai-settings-save>div{display:flex;gap:1.5%;align-items:center}.hg-ai-settings-save>div>span{padding:2.5% 2%;border:1px solid #d7e1f0;border-radius:3px;background:#fff;font-size:.9cqw;white-space:nowrap}.hg-ai-settings-save>div>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.hg-ai-panel .hg-step-copy>span{line-height:1.85}.hg-ai-panel .hg-note{font-size:10px}
@media(max-width:900px){.hg-ai-highlight{border-width:1.5px;box-shadow:0 0 0 2px #1769e01c}.hg-ai-settings-row>div>span{min-height:0}}
@media(max-width:700px){.hg-ai-stage{border-radius:6px}.hg-ai-highlight>span{width:17px;height:17px;top:-9px;left:-8px;font-size:9px}.hg-ai-demo{gap:17px}.hg-ai-panel .hg-step{padding:13px 12px}.hg-ai-settings-inset{gap:4%}.hg-ai-settings-row>div>span{border-radius:2px}.hg-ai-settings-views>div>span,.hg-ai-settings-save>div>span{border-radius:2px}}
@media(prefers-reduced-motion:reduce){.hg-ai-highlight{transition:none}}
.hg-method-section{min-width:0;scroll-margin-top:95px}.hg-method-section+.hg-method-section{margin-top:34px;padding-top:30px;border-top:1px solid #e0e8f2}.hg-method-heading{margin-bottom:18px}.hg-method-heading h3{display:flex;align-items:center;gap:10px;margin:0;color:#1769e0;font-size:18px;line-height:1.5;font-weight:650}.hg-method-heading h3>span{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#eaf2ff;color:#1769e0;font-size:12px;font-weight:600}.hg-method-section>.hg-tabs{margin-bottom:23px}
@media(max-width:700px){.hg-method-section{scroll-margin-top:80px}.hg-method-section+.hg-method-section{margin-top:28px;padding-top:24px}.hg-method-heading{margin-bottom:16px}.hg-method-heading h3{font-size:16px;gap:8px}.hg-method-heading h3>span{width:23px;height:23px;font-size:11px;border-radius:5px}.hg-method-section>.hg-tabs{margin-bottom:19px}}

/* Both tutorials share one progress treatment and one playback clock. */
.hg-tabs{padding:0;gap:0;overflow:hidden;border-radius:7px}
.hg-tabs>button{position:relative;isolation:isolate;border:0;border-radius:0;min-height:54px;box-shadow:none}
.hg-tabs>button+button{border-left:1px solid #dce5f1}
.hg-tabs>button::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--hg-tab-progress,0%);background:#d7e7ff;pointer-events:none}
.hg-tabs>button[aria-selected="true"]{background:transparent;border-color:#dce5f1;box-shadow:inset 0 -2px #1769e0}
.hg-tabs>button[data-complete="true"]{color:#366aa7}
.hg-tabs>button:hover{background:#ffffff50}
.hg-tabs>button:focus-visible{outline-offset:-3px}
.hg-step{gap:9px;padding:13px 10px;border-radius:6px}
.hg-step-dot{flex:0 0 5px;width:5px;height:5px;border-radius:50%;margin-top:9px;background:#a4b5cc}
.hg-step[aria-current="step"] .hg-step-dot,.hg-step[data-complete="true"] .hg-step-dot{background:#1769e0}
.hg-step-copy>strong{font-size:13px;line-height:1.7;margin-bottom:4px}
.hg-step-copy>span{font-size:11px;line-height:1.85}
.hg-progress{height:3px;opacity:1;background:#8bb3f1}
.hg-step[data-complete="true"] .hg-progress{background:#c9dcf8}
.hg-ai-highlight{border:1.5px solid #4c86df;box-shadow:0 0 0 3px #99bdff25;background:transparent}
.hg-note{font-size:10px}
@media(min-width:1100px){.hg-demo{gap:24px}.hg-step{padding:14px 11px}.hg-instructions{gap:9px}}
@media(max-width:900px){.hg-demo{gap:16px}.hg-step{padding:10px 8px}.hg-step-copy>strong{font-size:12px}.hg-step-copy>span{font-size:10px}}
@media(max-width:700px){.hg-demo{grid-template-columns:1fr;gap:16px}.hg-tabs>button{font-size:11px;min-height:54px}.hg-step{padding:12px 10px}.hg-step-copy>strong{font-size:13px}.hg-step-copy>span{font-size:11px}.hg-ai-panel .hg-step{padding:12px 10px}}