.gd{padding-top:66px; min-height:100vh}
.gd-bar{position:sticky; top:66px; z-index:20; background:rgba(8,11,17,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.gd-barin{max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:12px 24px}
.gd-ttl{display:flex; align-items:baseline; gap:12px; white-space:nowrap}
.gd-ttl .kick{margin:0}
.gd-ttl b{font-size:13px; font-weight:600; color:var(--mut)}
.gd-search{flex:1; max-width:440px; margin-left:auto; position:relative}
.gd-search input{width:100%; padding:9px 14px 9px 36px; border-radius:10px; border:1px solid var(--line2); background:var(--surf); color:var(--txt); font:inherit; font-size:14px}
.gd-search input:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:transparent}
.gd-search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.6}
#gd-tog{display:none; background:var(--surf); border:1px solid var(--line2); color:var(--txt); font:600 13px inherit; font-family:inherit; padding:8px 12px; border-radius:10px; cursor:pointer}
.gd-wrap{display:grid; grid-template-columns:290px minmax(0,1fr); max-width:1440px; margin:0 auto}
#gd-idx{display:block; position:sticky; top:127px; align-self:start; height:calc(100vh - 127px); overflow:auto; padding:22px 16px 40px 24px; border-right:1px solid var(--line)}
.gd-sec{margin-bottom:22px}
.gd-sec h3{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:700; margin:0 0 8px 10px}
.gd-sec ul{list-style:none; display:flex; flex-direction:column; gap:2px}
.gd-sec li a{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:14px; color:var(--mut)}
.gd-sec li a:hover{background:var(--surf); color:var(--txt)}
.gd-sec li a[aria-current="page"]{background:var(--surf2); color:var(--txt); box-shadow:inset 2px 0 0 var(--teal)}
.gd-dot{display:block; width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none}
.gd-empty{color:var(--dim); font-size:14px; padding:8px 10px}
#gd-page{padding:30px 40px 80px; min-width:0}
.gd-crumb{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
#gd-page h1{font-size:clamp(26px,3vw,36px); line-height:1.15; letter-spacing:-.02em; margin:8px 0 10px; text-wrap:balance}
.gd-badges{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px}
.gd-badge{display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.02em;
  border:1px solid rgba(232,149,90,.45); color:var(--warm2); background:rgba(232,149,90,.08)}
.gd-badge.gd-b-native{border-color:rgba(31,208,180,.45); color:var(--teal); background:rgba(31,208,180,.07)}
.gd-lead{color:var(--mut); font-size:16.5px; max-width:720px}
.gd-lead b,.gd-steps b,.gd-tip b{color:var(--txt); font-weight:600}
.gd-stage{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:26px; margin-top:26px; align-items:start}
.gd-vid{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#000; box-shadow:0 30px 80px rgba(0,0,0,.45); aspect-ratio:16/9}
.gd-vid video{width:100%; height:100%; display:block}
.gd-um{position:absolute; left:14px; top:14px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(8,11,17,.78); backdrop-filter:blur(8px); color:var(--txt); font:600 13px inherit; font-family:inherit; cursor:pointer}
.gd-um:hover{border-color:var(--teal)}
.gd-um[hidden]{display:none}
.gd-steps{list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:6px}
.gd-steps li{counter-increment:s; display:grid; grid-template-columns:28px 1fr; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid transparent; cursor:pointer; color:var(--mut); transition:background .2s,color .2s,border-color .2s}
.gd-steps li::before{content:counter(s); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--surf2); color:var(--mut)}
.gd-steps li:hover{background:var(--surf)}
.gd-steps li.on{background:var(--surf); border-color:var(--line2); color:var(--txt)}
.gd-steps li.on::before{background:var(--teal); color:#062a24}
.gd-steps li:focus-visible{outline:2px solid var(--teal)}
.gd-hint{margin-top:10px; font-size:12.5px; color:var(--dim)}
.gd-tips{margin-top:26px; display:flex; flex-direction:column; gap:10px; max-width:880px}
.gd-tip{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:13px 16px; border-radius:12px; background:linear-gradient(180deg,rgba(31,208,180,.07),rgba(31,208,180,.02)); border:1px solid rgba(31,208,180,.22); color:#c9d4df; font-size:14.5px}
.gd-tip::before{content:"i"; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font:700 12px Georgia,serif; font-style:italic; color:#062a24; background:var(--teal); margin-top:1px}
.gd-note{margin-top:18px; font-size:12.5px; color:var(--dim); max-width:880px}
.gd-pager{display:flex; justify-content:space-between; gap:14px; margin-top:30px; max-width:1100px}
.gd-pager a{flex:1; max-width:360px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); color:var(--mut); font-size:13px}
.gd-pager a strong{display:block; color:var(--txt); font-size:15px; margin-top:2px; font-weight:600}
.gd-pager a:hover{border-color:var(--line2); background:var(--surf)}
.gd-pager a.gd-next{text-align:right; margin-left:auto}
@media(max-width:1180px){.gd-stage{grid-template-columns:1fr}}
@media(max-width:860px){
  .gd-wrap{grid-template-columns:1fr}
  #gd-idx{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:16px; display:none}
  #gd-idx.open{display:block}
  #gd-page{padding:22px 16px 60px}
  .gd-barin{flex-wrap:wrap; padding:12px 16px}
  .gd-search{order:3; max-width:none; flex-basis:100%}
  #gd-tog{display:inline-flex; margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.gd-steps li{transition:none}}