/* Earned Seal theme. Active while <html data-skin="earned-seal">; set data-skin="classic" (or open the
   site with ?skin=classic) for the previous design, which this file leaves untouched.
   Everything is scoped to the attribute, so removing this file changes nothing else. */

/* theme-only artwork stays out of the classic design */
.rk-word, .es-seal, .es-foot-seal, .es-ghost-frame { display: none; }

:root[data-skin="earned-seal"] {
  --claret: #6A1327; --gold-seal: #B88A3B; --cream: #F4EDDC; --oxblood: #26121A;
  --font-display: "Montserrat", "Inter Variable", sans-serif;
  --font-mono: "Montserrat", "Inter Variable", sans-serif;
  --color-bg: #F4EDDC; --color-panel: #FFFBF2; --color-fg: #26121A; --color-fg-muted: #6B5656;
  --color-s2: #FBF5E8; --color-s3: #E9DFC9; --color-bar: #6A1327; --color-bar-fg: #F4EDDC; --color-rule: #6A1327;
  --color-border-line: rgb(106 19 39 / 14%); --color-border-strong: rgb(106 19 39 / 28%);
  --color-ok: #2F6B3C; --color-bad: #9B1F36;
  --cds-chart-axis: #CFC3A9; --cds-chart-grid: rgb(106 19 39 / 10%); --cds-chart-muted: #D8CCB4; --chart-solid: var(--claret); --chart-label: var(--color-fg-muted); --chart-label-weight: 500; --chart-p1: #B88A3B; --chart-p2: #8F8E8B; --chart-p3: #96603A; --chart-weights: #B88A3B; --cds-chart-reference: #8B7768;
  --cds-surface-popover: #FFFBF2; --cds-text-secondary: #5A4545;
  /* the accents that change between light and dark */
  --es-accent: var(--claret); --es-gold-text: #80591A; --es-numeral: var(--claret); --es-seal-ring: var(--claret); --es-seal-r: var(--claret);
  --es-ghost: var(--claret); --es-ghost-a: .065; --es-seal-shadow: 0 1px 3px rgb(38 18 26 / 14%);
  --es-roost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.07 0 0 0 0 0.1 6 0 0 0 -3.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.16' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.07 0 0 0 0 0.1 5 0 0 0 -3.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --es-dirt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.07 0 0 0 0 0.1 6 0 0 0 -3.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.16' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.07 0 0 0 0 0.1 5 0 0 0 -3.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --es-dirt-a: .62; --es-floor-a: .38; --es-clods-a: .7; --es-clods: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 124' fill='%2326121A'%3E%3Cpolygon points='64.30,97.00 64.02,97.38 63.76,97.62 63.19,97.31 62.99,96.76 63.17,96.48 63.79,95.96 64.21,96.37'/%3E%3Cpolygon points='51.20,94.71 50.80,95.34 49.95,95.27 49.96,94.41 50.68,94.01'/%3E%3Cpolygon points='64.49,96.38 63.29,98.43 61.92,98.03 61.69,96.53 61.97,95.04 63.41,94.83'/%3E%3Cpolygon points='62.37,114.51 62.24,114.84 61.89,114.95 61.51,114.93 61.61,114.62 61.65,114.11 61.97,114.03 62.26,114.29'/%3E%3Cpolygon points='55.64,106.74 55.41,107.24 55.15,107.28 54.84,107.18 54.85,106.55 55.22,106.32 55.49,106.50'/%3E%3Cpolygon points='52.04,98.41 51.80,99.38 51.12,99.35 50.93,98.68 51.13,97.89 51.71,97.93'/%3E%3Cpolygon points='107.97,95.19 107.46,96.25 106.65,96.44 106.49,95.78 106.21,94.96 106.85,94.22 107.50,94.75'/%3E%3Cpolygon points='49.83,103.81 49.69,104.03 49.28,104.34 49.04,104.05 48.80,103.79 49.13,103.42 49.25,103.37 49.53,103.35'/%3E%3Cpolygon points='88.38,96.04 88.04,96.47 87.64,96.52 87.28,96.28 87.37,95.80 87.76,95.63 88.16,95.73'/%3E%3Cpolygon points='61.03,113.52 60.73,113.93 60.34,114.03 60.12,113.50 60.29,113.12 60.77,113.28'/%3E%3Cpolygon points='51.39,104.01 50.64,105.16 49.97,105.42 49.76,104.42 49.75,103.40 50.93,103.48'/%3E%3C/svg%3E"); --es-roost-a: .5;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="earned-seal"]:not([data-theme="light"]) {
  --color-bg: #1A0B11; --color-panel: #26121A; --color-fg: #F4EDDC; --color-fg-muted: #C2B3A6;
  --color-s2: #2C1720; --color-s3: #3A1F2A; --color-bar: #4F0E1D; --color-bar-fg: #F4EDDC; --color-rule: #B88A3B;
  --color-border-line: rgb(244 237 220 / 11%); --color-border-strong: rgb(244 237 220 / 22%);
  --color-ok: #8FCB9C; --color-bad: #F09AA8;
  --cds-chart-axis: #4A303A; --cds-chart-grid: rgb(244 237 220 / 9%); --cds-chart-muted: #5C434D; --chart-solid: var(--color-fg); --chart-label: var(--color-fg); --chart-label-weight: 600; --chart-p1: var(--chart-solid); --chart-p2: var(--chart-solid); --chart-p3: var(--chart-solid); --chart-weights: var(--chart-solid); --cds-chart-reference: #B3A194;
  --cds-surface-popover: #321B24; --cds-text-secondary: #D7C9BA;
  --es-accent: #E2C27F; --es-gold-text: #E2C27F; --es-numeral: #E2C27F; --es-seal-ring: #E2C27F; --es-seal-r: #F4EDDC;
  --es-ghost: #F4EDDC; --es-ghost-a: .05; --es-seal-shadow: 0 1px 3px rgb(0 0 0 / 40%);
  --es-roost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.957 0 0 0 0 0.929 0 0 0 0 0.863 6 0 0 0 -4.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.16' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.957 0 0 0 0 0.929 0 0 0 0 0.863 5 0 0 0 -3.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --es-dirt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.57 0 0 0 0 0.49 6 0 0 0 -3.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.16' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.57 0 0 0 0 0.49 5 0 0 0 -3.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --es-dirt-a: .42; --es-floor-a: .28; --es-clods-a: .55; --es-clods: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 124' fill='%23A8917D'%3E%3Cpolygon points='64.30,97.00 64.02,97.38 63.76,97.62 63.19,97.31 62.99,96.76 63.17,96.48 63.79,95.96 64.21,96.37'/%3E%3Cpolygon points='51.20,94.71 50.80,95.34 49.95,95.27 49.96,94.41 50.68,94.01'/%3E%3Cpolygon points='64.49,96.38 63.29,98.43 61.92,98.03 61.69,96.53 61.97,95.04 63.41,94.83'/%3E%3Cpolygon points='62.37,114.51 62.24,114.84 61.89,114.95 61.51,114.93 61.61,114.62 61.65,114.11 61.97,114.03 62.26,114.29'/%3E%3Cpolygon points='55.64,106.74 55.41,107.24 55.15,107.28 54.84,107.18 54.85,106.55 55.22,106.32 55.49,106.50'/%3E%3Cpolygon points='52.04,98.41 51.80,99.38 51.12,99.35 50.93,98.68 51.13,97.89 51.71,97.93'/%3E%3Cpolygon points='107.97,95.19 107.46,96.25 106.65,96.44 106.49,95.78 106.21,94.96 106.85,94.22 107.50,94.75'/%3E%3Cpolygon points='49.83,103.81 49.69,104.03 49.28,104.34 49.04,104.05 48.80,103.79 49.13,103.42 49.25,103.37 49.53,103.35'/%3E%3Cpolygon points='88.38,96.04 88.04,96.47 87.64,96.52 87.28,96.28 87.37,95.80 87.76,95.63 88.16,95.73'/%3E%3Cpolygon points='61.03,113.52 60.73,113.93 60.34,114.03 60.12,113.50 60.29,113.12 60.77,113.28'/%3E%3Cpolygon points='51.39,104.01 50.64,105.16 49.97,105.42 49.76,104.42 49.75,103.40 50.93,103.48'/%3E%3C/svg%3E"); --es-roost-a: .42;
  }
  :root[data-skin="earned-seal"]:not([data-theme="light"]) .nb { --flag: #D3A957; --sel-bg: #D3A957; --sel-fg: #26121A; --es-tab: #D3A957; }
}
:root[data-skin="earned-seal"][data-theme="dark"] {
  --color-bg: #1A0B11; --color-panel: #26121A; --color-fg: #F4EDDC; --color-fg-muted: #C2B3A6;
  --color-s2: #2C1720; --color-s3: #3A1F2A; --color-bar: #4F0E1D; --color-bar-fg: #F4EDDC; --color-rule: #B88A3B;
  --color-border-line: rgb(244 237 220 / 11%); --color-border-strong: rgb(244 237 220 / 22%);
  --color-ok: #8FCB9C; --color-bad: #F09AA8;
  --cds-chart-axis: #4A303A; --cds-chart-grid: rgb(244 237 220 / 9%); --cds-chart-muted: #5C434D; --chart-solid: var(--color-fg); --chart-label: var(--color-fg); --chart-label-weight: 600; --chart-p1: var(--chart-solid); --chart-p2: var(--chart-solid); --chart-p3: var(--chart-solid); --chart-weights: var(--chart-solid); --cds-chart-reference: #B3A194;
  --cds-surface-popover: #321B24; --cds-text-secondary: #D7C9BA;
  --es-accent: #E2C27F; --es-gold-text: #E2C27F; --es-numeral: #E2C27F; --es-seal-ring: #E2C27F; --es-seal-r: #F4EDDC;
  --es-ghost: #F4EDDC; --es-ghost-a: .05; --es-seal-shadow: 0 1px 3px rgb(0 0 0 / 40%);
  --es-roost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.957 0 0 0 0 0.929 0 0 0 0 0.863 6 0 0 0 -4.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.16' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.957 0 0 0 0 0.929 0 0 0 0 0.863 5 0 0 0 -3.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --es-dirt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.57 0 0 0 0 0.49 6 0 0 0 -3.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.16' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.57 0 0 0 0 0.49 5 0 0 0 -3.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --es-dirt-a: .42; --es-floor-a: .28; --es-clods-a: .55; --es-clods: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 124' fill='%23A8917D'%3E%3Cpolygon points='64.30,97.00 64.02,97.38 63.76,97.62 63.19,97.31 62.99,96.76 63.17,96.48 63.79,95.96 64.21,96.37'/%3E%3Cpolygon points='51.20,94.71 50.80,95.34 49.95,95.27 49.96,94.41 50.68,94.01'/%3E%3Cpolygon points='64.49,96.38 63.29,98.43 61.92,98.03 61.69,96.53 61.97,95.04 63.41,94.83'/%3E%3Cpolygon points='62.37,114.51 62.24,114.84 61.89,114.95 61.51,114.93 61.61,114.62 61.65,114.11 61.97,114.03 62.26,114.29'/%3E%3Cpolygon points='55.64,106.74 55.41,107.24 55.15,107.28 54.84,107.18 54.85,106.55 55.22,106.32 55.49,106.50'/%3E%3Cpolygon points='52.04,98.41 51.80,99.38 51.12,99.35 50.93,98.68 51.13,97.89 51.71,97.93'/%3E%3Cpolygon points='107.97,95.19 107.46,96.25 106.65,96.44 106.49,95.78 106.21,94.96 106.85,94.22 107.50,94.75'/%3E%3Cpolygon points='49.83,103.81 49.69,104.03 49.28,104.34 49.04,104.05 48.80,103.79 49.13,103.42 49.25,103.37 49.53,103.35'/%3E%3Cpolygon points='88.38,96.04 88.04,96.47 87.64,96.52 87.28,96.28 87.37,95.80 87.76,95.63 88.16,95.73'/%3E%3Cpolygon points='61.03,113.52 60.73,113.93 60.34,114.03 60.12,113.50 60.29,113.12 60.77,113.28'/%3E%3Cpolygon points='51.39,104.01 50.64,105.16 49.97,105.42 49.76,104.42 49.75,103.40 50.93,103.48'/%3E%3C/svg%3E"); --es-roost-a: .42;
}
:root[data-skin="earned-seal"][data-theme="dark"] .nb { --flag: #D3A957; --sel-bg: #D3A957; --sel-fg: #26121A; --es-tab: #D3A957; }

:root[data-skin="earned-seal"] .nb {
  --flag: #B88A3B; --flag-ink: #26121A; --gold: #B88A3B; --silver: #8F8E8B; --bronze: #96603A;
  --sel-bg: #6A1327; --sel-fg: #F4EDDC; --es-tab: var(--claret);
}

/* header: claret bar, script wordmark, a double gold rule instead of the checkered edge */
:root[data-skin="earned-seal"] .rk-bar { --flag: #E2C27F; }
:root[data-skin="earned-seal"] .rk-bar::after { height: 5px; background: linear-gradient(#B88A3B 0 2px, transparent 2px 3px, #B88A3B 3px 4px, transparent 4px); }
:root[data-skin="earned-seal"] .rk-bar-in { height: 76px; }
:root[data-skin="earned-seal"] .rk-title { display: none; }
:root[data-skin="earned-seal"] .rk-word { display: block; width: 175px; height: 46px; color: #F4EDDC; --c2-r: #F4EDDC; --c2-tag: #B88A3B; --c2-tagtext: #26121A; }
:root[data-skin="earned-seal"] .rk-upd { color: #E2C27F; font-weight: 600; letter-spacing: .12em; }
@media (max-width: 640px) {
  :root[data-skin="earned-seal"] .rk-word { width: 136px; height: 36px; }
  :root[data-skin="earned-seal"] .rk-bar-in { height: 64px; }
  :root[data-skin="earned-seal"] .rk-upd { font-size: 10px; letter-spacing: .08em; }
}

/* background: the script R, far larger than the page and cropped into an abstract shape, with a
   faint roost of dirt kicked up from the top corner. The frame crops the R without widening the page. The R is
   for the Rankings tab only; the roost is on every tab, and scrolls away with the top of the page. */
:root[data-skin="earned-seal"] .es-ghost-frame { display: block; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 1100px; overflow: hidden; pointer-events: none; }
:root[data-skin="earned-seal"] .es-ghost-frame::before { content: ""; position: absolute; inset: 0; opacity: var(--es-roost-a); background-image: var(--es-roost); -webkit-mask-image: radial-gradient(circle 620px at 100% 0, #000 0, transparent 100%); mask-image: radial-gradient(circle 620px at 100% 0, #000 0, transparent 100%); }
:root[data-skin="earned-seal"] .es-ghost { position: absolute; right: calc(max(0px, 50% - 640px) - 240px); top: -14px; width: 820px; height: auto; color: var(--es-ghost); opacity: var(--es-ghost-a); }
:root[data-skin="earned-seal"]:has(.nb:not([data-view="rankings"])) .es-ghost { display: none; }
/* and the same roost thrown up from the foot of the page, stronger: low on the left, sweeping across and up the right in uneven patches */
:root[data-skin="earned-seal"] #dash-root { position: relative; }
:root[data-skin="earned-seal"] #dash-root::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: min(1200px, 100%); opacity: var(--es-floor-a); background-image: var(--es-roost); background-position: left bottom; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 34% 96px at 10% 100%, rgb(0 0 0 / 100%) 0, rgb(0 0 0 / 50%) 45%, transparent 100%), radial-gradient(ellipse 38% 150px at 44% calc(100% + 20px), rgb(0 0 0 / 100%) 0, rgb(0 0 0 / 50%) 45%, transparent 100%), radial-gradient(ellipse 20% 110px at 24% calc(100% - 60px), rgb(0 0 0 / 45%) 0, rgb(0 0 0 / 22%) 45%, transparent 100%), radial-gradient(ellipse 30% 230px at 80% calc(100% - 90px), rgb(0 0 0 / 100%) 0, rgb(0 0 0 / 50%) 45%, transparent 100%), radial-gradient(ellipse 14% 120px at 58% calc(100% - 200px), rgb(0 0 0 / 50%) 0, rgb(0 0 0 / 25%) 45%, transparent 100%), radial-gradient(ellipse 24% 260px at 98% calc(100% - 340px), rgb(0 0 0 / 85%) 0, rgb(0 0 0 / 42%) 45%, transparent 100%), radial-gradient(ellipse 12% 110px at 72% calc(100% - 420px), rgb(0 0 0 / 40%) 0, rgb(0 0 0 / 20%) 45%, transparent 100%), radial-gradient(ellipse 16% 190px at 100% calc(100% - 660px), rgb(0 0 0 / 50%) 0, rgb(0 0 0 / 25%) 45%, transparent 100%), radial-gradient(ellipse 9% 90px at 86% calc(100% - 800px), rgb(0 0 0 / 28%) 0, rgb(0 0 0 / 14%) 45%, transparent 100%), radial-gradient(ellipse 10% 130px at 100% calc(100% - 1010px), rgb(0 0 0 / 22%) 0, rgb(0 0 0 / 11%) 45%, transparent 100%); mask-image: radial-gradient(ellipse 34% 96px at 10% 100%, rgb(0 0 0 / 100%) 0, rgb(0 0 0 / 50%) 45%, transparent 100%), radial-gradient(ellipse 38% 150px at 44% calc(100% + 20px), rgb(0 0 0 / 100%) 0, rgb(0 0 0 / 50%) 45%, transparent 100%), radial-gradient(ellipse 20% 110px at 24% calc(100% - 60px), rgb(0 0 0 / 45%) 0, rgb(0 0 0 / 22%) 45%, transparent 100%), radial-gradient(ellipse 30% 230px at 80% calc(100% - 90px), rgb(0 0 0 / 100%) 0, rgb(0 0 0 / 50%) 45%, transparent 100%), radial-gradient(ellipse 14% 120px at 58% calc(100% - 200px), rgb(0 0 0 / 50%) 0, rgb(0 0 0 / 25%) 45%, transparent 100%), radial-gradient(ellipse 24% 260px at 98% calc(100% - 340px), rgb(0 0 0 / 85%) 0, rgb(0 0 0 / 42%) 45%, transparent 100%), radial-gradient(ellipse 12% 110px at 72% calc(100% - 420px), rgb(0 0 0 / 40%) 0, rgb(0 0 0 / 20%) 45%, transparent 100%), radial-gradient(ellipse 16% 190px at 100% calc(100% - 660px), rgb(0 0 0 / 50%) 0, rgb(0 0 0 / 25%) 45%, transparent 100%), radial-gradient(ellipse 9% 90px at 86% calc(100% - 800px), rgb(0 0 0 / 28%) 0, rgb(0 0 0 / 14%) 45%, transparent 100%), radial-gradient(ellipse 10% 130px at 100% calc(100% - 1010px), rgb(0 0 0 / 22%) 0, rgb(0 0 0 / 11%) 45%, transparent 100%); }
:root[data-skin="earned-seal"] .nb-foot { padding-bottom: 76px; }   /* room for the dirt, so it stays clear of the footer text */

/* hero: the seal, tilted and casting a shadow like a badge stuck on the page */
:root[data-skin="earned-seal"] .nb { position: relative; isolation: isolate; }
:root[data-skin="earned-seal"] .nb-head { position: relative; }
:root[data-skin="earned-seal"] .es-seal { display: block; position: absolute; right: -20px; top: 76px; width: 198px; height: 198px; color: var(--es-seal-ring); --c2-r: var(--es-seal-r); isolation: isolate; }
/* a podium driver's dropdown chart takes that driver's colour: the same gold, silver or bronze as the row's edge */
:root[data-skin="earned-seal"] .nb tr[data-p="1"] + tr.detail { --chart-solid: var(--chart-p1); }
:root[data-skin="earned-seal"] .nb tr[data-p="2"] + tr.detail { --chart-solid: var(--chart-p2); }
:root[data-skin="earned-seal"] .nb tr[data-p="3"] + tr.detail { --chart-solid: var(--chart-p3); }
:root[data-skin="earned-seal"] .es-seal svg, :root[data-skin="earned-seal"] .es-foot-seal svg { display: block; position: relative; z-index: 1; width: 100%; height: 100%; transform: rotate(-8deg); border-radius: 50%; background: var(--color-bg); box-shadow: var(--es-seal-shadow); }
/* in place of a drop shadow: dirt caked around the badge, with a few chunks falling off the bottom edge */
:root[data-skin="earned-seal"] #dash-root { overflow-x: clip; }   /* the dirt reaches past the big seal, and mustn't widen the page */
:root[data-skin="earned-seal"] .es-seal::before, :root[data-skin="earned-seal"] .es-foot-seal::before { content: ""; position: absolute; inset: -7% -7% -12%; opacity: var(--es-dirt-a); background-image: var(--es-dirt); pointer-events: none; -webkit-mask-image: radial-gradient(closest-side at 50% 54%, #000 80%, rgb(0 0 0 / 40%) 90%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 54%, #000 80%, rgb(0 0 0 / 40%) 90%, transparent 100%); }
:root[data-skin="earned-seal"] .es-seal::after, :root[data-skin="earned-seal"] .es-foot-seal::after { content: ""; position: absolute; left: -25%; top: 0; width: 150%; aspect-ratio: 144 / 124; opacity: var(--es-clods-a); background: var(--es-clods) center top / 100% auto no-repeat; pointer-events: none; }
:root[data-skin="earned-seal"] .nb:not([data-view="rankings"]) .es-seal { display: none; }
@media (max-width: 1100px) { :root[data-skin="earned-seal"] .es-seal { right: -8px; } }
:root[data-skin="earned-seal"] .nb-head h1, :root[data-skin="earned-seal"] .nb-story, :root[data-skin="earned-seal"] .nb-take { padding-right: 180px; }
:root[data-skin="earned-seal"] .nb-head h1 { font: italic 800 clamp(2rem, 4.8vw, 3rem)/1 var(--font-display); letter-spacing: -.025em; }
:root[data-skin="earned-seal"] .nb-head h1 em { color: var(--es-accent); }
:root[data-skin="earned-seal"] .nb[data-view="rankings"] .nb-head h1 { font: 700 13px/1.2 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--es-gold-text); margin-top: 26px; }
:root[data-skin="earned-seal"] .nb[data-view="rankings"] .nb-head h1 em { color: inherit; }
:root[data-skin="earned-seal"] .nb-story { font: italic 800 clamp(2rem, 4.6vw, 3.15rem)/1.06 var(--font-display); letter-spacing: -.03em; margin: 10px 0 12px; max-width: none; }
:root[data-skin="earned-seal"] .nb-story > span:first-child { color: var(--es-accent); }
@media (max-width: 720px) {
  :root[data-skin="earned-seal"] .es-seal { display: none; }
  :root[data-skin="earned-seal"] .nb-head h1, :root[data-skin="earned-seal"] .nb-story, :root[data-skin="earned-seal"] .nb-take { padding-right: 0; }
  :root[data-skin="earned-seal"] .es-ghost { right: -70vw; width: 190vw; top: 124px; }
  :root[data-skin="earned-seal"] .es-ghost-frame::before { -webkit-mask-image: radial-gradient(circle 400px at 100% 0, #000 0, transparent 100%); mask-image: radial-gradient(circle 400px at 100% 0, #000 0, transparent 100%); }
}

/* controls */
:root[data-skin="earned-seal"] .nb-cls button, :root[data-skin="earned-seal"] .nb-subtabs button, :root[data-skin="earned-seal"] .nb-seg button { font-weight: 700; letter-spacing: .06em; }
:root[data-skin="earned-seal"] .nb-tabs button { font-family: var(--font-display); font-weight: 700; }
:root[data-skin="earned-seal"] .nb-tabs button:focus:not(:focus-visible) { outline: 0; }
:root[data-skin="earned-seal"] .nb-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--es-tab); }

/* headings and the script numerals: the title you earn */
:root[data-skin="earned-seal"] .nb-panel h2, :root[data-skin="earned-seal"] .nb-more > summary .t { font: italic 800 25px/1.1 var(--font-display); letter-spacing: -.02em; }
:root[data-skin="earned-seal"] .nb .pos, :root[data-skin="earned-seal"] .nb-method section::before { font-family: "Leckerli One", cursive; font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--es-numeral); }
/* script for the podium only; everyone else stays quick to read */
:root[data-skin="earned-seal"] .nb td.p .pos { font: italic 800 18px/1 var(--font-display); letter-spacing: -.02em; }
:root[data-skin="earned-seal"] .nb tr[data-p] td.p .pos { font: 400 37px/1 "Leckerli One", cursive; letter-spacing: 0; }
:root[data-skin="earned-seal"] .nb tr[data-p] td { background: color-mix(in srgb, var(--gold-seal) 7%, transparent); }
:root[data-skin="earned-seal"] .nb-method section::before { font-size: 37px; }
:root[data-skin="earned-seal"] .nb-needs .val, :root[data-skin="earned-seal"] .nb-out .val, :root[data-skin="earned-seal"] .nb-strip span.v { font-family: var(--font-display); font-weight: 800; font-style: italic; letter-spacing: -.02em; }
:root[data-skin="earned-seal"] .nb-needs .val, :root[data-skin="earned-seal"] .nb-needs .val *, :root[data-skin="earned-seal"] .nb-out .val, :root[data-skin="earned-seal"] .nb-finish .pos { font-family: var(--font-display) !important; font-weight: 800 !important; font-style: italic !important; }
:root[data-skin="earned-seal"] .nb th { font-weight: 700; letter-spacing: .12em; }
:root[data-skin="earned-seal"] .nb .chip { font-family: var(--font-sans); font-weight: 650; }
:root[data-skin="earned-seal"] .nb .chip.pd { background: color-mix(in srgb, var(--gold-seal) 24%, transparent); }

/* footer: the seal signs it off */
:root[data-skin="earned-seal"] .nb-brand { display: none; }
:root[data-skin="earned-seal"] .es-foot-seal { display: block; position: relative; width: 96px; height: 96px; margin-bottom: 22px; color: var(--es-seal-ring); --c2-r: var(--es-seal-r); isolation: isolate; }

@media (prefers-color-scheme: dark) { :root[data-skin="earned-seal"]:not([data-theme="light"]) .nb .chip.pd { background: transparent; box-shadow: inset 0 0 0 1px #D3A957; color: #E2C27F; } }
:root[data-skin="earned-seal"][data-theme="dark"] .nb .chip.pd { background: transparent; box-shadow: inset 0 0 0 1px #D3A957; color: #E2C27F; }