/* ==========================================================================
   Anglers of Azeroth's look (the `skin-wow` class)
   An ornate fantasy MMO interface, in an original take of its own: carved
   grey stone and dark oak under gold filigree, a ruby set into every corner,
   parchment quest scrolls for the things you read, deep blue tooltips with a
   thin gold edge, rounded red-and-gold buttons, and the item-quality colors
   (poor, uncommon, rare, epic, legendary) as accents.
   Behind it all, a twilight sky: an aurora, the first stars, and mountains
   going dark under the last of the light (anglers.css hangs the guild's
   constellation, the Leaping Fish, in it).
   Titles in Cinzel Decorative, labels in Marcellus, reading text in Inter.
   Original CSS throughout: no game art, logos or fonts. Every texture and
   ornament is drawn here, with gradients and inline SVG.
   Everything sits inside :where(), so a rule weighs what the base.css rule
   it replaces weighs and wins by coming later.
   ========================================================================== */

/* the picker's postcard: moonrise over the mountains, framed in gold */
.skin-picker:not(.is-compact) .skin-option-wow .skin-swatch {
  background:
    radial-gradient(circle at 10px 10px, #ffd9cf 0 1px, #d8261a 2.2px, #5a0904 3.4px, #120a02 4.2px, #c99a3c 4.8px, #6b4513 6px, transparent 6.6px),
    radial-gradient(circle at calc(100% - 10px) 10px, #ffd9cf 0 1px, #d8261a 2.2px, #5a0904 3.4px, #120a02 4.2px, #c99a3c 4.8px, #6b4513 6px, transparent 6.6px),
    radial-gradient(circle at 10px calc(100% - 10px), #ffd9cf 0 1px, #d8261a 2.2px, #5a0904 3.4px, #120a02 4.2px, #c99a3c 4.8px, #6b4513 6px, transparent 6.6px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #ffd9cf 0 1px, #d8261a 2.2px, #5a0904 3.4px, #120a02 4.2px, #c99a3c 4.8px, #6b4513 6px, transparent 6.6px),
    linear-gradient(var(--s1), var(--s1)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--s1), var(--s1)) 0 100% / 100% 2px no-repeat,
    linear-gradient(var(--s1), var(--s1)) 0 0 / 2px 100% no-repeat,
    linear-gradient(var(--s1), var(--s1)) 100% 0 / 2px 100% no-repeat,
    radial-gradient(circle at 74% 34%, #fbf5e2 0 9px, rgba(251, 245, 226, 0) 10px),
    radial-gradient(circle at 74% 34%, rgba(235, 228, 255, .35), transparent 34px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72l0-29 4-6 4-6 4-7 4 1 4 10 4 10 4 9 4 7 4 6 4 2 4 1 4 0 4 0 4 0 4 0 4 0 4 0 4 0 4 0 4 0 4-1 4-2 4-2 4-3 4-4 4-4 4-3 4-5 4-4 4-5 4-4 4-5 4 2 4 6 4 6 4 6 4 6 4-4 4-5 4-7 4-7 4-7 4 7 4 6 4 5 4 6 4 5 4-3 4-4 4-3 0 29z' fill='%232a2658'/%3E%3Cpath d='M0 43l4-6 4-6 4-7 4 1 4 10 4 10 4 9 4 7 4 6 4 2 4 1 4 0 4 0 4 0 4 0 4 0 4 0 4 0 4 0 4 0 4-1 4-2 4-2 4-3 4-4 4-4 4-3 4-5 4-4 4-5 4-4 4-5 4 2 4 6 4 6 4 6 4 6 4-4 4-5 4-7 4-7 4-7 4 7 4 6 4 5 4 6 4 5 4-3 4-4 4-3' fill='none' stroke='%23c2b4ff' stroke-opacity='.35'/%3E%3Cpath d='M0 72l0-4 25 0 25 1 25 0 25-1 25 1 25 0 25 0 25-1 0 4zM23 69l2-6 2 6zM23 69l2-3 2 3zM23 71l2-3 2 3zM24 71h2v-4h-2zM30 69l2-10 2 10zM30 68l2-5 2 5zM30 71l2-5 2 5zM31 71h2v-4h-2zM30 69l2-10 2 10zM30 68l2-5 2 5zM30 71l2-5 2 5zM31 71h2v-4h-2zM39 70l2-6 2 6zM39 70l2-4 2 4zM39 72l2-4 2 4zM40 72h2v-4h-2zM42 70l2-9 2 9zM42 70l2-6 2 6zM42 72l2-5 2 5zM43 72h2v-4h-2zM50 70l2-10 2 10zM50 69l2-6 2 6zM50 72l2-6 2 6zM51 72h2v-4h-2zM53 70l2-8 2 8zM53 70l2-5 2 5zM53 72l2-5 2 5zM54 72h2v-4h-2zM60 70l2-8 2 8zM60 70l2-5 2 5zM60 72l2-4 2 4zM61 72h2v-4h-2zM80 70l2-7 2 7zM80 70l2-5 2 5zM80 72l2-4 2 4zM81 72h2v-4h-2zM81 70l2-11 2 11zM81 69l2-6 2 6zM81 73l2-7 2 7zM82 72h2v-4h-2zM104 69l2-8 2 8zM104 69l2-5 2 5zM104 71l2-5 2 5zM105 71h2v-4h-2zM144 70l2-10 2 10zM144 69l2-6 2 6zM144 72l2-6 2 6zM145 72h2v-4h-2zM150 70l2-10 2 10zM150 69l2-6 2 6zM150 72l2-6 2 6zM151 72h2v-4h-2zM170 70l2-8 2 8zM170 70l2-5 2 5zM170 72l2-4 2 4zM171 72h2v-4h-2z' fill='%230a0910'/%3E%3C/svg%3E") 50% 100% / 100% 78% no-repeat,
    radial-gradient(60% 34% at 28% 30%, rgba(70, 255, 190, .3), transparent 70%),
    linear-gradient(180deg, #060a1e 0%, var(--s2) 55%, #4a2a58 100%);
}

html:has(.app.skin-wow:not(.theme-fantasy)), html:has(.app.skin-wow:not(.theme-fantasy)) body { background: #070812; }

/* The page's own scrollbar wears the gold too (Chromium styles it with the pseudo-elements). */
html:has(.app.skin-wow:not(.theme-fantasy)) { scrollbar-width: auto; scrollbar-color: auto; }
html:has(.app.skin-wow:not(.theme-fantasy))::-webkit-scrollbar { width: 12px; height: 12px; background: #090a12; }
html:has(.app.skin-wow:not(.theme-fantasy))::-webkit-scrollbar-track { background: linear-gradient(90deg, #050508, #12131c 50%, #050508); box-shadow: inset 1px 0 0 rgba(214, 170, 72, .25); }
html:has(.app.skin-wow:not(.theme-fantasy))::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: linear-gradient(90deg, #fff0b8, #d9a845 40%, #8a5d1c 75%, #4f330c) padding-box; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }

:where(.app.skin-wow:not(.theme-fantasy)) {
  /* the dark palette, kept under its own names so anything set inside a parchment page can ask for it back */
  --wow-d-text: #f3ead3;
  --wow-d-text-2: #d6c7a3;
  --wow-d-muted: #9d8f72;
  --wow-d-line: rgba(214, 170, 72, .2);
  --wow-d-line-2: rgba(214, 170, 72, .42);
  --wow-d-panel: rgba(23, 26, 37, .95);
  --wow-d-panel-2: rgba(33, 36, 50, .95);
  --wow-d-hover: rgba(255, 209, 0, .08);
  --bg: #070812;
  --bg-2: #0d1128;
  --panel: var(--wow-d-panel);
  --panel-solid: #171a25;
  --panel-2: var(--wow-d-panel-2);
  --panel-hover: var(--wow-d-hover);
  --line: var(--wow-d-line);
  --line-2: var(--wow-d-line-2);
  --text: var(--wow-d-text);
  --text-2: var(--wow-d-text-2);
  --muted: var(--wow-d-muted);
  --accent: #ffd100;
  --accent-2: #5ab4ff;
  --accent-ink: #1f1302;
  --gold: #ffd100;
  --danger: #ff4a36;
  --success: #1eff00;
  --warning: #ff8000;
  --live: #ff3b2a;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-xs: 5px;
  --display: "Marcellus", "Cinzel", Georgia, "Times New Roman", serif;
  --title: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --numerals: "Cinzel", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --glow: 0 0 0 1px rgba(255, 209, 0, .55), 0 0 22px -4px rgba(255, 190, 50, .65);
  /* type that changes with the surface it sits on (parchment swaps these) */
  --wow-heading: #f6cb55;
  --wow-label: #cfae63;
  --wow-ink-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .85);
  /* item quality: the exact colors for edges and glows, lifted a little where they carry small text */
  --q-poor: #9d9d9d;
  --q-uncommon: #1eff00;
  --q-rare: #0070dd;
  --q-rare-text: #3d96ff;
  --q-epic: #a335ee;
  --q-epic-text: #bf6bff;
  --q-legendary: #ff8000;
  --q-artifact: #e6cc80;
  /* gold: lit from above, so the top edge of a frame shines and the bottom sits in shadow */
  --wow-gold: conic-gradient(from 0deg at 50% 50%, #ffeaa6 0deg, #e0b04e 50deg, #a8742a 95deg, #6e4a17 140deg, #4f330c 180deg, #6e4a17 220deg, #a8742a 265deg, #e0b04e 310deg, #ffeaa6 360deg);
  --wow-gold-flat: linear-gradient(180deg, #fff0b8 0%, #e9bd5c 30%, #a8742a 62%, #6b4513 100%);
  --wow-gold-text: linear-gradient(180deg, #fff8d2 0%, #ffe27a 32%, #ffc61a 55%, #d38b00 82%, #9a5d00 100%);
  /* ornaments: filigree corners set with rubies (or sapphires), a jeweled clasp, a gold rule */
  --wow-corners: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.3' stop-color='%23ecc260'/%3E%3Cstop offset='.62' stop-color='%23a8742a'/%3E%3Cstop offset='1' stop-color='%235a3a0e'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.36' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23ffd9cf'/%3E%3Cstop offset='.3' stop-color='%23e8321f'/%3E%3Cstop offset='.75' stop-color='%237e0b05'/%3E%3Cstop offset='1' stop-color='%23120202'/%3E%3C/radialGradient%3E%3Cg id='c'%3E%3Cpath d='M18 7.6c6-4.2 13.5-4.4 19.6-1 4 2.2 3.6 7.6-.6 7.8-2.8.1-3.6-3.2-1.2-4M7.6 18c-4.2 6-4.4 13.5-1 19.6 2.2 4 7.6 3.6 7.8-.6.1-2.8-3.2-3.6-4-1.2' fill='none' stroke='%23140b02' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 7.6c6-4.2 13.5-4.4 19.6-1 4 2.2 3.6 7.6-.6 7.8-2.8.1-3.6-3.2-1.2-4M7.6 18c-4.2 6-4.4 13.5-1 19.6 2.2 4 7.6 3.6 7.8-.6.1-2.8-3.2-3.6-4-1.2' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 7.6c6-4.2 13.5-4.4 19.6-1 4 2.2 3.6 7.6-.6 7.8-2.8.1-3.6-3.2-1.2-4M7.6 18c-4.2 6-4.4 13.5-1 19.6 2.2 4 7.6 3.6 7.8-.6.1-2.8-3.2-3.6-4-1.2' fill='none' stroke='%23fff6d2' stroke-opacity='.55' stroke-width='.7' stroke-linecap='round' transform='translate(-.5 -.5)'/%3E%3Cpath d='M16.6 16.6c4.6.6 8.4 3.2 10 9.4-6.2-1.6-8.8-5.4-10-9.4z' fill='url(%23g)' stroke='%23140b02' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='10.5' cy='10.5' r='8.6' fill='%23140b02'/%3E%3Ccircle cx='10.5' cy='10.5' r='7.5' fill='url(%23g)'/%3E%3Ccircle cx='10.5' cy='10.5' r='7.5' fill='none' stroke='%23fff3c4' stroke-opacity='.5' stroke-width='.6'/%3E%3Ccircle cx='10.5' cy='10.5' r='4.9' fill='%231a0804'/%3E%3Ccircle cx='10.5' cy='10.5' r='4.3' fill='url(%23r)'/%3E%3Cellipse cx='9.1' cy='8.9' rx='1.5' ry='1' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 1 100 0)'/%3E%3Cuse href='%23c' transform='matrix(1 0 0 -1 0 100)'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 -1 100 100)'/%3E%3C/svg%3E");
  --wow-corners-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.3' stop-color='%23ecc260'/%3E%3Cstop offset='.62' stop-color='%23a8742a'/%3E%3Cstop offset='1' stop-color='%235a3a0e'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.36' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23e6f7ff'/%3E%3Cstop offset='.3' stop-color='%233f9dff'/%3E%3Cstop offset='.75' stop-color='%230e3a86'/%3E%3Cstop offset='1' stop-color='%23120202'/%3E%3C/radialGradient%3E%3Cg id='c'%3E%3Cpath d='M18 7.6c6-4.2 13.5-4.4 19.6-1 4 2.2 3.6 7.6-.6 7.8-2.8.1-3.6-3.2-1.2-4M7.6 18c-4.2 6-4.4 13.5-1 19.6 2.2 4 7.6 3.6 7.8-.6.1-2.8-3.2-3.6-4-1.2' fill='none' stroke='%23140b02' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 7.6c6-4.2 13.5-4.4 19.6-1 4 2.2 3.6 7.6-.6 7.8-2.8.1-3.6-3.2-1.2-4M7.6 18c-4.2 6-4.4 13.5-1 19.6 2.2 4 7.6 3.6 7.8-.6.1-2.8-3.2-3.6-4-1.2' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 7.6c6-4.2 13.5-4.4 19.6-1 4 2.2 3.6 7.6-.6 7.8-2.8.1-3.6-3.2-1.2-4M7.6 18c-4.2 6-4.4 13.5-1 19.6 2.2 4 7.6 3.6 7.8-.6.1-2.8-3.2-3.6-4-1.2' fill='none' stroke='%23fff6d2' stroke-opacity='.55' stroke-width='.7' stroke-linecap='round' transform='translate(-.5 -.5)'/%3E%3Cpath d='M16.6 16.6c4.6.6 8.4 3.2 10 9.4-6.2-1.6-8.8-5.4-10-9.4z' fill='url(%23g)' stroke='%23140b02' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='10.5' cy='10.5' r='8.6' fill='%23140b02'/%3E%3Ccircle cx='10.5' cy='10.5' r='7.5' fill='url(%23g)'/%3E%3Ccircle cx='10.5' cy='10.5' r='7.5' fill='none' stroke='%23fff3c4' stroke-opacity='.5' stroke-width='.6'/%3E%3Ccircle cx='10.5' cy='10.5' r='4.9' fill='%231a0804'/%3E%3Ccircle cx='10.5' cy='10.5' r='4.3' fill='url(%23r)'/%3E%3Cellipse cx='9.1' cy='8.9' rx='1.5' ry='1' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 1 100 0)'/%3E%3Cuse href='%23c' transform='matrix(1 0 0 -1 0 100)'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 -1 100 100)'/%3E%3C/svg%3E");
  --wow-frame: var(--wow-corners) 48 / 34px / 7px stretch;
  --wow-frame-blue: var(--wow-corners-blue) 48 / 38px / 8px stretch;
  --wow-clasp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28' viewBox='0 0 160 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.3' stop-color='%23ecc260'/%3E%3Cstop offset='.62' stop-color='%23a8742a'/%3E%3Cstop offset='1' stop-color='%235a3a0e'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='.4' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23eaf8ff'/%3E%3Cstop offset='.35' stop-color='%234fb0ff'/%3E%3Cstop offset='1' stop-color='%23123d8a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M65.0 14.0c-10-7-22-8.5-34-4.5-6 2-12 2.2-18-.6M95.0 14.0c10-7 22-8.5 34-4.5 6 2 12 2.2 18-.6M65.0 14.0c-8 4.5-17 6.2-25 4.2M95.0 14.0c8 4.5 17 6.2 25 4.2' fill='none' stroke='%23140b02' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M65.0 14.0c-10-7-22-8.5-34-4.5-6 2-12 2.2-18-.6M95.0 14.0c10-7 22-8.5 34-4.5 6 2 12 2.2 18-.6M65.0 14.0c-8 4.5-17 6.2-25 4.2M95.0 14.0c8 4.5 17 6.2 25 4.2' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M80.0 1l15 13.0-15 13.0-15-13.0z' fill='%23140b02'/%3E%3Cpath d='M80.0 3.3l12.4 10.7-12.4 10.7-12.4-10.7z' fill='url(%23g)'/%3E%3Cpath d='M80.0 7.6l7.6 6.4-7.6 6.4-7.6-6.4z' fill='url(%23b)'/%3E%3Cpath d='M80.0 7.6l7.6 6.4h-15.2z' fill='%23fff' fill-opacity='.28'/%3E%3C/svg%3E");
  --wow-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='12' viewBox='0 0 260 12'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d9a845' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23f2d58c'/%3E%3Cstop offset='1' stop-color='%23d9a845' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.3' stop-color='%23ecc260'/%3E%3Cstop offset='.62' stop-color='%23a8742a'/%3E%3Cstop offset='1' stop-color='%235a3a0e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.4' width='260' height='1.2' fill='url(%23l)'/%3E%3Cpath d='M130.0 .5l5.5 5.5-5.5 5.5-5.5-5.5z' fill='url(%23g)' stroke='%23140b02' stroke-width='1'/%3E%3Ccircle cx='114.0' cy='6.0' r='1.8' fill='url(%23g)'/%3E%3Ccircle cx='146.0' cy='6.0' r='1.8' fill='url(%23g)'/%3E%3C/svg%3E");
  /* materials */
  --wow-stone-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.032' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .8 0 0 0 0 .86 0 0 0 1.5 -.68'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 .02 0 0 0 1.9 -.9'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23b)' opacity='0.3'/%3E%3Crect width='260' height='260' filter='url(%23a)' opacity='0.1'/%3E%3C/svg%3E");
  --wow-stone-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.032' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .8 0 0 0 0 .86 0 0 0 1.5 -.68'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 .02 0 0 0 1.9 -.9'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23b)' opacity='0.6'/%3E%3Crect width='260' height='260' filter='url(%23a)' opacity='0.3'/%3E%3C/svg%3E");
  --wow-wood-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='160'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .16' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .025 0 0 0 0 .005 0 0 0 2.6 -1.15'/%3E%3C/filter%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .3' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .7 0 0 0 0 .42 0 0 0 2 -1.12'/%3E%3C/filter%3E%3Crect width='640' height='160' filter='url(%23w)'/%3E%3Crect width='640' height='160' filter='url(%23h)' opacity='.45'/%3E%3C/svg%3E");
  --wow-parch-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.013' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .44 0 0 0 0 .27 0 0 0 0 .09 0 0 0 1.1 -.46'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7 .05' numOctaves='2' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .25 0 0 0 0 .08 0 0 0 1 -.62'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23p)'/%3E%3Crect width='320' height='320' filter='url(%23f)'/%3E%3C/svg%3E");
  --wow-horizon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='260' viewBox='0 0 1600 260'%3E%3Cdefs%3E%3ClinearGradient id='fa' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232b2757'/%3E%3Cstop offset='1' stop-color='%2317163a'/%3E%3C/linearGradient%3E%3ClinearGradient id='mi' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a1840'/%3E%3Cstop offset='1' stop-color='%230e0d24'/%3E%3C/linearGradient%3E%3ClinearGradient id='ms' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b4a8ff' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%23a89cf0' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%23a89cf0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 260l0-107 8-6 8-7 8-2 8-6 8-5 8-5 8-7 8-6 8 5 8 8 8 1 8-8 8-4 8-5 8-1 8 5 8 4 8-9 8-6 8-8 8 10 8 14 8-3 8-11 8-6 8-9 8 12 8 7 8 11 8 11 8 9 8 8 8 11 8 8 8 8 8 6 8 6 8-6 8-5 8-6 8-7 8-6 8-6 8-11 8-9 8-6 8-7 8-8 8-12 8-7 8 2 8 5 8 7 8 8 8 3 8 7 8 4 8 6 8 5 8 7 8 5 8 3 8 8 8 4 8 6 8 3 8 3 8 5 8 4 8 3 8-1 8-5 8-6 8-7 8-5 8-8 8-10 8-8 8-6 8-10 8 6 8 5 8 7 8 6 8 4 8 4 8 3 8 3 8 5 8 6 8-6 8-12 8-12 8-13 8-9 8-13 8-11 8 2 8 8 8 9 8 6 8 6 8 7 8 6 8 6 8 10 8-3 8-5 8-4 8-7 8-6 8-6 8-2 8-6 8-6 8-2 8-4 8-3 8 4 8 6 8 5 8-5 8 8 8 5 8 5 8 7 8 6 8 3 8 8 8 3 8 3 8 7 8 6 8 3 8 5 8 4 8 2 8 3 8 1 8 1 8-7 8-8 8-9 8-8 8-11 8-11 8-9 8-11 8-8 8-14 8-12 8-10 8 8 8 10 8 11 8 11 8 14 8 9 8 9 8 8 8 1 8-6 8-4 8-4 8-7 8-5 8-6 8-5 8-8 8-8 8-4 8-7 8-9 8-7 8-8 8 2 8 9 8 6 8 9 8 8 8 4 8 5 8 9 8 4 8 6 8 3 8 7 8 6 8 4 8 5 8 6 8 6 8 6 8 6 8 1 8-3 8-4 8-7 8-5 8-3 0 107z' fill='url(%23fa)'/%3E%3Cpath d='M0 153l8-6 8-7 8-2 8-6 8-5 8-5 8-7 8-6 8 5 8 8 8 1 8-8 8-4 8-5 8-1 8 5 8 4 8-9 8-6 8-8 8 10 8 14 8-3 8-11 8-6 8-9 8 12 8 7 8 11 8 11 8 9 8 8 8 11 8 8 8 8 8 6 8 6 8-6 8-5 8-6 8-7 8-6 8-6 8-11 8-9 8-6 8-7 8-8 8-12 8-7 8 2 8 5 8 7 8 8 8 3 8 7 8 4 8 6 8 5 8 7 8 5 8 3 8 8 8 4 8 6 8 3 8 3 8 5 8 4 8 3 8-1 8-5 8-6 8-7 8-5 8-8 8-10 8-8 8-6 8-10 8 6 8 5 8 7 8 6 8 4 8 4 8 3 8 3 8 5 8 6 8-6 8-12 8-12 8-13 8-9 8-13 8-11 8 2 8 8 8 9 8 6 8 6 8 7 8 6 8 6 8 10 8-3 8-5 8-4 8-7 8-6 8-6 8-2 8-6 8-6 8-2 8-4 8-3 8 4 8 6 8 5 8-5 8 8 8 5 8 5 8 7 8 6 8 3 8 8 8 3 8 3 8 7 8 6 8 3 8 5 8 4 8 2 8 3 8 1 8 1 8-7 8-8 8-9 8-8 8-11 8-11 8-9 8-11 8-8 8-14 8-12 8-10 8 8 8 10 8 11 8 11 8 14 8 9 8 9 8 8 8 1 8-6 8-4 8-4 8-7 8-5 8-6 8-5 8-8 8-8 8-4 8-7 8-9 8-7 8-8 8 2 8 9 8 6 8 9 8 8 8 4 8 5 8 9 8 4 8 6 8 3 8 7 8 6 8 4 8 5 8 6 8 6 8 6 8 6 8 1 8-3 8-4 8-7 8-5 8-3' fill='none' stroke='%23b9a9ff' stroke-opacity='.28' stroke-width='1.4'/%3E%3Crect x='0' y='120' width='1600' height='90' fill='url(%23ms)'/%3E%3Cpath d='M0 260l0-94 12 5 12 1 12-5 12-2 12 5 12 3 12 1 12 4 12 2 12 2 12 3 12-3 12-3 12-4 12-4 12-3 12-4 12 0 12 4 12 6 12 3 12 3 12 1 12-3 12-6 12-5 12-3 12 8 12 4 12 4 12-3 12 4 12 3 12 1 12 4 12 1 12-3 12 3 12 5 12 5 12 4 12 4 12 2 12 2 12 2 12 0 12 0 12 0 12-2 12-3 12-3 12-2 12-3 12-2 12-4 12-3 12-2 12-4 12-2 12-1 12 1 12 0 12 2 12 3 12 2 12 1 12 2 12 2 12 1 12 2 12 2 12 2 12 1 12 1 12 2 12 2 12 0 12-1 12-2 12-2 12-2 12-2 12-1 12-1 12-3 12-2 12 1 12 0 12 1 12 1 12 2 12 2 12 2 12 1 12 1 12 1 12 0 12-2 12-3 12-2 12-2 12-2 12-2 12-3 12-2 12 3 12 2 12 1 12 2 12 3 12 2 12 1 12 2 12-2 12-3 12-2 12-3 12-3 12-1 12-7 12-4 12-6 12-8 12-1 12 8 12 5 12 7 12-5 12-7 12-5 12-4 12-1 12 5 0 94z' fill='url(%23mi)'/%3E%3Cpath d='M0 166l12 5 12 1 12-5 12-2 12 5 12 3 12 1 12 4 12 2 12 2 12 3 12-3 12-3 12-4 12-4 12-3 12-4 12 0 12 4 12 6 12 3 12 3 12 1 12-3 12-6 12-5 12-3 12 8 12 4 12 4 12-3 12 4 12 3 12 1 12 4 12 1 12-3 12 3 12 5 12 5 12 4 12 4 12 2 12 2 12 2 12 0 12 0 12 0 12-2 12-3 12-3 12-2 12-3 12-2 12-4 12-3 12-2 12-4 12-2 12-1 12 1 12 0 12 2 12 3 12 2 12 1 12 2 12 2 12 1 12 2 12 2 12 2 12 1 12 1 12 2 12 2 12 0 12-1 12-2 12-2 12-2 12-2 12-1 12-1 12-3 12-2 12 1 12 0 12 1 12 1 12 2 12 2 12 2 12 1 12 1 12 1 12 0 12-2 12-3 12-2 12-2 12-2 12-2 12-3 12-2 12 3 12 2 12 1 12 2 12 3 12 2 12 1 12 2 12-2 12-3 12-2 12-3 12-3 12-1 12-7 12-4 12-6 12-8 12-1 12 8 12 5 12 7 12-5 12-7 12-5 12-4 12-1 12 5' fill='none' stroke='%239c8fe6' stroke-opacity='.16' stroke-width='1.2'/%3E%3Crect x='0' y='176' width='1600' height='60' fill='url(%23ms)' opacity='.7'/%3E%3Cpath d='M0 260l0-28 50 0 50 0 50 0 50 2 50-1 50 0 50-1 50-1 50-1 50-3 50 0 50-1 50 0 50 0 50 0 50-1 50 0 50 0 50 1 50 0 50 2 50 0 50 1 50 2 50 0 50-1 50 0 50-1 50 2 50 1 50 0 50 0 0 28zM17 233l7-38 7 38zM19 226l5-20 5 20zM20 237l4-20 4 20zM23 235h2v-4h-2zM20 233l7-31 7 31zM22 228l5-17 5 17zM23 236l4-16 4 16zM26 235h2v-4h-2zM37 233l4-20 4 20zM38 230l3-11 3 11zM39 236l2-11 2 11zM40 235h2v-4h-2zM48 233l3-15 3 15zM49 231l2-8 2 8zM49 236l2-9 2 9zM50 235h2v-4h-2zM72 233l6-30 6 30zM73 228l5-16 5 16zM75 236l3-16 3 16zM77 235h2v-4h-2zM93 233l6-33 6 33zM95 227l4-17 4 17zM96 236l3-17 3 17zM98 235h2v-4h-2zM95 233l5-22 5 22zM96 230l4-13 4 13zM97 236l3-12 3 12zM99 235h2v-4h-2zM136 233l5-28 5 28zM137 228l4-15 4 15zM138 236l3-15 3 15zM140 235h2v-4h-2zM140 233l5-24 5 24zM141 229l4-12 4 12zM142 236l3-13 3 13zM144 235h2v-4h-2zM142 233l5-28 5 28zM143 228l4-14 4 14zM144 236l3-15 3 15zM146 235h2v-4h-2zM146 233l6-33 6 33zM147 227l5-17 5 17zM149 236l3-17 3 17zM151 235h2v-4h-2zM157 234l4-24 4 24zM158 230l3-13 3 13zM159 237l2-13 2 13zM160 236h2v-4h-2zM169 234l5-25 5 25zM170 230l4-13 4 13zM171 237l3-13 3 13zM173 236h2v-4h-2zM185 235l3-16 3 16zM185 233l3-9 3 9zM186 238l2-9 2 9zM187 237h2v-4h-2zM186 235l4-16 4 16zM187 233l3-9 3 9zM188 238l2-9 2 9zM189 237h2v-4h-2zM202 235l3-15 3 15zM203 233l2-8 2 8zM203 238l2-9 2 9zM204 237h2v-4h-2zM226 235l6-33 6 33zM227 229l5-17 5 17zM228 238l4-17 4 17zM231 237h2v-4h-2zM243 234l6-31 6 31zM245 229l4-17 4 17zM246 237l3-16 3 16zM248 236h2v-4h-2zM255 234l6-32 6 32zM256 229l5-17 5 17zM258 237l3-17 3 17zM260 236h2v-4h-2zM281 234l4-20 4 20zM282 231l3-11 3 11zM283 237l2-11 2 11zM284 236h2v-4h-2zM324 233l4-24 4 24zM325 229l3-12 3 12zM325 236l3-13 3 13zM327 235h2v-4h-2zM327 233l6-35 6 35zM328 227l5-18 5 18zM329 236l4-18 4 18zM332 235h2v-4h-2zM339 233l5-30 5 30zM340 228l4-16 4 16zM341 236l3-16 3 16zM343 235h2v-4h-2zM382 232l6-34 6 34zM383 226l5-18 5 18zM385 235l3-18 3 18zM387 234h2v-4h-2zM430 231l3-15 3 15zM430 229l3-8 3 8zM431 234l2-9 2 9zM432 233h2v-4h-2zM432 231l4-18 4 18zM433 229l3-11 3 11zM434 234l2-10 2 10zM435 233h2v-4h-2zM449 231l7-38 7 38zM450 224l6-20 6 20zM452 235l4-20 4 20zM455 233h2v-4h-2zM469 230l3-14 3 14zM470 228l2-8 2 8zM470 233l2-8 2 8zM471 232h2v-4h-2zM597 227l4-19 4 19zM598 224l3-10 3 10zM599 230l2-11 2 11zM600 229h2v-4h-2zM603 227l6-29 6 29zM604 222l5-15 5 15zM606 230l3-15 3 15zM608 229h2v-4h-2zM606 227l4-23 4 23zM607 224l3-13 3 13zM608 230l2-12 2 12zM609 229h2v-4h-2zM612 227l5-27 5 27zM613 223l4-15 4 15zM614 230l3-15 3 15zM616 229h2v-4h-2zM637 227l3-16 3 16zM637 225l3-9 3 9zM638 230l2-9 2 9zM639 229h2v-4h-2zM669 227l5-31 5 31zM670 222l4-17 4 17zM671 230l3-16 3 16zM673 229h2v-4h-2zM672 227l5-25 5 25zM673 223l4-13 4 13zM674 230l3-13 3 13zM676 229h2v-4h-2zM676 227l6-32 6 32zM677 221l5-17 5 17zM679 230l3-17 3 17zM681 229h2v-4h-2zM719 227l6-35 6 35zM720 221l5-19 5 19zM722 230l3-18 3 18zM724 229h2v-4h-2zM736 227l6-31 6 31zM737 222l5-17 5 17zM738 230l4-16 4 16zM741 229h2v-4h-2zM780 226l7-35 7 35zM782 220l5-19 5 19zM783 229l4-18 4 18zM786 228h2v-4h-2zM792 226l3-16 3 16zM793 224l2-9 2 9zM793 229l2-9 2 9zM794 228h2v-4h-2zM799 226l5-27 5 27zM800 222l4-15 4 15zM801 229l3-14 3 14zM803 228h2v-4h-2zM805 226l5-29 5 29zM806 221l4-15 4 15zM807 229l3-15 3 15zM809 228h2v-4h-2zM857 226l6-33 6 33zM858 220l5-17 5 17zM860 229l3-17 3 17zM862 228h2v-4h-2zM882 226l3-14 3 14zM883 224l2-8 2 8zM883 229l2-9 2 9zM884 228h2v-4h-2zM882 226l5-25 5 25zM883 222l4-13 4 13zM884 229l3-13 3 13zM886 228h2v-4h-2zM920 227l4-23 4 23zM921 223l3-12 3 12zM922 230l2-13 2 13zM923 229h2v-4h-2zM920 227l5-26 5 26zM921 223l4-14 4 14zM922 230l3-14 3 14zM924 229h2v-4h-2zM936 227l6-27 6 27zM938 223l4-15 4 15zM939 230l3-14 3 14zM941 229h2v-4h-2zM949 227l3-15 3 15zM949 225l3-8 3 8zM950 230l2-9 2 9zM951 229h2v-4h-2zM960 227l7-35 7 35zM962 221l5-19 5 19zM963 230l4-18 4 18zM966 229h2v-4h-2zM966 227l5-27 5 27zM967 223l4-15 4 15zM968 230l3-14 3 14zM970 229h2v-4h-2zM977 227l6-36 6 36zM978 221l5-19 5 19zM980 231l3-19 3 19zM982 229h2v-4h-2zM1012 228l6-29 6 29zM1014 223l4-16 4 16zM1015 231l3-15 3 15zM1017 230h2v-4h-2zM1070 229l4-21 4 21zM1071 226l3-12 3 12zM1072 232l2-12 2 12zM1073 231h2v-4h-2zM1115 230l5-31 5 31zM1116 225l4-17 4 17zM1117 233l3-16 3 16zM1119 232h2v-4h-2zM1148 230l6-31 6 31zM1149 225l5-17 5 17zM1151 233l3-16 3 16zM1153 232h2v-4h-2zM1150 230l5-26 5 26zM1151 226l4-14 4 14zM1152 233l3-14 3 14zM1154 232h2v-4h-2zM1184 232l3-15 3 15zM1185 230l2-8 2 8zM1185 235l2-9 2 9zM1186 234h2v-4h-2zM1226 232l5-23 5 23zM1227 229l4-13 4 13zM1228 235l3-12 3 12zM1230 234h2v-4h-2zM1283 231l4-20 4 20zM1284 228l3-11 3 11zM1285 234l2-11 2 11zM1286 233h2v-4h-2zM1370 230l6-32 6 32zM1371 225l5-17 5 17zM1373 233l3-16 3 16zM1375 232h2v-4h-2zM1390 230l6-35 6 35zM1391 224l5-19 5 19zM1393 233l3-18 3 18zM1395 232h2v-4h-2zM1401 230l6-28 6 28zM1403 225l4-15 4 15zM1404 233l3-15 3 15zM1406 232h2v-4h-2zM1415 231l6-30 6 30zM1417 226l4-16 4 16zM1418 234l3-16 3 16zM1420 233h2v-4h-2zM1423 231l3-16 3 16zM1424 229l2-9 2 9zM1424 234l2-9 2 9zM1425 233h2v-4h-2zM1434 231l5-29 5 29zM1435 226l4-15 4 15zM1436 234l3-15 3 15zM1438 233h2v-4h-2zM1459 232l3-16 3 16zM1460 230l2-9 2 9zM1460 235l2-9 2 9zM1461 234h2v-4h-2zM1461 232l5-25 5 25zM1462 228l4-14 4 14zM1463 235l3-14 3 14zM1465 234h2v-4h-2zM1517 233l3-15 3 15zM1518 231l2-8 2 8zM1518 236l2-9 2 9zM1519 235h2v-4h-2zM1573 233l5-22 5 22zM1574 230l4-12 4 12zM1575 236l3-12 3 12zM1577 235h2v-4h-2z' fill='%2307070f'/%3E%3C/svg%3E");
  --wow-vista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='fa' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232f2a60'/%3E%3Cstop offset='1' stop-color='%23151436'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 130l0-53 5-5 5-6 5-5 5-6 5 2 5 9 5 8 5 7 5 6 5 7 5 5 5-5 5-7 5-5 5-8 5-7 5 3 5 6 5 5 5 5 5 5 5 6 5 4 5 4 5 3 5 0 5-2 5-2 5-3 5-2 5-3 5-3 5-3 5-3 5-4 5-4 5-3 5-4 5-3 5-2 5-4 5 0 5 6 5 5 5 5 5 4 5 5 5 2 5-5 5-5 5-6 5-7 5-5 5-2 5 5 5 3 5 5 5 5 5 4 5 3 5 4 5-3 5-5 5-4 0 53z' fill='url(%23fa)'/%3E%3Cpath d='M0 77l5-5 5-6 5-5 5-6 5 2 5 9 5 8 5 7 5 6 5 7 5 5 5-5 5-7 5-5 5-8 5-7 5 3 5 6 5 5 5 5 5 5 5 6 5 4 5 4 5 3 5 0 5-2 5-2 5-3 5-2 5-3 5-3 5-3 5-3 5-4 5-4 5-3 5-4 5-3 5-2 5-4 5 0 5 6 5 5 5 5 5 4 5 5 5 2 5-5 5-5 5-6 5-7 5-5 5-2 5 5 5 3 5 5 5 5 5 4 5 3 5 4 5-3 5-5 5-4' fill='none' stroke='%23c2b4ff' stroke-opacity='.3' stroke-width='1'/%3E%3Cpath d='M0 130l0-12 10 0 10-1 10 1 10 0 10 1 10 0 10 0 10 2 10 0 10-1 10 1 10 0 10-1 10 0 10-1 10-1 10 1 10 0 10 1 10 1 10 0 10 0 10 1 10 0 10 0 10-1 10 0 10 0 10-1 10 0 10-1 10-1 0 12zM30 119l3-15 3 15zM31 117l2-8 2 8zM31 122l2-9 2 9zM32 121h2v-4h-2zM36 119l3-14 3 14zM37 118l2-8 2 8zM37 122l2-8 2 8zM38 121h2v-4h-2zM42 120l2-13 2 13zM42 119l2-8 2 8zM42 123l2-8 2 8zM43 122h2v-4h-2zM41 120l4-19 4 19zM42 117l3-10 3 10zM43 123l2-11 2 11zM44 122h2v-4h-2zM56 120l3-14 3 14zM57 118l2-8 2 8zM57 123l2-8 2 8zM58 122h2v-4h-2zM60 120l4-19 4 19zM61 117l3-10 3 10zM62 123l2-11 2 11zM63 122h2v-4h-2zM66 120l4-18 4 18zM67 117l3-10 3 10zM68 123l2-10 2 10zM69 122h2v-4h-2zM74 121l3-14 3 14zM75 120l2-8 2 8zM75 124l2-8 2 8zM76 123h2v-4h-2zM76 121l3-15 3 15zM77 119l2-8 2 8zM77 124l2-9 2 9zM78 123h2v-4h-2zM81 122l2-9 2 9zM81 122l2-6 2 6zM81 124l2-5 2 5zM82 124h2v-4h-2zM92 122l3-18 3 18zM93 120l2-10 2 10zM93 125l2-10 2 10zM94 124h2v-4h-2zM102 122l2-8 2 8zM102 122l2-5 2 5zM102 124l2-4 2 4zM103 124h2v-4h-2zM128 121l2-11 2 11zM128 120l2-6 2 6zM128 124l2-7 2 7zM129 123h2v-4h-2zM128 121l3-13 3 13zM129 120l2-8 2 8zM129 124l2-8 2 8zM130 123h2v-4h-2zM167 120l4-20 4 20zM168 117l3-11 3 11zM169 123l2-11 2 11zM170 122h2v-4h-2zM195 122l2-12 2 12zM195 121l2-7 2 7zM195 125l2-8 2 8zM196 124h2v-4h-2zM225 123l3-15 3 15zM226 121l2-8 2 8zM226 126l2-9 2 9zM227 125h2v-4h-2zM234 123l3-12 3 12zM235 122l2-7 2 7zM235 126l2-7 2 7zM236 125h2v-4h-2zM246 123l2-11 2 11zM246 122l2-6 2 6zM246 126l2-7 2 7zM247 125h2v-4h-2zM245 123l3-19 3 19zM245 120l3-10 3 10zM246 126l2-11 2 11zM247 125h2v-4h-2zM248 123l2-8 2 8zM248 123l2-5 2 5zM248 125l2-5 2 5zM249 125h2v-4h-2zM253 122l3-17 3 17zM253 120l3-10 3 10zM254 125l2-10 2 10zM255 124h2v-4h-2zM262 122l2-10 2 10zM262 121l2-6 2 6zM262 124l2-6 2 6zM263 124h2v-4h-2zM269 122l2-9 2 9zM269 122l2-6 2 6zM269 124l2-5 2 5zM270 124h2v-4h-2zM280 121l2-8 2 8zM280 121l2-5 2 5zM280 123l2-4 2 4zM281 123h2v-4h-2zM281 121l4-19 4 19zM282 118l3-10 3 10zM283 124l2-10 2 10zM284 123h2v-4h-2z' fill='%2308080f'/%3E%3C/svg%3E");
  --wow-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cg id='b'%3E%3Ccircle cx='400' cy='400' r='392'/%3E%3Ccircle cx='400' cy='400' r='366'/%3E%3Ccircle cx='400' cy='400' r='296' stroke-dasharray='2 9'/%3E%3Ccircle cx='400' cy='400' r='282'/%3E%3Cpath d='M400 118L522.4 654.1L179.5 224.2L674.9 462.8L125.1 462.8L620.5 224.2L277.6 654.1Z'/%3E%3Ccircle cx='400' cy='400' r='176'/%3E%3Ccircle cx='400' cy='400' r='148'/%3E%3Cpath d='M400 252L528.2 474L271.8 474L400 252L528.2 474L271.8 474Z'/%3E%3Ccircle cx='400' cy='400' r='60'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23a9ddff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cuse href='%23b' stroke-width='7' stroke-opacity='.08'/%3E%3Cuse href='%23b' stroke-width='1.6' stroke-opacity='.7'/%3E%3Cg stroke-width='1.6' stroke-opacity='.85'%3E%3Cpath transform='rotate(0 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -2.8l7.5 4.2'/%3E%3Cpath transform='rotate(10 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -7.1l-7.5 2.4l7.5 2.4M0 -5.2l-7.5 4.2M0 2.3l-7.5 4.2'/%3E%3Cpath transform='rotate(20 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -5.2l7.5 2.4l-7.5 2.4'/%3E%3Cpath transform='rotate(30 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -5.5l-7.5 4.2M0 -7.3l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(40 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -5.4l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(50 400 400)translate(400 21)' d='M0 -7.5V7.5M0 2.1l-7.5 4.2M0 -3.3l-7.5 4.2M0 0.9l7.5 4.2'/%3E%3Cpath transform='rotate(60 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -6l7.5 4.2'/%3E%3Cpath transform='rotate(70 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -0.1l7.5 4.2'/%3E%3Cpath transform='rotate(80 400 400)translate(400 21)' d='M0 -7.5V7.5M0 0.5l7.5 4.2'/%3E%3Cpath transform='rotate(90 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -1.1l7.5 -3.3M0 -1.1l-7.5 -3.3M0 -7.1l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(100 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -1.8l7.5 -2.7l0 4.8M0 2.1l-7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(110 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -1.9l7.5 4.2'/%3E%3Cpath transform='rotate(120 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -5.6l7.5 4.2'/%3E%3Cpath transform='rotate(130 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -3.5l7.5 4.2M0 -6.4l-7.5 -2.7l0 4.8M0 -3.1l-7.5 2.4l7.5 2.4'/%3E%3Cpath transform='rotate(140 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -6.3l-7.5 4.2M0 2.1l-7.5 -2.7l0 4.8M0 -5.9l7.5 -3.3M0 -5.9l-7.5 -3.3'/%3E%3Cpath transform='rotate(150 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -2.5l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(160 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -2.6l-7.5 4.2M0 -2.6l7.5 4.2M0 -5l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(170 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -7.4l7.5 2.4l-7.5 2.4'/%3E%3Cpath transform='rotate(180 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -3l-7.5 4.2M0 -6.3l-7.5 2.4l7.5 2.4'/%3E%3Cpath transform='rotate(190 400 400)translate(400 21)' d='M0 -7.5V7.5M0 0.4l7.5 4.2'/%3E%3Cpath transform='rotate(200 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -3l7.5 4.2M0 -2.3l7.5 -2.7l0 4.8M0 -0.3l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(210 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -3.8l7.5 4.2'/%3E%3Cpath transform='rotate(220 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -0.6l-7.5 4.2M0 1l7.5 -3.3M0 1l-7.5 -3.3'/%3E%3Cpath transform='rotate(230 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -6.1l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(240 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -3.2l7.5 2.4l-7.5 2.4'/%3E%3Cpath transform='rotate(250 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -5.1l7.5 4.2M0 -7.2l7.5 -2.7l0 4.8M0 -2.1l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(260 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -3.5l7.5 -3.3M0 -3.5l-7.5 -3.3'/%3E%3Cpath transform='rotate(270 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -5.5l-7.5 -2.7l0 4.8M0 -4l7.5 4.2M0 0.2l-7.5 4.2'/%3E%3Cpath transform='rotate(280 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -0.6l7.5 -3.3M0 -0.6l-7.5 -3.3M0 1.9l7.5 4.2M0 -3.3l7.5 -3.3M0 -3.3l-7.5 -3.3'/%3E%3Cpath transform='rotate(290 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -4.5l7.5 4.2'/%3E%3Cpath transform='rotate(300 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -4.7l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(310 400 400)translate(400 21)' d='M0 -7.5V7.5M0 1.4l-7.5 2.4l7.5 2.4M0 -4.4l-7.5 4.2'/%3E%3Cpath transform='rotate(320 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -6.1l7.5 4.2M0 -0.8l-7.5 4.2M0 -3.8l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(330 400 400)translate(400 21)' d='M0 -7.5V7.5M0 -2.8l7.5 -2.7l0 4.8M0 0.4l7.5 4.2M0 -2l7.5 -3.3M0 -2l-7.5 -3.3'/%3E%3Cpath transform='rotate(340 400 400)translate(400 21)' d='M0 -7.5V7.5M0 0.7l-7.5 4.2'/%3E%3Cpath transform='rotate(350 400 400)translate(400 21)' d='M0 -7.5V7.5M0 1l7.5 -2.7l0 4.8'/%3E%3Cpath transform='rotate(0 400 400)translate(400 238)' d='M0 -6V6M0 -3.4l-6 3.4M0 0.6l-6 -2.2l0 3.8'/%3E%3Cpath transform='rotate(20 400 400)translate(400 238)' d='M0 -6V6M0 1.6l-6 3.4M0 -1.6l-6 -2.2l0 3.8'/%3E%3Cpath transform='rotate(40 400 400)translate(400 238)' d='M0 -6V6M0 0.7l6 3.4'/%3E%3Cpath transform='rotate(60 400 400)translate(400 238)' d='M0 -6V6M0 -1.9l6 3.4'/%3E%3Cpath transform='rotate(80 400 400)translate(400 238)' d='M0 -6V6M0 -3.4l-6 1.9l6 1.9M0 0.2l6 3.4'/%3E%3Cpath transform='rotate(100 400 400)translate(400 238)' d='M0 -6V6M0 -4.5l-6 3.4'/%3E%3Cpath transform='rotate(120 400 400)translate(400 238)' d='M0 -6V6M0 -1.5l6 1.9l-6 1.9M0 -0.4l-6 3.4M0 0.7l-6 -2.2l0 3.8'/%3E%3Cpath transform='rotate(140 400 400)translate(400 238)' d='M0 -6V6M0 -5.2l6 3.4'/%3E%3Cpath transform='rotate(160 400 400)translate(400 238)' d='M0 -6V6M0 1.8l6 -2.6M0 1.8l-6 -2.6M0 -1l-6 -2.2l0 3.8M0 1.5l6 -2.6M0 1.5l-6 -2.6'/%3E%3Cpath transform='rotate(180 400 400)translate(400 238)' d='M0 -6V6M0 1.6l-6 3.4M0 -1.4l6 3.4M0 0.1l6 3.4'/%3E%3Cpath transform='rotate(200 400 400)translate(400 238)' d='M0 -6V6M0 -5.6l-6 -2.2l0 3.8'/%3E%3Cpath transform='rotate(220 400 400)translate(400 238)' d='M0 -6V6M0 -5.1l6 3.4M0 -0.8l-6 3.4'/%3E%3Cpath transform='rotate(240 400 400)translate(400 238)' d='M0 -6V6M0 -1.8l6 -2.6M0 -1.8l-6 -2.6M0 1.3l6 1.9l-6 1.9'/%3E%3Cpath transform='rotate(260 400 400)translate(400 238)' d='M0 -6V6M0 -5.5l6 3.4'/%3E%3Cpath transform='rotate(280 400 400)translate(400 238)' d='M0 -6V6M0 -0.4l-6 3.4'/%3E%3Cpath transform='rotate(300 400 400)translate(400 238)' d='M0 -6V6M0 1.4l6 -2.6M0 1.4l-6 -2.6M0 1.8l-6 3.4M0 -4.1l-6 3.4'/%3E%3Cpath transform='rotate(320 400 400)translate(400 238)' d='M0 -6V6M0 -4.7l-6 3.4'/%3E%3Cpath transform='rotate(340 400 400)translate(400 238)' d='M0 -6V6M0 -0.6l6 1.9l-6 1.9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --wow-card-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cg id='b'%3E%3Ccircle cx='100' cy='100' r='92'/%3E%3Ccircle cx='100' cy='100' r='84' stroke-dasharray='1.5 5'/%3E%3Ccircle cx='100' cy='100' r='70'/%3E%3Cpath d='M100 30L130.4 163.1L45.3 56.4L168.2 115.6L31.8 115.6L154.7 56.4L69.6 163.1Z'/%3E%3Ccircle cx='100' cy='100' r='34'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23e6c071' stroke-linecap='round' stroke-linejoin='round'%3E%3Cuse href='%23b' stroke-width='4' stroke-opacity='.12'/%3E%3Cuse href='%23b' stroke-width='1.1' stroke-opacity='.6'/%3E%3Cg stroke-width='1.1' stroke-opacity='.7'%3E%3Cpath transform='rotate(0 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -2.3l3.5 1.1l-3.5 1.1M0 -3.4l3.5 2M0 -0.5l-3.5 2'/%3E%3Cpath transform='rotate(22.5 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -1.3l3.5 -1.5M0 -1.3l-3.5 -1.5M0 -1l-3.5 2'/%3E%3Cpath transform='rotate(45 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -2.5l3.5 2M0 0.8l3.5 2M0 0.1l-3.5 2'/%3E%3Cpath transform='rotate(67.5 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -0.6l-3.5 2M0 -3.5l-3.5 2M0 0.1l-3.5 2'/%3E%3Cpath transform='rotate(90 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -2l-3.5 1.1l3.5 1.1M0 0.6l-3.5 2'/%3E%3Cpath transform='rotate(112.5 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -2.6l3.5 -1.3l0 2.2M0 -3.4l3.5 2M0 0.9l3.5 2'/%3E%3Cpath transform='rotate(135 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -2.1l-3.5 1.1l3.5 1.1M0 -0.3l3.5 2'/%3E%3Cpath transform='rotate(157.5 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -1.8l3.5 -1.5M0 -1.8l-3.5 -1.5M0 -0.3l3.5 -1.5M0 -0.3l-3.5 -1.5'/%3E%3Cpath transform='rotate(180 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -0.2l-3.5 -1.3l0 2.2M0 1.1l-3.5 -1.3l0 2.2'/%3E%3Cpath transform='rotate(202.5 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -3.4l3.5 -1.3l0 2.2M0 -1.7l3.5 -1.5M0 -1.7l-3.5 -1.5'/%3E%3Cpath transform='rotate(225 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -0.2l-3.5 2'/%3E%3Cpath transform='rotate(247.5 100 100)translate(100 23)' d='M0 -3.5V3.5M0 0.8l3.5 -1.3l0 2.2'/%3E%3Cpath transform='rotate(270 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -1.8l3.5 -1.5M0 -1.8l-3.5 -1.5M0 -3l3.5 -1.3l0 2.2M0 -3.3l-3.5 2'/%3E%3Cpath transform='rotate(292.5 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -1.1l3.5 2M0 -1.9l-3.5 -1.3l0 2.2'/%3E%3Cpath transform='rotate(315 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -2l-3.5 2M0 -0.6l3.5 -1.5M0 -0.6l-3.5 -1.5M0 -2.7l-3.5 2'/%3E%3Cpath transform='rotate(337.5 100 100)translate(100 23)' d='M0 -3.5V3.5M0 -1l3.5 2M0 -2.4l3.5 -1.3l0 2.2M0 -1.4l3.5 2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --wow-slate: linear-gradient(180deg, #1f2231 0%, #171a25 55%, #11131b 100%);
  --wow-sheen: radial-gradient(120% 70% at 50% 0%, rgba(130, 160, 255, .075), transparent 62%);
  --wow-vignette: radial-gradient(150% 120% at 50% 30%, transparent 55%, rgba(0, 0, 0, .42) 100%);
  --wow-wood: linear-gradient(180deg, #3e2817 0%, #2c1c0f 52%, #1d1209 100%);
  --wow-tooltip: linear-gradient(180deg, rgba(16, 22, 50, .97) 0%, rgba(7, 10, 27, .97) 100%);
  --wow-parch: radial-gradient(130% 115% at 50% 45%, transparent 58%, rgba(112, 64, 16, .4) 100%), var(--wow-parch-tex) 0 0 / 320px 320px, linear-gradient(172deg, #f3e5c0 0%, #e8d3a3 48%, #dcc28c 100%);
  --wow-red: linear-gradient(180deg, #cf341d 0%, #9c170b 38%, #6c0c05 64%, #430603 100%);
  --wow-red-hot: linear-gradient(180deg, #ee4a2a 0%, #bf2010 38%, #861006 64%, #520804 100%);
  --wow-lit: radial-gradient(120% 150% at 50% 120%, rgba(255, 200, 60, .45), rgba(255, 170, 30, .08) 55%, transparent 76%), linear-gradient(180deg, #2c2f3e, #161821);
  --wow-stud: #fff1c0 0 1.1px, #d9a845 1.8px, #6b4513 2.8px, #120a02 3.4px, transparent 3.9px;
  --wow-studs: radial-gradient(circle at 8px 8px, var(--wow-stud)), radial-gradient(circle at calc(100% - 8px) 8px, var(--wow-stud)), radial-gradient(circle at 8px calc(100% - 8px), var(--wow-stud)), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--wow-stud));
  --wow-frame-shadow: 0 0 0 1px #060402, inset 0 0 0 1px rgba(0, 0, 0, .72), inset 0 0 0 2px rgba(255, 222, 150, .09), inset 0 2px 18px rgba(0, 0, 0, .35), 0 18px 38px -18px #000;
  --wow-tip-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(150, 180, 255, .08), 0 14px 32px -12px rgba(0, 0, 0, .95);
  --wow-moon-at: 80% 32%;
  --wow-moon-r: 26px;
  --wow-key: var(--grain), linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 45%), linear-gradient(180deg, #3c4050 0%, #2a2d39 55%, #1d1f28 100%);
  --wow-key-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 3px rgba(0, 0, 0, .45), 0 0 0 1px #050302, 0 2px 4px rgba(0, 0, 0, .6);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4c6'/%3E%3Cstop offset='.45' stop-color='%23e8b552'/%3E%3Cstop offset='1' stop-color='%237a4e12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 2v17.4l4.7-4.3 3.2 6.9 3.2-1.5-3.1-6.6h6.4z' fill='url(%23g)' stroke='%231c0f02' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M4.8 6v9.4l2.4-2.2' fill='none' stroke='%23fff8dc' stroke-opacity='.8' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='7.4' cy='10.6' r='1.7' fill='%23d8261a' stroke='%233a0603' stroke-width='.7'/%3E%3C/svg%3E") 3 2, auto;

  /* ---------- the sky: twilight over the mountains ---------- */

  & .space-bg {
    background:
      radial-gradient(ellipse 80% 40% at 55% 104%, rgba(255, 128, 72, .2), transparent 70%),
      radial-gradient(ellipse 60% 50% at 8% 104%, rgba(190, 70, 160, .2), transparent 70%),
      var(--grain),
      linear-gradient(180deg, #04050d 0%, #0a0f2e 34%, #18194a 62%, #32204f 82%, #4b2549 100%);
  }
  /* the mountains and the pine wood going dark at the foot of the screen */
  & .space-bg::after { left: 0; right: 0; bottom: 0; height: 260px; background: var(--wow-horizon) 50% 100% / 1600px 260px repeat-x; }
  /* the aurora: soft veils of green, blue and violet... */
  & .space-bg .nebula {
    inset: -12% -12% 28% -12%;
    filter: blur(18px);
    background:
      radial-gradient(46% 15% at 30% 32%, rgba(70, 255, 190, .24), transparent 70%),
      radial-gradient(36% 11% at 52% 24%, rgba(110, 200, 255, .17), transparent 70%),
      radial-gradient(40% 17% at 15% 42%, rgba(170, 100, 255, .19), transparent 70%),
      radial-gradient(28% 9% at 70% 36%, rgba(80, 255, 170, .09), transparent 70%);
    transform-origin: 30% 30%;
    animation: wow-aurora 30s ease-in-out infinite alternate;
  }
  /* ...and the curtains hanging from them */
  & .space-bg .grid-floor {
    inset: 3% -12% auto -12%;
    height: 48%;
    background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(110, 255, 200, .1) 22px 25px, transparent 25px 39px, rgba(160, 125, 255, .08) 39px 41px);
    background-size: auto;
    transform: skewX(-16deg);
    transform-origin: 50% 0;
    -webkit-mask-image: radial-gradient(44% 34% at 33% 44%, #000, transparent 75%);
    mask-image: radial-gradient(44% 34% at 33% 44%, #000, transparent 75%);
    filter: blur(1.5px);
    opacity: .8;
    animation: wow-curtain 20s ease-in-out infinite alternate;
  }
  & .space-bg .stars-1 { background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #ffe9b8, transparent), radial-gradient(1.3px 1.3px at 200px 160px, #d8e6ff, transparent), radial-gradient(1px 1px at 300px 40px, #fff, transparent), radial-gradient(1.2px 1.2px at 380px 220px, #cfe0ff, transparent); opacity: .7; animation: drift 240s linear infinite, wow-twinkle 4.5s ease-in-out infinite alternate; }
  & .space-bg .stars-2 { background-image: radial-gradient(1.6px 1.6px at 60px 120px, #fff8e0, transparent), radial-gradient(1.5px 1.5px at 260px 60px, #bfe1ff, transparent), radial-gradient(1.6px 1.6px at 420px 300px, #fff, transparent); opacity: .55; animation: drift 180s linear infinite, wow-twinkle 6.5s ease-in-out -2s infinite alternate; }
  & .space-bg .stars-3 { background-image: radial-gradient(2.4px 2.4px at 140px 200px, #fff, transparent), radial-gradient(2px 2px at 520px 90px, #ffe7b0, transparent), radial-gradient(6px 6px at 140px 200px, rgba(170, 210, 255, .25), transparent); opacity: .45; animation: drift 120s linear infinite, wow-twinkle 8s ease-in-out -4s infinite alternate; }

  /* ---------- top bar: a slab of carved stone over a band of gold, a sapphire clasp at its heart ---------- */

  & .topbar {
    background:
      linear-gradient(180deg, transparent 0 5px, rgba(0, 0, 0, .42) 5px 6px, rgba(255, 255, 255, .1) 6px 7px, transparent 7px calc(100% - 9px), rgba(0, 0, 0, .42) calc(100% - 9px) calc(100% - 8px), rgba(255, 255, 255, .08) calc(100% - 8px) calc(100% - 7px), transparent calc(100% - 7px)),
      repeating-linear-gradient(90deg, transparent 0 238px, rgba(0, 0, 0, .4) 238px 239px, rgba(255, 255, 255, .07) 239px 240px),
      var(--grain),
      var(--wow-stone-mid) 0 0 / 260px 260px,
      linear-gradient(180deg, rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, .32) 100%),
      linear-gradient(180deg, #4b4f5c 0%, #363946 50%, #252731 100%);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .55), 0 16px 32px -14px #000;
    backdrop-filter: none;
  }
  & .topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 12px);
    height: 30px;
    pointer-events: none;
    background:
      var(--wow-clasp) 50% 3px / 140px 24px no-repeat,
      linear-gradient(180deg, #120a02 0 1px, #fff0b8 1px, #e9bd5c 2.5px, #a8742a 4px, #4f330c 5.5px, #0a0602 6.5px, transparent 7px) 0 12px / 100% 8px no-repeat;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .75));
  }
  & .brand-word { font-family: var(--title); font-weight: 700; font-size: 1.24rem; letter-spacing: .05em; text-transform: none; color: transparent; background: var(--wow-gold-text); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 1px #000); }
  & .brand-word b { font-weight: 700; color: #a8dcff; text-shadow: 0 0 10px rgba(80, 170, 255, .85); }
  & .brand-mark #bm-a stop:first-child { stop-color: #fff0b8; }
  & .brand-mark #bm-a stop:last-child { stop-color: #b8862c; }
  & .brand-mark #bm-b stop:first-child { stop-color: #eaf8ff; }
  & .brand-mark #bm-b stop:last-child { stop-color: #4fb0ff; }
  & .brand-mark rect:last-of-type { fill: #1a1d28; }
  & :is(.topnav-link, .cn-link) { border-radius: 6px; font-family: var(--display); font-weight: 400; letter-spacing: .03em; color: #e8dab6; text-shadow: var(--wow-ink-shadow); }
  & .topnav-link { font-size: .96rem; }
  & .cn-link { font-size: .86rem; padding-inline: .62rem; }
  & :is(.topnav-link, .cn-link):hover { background: radial-gradient(closest-side, rgba(255, 209, 0, .16), transparent); color: #ffd100; }
  & :is(.topnav-link.active, .cn-link.is-on) { background: var(--wow-lit); color: #ffd100; text-shadow: 0 0 10px rgba(255, 190, 40, .7), 0 1px 0 #000; box-shadow: inset 0 0 0 1px #d4a64a, inset 0 0 0 2px rgba(0, 0, 0, .55), 0 0 14px -5px rgba(255, 190, 40, .8); }
  & .search-trigger { border-radius: 6px; border-color: rgba(214, 170, 72, .5); background: var(--wow-tooltip); color: #b7a985; font-family: var(--display); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .06); }
  & .search-trigger:hover { border-color: #e0b04e; color: #ffd100; }
  & .user-chip:hover { background: var(--wow-tooltip); border-color: rgba(214, 170, 72, .5); }
  & .user-name { font-family: var(--display); font-weight: 400; font-size: .96rem; text-shadow: var(--wow-ink-shadow); }
  & .live-pill { border-radius: 6px; border-color: #d4a64a; background: var(--grain), linear-gradient(180deg, #8c160c, #4a0604); color: #ffe2d6; box-shadow: inset 0 1px 0 rgba(255, 200, 180, .25), 0 0 0 1px #000, 0 0 16px -4px rgba(255, 59, 42, .75); }
  & .live-pill:hover { background: var(--grain), linear-gradient(180deg, #a81c10, #5a0806); }
  & .live-label { font-family: var(--display); }

  /* ---------- surfaces ---------- */

  /* windows: dark slate in a gold frame, a ruby set in every corner */
  & :is(.panel, .stat-tile, .forum, .kill-tally, .sheet-section, .intel-editor, .passengers, .nb-sheet, .debts, .gm-hand, .session-log, .inspector) {
    border: 3px solid transparent;
    border-radius: 9px;
    border-image: var(--wow-frame);
    background: var(--grain) padding-box, var(--wow-sheen) padding-box, var(--wow-stone-soft) 0 0 / 260px 260px padding-box, var(--wow-vignette) padding-box, var(--wow-slate) padding-box, var(--wow-gold) border-box;
    box-shadow: var(--wow-frame-shadow);
    backdrop-filter: none;
  }
  & .inspector { border-image: var(--wow-frame-blue); box-shadow: var(--wow-frame-shadow), 0 0 60px -20px rgba(255, 190, 60, .3); }
  /* bars: dark oak planks trimmed in gold */
  & :is(.campaign-nav, .table-head, .shop-bar, .crew-summary) {
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--grain) padding-box, linear-gradient(180deg, rgba(255, 225, 170, .1), transparent 38%, rgba(0, 0, 0, .32)) padding-box, var(--wow-wood-tex) 0 0 / 640px 160px padding-box, var(--wow-wood) padding-box, var(--wow-gold) border-box;
    box-shadow: 0 0 0 1px #060402, inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 230, 180, .06), 0 12px 28px -14px #000;
    backdrop-filter: none;
  }
  /* small fittings: slate with a thin gold edge */
  & :is(.hp-widget, .loyalty, .retinue, .crew-posts, .station, .budget, .enc, .infobox, .nb-toc, .atlas-tree) {
    border: 2px solid transparent;
    border-radius: 7px;
    background: var(--grain) padding-box, var(--wow-sheen) padding-box, var(--wow-slate) padding-box, var(--wow-gold) border-box;
    box-shadow: 0 0 0 1px #060402, inset 0 0 0 1px rgba(0, 0, 0, .65), 0 10px 24px -14px #000;
    backdrop-filter: none;
  }
  /* tooltips: deep blue-black, a thin gold edge */
  & :is(.menu, .palette, .toast, .dock-pill, .web-hint) { border-color: #a8843a; background: var(--grain), var(--wow-tooltip); box-shadow: var(--wow-tip-shadow); backdrop-filter: none; }
  & :is(.menu, .web-hint) { border-radius: 6px; }
  & .palette { border-radius: 8px; box-shadow: var(--wow-tip-shadow), 0 0 44px -12px rgba(255, 190, 40, .4); }
  /* these keep their colored edges (vote tone, card kind, who wrote it) */
  & :is(.vote-card, .offer-card, .bug-card, .room-card) { border-radius: 9px; background: var(--grain), var(--wow-studs), var(--wow-sheen), var(--wow-stone-soft) 0 0 / 260px 260px, var(--wow-vignette), var(--wow-slate); }
  & .treasury { border-radius: 9px; background: var(--grain), var(--wow-studs), radial-gradient(ellipse at 0% 0%, rgba(255, 209, 0, .2), transparent 60%), linear-gradient(180deg, rgba(255, 225, 170, .08), transparent 40%, rgba(0, 0, 0, .3)), var(--wow-wood-tex) 0 0 / 640px 160px, var(--wow-wood); box-shadow: 0 0 0 1px #060402, inset 0 0 0 1px rgba(0, 0, 0, .55), 0 18px 38px -18px #000; }
  & :is(.intel-fact, .faction-ties, .inv-row, .ware, .faction-row, .session-row, .deck-box, .mini-row, .debt-row, .known-row, .payroll-row, .trait-row, .hb-row, .template-list li, .rep-individuals .rep, .choice, .acquaint, .web-item, .web-detail) { background: var(--grain), var(--wow-sheen), var(--wow-slate); border-radius: 7px; }
  & :is(.toast, .dock-pill) { border-radius: 7px; }

  /* parchment: the things you read are quest scrolls, inked in brown */
  & :is(.recap, .wiki-section, .nb-page, .hb-entry, .note, .journal-entry, .log-list > li) {
    --text: #2c1c0b;
    --text-2: #4d3720;
    --muted: #6a5034;
    --line: rgba(92, 58, 20, .24);
    --line-2: rgba(92, 58, 20, .44);
    --panel: rgba(120, 78, 28, .07);
    --panel-2: rgba(120, 78, 28, .1);
    --panel-hover: rgba(120, 78, 28, .13);
    --accent: #9b2412;
    --accent-2: #4a2c84;
    --accent-ink: #fff4dc;
    --gold: #7a5000;
    --success: #23720f;
    --danger: #a3170a;
    --warning: #994a00;
    --live: #b81d0e;
    --wow-heading: #5a2408;
    --wow-label: #6b471c;
    --wow-ink-shadow: 0 1px 0 rgba(255, 246, 222, .55);
    color: var(--text);
  }
  & :is(.recap, .wiki-section, .nb-page, .hb-entry) { border-radius: 6px; background: var(--wow-parch); box-shadow: inset 0 0 0 1px rgba(255, 246, 220, .4), inset 0 0 30px rgba(110, 64, 16, .25), 0 0 0 1px #2a1806, 0 0 0 3px rgba(201, 154, 60, .45), 0 0 0 4px #120a02, 0 18px 36px -18px #000; }
  & :is(.note, .journal-entry, .log-list > li) { border-radius: 5px; background: var(--wow-parch); box-shadow: inset 0 0 0 1px rgba(255, 246, 220, .35), inset 0 0 16px rgba(110, 64, 16, .22), 0 0 0 1px rgba(30, 18, 4, .7), 0 3px 8px -3px rgba(0, 0, 0, .75); }
  & .note.is-private { background: repeating-linear-gradient(135deg, rgba(92, 58, 20, .05) 0 10px, transparent 10px 20px), var(--wow-parch); }
  & .log-list > li { border-color: rgba(70, 42, 12, .5); }
  & .wiki-section h2 { color: color-mix(in oklab, var(--kind) 32%, #2a1204); text-shadow: var(--wow-ink-shadow); }
  & :is(.recap, .wiki-section, .nb-page, .hb-entry, .note, .journal-entry, .log-list > li) :is(.wiki-entry .icon, .mini-row .icon) { color: color-mix(in oklab, var(--kind) 55%, #2a1204); }
  & :is(.recap, .nb-page, .hb-entry) :is(h2, h3) { color: var(--wow-heading); text-shadow: var(--wow-ink-shadow); }
  & :is(.recap, .wiki-section, .nb-page, .hb-entry, .note, .journal-entry, .log-list > li) .chip { color: var(--text-2); background: rgba(92, 58, 20, .09); border-color: rgba(92, 58, 20, .34); }
  & :is(.recap, .wiki-section, .nb-page, .hb-entry, .note, .journal-entry, .log-list > li) :is(.act-death span) { color: #8a1008; }
  /* dark things set on a page keep the dark palette */
  & :is(.game-card, .md-editor, .seg, .menu, .modal, .palette, .toast, .vtt-panel) {
    --text: var(--wow-d-text);
    --text-2: var(--wow-d-text-2);
    --muted: var(--wow-d-muted);
    --line: var(--wow-d-line);
    --line-2: var(--wow-d-line-2);
    --panel: var(--wow-d-panel);
    --panel-2: var(--wow-d-panel-2);
    --panel-hover: var(--wow-d-hover);
    --accent: #ffd100;
    --accent-2: #5ab4ff;
    --accent-ink: #1f1302;
    --gold: #ffd100;
    --success: #1eff00;
    --danger: #ff4a36;
    --warning: #ff8000;
    --live: #ff3b2a;
    --wow-heading: #f6cb55;
    --wow-label: #cfae63;
    --wow-ink-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .85);
    color: var(--text);
  }
  & .md-editor { background: #0b0c12; border-color: rgba(214, 170, 72, .4); }

  /* ---------- the campaign banner: a window on the twilight, framed in gold and sapphire ---------- */

  & .campaign-hero {
    border: 3px solid transparent;
    border-radius: 12px;
    border-image: var(--wow-frame-blue);
    box-shadow: 0 0 0 1px #050302, inset 0 0 0 1px rgba(0, 0, 0, .65), inset 0 0 80px rgba(0, 0, 0, .5), 0 0 50px -20px rgba(255, 190, 60, .3), var(--shadow-lg);
    background:
      var(--wow-clasp) 50% 0 / 150px 26px no-repeat border-box,
      linear-gradient(180deg, rgba(5, 6, 16, 0) 25%, rgba(5, 6, 16, .78)) padding-box,
      var(--cover, radial-gradient(circle at var(--wow-moon-at), #fbf6e4 0 var(--wow-moon-r), rgba(251, 246, 228, 0) calc(var(--wow-moon-r) + 1px)) padding-box,
        radial-gradient(circle at var(--wow-moon-at), rgba(236, 230, 255, .3), rgba(190, 200, 255, .08) calc(var(--wow-moon-r) * 3), transparent calc(var(--wow-moon-r) * 7)) padding-box,
        var(--wow-horizon) 50% 100% / 1500px 244px repeat-x padding-box,
        radial-gradient(50% 30% at 28% 30%, rgba(70, 255, 190, .16), transparent 70%) padding-box,
        radial-gradient(40% 26% at 50% 22%, rgba(150, 110, 255, .14), transparent 70%) padding-box,
        linear-gradient(180deg, #060918 0%, #111943 45%, #2a1f52 76%, #48264f 100%)) center / cover no-repeat padding-box,
      var(--wow-gold) border-box;
  }
  & .campaign-hero .tagline { color: #eadcb8; text-shadow: 0 1px 0 #000, 0 0 12px rgba(0, 0, 0, .8); }
  & .ct-art { background-image: radial-gradient(circle at 80% 30%, #fbf6e4 0 8px, rgba(251, 246, 228, 0) 9px), radial-gradient(circle at 80% 30%, rgba(236, 230, 255, .32), transparent 46px), radial-gradient(circle at 24% 18%, color-mix(in oklab, var(--me) 30%, transparent), transparent 62%), var(--wow-vista), linear-gradient(180deg, #060918, #17194a 55%, #3e2650); }
  & :is(.campaign-tile, .store-tile) { border: 2px solid transparent; border-radius: 9px; border-image: var(--wow-frame); background: var(--grain) padding-box, var(--wow-sheen) padding-box, var(--wow-slate) padding-box, var(--wow-gold) border-box; box-shadow: var(--wow-frame-shadow); }
  & .campaign-tile:hover { box-shadow: var(--wow-frame-shadow), 0 0 40px -12px color-mix(in oklab, var(--me) 70%, #ffbf3c); }
  & .store-tile:hover { box-shadow: var(--wow-frame-shadow), 0 0 34px -12px rgba(255, 190, 40, .6); }
  & .campaign-tile-new { border: 2px dashed rgba(214, 170, 72, .4); border-image: none; background: rgba(8, 7, 12, .45); box-shadow: none; }
  & .campaign-tile-new:hover { border-color: #ffd100; box-shadow: 0 0 30px -12px rgba(255, 190, 40, .6); }
  & .campaign-tile-new b { font-family: var(--display); font-weight: 400; }
  & .ct-body h3 { font-weight: 400; }
  & .ct-body .system-badge { justify-self: start; }
  & .ct-live { border-radius: 5px; border: 1px solid #d4a64a; background: linear-gradient(180deg, #8c160c, #4a0604); font-family: var(--display); }
  & .live-banner { border: 2px solid transparent; border-radius: 9px; background: var(--grain) padding-box, radial-gradient(ellipse at 0% 50%, rgba(255, 59, 42, .4), transparent 60%) padding-box, linear-gradient(90deg, #3e0907, #1c0806 60%, #120a14) padding-box, var(--wow-gold) border-box; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 40px -14px rgba(255, 59, 42, .8); }
  & .live-banner b { font-weight: 400; color: #ffe9b0; text-shadow: var(--wow-ink-shadow); }
  & .campaign-name { font-family: var(--title); font-weight: 700; letter-spacing: .02em; color: transparent; background: var(--wow-gold-text); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000); }
  & .notebook-link { border-radius: 6px; border-color: rgba(214, 170, 72, .5); background: var(--wow-tooltip); color: #e8dab6; font-family: var(--display); font-weight: 400; }
  & .notebook-link:hover { border-color: #e0b04e; color: #ffd100; }
  & .notebook-link.is-on { background: var(--wow-lit); color: #ffd100; border-color: #d4a64a; }

  /* ---------- windows that open: a frame set with sapphires, a title bar of oak ---------- */

  & .modal {
    border: 3px solid transparent;
    border-radius: 10px;
    border-image: var(--wow-frame-blue);
    background: var(--grain) padding-box, var(--wow-sheen) padding-box, var(--wow-stone-soft) 0 0 / 260px 260px padding-box, var(--wow-vignette) padding-box, linear-gradient(180deg, #1d2030, #12141c) padding-box, var(--wow-gold) border-box;
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 60px -20px rgba(255, 190, 60, .35), var(--shadow-lg);
  }
  & :is(.modal, .prompt-sheet) { animation: wow-open .34s cubic-bezier(.2, .8, .2, 1); }
  & .modal-head { position: relative; padding-top: 1.15rem; background: linear-gradient(180deg, rgba(255, 225, 170, .07), transparent 60%, rgba(0, 0, 0, .25)), var(--wow-wood-tex) 0 0 / 640px 160px, linear-gradient(180deg, rgba(62, 40, 23, .9), rgba(29, 18, 9, .9)); border-bottom: 0; border-radius: 7px 7px 0 0; }
  & .modal-head::before { content: ""; position: absolute; left: 50%; top: -15px; width: 150px; height: 26px; transform: translateX(-50%); background: var(--wow-clasp) center / contain no-repeat; pointer-events: none; }
  & .modal-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; background: var(--wow-divider) center / 260px 12px no-repeat, linear-gradient(90deg, transparent, rgba(214, 170, 72, .5) 20%, rgba(214, 170, 72, .5) 80%, transparent) 0 50% / 100% 1px no-repeat; pointer-events: none; }
  & .modal-head h2 { font-family: var(--title); font-weight: 700; font-size: 1.16rem; letter-spacing: .02em; color: transparent; background: var(--wow-gold-text); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000); }
  & .modal-body { padding-top: 1.2rem; }
  & .modal-foot { border-top-color: rgba(214, 170, 72, .22); background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .1)); border-radius: 0 0 7px 7px; }

  /* ---------- buttons: rounded, beveled, red and gold ---------- */

  & .btn { border: 1.5px solid transparent; border-radius: 8px; background: linear-gradient(180deg, rgba(255, 210, 170, .26), rgba(255, 210, 170, 0) 48%) padding-box, var(--wow-red) padding-box, var(--wow-gold) border-box; color: #ffd100; font-family: var(--display); font-weight: 400; letter-spacing: .03em; text-shadow: 0 1px 0 #000, 0 0 2px #000; box-shadow: inset 0 1px 0 rgba(255, 220, 190, .32), inset 0 -2px 3px rgba(0, 0, 0, .45), 0 0 0 1px #120703, 0 2px 4px rgba(0, 0, 0, .6); }
  & .btn:hover { background: linear-gradient(180deg, rgba(255, 220, 180, .34), rgba(255, 210, 170, 0) 48%) padding-box, var(--wow-red-hot) padding-box, linear-gradient(180deg, #fff6d0, #e9bd5c 45%, #b8862c) border-box; border-color: transparent; color: #fff3c0; box-shadow: inset 0 1px 0 rgba(255, 230, 200, .4), inset 0 -2px 3px rgba(0, 0, 0, .4), 0 0 0 1px #120703, 0 0 16px -4px rgba(255, 160, 40, .75); }
  & .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .65), 0 0 0 1px #120703; }
  & .btn-primary { background: linear-gradient(180deg, rgba(255, 225, 180, .34), rgba(255, 210, 170, 0) 48%) padding-box, var(--wow-red-hot) padding-box, linear-gradient(180deg, #fff6d0, #f2c85e 40%, #b8862c 75%, #fff0b8) border-box; color: #ffe46a; box-shadow: inset 0 1px 0 rgba(255, 230, 200, .4), inset 0 -2px 3px rgba(0, 0, 0, .4), 0 0 0 1px #120703, 0 0 18px -5px rgba(255, 180, 40, .85); }
  & .btn-primary:hover { filter: brightness(1.1); background: linear-gradient(180deg, rgba(255, 225, 180, .38), rgba(255, 210, 170, 0) 48%) padding-box, var(--wow-red-hot) padding-box, linear-gradient(180deg, #fffbe6, #ffd76a 40%, #c9952f 75%, #fff4c8) border-box; color: #fff6c8; }
  & .btn-success { background: linear-gradient(180deg, rgba(220, 255, 200, .2), transparent 48%) padding-box, linear-gradient(180deg, #2a7a12 0%, #165208 45%, #0b3304 100%) padding-box, var(--wow-gold) border-box; color: #d6ffb8; }
  & .btn-success:hover { background: linear-gradient(180deg, rgba(220, 255, 200, .26), transparent 48%) padding-box, linear-gradient(180deg, #379a19 0%, #1e6a0c 45%, #0f4206 100%) padding-box, var(--wow-gold) border-box; color: #f2ffe6; box-shadow: inset 0 1px 0 rgba(220, 255, 200, .3), 0 0 0 1px #120703, 0 0 16px -4px rgba(30, 255, 0, .55); }
  & .btn-danger { background: linear-gradient(180deg, rgba(255, 120, 90, .14), transparent 50%) padding-box, linear-gradient(180deg, #2c0705, #160302) padding-box, linear-gradient(180deg, #ff7a5c, #c0200f 50%, #6e0a04) border-box; color: #ff8a6e; text-shadow: 0 0 8px rgba(255, 60, 30, .6), 0 1px 0 #000; box-shadow: inset 0 0 12px rgba(255, 50, 20, .25), 0 0 0 1px #120703, 0 2px 4px rgba(0, 0, 0, .6); }
  & .btn-danger:hover { background: linear-gradient(180deg, rgba(255, 120, 90, .2), transparent 50%) padding-box, linear-gradient(180deg, #4a0b07, #220403) padding-box, linear-gradient(180deg, #ffa58c, #e0301a 50%, #8a0e06) border-box; color: #ffd0c4; box-shadow: inset 0 0 14px rgba(255, 50, 20, .35), 0 0 0 1px #120703, 0 0 18px -4px rgba(255, 60, 30, .8); }
  /* "go live": the call to arms, and it glows until you answer */
  & .btn-live { background: linear-gradient(180deg, rgba(255, 235, 190, .38), rgba(255, 210, 170, 0) 50%) padding-box, linear-gradient(180deg, #ff7a2a 0%, #e0400f 40%, #a01e06 70%, #6a0e03 100%) padding-box, linear-gradient(180deg, #fffbe6, #ffd76a 40%, #c9952f 75%, #fff4c8) border-box; color: #fff6dc; text-shadow: 0 1px 0 #3a0802, 0 0 6px rgba(80, 10, 0, .8); animation: wow-call 2.2s ease-in-out infinite; }
  & .btn-live:hover { filter: brightness(1.1); background: linear-gradient(180deg, rgba(255, 235, 190, .4), rgba(255, 210, 170, 0) 50%) padding-box, linear-gradient(180deg, #ff8a3a 0%, #ea4a14 40%, #a81f06 70%, #6a0e03 100%) padding-box, linear-gradient(180deg, #fffbe6, #ffd76a 40%, #c9952f 75%, #fff4c8) border-box; color: #fff; }
  & :is(.btn-ghost, .btn-danger-ghost) { background: transparent; border-color: transparent; box-shadow: none; }
  & .btn-ghost { color: var(--text-2); text-shadow: var(--wow-ink-shadow); }
  & .btn-danger-ghost { color: var(--danger); text-shadow: var(--wow-ink-shadow); }
  & .btn-ghost:hover { background: radial-gradient(closest-side, rgba(255, 209, 0, .15), rgba(255, 209, 0, .04)); border-color: transparent; color: var(--accent); box-shadow: none; }
  & .btn-danger-ghost:hover { background: radial-gradient(closest-side, rgba(255, 60, 30, .18), rgba(255, 60, 30, .04)); border-color: transparent; color: #ff8a6e; box-shadow: none; }
  & .btn-icon:hover { background: radial-gradient(closest-side, rgba(255, 209, 0, .18), transparent); color: #ffd100; }

  /* ---------- fields: dark wells cut into the stone ---------- */

  & .input { border: 1px solid #5d4b2b; border-radius: 5px; background-color: #0a0b11; color: #f3ead3; caret-color: #ffd100; box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 230, 170, .07); }
  & .input:focus { border-color: #ffd100; box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 209, 0, .45), 0 0 14px -3px rgba(255, 190, 40, .65); }
  & .input::placeholder { color: #7d7058; }
  & .textarea { font-family: var(--font); }
  & select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.2l5 5 5-5' fill='none' stroke='%23120a02' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 1.2l5 5 5-5' fill='none' stroke='%23e8bd5c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right .7rem center; background-size: 12px 8px; background-repeat: no-repeat; }
  & select.input-xs { background-position: right .45rem center; }
  & select.input option { background: #12141c; color: #f3ead3; }
  & .seg { border-radius: 8px; border-color: rgba(214, 170, 72, .35); background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .3)); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 235, 190, .05); }
  & .vtt-top .seg { box-shadow: none; }
  & .seg button { border-radius: 5px; font-family: var(--display); font-weight: 400; color: #cfc09c; }
  & .seg button:hover { color: #ffd100; background: rgba(255, 209, 0, .08); }
  & .seg button.is-on { background: var(--wow-lit); color: #ffd100; text-shadow: 0 0 8px rgba(255, 190, 40, .7), 0 1px 0 #000; box-shadow: inset 0 0 0 1px #d4a64a, inset 0 0 0 2px rgba(0, 0, 0, .5), 0 0 12px -4px rgba(255, 190, 40, .8); }
  & .toggle-track { background: linear-gradient(180deg, #040507, #161821); border-color: rgba(214, 170, 72, .5); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8); }
  & .toggle-track span { background: radial-gradient(circle at 35% 30%, #fff6d8, #d9a845 55%, #6b4513); box-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
  & :is(.toggle, .ruleset-row) input:checked + .toggle-track { background: linear-gradient(180deg, #7a5a12, #3d2a06); border-color: #ffd100; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 10px -2px rgba(255, 190, 40, .7); }
  & :is(.toggle, .ruleset-row) input:checked + .toggle-track span { background: radial-gradient(circle at 35% 30%, #fffbe8, #ffd100 50%, #a8742a); }

  /* ---------- type ---------- */

  & :is(h2, h3, h4) { font-weight: 400; }
  & h1 { font-family: var(--title); font-weight: 700; letter-spacing: .01em; }
  & :is(.page-head h1, .deck-head h1, .home-hero h1, .about-hero h1, .cd-name, .campaign-hero h1) { color: transparent; background: var(--wow-gold-text); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 16px rgba(255, 170, 30, .25)); }
  & .section-title { font-weight: 400; color: var(--wow-heading); text-shadow: var(--wow-ink-shadow); letter-spacing: .02em; }
  & .eyebrow { font-family: var(--display); letter-spacing: .2em; text-shadow: var(--wow-ink-shadow); }
  & .eyebrow::before { content: ""; display: inline-block; width: .52em; height: .52em; margin: 0 .65em 0 .15em; vertical-align: .1em; transform: rotate(45deg); background: radial-gradient(circle at 35% 35%, #eaf8ff, #4fb0ff 55%, #123d8a); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 9px rgba(79, 176, 255, .9); }
  & .section-label { font-family: var(--display); color: var(--wow-label); letter-spacing: .16em; text-shadow: var(--wow-ink-shadow); }
  & .section-label::before { content: ""; flex: none; width: .45em; height: .45em; transform: rotate(45deg); background: var(--wow-gold-flat); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
  & .tabs { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(214, 170, 72, .6) 12%, rgba(214, 170, 72, .6) 88%, transparent) 1; }
  & .tab { font-family: var(--display); font-weight: 400; font-size: .96rem; letter-spacing: .02em; text-shadow: var(--wow-ink-shadow); }
  & .tab:hover { color: #ffd100; }
  & .tab small { font-family: var(--font); letter-spacing: 0; }
  & .tab.is-on { color: #ffe9a8; text-shadow: 0 0 10px rgba(255, 190, 40, .55), 0 1px 0 #000; }
  & :is(.score-label, .stat-tile span, .zone-title, .pi-group, .menu-label, .table th, .fight-round, .roll-who) { font-family: var(--display); }
  & .table th { font-weight: 400; color: var(--wow-label); }
  & kbd { border-color: rgba(214, 170, 72, .45); background: linear-gradient(180deg, #2c2f3c, #171922); color: #d8c9a4; box-shadow: 0 1px 0 #000; }
  & code { background: rgba(0, 0, 0, .32); }
  & .prose blockquote { border-left-color: #c99a3c; background: rgba(255, 209, 0, .045); }

  /* chips: the item-quality colors */
  & :is(.chip, .chip-btn) { border-radius: 4px; }
  & .chip { background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .22)); }
  & :is(.chip-open, .chip-friendly, .chip-status-active) { color: var(--q-uncommon); border-color: rgba(30, 255, 0, .42); background-color: rgba(30, 255, 0, .07); }
  & :is(.chip-closed, .chip-hostile, .chip-dead) { color: #ff5a46; border-color: rgba(255, 64, 40, .5); background-color: rgba(255, 40, 20, .1); }
  & :is(.chip-wary, .chip-draft, .chip-pending) { color: var(--q-legendary); border-color: rgba(255, 128, 0, .5); background-color: rgba(255, 128, 0, .1); }
  & .chip-class { color: var(--q-rare-text); border-color: rgba(0, 112, 221, .75); background-color: rgba(0, 112, 221, .13); }
  & .chip-faction { color: var(--q-epic-text); border-color: rgba(163, 53, 238, .7); background-color: rgba(163, 53, 238, .13); }
  & :is(.chip-tag, .chip-status-used, .chip-status-expired, .chip-status-revoked) { color: var(--q-poor); }
  & :is(.chip-gold, .chip-custom, .chip-presence-controls) { color: #ffd100; border-color: rgba(255, 209, 0, .5); background-color: rgba(255, 209, 0, .08); }
  & .chip-btn { background: linear-gradient(180deg, rgba(34, 38, 54, .92), rgba(15, 17, 25, .92)); border-color: rgba(214, 170, 72, .3); }
  & .system-badge { border-radius: 4px; font-family: var(--display); color: var(--q-rare-text); border-color: rgba(0, 112, 221, .8); background: rgba(0, 112, 221, .15); }
  & .role-badge { border-radius: 4px; }
  & .role-gm { color: var(--q-legendary); border-color: rgba(255, 128, 0, .62); background: rgba(255, 128, 0, .12); }
  & .feature { border-radius: 6px; border-color: rgba(156, 123, 53, .7); background: var(--grain), var(--wow-tooltip); box-shadow: var(--wow-tip-shadow); }
  & .feature-who { border-radius: 4px; }
  & .feature-who.who-everyone { color: var(--q-uncommon); border-color: rgba(30, 255, 0, .45); }
  & .feature-who.who-players { color: var(--q-rare-text); border-color: rgba(0, 112, 221, .75); }
  & .feature-who.who-gm { color: var(--q-legendary); border-color: rgba(255, 128, 0, .62); }
  & .feature-who.who-admin { color: var(--q-artifact); border-color: rgba(230, 204, 128, .6); }
  & .feature-who.who-mixed { color: var(--q-epic-text); border-color: rgba(163, 53, 238, .7); }

  /* portraits sit in gold rings, like on a unit frame */
  & .avatar { font-weight: 400; box-shadow: 0 0 0 2px color-mix(in oklab, var(--who) 80%, #000), 0 0 0 3px #120a02, 0 0 0 4.5px #c99a3c, 0 4px 12px -4px rgba(0, 0, 0, .85); }
  & .empty-state .empty-icon { border-radius: 10px; border: 2px solid transparent; background: radial-gradient(circle at 50% 40%, rgba(90, 180, 255, .35), transparent 65%) padding-box, linear-gradient(180deg, #1c2030, #0c0e16) padding-box, var(--wow-gold) border-box; color: #a8dcff; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 26px -6px rgba(90, 180, 255, .6); }
  & .score { border-color: rgba(214, 170, 72, .6); background: var(--grain), linear-gradient(180deg, rgba(255, 209, 0, .12), transparent 60%), var(--wow-stone-soft) 0 0 / 200px 200px, linear-gradient(180deg, #282b3a, #14161f); }
  & .score-label { color: #e8c46a; }
  & .score-val { font-family: var(--numerals); font-weight: 700; color: transparent; background: var(--wow-gold-text); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000); }
  & .stat-tile b { font-family: var(--numerals); font-weight: 700; color: #fff3cf; text-shadow: 0 2px 0 #000, 0 0 16px rgba(255, 190, 40, .3); }
  /* numbers read better in Cinzel than in Marcellus, whose 1 and 0 pass for I and O */
  & :is(.treasury-amount, .purse, .wallet-balance strong, .ware-price, .picker-cost, .session-num, .log-session, .inv-qty, .tally-rank, .tally-kills, .budget-head b, .crew-summary strong, .lift-num, .char-stats, .offer-price b, .final-price b, .counter-amount) { font-family: var(--numerals); font-weight: 700; }
  & .session-num { border-radius: 8px; background: var(--grain), var(--wow-gold-flat); color: #1f1302; text-shadow: 0 1px 0 rgba(255, 246, 210, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(80, 40, 0, .35), 0 0 0 1px #120a02, 0 2px 4px rgba(0, 0, 0, .6); }
  & .treasury-amount { color: #ffd100; text-shadow: 0 2px 0 #000, 0 0 24px rgba(255, 190, 40, .45); }
  & .treasury-icon { border-radius: 50%; border: 2px solid transparent; background: radial-gradient(circle at 40% 35%, rgba(255, 220, 120, .35), transparent 65%) padding-box, linear-gradient(180deg, #2a2216, #120c06) padding-box, var(--wow-gold) border-box; box-shadow: 0 0 0 1px #000, 0 0 30px -8px rgba(255, 190, 40, .7); }
  & .purse { border-radius: 7px; border-color: rgba(255, 209, 0, .45); background: var(--grain), radial-gradient(ellipse at 0% 50%, rgba(255, 209, 0, .18), transparent 70%), var(--wow-slate); }

  /* health: a unit-frame bar, green and glossy */
  & .hp-track { position: relative; border-radius: 3px; background: linear-gradient(180deg, #030303, #181818); box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(201, 154, 60, .5); }
  & .hp-track::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 45%, transparent 50%, rgba(0, 0, 0, .25)); pointer-events: none; }
  & .hp-fill { background: linear-gradient(180deg, #4dff4d, #12b812 55%, #087a08); }

  /* ---------- menus, the palette, toasts ---------- */

  & :is(.menu a, .menu button) { border-radius: 4px; }
  & :is(.menu a, .menu button):hover { background: linear-gradient(90deg, rgba(255, 209, 0, .2), rgba(255, 209, 0, .03)); color: #ffe9a8; }
  & .menu-label { color: var(--wow-label); }
  & .palette-input { border-bottom-color: rgba(214, 170, 72, .35); background: linear-gradient(180deg, rgba(255, 209, 0, .05), transparent); }
  & .palette-input input { font-family: var(--display); color: #fff3d0; }
  & .palette-item { border-radius: 4px; }
  & .palette-item.is-on { background: linear-gradient(90deg, transparent, rgba(255, 209, 0, .17) 12%, rgba(255, 209, 0, .17) 88%, transparent); box-shadow: inset 0 1px 0 rgba(255, 209, 0, .25), inset 0 -1px 0 rgba(255, 209, 0, .25); }
  & .pi-icon { border-radius: 6px; }
  & .pi-group { color: var(--wow-label); }
  & .toast { box-shadow: var(--wow-tip-shadow), 0 0 26px -12px rgba(255, 190, 40, .5); }
  & .toast-card { border-color: var(--q-legendary); box-shadow: var(--wow-tip-shadow), 0 0 30px -10px rgba(255, 128, 0, .75); }
  & .toast-live { border-color: var(--live); }
  & .toast-icon { border-radius: 50%; border: 2px solid transparent; background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--tone, var(--accent)) 35%, transparent), transparent 70%) padding-box, linear-gradient(180deg, #1c2030, #0b0d14) padding-box, var(--wow-gold) border-box; box-shadow: 0 0 0 1px #000, 0 0 14px -4px var(--tone, var(--accent)); }
  & .toast-body b { font-weight: 400; color: #ffe9a8; }
  & .dock-pill.is-open { border-color: #ffd100; }

  /* ---------- cards: slate in a gold frame tinted by their kind, the name on a scrap of parchment ---------- */

  & .gc-body {
    border: 2px solid transparent;
    border-radius: .6em;
    background:
      var(--grain) padding-box,
      radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--kind) 22%, transparent), transparent 62%) padding-box,
      var(--wow-stone-soft) 0 0 / 13em 13em padding-box,
      linear-gradient(165deg, #20232f 0%, #13151d 60%, color-mix(in oklab, var(--kind) 12%, #0b0c12) 100%) padding-box,
      linear-gradient(160deg, #fff0b8, #b8862c 22%, color-mix(in oklab, var(--kind) 50%, #6e4a17) 50%, #e9bd5c 74%, #6b4513) border-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), inset 0 0 0 2px color-mix(in oklab, var(--kind) 30%, transparent), 0 12px 26px -14px #000;
  }
  & .gc-top { font-weight: 400; }
  & .gc-gem { box-shadow: 0 0 0 .09em #1a0f03, 0 0 0 .2em #d4a64a, 0 0 0 .27em #1a0f03, 0 0 .9em -.1em var(--kind), inset 0 -2px 4px rgba(0, 0, 0, .35); }
  & .gc-name { font-weight: 400; letter-spacing: .02em; color: #2a1608; text-shadow: 0 1px 0 rgba(255, 246, 222, .55); background: radial-gradient(130% 160% at 50% 50%, transparent 55%, rgba(112, 64, 16, .35) 100%), var(--wow-parch-tex) 0 0 / 12em 12em, linear-gradient(180deg, #f3e5c0, #dcc28c); border: 1px solid #4a2e0c; border-radius: .25em; box-shadow: inset 0 0 0 1px rgba(255, 244, 214, .4), 0 .12em .3em rgba(0, 0, 0, .65); }
  & .gc-art { border-radius: .3em; border-color: #050302; box-shadow: 0 0 0 1px rgba(214, 170, 72, .55), inset 0 0 1.5em rgba(0, 0, 0, .6); }
  & :is(.gc-corner, .gc-badge) { border-radius: .3em; }
  & .gc-corner { border-color: #c99a3c; background: linear-gradient(180deg, #2a2d3a, #101218); color: #ffd100; font-family: var(--numerals); font-weight: 700; }
  & .gc-badge { font-family: var(--display); font-weight: 400; }
  & .gc-act { border-color: #a8843a; background: var(--wow-tooltip); color: #e8dab6; box-shadow: var(--wow-tip-shadow); }
  & .gc-act:hover { background: var(--wow-gold-flat); color: #1f1302; }
  & .card-back { background: var(--grain), var(--wow-card-circle) 50% 50% / 84% auto no-repeat, radial-gradient(circle at 50% 50%, rgba(90, 170, 255, .3), transparent 42%), var(--wow-stone-soft) 0 0 / 10em 10em, linear-gradient(160deg, #19203f, #080a18); }
  & .card-back-pattern { inset: 5%; border: 1px solid rgba(214, 170, 72, .75); border-radius: .3em; background: none; -webkit-mask-image: none; mask-image: none; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(214, 170, 72, .35), 0 0 0 1px rgba(0, 0, 0, .6); }
  & .card-back-emblem { font-family: var(--display); color: #ffd100; text-shadow: 0 0 10px rgba(255, 190, 40, .6), 0 1px 0 #000; }
  & .deck-box.is-on { background: var(--wow-lit); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--deck) 60%, #d4a64a), 0 0 16px -6px color-mix(in oklab, var(--deck) 70%, #ffbf3c); }
  & .deck-box-art { border-radius: 4px; box-shadow: 3px 3px 0 -1px #0b0c12, 3px 3px 0 0 color-mix(in oklab, var(--deck) 40%, #6b4513); }
  & .deck-box-name { font-family: var(--display); font-weight: 400; }

  /* ---------- the table: dark oak with a gold inlay and a circle of runes in the middle ---------- */

  & .felt {
    border: 3px solid transparent;
    border-radius: 14px;
    border-image: var(--wow-corners) 48 / 30px / 12px stretch;
    background:
      var(--grain) padding-box,
      radial-gradient(ellipse at 50% 45%, rgba(255, 200, 100, .1), transparent 60%) padding-box,
      var(--wow-card-circle) 50% 50% / min(62%, 520px) auto no-repeat padding-box,
      var(--wow-wood-tex) 0 0 / 640px 160px padding-box,
      radial-gradient(ellipse at 50% 40%, #3a2414, #1c1109 82%) padding-box,
      var(--wow-gold) border-box;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .65), 0 0 0 1px #000, 0 0 0 7px #2b1a0d, 0 0 0 8px #8a6424, 0 0 0 9px #000, 0 30px 80px -40px #000;
  }
  & .zone { border-radius: 10px; border-color: rgba(230, 196, 120, .3); background: rgba(10, 6, 2, .22); }
  & .zone-title { color: #e8c46a; text-shadow: var(--wow-ink-shadow); }

  /* ---------- the map table (VTT): every floating panel is a tooltip ----------
     vtt.css loads after the skins, so these rules lean on .vtt (or .table-stage) for the weight to win. */

  & .table-stage > .vtt { --vtt-glass: rgba(9, 13, 30, .95); border: 2px solid #8a6424; border-radius: 10px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .6), var(--shadow-lg); }
  & .vtt :is(.vtt-toolgroup, .vtt-top, .vtt-toolopts, .vtt-title, .vtt-fight, .vtt-panel, .vtt-menu, .vtt-tip, .vtt-empty > div, .vtt-blind, .vtt-floors) { border-color: #9c7b35; background: var(--grain), var(--wow-tooltip); box-shadow: var(--wow-tip-shadow); }
  & .vtt :is(.vtt-toolgroup, .vtt-top, .vtt-toolopts, .vtt-panel, .vtt-menu, .vtt-tip, .vtt-empty > div, .vtt-blind, .vtt-floors) { border-radius: 8px; }
  & .vtt .vtt-fight { border-radius: 12px; }
  & .vtt .vtt-panel-head { border-bottom-color: rgba(214, 170, 72, .3); background: linear-gradient(180deg, rgba(255, 209, 0, .07), transparent); border-radius: 7px 7px 0 0; }
  & .vtt .vtt-panel-head h3 { color: var(--wow-heading); text-shadow: var(--wow-ink-shadow); }
  & .vtt .vtt-title b { font-weight: 400; color: #ffe9a8; }
  & .vtt :is(.vtt-tool, .vtt-btn):hover:not(:disabled) { background: radial-gradient(closest-side, rgba(255, 209, 0, .2), rgba(255, 209, 0, .05)); color: #ffd100; }
  & .vtt .vtt-tool.is-on { background: var(--wow-gold-flat); color: #1f1302; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(0, 0, 0, .3), 0 0 14px -2px rgba(255, 190, 40, .8); }
  & .vtt .vtt-btn { font-family: var(--display); font-weight: 400; letter-spacing: .02em; }
  & .vtt .vtt-btn.is-on { color: #ffd100; background: rgba(255, 209, 0, .12); }
  & .vtt .vtt-tab.is-on { background: var(--wow-lit); color: #ffd100; box-shadow: inset 0 0 0 1px #d4a64a, 0 0 12px -4px rgba(255, 190, 40, .8); }
  & .vtt :is(.vtt-fight-round b, .fight-round, .roll-total, .vtt-roll-total b) { font-family: var(--numerals); font-weight: 700; }
  & .vtt :is(.roll-total, .vtt-roll-total b) { color: #fff3cf; text-shadow: 0 2px 0 #000; }
  & .vtt .vtt-roll-total { background: var(--wow-tooltip); }
  & :is(.vtt, .modal) :is(.fight-list li, .roll-item, .box-card, .lib-item, .sound-channel, .bag-list li) { background: var(--grain), var(--wow-sheen), var(--wow-slate); border-radius: 7px; }
  & .vtt .roll-item { background: var(--grain), var(--wow-tooltip); }
  & .vtt .roll-item.is-secret { background: radial-gradient(ellipse at 0% 0%, rgba(255, 209, 0, .12), transparent 60%), var(--wow-tooltip); }
  & .vtt .fight-list li.is-current { background: var(--wow-lit); }
  /* the dice: keys of carved stone, too many of them for red */
  & .vtt :is(.dice-presets .btn, .die-btn) { border: 1px solid #6d5a33; background: var(--wow-key); color: #ffe08a; font-family: var(--numerals); font-weight: 700; text-shadow: 0 1px 0 #000; box-shadow: var(--wow-key-shadow); }
  & .vtt :is(.dice-presets .btn, .die-btn):hover { border-color: #e0b04e; background: var(--grain), linear-gradient(180deg, rgba(255, 209, 0, .14), transparent 60%), linear-gradient(180deg, #474b5d, #2c2f3c); color: #fff3c0; box-shadow: var(--wow-key-shadow), 0 0 12px -3px rgba(255, 190, 40, .7); }

  /* ---------- scrollbars: a gold bar in a dark groove ---------- */

  & * { scrollbar-width: auto; scrollbar-color: auto; }
  & ::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
  & ::-webkit-scrollbar-track { border-radius: 6px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(214, 170, 72, .12); }
  & ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: linear-gradient(90deg, #fff0b8, #d9a845 40%, #8a5d1c 75%, #4f330c) padding-box; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
  & ::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, #fff0b8, #d9a845 40%, #8a5d1c 75%, #4f330c) padding-box; }
  & ::-webkit-scrollbar-corner { background: transparent; }
  /* scrollers app.css makes thin skip the pseudo-elements; they still get the gold */
  & .vtt .vtt-fight-order { scrollbar-color: #b8862c transparent; }
  @supports not selector(::-webkit-scrollbar) {
    & * { scrollbar-width: thin; scrollbar-color: #b8862c rgba(0, 0, 0, .3); }
  }
  & ::selection { background: rgba(255, 209, 0, .32); }
}

/* ---------- motion ---------- */

@keyframes wow-turn { to { transform: rotate(1turn); } }
@keyframes wow-aurora {
  0% { transform: translateX(-3%) skewX(-8deg) scaleY(1); opacity: .7; }
  50% { opacity: 1; }
  100% { transform: translateX(4%) skewX(6deg) scaleY(1.14); opacity: .8; }
}
@keyframes wow-curtain {
  0% { transform: skewX(-18deg) translateX(-2%); opacity: .5; }
  100% { transform: skewX(-9deg) translateX(3%); opacity: .9; }
}
@keyframes wow-twinkle { from { opacity: .3; } to { opacity: .75; } }
@keyframes wow-open {
  0% { opacity: 0; transform: translateY(12px) scale(.95); filter: brightness(1.8) sepia(.5); }
  55% { opacity: 1; filter: brightness(1.12) sepia(.1); }
  100% { transform: none; filter: none; }
}
@keyframes wow-call {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 240, 210, .45), inset 0 -2px 3px rgba(0, 0, 0, .35), 0 0 0 1px #120703, 0 0 12px -4px rgba(255, 130, 40, .7); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 240, 210, .45), inset 0 -2px 3px rgba(0, 0, 0, .35), 0 0 0 1px #120703, 0 0 26px 0 rgba(255, 150, 40, .9); }
}

@media (max-width: 720px) {
  :where(.app.skin-wow:not(.theme-fantasy)) { --wow-moon-at: 90% 13%; --wow-moon-r: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.app.skin-wow:not(.theme-fantasy)) {
    & .space-bg::before, & :is(.space-bg .nebula, .space-bg .grid-floor, .space-bg .stars, .modal, .prompt-sheet, .btn-live) { animation: none; }
  }
}