/* Shared player chrome on every page, independent of page-specific styles. */
/* READ ME: every doc, in each page header. */
.docs-nav { display:inline-flex; }
.docs-toggle:not(.menubar-link) { padding:6px 8px; border:0; background:transparent; color:inherit; font:inherit; font-weight:900; letter-spacing:inherit; cursor:pointer; }
.docs-toggle:not(.menubar-link):hover, .docs-toggle[aria-expanded=true] { text-decoration:underline; text-underline-offset:4px; }
.docs-menu { position:fixed; inset:auto; margin:0; min-width:240px; max-width:calc(100vw - 16px); padding:6px; border:2px solid #d9ff2f; background:#08090b; box-shadow:5px 5px #ff2ebd; }
.docs-menu:popover-open { display:grid; gap:2px; }
.docs-menu::backdrop { background:transparent; }
.docs-menu a { display:block; padding:11px 12px; color:#f4f1dc; font:900 12px/1.3 'Courier New',monospace; letter-spacing:.06em; text-decoration:none; }
.docs-menu a:hover, .docs-menu a:focus-visible, .docs-menu a[aria-current=page] { background:#d9ff2f; color:#08090b; outline:0; }

/* Music: one button in each page header opens the player as a dropdown under the header. */
.deck-launcher { display:inline-flex; align-items:center; gap:7px; height:34px; padding:3px 9px 3px 3px; border:1px solid #d9ff2f; background:#08090b; color:#d9ff2f; font:900 10px/1 'Courier New',monospace; cursor:pointer; white-space:nowrap; }
.deck-launcher img { width:26px; height:26px; object-fit:cover; background:#1a1c1f; }
.deck-launcher b { min-width:78px; padding-right:.15em; font:italic 900 15px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif; letter-spacing:.02em; }
.deck-launcher[aria-expanded=true], .deck-launcher:hover { background:#d9ff2f; color:#08090b; }
.deck-launcher:focus-visible { outline:3px solid #ff2ebd; outline-offset:3px; }
.deck-caret { font-size:11px; }
.deck-eq { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.deck-eq i { width:3px; height:4px; background:#ff2ebd; }
.sound-playing .deck-eq i { animation:deck-eq .8s ease-in-out infinite alternate; }
.sound-playing .deck-eq i:nth-child(2) { animation-delay:-.3s; }
.sound-playing .deck-eq i:nth-child(3) { animation-delay:-.55s; }
@keyframes deck-eq { from { height:3px; } to { height:14px; } }
@media(prefers-reduced-motion:reduce) { .sound-playing .deck-eq i { animation:none; height:10px; } }

#rave-player { box-sizing:border-box; position:fixed; inset:auto; margin:0; width:340px; max-width:calc(100vw - 16px); max-height:calc(100svh - 90px); overflow:auto; padding:12px; border:2px outset #efefeb; background:#c5c5be; color:#08090b; box-shadow:5px 5px #08090b; font:900 9px/1.3 'Courier New',monospace; }
#rave-player::backdrop { background:transparent; }
#rave-player .deck-now, #rave-player .deck-tracks { display:flex; flex-direction:column; gap:10px; }
/* The cover is the centerpiece; it shrinks on short screens so the controls stay in view. */
#rave-player .deck-cover { display:block; width:min(100%, 42svh); aspect-ratio:1; height:auto; margin:0 auto; object-fit:cover; border:2px inset #efefeb; background:#08090b; }
#rave-player .deck-meta { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; min-width:0; }
/* Italic glyphs lean past the text box, so no clipping and a little room on the right. */
#rave-player .deck-title { padding:2px .18em 2px .05em; font:italic 900 28px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif; white-space:nowrap; }
#rave-player .deck-artist { font-size:9px; letter-spacing:.08em; color:#3b3d38; }
#rave-player .deck-close { position:absolute; top:18px; right:18px; z-index:1; width:30px; height:30px; box-shadow:2px 2px #08090b; }
#rave-player .deck-tracks-head { display:flex; align-items:center; gap:12px; min-height:36px; padding-right:52px; font-size:11px; letter-spacing:.08em; }
#rave-player .deck-view { flex:none; }
#rave-player .deck-seek { display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
#rave-player .deck-seek input { flex:1; min-width:0; margin:0; accent-color:#ff2ebd; }
#rave-player .deck-transport { display:flex; justify-content:center; align-items:center; gap:12px; }
#rave-player .deck-icon, #rave-player .deck-play { display:inline-grid; place-items:center; padding:0; border:2px outset #efefeb; background:#c5c5be; color:#08090b; cursor:pointer; }
#rave-player .deck-icon { width:36px; height:32px; }
#rave-player .deck-play { width:50px; height:40px; background:#d9ff2f; }
#rave-player .deck-icon:active, #rave-player .deck-play:active { border-style:inset; }
#rave-player svg { width:18px; height:18px; fill:currentColor; }
#rave-player .deck-play .i-pause, #rave-player .deck-play[aria-pressed=true] .i-play { display:none; }
#rave-player .deck-play[aria-pressed=true] .i-pause { display:block; }
#rave-player .volume-control { display:flex; align-items:center; gap:8px; }
#rave-player .volume-control input { flex:1; accent-color:#ff2ebd; }
#rave-player .deck-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
#rave-player .deck-list button { display:flex; gap:12px; width:100%; padding:11px 10px; border:1px solid transparent; background:transparent; color:#08090b; font:900 13px/1.3 'Courier New',monospace; letter-spacing:.06em; text-align:left; cursor:pointer; }
#rave-player .deck-list button span { color:#55574f; }
#rave-player .deck-list button:hover { border-color:#08090b; }
#rave-player .deck-list button[aria-current=true] { background:#08090b; color:#d9ff2f; }
#rave-player .deck-side { display:flex; gap:6px; }
#rave-player .deck-button { flex:1; min-height:30px; padding:6px 8px; border:1px solid #74766c; background:#141619; color:#f4f1dc; font:900 9px/1.3 'Courier New',monospace; cursor:pointer; }
#rave-player .deck-button[aria-pressed=true] { background:#d9ff2f; color:#08090b; }
#rave-player [hidden] { display:none !important; }
#rave-player button:focus-visible, #rave-player input:focus-visible { outline:3px solid #ff2ebd; outline-offset:3px; }
.audio-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#sound-toast { position:fixed; right:20px; bottom:20px; z-index:51; max-width:calc(100vw - 40px); box-sizing:border-box; padding:10px 13px; border:2px solid #d9ff2f; background:#08090b; color:#d9ff2f; font:900 11px/1.5 'Courier New',monospace; pointer-events:none; }
#sound-toast:empty { padding:0; border:0; }
.document-text { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.8 'Courier New',monospace; border:1px solid #606653; padding:24px; background:#101315; color:#f4f1dc; }
/* Doc-page headers on phones: one tidy row. The Markdown download stays on desktop. */
@media(max-width:760px) {
  header:not(.buy-header) > a[download] { display:none; }
  header:not(.buy-header) > a, header:not(.buy-header) .docs-toggle { white-space:nowrap; }
  header:not(.buy-header) { align-items:center; }
}
@media(max-width:640px) {
  #rave-player .volume-control { display:none; }
  #sound-toast { bottom:20px; }
  .document-text { padding:14px; font-size:12px; }
}
/* Obnoxious on purpose: the page scrollbar is three solid bands of acid, pink and cyan that swap places.
   Chromium and Safari use the gradient thumb; Firefox only takes a solid color. */
@property --sb-a { syntax:'<color>'; inherits:true; initial-value:#d9ff2f; }
@property --sb-b { syntax:'<color>'; inherits:true; initial-value:#ff2ebd; }
@property --sb-c { syntax:'<color>'; inherits:true; initial-value:#25ebff; }
@keyframes sb-pulse {
  0%, 100% { --sb-a:#d9ff2f; --sb-b:#ff2ebd; --sb-c:#25ebff; }
  33% { --sb-a:#ff2ebd; --sb-b:#25ebff; --sb-c:#d9ff2f; }
  66% { --sb-a:#25ebff; --sb-b:#d9ff2f; --sb-c:#ff2ebd; }
}
html { animation:sb-pulse 1.2s step-end infinite; } /* hard swaps, no blending: three restyles per cycle */
::-webkit-scrollbar { width:14px; height:14px; background:#08090b; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--sb-a) 0 33.34%,var(--sb-b) 33.34% 66.67%,var(--sb-c) 66.67%); border:3px solid #08090b; border-radius:0; }
::-webkit-scrollbar-corner { background:#08090b; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color:var(--sb-b) #08090b; } }
@media (prefers-reduced-motion:reduce) { html { animation:none; } }
html:has(body.strobe-off) { animation:none; }