@font-face { font-family: Manrope; src: url('./fonts/manrope.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
:root { color-scheme: light; font-family: Manrope, system-ui, sans-serif; background: #f8f8f2; color: #252a24; }
:root[data-theme="dark"] { color-scheme: dark; background: #151b17; color: #f0f0e8; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button, input { font: inherit; }
#app { display: none; }
html:not(.ready) #content button, html:not(.ready) #content input { display: none; }
#content { max-width: 960px; padding: 32px; margin: auto; }
#content h1 { font-size: clamp(28px, 5vw, 56px); }
#content nav { display: flex; flex-wrap: wrap; gap: 24px; margin: 32px 0; }
#content section { margin: 60px 0; }
#content button { padding: 12px; margin: 4px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.8; }
.ready #app { display: block; position: fixed; inset: 0; width: 100%; height: 100%; outline: none; }
.ready #content { max-width: none; padding: 0; margin: 0; pointer-events: none; }
.ready #content > * { margin: 0; }
.ready #content h1, .ready #content h2, .ready #content p, .ready #content pre {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.ready #content [data-control] {
  position: absolute; display: block; padding: 0; margin: 0; border: 0; background: transparent;
  color: transparent; -webkit-text-fill-color: transparent; text-decoration: none; border-radius: 10px;
  pointer-events: auto; cursor: pointer; z-index: 2; font-size: 0;
}
.ready #content [data-control]:hover { background: #88888812; }
.ready #content [data-control]:focus-visible { outline: 3px solid #e65e38; outline-offset: 4px; }
.ready #content [data-control][hidden] { display: none; }
.ready #content input[type="range"] { appearance: none; -webkit-appearance: none; touch-action: pan-y; }
.ready input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 36px; border: 0; background: transparent; }
.ready input[type="range"]::-moz-range-thumb { width: 18px; height: 36px; border: 0; background: transparent; }
.ready input[type="range"]::-moz-range-track { background: transparent; }
#loading { position: fixed; right: 20px; bottom: 20px; padding: 12px 18px; border-radius: 12px; background: #252a24; color: #fff; font-size: 13px; z-index: 3; }
#notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 14px 22px; border-radius: 12px; background: #e65e38; color: #fff; font-size: 14px; max-width: calc(100% - 32px); z-index: 5; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { #app, #loading, #notice, button, input { display: none !important; } .ready #content { padding: 24px; } .ready #content h1, .ready #content h2, .ready #content p, .ready #content pre, .ready #content a[data-control] { position: static; width: auto !important; height: auto !important; clip-path: none; color: #000; -webkit-text-fill-color: #000; white-space: normal; font-size: 14px; } }