.usage-guide-page{width:min(1560px,calc(100% - 40px));margin:0 auto;padding:38px 0 80px}.usage-guide-hero{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:24px;border:1px solid #314047;border-radius:8px;background:linear-gradient(135deg,#111a1d,#0c1115)}.usage-guide-hero h1{margin:5px 0 8px;font-size:32px}.usage-guide-hero p:last-child{max-width:780px;margin:0;color:#a7b6bc;line-height:1.65}.usage-guide-search{display:grid;gap:7px;flex:0 1 360px;color:#a7b6bc;font-size:12px;font-weight:800}.usage-guide-search input{width:100%;min-height:46px;padding:0 13px;border:1px solid #3a4b53;border-radius:7px;background:#091014;color:#f1f6f7;font:inherit}.usage-guide-toc{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;margin-top:14px;padding:13px 16px;border:1px solid #2b393f;border-radius:8px;background:#10171a}.usage-guide-toc>strong{font-size:13px}.usage-guide-toc>div{display:flex;gap:7px;overflow-x:auto}.usage-guide-toc button{flex:0 0 auto;min-height:36px;padding:7px 11px;border:1px solid #34464d;border-radius:999px;background:#0c1316;color:#bdcbd0;font-weight:800;cursor:pointer}.usage-guide-toc button.is-active{border-color:#56d4c6;background:#17322f;color:#8cebdd}.usage-guide-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.usage-guide-start>div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:3px 10px;padding:14px;border:1px solid #2c3a40;border-radius:8px;background:#10171a}.usage-guide-start span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#42cbbb;color:#071210;font-weight:900}.usage-guide-start small{color:#87989f}.usage-guide-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;margin-top:18px}.usage-guide-index{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);padding:14px;border:1px solid #2c3a40;border-radius:8px;background:#0e1518;overflow-y:auto}.usage-guide-index>strong{display:block;margin-bottom:10px;font-size:15px}.usage-guide-index h2{margin:16px 0 6px;color:#789098;font-size:11px;letter-spacing:.08em}.usage-guide-index button{display:block;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:#b9c7cc;text-align:left;cursor:pointer}.usage-guide-index button:hover,.usage-guide-index button.is-active{background:#19302e;color:#7fe4d7}.usage-guide-content{min-width:0}.usage-guide-section{scroll-margin-top:18px}.usage-guide-section>header{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}.usage-guide-section h2{margin:0;font-size:26px}.usage-guide-section header p{margin:5px 0 0;color:#93a4aa}.usage-guide-open{min-height:40px;padding:8px 12px;border:1px solid #3b4d54;border-radius:6px;background:#121b1f;color:#dce7e9;text-decoration:none;font-weight:800}.usage-guide-figure{margin:0;border:1px solid #34464d;border-radius:8px;background:#070c0f;overflow:hidden}.usage-guide-shot{position:relative;line-height:0;overflow:auto}.usage-guide-shot img{display:block;width:100%;height:auto}.usage-guide-hotspot{position:absolute;display:grid;place-items:start;border:4px solid #52e0d0;border-radius:7px;box-shadow:0 0 0 3px #07100dc9,0 0 22px #41d7c999;pointer-events:none}.usage-guide-hotspot b{display:grid;place-items:center;min-width:31px;height:31px;margin:-18px 0 0 -18px;border:3px solid #07100d;border-radius:50%;background:#55e2d2;color:#06110f;font-size:15px;line-height:1}.usage-guide-figure figcaption{padding:10px 14px;border-top:1px solid #2d3b40;color:#93a4aa;font-size:12px;line-height:1.55}.usage-guide-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0 30px;padding:0;list-style:none}.usage-guide-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 10px;padding:13px;border:1px solid #2b3a40;border-radius:8px;background:#10171a}.usage-guide-steps li>span{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#274843;color:#91f0e4;font-weight:900}.usage-guide-steps strong{font-size:14px}.usage-guide-steps p{margin:0;color:#9aabb1;font-size:12px;line-height:1.55}.usage-guide-note{margin:10px 0 0;padding:11px 13px;border-left:4px solid #d6a552;background:#201b13;color:#e2c890}.usage-guide-empty{padding:28px;border:1px dashed #3b4a50;border-radius:8px;color:#96a7ad;text-align:center}
@media(max-width:900px){.usage-guide-page{width:min(100% - 24px,1560px);padding-top:22px}.usage-guide-hero{align-items:stretch;flex-direction:column}.usage-guide-search{flex-basis:auto;width:100%}.usage-guide-start{grid-template-columns:1fr}.usage-guide-layout{grid-template-columns:1fr}.usage-guide-index{position:static;max-height:none}.usage-guide-index>div{display:flex;gap:6px;overflow-x:auto}.usage-guide-index h2{display:none}.usage-guide-index button{flex:0 0 auto;width:auto}.usage-guide-steps{grid-template-columns:1fr}.usage-guide-section>header{align-items:flex-start;flex-direction:column}.usage-guide-open{width:100%;text-align:center}.usage-guide-shot{max-height:68vh}.usage-guide-shot img{width:1100px;max-width:none}.usage-guide-toc{grid-template-columns:1fr}}

/* Each explanation owns one screenshot and one DOM-measured highlight. */
.usage-guide-shot{position:static;line-height:0;overflow:auto}
.usage-guide-image-layer{position:relative;width:100%;line-height:0}
.usage-guide-image-layer img{display:block;width:100%;height:auto}
.usage-guide-hotspot{box-sizing:border-box}
.usage-guide-steps{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0 30px;padding:0;list-style:none}
.usage-guide-steps>.usage-guide-step{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,.55fr);gap:0;padding:0;border:1px solid #34464d;border-radius:8px;background:#10171a;overflow:hidden}
.usage-guide-step-figure{min-width:0;margin:0;border-right:1px solid #34464d;background:#070c0f}
.usage-guide-step-copy{display:grid;grid-template-columns:38px minmax(0,1fr);align-content:center;gap:5px 10px;padding:18px}
.usage-guide-step-copy>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#274843;color:#91f0e4;font-weight:900}
.usage-guide-step-copy strong{font-size:15px}
.usage-guide-step-copy p{margin:0;color:#9aabb1;font-size:13px;line-height:1.65}
.usage-guide-capture-missing{display:grid;place-items:center;min-height:220px;background:#211b12;color:#e6c77d}
@media(max-width:900px){.usage-guide-steps>.usage-guide-step{grid-template-columns:1fr}.usage-guide-step-figure{border-right:0;border-bottom:1px solid #34464d}.usage-guide-image-layer{width:1100px}.usage-guide-shot img{width:100%;max-width:none}}