/* SyncMetrics docs — dark, three-column (nav · content · on-this-page) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0c11; --bg2:#0f1017; --panel:#12131b; --line:#1e2029;
  --text:#c7cbd6; --dim:#8b90a0; --head:#f3f4f8;
  --accent:#8b8cf9; --accent2:#a78bfa; --accent-soft:rgba(139,140,249,.14);
  --ok:#4ade80; --warn:#fbbf24;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 55% 45% at 12% 0%, rgba(139,140,249,.12) 0%, transparent 58%),
    radial-gradient(ellipse 50% 45% at 92% 100%, rgba(167,139,250,.10) 0%, transparent 58%),
    var(--bg);
  background-attachment:fixed}

/* Announcement banner */
.d-banner{background:linear-gradient(90deg,rgba(139,140,249,.16),rgba(167,139,250,.16));border-bottom:1px solid var(--line);font-size:.85rem;color:var(--text);text-align:center;padding:.55rem 2.5rem;position:relative}
.d-banner a{color:var(--accent);text-decoration:none;font-weight:600}
.d-banner .x{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--dim);cursor:pointer;background:none;border:none;font-size:1rem}

/* Top bar + tabs */
.d-top{position:sticky;top:0;z-index:20;background:rgba(11,12,17,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.d-top .row{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.5rem}
.d-logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem;color:var(--head);text-decoration:none;letter-spacing:-.4px}
.d-logo img{width:1.55rem;height:1.55rem;border-radius:6px}
.d-logo span{color:var(--accent)}
.d-top .links a{color:var(--dim);font-size:.85rem;text-decoration:none;margin-left:1.2rem}
.d-top .links a:hover{color:var(--head)}
.d-tabs{max-width:1400px;margin:0 auto;display:flex;gap:.3rem;padding:0 1.5rem;border-top:1px solid var(--line)}
.d-tabs a{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;font-size:.86rem;color:var(--dim);text-decoration:none;padding:.7rem .3rem;margin-right:1.1rem;border-bottom:2px solid transparent}
.d-tabs a svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.d-tabs a.on{color:var(--head);border-bottom-color:var(--accent)}
.d-tabs a.on svg{opacity:1}
.d-tabs a:hover{color:var(--text)}

/* header controls: theme toggle */
.d-toggle{display:inline-flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.15rem;margin-left:1.2rem;vertical-align:middle}
.d-toggle button{background:none;border:none;color:var(--dim);cursor:pointer;padding:.25rem .4rem;border-radius:6px;display:inline-flex;line-height:0}
.d-toggle button.on{background:var(--accent-soft);color:var(--accent)}
.d-toggle svg{width:15px;height:15px}

/* sidebar search */
.d-search{position:relative;margin:.2rem .4rem 1rem 0}
.d-search input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.5rem .7rem .5rem 2rem;color:var(--text);font-family:var(--font);font-size:.85rem;outline:none}
.d-search input:focus{border-color:var(--accent)}
.d-search input::placeholder{color:var(--dim)}
.d-search .si{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:var(--dim);width:14px;height:14px}
.d-search .k{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);font-size:.66rem;color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem}
.d-side a.hide,.d-side .grp.hide{display:none}

/* copy-page button + title row */
.d-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.d-copy{flex-shrink:0;display:inline-flex;align-items:center;gap:.4rem;background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:.82rem;font-family:var(--font);padding:.45rem .8rem;cursor:pointer;margin-top:.4rem}
.d-copy:hover{border-color:var(--accent);color:var(--head)}
.d-copy svg{width:14px;height:14px}

/* Layout */
.d-shell{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:262px minmax(0,1fr) 220px;gap:2.4rem;padding:0 1.5rem}
.d-side{position:sticky;top:112px;align-self:start;height:calc(100vh - 120px);overflow-y:auto;padding:1.4rem .4rem 2rem 0;font-size:.88rem}
.d-side::-webkit-scrollbar{width:6px}.d-side::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.d-side .grp{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin:1.3rem .7rem .35rem}
.d-side a{display:flex;align-items:center;gap:.55rem;color:var(--text);text-decoration:none;padding:.4rem .7rem;border-radius:8px;margin-bottom:.05rem}
.d-side a:hover{background:var(--panel);color:var(--head)}
.d-side a.on{background:var(--accent-soft);color:#c7c9ff;font-weight:600}
.d-side a .ic{width:15px;height:15px;flex-shrink:0;opacity:.85;display:inline-flex}
.d-side a .new{font-size:.6rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:.05rem .3rem;margin-left:auto}

/* Content */
.d-main{min-width:0;padding:2rem 0 5rem}
.d-eyebrow{font-size:.78rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
.d-main h1{font-size:2.15rem;font-weight:700;color:var(--head);letter-spacing:-.9px;line-height:1.15;margin-bottom:.7rem}
.d-lede{font-size:1.08rem;color:var(--dim);line-height:1.6;margin-bottom:1.8rem;max-width:680px}
.d-main h2{font-size:1.4rem;font-weight:700;color:var(--head);letter-spacing:-.4px;margin:2.4rem 0 .5rem;padding-top:.4rem;scroll-margin-top:120px}
.d-main h3{font-size:1.08rem;font-weight:650;color:var(--head);margin:1.6rem 0 .3rem;scroll-margin-top:120px}
.d-main p{margin:.6rem 0;color:var(--text)}
.d-main a{color:var(--accent);text-decoration:none}.d-main a:hover{text-decoration:underline}
.d-main ul,.d-main ol{margin:.6rem 0 .6rem 1.2rem}.d-main li{margin:.3rem 0}
.d-main code{font-family:var(--mono);font-size:.85em;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:.1rem .4rem;color:#d6d3ff}
.callout{display:flex;gap:.7rem;background:var(--accent-soft);border:1px solid rgba(139,140,249,.3);border-radius:12px;padding:1rem 1.15rem;margin:1.2rem 0;font-size:.92rem}
.callout .i{color:var(--accent);flex-shrink:0}
.callout.warn{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3)}.callout.warn .i{color:var(--warn)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;margin:.8rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1rem 0}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.05rem 1.15rem;text-decoration:none;color:var(--text);display:block;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none}
.tile .t{font-weight:650;color:var(--head);margin-bottom:.2rem}.tile .d{font-size:.85rem;color:var(--dim);line-height:1.5}
.mono{font-family:var(--mono);font-size:.85rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem;color:#c7c9ff;display:inline-block}
.prompts{list-style:none;margin:.6rem 0}
.prompts li{position:relative;padding:.55rem .8rem .55rem 2rem;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:.5rem;font-size:.9rem;color:var(--text)}
.prompts li::before{content:'“';position:absolute;left:.7rem;top:.4rem;color:var(--accent);font-weight:700;font-size:1.1rem}
.pill{display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.15rem .5rem;border-radius:6px;margin-left:.5rem;vertical-align:middle}
.pill.read{color:var(--ok);background:rgba(74,222,128,.12)}
.dtable{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.9rem}
.dtable td{border-top:1px solid var(--line);padding:.55rem .3rem;vertical-align:top}
.dtable tr:first-child td{border-top:none}
.dtable td:first-child{width:250px}.dtable code{white-space:nowrap}
.steps{counter-reset:s;list-style:none;margin:1rem 0}
.steps li{counter-increment:s;position:relative;padding:.2rem 0 1rem 2.4rem;margin:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:#c7c9ff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}

/* On this page */
.d-toc{position:sticky;top:112px;align-self:start;height:max-content;padding:2rem 0;font-size:.82rem}
.d-toc .h{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem}
.d-toc a{display:block;color:var(--dim);text-decoration:none;padding:.22rem 0;border-left:2px solid var(--line);padding-left:.7rem}
.d-toc a.sub{padding-left:1.4rem;font-size:.8rem}
.d-toc a:hover{color:var(--text)}
.d-toc a.on{color:var(--accent);border-left-color:var(--accent)}

.d-footnav{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.d-footnav a{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;text-decoration:none;color:var(--head);font-weight:600;font-size:.9rem}
.d-footnav a.next{text-align:right}
.d-footnav a small{display:block;color:var(--dim);font-weight:400;font-size:.75rem}

@media(max-width:1080px){.d-shell{grid-template-columns:240px minmax(0,1fr)}.d-toc{display:none}}
@media(max-width:800px){.d-shell{grid-template-columns:1fr}.d-side{position:static;height:auto;overflow:visible;border-bottom:1px solid var(--line);margin-bottom:1rem}}

/* ---- Light theme (toggle) ---- */
html[data-theme="light"]{
  --bg:#ffffff; --bg2:#f6f7fc; --panel:#f5f6fc; --line:#e6e8f3;
  --text:#3f465a; --dim:#7a8194; --head:#1e1b4b;
  --accent:#6366f1; --accent2:#8b5cf6; --accent-soft:rgba(99,102,241,.1);
}
html[data-theme="light"] .d-top{background:rgba(255,255,255,.85)}
html[data-theme="light"] .d-banner{background:linear-gradient(90deg,rgba(99,102,241,.1),rgba(139,92,246,.1))}
html[data-theme="light"] body{
  background:
    radial-gradient(ellipse 55% 45% at 12% 0%, rgba(99,102,241,.11) 0%, transparent 58%),
    radial-gradient(ellipse 50% 45% at 92% 100%, rgba(139,92,246,.09) 0%, transparent 58%),
    linear-gradient(180deg,#f7f8ff 0%,#f2f3fc 100%);
  background-attachment:fixed}
html[data-theme="light"] .tile,html[data-theme="light"] .card,html[data-theme="light"] .prompts li{background:rgba(255,255,255,.72)}