/* Add a colour here, never in a component (AGENTS.md). */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-ext-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --white: #ffffff;
  --gray-9: #d6d6d6;
  --gray-8: #a0a0a0;
  --gray-7: #7a7a7a;
  --gray-6: #5a5a5a;
  --gray-5: #3a3a3a;
  --gray-4: #303030;
  --gray-3: #262626;
  --gray-2: #1c1c1c;
  --gray-1: #141414;
  --black: #0b0b0b;
  --accent: #0668e1;
  --accent-hover: #1079f9;
  --danger: #e0453a;
  --danger-text: #f47a70;
  --success: #3fb56b;
  --warning: #ee8a2b;
  --team-british: #c9363c;
  --team-french: #1f4e74;
  /* The sides' flags on the HUD (components/NationalFlag), in the period colours of the cloth on the field (utils/flagCloth.ts) */
  --flag-union-blue: #1f2f5a;
  --flag-union-red: #8e1f24;
  --flag-french-blue: #1f3f8c;
  --flag-french-red: #b3262d;
  --flag-white: #e8e2d2;
  /* The one corner radius of the interface; circles and hairlines keep their own */
  --radius: 8px;
}
/* components/LoadingSpinner and index.html's first paint */
@keyframes spinner-turn { to { transform: rotate(360deg); } }
.spinner { will-change: transform; animation: spinner-turn 1.1s linear infinite; }
html, body {
  font-family: var(--font-ui);
}
button, input, select, textarea {
  font-family: inherit;
}
/* The corners of every panel, dialog and page of the interface (class "laurel"): a riveted iron plate in each corner and an outer
   frame line, in the border colour, drawn over the content. --laurel-size is the corner's edge; "laurel-sm" is the small one for cards. */
:where(.laurel) { position: relative; --laurel-size: 56px; }
.laurel.laurel-sm { --laurel-size: 32px; }
.laurel::before, .laurel::after { content: ''; position: absolute; inset: 0; background: var(--gray-4); pointer-events: none; z-index: 1; }
.laurel::before { --laurel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2056'%3E%3Cpath%20d%3D'M8%208H48L40%2016H16V40L8%2048Z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Ccircle%20cx%3D'12.5'%20cy%3D'12.5'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'12'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'41'%20cy%3D'12'%20r%3D'1.1'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'29'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'41'%20r%3D'1.1'%2F%3E%3C%2Fsvg%3E") left top / var(--laurel-size) var(--laurel-size) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2056'%3E%3Cg%20transform%3D'matrix(-1%200%200%201%2056%200)'%3E%3Cpath%20d%3D'M8%208H48L40%2016H16V40L8%2048Z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Ccircle%20cx%3D'12.5'%20cy%3D'12.5'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'12'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'41'%20cy%3D'12'%20r%3D'1.1'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'29'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'41'%20r%3D'1.1'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top / var(--laurel-size) var(--laurel-size) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2056'%3E%3Cg%20transform%3D'matrix(1%200%200%20-1%200%2056)'%3E%3Cpath%20d%3D'M8%208H48L40%2016H16V40L8%2048Z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Ccircle%20cx%3D'12.5'%20cy%3D'12.5'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'12'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'41'%20cy%3D'12'%20r%3D'1.1'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'29'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'41'%20r%3D'1.1'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left bottom / var(--laurel-size) var(--laurel-size) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2056'%3E%3Cg%20transform%3D'matrix(-1%200%200%20-1%2056%2056)'%3E%3Cpath%20d%3D'M8%208H48L40%2016H16V40L8%2048Z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Ccircle%20cx%3D'12.5'%20cy%3D'12.5'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'12'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'41'%20cy%3D'12'%20r%3D'1.1'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'29'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'41'%20r%3D'1.1'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right bottom / var(--laurel-size) var(--laurel-size) no-repeat; -webkit-mask: var(--laurel-mask); mask: var(--laurel-mask); }
.laurel::after { --laurel-mask: linear-gradient(#000 0 0) left calc(var(--laurel-size) * 6 / 7) top calc(var(--laurel-size) / 7) / calc(100% - var(--laurel-size) * 12 / 7) 1px no-repeat, linear-gradient(#000 0 0) left calc(var(--laurel-size) * 6 / 7) bottom calc(var(--laurel-size) / 7) / calc(100% - var(--laurel-size) * 12 / 7) 1px no-repeat, linear-gradient(#000 0 0) left calc(var(--laurel-size) / 7) top calc(var(--laurel-size) * 6 / 7) / 1px calc(100% - var(--laurel-size) * 12 / 7) no-repeat, linear-gradient(#000 0 0) right calc(var(--laurel-size) / 7) top calc(var(--laurel-size) * 6 / 7) / 1px calc(100% - var(--laurel-size) * 12 / 7) no-repeat; -webkit-mask: var(--laurel-mask); mask: var(--laurel-mask); }
/* End screen only (components/MatchEndScreen): leaf-branch corners in place of the riveted plate; no other panel takes it. */
:where(.laurel-branch) { position: relative; --branch-size: 70px; }
.laurel-branch::before, .laurel-branch::after { content: ''; position: absolute; left: 0; right: 0; height: var(--branch-size); background: var(--gray-8); pointer-events: none; z-index: 1; }
.laurel-branch::before { top: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2090%27%3E%3Cdefs%3E%3Cellipse%20id%3D%27e%27%20rx%3D%276.2%27%20ry%3D%272.6%27%2F%3E%3Cg%20id%3D%27l%27%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(28%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(32%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(39%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(43%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(50%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(54%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(61%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(65%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(72%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(76%209)%20rotate(28)%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(6%206)%27%3E%3Cpath%20d%3D%27M4%2084V4H84%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cuse%20href%3D%27%23l%27%2F%3E%3Cuse%20href%3D%27%23l%27%20transform%3D%27matrix(0%201%201%200%200%200)%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left / var(--branch-size) var(--branch-size) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2090%27%3E%3Cg%20transform%3D%27matrix(-1%200%200%201%2090%200)%27%3E%3Cdefs%3E%3Cellipse%20id%3D%27e%27%20rx%3D%276.2%27%20ry%3D%272.6%27%2F%3E%3Cg%20id%3D%27l%27%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(28%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(32%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(39%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(43%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(50%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(54%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(61%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(65%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(72%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(76%209)%20rotate(28)%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(6%206)%27%3E%3Cpath%20d%3D%27M4%2084V4H84%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cuse%20href%3D%27%23l%27%2F%3E%3Cuse%20href%3D%27%23l%27%20transform%3D%27matrix(0%201%201%200%200%200)%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") right / var(--branch-size) var(--branch-size) no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2090%27%3E%3Cdefs%3E%3Cellipse%20id%3D%27e%27%20rx%3D%276.2%27%20ry%3D%272.6%27%2F%3E%3Cg%20id%3D%27l%27%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(28%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(32%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(39%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(43%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(50%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(54%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(61%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(65%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(72%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(76%209)%20rotate(28)%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(6%206)%27%3E%3Cpath%20d%3D%27M4%2084V4H84%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cuse%20href%3D%27%23l%27%2F%3E%3Cuse%20href%3D%27%23l%27%20transform%3D%27matrix(0%201%201%200%200%200)%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left / var(--branch-size) var(--branch-size) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2090%27%3E%3Cg%20transform%3D%27matrix(-1%200%200%201%2090%200)%27%3E%3Cdefs%3E%3Cellipse%20id%3D%27e%27%20rx%3D%276.2%27%20ry%3D%272.6%27%2F%3E%3Cg%20id%3D%27l%27%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(28%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(32%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(39%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(43%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(50%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(54%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(61%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(65%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(72%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(76%209)%20rotate(28)%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(6%206)%27%3E%3Cpath%20d%3D%27M4%2084V4H84%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cuse%20href%3D%27%23l%27%2F%3E%3Cuse%20href%3D%27%23l%27%20transform%3D%27matrix(0%201%201%200%200%200)%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") right / var(--branch-size) var(--branch-size) no-repeat; }
.laurel-branch::after { bottom: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2090%27%3E%3Cg%20transform%3D%27matrix(1%200%200%20-1%200%2090)%27%3E%3Cdefs%3E%3Cellipse%20id%3D%27e%27%20rx%3D%276.2%27%20ry%3D%272.6%27%2F%3E%3Cg%20id%3D%27l%27%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(28%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(32%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(39%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(43%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(50%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(54%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(61%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(65%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(72%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(76%209)%20rotate(28)%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(6%206)%27%3E%3Cpath%20d%3D%27M4%2084V4H84%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cuse%20href%3D%27%23l%27%2F%3E%3Cuse%20href%3D%27%23l%27%20transform%3D%27matrix(0%201%201%200%200%200)%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") left / var(--branch-size) var(--branch-size) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2090%27%3E%3Cg%20transform%3D%27matrix(-1%200%200%20-1%2090%2090)%27%3E%3Cdefs%3E%3Cellipse%20id%3D%27e%27%20rx%3D%276.2%27%20ry%3D%272.6%27%2F%3E%3Cg%20id%3D%27l%27%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(28%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(32%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(39%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(43%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(50%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(54%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(61%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(65%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(72%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(76%209)%20rotate(28)%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(6%206)%27%3E%3Cpath%20d%3D%27M4%2084V4H84%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cuse%20href%3D%27%23l%27%2F%3E%3Cuse%20href%3D%27%23l%27%20transform%3D%27matrix(0%201%201%200%200%200)%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") right / var(--branch-size) var(--branch-size) no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2090%27%3E%3Cg%20transform%3D%27matrix(1%200%200%20-1%200%2090)%27%3E%3Cdefs%3E%3Cellipse%20id%3D%27e%27%20rx%3D%276.2%27%20ry%3D%272.6%27%2F%3E%3Cg%20id%3D%27l%27%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(28%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(32%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(39%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(43%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(50%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(54%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(61%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(65%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(72%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(76%209)%20rotate(28)%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(6%206)%27%3E%3Cpath%20d%3D%27M4%2084V4H84%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cuse%20href%3D%27%23l%27%2F%3E%3Cuse%20href%3D%27%23l%27%20transform%3D%27matrix(0%201%201%200%200%200)%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") left / var(--branch-size) var(--branch-size) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2090%27%3E%3Cg%20transform%3D%27matrix(-1%200%200%20-1%2090%2090)%27%3E%3Cdefs%3E%3Cellipse%20id%3D%27e%27%20rx%3D%276.2%27%20ry%3D%272.6%27%2F%3E%3Cg%20id%3D%27l%27%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(28%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(32%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(39%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(43%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(50%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(54%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(61%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(65%209)%20rotate(28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(72%20-1)%20rotate(-28)%27%2F%3E%3Cuse%20href%3D%27%23e%27%20transform%3D%27translate(76%209)%20rotate(28)%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(6%206)%27%3E%3Cpath%20d%3D%27M4%2084V4H84%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cuse%20href%3D%27%23l%27%2F%3E%3Cuse%20href%3D%27%23l%27%20transform%3D%27matrix(0%201%201%200%200%200)%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") right / var(--branch-size) var(--branch-size) no-repeat; }
.laurel-branch { outline: 1px solid color-mix(in srgb, var(--gray-8) 40%, transparent); outline-offset: calc(var(--branch-size) / -9); }