/* The GSIQ design system, as Crystal ships it: token files copied verbatim
   from crystal-app/frontend/src/brand, then the four-theme contract
   (theme.css). Rules taken literally from the brand book:
     · Blur is forbidden. Transparency is used constantly; backdrop-filter never.
     · No emoji, anywhere.
     · Squared corners. 0/2/4/8px, with one 22px panel as the stated exception.
     · No bounce, elastic or spring. Fades and short upward translations only. */

/* ── tokens/colors.css ── */
:root{
  /* Base — sampled from GSIQ LinkedIn banners and the 2026 credentials deck */
  --gsiq-navy:#141057;
  --gsiq-navy-deep:#0C0938;
  --gsiq-indigo:#1A1580;
  --gsiq-magenta:#6B0B45;
  --gsiq-red:#ED1E23;
  --gsiq-red-deep:#C4161C;
  --gsiq-lavender:#A9AECB;
  --gsiq-white:#FFFFFF;

  /* Neutrals */
  --gsiq-grey-050:#F7F8FB;
  --gsiq-grey-100:#F0F1F6;
  --gsiq-grey-200:#E1E3EC;
  --gsiq-grey-400:#A9AECB;
  --gsiq-grey-600:#6F739A;
  --gsiq-grey-800:#2C2A5E;

  /* Semantic — surfaces */
  --surface-dark:var(--gsiq-navy);
  --surface-dark-alt:var(--gsiq-navy-deep);
  --surface-accent:var(--gsiq-red);
  --surface-light:var(--gsiq-white);
  --surface-muted:var(--gsiq-grey-050);
  --surface-card-on-dark:rgba(255,255,255,.06);
  --surface-card-on-light:var(--gsiq-white);

  /* Semantic — text */
  --text-primary:var(--gsiq-navy);
  --text-secondary:var(--gsiq-grey-600);
  --text-inverse:var(--gsiq-white);
  --text-inverse-muted:rgba(255,255,255,.72);
  --text-accent:var(--gsiq-red);
  --text-on-accent:var(--gsiq-white);
  --text-link:var(--gsiq-red);
  --text-link-hover:var(--gsiq-navy);

  /* Semantic — lines */
  --border-on-dark:rgba(255,255,255,.28);
  --border-on-dark-soft:rgba(255,255,255,.14);
  --border-on-light:var(--gsiq-grey-200);
  --border-accent:var(--gsiq-red);

  /* Gradients — the brand's signature vertical navy-to-red wash */
  --gradient-brand:linear-gradient(180deg,var(--gsiq-navy) 0%,var(--gsiq-magenta) 58%,var(--gsiq-red) 100%);
  --gradient-brand-vivid:linear-gradient(180deg,var(--gsiq-indigo) 0%,var(--gsiq-red) 100%);
  --gradient-brand-diagonal:linear-gradient(135deg,var(--gsiq-navy) 0%,var(--gsiq-magenta) 55%,var(--gsiq-red) 100%);
  --gradient-duotone-overlay:linear-gradient(180deg,rgba(20,16,87,.88) 0%,rgba(237,30,35,.72) 100%); /* @kind color */
  --gradient-protection-bottom:linear-gradient(180deg,rgba(12,9,56,0) 0%,rgba(12,9,56,.82) 100%); /* @kind color */
  --gradient-protection-left:linear-gradient(90deg,rgba(12,9,56,.92) 0%,rgba(12,9,56,0) 62%); /* @kind color */
}

/* ── tokens/typography.css ── */
:root{
  /* Scale — calibrated against the 1456x816 credentials-deck artboard */
  --text-hero:clamp(56px,7.2vw,132px);
  --text-display:clamp(40px,4.4vw,64px);
  --text-h1:44px;
  --text-h2:32px;
  --text-h3:24px;
  --text-eyebrow:20px;
  --text-body-lg:20px;
  --text-body:17px;
  --text-body-sm:15px;
  --text-caption:13px;
  --text-micro:11px;

  --leading-tight:1.04; /* @kind font */
  --leading-snug:1.16; /* @kind font */
  --leading-normal:1.34; /* @kind font */
  --leading-relaxed:1.5; /* @kind font */

  --weight-light:300; /* @kind font */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */
  --weight-bold:700; /* @kind font */
  --weight-black:800; /* @kind font */

  /* Tracking — all-caps section labels open up, heavy display tightens */
  --tracking-hero:-.02em; /* @kind font */
  --tracking-display:-.015em; /* @kind font */
  --tracking-normal:0; /* @kind font */
  --tracking-caps:.06em; /* @kind font */
  --tracking-caps-wide:.18em; /* @kind font */

  /* Semantic roles */
  --type-hero-weight:var(--weight-black); /* @kind font */
  --type-statement-weight:var(--weight-bold); /* @kind font */
  --type-section-weight:var(--weight-light); /* @kind font */
  --type-eyebrow-weight:var(--weight-light); /* @kind font */
}

/* ── tokens/motion.css ── */
:root{
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:400ms; /* @kind other */
  --duration-reveal:700ms; /* @kind other */

  /* Confident, no bounce. Sport-brand motion is a clean accelerate-out. */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */

  --transition-interactive:background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),opacity var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); /* @kind other */
}

/* ── tokens/shape.css ── */
:root{
  /* Radii — GSIQ is a squared brand. Cards are near-square; only the deck's
     dark feature panels take a generous 22px corner, and pills go fully round. */
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-panel:22px;
  --radius-pill:999px;

  --border-hairline:1px;
  --border-medium:2px;
  --border-heavy:4px;

  /* Shadows are used sparingly — flat colour and hairlines do the work.
     Elevation appears only on light-ground cards and floating UI. */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(20,16,87,.08);
  --shadow-md:0 8px 24px rgba(20,16,87,.10);
  --shadow-lg:0 20px 48px rgba(12,9,56,.18);
  --shadow-focus:0 0 0 3px rgba(237,30,35,.35);
}

/* ── tokens/spacing.css ── */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* Layout — the deck's fixed frame */
  --slide-margin:42px;
  --slide-gutter:22px;
  --logo-lockup-inset:42px;
  --content-max:1120px;
}

/* ── tokens/patterns.css ── */
:root{
  /* The 45-degree hairline field that anchors deck corners. Never over faces or copy. */
  --pattern-stripe-angle:45deg; /* @kind other */
  --pattern-stripe-gap:7px; /* @kind other */
  --pattern-stripe-width:1.5px; /* @kind other */
  --pattern-stripe-on-dark:repeating-linear-gradient(45deg,rgba(237,30,35,.55) 0 1.5px,transparent 1.5px 7px); /* @kind other */
  --pattern-stripe-on-accent:repeating-linear-gradient(45deg,rgba(20,16,87,.5) 0 1.5px,transparent 1.5px 7px); /* @kind other */
  --pattern-stripe-white:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 1.5px,transparent 1.5px 7px); /* @kind other */
}

/* ── tokens/fonts.css ── */
/* Google Fonts @import removed: a runtime network dependency and a
   privacy/CSP problem. Montserrat is self-hosted in fonts.css below. */
/* SUBSTITUTION: GSIQ collateral is set in a proprietary geometric sans (most likely Gilroy
   or Museo Sans). No font binaries were supplied, so Montserrat — the closest free
   geometric sans with the same double-storey 'a', hooked single-storey 'g' and straight 'y' —
   stands in. Replace with @font-face rules + real files when available. */
:root{
  --font-core:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-core);
  --font-body:var(--font-core);
}

/* ── theme.css ── */
/* Four themes, one token contract.
 *
 * Two of them are NEUTRAL grounds carrying the GSIQ accent and nothing else:
 * white and near-black, with a true-neutral grey ramp. Two are the brand
 * itself: the navy ground, and the same ground with the gradient on its
 * controls. Everything in
 * the app is styled through these tokens and nothing else, so a theme is a
 * change of values, never a second stylesheet.
 *
 * WHY light/dark are neutral rather than navy-tinted. With four options the
 * job of each has to be distinct, and "GSIQ" is the theme that carries the
 * brand. A light theme with blue-cast greys and a navy header bar is a third
 * brand theme wearing a white shirt — so light and dark are stripped back to
 * neutral, and the red accent is the only brand mark in them.
 *
 * --accent-fill is the ONLY token that may hold a gradient, and it is only
 * ever a background on a CONTROL — a button, the nav bar, the mode thumb.
 * Grounds stay flat: --bg is painted onto small elements (a KPI tile, an
 * input, a drawer) and a gradient there would redraw the whole navy-to-red
 * wash inside each one.
 *
 * Resolution: main.ts stamps data-theme on <html> before first paint, from
 * localStorage or, with no stored choice, the OS preference. :root carries
 * the light values so an unstamped document still renders correctly.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #FFFFFF;
  --bg-alt:    #F6F6F7;
  --surface:   #FFFFFF;        /* inputs, panels */
  --surface-2: #F1F1F3;        /* cards, code */
  --surface-3: #E5E5E8;        /* hover, pressed */
  --ink:       #16161A;
  --ink-2:     #5C5C66;        /* secondary text */
  --ink-3:     #8E8E99;        /* tertiary, hints */
  --line:      #E2E2E6;
  --line-2:    #EFEFF2;
  --accent:    var(--gsiq-red);
  --accent-ink:#FFFFFF;        /* text on the accent */
  --overlay:   #FFFFFF;       /* opaque, for anything floating over content */
  --code-bg:   #F1F1F3;
  --shadow:    var(--shadow-sm);
  /* A white bar with a hairline, not the navy strip. On a neutral ground the
     navy bar was the one element still asserting the brand, which is the
     GSIQ themes' job now. */
  --bar-bg:    #FFFFFF;
  --bar-ink:   #16161A;
  --bar-ink-2: #5C5C66;
  --bar-line:  #E2E2E6;

  /* Accents. Red acts, indigo reasons, magenta reads data — one meaning each,
     never decorative. */
  --accent-fill: var(--accent);   /* flat here; a gradient only on the gradient theme */
  --accent-soft:  rgba(237,30,35,.07);
  --accent-line:  rgba(237,30,35,.28);
  --info:         #2E27A8;              /* the model thinking */
  --info-soft:    rgba(46,39,168,.07);
  --data:         var(--gsiq-magenta);  /* a database being read */
  --data-soft:    rgba(107,11,69,.07);

  /* Direction of change, not quality of change. A smaller estimate is a
     different answer, not a worse one, so these deliberately reuse the
     neutral pair rather than introducing a green/red verdict. */
  --delta-up:        var(--info);
  --delta-up-soft:   var(--info-soft);
  --delta-down:      var(--data);
  --delta-down-soft: var(--data-soft);
  --rail:         #FAFAFB;              /* sidebar ground */
  --rail-line:    #E2E2E6;
  --elevate:      0 1px 2px rgba(0,0,0,.06);
  --scrim:        rgba(0,0,0,.42);
}

/* Neutral black, not navy. A whole application rendered in navy reads as one
   blue smear; black gives the red somewhere to actually burn. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0A0A0B;
  --bg-alt:    #101012;
  --surface:   #141417;
  --surface-2: #1A1A1E;
  --surface-3: #26262C;
  --ink:       #FFFFFF;
  --ink-2:     rgba(255,255,255,.70);
  --ink-3:     rgba(255,255,255,.44);
  --line:      rgba(255,255,255,.17);
  --line-2:    rgba(255,255,255,.09);
  --accent:    #FF2A30;        /* a touch brighter: pure red goes muddy on black */
  --accent-ink:#FFFFFF;
  --overlay:   #1A1A1E;       /* opaque, for anything floating over content */
  --code-bg:   #0E0E10;
  --shadow:    none;
  --bar-bg:    #0A0A0B;
  --bar-ink:   #FFFFFF;
  --bar-ink-2: rgba(255,255,255,.66);
  --bar-line:  rgba(255,255,255,.12);
  --accent-fill: var(--accent);   /* flat here; a gradient only on the gradient theme */
  --accent-soft:  rgba(255,42,48,.13);
  --accent-line:  rgba(255,42,48,.38);
  --info:         #9BA0FF;
  --info-soft:    rgba(155,160,255,.12);
  --data:         #FF8FB4;
  --data-soft:    rgba(255,143,180,.12);

  /* Direction of change, not quality of change. A smaller estimate is a
     different answer, not a worse one, so these deliberately reuse the
     neutral pair rather than introducing a green/red verdict. */
  --delta-up:        var(--info);
  --delta-up-soft:   var(--info-soft);
  --delta-down:      var(--data);
  --delta-down-soft: var(--data-soft);
  --rail:         #0D0D0F;
  --rail-line:    rgba(255,255,255,.08);
  --elevate:      none;
  --scrim:        rgba(0,0,0,.72);
}

/* The brand ground. GSIQ and GSIQ Gradient share it entirely — navy
 * throughout, panels as white at low alpha, lavender as the tertiary ink
 * because indigo is invisible against navy. The two themes differ in exactly
 * one thing, below: what fills a control. */
:root[data-theme="gsiq"],
:root[data-theme="gradient"] {
  color-scheme: dark;
  --bg:        var(--gsiq-navy);
  --bg-alt:    var(--gsiq-navy-deep);
  --surface:   rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.10);
  --surface-3: rgba(255,255,255,.16);
  --ink:       #FFFFFF;
  --ink-2:     rgba(255,255,255,.74);
  --ink-3:     var(--gsiq-lavender);
  --line:      rgba(255,255,255,.22);
  --line-2:    rgba(255,255,255,.11);
  --accent:    #FF3237;        /* lifted off navy; #ED1E23 sits too close to it */
  --accent-ink:#FFFFFF;
  --accent-fill: var(--accent);
  --overlay:   #221E6E;       /* opaque, and LIFTED off the navy ground —
                                 navy-deep would read as recessed, not raised */
  --code-bg:   var(--gsiq-navy-deep);
  --shadow:    none;
  --bar-bg:    var(--gsiq-navy-deep);
  --bar-ink:   #FFFFFF;
  --bar-ink-2: rgba(255,255,255,.70);
  --bar-line:  rgba(255,255,255,.20);
  --accent-soft:  rgba(255,50,55,.14);
  --accent-line:  rgba(255,50,55,.42);
  --info:         var(--gsiq-lavender);
  --info-soft:    rgba(169,174,203,.14);
  --data:         #FF7FB0;
  --data-soft:    rgba(255,127,176,.14);

  /* Direction of change, not quality of change. A smaller estimate is a
     different answer, not a worse one, so these deliberately reuse the
     neutral pair rather than introducing a green/red verdict.

     Lifted off --info on this ground only. Here --info and --ink-3 are the
     SAME lavender, so borrowing it would paint every increase in exactly the
     colour this theme uses for de-emphasised text, while decreases came
     through in vivid pink. Both directions have to carry equal weight or the
     eye reads one as the more important half of the comparison. */
  --delta-up:        #C8CCE6;
  --delta-up-soft:   rgba(200,204,230,.16);
  --delta-down:      var(--data);
  --delta-down-soft: var(--data-soft);
  --rail:         var(--gsiq-navy-deep);
  --rail-line:    rgba(255,255,255,.12);
  --elevate:      none;
  --scrim:        rgba(12,9,56,.78);
}

/* The gradient, on the things you press and the bar you navigate from —
 * never behind the page. As a backdrop it put the red end under whatever
 * happened to be at the bottom of the viewport and tinted every panel that
 * sat over it; as a control fill it does the one job the brand actually
 * gives it, which is to mark the thing that acts.
 *
 * Two angles because the two shapes are different. The bar is wide and short,
 * so it takes the full navy-to-red range across its width. A button is small,
 * so it starts at magenta — beginning at navy would make a button on a navy
 * ground read as a hole rather than an action. */
:root[data-theme="gradient"] {
  --bar-bg: linear-gradient(90deg,
              var(--gsiq-navy-deep) 0%, var(--gsiq-navy) 42%,
              var(--gsiq-magenta) 76%, var(--gsiq-red) 100%);
  --accent-fill: linear-gradient(115deg,
              var(--gsiq-magenta) 0%, var(--gsiq-red-deep) 55%, #FF3237 100%);
  /* The bar's red end finishes under the nav links, and white at 70% is thin
     on #ED1E23. Lifted here only — the flat bar in every other theme reads
     fine as it is. */
  --bar-ink-2: rgba(255,255,255,.88);
}

/* ── Data visualisation ─────────────────────────────────────────────────────
 *
 * The globe and the charts paint to SVG and canvas, so they cannot inherit a
 * CSS colour the way a div does — they read these tokens at runtime and
 * repaint when data-theme changes. They live here, with the themes, for the
 * same reason everything else does: a fifth theme should be a block in this
 * file, not an edit to three components.
 *
 * Grouped by GROUND rather than by theme, because that is what a data colour
 * actually depends on. Three of the four themes are dark grounds and share
 * most of these; where a theme genuinely differs — the ramp and the ocean
 * under the navy ground — it overrides afterwards.
 *
 * The choropleth ramp is monotonic in intensity so it reads as one quantity
 * and not as categories. The categorical set is the opposite: evenly spaced
 * in hue, and every entry has to survive its own ground, which is why the
 * light set runs dark and the dark set runs light.
 */

:root,
:root[data-theme="light"] {
  --viz-ramp-0: #EDEFF5;
  --viz-ramp-1: #F8CFD1;
  --viz-ramp-2: #F2A5A8;
  --viz-ramp-3: #E97A7E;
  --viz-ramp-4: #DF4A50;
  --viz-ramp-5: #C4161C;
  --viz-empty:      #E7E9F0;
  --viz-land-line:  rgba(90,96,130,.35);
  --viz-grid:       rgba(90,96,130,.12);
  --viz-ocean-from: #FFFFFF;
  --viz-ocean-to:   #F4F6FB;
  --bar-accent: #8E93BE;
  --bar-data:   #9B6C8E;
  /* OTT beside linear: the magenta end of the categorical set, so a streaming
     service reads as a different kind of channel, not a paler linear one. */
  --bar-ott:    #A0286E;
  --viz-cat-1: #ED1E23;
  --viz-cat-2: #3D3F86;
  --viz-cat-3: #6B0B45;
  --viz-cat-4: #6F739A;
  --viz-cat-5: #C4161C;
  --viz-cat-6: #A0286E;
  --viz-cat-7: #4A4E9E;
  --viz-cat-8: #8E93BE;

  /* Coverage map (the gist). Rated and derived are not two entries of a
     categorical set — they are the two poles of one question, "measured, or
     worked out?", so they take the brand's own two ends rather than two
     neighbouring blues. --viz-empty is the neutral between them. Steps are
     validated, not eyeballed: ΔE 20.3 protan / 27.9 normal against each other
     and >= 3:1 on this ground. The wash lives on the plate so the fills stay
     flat — a gradient inside a category would imply a magnitude it does not
     have. */
  --viz-cov-rated:      #4A4E9E;
  --viz-cov-derived:    #C4161C;
  --viz-cov-plate-from: #F2F4FC;
  --viz-cov-plate-to:   #FCF4F4;
}

/* Every dark ground. The categorical set is lifted well clear of black and of
   navy, so one list serves all three. */
:root[data-theme="dark"],
:root[data-theme="gsiq"],
:root[data-theme="gradient"] {
  --viz-empty:      #232329;
  --viz-land-line:  rgba(169,174,203,.38);
  --viz-grid:       rgba(169,174,203,.16);
  --viz-ocean-from: #141417;
  --viz-ocean-to:   #0A0A0B;
  --bar-accent: #6E73A6;
  --bar-data:   #8A5F7C;
  --bar-ott:    #E86BA0;
  --viz-cat-1: #FF3237;
  --viz-cat-2: #A9AECB;
  --viz-cat-3: #FF8FB4;
  --viz-cat-4: #7C81C4;
  --viz-cat-5: #FFB3B5;
  --viz-cat-6: #E86BA0;
  --viz-cat-7: #9BA0FF;
  --viz-cat-8: #C7CBE4;
  /* ΔE 20.6 protan / 28.3 normal, both clear of the ground. */
  --viz-cov-rated:      #7C81C4;
  --viz-cov-derived:    #FF3237;
  --viz-cov-plate-from: #101119;
  --viz-cov-plate-to:   #191012;
}

/* Neutral black: the ramp may start near-black. */
:root[data-theme="dark"] {
  --viz-ramp-0: #242043;
  --viz-ramp-1: #3A1553;
  --viz-ramp-2: #63104E;
  --viz-ramp-3: #96143C;
  --viz-ramp-4: #C8182E;
  --viz-ramp-5: #ED1E23;
}

/* The navy grounds. The dark ramp's low end is #242043, which sits almost on
   top of #141057 — an empty market and a lightly-measured one would read the
   same. So the ramp starts clear of the ground and climbs through the
   brand's own magenta. */
:root[data-theme="gsiq"],
:root[data-theme="gradient"] {
  --viz-ramp-0: #2E2A7A;
  --viz-ramp-1: #54206E;
  --viz-ramp-2: #7C1859;
  --viz-ramp-3: #A41643;
  --viz-ramp-4: #CC1A32;
  --viz-ramp-5: #FF3237;
  --viz-empty:      #241F63;
  --viz-ocean-from: #1A1568;
  --viz-ocean-to:   #0C0938;
  --viz-cov-plate-from: #1A1568;
  --viz-cov-plate-to:   #3E1030;
}

/* ── Form controls ──────────────────────────────────────────────────────────
 *
 * The dropdown chevron. A select's arrow is a background image, and an image
 * cannot read a CSS variable, so the colour is baked into the URL here, once
 * per ground, rather than in every component that has a select. One rule in
 * index.css draws it.
 *
 * Two states: at rest it is the secondary ink, and it lifts to the accent
 * while the control is hovered or focused, the same cue the borders give.
 * Square caps and a mitred join, like every other icon in the app.
 */
:root,
:root[data-theme="light"] {
  --select-chevron:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%235C5C66' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --select-chevron-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23ED1E23' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-theme="dark"],
:root[data-theme="gsiq"],
:root[data-theme="gradient"] {
  --select-chevron:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23FFFFFF' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --select-chevron-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23FF3237' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}