:root {
  --ground: var(--core-secondary-1000);
  --panel: var(--core-secondary-900);
  --raised: var(--core-secondary-800);
  --sunken: #08111a;
  --line: var(--core-secondary-700);
  --line-soft: #16212c;
  --ink: var(--core-text-primary);
  --muted: var(--core-text-secondary);
  --faint: var(--core-text-info);
  --gold: var(--core-primary-main);
  --gold-bright: var(--core-primary-200);
  --gold-deep: var(--core-primary-500);
  --display: ArnoPro, "Arno Pro", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             "Times New Roman", serif;
  --sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --rail: 268px;
  --wide: 1440px;
}

html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) var(--sunken);
}

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -280px, #16222e 0%, transparent 70%), var(--ground);
  color: var(--ink);
  font: 400 14px/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}

@scope (body) to (.fx-tip) {
  .fx-blessing-crest {
    position: relative;
    display: block;
    margin: 0;
    width: var(--fx-plate-width);
    aspect-ratio: 0.7872340426;
    background: var(--fx-plate) 0 0/100% 100% no-repeat;
  }
  .fx-blessing-crest img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 45%;
    aspect-ratio: 1;
    object-fit: contain;
  }
  .fx-slot {
    position: relative;
    display: block;
    flex: 0 0 auto;
    margin: 0;
    width: var(--fx-slot-width);
    aspect-ratio: 1;
    background: var(--fx-slot-backing) 0 0/100% 100% no-repeat;
  }
  .fx-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    clip-path: polygon(15% 6.6666666667%, 85% 6.6666666667%, 93.3333333333% 15%, 93.3333333333% 85%, 85% 93.3333333333%, 15% 93.3333333333%, 6.6666666667% 85%, 6.6666666667% 15%);
  }
  .fx-slot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--fx-slot-bevel, none) 0 0/100% 100% no-repeat, var(--fx-slot-frame) 0 0/100% 100% no-repeat;
  }
  .fx-slot.plain img {
    clip-path: polygon(12.5% 7.8125%, 87.5% 7.8125%, 92.1875% 12.5%, 92.1875% 87.5%, 87.5% 92.1875%, 12.5% 92.1875%, 7.8125% 87.5%, 7.8125% 12.5%);
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    scrollbar-width: thin;
  }
  a {
    color: var(--gold-bright);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  :focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
  }
  h1 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.04em;
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.1;
    margin: 6px 0 14px;
  }
  h2 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-size: 19px;
    margin: 0 0 10px;
    color: var(--core-secondary-000);
  }
  .cx-card {
    border: 2px solid transparent;
    border-image: var(--chrome-panel) 2 fill stretch;
    padding: 14px 16px;
    display: block;
    color: var(--ink);
  }
  .cx-card:hover {
    text-decoration: none;
  }
  .cx-prose {
    white-space: pre-line;
    color: var(--ink);
  }
  .cx-prose .sub {
    font-weight: 600;
    border-bottom: 1px dotted currentColor;
    cursor: help;
  }
  .cx-prose .tok {
    color: var(--faint);
    font-style: italic;
    border-bottom: 1px dotted currentColor;
    cursor: help;
  }
  .cx-prose .rt-unstyled {
    color: inherit;
  }
  .cx-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cx-roster a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--sunken);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 2px;
    font-size: 13px;
  }
  .cx-roster a:hover {
    text-decoration: none;
    border-color: currentColor;
  }
  .cx-roster a[aria-current] {
    border-color: currentColor;
    background: var(--raised);
  }
  .cx-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
  }
  .cx-who {
    font-weight: 600;
  }
  .cx-miss {
    color: var(--faint);
    font-style: italic;
  }
  pre.cx-raw {
    margin: 0;
    padding: 10px 12px;
    background: var(--sunken);
    border: 1px solid var(--line);
    overflow-x: auto;
    font: 12px/1.5 var(--mono);
    color: var(--core-secondary-100);
  }
}