/* Piixpal docs: the component pages. Builds on site.css tokens. */
.docs{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(28px,4vw,56px);width:var(--wrap);margin:0 auto;padding:36px 0 140px}
@media (max-width:900px){.docs{grid-template-columns:minmax(0,1fr)}}

/* sidebar */
.side{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 116px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.side h4{margin:22px 0 8px;font:400 11.5px/1 var(--f-pix);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.side h4:first-child{margin-top:4px}
.side a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;text-decoration:none;font:550 15px/1.2 var(--f-sans);color:var(--ink-2);transition:background-color .2s,color .2s}
.side a:hover{background:var(--paper-2);color:var(--ink)}
.side a[aria-current=page],.side a.on{background:var(--ink);color:var(--paper)}
.side a .n{margin-left:auto;font:400 10.5px/1 var(--f-pix);opacity:.6}
.side a i{width:8px;height:8px;flex:none;background:var(--dot,var(--line-2));box-shadow:0 0 0 1.5px var(--ink)}
@media (max-width:900px){
  .side{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin:0 -4px}
  .side h4{display:none}
  .side a{flex:none;border:1.5px solid var(--line-2)}
}

/* page header */
.doc-head{padding:8px 0 30px;border-bottom:2px solid var(--ink);margin-bottom:40px}
.crumbs{font:400 12px/1 var(--f-pix);text-transform:uppercase;color:var(--muted);display:flex;gap:8px;align-items:center}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.doc-head h1{margin:14px 0 12px;font:780 clamp(40px,6vw,76px)/.95 var(--f-sans);letter-spacing:-.05em}
.doc-head p{margin:0;max-width:62ch;color:var(--ink-2);font-size:18.5px;text-wrap:pretty}
.doc-head .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{font:600 12.5px/1 var(--f-sans);padding:7px 10px;border-radius:999px;border:1.5px solid var(--ink);background:var(--card)}

.doc-sec{padding-top:56px}
.doc-sec:first-of-type{padding-top:0}
.doc-sec > h2{margin:0 0 6px;font:760 clamp(28px,3.4vw,40px)/1.05 var(--f-sans);letter-spacing:-.04em;scroll-margin-top:96px}
.doc-sec > p{margin:0 0 22px;color:var(--ink-2);max-width:64ch}

/* customiser */
.custom{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--card);box-shadow:8px 8px 0 var(--lime-2);overflow:hidden}
@media (max-width:1100px){.custom{grid-template-columns:minmax(0,1fr)}}
.c-stage{position:relative;min-height:340px;display:grid;place-items:center;padding:30px;border-right:2px solid var(--ink);
  background:radial-gradient(color-mix(in oklab,currentColor 18%,transparent) 1px,transparent 1.3px) 0 0/18px 18px,var(--stage,var(--paper));color:var(--ink);transition:background-color .3s}
@media (max-width:1100px){.c-stage{border-right:0;border-bottom:2px solid var(--ink)}}
.c-stage[data-bg=ink]{--stage:var(--ink);color:#fff}
.c-stage[data-bg=lime]{--stage:var(--lime)}
.c-stage[data-bg=violet]{--stage:var(--violet);color:#fff}
.c-stage .c-name{position:absolute;left:16px;top:14px;font:400 12px/1 var(--f-pix);text-transform:uppercase;opacity:.65}
.c-bgs{position:absolute;right:12px;top:10px;display:flex;gap:6px}
.c-bgs button{width:22px;height:22px;border-radius:6px;border:2px solid var(--ink);cursor:pointer;padding:0}
.c-bgs button[aria-pressed=true]{outline:2px solid currentColor;outline-offset:2px}
.c-panel{display:flex;flex-direction:column}
.c-controls{display:grid;gap:14px;padding:20px}
.ctl{display:grid;grid-template-columns:78px minmax(0,1fr) 42px;align-items:center;gap:12px;font:600 13.5px/1 var(--f-sans);color:var(--ink-2)}
.ctl.wide{grid-template-columns:78px minmax(0,1fr)}
.ctl output{text-align:right;font:500 12.5px/1 var(--f-mono);color:var(--ink)}
.ctl input[type=range]{width:100%;accent-color:var(--ink)}
.ctl input[type=text]{width:100%;font:500 15px/1 var(--f-sans);padding:10px 12px;border:2px solid var(--ink);border-radius:10px;background:var(--paper)}
.ctl input[type=text]:focus{outline:none;box-shadow:0 0 0 3px var(--lime)}
.toggles{display:flex;flex-wrap:wrap;gap:6px}
.toggles label{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--f-sans);padding:8px 11px;border:2px solid var(--ink);border-radius:9px;cursor:pointer;background:var(--paper);user-select:none;transition:background-color .2s}
.toggles input{position:absolute;opacity:0;pointer-events:none}
.toggles label:has(input:checked){background:var(--ink);color:var(--paper)}
.toggles label:has(input:focus-visible){outline:3px solid var(--violet);outline-offset:2px}
.c-code{position:relative;margin:auto 0 0;padding:16px 20px;background:var(--code);color:#e8e3f3;font:400 13.5px/1.7 var(--f-mono);white-space:pre-wrap;word-break:break-word;min-height:84px}
.c-code .copy{position:absolute;right:10px;top:10px}

/* sprite grid */
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1200px){.sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.scard{position:relative;display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:18px;background:var(--card);box-shadow:0 4px 0 var(--ink);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.scard:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink)}
.scard.sel{box-shadow:0 4px 0 var(--ink),0 0 0 4px var(--lime)}
.scard .s-stage{height:150px;display:grid;place-items:center;margin:8px 8px 0;border-radius:12px;
  background:radial-gradient(color-mix(in oklab,var(--ink) 12%,transparent) 1px,transparent 1.3px) 0 0/14px 14px,color-mix(in oklab,var(--accent,var(--lime)) 26%,var(--paper))}
.scard .s-body{padding:12px 14px 14px;display:grid;gap:6px}
.scard h3{margin:0;font:740 19px/1 var(--f-sans);letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between;gap:8px}
.scard h3 small{font:400 10.5px/1 var(--f-pix);color:var(--muted);letter-spacing:0}
.scard p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2);min-height:3.9em}
.scard .s-actions{display:flex;gap:6px;margin-top:4px}
.scard .s-actions button{flex:1;font:600 12.5px/1 var(--f-sans);padding:9px 8px;border-radius:8px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;transition:background-color .2s,color .2s}
.scard .s-actions button:hover{background:var(--lime)}
.scard .s-actions button.dark{background:var(--ink);color:var(--paper)}
.scard .s-actions button.dark:hover{background:var(--lime);color:var(--ink)}
.scard .s-actions button.copied{background:var(--lime);color:var(--ink)}

/* pal docs */
.pal-doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:1100px){.pal-doc{grid-template-columns:minmax(0,1fr)}}
.pal-doc .habitat{height:300px;margin:0;border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:0 4px 0 var(--ink)}
.pal-doc .info{display:grid;gap:14px}
.pal-doc .info p{margin:0;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:14.5px}
.kv dt{font:600 13px/1.5 var(--f-mono)}
.kv dd{margin:0;color:var(--ink-2)}
.codebox{position:relative;margin:0;padding:16px 18px;border-radius:14px;background:var(--code);color:#e8e3f3;font:400 13.5px/1.7 var(--f-mono);white-space:pre-wrap;word-break:break-word}
.codebox .copy{position:absolute;right:10px;top:10px}

/* overview cards */
.ov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:980px){.ov{grid-template-columns:minmax(0,1fr)}}
.ov a{display:flex;flex-direction:column;gap:10px;padding:22px;border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--card);box-shadow:0 4px 0 var(--ink);text-decoration:none;
  transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.ov a:hover{transform:translateY(-4px);box-shadow:0 8px 0 var(--ink)}
.ov .ov-art{height:150px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:14px;background:color-mix(in oklab,var(--accent) 28%,var(--paper));border:1.5px solid color-mix(in oklab,var(--ink) 15%,transparent)}
.ov h3{margin:6px 0 0;font:760 26px/1 var(--f-sans);letter-spacing:-.03em;display:flex;justify-content:space-between;align-items:baseline}
.ov h3 span{font:400 12px/1 var(--f-pix);color:var(--muted)}
.ov p{margin:0;color:var(--ink-2);font-size:15.5px}

/* bits used by the generated pages */
.sel{width:100%;font:600 15px/1 var(--f-sans);padding:10px 12px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);cursor:pointer}
.doc-sec > h2 .pal-no{font-size:12px;vertical-align:middle;margin-left:8px}
.h-hive{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:16px 26px;border:2px solid var(--ink);border-radius:12px;background:var(--sun);
  font:400 13px/1 var(--f-pix);text-transform:uppercase;box-shadow:0 4px 0 var(--ink)}
.doc-head em{font-style:normal;background:linear-gradient(transparent 62%,var(--lime) 62% 92%,transparent 92%)}
.doc-sec code{font-size:.88em;padding:1px 6px;border-radius:6px;background:var(--paper-2);border:1px solid var(--line)}
.pal-doc .habitat .h-text{bottom:90px}

.scard.big .s-stage{height:200px}
.ctl input[type=color]{width:100%;height:36px;padding:2px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);cursor:pointer}
.ctl input:disabled{opacity:.35;cursor:not-allowed}
.mini{font:600 11.5px/1 var(--f-sans);padding:8px 6px;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer}

/* toy box + groups habitats, crowd page */
.fam-h{display:flex;align-items:center;gap:12px}
.family{padding-top:72px}
.family + .doc-sec{padding-top:28px}
.h-tank{position:absolute;inset:26px 26px 26px;border:2px solid var(--ink);border-radius:12px;background:linear-gradient(#bfe9ff,#7fd3ff)}
.h-night{position:absolute;inset:22px;border-radius:12px;background:#17121f}
.h-wire{position:absolute;left:0;right:0;top:140px;height:2px;background:var(--ink)}
.crowd-box{border:2px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:8px 8px 0 var(--sky);background:var(--card)}
.crowd-box piix-crowd{background:radial-gradient(color-mix(in oklab,var(--ink) 12%,transparent) 1px,transparent 1.3px) 0 0/16px 16px,var(--paper);border-bottom:2px solid var(--ink)}
.crowd-ctl{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
@media (max-width:980px){.crowd-ctl{grid-template-columns:minmax(0,1fr)}}
.ov{grid-template-columns:repeat(3,minmax(0,1fr))}

/* install tabs */
.tabs{display:grid;gap:0}
.tab-bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:var(--code);border-radius:14px 14px 0 0}
.tab-bar button{font:600 12.5px/1 var(--f-sans);padding:8px 11px;border:0;border-radius:8px;background:transparent;color:#a79fb8;cursor:pointer;transition:background-color .2s,color .2s}
.tab-bar button:hover{color:#fff}
.tab-bar button[aria-selected=true]{background:var(--lime);color:#17121f}
.tabs .tab-pane{border-radius:0 0 14px 14px;margin:0;border-top:1.5px solid #2e2739}
.bookmarklet{cursor:grab}

/* builder */
.builder{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:980px){.builder{grid-template-columns:minmax(0,1fr)}}
.b-list{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--card);padding:6px 12px 12px}
.b-list h4{margin:14px 0 6px;font:400 11.5px/1 var(--f-pix);text-transform:uppercase;color:var(--muted)}
.b-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:5px 2px;font:600 13.5px/1.2 var(--f-sans);cursor:pointer}
.b-item select{font:500 12px var(--f-mono);border:1.5px solid var(--line-2);border-radius:6px;background:var(--paper);color:var(--ink);padding:2px 4px}
.b-item input{accent-color:var(--ink)}
.b-right{display:grid;gap:18px}
.b-site{position:relative;border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--paper);padding:0 0 0;overflow:hidden;min-height:560px}
.b-nav{display:flex;align-items:center;gap:18px;padding:14px 20px;background:var(--code);color:#fff}
.b-nav b{margin-right:auto}
.b-link{opacity:.7;font-size:14px}
.b-h1{margin:60px 32px 10px;font:780 46px/1 var(--f-sans);letter-spacing:-.04em}
.b-p{margin:0 32px 26px;max-width:46ch;color:var(--ink-2)}
.b-row{display:flex;gap:12px;margin:0 32px}
.b-card{margin:60px 32px 0;width:300px;padding:18px;border:2px solid var(--ink);border-radius:14px;background:var(--card);display:grid;gap:6px}
.b-card span{color:var(--muted);font-size:14px}
.b-foot{margin-top:70px;padding:30px;background:var(--violet);color:#fff;font:400 12px var(--f-pix);text-transform:uppercase}
.b-out{border:2px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.b-out .seg{padding:12px}

.h-form{position:absolute;left:24px;right:24px;bottom:50px}
.h-form input{width:100%;font:500 17px/1 var(--f-sans);padding:13px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink)}
.h-form input:focus{outline:none;box-shadow:0 0 0 3px var(--lime)}
.h-captcha{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:270px;padding:16px;border:2px solid var(--ink);border-radius:10px;background:var(--card);font:600 15px var(--f-sans);cursor:pointer}
.h-captcha input{width:20px;height:20px;accent-color:var(--ink)}

/* superpowers */
.pal-doc .habitat.tall{height:380px}
.lv > *{position:absolute;margin:0}
.lv-h{font:760 34px/1 var(--f-sans);letter-spacing:-.03em}
.lv-p{font:500 15.5px/1.5 var(--f-sans);color:var(--ink-2)}
.power .kv dd code{white-space:nowrap}
.pal-doc .habitat{transition:background-color .35s,color .35s}
.pal-doc .habitat.dark{--ink:#f2eef8;--ink-2:#cdc6da;background:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.3px) 0 0/16px 16px,#17121f;color:#f2eef8}
.h-search{position:absolute;width:190px;height:40px;padding:0 12px;border:2px solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink);font:500 14px var(--f-sans)}
.h-avatar{position:absolute;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--sun);font:700 13px var(--f-sans);color:#17121f}
.h-cart{position:absolute;right:18px;top:16px;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:2px solid var(--ink);border-radius:10px;background:var(--card);font:650 14px var(--f-sans)}
.h-cart b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--coral);color:#fff;font:700 12px var(--f-sans)}
.prods{position:absolute;left:18px;right:18px;bottom:18px;display:flex;gap:10px}
.prod{flex:1;display:grid;gap:8px;justify-items:center;padding:10px 8px;border:2px solid var(--ink);border-radius:12px;background:var(--card)}
.prod img{width:64px;height:64px;image-rendering:pixelated;border-radius:8px}
.prod .h-btn{padding:8px 10px;font-size:13px}
.h-cookie{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:#fff8e7;color:#17121f}
.h-cookie p{margin:0;flex:1;font:500 14px/1.4 var(--f-sans)}
.h-cookie .h-btn{padding:9px 12px;font-size:13px;color:#17121f}
.h-article{position:absolute;left:22px;right:22px;top:26px;margin:0}
.h-article h4{margin:0 0 8px;font:760 24px/1.1 var(--f-sans);letter-spacing:-.02em}
.h-article p{margin:0;font:500 16px/1.6 var(--f-sans);color:var(--ink-2)}
.h-tab{position:absolute;left:22px;top:22px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 12px;border:2px solid var(--ink);border-bottom-width:0;border-radius:12px 12px 0 0;background:var(--card);font:600 14px var(--f-sans)}
.h-tab canvas{width:24px;height:24px;image-rendering:pixelated}
.h-tab i{font-style:normal;color:var(--muted);margin-left:8px}
.h-fav{position:absolute;right:28px;top:30px;width:128px;height:128px;image-rendering:pixelated;border:2px dashed color-mix(in oklab,var(--ink) 30%,transparent);border-radius:14px;background:var(--card)}
.h-comments{position:absolute;left:22px;right:22px;top:24px;display:grid;gap:12px}
.h-c{display:flex;align-items:center;gap:12px}
.h-c p{margin:0;padding:10px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--card);font:500 14.5px/1.35 var(--f-sans)}
.h-c b{margin-right:6px}
.h-form input[type=range]{padding:0;border:0;background:none;accent-color:var(--ink)}
.h-form textarea{width:100%;font:500 16px/1.4 var(--f-sans);padding:12px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink);resize:none}
.h-form textarea:focus{outline:none;box-shadow:0 0 0 3px var(--lime)}
.h-drop{position:absolute;left:22px;right:22px;bottom:22px;height:150px;display:grid;place-content:center;gap:6px;text-align:center;border:3px dashed color-mix(in oklab,var(--ink) 55%,transparent);border-radius:16px;font:700 17px var(--f-sans);cursor:pointer;background:color-mix(in oklab,var(--card) 70%,transparent)}
.h-drop small{font:500 13px var(--f-sans);color:var(--muted)}
.h-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---------- release layout: sidebar browser ---------- */
.side{display:block;padding-bottom:24px}
.side-find{width:100%;margin:2px 0 12px;font:500 14px/1 var(--f-sans);padding:10px 12px;border:2px solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink)}
.side-find:focus{outline:none;box-shadow:0 0 0 3px var(--lime)}
.side-start{display:grid;gap:2px;margin:0 0 6px}
.side-start + .sg,.sg + .sg{border-top:1.5px solid var(--line)}
.sg{padding:4px 0}
.sg + .side-start{border-top:1.5px solid var(--line);padding-top:6px;margin-top:0}
.sg summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;padding:2px 0;border-radius:9px}
.sg summary::-webkit-details-marker{display:none}
.sg summary::before{content:"";width:6px;height:6px;margin:0 4px 0 8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .2s;flex:none}
.sg[open] summary::before{transform:rotate(45deg) translate(-2px,-1px)}
.sg summary a{flex:1;font-weight:700;padding:7px 6px}
.sg summary .n{font:400 10.5px/1 var(--f-pix);opacity:.6;padding-right:10px}
.sg h5{margin:12px 0 4px 18px;font:400 10.5px/1 var(--f-pix);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sg > a{padding:5px 10px 5px 18px;font-size:14px}
.side-none{margin:10px;color:var(--muted);font-size:14px}
@media (max-width:900px){
  .side{position:static;display:block;max-height:none;overflow:visible;margin:0}
  .side a{flex:initial;border:0}
}

/* ---------- release layout: one component ---------- */
.cmp{padding-top:64px;scroll-margin-top:84px}
.fam-h + .cmp{padding-top:28px}
.cmp-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:18px}
.cmp-head h2{margin:0;font:760 clamp(26px,3vw,34px)/1.05 var(--f-sans);letter-spacing:-.035em}
.cmp-head .cmp-tag{font:500 12.5px/1 var(--f-mono);padding:5px 8px;border-radius:7px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2)}
.cmp-head p{flex-basis:100%;margin:4px 0 0;color:var(--ink-2);max-width:68ch}
.cmp-head p code{font-size:.88em;padding:1px 6px;border-radius:6px;background:var(--paper-2);border:1px solid var(--line)}
.cmp-body{align-items:stretch}
.cmp-code{display:flex;flex-direction:column;gap:10px;min-width:0}
.cmp-code .tabs{flex:1}
.fam-h{margin:72px 0 0;padding-top:20px;border-top:2px solid var(--ink);font:780 clamp(30px,4vw,44px)/1 var(--f-sans);letter-spacing:-.04em;scroll-margin-top:84px}
.doc-head + .fam-h{margin-top:0;border-top:0;padding-top:0}
.fam-h .n{font:400 13px/1 var(--f-pix);color:var(--muted);vertical-align:middle;margin-left:6px}
.opts{border:2px solid var(--line-2);border-radius:12px;background:var(--card)}
.opts summary{cursor:pointer;padding:10px 14px;font:650 14px/1 var(--f-sans);list-style:none;display:flex;align-items:center;gap:8px}
.opts summary::-webkit-details-marker{display:none}
.opts summary::after{content:"+";margin-left:auto;font:600 16px/1 var(--f-mono);color:var(--muted)}
.opts[open] summary::after{content:"–"}
.opts dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;margin:0;padding:2px 14px 14px;font-size:14px}
.opts dt code{font-size:12.5px;padding:2px 6px;border-radius:6px;background:var(--paper-2);border:1px solid var(--line);white-space:nowrap}
.opts dd{margin:0;color:var(--ink-2)}
.opts dd code{font-size:.9em}
.c-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding:8px 10px 0;background:var(--code)}
.c-tabs button{font:600 12.5px/1 var(--f-sans);padding:8px 11px;border:0;border-radius:8px;background:transparent;color:#a79fb8;cursor:pointer;transition:background-color .2s,color .2s}
.c-tabs button:hover{color:#fff}
.c-tabs button[aria-selected=true]{background:var(--lime);color:#17121f}
.c-tabs + .c-code{margin-top:0}
.side-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--card);font:700 15px/1 var(--f-sans)}
.side-fold > summary::-webkit-details-marker{display:none}
.side-fold > summary::after{content:"+";font:600 18px/1 var(--f-mono)}
.side-fold[open] > summary::after{content:"–"}
.side-fold[open] > summary{margin-bottom:12px}