@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-900.woff2") format("woff2"); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-latin-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; scroll-padding-bottom: var(--player-clearance); background: var(--color-bg); }
html, body * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html.is-scrolling, body *:hover, body *:focus-within, body *.is-scrolling { scrollbar-color: var(--scroll-thumb) transparent; }
html::-webkit-scrollbar, body *::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { min-width: 48px; min-height: 48px; border: 2px solid transparent; border-radius: 999px; background: transparent; background-clip: padding-box; transition: background-color var(--motion-fast) ease-out; }
html.is-scrolling::-webkit-scrollbar-thumb, body *:hover::-webkit-scrollbar-thumb, body *:focus-within::-webkit-scrollbar-thumb, body *.is-scrolling::-webkit-scrollbar-thumb { background: var(--scroll-thumb); background-clip: padding-box; }
html::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
html:not(.has-page-scrollbar) { scrollbar-color: var(--scroll-thumb) transparent; }
html:not(.has-page-scrollbar)::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); }
html.has-page-scrollbar { scrollbar-width: none; scrollbar-gutter: auto; }
html.has-page-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.page-scrollbar { position: fixed; inset: 0 0 0 auto; z-index: 1001; width: 24px; background: transparent; opacity: 0; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity var(--motion-fast) ease-out; }
html.is-scrolling .page-scrollbar, .page-scrollbar:hover, .page-scrollbar:focus-visible, .page-scrollbar.is-dragging { opacity: 1; pointer-events: auto; }
.page-scrollbar__thumb { position: absolute; top: 0; right: 2px; width: 6px; border-radius: 999px; background: var(--scroll-thumb); pointer-events: none; }
.page-scrollbar:hover .page-scrollbar__thumb, .page-scrollbar:focus-visible .page-scrollbar__thumb, .page-scrollbar.is-dragging .page-scrollbar__thumb { background: var(--scroll-thumb-hover); }
.page-scrollbar:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: 0; }
.page-scrollbar.is-dragging { cursor: grabbing; }
@media (forced-colors: active) {
  .page-scrollbar { forced-color-adjust: none; }
  .page-scrollbar__thumb { background: ButtonText; }
  .page-scrollbar:hover .page-scrollbar__thumb, .page-scrollbar:focus-visible .page-scrollbar__thumb, .page-scrollbar.is-dragging .page-scrollbar__thumb { background: Highlight; }
  .page-scrollbar:focus-visible { outline-color: Highlight; }
}
@media print { .page-scrollbar { display: none !important; } }
body { margin: 0; min-width: 320px; padding-bottom: var(--player-clearance); background: var(--color-bg); color: var(--color-text-primary); font: var(--weight-regular) var(--text-sm)/1.6 var(--font-body); overflow-wrap: anywhere; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-accent); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.15em; }
button, input { font: inherit; }
button, input[type="range"] { touch-action: manipulation; }
button { min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-2) var(--space-4); background: var(--color-surface-3); color: var(--color-text-primary); cursor: pointer; }
button:not(:disabled), .button { transition: background-color var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out, color var(--motion-fast) ease-out, box-shadow var(--motion-fast) ease-out; }
button:not(:disabled):hover, .button:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
button:not(:disabled):active, .button:active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 0 0 2px var(--color-accent-ink); }
button:not(:disabled):focus-visible, .button:focus-visible { border-color: var(--color-focus); }
button:disabled { cursor: not-allowed; opacity: 0.5; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-small); scroll-margin-block: var(--space-5) var(--player-clearance); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; }
h1 { max-width: 19ch; margin-bottom: var(--space-5); font-size: var(--text-2xl); font-weight: var(--weight-black); }
h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); }
p, li, dd { max-width: 72ch; }
main { min-height: 55vh; }