/* ============================================================
   Mathub — the Realm look (the default skin)
   A fantasy tabletop look on top of the normal layout: parchment and
   ink by day, a starlit dungeon by night, Cinzel for headings (body text
   stays Helvetica Neue), gold ornaments on panels, gem buttons, a map on
   the start page and runes in the background. Everything is scoped to
   :root[data-skin="realm"]; Settings -> Look -> Classic removes it.
   The D&D features (d20 quest roller, character sheet, class archetypes)
   live in assets/realm.js; their styles at the end of this file work in
   every look. Generated by scripts/build-realm-css.js: edit that file.
   Fonts: Cinzel and Noto Sans Runic (SIL OFL), see assets/fonts/README.txt.
   ============================================================ */
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Mathub Runes"; src: url("fonts/runes.woff2") format("woff2"); unicode-range: U+16A0-16F8; font-display: swap; }

/* ---------- tokens: parchment by day, dungeon by night ---------- */
:root[data-skin="realm"] { --font-display: "Cinzel", "Trajan Pro", Georgia, serif; --font-rune: "Mathub Runes", "Segoe UI Historic", "Noto Sans Runic", serif;
  --img-fiber: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.42%200%200%200%200%200.29%200%200%200%200%200.12%200%200%200%200.085%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"); --img-stains: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27900%27%20height%3D%27900%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.006%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.55%200%200%200%200%200.38%200%200%200%200%200.14%200%200%200%200.9%20-0.36%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url(%23s)%27%2F%3E%3C%2Fsvg%3E"); --img-stars: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27480%27%20height%3D%27480%27%3E%3Ccircle%20cx%3D%27214.2%27%20cy%3D%27342.5%27%20r%3D%270.55%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.39%27%2F%3E%3Ccircle%20cx%3D%27330.3%27%20cy%3D%27140.5%27%20r%3D%270.74%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.29%27%2F%3E%3Ccircle%20cx%3D%27196.1%27%20cy%3D%27287.5%27%20r%3D%270.65%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.26%27%2F%3E%3Ccircle%20cx%3D%27210.2%27%20cy%3D%27162.2%27%20r%3D%270.41%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.80%27%2F%3E%3Ccircle%20cx%3D%27276.8%27%20cy%3D%27388.1%27%20r%3D%270.41%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.50%27%2F%3E%3Ccircle%20cx%3D%27299.9%27%20cy%3D%27201.5%27%20r%3D%270.73%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.41%27%2F%3E%3Ccircle%20cx%3D%2733.1%27%20cy%3D%27161.5%27%20r%3D%270.45%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.80%27%2F%3E%3Ccircle%20cx%3D%27465.6%27%20cy%3D%27174.8%27%20r%3D%271.20%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.74%27%2F%3E%3Ccircle%20cx%3D%27398.0%27%20cy%3D%27123.0%27%20r%3D%270.48%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.67%27%2F%3E%3Ccircle%20cx%3D%27175.9%27%20cy%3D%27274.3%27%20r%3D%270.64%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.38%27%2F%3E%3Ccircle%20cx%3D%27414.6%27%20cy%3D%2759.9%27%20r%3D%270.75%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.61%27%2F%3E%3Ccircle%20cx%3D%27342.2%27%20cy%3D%27398.9%27%20r%3D%271.09%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.49%27%2F%3E%3Ccircle%20cx%3D%27269.0%27%20cy%3D%27228.4%27%20r%3D%270.87%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.62%27%2F%3E%3Ccircle%20cx%3D%27264.7%27%20cy%3D%27322.0%27%20r%3D%270.56%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.31%27%2F%3E%3Ccircle%20cx%3D%27261.0%27%20cy%3D%27151.2%27%20r%3D%271.18%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.29%27%2F%3E%3Ccircle%20cx%3D%27241.0%27%20cy%3D%27158.5%27%20r%3D%270.42%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.37%27%2F%3E%3Ccircle%20cx%3D%27291.0%27%20cy%3D%271.8%27%20r%3D%270.36%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.45%27%2F%3E%3Ccircle%20cx%3D%27229.2%27%20cy%3D%27411.3%27%20r%3D%270.62%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27293.6%27%20cy%3D%2777.1%27%20r%3D%270.81%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.65%27%2F%3E%3Ccircle%20cx%3D%27260.7%27%20cy%3D%27340.4%27%20r%3D%270.43%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.73%27%2F%3E%3Ccircle%20cx%3D%27353.7%27%20cy%3D%27364.7%27%20r%3D%270.36%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.67%27%2F%3E%3Ccircle%20cx%3D%27288.1%27%20cy%3D%27447.8%27%20r%3D%270.54%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.63%27%2F%3E%3Ccircle%20cx%3D%27141.5%27%20cy%3D%27260.7%27%20r%3D%270.47%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.80%27%2F%3E%3Ccircle%20cx%3D%27436.3%27%20cy%3D%27119.7%27%20r%3D%270.50%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.67%27%2F%3E%3Ccircle%20cx%3D%27236.7%27%20cy%3D%27361.9%27%20r%3D%271.20%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.34%27%2F%3E%3Ccircle%20cx%3D%27172.6%27%20cy%3D%27283.7%27%20r%3D%270.44%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.77%27%2F%3E%3Ccircle%20cx%3D%2758.6%27%20cy%3D%2739.6%27%20r%3D%270.76%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.81%27%2F%3E%3Ccircle%20cx%3D%27209.1%27%20cy%3D%27257.6%27%20r%3D%271.15%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.31%27%2F%3E%3Ccircle%20cx%3D%2780.1%27%20cy%3D%2787.5%27%20r%3D%270.84%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.50%27%2F%3E%3Ccircle%20cx%3D%27259.6%27%20cy%3D%2727.4%27%20r%3D%270.61%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.67%27%2F%3E%3Ccircle%20cx%3D%27479.9%27%20cy%3D%27100.3%27%20r%3D%270.42%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.65%27%2F%3E%3Ccircle%20cx%3D%27406.2%27%20cy%3D%27379.6%27%20r%3D%270.40%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.34%27%2F%3E%3Ccircle%20cx%3D%27452.9%27%20cy%3D%2757.3%27%20r%3D%270.63%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.48%27%2F%3E%3Ccircle%20cx%3D%27296.9%27%20cy%3D%2721.8%27%20r%3D%271.14%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.34%27%2F%3E%3Ccircle%20cx%3D%27444.1%27%20cy%3D%2712.3%27%20r%3D%271.26%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.54%27%2F%3E%3Ccircle%20cx%3D%2787.0%27%20cy%3D%27320.1%27%20r%3D%270.95%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.52%27%2F%3E%3Ccircle%20cx%3D%27226.0%27%20cy%3D%27123.3%27%20r%3D%271.03%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.58%27%2F%3E%3Ccircle%20cx%3D%27379.8%27%20cy%3D%2777.8%27%20r%3D%270.52%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.79%27%2F%3E%3Ccircle%20cx%3D%27348.8%27%20cy%3D%2718.5%27%20r%3D%271.13%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.48%27%2F%3E%3Ccircle%20cx%3D%27412.9%27%20cy%3D%27382.6%27%20r%3D%270.91%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.33%27%2F%3E%3Ccircle%20cx%3D%27177.6%27%20cy%3D%27189.7%27%20r%3D%270.57%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.81%27%2F%3E%3Ccircle%20cx%3D%27314.3%27%20cy%3D%2772.6%27%20r%3D%270.64%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.49%27%2F%3E%3Ccircle%20cx%3D%27227.7%27%20cy%3D%2739.9%27%20r%3D%270.62%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.36%27%2F%3E%3Ccircle%20cx%3D%27460.2%27%20cy%3D%27282.0%27%20r%3D%270.57%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.54%27%2F%3E%3Ccircle%20cx%3D%27218.6%27%20cy%3D%27306.1%27%20r%3D%270.57%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.44%27%2F%3E%3Ccircle%20cx%3D%27347.4%27%20cy%3D%27297.9%27%20r%3D%270.41%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.50%27%2F%3E%3Ccircle%20cx%3D%27216.2%27%20cy%3D%2712.0%27%20r%3D%271.23%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.52%27%2F%3E%3Ccircle%20cx%3D%27250.8%27%20cy%3D%2716.7%27%20r%3D%270.49%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.28%27%2F%3E%3Ccircle%20cx%3D%27325.0%27%20cy%3D%27236.1%27%20r%3D%270.83%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.39%27%2F%3E%3Ccircle%20cx%3D%27119.5%27%20cy%3D%2767.9%27%20r%3D%271.42%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.41%27%2F%3E%3Ccircle%20cx%3D%27392.7%27%20cy%3D%2730.9%27%20r%3D%270.58%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.75%27%2F%3E%3Ccircle%20cx%3D%270.5%27%20cy%3D%27278.1%27%20r%3D%270.37%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.60%27%2F%3E%3Ccircle%20cx%3D%2725.6%27%20cy%3D%27159.9%27%20r%3D%271.27%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.31%27%2F%3E%3Ccircle%20cx%3D%2716.8%27%20cy%3D%27412.2%27%20r%3D%270.51%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27184.1%27%20cy%3D%27345.1%27%20r%3D%270.74%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.31%27%2F%3E%3Ccircle%20cx%3D%2761.3%27%20cy%3D%27124.7%27%20r%3D%270.50%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.66%27%2F%3E%3Ccircle%20cx%3D%2751.4%27%20cy%3D%27445.7%27%20r%3D%270.41%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.46%27%2F%3E%3Ccircle%20cx%3D%27102.9%27%20cy%3D%273.2%27%20r%3D%270.40%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.56%27%2F%3E%3Ccircle%20cx%3D%2742.1%27%20cy%3D%27392.8%27%20r%3D%270.40%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27395.0%27%20cy%3D%27329.4%27%20r%3D%271.30%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.48%27%2F%3E%3Ccircle%20cx%3D%27275.8%27%20cy%3D%27470.9%27%20r%3D%270.38%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.54%27%2F%3E%3Ccircle%20cx%3D%2784.8%27%20cy%3D%27464.0%27%20r%3D%270.47%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.74%27%2F%3E%3Ccircle%20cx%3D%2757.4%27%20cy%3D%2739.5%27%20r%3D%270.41%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.48%27%2F%3E%3Ccircle%20cx%3D%27457.1%27%20cy%3D%27285.2%27%20r%3D%270.36%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.49%27%2F%3E%3Ccircle%20cx%3D%27191.1%27%20cy%3D%27427.2%27%20r%3D%270.51%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.51%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%27365.5%27%20r%3D%270.80%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.76%27%2F%3E%3Ccircle%20cx%3D%27381.7%27%20cy%3D%2756.3%27%20r%3D%270.35%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.27%27%2F%3E%3Ccircle%20cx%3D%276.0%27%20cy%3D%27479.7%27%20r%3D%270.45%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.83%27%2F%3E%3Ccircle%20cx%3D%27130.4%27%20cy%3D%2789.6%27%20r%3D%270.48%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.61%27%2F%3E%3Ccircle%20cx%3D%27407.9%27%20cy%3D%2758.9%27%20r%3D%270.92%27%20fill%3D%27%23F2EAD8%27%20opacity%3D%270.84%27%2F%3E%3C%2Fsvg%3E"); --img-compass: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238A5F12%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%271.2%27%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2794%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2786%27%20stroke-dasharray%3D%272%205%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2760%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2714%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%238A5F12%27%3E%3Cpath%20d%3D%27M100%204%20110%20100%20100%20196%2090%20100Z%27%20fill-opacity%3D%27.16%27%2F%3E%3Cpath%20d%3D%27M4%20100%20100%2090%20196%20100%20100%20110Z%27%20fill-opacity%3D%27.16%27%2F%3E%3Cpath%20d%3D%27M32%2032%20104%2096%20168%20168%2096%20104Z%27%20fill-opacity%3D%27.08%27%2F%3E%3Cpath%20d%3D%27M168%2032%20104%20104%2032%20168%2096%2096Z%27%20fill-opacity%3D%27.08%27%2F%3E%3Cpath%20d%3D%27M100%204%20110%20100H90Z%27%20fill-opacity%3D%27.14%27%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%27100%27%20y%3D%2726%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%2713%27%20fill%3D%27%238A5F12%27%20fill-opacity%3D%27.4%27%3EN%3C%2Ftext%3E%3C%2Fsvg%3E"); --img-map: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27260%27%20viewBox%3D%270%200%20520%20260%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238A5F12%27%20stroke-opacity%3D%27.16%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M10%20200c40-30%2070-10%20110-40s60-70%20110-60%2070%2050%20120%2040%2080-60%20150-50%27%2F%3E%3Cpath%20d%3D%27M40%20240c50-20%2090%200%20140-20s70-40%20120-30%27%2F%3E%3Cpath%20d%3D%27M300%2060l12-20%2012%2020M330%2070l10-16%2010%2016M280%2072l9-14%209%2014%27%2F%3E%3Cpath%20d%3D%27M120%2090c10%200%2014%208%2024%208s14-8%2024-8%27%20stroke-dasharray%3D%273%206%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M70%20150l4%204-4%204-4-4z%20M430%20110l4%204-4%204-4-4z%27%20fill%3D%27%239E1B2E%27%20fill-opacity%3D%27.35%27%2F%3E%3C%2Fsvg%3E");
  --img-orn-l-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20transform%3D%27matrix(1%200%200%201%200%200)%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23B8862F%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M1.5%2018V8A6.5%206.5%200%200%201%208%201.5h10%27%2F%3E%3Cpath%20d%3D%27M5.5%2014.5a9%209%200%200%201%209-9%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M5%201.8%207.2%204%205%206.2%202.8%204Z%27%20transform%3D%27translate(0.3%200.3)%27%20fill%3D%27%23B8862F%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --img-orn-l-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20transform%3D%27matrix(-1%200%200%201%2024%200)%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23B8862F%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M1.5%2018V8A6.5%206.5%200%200%201%208%201.5h10%27%2F%3E%3Cpath%20d%3D%27M5.5%2014.5a9%209%200%200%201%209-9%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M5%201.8%207.2%204%205%206.2%202.8%204Z%27%20transform%3D%27translate(0.3%200.3)%27%20fill%3D%27%23B8862F%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --img-orn-l-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20transform%3D%27matrix(1%200%200%20-1%200%2024)%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23B8862F%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M1.5%2018V8A6.5%206.5%200%200%201%208%201.5h10%27%2F%3E%3Cpath%20d%3D%27M5.5%2014.5a9%209%200%200%201%209-9%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M5%201.8%207.2%204%205%206.2%202.8%204Z%27%20transform%3D%27translate(0.3%200.3)%27%20fill%3D%27%23B8862F%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --img-orn-l-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20transform%3D%27matrix(-1%200%200%20-1%2024%2024)%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23B8862F%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M1.5%2018V8A6.5%206.5%200%200%201%208%201.5h10%27%2F%3E%3Cpath%20d%3D%27M5.5%2014.5a9%209%200%200%201%209-9%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M5%201.8%207.2%204%205%206.2%202.8%204Z%27%20transform%3D%27translate(0.3%200.3)%27%20fill%3D%27%23B8862F%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --img-orn-d-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20transform%3D%27matrix(1%200%200%201%200%200)%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C99A45%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M1.5%2018V8A6.5%206.5%200%200%201%208%201.5h10%27%2F%3E%3Cpath%20d%3D%27M5.5%2014.5a9%209%200%200%201%209-9%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M5%201.8%207.2%204%205%206.2%202.8%204Z%27%20transform%3D%27translate(0.3%200.3)%27%20fill%3D%27%23C99A45%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --img-orn-d-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20transform%3D%27matrix(-1%200%200%201%2024%200)%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C99A45%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M1.5%2018V8A6.5%206.5%200%200%201%208%201.5h10%27%2F%3E%3Cpath%20d%3D%27M5.5%2014.5a9%209%200%200%201%209-9%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M5%201.8%207.2%204%205%206.2%202.8%204Z%27%20transform%3D%27translate(0.3%200.3)%27%20fill%3D%27%23C99A45%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --img-orn-d-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20transform%3D%27matrix(1%200%200%20-1%200%2024)%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C99A45%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M1.5%2018V8A6.5%206.5%200%200%201%208%201.5h10%27%2F%3E%3Cpath%20d%3D%27M5.5%2014.5a9%209%200%200%201%209-9%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M5%201.8%207.2%204%205%206.2%202.8%204Z%27%20transform%3D%27translate(0.3%200.3)%27%20fill%3D%27%23C99A45%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --img-orn-d-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20transform%3D%27matrix(-1%200%200%20-1%2024%2024)%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C99A45%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M1.5%2018V8A6.5%206.5%200%200%201%208%201.5h10%27%2F%3E%3Cpath%20d%3D%27M5.5%2014.5a9%209%200%200%201%209-9%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M5%201.8%207.2%204%205%206.2%202.8%204Z%27%20transform%3D%27translate(0.3%200.3)%27%20fill%3D%27%23C99A45%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --img-div-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20160%2016%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23B8862F%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%208h50M108%208h50%27%2F%3E%3Cpath%20d%3D%27M58%208c4-5.5%209.5-5.5%2013.5%200M88.5%208c4%205.5%209.5%205.5%2013.5%200%27%2F%3E%3Cpath%20d%3D%27M58%208c4%205.5%209.5%205.5%2013.5%200M88.5%208c4-5.5%209.5-5.5%2013.5%200%27%20opacity%3D%27.55%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M80%201.5%2086.5%208%2080%2014.5%2073.5%208Z%27%20fill%3D%27%23B8862F%27%2F%3E%3Ccircle%20cx%3D%2754.5%27%20cy%3D%278%27%20r%3D%271.7%27%20fill%3D%27%23B8862F%27%2F%3E%3Ccircle%20cx%3D%27105.5%27%20cy%3D%278%27%20r%3D%271.7%27%20fill%3D%27%23B8862F%27%2F%3E%3C%2Fsvg%3E"); --img-div-d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20160%2016%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C99A45%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%208h50M108%208h50%27%2F%3E%3Cpath%20d%3D%27M58%208c4-5.5%209.5-5.5%2013.5%200M88.5%208c4%205.5%209.5%205.5%2013.5%200%27%2F%3E%3Cpath%20d%3D%27M58%208c4%205.5%209.5%205.5%2013.5%200M88.5%208c4-5.5%209.5-5.5%2013.5%200%27%20opacity%3D%27.55%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M80%201.5%2086.5%208%2080%2014.5%2073.5%208Z%27%20fill%3D%27%23C99A45%27%2F%3E%3Ccircle%20cx%3D%2754.5%27%20cy%3D%278%27%20r%3D%271.7%27%20fill%3D%27%23C99A45%27%2F%3E%3Ccircle%20cx%3D%27105.5%27%20cy%3D%278%27%20r%3D%271.7%27%20fill%3D%27%23C99A45%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-skin="realm"]:not([data-theme="dark"]) {
  --bg: #EDE1C6; --grid: transparent;
  --surface: #FBF4E2; --surface-2: #F4E9CF; --surface-3: #EADBB9;
  --border: #D8C398; --border-strong: #B99A62;
  --ink: #2A1C0F; --ink-2: #4A3722; --muted: #6B5639;
  --gold: #8A5F12; --gold-soft: #F6E4B3;
  --brand-accent: #9E1B2E; --brand-accent-soft: #F7E1DC; --brand-accent-line: #D9A0A6; --brand-accent-deep: #761221;
  --realm-gold: #B8862F; --realm-gold-text: #7E5510; --realm-crimson: #9E1B2E; --realm-violet: #5B2A86; --realm-edge: rgba(140, 98, 36, 0.10); --realm-line: rgba(184, 134, 47, 0.55);
  --realm-tex: var(--img-fiber), var(--img-stains);
  --realm-vignette: radial-gradient(ellipse at 50% 38%, transparent 52%, rgba(110, 72, 24, 0.22) 100%);
  --orn-tl: var(--img-orn-l-tl); --orn-tr: var(--img-orn-l-tr); --orn-bl: var(--img-orn-l-bl); --orn-br: var(--img-orn-l-br);
  --realm-divider: var(--img-div-l);
  --bg-rune: #9A6C1C; --bg-mark: #6B3A94;
  --mesh-a: rgba(184, 134, 47, 0.10); --mesh-b: rgba(158, 27, 46, 0.05); --mesh-c: rgba(91, 42, 134, 0.05); --mesh-d: rgba(184, 134, 47, 0.08);
  --shadow: 0 18px 40px -22px rgba(58, 36, 10, 0.45), 0 4px 14px -6px rgba(58, 36, 10, 0.14);
  --shadow-sm: 0 1px 2px rgba(58, 36, 10, 0.07), 0 5px 14px -8px rgba(58, 36, 10, 0.18);
}
:root[data-skin="realm"]:not([data-theme="dark"]):not([data-course]) { --accent: var(--brand-accent); --accent-soft: var(--brand-accent-soft); --accent-line: var(--brand-accent-line); --accent-deep: var(--brand-accent-deep); --accent-ink: #FFFFFF; }
:root[data-skin="realm"][data-theme="dark"] {
  --bg: #110E18; --grid: transparent;
  --surface: #1B1624; --surface-2: #221C2E; --surface-3: #2C2439;
  --border: #372D48; --border-strong: #52456B;
  --ink: #F2EAD8; --ink-2: #D9CDB5; --muted: #AB9D84;
  --gold: #E8B84E; --gold-soft: #3A2C10;
  --brand-accent: #E8B84E; --brand-accent-soft: #33280F; --brand-accent-line: #7A5E22; --brand-accent-deep: #C8952B;
  --realm-gold: #C99A45; --realm-gold-text: #E8B84E; --realm-crimson: #F07A86; --realm-violet: #B69BE8; --realm-edge: rgba(0, 0, 0, 0.35); --realm-line: rgba(201, 154, 69, 0.5);
  --realm-tex: var(--img-stars);
  --realm-vignette: radial-gradient(ellipse at 20% -10%, rgba(91, 42, 134, 0.32), transparent 55%), radial-gradient(ellipse at 110% 110%, rgba(232, 184, 78, 0.10), transparent 50%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  --orn-tl: var(--img-orn-d-tl); --orn-tr: var(--img-orn-d-tr); --orn-bl: var(--img-orn-d-bl); --orn-br: var(--img-orn-d-br);
  --realm-divider: var(--img-div-d);
  --bg-rune: #E8B84E; --bg-mark: #B69BE8;
  --mesh-a: rgba(91, 42, 134, 0.18); --mesh-b: rgba(232, 184, 78, 0.06); --mesh-c: rgba(158, 27, 46, 0.08); --mesh-d: rgba(91, 42, 134, 0.10);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 4px 14px -6px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 5px 14px -8px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) { :root[data-skin="realm"]:not([data-theme="light"]) {
  --bg: #110E18; --grid: transparent;
  --surface: #1B1624; --surface-2: #221C2E; --surface-3: #2C2439;
  --border: #372D48; --border-strong: #52456B;
  --ink: #F2EAD8; --ink-2: #D9CDB5; --muted: #AB9D84;
  --gold: #E8B84E; --gold-soft: #3A2C10;
  --brand-accent: #E8B84E; --brand-accent-soft: #33280F; --brand-accent-line: #7A5E22; --brand-accent-deep: #C8952B;
  --realm-gold: #C99A45; --realm-gold-text: #E8B84E; --realm-crimson: #F07A86; --realm-violet: #B69BE8; --realm-edge: rgba(0, 0, 0, 0.35); --realm-line: rgba(201, 154, 69, 0.5);
  --realm-tex: var(--img-stars);
  --realm-vignette: radial-gradient(ellipse at 20% -10%, rgba(91, 42, 134, 0.32), transparent 55%), radial-gradient(ellipse at 110% 110%, rgba(232, 184, 78, 0.10), transparent 50%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  --orn-tl: var(--img-orn-d-tl); --orn-tr: var(--img-orn-d-tr); --orn-bl: var(--img-orn-d-bl); --orn-br: var(--img-orn-d-br);
  --realm-divider: var(--img-div-d);
  --bg-rune: #E8B84E; --bg-mark: #B69BE8;
  --mesh-a: rgba(91, 42, 134, 0.18); --mesh-b: rgba(232, 184, 78, 0.06); --mesh-c: rgba(158, 27, 46, 0.08); --mesh-d: rgba(91, 42, 134, 0.10);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 4px 14px -6px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 5px 14px -8px rgba(0, 0, 0, 0.45);
} }
/* pages that belong to no class: crimson by day, gold by night (gold needs dark text) */
:root[data-skin="realm"][data-theme="dark"]:not([data-course]) { --accent: var(--brand-accent); --accent-soft: var(--brand-accent-soft); --accent-line: var(--brand-accent-line); --accent-deep: var(--brand-accent-deep); --accent-ink: #1B1206; }
@media (prefers-color-scheme: dark) { :root[data-skin="realm"]:not([data-theme="light"]):not([data-course]) { --accent: var(--brand-accent); --accent-soft: var(--brand-accent-soft); --accent-line: var(--brand-accent-line); --accent-deep: var(--brand-accent-deep); --accent-ink: #1B1206; } }

/* ---------- page ---------- */
:root[data-skin="realm"] body { background-color: var(--bg); background-image: var(--realm-tex); background-attachment: fixed; font-feature-settings: normal; }
:root[data-skin="realm"] body::before { background: var(--realm-vignette); }
:root[data-skin="realm"] ::selection { background: color-mix(in srgb, var(--realm-gold) 38%, transparent); }
:root[data-skin="realm"] { scrollbar-color: var(--border-strong) transparent; }

/* ---------- type: Cinzel for display, Helvetica Neue for reading ---------- */
:root[data-skin="realm"] h1, :root[data-skin="realm"] h2, :root[data-skin="realm"] h3, :root[data-skin="realm"] h4, :root[data-skin="realm"] .page-title, :root[data-skin="realm"] .panel-title, :root[data-skin="realm"] .topbar-title, :root[data-skin="realm"] .note-title { font-weight: 600; letter-spacing: 0.01em; }
:root[data-skin="realm"] .page-title, :root[data-skin="realm"] .note-title { font-size: 30px; line-height: 1.18; }
:root[data-skin="realm"] .landing-title:not(.brand-title) { font-size: 40px; letter-spacing: 0.01em; font-weight: 600; }
:root[data-skin="realm"] .panel-title { font-size: 16.5px; }
:root[data-skin="realm"] .brand-code, :root[data-skin="realm"] .course-code { font-style: normal; font-weight: 700; letter-spacing: 0.02em; }
:root[data-skin="realm"] .fc-front, :root[data-skin="realm"] .rd-text, :root[data-skin="realm"] .rd-by, :root[data-skin="realm"] .guide-quote, :root[data-skin="realm"] .fz-quote, :root[data-skin="realm"] .fa-title.big { font-family: var(--font-sans); }
:root[data-skin="realm"] .eyebrow { color: var(--realm-gold-text); letter-spacing: 0.16em; }
:root[data-skin="realm"] .hero-exam .eyebrow, :root[data-skin="realm"] .today-card .eyebrow { color: rgba(255, 255, 255, 0.82); }
:root[data-skin="realm"] .table th { font-family: var(--font-display); letter-spacing: 0.08em; color: var(--realm-gold-text); }
@media (max-width: 760px) { :root[data-skin="realm"]:not([data-theme="dark"]) .landing-top.hero { background-size: 190px 190px, 360px 180px, auto; background-position: right -60px top -40px, left 30% bottom -30px, 0 0; } :root[data-skin="realm"] .landing-title:not(.brand-title) { font-size: 30px; } :root[data-skin="realm"] .page-title, :root[data-skin="realm"] .note-title { font-size: 25px; } }

/* ---------- panels: vellum with gold corner ornaments ---------- */
:root[data-skin="realm"] .panel:not(.hero-exam):not(.gs-card):not(.ann-panel):not(.callout), :root[data-skin="realm"] .fz-card, :root[data-skin="realm"] .modal, :root[data-skin="realm"] .course-card {
  border: 1px solid var(--border-strong); background-color: var(--surface);
  background-image: var(--orn-tl), var(--orn-tr), var(--orn-bl), var(--orn-br); background-repeat: no-repeat; background-size: 16px 16px;
  background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
  box-shadow: var(--shadow-sm), inset 0 0 30px var(--realm-edge);
}
:root[data-skin="realm"] .panel.lift:not(.hero-exam) { box-shadow: var(--shadow), inset 0 0 30px var(--realm-edge); border-color: var(--realm-gold); }
:root[data-skin="realm"] .hero-exam { box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 226, 160, 0.45), inset 0 0 0 5px rgba(255, 255, 255, 0.04); }
:root[data-skin="realm"] .gs-card, :root[data-skin="realm"] .ann-panel { border-color: var(--realm-gold); }
:root[data-skin="realm"] .hero-exam .btn, :root[data-skin="realm"] .today-card .btn, :root[data-skin="realm"] .recap-card .btn:not(.primary) { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; box-shadow: none; }
:root[data-skin="realm"] .hero-exam .btn.primary, :root[data-skin="realm"] .today-card .btn.btn { background: #fff; color: var(--accent-deep, var(--accent)); border-color: #fff; box-shadow: inset 0 0 0 1px rgba(184, 134, 47, 0.45), 0 6px 16px -10px rgba(0, 0, 0, 0.5); }
:root[data-skin="realm"] .today-card .btn.btn { color: #9A3412; }
:root[data-skin="realm"] .stat { background: var(--surface-2); border: 1px solid var(--border); }
:root[data-skin="realm"] .callout { border-left: 3px solid var(--realm-gold); }
:root[data-skin="realm"] .divider { height: 16px; background: var(--realm-divider) center / 120px 12px no-repeat, linear-gradient(90deg, transparent, var(--realm-line) 20%, var(--realm-line) 80%, transparent) center / 100% 1px no-repeat; opacity: 0.8; margin: 10px 0; }

/* ---------- page heading: a flourish under the title ---------- */
:root[data-skin="realm"] .page-head { position: relative; padding-bottom: 18px; }
:root[data-skin="realm"] .page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; pointer-events: none; background: var(--realm-divider) 0 50% / 150px 14px no-repeat, linear-gradient(90deg, var(--realm-line), transparent 75%) 152px 50% / calc(100% - 152px) 1px no-repeat; }

/* ---------- buttons: parchment, and gems for the main action ---------- */
:root[data-skin="realm"] .btn { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-color: var(--border-strong); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(58, 36, 10, 0.06); font-weight: 600; }
:root[data-skin="realm"][data-theme="dark"] .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
:root[data-skin="realm"] .btn:not(:disabled):hover { border-color: var(--realm-gold); }
:root[data-skin="realm"] .btn.primary { background: radial-gradient(130% 150% at 30% 0%, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 42%, var(--accent-deep, var(--accent)) 100%); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent-deep, var(--accent)) 70%, #000); box-shadow: inset 0 0 0 1px rgba(255, 222, 150, 0.5), inset 0 -8px 14px -8px rgba(0, 0, 0, 0.35), 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
:root[data-skin="realm"] .btn.primary:not(:disabled):hover { filter: brightness(1.06) saturate(1.05); border-color: color-mix(in srgb, var(--accent-deep, var(--accent)) 70%, #000); }
:root[data-skin="realm"] .btn.ghost { background: transparent; box-shadow: none; }
:root[data-skin="realm"] .icon-btn:hover { background: var(--gold-soft); }
:root[data-skin="realm"] .chip { border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); }
:root[data-skin="realm"] .input, :root[data-skin="realm"] .select, :root[data-skin="realm"] textarea.input { background: color-mix(in srgb, var(--surface) 70%, #fff); border-color: var(--border-strong); }
:root[data-skin="realm"][data-theme="dark"] .input, :root[data-skin="realm"][data-theme="dark"] .select, :root[data-skin="realm"][data-theme="dark"] textarea.input { background: var(--surface-2); }
:root[data-skin="realm"] .input:focus, :root[data-skin="realm"] .select:focus, :root[data-skin="realm"] textarea.input:focus { border-color: var(--realm-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--realm-gold) 28%, transparent); }

/* ---------- sidebar, top bar, tab bar ---------- */
:root[data-skin="realm"] .sidebar { background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface) 70%, var(--surface-2))); border-right: 3px double var(--realm-line); }
:root[data-skin="realm"] .brand { border-bottom: 1px solid var(--realm-line); }
:root[data-skin="realm"] .nav-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; color: var(--realm-gold-text); }
:root[data-skin="realm"] .nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), transparent); }
:root[data-skin="realm"] .nav-item::before { width: 4px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--realm-gold), var(--accent)); }
:root[data-skin="realm"] .topbar { background: color-mix(in srgb, var(--surface) 82%, transparent); border-bottom: 1px solid var(--realm-line); box-shadow: 0 1px 0 color-mix(in srgb, var(--realm-gold) 25%, transparent), 0 3px 0 -2px var(--realm-line); }
:root[data-skin="realm"] #tabbar { border-top: 1px solid var(--realm-line); }
:root[data-skin="realm"] .dash-tabs { border: 1px solid var(--border); background: var(--surface-2); }
:root[data-skin="realm"] .dash-tabs .tab { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; }
:root[data-skin="realm"] .dash-tabs .tab.on { background: var(--surface); box-shadow: inset 0 -2px 0 var(--realm-gold), var(--shadow-sm); }

/* ---------- start page: a map by day, the night sky by night ---------- */
:root[data-skin="realm"] .landing-top.hero { border: 1px solid var(--realm-gold); background: var(--img-compass) right -40px top -30px / 300px 300px no-repeat, var(--img-map) left 45% bottom -20px / 520px 260px no-repeat, radial-gradient(120% 90% at 20% 0%, #FFF9EA 0%, var(--surface) 45%, var(--surface-2) 100%); box-shadow: var(--shadow), inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--realm-line), inset 0 0 60px rgba(140, 98, 36, 0.14); }
:root[data-skin="realm"][data-theme="dark"] .landing-top.hero { background: radial-gradient(circle at calc(74% + 9px) calc(44% - 6px), #1D1733 0 17px, transparent 18px), radial-gradient(circle at 74% 44%, #FFF3D6 0 19px, rgba(255, 236, 190, 0.30) 21px, rgba(255, 236, 190, 0.07) 42px, transparent 70px), var(--img-stars) 0 0 / 240px 240px, radial-gradient(120% 100% at 15% 0%, #2A1F48 0%, #16122A 55%, #0F0C18 100%); border-color: var(--realm-line); box-shadow: var(--shadow), inset 0 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 0 6px var(--realm-line); }
@media (prefers-color-scheme: dark) { :root[data-skin="realm"]:not([data-theme="light"]) .landing-top.hero { background: radial-gradient(circle at calc(74% + 9px) calc(44% - 6px), #1D1733 0 17px, transparent 18px), radial-gradient(circle at 74% 44%, #FFF3D6 0 19px, rgba(255, 236, 190, 0.30) 21px, rgba(255, 236, 190, 0.07) 42px, transparent 70px), var(--img-stars) 0 0 / 240px 240px, radial-gradient(120% 100% at 15% 0%, #2A1F48 0%, #16122A 55%, #0F0C18 100%); border-color: var(--realm-line); box-shadow: var(--shadow), inset 0 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 0 6px var(--realm-line); } }
:root[data-skin="realm"] .landing-top.hero::after { background: radial-gradient(circle, color-mix(in srgb, var(--realm-gold) 22%, transparent), transparent 70%); }
:root[data-skin="realm"] .hero-tag i, :root[data-skin="realm"] .brand-logo small i { color: var(--realm-crimson); }
:root[data-skin="realm"] .hero-count { background: var(--surface); border-color: var(--realm-line); }
:root[data-skin="realm"] .course-card::before { height: 6px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--realm-gold)), var(--accent)); }
:root[data-skin="realm"] .course-card-head .course-code { font-size: 30px; }

/* ---------- overlays ---------- */
:root[data-skin="realm"] .modal-backdrop { background: rgba(28, 16, 4, 0.55); }
:root[data-skin="realm"][data-theme="dark"] .modal-backdrop { background: rgba(4, 2, 10, 0.7); }
:root[data-skin="realm"] .modal { border-color: var(--realm-gold); }
:root[data-skin="realm"] .acct-dd, :root[data-skin="realm"] .popover { border-color: var(--realm-line); background-color: var(--surface); }
:root[data-skin="realm"] .toast { background: #2A1C0F; color: #F6E8C8; border: 1px solid #B8862F; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6), inset 0 0 0 3px #2A1C0F, inset 0 0 0 4px rgba(184, 134, 47, 0.45); }
:root[data-skin="realm"][data-theme="dark"] .toast { background: #F2EAD8; color: #1B1206; border-color: #C99A45; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8), inset 0 0 0 3px #F2EAD8, inset 0 0 0 4px rgba(184, 134, 47, 0.55); }
:root[data-skin="realm"] .lvl-badge { clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%); border-radius: 0; background: linear-gradient(160deg, var(--realm-gold), var(--accent)); }
:root[data-skin="realm"] .bar { background: var(--surface-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--realm-gold) 25%, transparent); }

/* ---------- Bo wears a wizard hat here ---------- */
.bobcat .bo-hat { display: none; }
:root[data-skin="realm"] .bobcat .bo-hat { display: inline; }

/* ---------- archetype chips on the class cards (Realm only) ---------- */
.arch-chip { display: none; }
:root[data-skin="realm"] .arch-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font: 700 11.5px/1.6 var(--font-display); letter-spacing: 0.08em; color: color-mix(in srgb, var(--accent) 68%, var(--ink)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); white-space: nowrap; }
.course-idline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- geek mode, Realm edition: runes, gold, a travelling party ---------- */
:root[data-skin="realm"] .gk-dec i { font-family: var(--font-rune), var(--font-mono); color: var(--realm-gold-text); }
:root[data-skin="realm"] #gk-scan::before { background: color-mix(in srgb, var(--realm-gold) 80%, #fff); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--realm-gold) 55%, transparent), 0 0 44px 10px color-mix(in srgb, var(--realm-gold) 22%, transparent); }
:root[data-skin="realm"] #gk-scan::after { background: radial-gradient(1.5px 1.5px at 12% 30%, var(--realm-gold) 50%, transparent), radial-gradient(1.5px 1.5px at 38% 62%, var(--realm-gold) 50%, transparent), radial-gradient(1.5px 1.5px at 67% 22%, var(--realm-gold) 50%, transparent), radial-gradient(1.5px 1.5px at 86% 74%, var(--realm-gold) 50%, transparent), radial-gradient(1px 1px at 52% 44%, var(--realm-gold) 50%, transparent); }
:root[data-skin="realm"] #gk-status { background: rgba(27, 18, 8, 0.94); color: #F6E8C8; border-color: rgba(201, 154, 69, 0.55); }
:root[data-skin="realm"] #gk-status .gk-path { color: #E8B84E; } :root[data-skin="realm"] #gk-status .gk-cmd { color: #FFF6E2; } :root[data-skin="realm"] #gk-status .gk-cur { background: #E8B84E; }
:root[data-skin="realm"] .gk-boot { background: #1B1208; color: #F6E8C8; border-color: rgba(201, 154, 69, 0.45); } :root[data-skin="realm"] .gk-boot b { color: #E8B84E; } :root[data-skin="realm"] .gk-boot .gk-line { color: #FBEFD5; }
html[data-geek="on"]:root[data-skin="realm"] .toast::before { content: '\2726  '; opacity: 0.8; }

/* ============================================================
   d20 quest roller and character sheet (every look)
   ============================================================ */
@keyframes d20Tumble { 0% { transform: translateY(-34px) rotate(-220deg) scale(0.55); opacity: 0.3; } 55% { transform: translateY(8px) rotate(30deg) scale(1.08); opacity: 1; } 78% { transform: translateY(-5px) rotate(-10deg) scale(0.98); } 100% { transform: none; opacity: 1; } }
@keyframes d20Glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(232, 184, 78, 0.55)); } 50% { filter: drop-shadow(0 0 16px rgba(232, 184, 78, 0.95)); } }
.d20-btn svg { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.d20-btn:hover svg { transform: rotate(72deg); }
.roll-modal { max-width: 440px; padding: 24px 24px 20px; text-align: center; }
.roll-modal .roll-close { position: absolute; top: 12px; right: 12px; }
.roll-modal { position: relative; }
.d20-stage { width: 150px; height: 150px; margin: 2px auto 8px; }
.d20-big { width: 150px; height: 150px; overflow: visible; display: block; }
.d20-big .d20-face { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.d20-big .d20-inner { fill: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.d20-big .d20-edge { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.d20-big text { font: 700 24px var(--font-display); fill: var(--ink); }
.d20-big.rolling { animation: d20Tumble 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.d20-big.crit .d20-edge { stroke: #D9A232; stroke-width: 3; } .d20-big.crit { animation: d20Glow 1.4s ease-in-out infinite; }
.d20-big.fumble .d20-edge { stroke: var(--bad); } .d20-big.fumble { animation: shake 0.45s; }
.roll-verdict { font: 700 22px/1.2 var(--font-display); letter-spacing: 0.02em; margin: 2px 0 4px; min-height: 27px; }
.roll-verdict.crit { color: var(--gold); } .roll-verdict.fumble { color: var(--bad); }
.roll-sub { color: var(--muted); font-size: 14px; min-height: 20px; }
.roll-quest { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); text-align: left; }
.roll-quest b { display: block; font-size: 15.5px; }
.roll-quest small { color: var(--muted); }
.roll-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

.cs-top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.cs-name { font: 700 30px/1.1 var(--font-display); letter-spacing: 0.01em; margin: 2px 0 4px; overflow-wrap: anywhere; }
.cs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.cs-fact { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.cs-fact span { display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cs-fact b { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.cs-xp { margin-top: 12px; }
.cs-abils { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cs-abil { position: relative; text-align: center; padding: 12px 8px 22px; background: var(--surface-2); border: 2px solid var(--border-strong); border-radius: 14px 14px 46% 46% / 14px 14px 20% 20%; }
.cs-abil .ab { font: 700 13px/1 var(--font-display); letter-spacing: 0.14em; color: var(--gold); }
.cs-abil .nm { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.cs-abil .sc { font: 700 38px/1.1 var(--font-display); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.cs-abil .md { display: inline-block; min-width: 44px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 700; font-size: 14px; }
.cs-abil .why { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.35; min-height: 2.7em; }
.cs-class { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.cs-class:last-child { border-bottom: 0; }
.cs-class .ci { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--cs-c, var(--accent)), color-mix(in srgb, var(--cs-c, var(--accent)) 60%, #000)); }
.cs-class .cl { flex: 1; min-width: 0; } .cs-class .cl b { display: block; } .cs-class .cl small { color: var(--muted); }
.cs-class .lv { font: 700 20px var(--font-display); white-space: nowrap; }
.cs-inv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); text-decoration: none; min-width: 0; }
a.cs-item:hover { border-color: var(--accent); text-decoration: none; }
.cs-item svg { flex: none; color: var(--gold); } .cs-item b { font-size: 18px; margin-right: 2px; } .cs-item small { display: block; color: var(--muted); font-size: 12px; }
.cs-profs { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 980px) { .cs-abils { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-top { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cs-abils { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-inv { grid-template-columns: 1fr; } .cs-name { font-size: 25px; } }

@media print {
  :root[data-skin="realm"] body { background: #fff !important; }
  :root[data-skin="realm"] .panel, :root[data-skin="realm"] .modal, :root[data-skin="realm"] .course-card { background-image: none !important; box-shadow: none !important; }
  :root[data-skin="realm"] .page-head::after { display: none; }
}