:root { --ink:#0a1915; --deep:#08221b; --paper:#f4f1e9; --mint:#9df6d0; --line:rgba(10,25,21,.16); --muted:#66736c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }.topbar { min-height:76px; padding:0 max(5vw,36px); background:var(--deep); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:22px; }.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-size:15px; }.brand b { color:var(--mint); }.brand-mark { width:44px; height:44px; position:relative; display:inline-flex; flex:0 0 44px; align-items:center; justify-content:center; border-radius:9px; background:url("assets/biobody-os-header.png") center/contain no-repeat; }.brand-mark i { display:none; }.brand-mark i:first-child { transform:translate(-7px,4px); }.brand-mark i:nth-child(2) { transform:translate(7px,4px); }.brand-mark i:nth-child(3) { transform:translateY(-7px); }.back-link { color:var(--mint); font-size:11px; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; border-bottom:1px solid rgba(157,246,208,.45); padding-bottom:3px; }
.page-hero { padding:84px max(5vw,36px) 62px; background:var(--deep); color:#fff; }.eyebrow { color:var(--mint); font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }.page-hero h1 { max-width:800px; margin:18px 0 0; font:400 clamp(48px,7vw,88px)/.92 Georgia,serif; letter-spacing:-.06em; }.page-hero p { max-width:650px; color:rgba(255,255,255,.65); font-size:15px; line-height:1.7; margin:27px 0 0; }.page-hero time { display:block; color:rgba(255,255,255,.38); font-size:9px; letter-spacing:.12em; margin-top:28px; text-transform:uppercase; }
.layout { max-width:1140px; margin:0 auto; padding:72px max(5vw,36px) 94px; display:grid; grid-template-columns:210px minmax(0,1fr); gap:72px; }.toc { height:max-content; position:sticky; top:24px; border-top:1px solid var(--ink); }.toc span { display:block; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.13em; margin:15px 0 8px; }.toc a { display:block; padding:8px 0; border-bottom:1px solid var(--line); color:#3d554b; font-size:11px; text-decoration:none; }.toc a:hover { color:#0d7655; }.content { max-width:700px; }.content section { border-top:1px solid var(--line); padding:30px 0 12px; }.content section:first-child { border-top:1px solid var(--ink); }.content h2 { margin:0 0 14px; font:400 31px/1.05 Georgia,serif; letter-spacing:-.035em; }.content h3 { margin:25px 0 8px; font:400 20px/1.2 Georgia,serif; }.content p,.content li { color:#4e6058; font-size:14px; line-height:1.75; }.content p { margin:0 0 16px; }.content ul,.content ol { margin:0 0 18px; padding-left:21px; }.content li + li { margin-top:7px; }.callout { margin:24px 0; padding:18px 20px; border-left:4px solid #287c5d; background:#ddf1e8; color:#355a4c; font-size:13px; line-height:1.65; }.callout.caution { border-color:#b27726; background:#fff3d8; }.faq-list details { border-bottom:1px solid var(--line); padding:17px 0; }.faq-list summary { cursor:pointer; font:400 20px/1.25 Georgia,serif; }.faq-list p { margin:12px 0 0; }.steps { counter-reset:guide; list-style:none; padding:0; }.steps li { position:relative; padding:0 0 23px 52px; }.steps li::before { counter-increment:guide; content:"0" counter(guide); position:absolute; left:0; top:2px; color:#227453; font-size:11px; font-weight:800; letter-spacing:.1em; }.steps strong { display:block; color:var(--ink); font:400 21px/1.2 Georgia,serif; margin-bottom:6px; }
.page-footer { padding:33px max(5vw,36px); background:#061712; color:rgba(255,255,255,.5); display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; font-size:10px; }.page-footer nav { display:flex; flex-wrap:wrap; gap:9px 14px; }.page-footer a { color:rgba(255,255,255,.72); text-decoration:none; }.page-footer a:hover { color:var(--mint); }
@media (max-width:720px) { .topbar { padding:18px 20px; }.page-hero { padding:64px 20px 48px; }.layout { display:block; padding:48px 20px 64px; }.toc { position:static; margin-bottom:36px; }.toc a { display:inline-block; margin-right:16px; border:0; }.content h2 { font-size:29px; }.page-footer { padding:28px 20px; } }