html[data-sg-active] { --sg-shadow-strength: 1; --sg-shadow-distance: .25; }
/* Scoped to the experiment. Labels, fonts and actions stay native; padding gives the glass more body. */
html[data-sg-active] #root .grain,
html[data-sg-active] #root .landing-page .grain {
  display: none !important; animation: none !important;
  transform: none !important; will-change: auto !important;
}
.sg-canvas { display: none; pointer-events: none; }
/* Portrait's fixed background lives inside the hero's z=10 context. Place
   glass above it, while main content, card grids and footer stay at z=20. */
/* The glass shares native scrolling/layout movement with its content host.
   Only this decorative layer is clipped; page content and shadows stay native. */
[data-sg-render-host] { position: relative; isolation: isolate; z-index: 20; }
#root > div[data-sg-render-host] { isolation: auto; z-index: auto; }
.sg-gpu-layer { position: absolute; top: 0; left: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#root > div[data-sg-render-host] > .sg-gpu-layer { z-index: 15; }
.sg-gpu-canvas { position: absolute; display: block; pointer-events: none; }
html[data-sg-active] #root > div > footer { z-index: 20; }
html[data-sg-direct] [data-sg-panel] > .sg-canvas { display: none !important; }
html[data-sg-direct] [data-sg-test-panel] { z-index: 20; }
html[data-sg-active] .glass-surface {
  isolation: isolate;
  color: #27322f;
  opacity: 1;
  overflow: visible;
  border-color: transparent;
  padding-block: .56em;
  border-radius: 1.45em 1.55em 1.4em 1.5em / 50% 48% 52% 50%;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: calc(2px * var(--sg-shadow-distance,1)) calc(4px * var(--sg-shadow-distance,1)) 4px -2px rgba(36,36,36,calc(.17 * var(--sg-shadow-strength,1))),
    calc(7px * var(--sg-shadow-distance,1)) calc(13px * var(--sg-shadow-distance,1)) 11px -5px rgba(36,36,36,calc(.22 * var(--sg-shadow-strength,1))),
    calc(20px * var(--sg-shadow-distance,1)) calc(34px * var(--sg-shadow-distance,1)) 16px -3px rgba(36,36,36,calc(.34 * var(--sg-shadow-strength,1))),
    calc(36px * var(--sg-shadow-distance,1)) calc(57px * var(--sg-shadow-distance,1)) 24px -8px rgba(36,36,36,calc(.18 * var(--sg-shadow-strength,1)));
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
html[data-sg-active] .glass-surface[href*="patreon.com"],
html[data-sg-active] .glass-surface[data-sg-test-button] { padding-block: .72em; }
html[data-sg-active] .glass-surface::before {
  display: none;
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 55% 47%,transparent 43%,#f2f2f236 76%,#fcfcfc88 100%),
    radial-gradient(ellipse at 91% 87%,#fdfdfdbb,transparent 30%),
    linear-gradient(165deg,#f4f4f423,transparent 46%,#f9f9f928);
  box-shadow: inset 0 1px 2px #fdfdfd4d, inset -1px -2px 3px #fefefeaa;
}
html[data-sg-active] .glass-surface::after {
  display: none;
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.33 1.33 1.33 0 -1.95'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E");
  mask-image: radial-gradient(ellipse at 45% 45%,#0008 30%,#000 92%);
}
html[data-sg-active] .glass-surface[data-sg-rendered] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-sg-active] .glass-surface[data-sg-rendered]::before { display: block; opacity: .22; box-shadow: none; }
html[data-sg-active] .glass-surface[data-sg-rendered]::after { display: block; opacity: .08; }
html[data-sg-active] .glass-surface .sg-canvas {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 0;
  z-index: -2; pointer-events: none; display: none;
}
html[data-sg-active] .glass-surface[data-sg-rendered] .sg-canvas { display: block; }
html[data-sg-active] .glass-surface:hover {
  color: #1e2925;
  border-color: transparent;
  box-shadow: calc(2px * var(--sg-shadow-distance,1)) calc(4px * var(--sg-shadow-distance,1)) 4px -2px rgba(36,36,36,calc(.18 * var(--sg-shadow-strength,1))),
    calc(8px * var(--sg-shadow-distance,1)) calc(15px * var(--sg-shadow-distance,1)) 12px -5px rgba(36,36,36,calc(.23 * var(--sg-shadow-strength,1))),
    calc(22px * var(--sg-shadow-distance,1)) calc(37px * var(--sg-shadow-distance,1)) 17px -3px rgba(36,36,36,calc(.36 * var(--sg-shadow-strength,1))),
    calc(39px * var(--sg-shadow-distance,1)) calc(61px * var(--sg-shadow-distance,1)) 26px -8px rgba(36,36,36,calc(.19 * var(--sg-shadow-strength,1)));
}
html[data-sg-active] .glass-surface:active { box-shadow: calc(2px * var(--sg-shadow-distance,1)) calc(4px * var(--sg-shadow-distance,1)) 5px -2px rgba(36,36,36,calc(0.16862745 * var(--sg-shadow-strength,1))), calc(12px * var(--sg-shadow-distance,1)) calc(23px * var(--sg-shadow-distance,1)) 18px -8px rgba(36,36,36,calc(0.27843137 * var(--sg-shadow-strength,1))), calc(25px * var(--sg-shadow-distance,1)) calc(42px * var(--sg-shadow-distance,1)) 28px -13px rgba(36,36,36,calc(0.12156863 * var(--sg-shadow-strength,1))); }
html[data-sg-active] .glass-surface:focus-visible { outline: 2px solid #23483b; outline-offset: 5px; }
html.dark[data-sg-active] .glass-surface { color: #27322f; }
html.dark[data-sg-active] .glass-surface:focus-visible { outline-color: #e1f3e8; }
/* The page's content keeps its original width, padding and native controls. */
html[data-sg-active] #root :where([data-sea-glass][data-sg-panel],
  #about-section article.about-section, #faq-section:not([data-sg-joined-part]),
  .aexa-runner-shell:not([data-sg-joined-part]), #root > div > footer,
  section > .grid > div[class*="radial-gradient("]),
[data-sea-glass][data-sg-panel][data-sg-test-panel] {
  --sg-panel-radius: clamp(14px,1.4vw,22px);
  position: relative; isolation: isolate; overflow: visible;
  border-color: transparent; border-radius: var(--sg-panel-radius);
  background-image: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: calc(2px * var(--sg-shadow-distance,1)) calc(4px * var(--sg-shadow-distance,1)) 4px -2px rgba(36,36,36,calc(.17 * var(--sg-shadow-strength,1))),
    calc(7px * var(--sg-shadow-distance,1)) calc(13px * var(--sg-shadow-distance,1)) 11px -5px rgba(36,36,36,calc(.22 * var(--sg-shadow-strength,1))),
    calc(20px * var(--sg-shadow-distance,1)) calc(34px * var(--sg-shadow-distance,1)) 16px -3px rgba(36,36,36,calc(.34 * var(--sg-shadow-strength,1))),
    calc(36px * var(--sg-shadow-distance,1)) calc(57px * var(--sg-shadow-distance,1)) 24px -8px rgba(36,36,36,calc(.18 * var(--sg-shadow-strength,1)));
}
html[data-sg-active] #root [data-sea-glass][data-sg-panel] { background: transparent; }
html[data-sg-active] #root :where(#about-section article.about-section, #faq-section,
  .aexa-runner-shell, #root > div > footer)::before,
html[data-sg-active] #root :where(#about-section article.about-section, #faq-section,
  .aexa-runner-shell, #root > div > footer)::after { display: none !important; }
html[data-sg-active] #root :where(#about-section article.about-section, #faq-section,
  .aexa-runner-shell, #root > div > footer) > :is(.corner,.tl-corner,.br-corner) { display: none !important; }
/* Raise only the card grid: raising its section would cover the sibling home
   link with the full-width heading. Species artwork stays above the GPU layer.
   Clip its native foreground
   to the same uniform radius, with the old black wash supplied by glass tint. */
html[data-sg-active] #root section > .grid:has(> [data-sg-formation-card]) {
  position: relative; z-index: 20;
}
html[data-sg-active] #root section > .grid > div[class*="radial-gradient("] > div {
  border-radius: calc(var(--sg-panel-radius) - 1px); overflow: hidden;
}
html[data-sg-active] #root [data-sg-formation-card][data-sg-panel] > div > [class~="bg-black/50"] {
  background: transparent;
}
[data-sea-glass][data-sg-panel]::before,
[data-sea-glass][data-sg-panel]::after,
[data-sea-glass][data-sg-panel] > .corner,
[data-sea-glass][data-sg-panel] > .tl-corner,
[data-sea-glass][data-sg-panel] > .br-corner { display: none !important; }
[data-sea-glass][data-sg-panel] :is(button,a):focus-visible { outline: 2px solid #23483b; outline-offset: 5px; }
[data-sea-glass][data-sg-panel] > .sg-canvas {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  z-index: -1; border-radius: 0; pointer-events: none;
}
[data-sea-glass][data-sg-panel][data-sg-rendered] > .sg-canvas { display: block; }
/* The footer spans the viewport: its canvas must not add horizontal overflow.
   Its original one-pixel top border remains part of the material bounds. */
#root > div > footer[data-sea-glass][data-sg-panel] > .sg-canvas {
  inset: -1px 0 auto; width: 100%; height: calc(100% + 1px);
}
[data-sea-glass][data-sg-panel] > .aexa-runner-frame { border-radius: var(--sg-panel-radius); }
.sg-game-faq-box { display: none; pointer-events: none; }
html[data-sg-active] #root .sg-game-faq-box[data-sea-glass][data-sg-panel] {
  display: block; position: absolute; left: -1px; top: -1px;
  width: calc(100% + 2px); z-index: -1;
}
.sg-game-faq-box[data-sg-panel] > .sg-canvas { inset: 0; width: 100%; height: 100%; }
html[data-sg-active] #root [data-sg-joined-part] {
  background: transparent; border-color: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none; border-radius: 0;
}
html[data-sg-active] #root [data-sg-joined-part="game"] {
  isolation: isolate; overflow: visible; margin-bottom: 0;
}
html[data-sg-active] #root [data-sg-joined-part="game"] > .aexa-runner-frame {
  border-radius: clamp(14px,1.4vw,22px) clamp(14px,1.4vw,22px) 0 0;
}
html[data-sg-active] #root [data-sg-joined-part]::before,
html[data-sg-active] #root [data-sg-joined-part]::after,
html[data-sg-active] #root [data-sg-joined-part] > .corner { display: none !important; }
[data-sg-joined-part] :is(button,a):focus-visible { outline: 2px solid #23483b; outline-offset: 5px; }
/* The mobile navigation wrapper spans the screen although its pills sit on
   the right. Empty wrapper space must not intercept underlying FAQ/actions. */
@media (max-width: 639px) {
  html[data-sg-active] nav[aria-label="Main navigation"] { pointer-events: none; }
  html[data-sg-active] nav[aria-label="Main navigation"] a { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-sg-active] .glass-surface { transition: none; }
}
@media (forced-colors: active) {
  .sg-gpu-layer { display: none !important; }
  html[data-sg-active] .glass-surface { background: Canvas; color: LinkText; border: 1px solid ButtonText; box-shadow: none; }
  html[data-sg-active] .glass-surface::before,html[data-sg-active] .glass-surface::after,html[data-sg-active] .glass-surface .sg-canvas { display: none !important; }
  [data-sea-glass][data-sg-panel] { background: Canvas !important; color: CanvasText !important; border: 1px solid ButtonText !important; box-shadow: none !important; }
  [data-sea-glass][data-sg-panel] :is(h2,h3,p,li,button,a,span,div) { color: CanvasText !important; }
  [data-sea-glass][data-sg-panel] > .sg-canvas { display: none !important; }
  html[data-sg-active] #root [data-sg-joined-part],
  html[data-sg-active] #root [data-sg-joined-part] :is(h2,h3,p,li,button,a,span,div) { color: CanvasText !important; }
}

/* Mobile optical backgrounds stay viewport-fixed inside native scrolling masks.
   Helpers are siblings of the animated cards, so reveal transforms cannot turn
   fixed imagery into scrolling imagery. Native text and shadows remain above. */
[data-sg-native-host] { position: relative; isolation: isolate; z-index: 20; }
#root > div[data-sg-native-host] { isolation: auto; z-index: auto; }
#root > div[data-sg-native-host] > .sg-native-layer { z-index: 15; }
/* Clip does not create the scroll container that overflow:hidden would create;
   sticky edge imagery must follow the viewport's native scroll position. */
.sg-native-layer { pointer-events: none; overflow: clip; }
.sg-native-surface { position: absolute; isolation: isolate; pointer-events: none;
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.sg-native-mask { position: absolute; inset: 0; pointer-events: none; }
.sg-native-image { position: fixed; max-width: none; display: block; pointer-events: none; }
.sg-native-top { mask-image: linear-gradient(to bottom,#000,transparent var(--sg-native-bevel)); }
.sg-native-bottom { mask-image: linear-gradient(to top,#000,transparent var(--sg-native-bevel)); }
.sg-native-left { mask-image: linear-gradient(to right,#000,transparent var(--sg-native-bevel)); }
.sg-native-right { mask-image: linear-gradient(to left,#000,transparent var(--sg-native-bevel)); }
.sg-native-light { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: plus-lighter; }

.sg-native-surface:not(.sg-native-decorated)::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 1px 1px #ffffff20,inset -1px -2px 2px #ffffff55; }

/* Narrow edge masks avoid full-window intermediate surfaces for transparent
   gradient regions. These rules must not establish a fixed-position container. */
.sg-native-top { bottom: auto; height: var(--sg-native-bevel); }
.sg-native-bottom { top: auto; height: var(--sg-native-bevel); }
.sg-native-left { right: auto; width: var(--sg-native-bevel); }
.sg-native-right { left: auto; width: var(--sg-native-bevel); }
.sg-native-mask { mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
/* Paint containment belongs only to narrow sticky lens strips. The body's
   fixed canvas must retain its untransformed, viewport-fixed containing block. */
.sg-native-lens-mask { contain: paint; overflow: clip; }
.sg-native-lens { position: absolute; pointer-events: none; }
.sg-native-lens-mask.sg-native-top { mask-image: linear-gradient(to bottom,#000 70%,transparent); }
.sg-native-lens-mask.sg-native-bottom { mask-image: linear-gradient(to top,#000 70%,transparent); }
.sg-native-lens-mask.sg-native-left { mask-image: linear-gradient(to right,#000 70%,transparent); }
.sg-native-lens-mask.sg-native-right { mask-image: linear-gradient(to left,#000 70%,transparent); }

/* Phone sheets (sheet-panels.js): one natively scrolling element per tint,
   clipped to the cards, holding one viewport-fixed optical canvas. */
.sg-sheet { position: absolute; pointer-events: none; }
.sg-sheet-image { position: fixed; display: block; max-width: none; pointer-events: none;
  left: -40px; top: -40px; width: calc(100vw + 80px); height: calc(100vh + 80px); }