/* ============================================================================
   SKILL CLOUD — ported into /the-gap/ from
   `CSS Shine Effect/Sophicly Skill Cloud - PORT.html` (itself a port of Shopify
   Editions Winter 2026 #119). Its motion constants are THEIRS and are not tuned
   by eye: ease-out-back, 400ms tag, 500ms button, 300ms popup.

   ⛔ THE ONE CHANGE, AND IT WAS MANDATORY. The source declares --ink, --paper,
   --brand, --sans, --display and --web on :root. Those are the exact names the
   theme, the nav and the dashboard already use — declaring them site-wide
   clobbers all three (root CLAUDE.md landmine #3). Every one is renamed --ssc-*
   and moved from :root onto .ssc, the component root, so children still inherit.
   Same technique the testimonials build uses (--swr-*). Its bare html/body rules
   are dropped too: this mounts inside a themed page, not a blank document.
   ============================================================================ */

/* BRAND FONTS — the house faces, both already on our CDN (BRAND.md §3). */
@font-face{font-family:'Proxima Soft Complete';font-weight:300;font-style:normal;font-display:swap;
  src:url('https://sophicly.b-cdn.net/ProximaSoft-Light.woff2') format('woff2')}
@font-face{font-family:'Proxima Soft Complete';font-weight:400;font-style:normal;font-display:swap;
  src:url('https://sophicly.b-cdn.net/ProximaSoft-Regular.woff2') format('woff2')}
@font-face{font-family:'Proxima Soft Complete';font-weight:600;font-style:normal;font-display:swap;
  src:url('https://sophicly.b-cdn.net/ProximaSoft-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Playfair Display Complete';font-style:italic;font-weight:600 700;font-display:swap;
  src:url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Playfair%20Display/playfairdisplay-italic-webfont.woff2') format('woff2')}

/* ⭐⭐ WD-313 — IT PAINTS ITS OWN GROUND, IN BOTH THEMES. Neil: "you've put dark
   purple against a dark background. I don't really get it." He was right, and
   the fault was not the purple: every background in this file was `transparent`
   and NOTHING ever painted `--ssc-paper`, so `#2c003e` type fell onto the
   funnel page's `#151617` — about 1.2:1.

   The fix is the house pattern, measured on /science-of-learning/, not invented:
     .sol-pillars                              { background: #1c1d1f }
     html:not([data-theme='dark']) .sol-pillars { background: #e8e8ed }
   i.e. the site does NOT use light BANDS between dark sections — every section
   paints a ground and is THEME-AWARE, light being the default state. `.ssc-band`
   below is that ground; `.ssc` keeps the port's 1400px measure inside it. */
.ssc-band{ background:#1c1d1f; }
/* ⭐ WD-385.6 (Neil): *"Make the background here white in light theme."* It was `#e8e8ed`, chosen
   to match `/science-of-learning/`'s `.sol-pillars` ground. ⚠️ Stated once: this band now differs
   from that page by one step, so the two are no longer the same grey. On `/the-gap/` white is the
   better fit anyway — it is `--swf-base`, the funnel's own raised surface, against a `#f5f5f7`
   page, so the band reads as lifted rather than as a second, darker ground. */
html:not([data-theme='dark']) .ssc-band{ background:#ffffff; }

.ssc{
  /* DARK is the base rule, light overrides — same order as the house pattern. */
  --ssc-ink:#e0e0ee;                /* label ink + the inverted active card's ground */
  --ssc-paper:#1c1d1f;              /* the ink ON that inverted card */
  --ssc-paper-warm:#232427;         /* the stage ground (Canvas Surface Seed, BRAND.md) */
  /* ⭐ THE ACCENT SITS ON THE POPUP, AND THE POPUP INVERTS. In dark theme the card
     is LIGHT (`--ssc-ink` #e0e0ee), so teal on it measures 1.31:1 — Neil: "you've
     given it, like, bright teal. That's not really visible." Purple is the right
     answer twice over: 5.24:1, and BRAND.md's colour semantics make purple the
     ATTAINMENT colour, which is exactly what "Grade 8–9" is. */
  --ssc-brand:#5333ed;              /* Brand Purple on the light (dark-theme) card */
  --ssc-web:#333437;                /* the connection web — raised-2 on the dark ladder */
  --ssc-sans:'Proxima Soft Complete',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ssc-display:'Playfair Display Complete',Georgia,'Times New Roman',serif;

  /* ── THEIR CONSTANTS, quoted from the bundle. Do not tune these by eye. ── */
  --ssc-ease-back:cubic-bezier(0.34, 1.56, 0.64, 1);   /* Gt['ease-out-back'] */
  --ssc-tag-ms:400;                                    /* Ei — <li> transform */
  --ssc-btn-ms:500;                                    /* Mi — button scale  */
  --ssc-popup-ms:300;                                  /* Ci — popup rows    */
}

/* LIGHT — the palette the port was actually tuned for: Brand Deep Purple type
   on paper, with the warm connection web. Unchanged values from the source. */
html:not([data-theme='dark']) .ssc{
  --ssc-ink:#2c003e;                /* Brand Deep Purple */
  --ssc-paper:#fdfdf9;
  --ssc-paper-warm:#f3f2ec;         /* their #dcdcd0 sits at this value against ink */
  --ssc-web:#d9d6cc;                /* theirs is #D7D7CF; ours is its house twin */
  --ssc-brand:#51dacf;              /* Brand Teal — the card is #2c003e here: 10.44:1 */
}
.ssc, .ssc *{box-sizing:border-box}


/* ─────────────────────────── the section frame ─────────────────────────── */
/* the panel is a BAND shape (it paints its own ground), so it pays the band tier from
   funnel.css's ladder — one page, one set of vertical values. The fallbacks keep this file
   sane on its own. */
.ssc{max-width:1400px;margin:0 auto;padding:var(--swf-step,48px) 100px}
.ssc-kicker{
  font-size:14px;font-weight:600;letter-spacing:.02em;margin:0 0 14px;
  color:color-mix(in srgb,var(--ssc-ink) 62%,transparent);
}
.ssc-lede{
  font-family:var(--ssc-display);font-style:italic;font-weight:600;
  font-size:clamp(28px,2.2vw + 14px,44px);line-height:1.08;letter-spacing:-.01em;
  margin:0 0 8px;max-width:22ch;
}
.ssc-sub{
  font-size:16px;font-weight:300;line-height:1.5;margin:0;max-width:44ch;
  color:color-mix(in srgb,var(--ssc-ink) 72%,transparent);
}

/* ─────────────────────────── the stage ─────────────────────────── */
/* Their #top-skills-card-container: position:relative, no height on desktop — the flex-wrap list
   sizes it. The engine only ever writes transforms, so this box never needs a fixed height. */
.ssc-stage{position:relative;margin-top:0;background:transparent}

.ssc-web{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
}
/* line attributes (stroke / width / opacity / transition) are written by the engine, exactly as
   theirs writes gi / bi / vi / xi — kept there so the two cannot drift apart. */

.ssc-tags{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;
  list-style:none;margin:0;padding:0;position:relative;
}

.ssc-tag{
  position:relative;list-style:none;
  /* Ei = 400ms on the overshoot curve. Set inline by the engine too; declared here so the very
     first paint already has it. */
  transition:transform 400ms var(--ssc-ease-back);
}
.ssc-tag[data-state="active"]{z-index:3}
.ssc-tag[data-state="proximity"]{z-index:2}

.ssc-btn{
  display:block;width:100%;border:0;background:transparent;padding:0;margin:0;
  cursor:pointer;position:relative;transform-origin:center;
  /* their .scale-sidekick-tag-xs — a fixed base scale under the dynamic one */
  scale:.4375;
  transform:scale(var(--ssc-scale,1));
  opacity:var(--ssc-opacity,.5);
  transition:transform 500ms var(--ssc-ease-back);   /* Mi */
  color:inherit;font:inherit;text-align:left;
}
.ssc-btn:focus-visible{outline:2px solid var(--ssc-ink);outline-offset:6px;border-radius:4px}

.ssc-label{
  display:block;margin:0 auto;padding:15px;                 /* their .p-15 */
  min-width:300px;                                          /* their .min-w-300 = 18.75rem */
  white-space:nowrap;text-align:center;
  /* ⭐ NO GROUND AT REST. Theirs LOOKS like a bare word but is actually a `bg-grey-light` chip —
     #dcdcd0 on a #dcdcd0 page, i.e. an invisible box. Painting ours in a slightly different warm
     tone turned floating words into visible chips, which is the wrong component. Transparent gets
     their look on any host ground; the chip still exists and still inverts on open. */
  background:transparent;color:var(--ssc-ink);
  font-family:var(--ssc-display);font-style:italic;font-weight:600;
  font-size:clamp(2rem,18.5263px + 1.75439vw,3rem);         /* their .narrative-1-skills-tag */
  line-height:.96;letter-spacing:-.05em;
  transition:min-width 50ms ease-out,background-color 50ms ease-out,color 50ms ease-out;
}
/* their rule 5, both states */
.ssc-tag[data-state="active"] .ssc-label,
.ssc-tag[data-state="closing"] .ssc-label{
  background:var(--ssc-ink);color:var(--ssc-paper);min-width:18.75rem;
}

/* their rule 6 — active pins the dynamic pair to the maximum */
.ssc-tag[data-state="active"] .ssc-btn{--ssc-scale:2.1;--ssc-opacity:1}

/* ── the popup: the classic height-less expand, 0fr → 1fr ── */
.ssc-popup{
  position:absolute;width:100%;user-select:none;text-align:left;
  background:var(--ssc-ink);color:var(--ssc-paper);
  display:grid;
  top:var(--popup-top,100%);
  left:var(--popup-left,0%);
  transform:translate(var(--popup-translate-x,0%),var(--popup-translate-y,0%));
  transform-origin:center var(--popup-origin-y,top);
  grid-template-rows:var(--ssc-grid-rows,0fr);
  border-top:var(--popup-border-top,1px solid color-mix(in srgb,var(--ssc-paper) 22%,transparent));
  border-bottom:var(--popup-border-bottom,0);
  opacity:0;pointer-events:none;
  transition:grid-template-rows 300ms var(--ssc-ease-back) 50ms,opacity 0ms var(--ssc-ease-back) 50ms;
}
.ssc-tag[data-state="active"] .ssc-popup{opacity:1;pointer-events:auto}   /* their rule 7 */
.ssc-tag[data-state="closing"] .ssc-popup{opacity:0;pointer-events:none}  /* their rule 8 */
.ssc-popup-clip{overflow:hidden;text-align:left}
.ssc-popup-in{padding:15px 15px 10px}
.ssc-prompt{
  margin:0 0 10px;font-size:14px;font-weight:400;line-height:1.35;letter-spacing:0;
  font-style:normal;font-family:var(--ssc-sans);
}
.ssc-ao{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ssc-brand);
}
.ssc-ao::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ssc-brand)}

/* ── reduced motion: no parallax (the engine reads this too), no springs ── */
/* !important is load-bearing here, not sloppiness: the engine writes the 400ms transition INLINE
   on every <li> (as theirs does), and an inline declaration beats a media rule. Without it the
   springs survive a reduced-motion preference — which the gate caught and prose would not have. */
@media (prefers-reduced-motion: reduce){
  .ssc-tag,.ssc-btn,.ssc-label{transition:none !important}
  .ssc-popup{transition:opacity 0ms !important}
  /* the connection lines carry their own inline 300ms tween (their xi constant) and were still
     animating after the first fix — the same inline-beats-media trap, one element deeper. A sweep
     of every port in the lane found this one and cleared the other two. */
  .ssc-web line{transition:none !important}
}

/* ── below 1200px the engine stands down entirely (see the deviation note in the header).
      ⚠️ 1200 MUST equal MOBILE_MAX in skillcloud.js — two files, one number. ── */
/* ══════════════════════════════════════════════════════════════════════════
   THE ACCORDION MODE — Jhey's MORPHING DISCLOSURE, ported (WD-354, Neil 2026-08-21:
   "I noticed that on smaller screens you turn it into a sort of accordion. If we're
   gonna do that, I wanna use the Jhey morphing accordion style instead.")
   Source: `Accordions/Jhey Morphing Accordion.html`, read in full — 60 rules for the
   `.morphing-disclosure` family (root §14c Gate 1).

   ⭐⭐ THE SELECTOR IS A CAPABILITY, NOT A WIDTH. `(hover: none) or (pointer: coarse)`
   is the exact complement of the JS test in skillcloud.js. MEASURED: the widest
   no-cursor device is the iPad Pro 12.9 at 1366px — WIDER than the 1197px laptop
   window Neil was testing in — so no width threshold can separate them. The old
   `@media (max-width:1200px)` was wrong in both directions at once: it gave the
   accordion to a 1197px laptop that has a cursor, and the cloud to a 1366px iPad that
   has none.
   The width clause that remains is a FLOOR for physical room on a machine that does
   have a cursor, and it is a judgement, not a measurement (the layout holds to 560px).

   ⭐ HIS MECHANISM, and it is why this is worth porting rather than styling our own:
     · `<details name="…">`     native exclusive accordion — one open at a time, no JS
     · `::details-content`      the height morph, with `interpolate-size: allow-keywords`
                                and `transition-behavior: allow-discrete` so `height: auto`
                                is animatable at all
     · `--level` via `:has()`   siblings step in Z and shift by the border width, which is
                                what makes the stack read as CARDS rather than as rows
     · content translate/blur   the panel body arrives from 1rem below, unblurring
   ⛔ DEVIATIONS, STATED (root §13): his tweakpane/GSAP demo controls are not ported (they
   are the CodePen's config UI, not the effect); his `light-dark()` border becomes our
   theme tokens; his 340px demo width becomes our full-width column; and his icon pair
   per row is dropped — our rows carry a word and a definition, not an icon.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse), (max-width: 43.75rem) {
  .ssc{padding:var(--swf-step,24px) 20px}
  .ssc-stage{margin-top:0}
  .ssc-web{display:none}

  /* his tokens, verbatim */
  .ssc-tags{
    --ssc-dur: calc((0.26 / var(--ssc-speed, 1)) * 1s);
    --ssc-ease: linear(
      0 0%, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%,
      0.6705 30.93%, 0.7441 36.51%, 0.8075 42.26%, 0.8593 47.98%,
      0.9022 53.93%, 0.9366 60.13%, 0.963 66.67%, 0.9812 73.4%,
      0.9929 80.76%, 0.9986 88.89%, 1 100%);
    --ssc-bounce-dur: calc((1 / var(--ssc-speed, 1)) * 1s);
    --ssc-bounce: linear(
      0 0%, 0.5571 7.53%, 0.8252 11.98%, 0.9337 14.38%, 1.0166 16.8%,
      1.0765 19.31%, 1.1146 21.97%, 1.1263 23.47%, 1.1325 25.06%,
      1.133 26.76%, 1.128 28.62%, 1.1094 31.9%, 1.0484 39.77%,
      1.0218 43.85%, 1.0011 48.42%, 0.9895 53.23%, 0.9861 59.8%, 1 81.27% 100%);
    --ssc-bw: 2px;                 /* his config `border: 2` */
    --ssc-blur: 4;
    --ssc-fade: 0.4;
    --ssc-ty: 1;
    --ssc-depth: 0.5;
    --ssc-margin: 1.5;
    --ssc-bd: color-mix(in srgb, var(--ssc-ink) 22%, transparent);

    gap:0; justify-content:flex-start; display:block;
    pointer-events: none;                                /* his */

    /* ⭐⭐ HIS PERSPECTIVE IS UNCONDITIONAL AND STAYS ON THE CONTAINER. With `depth` OFF (see
       `.ssc-tag` below) nothing translates in Z, so it has no visual effect whatever; what it
       DOES is create the stacking context that contains his NEGATIVE `--level` values. A version
       that moved it onto the rows removed that context and nine rows fell behind `<main>`'s
       opaque ground — MEASURED @320 with row 0 open, `elementFromPoint` on rows 4–11 returned
       MAIN, not the row. Do not move it again. */
    transform-style: preserve-3d; perspective: 120px;   /* his */

    /* ⭐ A COLUMN, NOT THE FULL WIDTH — his `.morphing-disclosure` is a FIXED 340px box; ours ran
       full-bleed, and the accordion also serves the 1366px iPad where a 12-row full-width list is
       bad measure. 34rem is a JUDGEMENT (a reading measure), labelled as such; below 544px nothing
       changes because the column is already narrower. */
    max-width: 34rem; margin-inline: auto;
  }
  .ssc-tag{
    pointer-events: all;                                 /* his */
    width:100%; display:block; position:relative;
    border-block: 0 solid var(--ssc-bd);                 /* his `[data-style='border']` default */
    /* ⭐ HIS ROW GROUND (`background: var(--background)`, demo layer) — it was dropped from the
       first port and that is why the open card did not read as a card: with a transparent row
       the neighbours show THROUGH it while it morphs. `--ssc-paper` IS the band's own ground
       (measured `.ssc-band` = rgb(28,29,31) = #1c1d1f in dark), so at rest nothing changes. */
    background: var(--ssc-paper);
    transition-property: border-radius, margin, background-color, border-color,
                         border-width, transform, translate, opacity, color;
    /* ⛔ `!important` on the three longhands is load-bearing: the cloud engine writes
       `transition: transform 400ms …` INLINE, and an inline SHORTHAND replaces this whole
       list. skillcloud.js::clearCloudInline() strips it at the root; this is the belt to that
       brace, so a JS failure degrades to "no morph tween", never to "instant snap". */
    transition-duration: var(--ssc-dur) !important;
    transition-timing-function: var(--ssc-ease) !important;
    /* `!important` beats any inline transform the cloud engine may have written before
       the mode was decided — see the guard in skillcloud.js::apply(). */
    transform: translate(0, calc(var(--ssc-bw) * (var(--ssc-level, 1) - 1))) !important;
    z-index: var(--ssc-level, 1);
  }
  /* ══ HIS BORDER SYSTEM, `[data-style='border']` + the demo layer — this is the half the first
     port left out, and it is the whole reason the stack did not read as one thing. In his it is
     a single rounded PANEL: every row carries side rules permanently, the ends carry the cap
     rules and the outer radius, and the only interior rules are the two that fence the open card.
     ⛔ The first port made every border transparent except those two, so a closed list showed one
     orphan hairline at the top — which is exactly what Neil could not make sense of. ══ */
  .ssc-tag{ border-inline: var(--ssc-bw) solid var(--ssc-bd); }
  /* the interior dividers — one rule between neighbours, never doubled (each row's block-end
     stays 0, so the line is the NEXT row's block-start). His own screenshot shows them inside
     the closed group, and without them twelve serif words in one box run together. */
  .ssc-tag + .ssc-tag{ border-block-start: var(--ssc-bw) solid var(--ssc-bd); }
  .ssc-tag:first-of-type{
    border-block-start: var(--ssc-bw) solid var(--ssc-bd);
    border-radius: 1rem 1rem 0 0;
  }
  .ssc-tag:last-of-type{
    border-block-end: var(--ssc-bw) solid var(--ssc-bd);
    border-radius: 0 0 1rem 1rem;
  }
  /* the two rows that fence the open card gain a rule AND the facing corners */
  .ssc-tag:has(+ .ssc-tag[data-state="active"]){
    border-block-end: var(--ssc-bw) solid var(--ssc-bd);
    border-end-start-radius: 1rem; border-end-end-radius: 1rem;
  }
  .ssc-tag[data-state="active"] + .ssc-tag{
    border-block-start: var(--ssc-bw) solid var(--ssc-bd);
    border-start-start-radius: 1rem; border-start-end-radius: 1rem;
  }

  /* ⛔ HIS `--level` STAGGER IS FOR FIVE CARDS, NOT TWELVE — STATED DEVIATION.
     His chains step each further row by `translate(0, bw * (level - 1))`: 0, −2px, −4px, −6px.
     Across his 5-row widget that is a stack of cards; across our 12-row PANEL it puts a visible
     2px SEAM in the continuous side rules every time the step changes, which reads as a broken
     box — and his own screenshot shows the closed group perfectly flush. So the y-step is
     dropped and every non-open row sits at the same level; the open card is lifted by z-index
     alone (below), and the ±1.5rem margin push still opens the space around it. */
  .ssc-tags:has([data-state="active"]) .ssc-tag:not([data-state="active"]){ --ssc-level: 1; }

  /* the open card: his `highlight: true` takes its border to FULL ink — the brightest edge on
     his screen, and what makes the card read as lifted with no 3D at all. */
  .ssc-tag[data-state="active"]{
    --ssc-bd: var(--ssc-ink);
    border-block: var(--ssc-bw) solid var(--ssc-bd);
    border-radius: 1rem;
    z-index: 2;
  }

  /* his margin push — the rows either side make room */
  .ssc-tag:has(~ .ssc-tag[data-state="active"]){ translate: 0 calc(var(--ssc-margin) * -1rem); }
  .ssc-tag[data-state="active"] ~ .ssc-tag{ translate: 0 calc(var(--ssc-margin) * 1rem); }

  .ssc-btn{scale:1;transform:none !important;opacity:1 !important;width:100%}
  .ssc-label{
    min-width:0;width:100%;padding:14px;text-align:left;
    font-size:22px;white-space:normal;background:transparent;border-bottom:0;
    display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center;
    cursor:pointer; -webkit-tap-highlight-color:#0000;
  }
  /* his + / x marker, as a pseudo so no markup changes */
  .ssc-label::after{
    content:'+'; font-family:var(--ssc-sans, inherit); font-style:normal;
    font-size:20px; line-height:1; opacity:.7;
    transition: rotate var(--ssc-dur) var(--ssc-ease), opacity var(--ssc-dur) var(--ssc-ease);
  }
  .ssc-tag[data-state="active"] .ssc-label::after{ rotate: 45deg; }
  /* ⛔⛔ CLOUD LEAK — AND `closing` IS A THIRD STATE, NOT A SYNONYM FOR IDLE (skillcloud.js
     ~529). Their rule 5 names BOTH `active` and `closing`, painting the label as the inverted
     chip: `background: var(--ssc-ink); color: var(--ssc-paper); min-width: 18.75rem`. The first
     port overrode `active` only — so every row stayed CORRECT while open and then flashed the
     chip for the whole 400ms close. MEASURED, sampling the closing row every 60ms in dark:
     `bg = rgb(224,224,238)` for six consecutive frames — a near-white flash, which is exactly
     what Neil reported ("they flash white, which is from the previous styling of the Skills
     Cloud"). The `min-width: 300px` rode in on the same rule (it forces overflow at 320px). */
  .ssc-tag[data-state="active"] .ssc-label,
  .ssc-tag[data-state="closing"] .ssc-label{
    background:transparent;color:var(--ssc-ink);min-width:0;
  }

  /* ⭐ THE HEIGHT MORPH. `grid-template-rows` is the fallback our engine already drives;
     where `interpolate-size` is supported the panel measures itself instead. */
  /* ⛔ THE PANEL IS NOT THE CLOUD'S FILLED CARD. In cloud mode the popup is a floating
     tooltip on a deep-purple ground (`background: var(--ssc-ink)`); dropped into a list
     row that reads as a heavy block bolted under the word — MEASURED `rgb(44,0,62)`
     behind `rgb(253,253,249)` text. Jhey's disclosure has no card: the content sits on
     the page's own ground and arrives by translate + unblur. */
  .ssc-popup{
    position:static;transform:none;width:100%;
    background:transparent;color:inherit;border:0;box-shadow:none;
    transition-duration: var(--ssc-bounce-dur);
    transition-timing-function: var(--ssc-bounce);
  }
  .ssc-popup-clip{background:transparent}
  .ssc-prompt{color:var(--ssc-ink);opacity:.72}
  .ssc-ao{color:var(--ssc-ink);opacity:.55}
  .ssc-popup-in{
    padding:0 14px 16px;
    color:var(--ssc-ink);
    translate: 0 calc(var(--ssc-ty) * 1rem);
    opacity: var(--ssc-fade);
    filter: blur(calc(var(--ssc-blur) * 1px));
    transition-property: translate, opacity, filter;
    transition-duration: var(--ssc-dur);
    transition-timing-function: var(--ssc-ease);
  }
  .ssc-tag[data-state="active"] .ssc-popup-in{
    translate: 0 0; opacity: 1; filter: blur(0);
  }
  @supports (interpolate-size: allow-keywords) {
    .ssc-tags{ interpolate-size: allow-keywords; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ssc-tag, .ssc-popup, .ssc-popup-in{ transition-duration: 1ms !important; }
    .ssc-tag, .ssc-tags:has([data-state="active"]) .ssc-tag:not([data-state="active"]){
      transform:none !important; translate:none !important;
    }
  }
}
}