/* Vitral: Janela's optional theme.

   A vitral is a stained glass window, which is what this makes of a dashboard.
   Each pane holds its own colour, dark leading runs between them, and the
   light comes from behind rather than from a lamp in the room.

   It is separate from janela.css on purpose. That one is structure: the grid
   classes an analyst's numbers choose from, and enough style that a pane is
   legible on install. This one is taste, and taste is the first thing a host
   will want to replace (ADR 023).

       <%= stylesheet_link_tag "janela" %>
       <%= stylesheet_link_tag "vitral" %>

   Order matters: vitral is written to sit on top of janela. Everything here
   is a custom property or a janela-* class, so it touches nothing of yours.
   Set the properties on :root to retheme it without editing this file, and
   put class="vitral" on the element that should carry the light. */

:root {
  --vitral-ink: #16202b;
  --vitral-muted: #4a5766;

  /* The light behind the window. */
  --vitral-light-cobalt: rgba(54, 122, 235, 0.34);
  --vitral-light-teal: rgba(30, 170, 160, 0.26);
  --vitral-light-amber: rgba(242, 178, 74, 0.26);
  --vitral-light-rose: rgba(226, 98, 132, 0.20);
  --vitral-light-violet: rgba(138, 110, 228, 0.22);
  --vitral-ground: #e3eaf3;
  /* The sun outside the window, the shafts it throws across the room, and
     the ghosts a lens makes of it. */
  --vitral-flare: rgba(255, 252, 244, 0.7);
  --vitral-sun-x: 88vw;
  --vitral-sun-y: -2vh;
  --vitral-shaft: rgba(255, 253, 248, 0.92);

  /* The glass, one hue per pane, laid over white so that only the surface
     takes the colour and the text keeps its contrast. */
  --vitral-pane-1: rgba(54, 122, 235, 0.32);
  --vitral-pane-2: rgba(28, 168, 158, 0.30);
  --vitral-pane-3: rgba(240, 176, 70, 0.34);
  --vitral-pane-4: rgba(224, 96, 130, 0.28);
  --vitral-pane-5: rgba(138, 110, 228, 0.30);

  --vitral-glass: rgba(255, 255, 255, 0.55);
  --vitral-glass-strong: rgba(255, 255, 255, 0.78);
  --vitral-blur: saturate(160%) blur(14px);

  /* Came: the dark lead that holds each pane. */
  --vitral-came: rgba(26, 38, 54, 0.38);
  --vitral-came-soft: rgba(26, 38, 54, 0.22);

  /* The lead's own colour, and how much of it survives behind the reading
     column. Both deliberately faint: this is texture at the edge of sight,
     and it competes with the text the moment it is anything more. */
  --vitral-lattice-ink: rgba(44, 62, 84, 0.14);
  /* Held back only where the words are, which on a wide screen is the left of
     the reading column rather than the middle of the window. The dip used to
     span the whole centre and took the pattern out of a large area that has
     nothing in it to clash with. */
  --vitral-lattice-mask: linear-gradient(90deg,
    #000 0 10%, rgba(0, 0, 0, 0.42) 20%, rgba(0, 0, 0, 0.42) 46%, #000 62% 100%);

  --vitral-radius: 10px;
  --vitral-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 34px -22px rgba(16, 24, 40, 0.45);

  /* Janela's own two properties, restated in the theme's terms so the parts
     janela.css draws agree with the parts this one does. */
  --janela-line: var(--vitral-came-soft);
  --janela-accent: rgb(40, 110, 205);

  /* The colours a bar, a doughnut slice or a pie slice is drawn in, by
     position (ADR 046, ADR 026). Soft glass rather than bright: a first
     version in saturated jewel tones read as a rainbow against the pale tiles,
     so these sit at about half the chroma and lean on differences in lightness
     to keep neighbours apart (the plum and the dusty rose are the darker ones).
     Chosen as an ordered set and run through the palette checker: adjacent
     colour vision separation 12.4 (target 8) and adjacent normal vision
     separation 15.8 (floor 15). The order is what keeps neighbours apart, so a
     reorder has to be re-checked. Slot 1 is a softer blue of its own and not
     the accent, which stays the stronger blue for what is selected. The neutral
     past the eighth is the grey of lead came. */
  --janela-series-1: #608fcb;
  --janela-series-2: #56ab81;
  --janela-series-3: #a492da;
  --janela-series-4: #91507d;
  --janela-series-5: #be774e;
  --janela-series-6: #159da9;
  --janela-series-7: #c29e51;
  --janela-series-8: #994b59;
  --janela-series-other: #8794a6;
}

/* Opt in, because a theme that repaints a host's <body> uninvited is not a
   theme, it is a takeover. Janela's own pages carry it themselves. */
.vitral, .janela-page {
  color: var(--vitral-ink);
  background-color: var(--vitral-ground);
}

.vitral, body:has(> .janela-page) { min-height: 100vh; }

.vitral::before, .janela-page::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  background:
    /* Shafts of light, angled and parallel, the way a leadlight window throws
       them across a floor. A linear gradient is already a band at an angle,
       so no rotated element is needed for it. Soft stops on both sides,
       because a hard edge reads as a graphic rather than as light. */
    /* Shafts of light, angled and parallel, the way a leadlight window throws
       them across a floor. A band is perpendicular to its gradient's angle, so
       falling from the top right means an axis pointing down and right. */
    linear-gradient(135deg,
      transparent 36%, rgba(255, 252, 246, 0.22) 41%, var(--vitral-shaft) 45.5%,
      rgba(255, 252, 246, 0.3) 49%, transparent 55%),
    linear-gradient(135deg,
      transparent 54%, rgba(255, 252, 247, 0.55) 58%, rgba(255, 252, 247, 0.16) 61%, transparent 66%),
    linear-gradient(135deg,
      transparent 64%, rgba(255, 251, 245, 0.34) 68%, transparent 74%),
    /* A cooler band between the shafts, because light is only bright next to
       something that is not. */
    linear-gradient(135deg,
      transparent 49%, rgba(104, 128, 166, 0.14) 52.5%, transparent 56%),

    /* The flare, first so it sits over the colour rather than under it.
       This layer hangs 20vmax outside the window on every side, so a
       percentage here is not a percentage of the screen. Positions are given
       in screen units and shifted by the overhang, which is why every one of
       them carries the same + 20vmax. */
    radial-gradient(4vmax 4vmax at calc(var(--vitral-sun-x) + 20vmax) calc(var(--vitral-sun-y) + 20vmax),
      rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5) 42%, transparent 66%),
    radial-gradient(22vmax 22vmax at calc(var(--vitral-sun-x) + 20vmax) calc(var(--vitral-sun-y) + 20vmax),
      var(--vitral-flare), rgba(255, 250, 238, 0.24) 40%, transparent 64%),
    radial-gradient(4vmax 4vmax at calc(68vw + 20vmax) calc(24vh + 20vmax),
      rgba(255, 236, 198, 0.42), transparent 62%),
    radial-gradient(2.4vmax 2.4vmax at calc(60vw + 20vmax) calc(35vh + 20vmax),
      rgba(198, 226, 255, 0.4), transparent 64%),
    radial-gradient(6vmax 6vmax at calc(47vw + 20vmax) calc(50vh + 20vmax),
      rgba(255, 224, 212, 0.26), transparent 66%),
    radial-gradient(1.8vmax 1.8vmax at calc(37vw + 20vmax) calc(64vh + 20vmax),
      rgba(206, 238, 222, 0.34), transparent 62%),
    radial-gradient(34vmax 34vmax at 11% 6%, var(--vitral-light-cobalt), transparent 58%),
    radial-gradient(22vmax 22vmax at 38% 27%, var(--vitral-light-teal), transparent 55%),
    radial-gradient(30vmax 30vmax at 83% 14%, var(--vitral-light-rose), transparent 56%),
    radial-gradient(26vmax 26vmax at 64% 47%, var(--vitral-light-violet), transparent 58%),
    radial-gradient(38vmax 38vmax at 91% 69%, var(--vitral-light-amber), transparent 60%),
    radial-gradient(28vmax 28vmax at 23% 81%, var(--vitral-light-teal), transparent 58%),
    radial-gradient(24vmax 24vmax at 57% 96%, var(--vitral-light-cobalt), transparent 55%);
  /* The far layer of the parallax: light moves with the pointer, lead moves
     against it, which is what gives the glass its depth. Both sit still until
     something sets the properties, so this is nothing without the controller
     and nothing for anyone who asked for less motion. */
  transform: translate3d(calc(var(--vitral-shift-x, 0) * 26px),
                         calc(var(--vitral-shift-y, 0) * 26px + var(--vitral-drift-far, 0px)), 0);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

/* The leadlight itself: cut once with a seeded random hand, so no two cells
   are the same shape and nothing repeats across the viewport. Inlined rather
   than shipped as an image, because a stylesheet in a gem cannot rely on a
   host's asset pipeline to resolve a url().

   Masked away from the middle, which is the part of a real window you put
   clear glass in so that you can see out of it. Text sits there; the leading
   stays in the margins where it belongs. */
.vitral::after, .janela-page::after {
  content: "";
  position: fixed;
  inset: -6vmax;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1200' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='rgba(44,62,84,0.11)' stroke-width='1' stroke-linejoin='round'%3E%3Cpolygon points='0.0,0.0 66.9,0.0 78.6,121.4 0.0,98.3' fill='none'/%3E%3Cpolygon points='66.9,0.0 192.5,0.0 178.8,94.6 78.6,121.4' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='192.5,0.0 290.9,0.0 305.4,64.6' fill='none'/%3E%3Cpolygon points='192.5,0.0 305.4,64.6 178.8,94.6' fill='none'/%3E%3Cpolygon points='290.9,0.0 350.1,0.0 363.5,120.0 305.4,64.6' fill='none'/%3E%3Cpolygon points='350.1,0.0 494.7,0.0 363.5,120.0' fill='none'/%3E%3Cpolygon points='494.7,0.0 457.4,69.4 363.5,120.0' fill='none'/%3E%3Cpolygon points='494.7,0.0 575.6,0.0 457.4,69.4' fill='none'/%3E%3Cpolygon points='575.6,0.0 554.0,78.0 457.4,69.4' fill='none'/%3E%3Cpolygon points='575.6,0.0 637.9,0.0 676.6,71.5 554.0,78.0' fill='none'/%3E%3Cpolygon points='637.9,0.0 776.8,0.0 722.9,91.5 676.6,71.5' fill='none'/%3E%3Cpolygon points='776.8,0.0 846.7,0.0 823.2,107.7' fill='none'/%3E%3Cpolygon points='776.8,0.0 823.2,107.7 722.9,91.5' fill='none'/%3E%3Cpolygon points='846.7,0.0 966.9,0.0 823.2,107.7' fill='none'/%3E%3Cpolygon points='966.9,0.0 932.0,109.5 823.2,107.7' fill='none'/%3E%3Cpolygon points='966.9,0.0 1063.4,0.0 1024.1,73.2 932.0,109.5' fill='none'/%3E%3Cpolygon points='1063.4,0.0 1104.8,0.0 1158.1,71.1 1024.1,73.2' fill='none'/%3E%3Cpolygon points='1104.8,0.0 1226.9,0.0 1198.1,64.3 1158.1,71.1' fill='none'/%3E%3Cpolygon points='1226.9,0.0 1339.6,0.0 1198.1,64.3' fill='none'/%3E%3Cpolygon points='1339.6,0.0 1313.3,67.5 1198.1,64.3' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1339.6,0.0 1386.6,0.0 1426.1,85.2' fill='none'/%3E%3Cpolygon points='1339.6,0.0 1426.1,85.2 1313.3,67.5' fill='none'/%3E%3Cpolygon points='1386.6,0.0 1501.7,0.0 1511.4,112.5 1426.1,85.2' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1501.7,0.0 1600.0,0.0 1600.0,98.7 1511.4,112.5' fill='none'/%3E%3Cpolygon points='0.0,98.3 78.6,121.4 0.0,176.0' fill='none'/%3E%3Cpolygon points='78.6,121.4 84.3,182.0 0.0,176.0' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='78.6,121.4 178.8,94.6 166.6,196.7 84.3,182.0' fill='none'/%3E%3Cpolygon points='178.8,94.6 305.4,64.6 309.4,174.0 166.6,196.7' fill='none'/%3E%3Cpolygon points='305.4,64.6 363.5,120.0 309.4,174.0' fill='none'/%3E%3Cpolygon points='363.5,120.0 384.6,204.4 309.4,174.0' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='363.5,120.0 457.4,69.4 476.7,177.4 384.6,204.4' fill='none'/%3E%3Cpolygon points='457.4,69.4 554.0,78.0 476.7,177.4' fill='none'/%3E%3Cpolygon points='554.0,78.0 554.0,189.5 476.7,177.4' fill='none'/%3E%3Cpolygon points='554.0,78.0 676.6,71.5 675.8,168.7' fill='none'/%3E%3Cpolygon points='554.0,78.0 675.8,168.7 554.0,189.5' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='676.6,71.5 722.9,91.5 774.9,166.4' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='676.6,71.5 774.9,166.4 675.8,168.7' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='722.9,91.5 823.2,107.7 859.6,171.5' fill='none'/%3E%3Cpolygon points='722.9,91.5 859.6,171.5 774.9,166.4' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='823.2,107.7 932.0,109.5 923.8,164.1 859.6,171.5' fill='none'/%3E%3Cpolygon points='932.0,109.5 1024.1,73.2 1044.8,185.9 923.8,164.1' fill='none'/%3E%3Cpolygon points='1024.1,73.2 1158.1,71.1 1143.2,205.1 1044.8,185.9' fill='none'/%3E%3Cpolygon points='1158.1,71.1 1198.1,64.3 1226.6,187.2 1143.2,205.1' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='1198.1,64.3 1313.3,67.5 1328.8,197.5 1226.6,187.2' fill='none'/%3E%3Cpolygon points='1313.3,67.5 1426.1,85.2 1384.3,200.6' fill='none'/%3E%3Cpolygon points='1313.3,67.5 1384.3,200.6 1328.8,197.5' fill='none'/%3E%3Cpolygon points='1426.1,85.2 1511.4,112.5 1527.8,181.8 1384.3,200.6' fill='none'/%3E%3Cpolygon points='1511.4,112.5 1600.0,98.7 1600.0,165.0' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='1511.4,112.5 1600.0,165.0 1527.8,181.8' fill='none'/%3E%3Cpolygon points='0.0,176.0 84.3,182.0 0.0,269.6' fill='none'/%3E%3Cpolygon points='84.3,182.0 121.3,291.5 0.0,269.6' fill='none'/%3E%3Cpolygon points='84.3,182.0 166.6,196.7 160.3,281.3 121.3,291.5' fill='none'/%3E%3Cpolygon points='166.6,196.7 309.4,174.0 287.4,278.9' fill='none'/%3E%3Cpolygon points='166.6,196.7 287.4,278.9 160.3,281.3' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='309.4,174.0 384.6,204.4 389.5,304.1 287.4,278.9' fill='none'/%3E%3Cpolygon points='384.6,204.4 476.7,177.4 474.3,256.5 389.5,304.1' fill='none'/%3E%3Cpolygon points='476.7,177.4 554.0,189.5 569.7,251.7 474.3,256.5' fill='none'/%3E%3Cpolygon points='554.0,189.5 675.8,168.7 672.5,283.9 569.7,251.7' fill='none'/%3E%3Cpolygon points='675.8,168.7 774.9,166.4 734.9,272.3 672.5,283.9' fill='none'/%3E%3Cpolygon points='774.9,166.4 859.6,171.5 846.6,287.4 734.9,272.3' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='859.6,171.5 923.8,164.1 963.1,257.5 846.6,287.4' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='923.8,164.1 1044.8,185.9 1060.5,253.6 963.1,257.5' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1044.8,185.9 1143.2,205.1 1117.1,289.7' fill='none'/%3E%3Cpolygon points='1044.8,185.9 1117.1,289.7 1060.5,253.6' fill='none'/%3E%3Cpolygon points='1143.2,205.1 1226.6,187.2 1117.1,289.7' fill='none'/%3E%3Cpolygon points='1226.6,187.2 1230.4,286.1 1117.1,289.7' fill='none'/%3E%3Cpolygon points='1226.6,187.2 1328.8,197.5 1343.4,275.3 1230.4,286.1' fill='none'/%3E%3Cpolygon points='1328.8,197.5 1384.3,200.6 1343.4,275.3' fill='none'/%3E%3Cpolygon points='1384.3,200.6 1383.9,263.9 1343.4,275.3' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1384.3,200.6 1527.8,181.8 1482.4,282.6 1383.9,263.9' fill='none'/%3E%3Cpolygon points='1527.8,181.8 1600.0,165.0 1600.0,268.9 1482.4,282.6' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='0.0,269.6 121.3,291.5 113.1,370.3 0.0,344.0' fill='none'/%3E%3Cpolygon points='121.3,291.5 160.3,281.3 188.0,371.8 113.1,370.3' fill='none'/%3E%3Cpolygon points='160.3,281.3 287.4,278.9 282.9,349.5' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='160.3,281.3 282.9,349.5 188.0,371.8' fill='none'/%3E%3Cpolygon points='287.4,278.9 389.5,304.1 403.9,354.6 282.9,349.5' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='389.5,304.1 474.3,256.5 452.9,358.5 403.9,354.6' fill='none'/%3E%3Cpolygon points='474.3,256.5 569.7,251.7 547.1,374.2 452.9,358.5' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='569.7,251.7 672.5,283.9 547.1,374.2' fill='none'/%3E%3Cpolygon points='672.5,283.9 664.3,359.3 547.1,374.2' fill='none'/%3E%3Cpolygon points='672.5,283.9 734.9,272.3 765.0,342.7 664.3,359.3' fill='none'/%3E%3Cpolygon points='734.9,272.3 846.6,287.4 822.4,394.5 765.0,342.7' fill='none'/%3E%3Cpolygon points='846.6,287.4 963.1,257.5 915.0,368.7' fill='none'/%3E%3Cpolygon points='846.6,287.4 915.0,368.7 822.4,394.5' fill='none'/%3E%3Cpolygon points='963.1,257.5 1060.5,253.6 1030.4,358.6' fill='none'/%3E%3Cpolygon points='963.1,257.5 1030.4,358.6 915.0,368.7' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1060.5,253.6 1117.1,289.7 1150.6,379.6 1030.4,358.6' fill='none'/%3E%3Cpolygon points='1117.1,289.7 1230.4,286.1 1208.7,362.3 1150.6,379.6' fill='none'/%3E%3Cpolygon points='1230.4,286.1 1343.4,275.3 1208.7,362.3' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='1343.4,275.3 1345.7,347.6 1208.7,362.3' fill='none'/%3E%3Cpolygon points='1343.4,275.3 1383.9,263.9 1416.4,374.4 1345.7,347.6' fill='none'/%3E%3Cpolygon points='1383.9,263.9 1482.4,282.6 1416.4,374.4' fill='none'/%3E%3Cpolygon points='1482.4,282.6 1480.3,354.4 1416.4,374.4' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1482.4,282.6 1600.0,268.9 1600.0,374.1 1480.3,354.4' fill='none'/%3E%3Cpolygon points='0.0,344.0 113.1,370.3 118.3,454.2 0.0,486.0' fill='none'/%3E%3Cpolygon points='113.1,370.3 188.0,371.8 118.3,454.2' fill='none'/%3E%3Cpolygon points='188.0,371.8 198.5,435.2 118.3,454.2' fill='none'/%3E%3Cpolygon points='188.0,371.8 282.9,349.5 292.9,458.6 198.5,435.2' fill='none'/%3E%3Cpolygon points='282.9,349.5 403.9,354.6 376.0,452.4 292.9,458.6' fill='none'/%3E%3Cpolygon points='403.9,354.6 452.9,358.5 466.8,442.9 376.0,452.4' fill='none'/%3E%3Cpolygon points='452.9,358.5 547.1,374.2 568.1,474.3' fill='none'/%3E%3Cpolygon points='452.9,358.5 568.1,474.3 466.8,442.9' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='547.1,374.2 664.3,359.3 654.3,476.5 568.1,474.3' fill='none'/%3E%3Cpolygon points='664.3,359.3 765.0,342.7 740.7,453.5' fill='none'/%3E%3Cpolygon points='664.3,359.3 740.7,453.5 654.3,476.5' fill='none'/%3E%3Cpolygon points='765.0,342.7 822.4,394.5 856.4,442.5 740.7,453.5' fill='none'/%3E%3Cpolygon points='822.4,394.5 915.0,368.7 856.4,442.5' fill='none'/%3E%3Cpolygon points='915.0,368.7 962.7,475.9 856.4,442.5' fill='none'/%3E%3Cpolygon points='915.0,368.7 1030.4,358.6 1024.7,457.0 962.7,475.9' fill='none'/%3E%3Cpolygon points='1030.4,358.6 1150.6,379.6 1132.2,441.4 1024.7,457.0' fill='none'/%3E%3Cpolygon points='1150.6,379.6 1208.7,362.3 1236.3,459.1 1132.2,441.4' fill='none'/%3E%3Cpolygon points='1208.7,362.3 1345.7,347.6 1346.5,441.2 1236.3,459.1' fill='none'/%3E%3Cpolygon points='1345.7,347.6 1416.4,374.4 1346.5,441.2' fill='none'/%3E%3Cpolygon points='1416.4,374.4 1433.8,440.8 1346.5,441.2' fill='none'/%3E%3Cpolygon points='1416.4,374.4 1480.3,354.4 1520.8,465.4' fill='none'/%3E%3Cpolygon points='1416.4,374.4 1520.8,465.4 1433.8,440.8' fill='none'/%3E%3Cpolygon points='1480.3,354.4 1600.0,374.1 1600.0,488.9 1520.8,465.4' fill='none'/%3E%3Cpolygon points='0.0,486.0 118.3,454.2 68.3,539.9 0.0,581.1' fill='none'/%3E%3Cpolygon points='118.3,454.2 198.5,435.2 185.8,554.4 68.3,539.9' fill='none'/%3E%3Cpolygon points='198.5,435.2 292.9,458.6 185.8,554.4' fill='none'/%3E%3Cpolygon points='292.9,458.6 257.8,535.1 185.8,554.4' fill='none'/%3E%3Cpolygon points='292.9,458.6 376.0,452.4 383.9,581.5' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='292.9,458.6 383.9,581.5 257.8,535.1' fill='none'/%3E%3Cpolygon points='376.0,452.4 466.8,442.9 383.9,581.5' fill='none'/%3E%3Cpolygon points='466.8,442.9 493.7,548.1 383.9,581.5' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='466.8,442.9 568.1,474.3 555.8,577.4 493.7,548.1' fill='none'/%3E%3Cpolygon points='568.1,474.3 654.3,476.5 555.8,577.4' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='654.3,476.5 655.8,581.0 555.8,577.4' fill='none'/%3E%3Cpolygon points='654.3,476.5 740.7,453.5 778.0,533.8 655.8,581.0' fill='none'/%3E%3Cpolygon points='740.7,453.5 856.4,442.5 820.0,534.9' fill='none'/%3E%3Cpolygon points='740.7,453.5 820.0,534.9 778.0,533.8' fill='none'/%3E%3Cpolygon points='856.4,442.5 962.7,475.9 928.9,548.1 820.0,534.9' fill='none'/%3E%3Cpolygon points='962.7,475.9 1024.7,457.0 1051.5,558.3 928.9,548.1' fill='none'/%3E%3Cpolygon points='1024.7,457.0 1132.2,441.4 1126.4,575.9 1051.5,558.3' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='1132.2,441.4 1236.3,459.1 1213.6,571.2 1126.4,575.9' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='1236.3,459.1 1346.5,441.2 1333.7,566.1 1213.6,571.2' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='1346.5,441.2 1433.8,440.8 1384.4,570.5' fill='none'/%3E%3Cpolygon points='1346.5,441.2 1384.4,570.5 1333.7,566.1' fill='none'/%3E%3Cpolygon points='1433.8,440.8 1520.8,465.4 1505.3,549.6 1384.4,570.5' fill='none'/%3E%3Cpolygon points='1520.8,465.4 1600.0,488.9 1505.3,549.6' fill='none'/%3E%3Cpolygon points='1600.0,488.9 1600.0,546.9 1505.3,549.6' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='0.0,581.1 68.3,539.9 76.3,643.0 0.0,639.1' fill='none'/%3E%3Cpolygon points='68.3,539.9 185.8,554.4 172.0,657.8 76.3,643.0' fill='none'/%3E%3Cpolygon points='185.8,554.4 257.8,535.1 267.0,658.5 172.0,657.8' fill='none'/%3E%3Cpolygon points='257.8,535.1 383.9,581.5 267.0,658.5' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='383.9,581.5 397.8,675.2 267.0,658.5' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='383.9,581.5 493.7,548.1 469.5,629.4 397.8,675.2' fill='none'/%3E%3Cpolygon points='493.7,548.1 555.8,577.4 469.5,629.4' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='555.8,577.4 577.8,621.2 469.5,629.4' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='555.8,577.4 655.8,581.0 577.8,621.2' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='655.8,581.0 686.5,665.2 577.8,621.2' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='655.8,581.0 778.0,533.8 725.7,671.2 686.5,665.2' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='778.0,533.8 820.0,534.9 871.8,662.1 725.7,671.2' fill='none'/%3E%3Cpolygon points='820.0,534.9 928.9,548.1 962.7,637.1 871.8,662.1' fill='none'/%3E%3Cpolygon points='928.9,548.1 1051.5,558.3 1030.1,669.3 962.7,637.1' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1051.5,558.3 1126.4,575.9 1030.1,669.3' fill='none'/%3E%3Cpolygon points='1126.4,575.9 1135.0,673.2 1030.1,669.3' fill='none'/%3E%3Cpolygon points='1126.4,575.9 1213.6,571.2 1236.0,634.0' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1126.4,575.9 1236.0,634.0 1135.0,673.2' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='1213.6,571.2 1333.7,566.1 1334.9,627.6 1236.0,634.0' fill='none'/%3E%3Cpolygon points='1333.7,566.1 1384.4,570.5 1431.0,636.6 1334.9,627.6' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1384.4,570.5 1505.3,549.6 1535.4,646.5 1431.0,636.6' fill='none'/%3E%3Cpolygon points='1505.3,549.6 1600.0,546.9 1600.0,646.6 1535.4,646.5' fill='none'/%3E%3Cpolygon points='0.0,639.1 76.3,643.0 0.0,717.3' fill='none'/%3E%3Cpolygon points='76.3,643.0 112.6,737.8 0.0,717.3' fill='none'/%3E%3Cpolygon points='76.3,643.0 172.0,657.8 112.6,737.8' fill='none'/%3E%3Cpolygon points='172.0,657.8 185.0,750.9 112.6,737.8' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='172.0,657.8 267.0,658.5 268.5,715.8 185.0,750.9' fill='none'/%3E%3Cpolygon points='267.0,658.5 397.8,675.2 390.3,725.8 268.5,715.8' fill='none'/%3E%3Cpolygon points='397.8,675.2 469.5,629.4 477.7,761.7 390.3,725.8' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='469.5,629.4 577.8,621.2 477.7,761.7' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='577.8,621.2 541.0,765.9 477.7,761.7' fill='none'/%3E%3Cpolygon points='577.8,621.2 686.5,665.2 541.0,765.9' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='686.5,665.2 644.4,724.5 541.0,765.9' fill='none'/%3E%3Cpolygon points='686.5,665.2 725.7,671.2 731.7,744.8' fill='none'/%3E%3Cpolygon points='686.5,665.2 731.7,744.8 644.4,724.5' fill='none'/%3E%3Cpolygon points='725.7,671.2 871.8,662.1 731.7,744.8' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='871.8,662.1 830.2,727.4 731.7,744.8' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='871.8,662.1 962.7,637.1 956.4,736.7 830.2,727.4' fill='none'/%3E%3Cpolygon points='962.7,637.1 1030.1,669.3 956.4,736.7' fill='none'/%3E%3Cpolygon points='1030.1,669.3 1060.9,731.7 956.4,736.7' fill='none'/%3E%3Cpolygon points='1030.1,669.3 1135.0,673.2 1139.7,767.0 1060.9,731.7' fill='none'/%3E%3Cpolygon points='1135.0,673.2 1236.0,634.0 1198.9,759.4 1139.7,767.0' fill='none'/%3E%3Cpolygon points='1236.0,634.0 1334.9,627.6 1305.6,717.6' fill='none'/%3E%3Cpolygon points='1236.0,634.0 1305.6,717.6 1198.9,759.4' fill='none'/%3E%3Cpolygon points='1334.9,627.6 1431.0,636.6 1305.6,717.6' fill='none'/%3E%3Cpolygon points='1431.0,636.6 1389.8,709.2 1305.6,717.6' fill='none'/%3E%3Cpolygon points='1431.0,636.6 1535.4,646.5 1502.2,724.2 1389.8,709.2' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='1535.4,646.5 1600.0,646.6 1502.2,724.2' fill='none'/%3E%3Cpolygon points='1600.0,646.6 1600.0,763.7 1502.2,724.2' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='0.0,717.3 112.6,737.8 0.0,856.8' fill='none'/%3E%3Cpolygon points='112.6,737.8 65.8,859.2 0.0,856.8' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='112.6,737.8 185.0,750.9 179.3,818.4 65.8,859.2' fill='none'/%3E%3Cpolygon points='185.0,750.9 268.5,715.8 264.9,827.5' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='185.0,750.9 264.9,827.5 179.3,818.4' fill='none'/%3E%3Cpolygon points='268.5,715.8 390.3,725.8 264.9,827.5' fill='none'/%3E%3Cpolygon points='390.3,725.8 357.6,840.9 264.9,827.5' fill='none'/%3E%3Cpolygon points='390.3,725.8 477.7,761.7 449.6,828.5 357.6,840.9' fill='none'/%3E%3Cpolygon points='477.7,761.7 541.0,765.9 574.2,810.2' fill='none'/%3E%3Cpolygon points='477.7,761.7 574.2,810.2 449.6,828.5' fill='none'/%3E%3Cpolygon points='541.0,765.9 644.4,724.5 574.2,810.2' fill='none'/%3E%3Cpolygon points='644.4,724.5 681.5,804.6 574.2,810.2' fill='none'/%3E%3Cpolygon points='644.4,724.5 731.7,744.8 681.5,804.6' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='731.7,744.8 745.8,804.4 681.5,804.6' fill='none'/%3E%3Cpolygon points='731.7,744.8 830.2,727.4 840.2,839.6 745.8,804.4' fill='none'/%3E%3Cpolygon points='830.2,727.4 956.4,736.7 947.7,841.2 840.2,839.6' fill='none'/%3E%3Cpolygon points='956.4,736.7 1060.9,731.7 1015.2,857.9' fill='none'/%3E%3Cpolygon points='956.4,736.7 1015.2,857.9 947.7,841.2' fill='none'/%3E%3Cpolygon points='1060.9,731.7 1139.7,767.0 1118.8,802.9 1015.2,857.9' fill='none'/%3E%3Cpolygon points='1139.7,767.0 1198.9,759.4 1230.0,843.7 1118.8,802.9' fill='none'/%3E%3Cpolygon points='1198.9,759.4 1305.6,717.6 1297.0,848.5 1230.0,843.7' fill='none'/%3E%3Cpolygon points='1305.6,717.6 1389.8,709.2 1430.1,810.1 1297.0,848.5' fill='none'/%3E%3Cpolygon points='1389.8,709.2 1502.2,724.2 1534.4,834.9' fill='none'/%3E%3Cpolygon points='1389.8,709.2 1534.4,834.9 1430.1,810.1' fill='none'/%3E%3Cpolygon points='1502.2,724.2 1600.0,763.7 1600.0,816.2 1534.4,834.9' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='0.0,856.8 65.8,859.2 98.7,897.9' fill='none'/%3E%3Cpolygon points='0.0,856.8 98.7,897.9 0.0,930.4' fill='none'/%3E%3Cpolygon points='65.8,859.2 179.3,818.4 188.5,894.9 98.7,897.9' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='179.3,818.4 264.9,827.5 188.5,894.9' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='264.9,827.5 273.2,914.3 188.5,894.9' fill='none'/%3E%3Cpolygon points='264.9,827.5 357.6,840.9 348.8,894.6 273.2,914.3' fill='none'/%3E%3Cpolygon points='357.6,840.9 449.6,828.5 479.8,951.2 348.8,894.6' fill='none'/%3E%3Cpolygon points='449.6,828.5 574.2,810.2 479.8,951.2' fill='none'/%3E%3Cpolygon points='574.2,810.2 554.6,924.2 479.8,951.2' fill='none'/%3E%3Cpolygon points='574.2,810.2 681.5,804.6 679.2,926.8' fill='none'/%3E%3Cpolygon points='574.2,810.2 679.2,926.8 554.6,924.2' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='681.5,804.6 745.8,804.4 679.2,926.8' fill='none'/%3E%3Cpolygon points='745.8,804.4 759.6,900.0 679.2,926.8' fill='none'/%3E%3Cpolygon points='745.8,804.4 840.2,839.6 818.8,926.4 759.6,900.0' fill='%23e06082' fill-opacity='0.04'/%3E%3Cpolygon points='840.2,839.6 947.7,841.2 919.9,948.5' fill='none'/%3E%3Cpolygon points='840.2,839.6 919.9,948.5 818.8,926.4' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='947.7,841.2 1015.2,857.9 919.9,948.5' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1015.2,857.9 1053.4,952.4 919.9,948.5' fill='none'/%3E%3Cpolygon points='1015.2,857.9 1118.8,802.9 1053.4,952.4' fill='none'/%3E%3Cpolygon points='1118.8,802.9 1100.6,902.2 1053.4,952.4' fill='none'/%3E%3Cpolygon points='1118.8,802.9 1230.0,843.7 1230.5,939.1 1100.6,902.2' fill='none'/%3E%3Cpolygon points='1230.0,843.7 1297.0,848.5 1288.9,945.5' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='1230.0,843.7 1288.9,945.5 1230.5,939.1' fill='none'/%3E%3Cpolygon points='1297.0,848.5 1430.1,810.1 1288.9,945.5' fill='none'/%3E%3Cpolygon points='1430.1,810.1 1384.1,935.1 1288.9,945.5' fill='none'/%3E%3Cpolygon points='1430.1,810.1 1534.4,834.9 1487.5,935.5' fill='none'/%3E%3Cpolygon points='1430.1,810.1 1487.5,935.5 1384.1,935.1' fill='none'/%3E%3Cpolygon points='1534.4,834.9 1600.0,816.2 1600.0,906.3 1487.5,935.5' fill='none'/%3E%3Cpolygon points='0.0,930.4 98.7,897.9 94.1,999.7 0.0,1014.5' fill='none'/%3E%3Cpolygon points='98.7,897.9 188.5,894.9 160.7,1019.8' fill='none'/%3E%3Cpolygon points='98.7,897.9 160.7,1019.8 94.1,999.7' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='188.5,894.9 273.2,914.3 160.7,1019.8' fill='none'/%3E%3Cpolygon points='273.2,914.3 261.5,1011.2 160.7,1019.8' fill='none'/%3E%3Cpolygon points='273.2,914.3 348.8,894.6 261.5,1011.2' fill='none'/%3E%3Cpolygon points='348.8,894.6 392.3,999.9 261.5,1011.2' fill='none'/%3E%3Cpolygon points='348.8,894.6 479.8,951.2 470.1,989.1 392.3,999.9' fill='none'/%3E%3Cpolygon points='479.8,951.2 554.6,924.2 588.8,1017.7 470.1,989.1' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='554.6,924.2 679.2,926.8 588.8,1017.7' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='679.2,926.8 653.7,998.0 588.8,1017.7' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='679.2,926.8 759.6,900.0 653.7,998.0' fill='none'/%3E%3Cpolygon points='759.6,900.0 764.9,998.4 653.7,998.0' fill='none'/%3E%3Cpolygon points='759.6,900.0 818.8,926.4 861.4,1005.9 764.9,998.4' fill='none'/%3E%3Cpolygon points='818.8,926.4 919.9,948.5 920.0,1014.1 861.4,1005.9' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='919.9,948.5 1053.4,952.4 1028.7,1001.1 920.0,1014.1' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='1053.4,952.4 1100.6,902.2 1157.4,990.4' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='1053.4,952.4 1157.4,990.4 1028.7,1001.1' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='1100.6,902.2 1230.5,939.1 1233.1,1004.1 1157.4,990.4' fill='none'/%3E%3Cpolygon points='1230.5,939.1 1288.9,945.5 1321.3,1043.1 1233.1,1004.1' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1288.9,945.5 1384.1,935.1 1424.6,992.5 1321.3,1043.1' fill='none'/%3E%3Cpolygon points='1384.1,935.1 1487.5,935.5 1424.6,992.5' fill='none'/%3E%3Cpolygon points='1487.5,935.5 1529.7,1010.4 1424.6,992.5' fill='none'/%3E%3Cpolygon points='1487.5,935.5 1600.0,906.3 1600.0,1004.9 1529.7,1010.4' fill='none'/%3E%3Cpolygon points='0.0,1014.5 94.1,999.7 83.1,1127.7' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='0.0,1014.5 83.1,1127.7 0.0,1123.4' fill='none'/%3E%3Cpolygon points='94.1,999.7 160.7,1019.8 83.1,1127.7' fill='none'/%3E%3Cpolygon points='160.7,1019.8 182.7,1125.6 83.1,1127.7' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='160.7,1019.8 261.5,1011.2 304.2,1130.4' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='160.7,1019.8 304.2,1130.4 182.7,1125.6' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='261.5,1011.2 392.3,999.9 351.1,1114.7 304.2,1130.4' fill='none'/%3E%3Cpolygon points='392.3,999.9 470.1,989.1 351.1,1114.7' fill='none'/%3E%3Cpolygon points='470.1,989.1 452.5,1088.3 351.1,1114.7' fill='none'/%3E%3Cpolygon points='470.1,989.1 588.8,1017.7 546.0,1135.9 452.5,1088.3' fill='none'/%3E%3Cpolygon points='588.8,1017.7 653.7,998.0 684.7,1088.3 546.0,1135.9' fill='none'/%3E%3Cpolygon points='653.7,998.0 764.9,998.4 684.7,1088.3' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='764.9,998.4 762.3,1107.9 684.7,1088.3' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='764.9,998.4 861.4,1005.9 870.9,1093.7 762.3,1107.9' fill='none'/%3E%3Cpolygon points='861.4,1005.9 920.0,1014.1 920.0,1135.3 870.9,1093.7' fill='none'/%3E%3Cpolygon points='920.0,1014.1 1028.7,1001.1 1038.4,1133.2 920.0,1135.3' fill='none'/%3E%3Cpolygon points='1028.7,1001.1 1157.4,990.4 1145.9,1094.5 1038.4,1133.2' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='1157.4,990.4 1233.1,1004.1 1228.3,1087.0 1145.9,1094.5' fill='none'/%3E%3Cpolygon points='1233.1,1004.1 1321.3,1043.1 1228.3,1087.0' fill='none'/%3E%3Cpolygon points='1321.3,1043.1 1335.7,1125.4 1228.3,1087.0' fill='none'/%3E%3Cpolygon points='1321.3,1043.1 1424.6,992.5 1426.0,1098.9' fill='none'/%3E%3Cpolygon points='1321.3,1043.1 1426.0,1098.9 1335.7,1125.4' fill='none'/%3E%3Cpolygon points='1424.6,992.5 1529.7,1010.4 1488.9,1087.4 1426.0,1098.9' fill='none'/%3E%3Cpolygon points='1529.7,1010.4 1600.0,1004.9 1600.0,1117.7' fill='none'/%3E%3Cpolygon points='1529.7,1010.4 1600.0,1117.7 1488.9,1087.4' fill='none'/%3E%3Cpolygon points='0.0,1123.4 83.1,1127.7 112.3,1200.0' fill='none'/%3E%3Cpolygon points='0.0,1123.4 112.3,1200.0 0.0,1200.0' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='83.1,1127.7 182.7,1125.6 112.3,1200.0' fill='none'/%3E%3Cpolygon points='182.7,1125.6 170.3,1200.0 112.3,1200.0' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='182.7,1125.6 304.2,1130.4 304.6,1200.0 170.3,1200.0' fill='%238a6ee4' fill-opacity='0.04'/%3E%3Cpolygon points='304.2,1130.4 351.1,1114.7 387.3,1200.0 304.6,1200.0' fill='none'/%3E%3Cpolygon points='351.1,1114.7 452.5,1088.3 463.3,1200.0 387.3,1200.0' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='452.5,1088.3 546.0,1135.9 572.0,1200.0' fill='none'/%3E%3Cpolygon points='452.5,1088.3 572.0,1200.0 463.3,1200.0' fill='none'/%3E%3Cpolygon points='546.0,1135.9 684.7,1088.3 572.0,1200.0' fill='%23f0b046' fill-opacity='0.04'/%3E%3Cpolygon points='684.7,1088.3 645.3,1200.0 572.0,1200.0' fill='none'/%3E%3Cpolygon points='684.7,1088.3 762.3,1107.9 761.8,1200.0 645.3,1200.0' fill='none'/%3E%3Cpolygon points='762.3,1107.9 870.9,1093.7 867.0,1200.0 761.8,1200.0' fill='%231ca89e' fill-opacity='0.04'/%3E%3Cpolygon points='870.9,1093.7 920.0,1135.3 925.1,1200.0 867.0,1200.0' fill='none'/%3E%3Cpolygon points='920.0,1135.3 1038.4,1133.2 1063.0,1200.0 925.1,1200.0' fill='none'/%3E%3Cpolygon points='1038.4,1133.2 1145.9,1094.5 1063.0,1200.0' fill='none'/%3E%3Cpolygon points='1145.9,1094.5 1103.4,1200.0 1063.0,1200.0' fill='%2338a6eb' fill-opacity='0.04'/%3E%3Cpolygon points='1145.9,1094.5 1228.3,1087.0 1235.6,1200.0 1103.4,1200.0' fill='none'/%3E%3Cpolygon points='1228.3,1087.0 1335.7,1125.4 1340.3,1200.0 1235.6,1200.0' fill='none'/%3E%3Cpolygon points='1335.7,1125.4 1426.0,1098.9 1428.0,1200.0 1340.3,1200.0' fill='none'/%3E%3Cpolygon points='1426.0,1098.9 1488.9,1087.4 1531.3,1200.0 1428.0,1200.0' fill='none'/%3E%3Cpolygon points='1488.9,1087.4 1600.0,1117.7 1600.0,1200.0' fill='none'/%3E%3Cpolygon points='1488.9,1087.4 1600.0,1200.0 1531.3,1200.0' fill='%238a6ee4' fill-opacity='0.04'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  -webkit-mask-image: var(--vitral-lattice-mask);
  mask-image: var(--vitral-lattice-mask);
  /* The near layer of the parallax, so the lead sits in front of the light. */
  transform: translate3d(calc(var(--vitral-shift-x, 0) * -10px),
                         calc(var(--vitral-shift-y, 0) * -10px + var(--vitral-drift-near, 0px)), 0);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}

/* A narrow screen is all reading column, so the leading thins out everywhere
   rather than changing shape at a breakpoint. */
@media (max-width: 64rem) {
  :root { --vitral-lattice-mask: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 100%); }
}

/* The live lattice, drawn by the optional controller. Same place, same mask,
   same job as the static one above, except that its nodes lean toward the
   pointer. The static one stands down when this arrives. */
.vitral-lattice {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  -webkit-mask-image: var(--vitral-lattice-mask);
  mask-image: var(--vitral-lattice-mask);
  transform: translate3d(calc(var(--vitral-shift-x, 0) * -10px),
                         calc(var(--vitral-shift-y, 0) * -10px + var(--vitral-drift-near, 0px)), 0);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}
.vitral-live::after { display: none; }

/* One recipe for everything that is meant to read as a pane of glass.
   .vitral-pane is public: put it on your own markup and the page around a
   dashboard is made of the same window. */
.vitral-pane, .janela-frame > *, .janela-page > .janela-pane, .janela-card, .janela-flash, .janela-list-row {
  position: relative;
  padding: calc(var(--janela-space) * 4) calc(var(--janela-space) * 5);
  background: linear-gradient(var(--vitral-glass), var(--vitral-glass)), var(--vitral-pane-1);
  -webkit-backdrop-filter: var(--vitral-blur);
  backdrop-filter: var(--vitral-blur);
  border: 1px solid var(--vitral-came);
  border-radius: var(--vitral-radius);
  box-shadow: var(--vitral-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* A window worth looking at cycles its colours rather than repeating one, so a
   pane takes its hue from where it sits. .vitral-panes on a container does the
   same for your own markup. */
.vitral-panes > *:nth-child(5n + 2),
.janela-frame > *:nth-child(5n + 2),
.janela-page > .janela-pane:nth-child(5n + 2),
.janela-list-row:nth-child(5n + 2), .janela-card:nth-child(5n + 2) {
  background: linear-gradient(var(--vitral-glass), var(--vitral-glass)), var(--vitral-pane-2);
}
.vitral-panes > *:nth-child(5n + 3),
.janela-frame > *:nth-child(5n + 3),
.janela-page > .janela-pane:nth-child(5n + 3),
.janela-list-row:nth-child(5n + 3), .janela-card:nth-child(5n + 3) {
  background: linear-gradient(var(--vitral-glass), var(--vitral-glass)), var(--vitral-pane-3);
}
.vitral-panes > *:nth-child(5n + 4),
.janela-frame > *:nth-child(5n + 4),
.janela-page > .janela-pane:nth-child(5n + 4),
.janela-list-row:nth-child(5n + 4), .janela-card:nth-child(5n + 4) {
  background: linear-gradient(var(--vitral-glass), var(--vitral-glass)), var(--vitral-pane-4);
}
.vitral-panes > *:nth-child(5n + 5),
.janela-frame > *:nth-child(5n + 5),
.janela-page > .janela-pane:nth-child(5n + 5),
.janela-list-row:nth-child(5n + 5), .janela-card:nth-child(5n + 5) {
  background: linear-gradient(var(--vitral-glass), var(--vitral-glass)), var(--vitral-pane-5);
}

/* The line of light along the top edge, where real glass catches it. A canvas
   is a replaced element and takes no pseudo-element, so charts go without. */
.vitral-pane::before, .janela-frame > *::before,
.janela-card::before, .janela-list-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--vitral-radius) var(--vitral-radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

/* Inside a panel the pane is content: the grid item carries the glass, since
   a table's caption renders outside the table's own border box and would
   otherwise float above the colour. */
.janela-frame .janela-pane { background: none; border: 0; box-shadow: none; padding: 0; }

.vitral-pane::after, .janela-frame > *::after,
.janela-card::after, .janela-list-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(116deg,
    rgba(255, 255, 255, 0.5) 0 10%,
    rgba(255, 255, 255, 0.16) 24%,
    rgba(255, 255, 255, 0) 44%);
}

/* A collapsed table drops its corner radius, and glass without corners is a
   pane of a different shape. */
table.janela-pane { border-collapse: separate; border-spacing: 0; }
table.janela-pane caption { padding-bottom: calc(var(--janela-space) * 2); }
table.janela-pane td:first-child { padding-left: 0; }

.janela-value-number { letter-spacing: -0.02em; }
.janela-value-label { opacity: 0.75; }

table.janela-pane button[aria-pressed="true"] {
  background: var(--janela-accent);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.janela-empty { color: var(--vitral-muted); }
.janela-error { border-color: rgba(190, 60, 60, 0.5); }

/* Janela's own pages, which carry the theme themselves because the engine owns
   that layout (ADR 011). */
.janela-page { padding-block: calc(var(--janela-space) * 10); }
.janela-heading { letter-spacing: -0.02em; }
.janela-list { display: grid; gap: calc(var(--janela-space) * 2); }
.janela-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.janela-field input, .janela-field select {
  background: var(--vitral-glass-strong);
  border-color: var(--vitral-came-soft);
  border-radius: 8px;
}
.janela-actions { display: flex; gap: calc(var(--janela-space) * 3); align-items: center; flex-wrap: wrap; }

/* A control made of the same glass. */
.vitral-button {
  display: inline-block;
  padding: .62rem 1.25rem;
  font: inherit;
  font-weight: 550;
  color: var(--vitral-ink);
  text-decoration: none;
  cursor: pointer;
  background: var(--vitral-glass-strong);
  -webkit-backdrop-filter: var(--vitral-blur);
  backdrop-filter: var(--vitral-blur);
  border: 1px solid var(--vitral-came);
  border-radius: 10px;
  box-shadow: var(--vitral-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.vitral-button:hover { border-color: rgba(26, 38, 54, 0.62); }
.vitral-button-primary {
  background: linear-gradient(180deg, rgb(86, 180, 242), rgb(25, 112, 176));
  color: white;
  box-shadow: 0 10px 24px -12px rgba(25, 112, 176, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Glass is an effect, not a requirement. Anyone who asked for less of it, or
   whose browser cannot do it, gets the same window in plain panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vitral-pane, .janela-pane, .janela-card, .janela-flash, .janela-list-row, .vitral-button {
    background: rgba(255, 255, 255, 0.94);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .vitral-pane, .janela-pane, .janela-card, .janela-flash, .janela-list-row, .vitral-button {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--vitral-came-soft);
  }
  .vitral::before, .vitral::after, .janela-page::before, .janela-page::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vitral::before, .vitral::after, .vitral-lattice,
  .janela-page::before, .janela-page::after {
    transform: none;
    transition: none;
  }
}