/* docs.utilities.best: the documentation (scripts/lib/docs.mjs builds the pages).
   A bar across the top with the search and the way back to the main site, the pages down
   the left, the page in the middle and "On this page" on the right: the shape the good bot
   docs share. Dressed in this site's own tokens (site.css): its black, its one cyan accent,
   its fonts and its icons. Nothing white and filled: the only solid colour is the accent. */

body.docs{background:var(--bg);overflow-x:clip}
body.docs::before{content:"";position:fixed;inset:0 0 auto;height:420px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 100% at 50% 0,rgba(166,228,245,.055),transparent 70%)}

/* ---------- the bar across the top */
.dc-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;height:64px;padding:0 22px;background:rgba(10,10,10,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.dc-brand{display:flex;align-items:center;gap:9px;flex:none;font:700 18px/1 var(--display);letter-spacing:-.01em;color:#fff}
.dc-brand__gear{width:23px;height:23px;fill:#fff;transition:transform .8s var(--ease)}
@media (hover:hover){.dc-brand:hover .dc-brand__gear{transform:rotate(90deg)}}
.dc-badge{padding:4px 8px;border-radius:7px;background:rgba(166,228,245,.1);border:1px solid rgba(166,228,245,.18);color:var(--acc);font:600 11.5px/1 var(--sans);letter-spacing:.02em}
.dc-search{display:flex;align-items:center;gap:10px;width:100%;max-width:400px;height:40px;margin-left:28px;padding:0 9px 0 13px;border-radius:11px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--t50);font-size:14.5px;text-align:left;transition:border-color .2s ease,color .2s ease,background-color .2s ease}
@media (hover:hover){.dc-search:hover{border-color:rgba(255,255,255,.24);color:var(--t65);background:rgba(255,255,255,.045)}}
.dc-search svg{width:16px;height:16px;flex:none}
.dc-search span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dc-kbd{flex:none;padding:3px 6px;border-radius:6px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--t50);font:500 11.5px/1 var(--sans)}
.dc-head__links{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--t65)}
.dc-head__links a{transition:color .2s ease}
@media (hover:hover){.dc-head__links a:hover{color:#fff}}
.dc-head__soon{display:inline-flex;align-items:center;gap:6px;color:var(--t40);cursor:default}
.dc-head__soon .soon{padding:2px 6px;border-radius:5px;background:rgba(166,228,245,.1);color:var(--acc);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.dc-head__icon{display:grid;place-items:center;width:36px;height:36px;margin-left:-6px;border-radius:10px;border:1px solid var(--line2)}
.dc-head__icon svg{width:18px;height:18px}
@media (hover:hover){.dc-head__icon:hover{border-color:rgba(255,255,255,.24)}}
.dc-head__menu,.dc-head__find{display:none;width:38px;height:38px;flex:none;align-items:center;justify-content:center;border-radius:10px;color:var(--t65)}
.dc-head__menu svg,.dc-head__find svg{width:19px;height:19px}

/* ---------- the pages down the left */
.dc{display:flex;max-width:1520px;margin:0 auto}
.dc-side{position:sticky;top:64px;flex:none;width:268px;height:calc(100vh - 64px);height:calc(100dvh - 64px);padding:22px 10px 24px 22px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.dc-side__top{display:none}
.dc-nav__group+.dc-nav__group{margin-top:22px}
.dc-nav__h{margin:0 12px 6px;color:#fff;font:600 13px/1.4 var(--sans);letter-spacing:.01em}
.dc-nav__a{position:relative;display:flex;align-items:center;gap:11px;height:35px;padding:0 12px;border-radius:9px;color:var(--t50);font-size:14.5px;font-weight:500;transition:background-color .2s ease,color .2s ease}
.dc-nav__a svg{width:16px;height:16px;flex:none;opacity:.8}
@media (hover:hover){.dc-nav__a:hover{color:#fff}}
.dc-nav__a.is-on{color:#fff;background:rgba(166,228,245,.07)}
.dc-nav__a.is-on svg{color:var(--acc);opacity:1}
.dc-nav__a.is-on::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--acc)}

/* ---------- the page */
.dc-main{flex:1;min-width:0;transition:opacity .18s ease}
.dc-main.is-leaving{opacity:.35}
.dc-body{display:flex;justify-content:center;gap:56px;padding:44px clamp(20px,4vw,64px) 96px}
.dc-doc{width:100%;max-width:740px;min-width:0}
.dc-crumbs{display:flex;align-items:center;gap:7px;color:var(--t40);font-size:13.5px;font-weight:500}
.dc-crumbs a{transition:color .2s ease}
@media (hover:hover){.dc-crumbs a:hover{color:#fff}}
.dc-crumbs svg{width:11px;height:11px;transform:rotate(-90deg)}
.dc-crumbs span{color:var(--acc)}
.dc-title{margin-top:12px;font:700 clamp(32px,4.2vw,44px)/1.1 var(--display);letter-spacing:-.025em;color:#fff}
.dc-lead{margin-top:12px;color:var(--t50);font-size:18px;line-height:1.55}

/* ---------- what a page is written in */
.dc-prose{margin-top:10px;color:var(--t65);font-size:16px;line-height:1.72}
.dc-prose>*+*{margin-top:18px}
.dc-prose h2{position:relative;margin-top:52px;padding-top:4px;font:700 25px/1.25 var(--display);letter-spacing:-.015em;color:#fff;scroll-margin-top:90px}
.dc-prose h3{position:relative;margin-top:34px;font:650 19px/1.3 var(--display);color:#fff;scroll-margin-top:90px}
.dc-prose h2+*,.dc-prose h3+*{margin-top:12px}
.dc-anchor{position:absolute;left:-.95em;padding-right:.25em;color:var(--t40);opacity:0;transition:opacity .2s ease}
.dc-anchor:focus-visible{opacity:1}@media (hover:hover){.dc-prose h2:hover .dc-anchor,.dc-prose h3:hover .dc-anchor{opacity:1}}
.dc-prose strong,.dc-prose b{color:#fff;font-weight:600}
.dc-prose a:not(.dc-card):not(.dc-anchor){color:var(--acc);text-decoration:underline;text-decoration-color:rgba(166,228,245,.35);text-underline-offset:3px;transition:text-decoration-color .2s ease}
@media (hover:hover){.dc-prose a:not(.dc-card):not(.dc-anchor):hover{text-decoration-color:var(--acc)}}
.dc-prose ul,.dc-prose ol{padding-left:22px}
.dc-prose ul{list-style:disc}
.dc-prose ol{list-style:decimal}
.dc-prose li+li{margin-top:7px}
.dc-prose li::marker{color:var(--t40)}
.dc-prose code{font-size:.84em;color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--line);padding:2px 6px;border-radius:6px}

.dc-prose ol.dc-steps{list-style:none;padding:0;counter-reset:step}
.dc-steps>li{position:relative;padding-left:44px;counter-increment:step}
.dc-steps>li::before{content:counter(step);position:absolute;left:0;top:1px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(166,228,245,.08);border:1px solid rgba(166,228,245,.2);color:var(--acc);font:600 13px/1 var(--sans)}
.dc-steps>li+li{margin-top:16px}

.dc-code{position:relative;border-radius:14px;border:1px solid var(--line2);background:#070708}
.dc-code pre{margin:0;padding:17px 54px 17px 20px;overflow-x:auto;font:500 14px/1.7 var(--mono);color:#ededed;white-space:pre}
.dc-copy{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:var(--t50);transition:color .2s ease,background-color .2s ease}
@media (hover:hover){.dc-copy:hover{color:#fff;background:rgba(255,255,255,.06)}}
.dc-copy svg{width:16px;height:16px}
.dc-copy.is-done{color:#57d38c}

.dc-note{display:flex;gap:12px;padding:15px 18px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:#dcdcdc;font-size:15px;line-height:1.65}
.dc-note>svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--acc)}
.dc-note>div>*+*{margin-top:8px}
.dc-note--tip{border-color:rgba(87,211,140,.26);background:rgba(87,211,140,.06);color:#d3f5df}
.dc-note--tip>svg{color:#57d38c}
.dc-note--warn{border-color:rgba(240,178,50,.28);background:rgba(240,178,50,.06);color:#f6e2b7}
.dc-note--warn>svg{color:#f0b232}

.dc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dc-card{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#111214,#0c0d0f);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:border-color .25s ease}
@media (hover:hover){.dc-card:hover{border-color:var(--line2)}}
.dc-card__ic{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(166,228,245,.07);border:1px solid rgba(166,228,245,.16)}
.dc-card__ic svg{width:17px;height:17px;color:var(--acc)}
.dc-card__t{display:flex;align-items:center;gap:8px;color:#fff;font:650 16px/1.3 var(--display)}
.dc-card__go{width:15px;height:15px;margin-left:auto;color:var(--t40);transition:transform .25s var(--ease),color .2s ease}
@media (hover:hover){.dc-card:hover .dc-card__go{transform:translateX(3px);color:#fff}}
.dc-card__d{color:var(--t50);font-size:14.5px;line-height:1.6}

.dc-cmds{border-radius:16px;border:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.015)}
.dc-cmd{position:relative;padding:14px 18px}
.dc-cmd+.dc-cmd::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--line)}
.dc-cmd__top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.dc-prose .dc-cmd__syntax{padding:0;border:0;background:none;color:#fff;font:600 14.5px/1.5 var(--mono)}
.dc-cmd__arg{color:var(--t50);font-weight:500}
.dc-cmd__perms{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.dc-chip{padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--t65);font-size:12px;font-weight:500;line-height:1.4}
.dc-cmd__none{color:var(--t40);font-size:12.5px}
.dc-cmd__desc{margin-top:4px;color:var(--t50);font-size:14.5px;line-height:1.6}
.dc-cmd__alias{color:var(--t40)}

.dc-table{border-radius:16px;border:1px solid var(--line);overflow-x:auto;background:rgba(255,255,255,.015)}
.dc-table table{width:100%;border-collapse:collapse;font-size:14.5px}
.dc-table th,.dc-table td{padding:11px 16px;text-align:left;vertical-align:top}
.dc-table thead th{color:var(--t40);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap}
.dc-table tbody th{color:#fff;font-weight:600;white-space:nowrap}
.dc-table tbody td{color:var(--t65);font-variant-numeric:tabular-nums}
.dc-table tbody tr+tr>*{border-top:1px solid var(--line)}

.dc-pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line)}
.dc-pager__a{display:flex;flex-direction:column;gap:4px;padding:15px 18px;border-radius:14px;border:1px solid var(--line);transition:border-color .2s ease}
@media (hover:hover){.dc-pager__a:hover{border-color:var(--line2)}}
.dc-pager__a span{color:var(--t40);font-size:13px}
.dc-pager__a b{color:#fff;font-weight:600;font-size:15px}
.dc-pager__a--next{text-align:right;grid-column:2}

/* ---------- on this page */
.dc-toc{position:sticky;top:104px;flex:none;width:220px;align-self:flex-start;max-height:calc(100vh - 130px);overflow-y:auto}
.dc-toc__h{color:#fff;font-size:13px;font-weight:600}
.dc-toc nav{display:flex;flex-direction:column;margin-top:10px;border-left:1px solid var(--line)}
.dc-toc__l{margin-left:-1px;padding:5px 0 5px 14px;border-left:1px solid transparent;color:var(--t50);font-size:13.5px;line-height:1.4;transition:color .2s ease,border-color .2s ease}
.dc-toc__l--sub{padding-left:26px;font-size:13px}
@media (hover:hover){.dc-toc__l:hover{color:#fff}}
.dc-toc__l.is-on{color:var(--acc);border-left-color:var(--acc)}

/* ---------- the front page */
.dc-home{max-width:1060px;margin:0 auto;padding:72px clamp(20px,4vw,56px) 110px}
.dc-hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.dc-hero__eyebrow{color:var(--acc);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.dc-hero__t{margin-top:14px;font:800 clamp(36px,5.6vw,60px)/1.05 var(--hero);letter-spacing:-.035em;color:#fff;user-select:none}
.dc-hero__lead{max-width:540px;margin-top:16px;color:var(--t50);font-size:18px;line-height:1.55}
.dc-hero__search{display:flex;align-items:center;gap:11px;width:100%;max-width:520px;height:52px;margin-top:32px;padding:0 12px 0 18px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.035);color:var(--t50);font-size:16px;text-align:left;transition:border-color .2s ease,background-color .2s ease}
@media (hover:hover){.dc-hero__search:hover{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.05)}}
.dc-hero__search svg{width:18px;height:18px;flex:none}
.dc-hero__search span{flex:1}
.dc-hero__go{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.dc-pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);color:var(--t65);font-size:14px;font-weight:500;transition:border-color .2s ease,color .2s ease}
@media (hover:hover){.dc-pill:hover{border-color:rgba(255,255,255,.26);color:#fff}}
.dc-pill svg{width:14px;height:14px}
.dc-pill--on{border-color:rgba(166,228,245,.35);color:var(--acc)}
@media (hover:hover){.dc-pill--on:hover{border-color:var(--acc);color:var(--acc-2)}}
.dc-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:72px}
.dc-sec{padding:22px 22px 14px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#111214,#0c0d0f);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.dc-sec__hd{display:flex;gap:14px;align-items:flex-start}
.dc-sec__ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(166,228,245,.07);border:1px solid rgba(166,228,245,.16)}
.dc-sec__ic svg{width:18px;height:18px;color:var(--acc)}
.dc-sec__t{font:700 17px/1.3 var(--display);color:#fff}
.dc-sec__d{margin-top:4px;color:var(--t50);font-size:14px;line-height:1.55}
.dc-sec__list{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.dc-sec__list a{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;color:var(--t65);font-size:14.5px;font-weight:500;transition:color .2s ease}
.dc-sec__list a svg{width:14px;height:14px;color:var(--t40);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .25s var(--ease)}
@media (hover:hover){.dc-sec__list a:hover{color:#fff}}
@media (hover:hover){.dc-sec__list a:hover svg{opacity:1;transform:none}}

/* ---------- search */
.dc-find{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dc-find[hidden]{display:none}
.dc-find__box{width:100%;max-width:620px;border-radius:18px;border:1px solid var(--line2);background:#0e0f11;box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden}
.dc-find__field{display:flex;align-items:center;gap:12px;height:58px;padding:0 16px 0 18px;border-bottom:1px solid var(--line)}
.dc-find__field svg{width:18px;height:18px;flex:none;color:var(--t50)}
.dc-find__field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:#fff;font:400 16px var(--sans)}
.dc-find__field input::placeholder{color:var(--t40)}
.dc-find__field input::-webkit-search-cancel-button{display:none}
.dc-find__results{max-height:min(420px,60vh);overflow-y:auto;padding:8px}
.dc-find__empty{padding:28px 12px;color:var(--t40);text-align:center;font-size:14.5px}
.dc-find__item{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;color:var(--t65)}
.dc-find__item b{color:#fff;font-weight:600;font-size:15px}
.dc-find__item span{color:var(--t40);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-find__item.is-on{background:rgba(255,255,255,.06)}
.dc-find__item mark{background:none;color:var(--acc)}

/* ---------- smaller screens */
@media (max-width:1240px){.dc-toc{display:none}}
@media (max-width:1060px){.dc-head__links{gap:20px}.dc-head__soon{display:none}}
@media (max-width:980px){.dc-sections{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:880px){
  .dc-head{padding:0 12px;gap:8px}
  .dc-head__menu,.dc-head__find{display:flex}
  .dc-head .dc-search,.dc-head__links{display:none}
  .dc-head__find{margin-left:auto}
  .dc-side{position:fixed;left:0;top:0;bottom:0;z-index:40;width:min(300px,86vw);height:auto;padding:14px 10px 24px 16px;background:#0b0b0c;border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .35s var(--expo)}
  .dc.is-open .dc-side{transform:none}
  .dc-side__top{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 16px 12px;color:var(--t40);font-size:13px;font-weight:600}
  .dc-side__close{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:9px;color:var(--t65)}
  .dc-side__close svg{width:18px;height:18px}
  .dc-scrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.55)}
  .dc-body{padding:28px 18px 64px}
  .dc-cards{grid-template-columns:1fr}
  .dc-lead{font-size:16.5px}
  .dc-cmd__perms{margin-left:0}
  .dc-home{padding-top:44px}
  .dc-sections{grid-template-columns:1fr;margin-top:48px}
}
@media (hover:none){.dc-kbd[data-kbd]{display:none}}
@media (prefers-reduced-motion:reduce){.dc-side,.dc-main{transition:none}}