/* HELIUM V2.6.2 · thematic Magnetic Light + Magnetic Chroma.
   Decorative shader is background only; text/icon markup remains opaque and unchanged.
   White Porcelain is the resting state in all LIGHT themes. */
.he-magnetic-card, .he-magnetic-grid-card {
 --he-mag-x:50%;--he-mag-y:50%;--he-mag-hover:0;--he-mag-active:0;
 position:relative;isolation:isolate;overflow:hidden;
 transform:none!important;
 transition:border-color var(--helium-base) var(--helium-ease),box-shadow var(--helium-base) var(--helium-ease);
}
.he-magnetic-card{cursor:pointer}
.he-magnetic-card::before,.he-magnetic-grid-card::before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
 background:radial-gradient(circle var(--he-magnetic-radius) at var(--he-mag-x) var(--he-mag-y),
 color-mix(in srgb,var(--he-magnetic-light) 36%,transparent) 0%,transparent 66%);
 opacity:clamp(0,calc(var(--he-mag-hover)*.60 + var(--he-mag-active)*.85),.46);
 transition:opacity var(--helium-base) var(--helium-ease);
}
/* One silhouette, one visible stroke. The shell owns its border.
   No inset border pseudo-element: it drew a second rounded arc, especially when
   corner-shape:squircle was active on the parent but not on its pseudo-element. */
.he-magnetic-card::after,.he-magnetic-grid-card::after{content:none!important}
.he-magnetic-grid-card{border:1px solid transparent}
.he-magnetic-card::before,.he-magnetic-grid-card::before{
 corner-shape:inherit;
 border:none!important;outline:none!important;box-shadow:none!important;
}
.he-magnetic-card > *, .he-magnetic-grid-card > * {position:relative;z-index:1}
.he-magnetic-card[data-he-illuminated="true"], .he-magnetic-grid-card[data-he-illuminated="true"]{
 border-color:var(--helium-color-focus);
}
.he-magnetic-card:focus-visible,.he-magnetic-grid-card:focus-visible{
 outline:3px solid var(--helium-color-focus)!important;outline-offset:3px;
}
.he-magnetic-card:is(:disabled,[aria-disabled="true"])::before,.he-magnetic-card:is(:disabled,[aria-disabled="true"])::after{display:none}
/* Full white material at rest, no permanent blue/green wash. */
html:not([data-he-theme="dark"]) .v2-shell .h2-material.he-magnetic-sample {background:#FFF;color:var(--helium-color-text)}
.v2-shell .h2-material.he-magnetic-sample{
 appearance:none;text-align:left;border:1px solid var(--helium-color-border);font:inherit;
 border-radius:var(--helium-radius-xl);corner-shape:squircle;
}
.v2-shell .h2-material.he-magnetic-sample > :is(span,div),
.v2-shell .h2-material.he-magnetic-sample :is(strong,small){color:inherit}
html[data-he-theme="dark"] .v2-shell .h2-material.he-magnetic-sample{
 background:var(--helium-color-card);color:var(--helium-color-text)}
/* Chroma shares material palette tokens with its parent theme. GLASS is optical/internal,
   never CSS backdrop glass and never a different unsupported popup surface. */
.v2-shell .h2-material.he-chroma-card {
 position:relative;isolation:isolate;overflow:hidden;appearance:none;text-align:left;cursor:pointer;
 border:1px solid var(--he-material-rim);
 border-radius:var(--helium-radius-xl);corner-shape:squircle;
 color:var(--he-material-ink);
 background:radial-gradient(ellipse at 25% 16%,var(--he-material-wash1),transparent 68%),
 radial-gradient(ellipse at 87% 79%,var(--he-material-wash2),transparent 64%),var(--he-material-base);
 box-shadow:inset 0 1px 1px color-mix(in srgb,#FFF 75%,transparent);
 transform:none!important;
}
.v2-shell .h2-material.he-chroma-card::before {
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;corner-shape:inherit;
 background:repeating-linear-gradient(90deg,transparent 0px,rgba(255,255,255,.10) 7px,
 transparent 19px,rgba(5,29,61,.035) 29px,transparent 36px);
 opacity:.45;
}
.v2-shell .h2-material.he-chroma-card canvas{
 position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
 border-radius:inherit;corner-shape:inherit;/* shell clips canvas to its own squircle; no separately rounded inset */
}
/* The shape is a single uninterrupted squircle; no pill-on-panel nesting. */
/* Keep the rim on the root border alone, with only soft interior luminance.
   Previously this pseudo-element included a second 1px stroke. */
.v2-shell .h2-material.he-chroma-card::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 border:0!important;outline:0!important;border-radius:inherit;corner-shape:inherit;
 box-shadow:inset 0 -24px 40px color-mix(in srgb,var(--he-material-wash4) 13%,transparent);
}
.v2-shell .h2-material.he-chroma-card .he-chroma-content {
 position:relative;z-index:3;width:100%;height:100%;display:flex;flex-direction:column;
 justify-content:space-between;color:var(--he-material-ink);pointer-events:none;
}
.v2-shell .h2-material.he-chroma-card .he-chroma-eyebrow {
 display:block;align-self:flex-start;letter-spacing:.085em;
 color:var(--he-material-ink);font:700 11px/1.4 var(--helium-type-body);
 border-radius:0;background:transparent;padding:0;
}
.v2-shell .h2-material.he-chroma-card .he-chroma-foot {
 display:flex;flex-direction:column;gap:5px;
 border:0;border-radius:0;box-shadow:none;background:transparent;
 color:var(--he-material-ink);padding:0;
}
.v2-shell .h2-material.he-chroma-card .he-chroma-foot strong{
 color:var(--he-material-ink);font:620 clamp(24px,2.6vw,34px)/1 var(--helium-type-display);letter-spacing:-.06em;
 text-transform:none;
}
.v2-shell .h2-material.he-chroma-card .he-chroma-foot small{
 color:var(--he-material-sub);font:580 11px/1.45 var(--helium-type-body);opacity:1;text-transform:none!important;letter-spacing:0!important;
}
/* Integral readable band, not an extra rounded card. */
.v2-shell .h2-material.he-chroma-card .he-chroma-veil {
 position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,
 color-mix(in srgb,var(--he-material-veil) 52%,transparent) 0%,transparent 30%,
 color-mix(in srgb,var(--he-material-veil) 66%,transparent) 52%,
 color-mix(in srgb,var(--he-material-veil) 95%,transparent) 100%);
}
.v2-shell .h2-material.he-chroma-card[data-he-illuminated="true"]{
 border-color:var(--he-material-rim);
 box-shadow:inset 0 0 23px color-mix(in srgb,var(--he-material-magnetic) 24%,transparent);
}
.v2-shell .h2-material.he-chroma-card:focus-visible{
 outline:3px solid var(--helium-color-focus);outline-offset:3px;
}
/* Feature-size magnetic Chroma. Layer the optical effect BEHIND metrics and chart,
   restrict pigment to the lower/perimeter region; preserve established Aurora. */
.challenge-card.he-chroma-feature {isolation:isolate;overflow:hidden;corner-shape:squircle}
.challenge-card.he-chroma-feature .he-feature-chroma-canvas{
 position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
 opacity:.36;mix-blend-mode:normal;
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 28%,rgba(0,0,0,.15) 50%,#000 100%);
 mask-image:linear-gradient(180deg,transparent 0%,transparent 28%,rgba(0,0,0,.15) 50%,#000 100%);
}
/* Static 10-flute CSS fallback (also a stable detail beneath WebGL). */
.challenge-card.he-chroma-feature::before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
 background:repeating-linear-gradient(90deg,transparent 0px,
 color-mix(in srgb,var(--he-material-rim) 12%,transparent) 12px,
 transparent 25px,color-mix(in srgb,var(--he-material-wash4) 7%,transparent) 35px,
 transparent 45px);
 opacity:.65;
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 43%,#000 100%);
 mask-image:linear-gradient(180deg,transparent 0%,transparent 43%,#000 100%);
}
/* No painted inner rim: the challenge card owns its single outline. */
.challenge-card.he-chroma-feature::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 border:0!important;outline:0!important;border-radius:inherit;corner-shape:inherit;
 box-shadow:inset 0 -22px 36px color-mix(in srgb,var(--he-material-wash4) 16%,transparent);
}
.challenge-card.he-chroma-feature .card-body{position:relative;z-index:3}
.challenge-card.he-chroma-feature .aurora-blobs{z-index:0}
.challenge-card.he-chroma-feature .gradient-sheen{z-index:1;pointer-events:none}
/* Per-theme readability of existing feature content, independent of moving pigment. */
html:not([data-he-theme="dark"]) .challenge-card.he-chroma-feature .card-body :is(.feature-header h2,.big-dot,.progress-label,.progress-label strong,.text-arrow){color:var(--helium-color-text)}
html[data-he-theme="dark"] .challenge-card.he-chroma-feature .card-body :is(.feature-header h2,.big-dot,.progress-label,.progress-label strong,.text-arrow){color:var(--helium-color-text)}
@media(prefers-reduced-motion:reduce),(pointer:coarse){
 .he-magnetic-card::before,.he-magnetic-grid-card::before{background:radial-gradient(circle 210px at 50% 50%,color-mix(in srgb,var(--he-magnetic-light) 36%,transparent),transparent 72%)}
}
@media(prefers-reduced-motion:reduce){
 .he-magnetic-card::before,.he-magnetic-card::after,.he-magnetic-grid-card::before,.he-magnetic-grid-card::after{transition:none!important}
}
@media(max-width:800px){
 .v2-shell .h2-material.he-chroma-card .he-chroma-foot strong{font-size:23px}
 .challenge-card.he-chroma-feature .he-feature-chroma-canvas{opacity:.27}
}