:root{
  --bg:#ffffff;--surface:#f6f7f9;--text:#1b1f24;--muted:#505a66;--border:#d6dbe1;
  --link:#0b5cd5;--accent:#0b5cd5;--accent-text:#ffffff;--code-bg:#f0f2f5;--mark:#fff1a8;
  --warn-bg:#fff7e0;--warn-bd:#c98a00;--note-bg:#eaf2ff;--note-bd:#0b5cd5;--focus:#b34700;
  --sbw:260px;--tocw:220px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101317;--surface:#181c22;--text:#e6e9ed;--muted:#a3adb9;--border:#2c333c;
    --link:#7db3ff;--accent:#7db3ff;--accent-text:#0b0e12;--code-bg:#1d222a;--mark:#5c4c00;
    --warn-bg:#2a2210;--warn-bd:#d9a21b;--note-bg:#111f35;--note-bd:#5b9bff;--focus:#ffb066;
  }
}
:root[data-theme="dark"]{
  --bg:#101317;--surface:#181c22;--text:#e6e9ed;--muted:#a3adb9;--border:#2c333c;
  --link:#7db3ff;--accent:#7db3ff;--accent-text:#0b0e12;--code-bg:#1d222a;--mark:#5c4c00;
  --warn-bg:#2a2210;--warn-bd:#d9a21b;--note-bg:#111f35;--note-bd:#5b9bff;--focus:#ffb066;
}
*{box-sizing:border-box}
html{scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-wrap:break-word}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-text);padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
header.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:var(--bg);border-bottom:1px solid var(--border)}
.brand{font-weight:700;text-decoration:none;color:var(--text);white-space:nowrap}
.brand small{font-weight:400;color:var(--muted)}
.btn{font:inherit;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.4rem .7rem;cursor:pointer;min-height:40px}
.btn:hover{border-color:var(--accent)}
#menu-btn{display:none}
.search{position:relative;flex:1;max-width:460px;margin-left:auto}
.search input{width:100%;font:inherit;padding:.45rem .7rem;min-height:40px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text)}
#results{position:absolute;left:0;right:0;top:100%;margin:.3rem 0 0;padding:0;list-style:none;background:var(--bg);border:1px solid var(--border);border-radius:8px;max-height:70vh;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:60}
#results[hidden]{display:none}
#results li a{display:block;padding:.55rem .8rem;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border)}
#results li:last-child a{border-bottom:0}
#results li[aria-selected="true"] a,#results li a:hover{background:var(--note-bg)}
#results .r-t{font-weight:600;font-size:.92rem}
#results .r-s{display:block;font-size:.85rem;color:var(--muted)}
#results .r-none{padding:.7rem .8rem;color:var(--muted)}
mark{background:var(--mark);color:inherit;border-radius:2px}
.layout{display:grid;grid-template-columns:var(--sbw) minmax(0,1fr) var(--tocw);gap:0 2rem;max-width:1440px;margin:0 auto;padding:0 1rem}
nav.side{position:sticky;top:57px;align-self:start;max-height:calc(100vh - 57px);overflow:auto;padding:1rem .5rem 2rem 0;border-right:1px solid var(--border)}
nav.side ul{list-style:none;margin:0;padding:0}
nav.side a{display:block;padding:.35rem .7rem;border-radius:6px;text-decoration:none;color:var(--text);font-size:.95rem}
nav.side a:hover{background:var(--surface)}
nav.side a[aria-current="page"]{background:var(--accent);color:var(--accent-text);font-weight:600}
main{padding:1.5rem 0 4rem;min-width:0}
main h1{font-size:2rem;line-height:1.25;margin:.2rem 0 1rem}
main h2{font-size:1.45rem;margin:2.4rem 0 .6rem;padding-top:.6rem;border-top:1px solid var(--border)}
main h3{font-size:1.15rem;margin:1.8rem 0 .4rem}
main h4{font-size:1rem;margin:1.2rem 0 .3rem}
.lead{font-size:1.1rem;color:var(--muted)}
code,pre{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:.88em}
code{background:var(--code-bg);padding:.1em .35em;border-radius:4px}
pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;overflow:auto;line-height:1.5;max-width:100%}
pre code{background:none;padding:0}
.tw{overflow-x:auto;max-width:100%;margin:1rem 0}
table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;font-size:.93rem;margin:1rem 0}
table tbody,table thead{display:table;width:100%}
th,td{min-width:6rem}
td code{overflow-wrap:anywhere}
th,td{border:1px solid var(--border);padding:.45rem .65rem;text-align:left;vertical-align:top}
th{background:var(--surface)}
.callout{border-left:4px solid var(--note-bd);background:var(--note-bg);padding:.7rem 1rem;border-radius:0 8px 8px 0;margin:1.2rem 0}
.callout.warn{border-color:var(--warn-bd);background:var(--warn-bg)}
.callout p{margin:.3rem 0}
.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.05rem .5rem;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--muted);vertical-align:middle}
aside.toc{position:sticky;top:57px;align-self:start;max-height:calc(100vh - 57px);overflow:auto;padding:1.5rem 0;font-size:.88rem}
aside.toc h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 .5rem;border:0;padding:0}
aside.toc ul{list-style:none;margin:0;padding:0}
aside.toc li.l3{padding-left:.9rem}
aside.toc a{display:block;padding:.2rem 0;color:var(--muted);text-decoration:none}
aside.toc a:hover,aside.toc a.on{color:var(--link)}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--border);flex-wrap:wrap}
.pn a{display:block;padding:.7rem 1rem;border:1px solid var(--border);border-radius:8px;text-decoration:none;min-width:140px}
.pn a:hover{border-color:var(--accent)}
.pn small{display:block;color:var(--muted)}
.pn .next{margin-left:auto;text-align:right}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem;margin:1.2rem 0;padding:0;list-style:none}
.cards a{display:block;height:100%;padding:.9rem 1rem;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);background:var(--surface)}
.cards a:hover{border-color:var(--accent)}
.cards strong{display:block;color:var(--link)}
.cards span{font-size:.9rem;color:var(--muted)}
footer.foot{border-top:1px solid var(--border);padding:1.2rem 1rem;color:var(--muted);font-size:.85rem;text-align:center}
@media (max-width:1100px){
  .layout{grid-template-columns:var(--sbw) minmax(0,1fr)}
  aside.toc{display:none}
}
@media (max-width:820px){
  .search{position:static}
  #results{left:.6rem;right:.6rem}
  #menu-btn{display:inline-block}
  .layout{grid-template-columns:minmax(0,1fr);padding:0 1rem}
  nav.side{display:none;position:fixed;inset:57px 0 0 0;max-height:none;background:var(--bg);z-index:40;padding:1rem;border:0}
  nav.side.open{display:block}
  .brand small{display:none}
  main h1{font-size:1.6rem}
}
@media (max-width:480px){
  header.top{gap:.4rem;padding:.5rem .6rem}
  .brand{font-size:.95rem}
  .btn{padding:.4rem .5rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---- User documentation additions ---- */
nav.side li.grp{margin:1rem 0 .2rem;padding:0 .7rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
nav.side li.grp:first-child{margin-top:0}
ol.steps{list-style:none;counter-reset:st;margin:1rem 0;padding:0}
ol.steps>li{counter-increment:st;position:relative;padding:.1rem 0 .1rem 2.6rem;margin:.7rem 0}
ol.steps>li::before{content:counter(st);position:absolute;left:0;top:.05rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--accent);color:var(--accent-text);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
kbd{font:inherit;font-size:.85em;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 .35em;background:var(--surface)}
.menu-path{font-weight:600;background:var(--code-bg);padding:.05em .45em;border-radius:4px;white-space:nowrap}
pre.prompt{position:relative;padding-top:1.6rem;border-left:4px solid var(--accent);white-space:pre-wrap}
pre.prompt::before{content:"Prompt for Claude";position:absolute;top:.35rem;left:1rem;font:600 .72rem system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.callout.good{border-color:#1a7f37;background:color-mix(in srgb,#1a7f37 12%,var(--bg))}
figure.diagram{margin:1.4rem 0;padding:1rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow-x:auto}
figure.diagram svg{display:block;max-width:100%;height:auto;margin:0 auto;font-family:system-ui,sans-serif}
figure.diagram figcaption{font-size:.85rem;color:var(--muted);text-align:center;margin-top:.5rem}
.dg-box{fill:var(--bg);stroke:var(--border);stroke-width:1.5}
.dg-acc{fill:var(--accent);stroke:none}
.dg-t{fill:var(--text);font-size:13px}
.dg-m{fill:var(--muted);font-size:11px}
.dg-a{fill:var(--accent-text);font-size:13px;font-weight:600}
.dg-ln{stroke:var(--muted);stroke-width:1.5;fill:none}
.dg-ar{fill:var(--muted)}
.tag{display:inline-block;font-size:.72rem;font-weight:700;padding:.05rem .5rem;border-radius:99px;border:1px solid var(--note-bd);color:var(--link);vertical-align:middle}
.tag.paid{border-color:var(--warn-bd);color:var(--text);background:var(--warn-bg)}
.pn{margin-top:3rem}
footer.foot strong{color:var(--text)}
@media print{header.top,nav.side,aside.toc,.pn{display:none}.layout{display:block}}