/* 教程展示层：与后台共用配色，只在顶栏及桌面目录使用毛玻璃。 */
:root{
  color-scheme:light;--ink:#29252e;--ink-2:#625b6b;--muted:#776c7e;
  --accent:#ac3e6a;--accent-fill:#c65380;--accent-soft:#f8e8f0;
  --surface:rgba(255,255,255,.76);--surface-solid:#fdfafd;--surface-soft:rgba(250,245,249,.82);
  --line:rgba(110,72,102,.12);--edge:rgba(255,255,255,.88);
  --shadow:0 12px 36px -20px rgba(91,49,78,.2);--glass:rgba(251,247,251,.76);
  --font:"Manrope","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;--ink:#f1eaf5;--ink-2:#c5b8ce;--muted:#ad9eb8;
  --accent:#f0abc7;--accent-fill:#e49bb9;--accent-soft:#432b43;
  --surface:rgba(35,28,47,.86);--surface-solid:#241e30;--surface-soft:rgba(51,40,63,.7);
  --line:rgba(226,203,247,.14);--edge:rgba(230,207,248,.1);
  --shadow:0 12px 36px -20px rgba(7,3,14,.4);--glass:rgba(31,24,43,.84);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:108px;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased;background:#f4eef2;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0% 0%,#f2d5e3 0,transparent 65%),radial-gradient(ellipse at 95% 5%,#dfd6f4 0,transparent 65%),radial-gradient(ellipse at 10% 100%,#f5e8c8 0,transparent 55%),radial-gradient(ellipse at 95% 90%,#d7e9df 0,transparent 60%),#f4eef2}
:root[data-theme="dark"] body{background:#18141f}
:root[data-theme="dark"] body::before{background:radial-gradient(ellipse at 72% 14%,#9460e238,transparent 56%),radial-gradient(ellipse at 12% 84%,#bd63a82b,transparent 56%);animation:gd-drift 26s ease-in-out infinite alternate}
:root[data-ambient-paused] body::before{animation-play-state:paused}
@keyframes gd-drift{from{transform:translateY(-1%);opacity:.75}to{transform:translateY(2%);opacity:1}}
h1,h2,h3,p,figure{margin:0}
a{color:var(--accent);text-underline-offset:4px}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button svg,a svg{width:17px;height:17px;flex:none}
::selection{background:#c6538033}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.gd-skip{position:fixed;top:10px;left:16px;z-index:100;padding:12px 18px;background:var(--surface-solid);border-radius:12px;transform:translateY(-160%)}
.gd-skip:focus{transform:none}
.topbar{position:sticky;top:0;z-index:30;background:var(--glass);border-bottom:1px solid var(--edge);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topbar-inner{max-width:1260px;margin:auto;min-height:82px;padding:15px 30px;display:flex;align-items:center;gap:20px}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.brand-mark{width:40px;height:40px;flex:none}
.brand-text{display:flex;flex-direction:column;gap:5px}
.brand-title{font-size:16px;font-weight:800;line-height:1.3;letter-spacing:.015em}
.brand-sub{font-size:11px;color:var(--muted)}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:39px;padding:0 15px;border:1px solid var(--line);border-radius:11px;text-decoration:none;background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:700;transition:background .16s,color .16s,transform .16s;white-space:nowrap}
.btn:hover{background:var(--accent-soft);color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-fill);border-color:transparent;color:#fff;box-shadow:0 4px 10px #b7497322}
.btn-primary:hover{background:var(--accent);color:#fff}
:root[data-theme="dark"] .btn-primary{color:#2c1a26}
.gd-wrap{max-width:1260px;margin:0 auto;padding:34px 30px 64px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start}
.gd-toc{position:sticky;top:108px;max-height:calc(100svh - 132px);overflow-y:auto;scrollbar-width:thin;padding:20px 12px 14px;border:1px solid var(--edge);border-radius:20px;background:var(--glass);box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gd-toc-heading{padding:0 11px 12px;display:flex;align-items:center;gap:8px;color:var(--accent)}
.gd-toc-heading svg{width:16px;height:16px}
.gd-toc h2{font-size:12px;font-weight:800;letter-spacing:.04em}
.gd-toc a{display:flex;align-items:center;min-height:38px;padding:8px 11px;border:1px solid transparent;border-radius:10px;text-decoration:none;color:var(--ink-2);font-size:12px;font-weight:600;line-height:1.6;transition:background .16s,color .16s}
.gd-toc a:hover{background:var(--surface-soft);color:var(--accent)}
.gd-toc a[aria-current="location"]{background:var(--accent-soft);color:var(--accent);border-color:var(--line);font-weight:800}
.gd-toc hr{border:0;border-top:1px solid var(--line);margin:10px 11px}
.gd-toc-note{margin:15px 11px 0;padding-top:14px;border-top:1px solid var(--line);font-size:11px;line-height:1.8;color:var(--muted)}
.gd-body{display:flex;flex-direction:column;gap:22px;min-width:0}
.card{border:1px solid var(--edge);border-radius:22px;background:var(--surface);box-shadow:inset 0 1px 0 var(--edge),var(--shadow)}
.gd-hero{position:relative;overflow:hidden;padding:32px}
.gd-eyebrow{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.12em;margin-bottom:16px}
.gd-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-fill);box-shadow:0 0 0 4px #c6538010}
.gd-hero h1{font-size:clamp(25px,2.6vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.4;text-wrap:balance}
.gd-hero h1 em{font-style:normal;color:var(--accent)}
.gd-hero>p{margin-top:14px;max-width:62ch;font-size:14px;line-height:1.95;color:var(--ink-2)}
.gd-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.gd-flow a{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;background:var(--surface-solid);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--ink-2);text-decoration:none}
.gd-flow a:hover{border-color:var(--accent);color:var(--accent)}
.gd-flow a span{color:var(--accent);font-size:10px;font-variant-numeric:tabular-nums}
.gd-flow>span{color:var(--muted);font-size:12px}
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.role{min-width:0;padding-right:10px}
.role b{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;margin-bottom:7px}
.role b::before{content:"";width:5px;height:5px;flex:none;border-radius:2px;background:var(--accent-fill);opacity:.7}
.role span{display:block;color:var(--ink-2);font-size:12px;line-height:1.9}
section.gd-sec{padding:28px 30px 30px}
.gd-sec>h2{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.55;scroll-margin-top:108px}
.gd-num{display:grid;place-items:center;flex:none;width:33px;height:33px;border:1px solid #c6538018;border-radius:11px;color:var(--accent);background:var(--accent-soft);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.gd-sec>p{margin-top:14px;color:var(--ink-2);font-size:13px;line-height:1.95;overflow-wrap:anywhere}
.gd-sec>p+p{margin-top:9px}
.gd-sec b,.gd-sec strong{color:var(--ink);font-weight:700}
.gd-sec code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.9em;padding:3px 6px;border-radius:6px;color:var(--accent);background:var(--accent-soft);overflow-wrap:anywhere}
.steps{counter-reset:st;display:grid;gap:9px;margin-top:18px}
.step{position:relative;padding:14px 17px 14px 50px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);position:absolute;left:15px;top:16px;color:var(--accent);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.step b{display:block;margin-bottom:5px;font-size:13px}
.step span{display:block;font-size:12px;line-height:1.9;color:var(--ink-2)}
figure.shot{margin:22px 0 0;padding:12px 12px 11px;border-radius:16px;border:1px solid var(--line);background:var(--surface-soft)}
figure.shot img{display:block;width:100%;height:auto;object-fit:contain;border-radius:9px;background:#f4eef2;border:1px solid var(--line)}
figure.shot figcaption{margin-top:10px;padding:0 8px;font-size:11px;line-height:1.8;color:var(--muted);text-align:center}
figure.shot.phone{max-width:350px;margin-left:auto;margin-right:auto}
figure.shot.narrow{max-width:820px;margin-left:auto;margin-right:auto}
.gd-shot-open{position:relative;display:block;width:100%;padding:0;border:0;border-radius:9px;background:transparent;cursor:zoom-in}
.gd-shot-open::after{content:"↗";position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:27px;height:27px;border:1px solid var(--line);border-radius:8px;background:var(--surface-solid);color:var(--accent);font-size:16px;box-shadow:0 2px 8px #37233812;transition:transform .16s}
.gd-shot-open:hover::after{transform:translate(1px,-1px)}
.tip{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent-fill);border-radius:3px 12px 12px 3px;background:var(--accent-soft);font-size:12px;line-height:1.95;color:var(--ink-2)}
.tip.warn{border-left-color:#b67f35;background:#fbf0db;color:#795527}
:root[data-theme="dark"] .tip.warn{background:#3d3127;color:#e4c899}
.game{margin-top:18px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--surface-soft)}
.game-h{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:15px 18px;border-bottom:1px solid var(--line)}
.game-h b{font-size:14px;font-weight:800}
.tag{margin-left:auto;padding:4px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--accent);font-size:10px;font-weight:600;line-height:1.6}
.game-b{padding:16px 18px 18px}
.game-b p,.game-b li{font-size:12px;line-height:1.95;color:var(--ink-2)}
.game-b ul{padding-left:19px;margin:10px 0 0}
.game-b li{margin-top:7px;padding-left:3px}
.game-b li::marker{color:var(--accent)}
.faq{margin:18px 0 0}
.faq dt{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;font-weight:800}
.faq dt:first-child{margin-top:0}
.faq dd{margin:8px 0 0;color:var(--ink-2);font-size:12px;line-height:1.95}
.gd-foot{padding:8px 0 0;color:var(--muted);font-size:11px;line-height:1.9;text-align:center}
.gd-foot a{white-space:nowrap}
.gd-image-viewer{max-width:min(1200px,94vw);max-height:94svh;padding:0;border:1px solid var(--edge);border-radius:18px;background:var(--surface-solid);color:var(--ink);box-shadow:0 24px 90px #140b284d}
.gd-image-viewer::backdrop{background:#1a102c9c}
.gd-viewer-head{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px}
.gd-viewer-head .btn{height:36px;min-width:58px;flex:none}
.gd-viewer-canvas{padding:12px;overflow:auto}
.gd-viewer-canvas img{display:block;max-width:100%;max-height:calc(94svh - 90px);width:auto;height:auto;margin:auto;object-fit:contain;border-radius:6px}
@media(min-width:981px){.gd-hero{animation:gd-enter .35s ease-out both}@keyframes gd-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}}
@media(max-width:1100px){.gd-wrap{grid-template-columns:190px minmax(0,1fr);gap:20px;padding-inline:24px}.gd-hero,section.gd-sec{padding:25px}.topbar-inner{padding-inline:24px}.gd-flow{gap:6px}.gd-flow a{padding-inline:8px}}
@media(max-width:980px){
  html{scroll-padding-top:100px}.gd-wrap{grid-template-columns:minmax(0,1fr);max-width:820px;gap:18px;padding:22px 20px 48px}
  .gd-toc{position:static;max-height:none;padding:15px;backdrop-filter:none;-webkit-backdrop-filter:none}.gd-toc-heading{padding:0 3px 11px}
  .gd-toc nav{display:flex;flex-wrap:wrap;gap:7px}.gd-toc a{padding:7px 10px;min-height:36px;background:var(--surface);font-size:11px}.gd-toc hr{display:none}.gd-toc-note{display:none}
}
@media(max-width:620px){
  html{scroll-padding-top:136px}.topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-solid)}
  .topbar-inner{flex-wrap:wrap;gap:12px;padding:13px 18px}.brand{gap:9px}.brand-mark{width:32px;height:32px}.brand-title{font-size:14px}.brand-sub{font-size:10px}
  .topbar-end{margin-left:0;justify-content:flex-end;width:100%;gap:7px}.topbar-end .btn{min-height:36px;height:36px;padding:0 12px;font-size:11px}.topbar-end .gd-theme{margin-right:auto}
  .gd-wrap{padding:17px 12px 32px;gap:16px}.gd-toc{padding:14px;border-radius:17px}.gd-toc nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:2px 2px 9px;scroll-snap-type:x proximity}.gd-toc a{flex:none;min-height:40px;font-size:12px;scroll-snap-align:start}
  .card{border-radius:18px}.gd-hero,section.gd-sec{padding:23px 19px}.gd-hero h1{font-size:26px}.gd-hero>p{font-size:13px}.gd-eyebrow{font-size:9px;margin-bottom:13px}
  .gd-flow{gap:6px;row-gap:9px;margin-top:18px}.gd-flow a{font-size:10px;padding:7px 8px}.gd-flow>span{font-size:10px}
  .roles{grid-template-columns:1fr;gap:15px;margin-top:22px;padding-top:18px}.role{padding:0}.role b{margin-bottom:4px}.role span{font-size:12px}
  .gd-sec>h2{font-size:18px;gap:10px}.gd-sec>p{font-size:13px}.gd-num{width:30px;height:30px;border-radius:10px}.step{padding:13px 13px 13px 43px}.step::before{left:12px;top:16px}
  figure.shot{padding:7px;border-radius:12px;margin-top:18px}figure.shot img{border-radius:6px}figure.shot figcaption{padding:0 4px;margin-top:8px}
  .game-h{padding:13px 14px}.game-h b{font-size:13px}.tag{font-size:9px;padding:3px 6px}.game-b{padding:13px 14px 16px}.tip{padding:12px 13px}.gd-foot{padding:0 12px}
  :root[data-theme="dark"] body::before{animation:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}