.page-guide-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--border-strong); border-radius:24px; background:var(--bg-subtle); color:var(--text-primary); font:500 13px 'Outfit',sans-serif; cursor:pointer; flex-shrink:0; }
.page-guide-symbol { display:grid; place-items:center; width:20px; height:20px; border:1px solid currentColor; border-radius:50%; font-weight:600; line-height:1; }
.page-guide-button:hover { border-color:var(--accent); background:var(--accent-bg-subtle); }
.page-guide { width:min(940px,calc(100vw - 40px)); max-width:none; height:min(860px,calc(100dvh - 64px)); max-height:none; margin:auto; padding:0; border:1px solid var(--border-strong); border-radius:20px; color:var(--text-primary); background:var(--bg-surface); font:400 16px/1.7 'Outfit',sans-serif; box-shadow:0 32px 100px #0008; }
.page-guide[open] { display:flex; flex-direction:column; }
.page-guide::backdrop { background:#030308b8; backdrop-filter:blur(8px); }
.page-guide [hidden] { display:none !important; }
.page-guide-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 32px 18px; border-bottom:1px solid var(--border-subtle); flex-shrink:0; background:linear-gradient(110deg,var(--accent-bg-subtle),transparent 65%); }
.page-guide-kicker { font-size:10px; font-weight:600; letter-spacing:2px; color:var(--text-muted); }
.page-guide h2 { margin:2px 0 0; font-size:28px; line-height:1.2; font-weight:500; }
.page-guide-close { width:44px; height:44px; border:1px solid var(--border-strong); border-radius:50%; background:var(--bg-subtle); color:var(--text-primary); font:28px/1 sans-serif; cursor:pointer; flex-shrink:0; }
.page-guide-tools { display:flex; gap:12px; padding:14px 32px; align-items:center; border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
.page-guide-search { flex:1; min-width:0; }
.page-guide-search input { width:100%; min-height:44px; border:1px solid var(--border-strong); background:var(--bg-input); border-radius:10px; color:var(--text-primary); padding:10px 14px; font:inherit; font-size:14px; }
.page-guide-tools button,.page-guide [data-guide-action="retry"] { border:0; padding:10px 0; background:none; color:var(--text-secondary); font:500 12px 'Outfit',sans-serif; min-height:44px; cursor:pointer; }
.page-guide-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:28px 32px 40px; scrollbar-gutter:stable; }
.page-guide p { margin:0 0 16px; color:var(--text-secondary); }
.guide-intro .guide-lead { font-size:22px; color:var(--text-primary); line-height:1.45; max-width:650px; }
.guide-eyebrow { text-transform:uppercase; font-size:10px; letter-spacing:2px; font-weight:600; color:var(--accent-glow); margin-bottom:8px; }
.guide-quick { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin:22px 0; }
.guide-quick button { padding:18px; text-align:left; background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:12px; color:var(--text-secondary); font:inherit; font-size:13px; line-height:1.5; cursor:pointer; }
.guide-quick strong { display:block; color:var(--text-primary); font-size:15px; margin:6px 0; font-weight:500; }
.guide-step { color:var(--accent-glow); font-size:11px; letter-spacing:1px; }
.guide-toc { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 28px; }
.guide-toc button { border:1px solid var(--border-subtle); background:transparent; border-radius:20px; color:var(--text-secondary); font:400 12px 'Outfit',sans-serif; padding:9px 13px; min-height:40px; cursor:pointer; }
.page-guide details { border-top:1px solid var(--border-strong); scroll-margin-top:16px; }
.page-guide summary { display:flex; align-items:center; gap:16px; padding:22px 0; list-style:none; cursor:pointer; }
.page-guide summary::-webkit-details-marker { display:none; }
.page-guide summary::after { content:'+'; font-size:22px; font-weight:300; color:var(--text-muted); margin-left:auto; }
.page-guide details[open] > summary::after { content:'−'; }
.guide-chapter-number { font-size:12px; color:var(--text-muted); align-self:flex-start; padding-top:3px; }
.page-guide summary h3 { font-size:18px; line-height:1.4; margin:0 0 5px; font-weight:500; color:var(--text-primary); }
.page-guide summary p { font-size:14px; line-height:1.5; margin:0; max-width:620px; }
.guide-chapter-body { padding:0 0 24px 34px; max-width:780px; }
.page-guide h4 { font-size:16px; font-weight:500; margin:20px 0 8px; }
.page-guide ol,.page-guide ul { padding-left:22px; margin:0 0 20px; color:var(--text-secondary); }
.page-guide li { margin:8px 0; }
.page-guide strong { color:var(--text-primary); font-weight:500; }
.guide-note { padding:16px 18px; border-left:3px solid var(--accent); background:var(--accent-bg-faint); border-radius:0 8px 8px 0; font-size:14px; margin:18px 0; }
.guide-flow { display:flex; align-items:center; gap:10px; padding:18px; border:1px solid var(--border-subtle); border-radius:12px; margin:20px 0; }
.guide-flow > span:not(.guide-arrow) { flex:1; padding:12px 8px; text-align:center; border-radius:8px; background:var(--bg-subtle); font-size:13px; line-height:1.5; }
.guide-flow small { display:block; color:var(--text-muted); font-size:11px; }
.guide-arrow { color:var(--accent-glow); }
.guide-capture { margin:22px 0; border:1px solid var(--border-strong); border-radius:12px; overflow:hidden; background:var(--bg-deep); }
.guide-capture img { display:block; width:100%; height:auto; }
.guide-capture figcaption { padding:14px 18px; font-size:12px; color:var(--text-muted); line-height:1.6; }
.guide-capture figcaption strong { color:var(--text-primary); }
.guide-visual { margin:22px 0; padding:20px; border:1px solid var(--border-strong); border-radius:12px; background:linear-gradient(130deg,var(--accent-bg-faint),var(--bg-subtle)); }
.guide-visual-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0; }
.guide-visual-step { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:16px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--bg-surface); }
.guide-visual-step svg { width:30px; height:30px; fill:none; stroke:var(--accent-glow); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:5px; }
.guide-visual-step strong { font-size:14px; line-height:1.4; }
.guide-visual-step > span:last-child { color:var(--text-secondary); font-size:12px; line-height:1.55; }
.guide-visual figcaption { font-size:13px; color:var(--text-muted); line-height:1.6; }
.guide-example { border:1px solid var(--border-strong); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:18px 20px; margin:22px 0; background:var(--bg-subtle); }
.page-guide .guide-example h4 { margin:6px 0 10px; }
.page-guide .guide-example p { margin:0; font-size:14px; }
.guide-message { padding:24px 0; }
.page-guide :is(button,input,summary,a):focus-visible { outline:2px solid var(--accent-glow); outline-offset:4px; }
.page-guide :is(.guide-quick button,.guide-toc button):hover { border-color:var(--accent); color:var(--text-primary); }
@media(max-width:768px) {
  .page-guide-label { display:none; }
  .page-guide-button { padding:0; width:44px; }
  .page-guide { width:calc(100vw - 16px); height:calc(100dvh - 16px); border-radius:16px; }
  .page-guide-head { padding:18px 20px 14px; }
  .page-guide h2 { font-size:24px; }
  .page-guide-tools { padding:10px 20px; gap:12px; flex-wrap:wrap; }
  .page-guide-search { flex-basis:100%; }
  .page-guide-tools button { padding:0; }
  .page-guide-scroll { padding:22px 20px 32px; }
  .guide-intro .guide-lead { font-size:20px; }
  .guide-quick { grid-template-columns:1fr; gap:8px; }
  .guide-quick button { padding:12px 16px; }
  .guide-quick strong { display:inline; margin:0 8px; }
  .guide-quick .guide-step { display:inline; }
  .guide-chapter-body { padding-left:0; }
  .guide-flow { flex-direction:column; }
  .guide-flow > span:not(.guide-arrow) { width:100%; }
  .guide-arrow { transform:rotate(90deg); }
  .guide-visual { padding:16px; }
  .guide-visual-grid { grid-template-columns:1fr; }
  .guide-visual-step { display:grid; grid-template-columns:30px 1fr; column-gap:12px; }
  .guide-visual-step svg { grid-row:1 / 4; }
  .guide-visual-step > :not(svg) { grid-column:2; }
}
@media(max-width:360px) { .has-page-guide nav[data-site-navigation] .nav-profile { max-width:40px; } .has-page-guide nav[data-site-navigation] { gap:5px; padding-inline:8px; } }