@font-face {
  font-family: Nadia;
  src: url("nadia_serif.ttf") format("truetype");
  font-display: swap;
}
* { box-sizing: border-box; }
html { min-height: 100%; width: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: #fff;
  color: #000;
  font-family: Nadia, serif;
  font-size: 11pt;
  line-height: 1.35;
}
main { width: 300px; max-width: calc(100% - 24px); margin: 24px auto; text-align: left; }
footer { margin-top: auto; padding: 12px; color: #bcbcbc; }
html.dark footer { color: #444444; }
.feria { display: block; width: 100%; height: auto; image-rendering: crisp-edges; image-rendering: pixelated; filter: url("#black-white"); }
.links { margin-top: 14px; }
a, a:visited { color: #0000ff; text-decoration: none; }
a:hover, a:active, a:focus-visible, a[aria-expanded="true"] { text-decoration: underline; }
.links > a, .submenu > a { display: block; width: fit-content; margin: 0; }
.submenu { margin: 4px 0 8px; }
[hidden] { display: none !important; }
.player { display: flex; justify-content: flex-start; align-items: center; gap: 6px; min-height: 24px; }
.player a { white-space: nowrap; }
canvas { flex: 1; min-width: 0; width: 0; height: 24px; image-rendering: crisp-edges; image-rendering: pixelated; }
html.dark body { background: #000; color: #fff; }
html.dark a, html.dark a:visited { color: #00ffff; }
#theme-toggle { position: fixed; top: 10px; right: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 18pt; line-height: 1; }
#theme-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
p { margin: 12px 0; }
#text { text-align: left; }
#text-close { display: block; text-align: left; }
.image-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
#cursor-viewport { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 9999; }
#custom-cursor { position: absolute; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; image-rendering: crisp-edges; image-rendering: pixelated; }
#cursor-sparks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; image-rendering: crisp-edges; image-rendering: pixelated; }
html.custom-cursor-active,
html.custom-cursor-active body,
html.custom-cursor-active *,
html.custom-cursor-active *::before,
html.custom-cursor-active *::after { cursor: url("transparent-cursor.png") 0 0, none !important; }