/* Abilities API page: the scene (scene/focus-desktop.html), the switch that sticks to the side, content 2/3 + sidebar 1/3. */
body:has(.aba-page){background:#000}
body:has(.aba-page.is-light){background:#fff}
.aba-page{--aba-fg:#e7ebf3;--aba-muted:#aeb6c4;--aba-line:#2b303a;--aba-sw:clamp(52px,8vw,150px);background:#000;color:var(--aba-fg);transition:background-color .2s,color .2s}
.aba-page.is-light{--aba-fg:#0f1115;--aba-muted:#50575e;--aba-line:#dcdcde;background:#fff}
.aba-page a{color:inherit}

.aba{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - 40px);overflow:hidden;background:#000}
.aba iframe{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;border:0;pointer-events:none}
.aba-down{position:absolute;left:50%;bottom:clamp(12px,3%,32px);width:clamp(44px,4vw,64px);height:clamp(44px,4vw,64px);margin:0;padding:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;border:2px solid #ffb020;border-radius:50%;background:#0f1115;color:#ffb020;cursor:pointer}
.aba-down:hover,.aba-down:focus-visible{background:#ffb020;color:#0f1115}
.aba-down:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.aba-down svg{width:50%;height:50%}

/* Switch: fixed, so it sits in the scene on the first screen and stays at the side on scroll. */
.aba-switch{position:fixed;right:3vw;top:50%;z-index:20;width:var(--aba-sw);aspect-ratio:23/36;margin:0;padding:0;border:0;background:none;cursor:pointer;perspective:900px;transform:translateY(-50%)}
.aba-switch:focus-visible{outline:3px solid #ffb020;outline-offset:6px;border-radius:14%}
.aba-plate{position:absolute;inset:0;border-radius:14%/9%;background:linear-gradient(160deg,#f4f4f1,#d9d9d4);box-shadow:-6px 6px 0 #8d8d88;transform:rotateY(-30deg) rotateX(14deg);transform-style:preserve-3d}
.aba-led{position:absolute;left:50%;top:6%;width:7%;aspect-ratio:1;margin-left:-3.5%;border-radius:50%;background:#e5484d;box-shadow:0 0 12px #e5484d}
.aba-rock{position:absolute;left:24%;right:24%;top:17%;bottom:17%;display:flex;flex-direction:column;border-radius:7%;background:linear-gradient(#fff,#e2e2dd);box-shadow:0 6px 14px rgba(0,0,0,.35);font:800 clamp(14px,2vw,36px) ui-monospace,SFMono-Regular,Menlo,monospace;color:#9a9a94;transform:rotateX(-16deg);transition:transform .12s}
.aba-rock span{flex:1;display:flex;align-items:center;justify-content:center}
.aba-rock span:last-child{color:#e5484d}
.aba-switch[aria-checked="true"] .aba-led{background:#2bb673;box-shadow:0 0 12px #2bb673}
.aba-switch[aria-checked="true"] .aba-rock{background:linear-gradient(#e2e2dd,#fff);transform:rotateX(16deg)}
.aba-switch[aria-checked="true"] .aba-rock span:first-child{color:#2bb673}
.aba-switch[aria-checked="true"] .aba-rock span:last-child{color:#9a9a94}

/* Right gutter keeps the stuck switch off the sidebar. */
.aba-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);max-width:1440px;margin:0 auto;padding:clamp(32px,5vw,72px) calc(var(--aba-sw) + 6vw) clamp(48px,6vw,96px) clamp(16px,4vw,64px)}
.aba-main h1{margin:0 0 24px}
.aba-main>h2{margin:40px 0 20px}
.aba-series .wp-block-post-template{margin:0;padding:0;list-style:none}
.aba-side{position:sticky;top:72px;align-self:start;display:flex;flex-direction:column;gap:24px}
.aba-yt{display:block;padding:18px 20px;border-radius:12px;background:#e5484d;color:#fff!important;font-weight:700;font-size:1.125rem;line-height:1.3;text-align:center;text-decoration:none}
.aba-yt:hover,.aba-yt:focus-visible{background:#c93a3f}
.aba-toc{display:flex;flex-direction:column;border-left:2px solid var(--aba-line)}
.aba-toc a{padding:6px 0 6px 16px;color:var(--aba-muted);text-decoration:none}
.aba-toc a:hover,.aba-toc a:focus-visible{color:var(--aba-fg)}
.aba-toc .is-top{font-weight:700;color:var(--aba-fg)}

@media (max-width:782px){
	.aba-layout{grid-template-columns:minmax(0,1fr);padding:32px 16px 96px}
	.aba-side{position:static;order:-1}
	.aba-switch{top:auto;bottom:16px;right:12px;transform:none}
}
.aba-main :is(h1,h2,h3,p,li){color:inherit}
.aba-main code{padding:1px 5px;border-radius:4px;background:var(--aba-line);color:inherit}