/* ORBILACTIC — docs */
.dl { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-top: 40px; align-items: start; }
.toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: none; }
.toc .ver { margin-bottom: 14px; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--amber); }
.toc a { padding: 7px 12px; border-left: 2px solid var(--line); font: 500 14px var(--sans); color: var(--dim); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); } .toc a.on { color: var(--ink); border-color: var(--amber); }
.doc { max-width: 860px; min-width: 0; }
.doc section { padding-top: 34px; margin-bottom: 40px; scroll-margin-top: 70px; }
.doc section + section { border-top: 1px solid var(--line); }
.doc h1 { margin-top: 14px; font: 800 clamp(36px, 5vw, 60px)/1 var(--disp); letter-spacing: -.04em; }
.doc h1 em, .doc h2 em { font-style: normal; color: var(--mut); }
.doc h2 { margin-top: 12px; font: 800 clamp(26px, 3vw, 36px)/1.1 var(--disp); letter-spacing: -.03em; }
.doc h3 { display: flex; align-items: center; gap: 10px; margin-top: 30px; font: 700 15px var(--mono); letter-spacing: .08em; }
.doc h3 i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: #1a1000; font: 700 12px var(--mono); font-style: normal; }
.doc p { margin-top: 14px; font: 400 16px/1.7 var(--sans); color: var(--dim); }
.doc p b { color: var(--ink); } .doc p a, .doc li a { color: var(--amber); } .doc p a:hover { text-decoration: underline; }
.doc .lead { font-size: 18px; }
.doc code { padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.07); font: 500 .88em var(--mono); color: #e6dfff; }
.doc pre.code { margin-top: 16px; }
.flow { display: block; width: 100%; margin-top: 30px; }
.flow .st path { stroke-width: 2; stroke-dasharray: 6 6; marker-end: none; animation: dash 1.2s linear infinite; }
.flow .st text { font: 600 13px var(--mono); fill: #f4f0ff; text-anchor: middle; }
.flow .fl { font: 500 12px var(--mono); fill: #6f6799; text-anchor: middle; }
@keyframes dash { to { stroke-dashoffset: -12; } }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.cards3 div { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.cards3 b { display: block; font: 700 15px var(--disp); } .cards3 span { display: block; margin-top: 8px; font: 400 14px/1.55 var(--sans); color: var(--dim); }
table.t { width: 100%; margin-top: 18px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); }
table.t th, table.t td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--sans); color: var(--dim); }
table.t tr:first-child th, table.t tr:first-child td { border-top: 0; }
table.t th { font: 500 11px var(--mono); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
table.t td b { color: var(--ink); } table.t td:first-child, table.t td code { white-space: nowrap; }
.steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 54px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); font: 400 15px/1.55 var(--sans); color: var(--dim); }
.steps li::before { content: counter(s); position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--amber); color: var(--amber); font: 700 12px var(--mono); }
.steps b { color: var(--ink); }
.rtab { margin-top: 18px; display: grid; gap: 8px; }
.rtab a { display: grid; grid-template-columns: 44px 110px 1fr 150px 20px; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s; }
.rtab a:hover { border-color: var(--rc); }
.rtab svg { width: 44px; height: 44px; } .rtab b { font: 700 15px var(--disp); }
.rtab span { font: 500 12.5px var(--mono); color: var(--dim); } .rtab .pr { color: var(--amber); text-align: right; } .rtab i { font-style: normal; color: var(--mut); }
@media (max-width: 900px) { .dl { grid-template-columns: 1fr; gap: 0; padding-top: 10px; } .toc { position: sticky; top: 64px; z-index: 5; flex-direction: row; flex-wrap: nowrap; gap: 6px; max-height: none; overflow-x: auto; margin: 0 -16px; padding: 10px 16px; background: rgba(5,4,26,.92); backdrop-filter: blur(10px); } .toc a { flex: none; } .toc .ver { display: none; } .toc .ver { width: 100%; margin-bottom: 4px; } .toc a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; } .cards3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .rtab a { grid-template-columns: 40px 1fr auto; } .rtab a > span:nth-of-type(1), .rtab i { display: none; } table.t td:first-child { white-space: normal; } table.t th, table.t td { padding: 10px 12px; font-size: 13px; } .flow .st text { font-size: 16px; } }