/* Shared remoteagent.online frame for documentation and articles — index design (2026-09-12).
   Apple-grade: SF type, near-monochrome, hairline borders, pill nav, generous whitespace.
   Keep the .top / .wrap / .tile / .agent-static-footer hooks: every docs and article page uses them. */
:root{color-scheme:light;--sf-bg:#fff;--sf-panel:#fff;--sf-ink:#1d1d1f;--sf-muted:#6e6e73;--sf-line:#d2d2d7;--sf-cyan:#0891b2;--sf-navy:#000;--sf-foot:#fbfbfd;--sf-shadow:0 30px 60px -34px rgba(0,0,0,.42);--sf-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;--sf-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
html[data-agent-theme="dark"]{color-scheme:dark;--sf-bg:#000;--sf-panel:#0d0d0f;--sf-ink:#f5f5f7;--sf-muted:#86868b;--sf-line:#2a2a2e;--sf-cyan:#67e8f9;--sf-navy:#000;--sf-foot:#0d0d0f;--sf-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
html,body{min-height:100%;background:var(--sf-bg)!important}
body{margin:0!important;color:var(--sf-ink)!important;display:flex;min-height:100vh;flex-direction:column;background:var(--sf-bg)!important;font-family:var(--sf-font)!important;-webkit-font-smoothing:antialiased}

/* frosted nav */
.top,.top-in,.top-nav,.wrap{box-sizing:border-box}
.top{position:sticky;top:0;z-index:30;margin:0!important;border-bottom:1px solid var(--sf-line)!important;background:color-mix(in srgb,var(--sf-bg) 78%,transparent)!important;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
.top-in{width:min(1080px,100%)!important;min-height:56px!important;margin:auto!important;padding:0 24px!important;display:flex!important;align-items:center!important;gap:26px!important}
.logo{color:var(--sf-ink)!important;text-decoration:none!important;font-size:15px!important;font-weight:600!important;letter-spacing:-.02em}
.logo b{display:inline-grid!important;place-items:center!important;width:26px!important;height:26px!important;margin-right:8px!important;border-radius:8px!important;background:var(--sf-ink)!important;color:var(--sf-bg)!important;font-size:14px!important}
.logo span{color:var(--sf-cyan)!important}
.top-nav{display:flex!important;align-items:center!important;gap:2px!important;margin-left:auto!important}
.top-nav a{padding:8px 10px!important;border-radius:9px!important;color:var(--sf-muted)!important;font-size:13px!important;font-weight:500!important;text-decoration:none!important}
.top-nav a:hover,.top-nav a.on{color:var(--sf-ink)!important;background:transparent!important}
.site-frame-console{border:0!important;border-radius:980px!important;color:var(--sf-bg)!important;background:var(--sf-ink)!important;padding:8px 15px!important}
.site-theme-toggle{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--sf-line);border-radius:980px;background:transparent;color:var(--sf-ink);cursor:pointer;font-size:15px}

/* page */
.wrap{width:min(920px,calc(100% - 36px))!important;flex:1;margin:0 auto!important;padding:76px 0 56px!important}
.wrap article{max-width:760px!important;margin:auto!important}
.kicker{color:var(--sf-muted)!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-size:12px!important;font-weight:600!important}
.wrap h1{color:var(--sf-ink)!important;font-size:clamp(32px,4.6vw,54px)!important;letter-spacing:-.035em!important;line-height:1.06!important;font-weight:700!important}
.wrap h2,.wrap h3{color:var(--sf-ink)!important;letter-spacing:-.03em!important}
.wrap p,.wrap li,.sub,.meta{color:var(--sf-muted)!important}
.wrap a{color:var(--sf-cyan)!important}
.grid,.card,article .callout{border-color:var(--sf-line)!important}
.tile,.card,article .callout{background:var(--sf-panel)!important;color:var(--sf-ink)!important;border:1px solid var(--sf-line)!important;border-radius:18px!important;box-shadow:none!important;backdrop-filter:none}
.tile:hover{border-color:var(--sf-ink)!important;transform:translateY(-3px)}
.tile span,.tile em{color:var(--sf-muted)!important}
pre{background:#0b0b0f!important;border:1px solid #232329!important;border-radius:14px!important}
code{color:#83e8ee!important;font-family:var(--sf-mono)!important}

/* footer */
.agent-static-footer{margin-top:auto;background:var(--sf-foot)!important;color:var(--sf-muted);border-top:1px solid var(--sf-line)}
.agent-static-footer-in{width:min(1080px,100%);margin:auto;padding:44px 24px;display:grid;grid-template-columns:1.5fr repeat(2,minmax(120px,.6fr)) 1fr;gap:28px}
.agent-static-footer strong{color:var(--sf-ink)!important;font-size:15px}
.agent-static-footer p{margin:5px 0 0;color:var(--sf-muted)!important;font-size:12px}
.agent-static-footer h2{margin:0 0 9px;color:var(--sf-muted)!important;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.agent-static-footer a{display:block;margin:7px 0;color:var(--sf-muted)!important;font-size:12px;text-decoration:none}
.agent-static-footer a:hover{color:var(--sf-ink)!important}
.agent-static-status{display:flex;align-items:flex-start;gap:9px}
.agent-static-status i{width:8px;height:8px;flex:0 0 8px;margin-top:4px;border-radius:50%;background:#34c759;box-shadow:0 0 10px rgba(52,199,89,.6)}
.agent-static-status small{display:block;margin-top:4px;color:var(--sf-muted)!important;font-size:11px}
.agent-static-bottom{border-top:1px solid var(--sf-line)!important;padding:15px 24px;color:var(--sf-muted)!important;font-size:11px;text-align:center;background:transparent!important}
@media(max-width:760px){.top-in{min-height:52px!important;padding:0 16px!important;gap:8px!important}.logo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-nav{min-width:0}.top-nav a{display:none}.top-nav a.site-frame-console{display:block!important}.wrap{width:min(100% - 32px,920px)!important;padding:44px 0!important}.agent-static-footer-in{grid-template-columns:1fr 1fr;padding:32px 18px}.agent-static-footer-in>div:first-child{grid-column:1/-1}.site-theme-toggle{margin-left:auto}.top-nav{margin-left:0!important}}