/*
 * Shared public BioMekka shell.
 * Homepage, Control Room and Changelog use the same visual language.
 */

:root{
  color-scheme:dark;

  --bg:#05090b;
  --panel:#0d1418;
  --panel2:#111b20;
  --panel3:#091014;

  --text:#f1f6f1;
  --muted:#9eaca5;

  --accent:#83e85d;
  --accent2:#b2ff8e;
  --green:#83e85d;
  --blue:#70bce5;
  --amber:#ffd071;
  --warn:#ffd071;
  --red:#ff8585;
  --bad:#ff8585;

  --line:rgba(131,232,93,.17);
  --softline:rgba(255,255,255,.07);
  --shadow:0 16px 42px rgba(0,0,0,.30);

  --site-width:1520px;
}

*{
  box-sizing:border-box;
}

html{
  position:relative;
  min-height:100%;
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  position:relative;
  z-index:1;
  min-height:100%;
  isolation:isolate;
  margin:0;
  overflow-x:hidden;
  background:transparent;
  color:var(--text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  text-rendering:optimizeLegibility;
}




button,
input,
select,
textarea{
  font:inherit;
}

h1,
h2,
h3,
h4,
strong,
button,
.nav,
.header-context{
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.site-header{
  position:sticky;
  top:0;
  z-index:90;
  display:block;
  width:100%;
  height:auto;
  min-height:72px;
  padding:0;
  border:0;
  border-bottom:1px solid var(--softline);
  border-radius:0;
  background:rgba(5,9,11,.91);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  backdrop-filter:blur(17px);
}

.site-header-inner{
  display:flex;
  width:min(var(--site-width),calc(100% - 30px));
  min-height:72px;
  margin:0 auto;
  align-items:center;
  gap:22px;
}

.site-header .brand{
  display:flex;
  min-width:0;
  flex:0 0 auto;
  align-items:center;
  color:#fff;
  text-decoration:none;
}

.site-header .logo{
  display:block;
  width:218px;
  height:51px;
  object-fit:contain;
  object-position:left center;
}

.site-header .nav{
  display:flex;
  min-width:0;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.site-header .nav a{
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:5px;
  color:#aebbb4;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.site-header .nav a:hover,
.site-header .nav a.active{
  border-color:rgba(131,232,93,.29);
  background:rgba(131,232,93,.055);
  color:var(--accent2);
  transform:translateY(-1px);
}

.site-header .connection,
.site-header .header-context{
  display:flex;
  min-width:112px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border:1px solid rgba(131,232,93,.22);
  border-radius:999px;
  background:rgba(10,20,23,.84);
  color:#b8c6be;
  font-size:9px;
  font-weight:950;
  letter-spacing:.10em;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
}

.site-header .connection{
  color:var(--accent2);
}

.panel,
.meta-card,
.metric-card,
.chart-card,
.entry{
  border-color:var(--line);
  background-color:var(--panel);
  box-shadow:var(--shadow);
}

.button,
.social,
.timelapse-youtube-link,
.download{
  border-color:rgba(131,232,93,.25);
}

.footer{
  border-color:var(--softline);
  background:
    linear-gradient(
      90deg,
      rgba(131,232,93,.025),
      rgba(112,188,229,.025)
    ),
    #080e11;
  color:var(--muted);
}

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  iframe,
  [tabindex]
):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

@media(max-width:1050px){
  .site-header-inner{
    flex-wrap:wrap;
    gap:0 14px;
    padding:10px 0;
  }

  .site-header .logo{
    width:186px;
    height:45px;
  }

  .site-header .nav{
    order:3;
    width:100%;
    flex:1 0 100%;
    justify-content:flex-start;
    margin-top:8px;
    padding:7px 0 1px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }

  .site-header .connection,
  .site-header .header-context{
    margin-left:auto;
  }
}

@media(max-width:560px){
  .site-header-inner{
    width:calc(100% - 20px);
  }

  .site-header .logo{
    width:164px;
  }

  .site-header .connection,
  .site-header .header-context{
    min-width:0;
    max-width:126px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .site-header .nav a{
    padding:9px 10px;
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* BIOMEKKA MESH WEATHER START */

/*
 * One site-wide weather system:
 * page, header, footer, panels, cards and smaller surfaces.
 *
 * This uses real moving elements transformed across each surface.
 * It does not animate background-position.
 */
:root{
  --bm-page-base:#04090b;
  --bm-surface-top:rgba(11,22,22,.98);
  --bm-surface-bottom:rgba(4,10,12,.99);

  --bm-green:rgba(82,190,76,.50);
  --bm-green-soft:rgba(44,130,76,.28);
  --bm-blue:rgba(63,151,202,.48);
  --bm-blue-soft:rgba(44,104,159,.27);
  --bm-teal:rgba(35,155,142,.24);

  --bm-border:rgba(111,180,194,.22);
  --bm-shadow:rgba(0,0,0,.30);

  --bm-card-speed-a:34s;
  --bm-card-speed-b:43s;

  --bm-page-speed-a:125s;
  --bm-page-speed-b:158s;

  --bm-page-opacity:.42;
  --bm-card-opacity:.72;
}

html.biomekka-weather-prestorm{
  --bm-page-base:#03090d;
  --bm-surface-top:rgba(8,20,24,.985);
  --bm-surface-bottom:rgba(3,8,12,.995);

  --bm-green:rgba(48,127,80,.40);
  --bm-green-soft:rgba(28,83,70,.22);
  --bm-blue:rgba(61,144,204,.62);
  --bm-blue-soft:rgba(38,92,148,.40);
  --bm-teal:rgba(30,112,130,.32);

  --bm-border:rgba(83,151,190,.30);

  --bm-card-speed-a:22s;
  --bm-card-speed-b:29s;

  --bm-page-speed-a:72s;
  --bm-page-speed-b:88s;

  --bm-page-opacity:.56;
  --bm-card-opacity:.76;
}

html.biomekka-weather-storm{
  --bm-page-base:#010508;
  --bm-surface-top:rgba(5,15,21,.99);
  --bm-surface-bottom:rgba(1,6,10,.998);

  --bm-green:rgba(29,91,65,.28);
  --bm-green-soft:rgba(18,58,51,.18);
  --bm-blue:rgba(47,123,191,.72);
  --bm-blue-soft:rgba(27,71,129,.51);
  --bm-teal:rgba(23,84,111,.39);

  --bm-border:rgba(72,134,174,.34);
  --bm-shadow:rgba(0,3,8,.54);

  --bm-card-speed-a:14s;
  --bm-card-speed-b:19s;

  --bm-page-speed-a:36s;
  --bm-page-speed-b:47s;

  --bm-page-opacity:.72;
  --bm-card-opacity:.82;
}

html.biomekka-weather-afterstorm{
  --bm-page-base:#031013;
  --bm-surface-top:rgba(8,23,23,.985);
  --bm-surface-bottom:rgba(3,10,12,.995);

  --bm-green:rgba(68,177,105,.50);
  --bm-green-soft:rgba(38,120,91,.29);
  --bm-blue:rgba(72,163,201,.54);
  --bm-blue-soft:rgba(43,111,151,.32);
  --bm-teal:rgba(36,151,139,.34);

  --bm-border:rgba(93,172,187,.29);

  --bm-card-speed-a:27s;
  --bm-card-speed-b:35s;

  --bm-page-speed-a:88s;
  --bm-page-speed-b:108s;

  --bm-page-opacity:.54;
  --bm-card-opacity:.76;
}

/*
 * Preview mode is deliberately quick enough to judge immediately.
 */
html.biomekka-weather-previewing{
  --bm-card-speed-a:6s;
  --bm-card-speed-b:8s;
  --bm-page-speed-a:16s;
  --bm-page-speed-b:21s;
}

html{
  min-height:100%;
  background:var(--bm-page-base);
  transition:background-color 9s ease;
}

body{
  position:relative;
  min-height:100%;
  isolation:isolate;
  background:transparent!important;
}

/* Retire all previous body pseudo-element experiments. */
body::before,
body::after{
  content:none!important;
  display:none!important;
}

/*
 * Dark, slow version across the page background.
 */
.biomekka-page-atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:var(--bm-page-base);
  transition:background-color 9s ease;
}

.biomekka-page-atmosphere::before,
.biomekka-page-atmosphere::after{
  content:"";
  position:absolute;
  width:105vmax;
  height:105vmax;
  border-radius:45% 55% 62% 38% / 52% 42% 58% 48%;
  opacity:var(--bm-page-opacity);
  filter:blur(75px);
  will-change:transform;
  transition:
    opacity 9s ease,
    filter 9s ease;
}

.biomekka-page-atmosphere::before{
  top:-58vmax;
  left:-46vmax;
  background:
    radial-gradient(
      circle at 34% 34%,
      var(--bm-green),
      var(--bm-green-soft) 31%,
      transparent 67%
    ),
    radial-gradient(
      circle at 72% 65%,
      var(--bm-teal),
      transparent 60%
    );

  animation:
    biomekka-page-mesh-a
    var(--bm-page-speed-a)
    cubic-bezier(.42,0,.58,1)
    infinite
    alternate;
}

.biomekka-page-atmosphere::after{
  right:-48vmax;
  bottom:-61vmax;
  background:
    radial-gradient(
      circle at 42% 37%,
      var(--bm-blue),
      var(--bm-blue-soft) 32%,
      transparent 68%
    ),
    radial-gradient(
      circle at 72% 68%,
      var(--bm-teal),
      transparent 58%
    );

  animation:
    biomekka-page-mesh-b
    var(--bm-page-speed-b)
    cubic-bezier(.42,0,.58,1)
    infinite
    alternate;
}

/*
 * Soft storm light behind all interface content.
 */
.biomekka-background-lightning{
  position:fixed;
  inset:-12%;
  z-index:0;
  pointer-events:none;
  opacity:0;

  background:
    radial-gradient(
      ellipse at 69% 5%,
      rgba(218,242,255,.42),
      rgba(107,175,216,.15) 31%,
      transparent 69%
    );

  filter:blur(34px);
  transform:scale(1.08);
  mix-blend-mode:screen;
}

html.biomekka-weather-storm
.biomekka-background-lightning{
  animation:
    biomekka-soft-lightning
    12s
    linear
    infinite;
}

html.biomekka-weather-previewing.biomekka-weather-storm
.biomekka-background-lightning{
  animation-duration:4.2s;
}

/*
 * Keep the page interface above the background weather.
 */
body > header,
body > main,
body > footer,
body > .site-header,
body > .shell,
body > .wrap,
body > .updates-wrap,
body > .footer,
body > .site-footer-match{
  position:relative;
  z-index:1;
}

/*
 * Every ordinary panel/card receives one dedicated moving mesh layer.
 * Images and live video cards are intentionally not targeted.
 */
.biomekka-atmosphere-surface{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;

  border-color:var(--bm-border)!important;
  background:var(--bm-surface-bottom)!important;

  box-shadow:
    0 18px 45px var(--bm-shadow),
    inset 0 0 0 1px rgba(255,255,255,.018)!important;

  transition:
    border-color 9s ease,
    box-shadow 9s ease,
    background-color 9s ease;
}

.biomekka-card-atmosphere{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;

  background:
    linear-gradient(
      142deg,
      var(--bm-surface-top),
      var(--bm-surface-bottom)
    );

  opacity:1;
}

.biomekka-card-atmosphere::before,
.biomekka-card-atmosphere::after{
  content:"";
  position:absolute;
  width:115%;
  height:170%;
  border-radius:42% 58% 66% 34% / 54% 39% 61% 46%;
  opacity:var(--bm-card-opacity);
  filter:blur(34px);
  will-change:transform;
  transition:
    opacity 9s ease,
    filter 9s ease;
}

.biomekka-card-atmosphere::before{
  top:-88%;
  left:-49%;

  background:
    radial-gradient(
      circle at 37% 35%,
      var(--bm-green),
      var(--bm-green-soft) 33%,
      transparent 69%
    ),
    radial-gradient(
      circle at 75% 70%,
      var(--bm-teal),
      transparent 58%
    );

  animation:
    biomekka-card-mesh-a
    var(--bm-card-speed-a)
    cubic-bezier(.42,0,.58,1)
    infinite
    alternate;

  animation-delay:var(--bm-delay-a,0s);
}

.biomekka-card-atmosphere::after{
  right:-55%;
  bottom:-94%;

  background:
    radial-gradient(
      circle at 40% 36%,
      var(--bm-blue),
      var(--bm-blue-soft) 34%,
      transparent 69%
    ),
    radial-gradient(
      circle at 74% 67%,
      var(--bm-teal),
      transparent 59%
    );

  animation:
    biomekka-card-mesh-b
    var(--bm-card-speed-b)
    cubic-bezier(.42,0,.58,1)
    infinite
    alternate;

  animation-delay:var(--bm-delay-b,0s);
}

/*
 * Place real card contents above their private mesh layer.
 */
.biomekka-atmosphere-surface
> :not(.biomekka-card-atmosphere){
  position:relative;
  z-index:1;
}

/*
 * Moving the actual blurred shapes is reliable and visibly fluid.
 */
@keyframes biomekka-card-mesh-a{
  0%{
    transform:
      translate3d(-16%,-8%,0)
      rotate(-8deg)
      scale(1.04);
  }

  45%{
    transform:
      translate3d(67%,42%,0)
      rotate(21deg)
      scale(1.22);
  }

  100%{
    transform:
      translate3d(118%,88%,0)
      rotate(48deg)
      scale(.96);
  }
}

@keyframes biomekka-card-mesh-b{
  0%{
    transform:
      translate3d(10%,9%,0)
      rotate(11deg)
      scale(1.07);
  }

  52%{
    transform:
      translate3d(-72%,-48%,0)
      rotate(-24deg)
      scale(1.20);
  }

  100%{
    transform:
      translate3d(-121%,-91%,0)
      rotate(-51deg)
      scale(.98);
  }
}

@keyframes biomekka-page-mesh-a{
  0%{
    transform:
      translate3d(-8vw,-7vh,0)
      rotate(-6deg)
      scale(1.02);
  }

  48%{
    transform:
      translate3d(46vw,37vh,0)
      rotate(19deg)
      scale(1.17);
  }

  100%{
    transform:
      translate3d(88vw,79vh,0)
      rotate(42deg)
      scale(.97);
  }
}

@keyframes biomekka-page-mesh-b{
  0%{
    transform:
      translate3d(8vw,6vh,0)
      rotate(8deg)
      scale(1.04);
  }

  51%{
    transform:
      translate3d(-42vw,-34vh,0)
      rotate(-18deg)
      scale(1.16);
  }

  100%{
    transform:
      translate3d(-84vw,-77vh,0)
      rotate(-40deg)
      scale(.98);
  }
}

@keyframes biomekka-soft-lightning{
  0%,
  47%,
  53%,
  60%,
  82%,
  88%,
  100%{
    opacity:0;
  }

  49%{
    opacity:.17;
  }

  51%{
    opacity:.025;
  }

  56%{
    opacity:.09;
  }

  85%{
    opacity:.07;
  }
}

.biomekka-weather-preview{
  position:fixed;
  top:82px;
  right:14px;
  z-index:2147483001;
  padding:8px 10px;
  border:1px solid rgba(120,190,226,.42);
  border-radius:5px;
  background:rgba(2,8,11,.94);
  color:#a7d9ef;
  font:900 10px/1.35 system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .biomekka-page-atmosphere::before,
  .biomekka-page-atmosphere::after,
  .biomekka-card-atmosphere::before,
  .biomekka-card-atmosphere::after,
  .biomekka-background-lightning{
    animation:none!important;
    will-change:auto;
  }
}

/* BIOMEKKA MESH WEATHER END */

/* BIOMEKKA CANVAS LIGHTNING START */

/*
 * Colour depth:
 * darkest moving background,
 * lighter cards,
 * darker framing surfaces.
 */
:root{
  --bm-page-base:#020608;

  --bm-card-surface-top:rgba(17,36,38,.96);
  --bm-card-surface-bottom:rgba(7,16,18,.99);

  --bm-frame-surface-top:rgba(6,20,22,.985);
  --bm-frame-surface-bottom:rgba(2,9,12,.998);
}

html.biomekka-weather-prestorm{
  --bm-page-base:#01060a;

  --bm-card-surface-top:rgba(12,30,36,.97);
  --bm-card-surface-bottom:rgba(4,12,17,.995);

  --bm-frame-surface-top:rgba(4,15,21,.99);
  --bm-frame-surface-bottom:rgba(1,7,11,.998);
}

html.biomekka-weather-storm{
  --bm-page-base:#010305;

  --bm-card-surface-top:rgba(8,24,33,.98);
  --bm-card-surface-bottom:rgba(2,8,13,.998);

  --bm-frame-surface-top:rgba(2,11,17,.995);
  --bm-frame-surface-bottom:rgba(0,4,8,.999);
}

html.biomekka-weather-afterstorm{
  --bm-page-base:#021013;

  --bm-card-surface-top:rgba(13,35,35,.97);
  --bm-card-surface-bottom:rgba(5,14,16,.995);

  --bm-frame-surface-top:rgba(5,20,21,.99);
  --bm-frame-surface-bottom:rgba(2,9,11,.998);
}

.biomekka-page-atmosphere{
  z-index:0!important;
  background-color:var(--bm-page-base)!important;
}

.biomekka-page-atmosphere::before,
.biomekka-page-atmosphere::after{
  opacity:calc(var(--bm-page-opacity) * .58)!important;
  filter:
    blur(92px)
    brightness(.62)
    saturate(.92)!important;
}

.biomekka-card-atmosphere{
  background:
    linear-gradient(
      142deg,
      var(--bm-card-surface-top),
      var(--bm-card-surface-bottom)
    )!important;
}

.site-header .biomekka-card-atmosphere,
.site-footer-match .biomekka-card-atmosphere,
.footer .biomekka-card-atmosphere,
.bm-site-header .biomekka-card-atmosphere,
.bm-site-footer .biomekka-card-atmosphere{
  background:
    linear-gradient(
      142deg,
      var(--bm-frame-surface-top),
      var(--bm-frame-surface-bottom)
    )!important;
}

.site-header
.biomekka-card-atmosphere::before,
.site-header
.biomekka-card-atmosphere::after,
.site-footer-match
.biomekka-card-atmosphere::before,
.site-footer-match
.biomekka-card-atmosphere::after,
.footer
.biomekka-card-atmosphere::before,
.footer
.biomekka-card-atmosphere::after,
.bm-site-header
.biomekka-card-atmosphere::before,
.bm-site-header
.biomekka-card-atmosphere::after,
.bm-site-footer
.biomekka-card-atmosphere::before,
.bm-site-footer
.biomekka-card-atmosphere::after{
  opacity:calc(var(--bm-card-opacity) * .64)!important;
  filter:
    blur(42px)
    brightness(.72)
    saturate(.90)!important;
}

/*
 * Independent lightning layer:
 * background mesh is z-index 0,
 * lightning is z-index 1,
 * the site interface is z-index 2.
 */
.biomekka-background-lightning,
.biomekka-lightning-stage{
  display:none!important;
}

.biomekka-lightning-canvas{
  position:fixed;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
  background:transparent;
  mix-blend-mode:screen;
}

body > main,
body > footer,
body > .shell,
body > .wrap,
body > .updates-wrap,
body > .footer,
body > .site-footer-match{
  position:relative;
  z-index:2!important;
}

body > header,
body > .site-header{
  position:sticky!important;
  top:0;
  z-index:90!important;
}

@media(prefers-reduced-motion:reduce){
  .biomekka-lightning-canvas{
    display:none!important;
  }
}

/* BIOMEKKA CANVAS LIGHTNING END */

/* BIOMEKKA LIGHTING DEPTH START */

/*
 * Same BioMekka green, teal and blue palette at three depths:
 *
 * 1. Background atmosphere — darkest.
 * 2. Cards and panels — brighter.
 * 3. Header and footer — dark framing layer.
 */
:root{
  --bm-page-base:#010405;

  --bm-card-surface-top:rgba(20,45,43,.955);
  --bm-card-surface-bottom:rgba(7,18,19,.99);

  --bm-frame-surface-top:rgba(5,18,19,.99);
  --bm-frame-surface-bottom:rgba(1,7,9,.999);
}

html.biomekka-weather-prestorm{
  --bm-page-base:#010306;

  --bm-card-surface-top:rgba(15,38,44,.97);
  --bm-card-surface-bottom:rgba(4,13,18,.995);

  --bm-frame-surface-top:rgba(3,14,19,.995);
  --bm-frame-surface-bottom:rgba(0,5,8,.999);
}

html.biomekka-weather-storm{
  --bm-page-base:#000203;

  --bm-card-surface-top:rgba(10,30,39,.975);
  --bm-card-surface-bottom:rgba(2,9,14,.998);

  --bm-frame-surface-top:rgba(2,10,15,.998);
  --bm-frame-surface-bottom:rgba(0,3,6,.999);
}

html.biomekka-weather-afterstorm{
  --bm-page-base:#021012;

  --bm-card-surface-top:rgba(17,43,40,.965);
  --bm-card-surface-bottom:rgba(5,16,17,.995);

  --bm-frame-surface-top:rgba(4,18,18,.995);
  --bm-frame-surface-bottom:rgba(1,7,9,.999);
}

/* Darkest layer: the page behind everything. */
.biomekka-page-atmosphere{
  z-index:0!important;
  background-color:var(--bm-page-base)!important;
}

.biomekka-page-atmosphere::before,
.biomekka-page-atmosphere::after{
  opacity:calc(var(--bm-page-opacity) * .46)!important;

  filter:
    blur(96px)
    brightness(.45)
    saturate(.91)!important;
}

/* Brighter moving colour within cards and panels. */
.biomekka-card-atmosphere{
  background:
    linear-gradient(
      142deg,
      var(--bm-card-surface-top),
      var(--bm-card-surface-bottom)
    )!important;
}

.biomekka-card-atmosphere::before,
.biomekka-card-atmosphere::after{
  opacity:calc(var(--bm-card-opacity) * .10)!important;

  filter:
    blur(34px)
    brightness(.68)
    saturate(.78)!important;
}

/*
 * Visual depth:
 *   page background = dark
 *   outer cards/panels = light
 *   nested foreground cards/tiles = dark
 */

/* Light middle layer: the main cards and panels. */
body > .biomekka-atmosphere-surface > .biomekka-card-atmosphere,
main > .biomekka-atmosphere-surface > .biomekka-card-atmosphere,
.shell > .biomekka-atmosphere-surface > .biomekka-card-atmosphere,
.wrap > .biomekka-atmosphere-surface > .biomekka-card-atmosphere,
.updates-wrap > .biomekka-atmosphere-surface > .biomekka-card-atmosphere{
  opacity:.96!important;
}

body > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::before,
body > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::after,
main > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::before,
main > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::after,
.shell > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::before,
.shell > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::after,
.wrap > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::before,
.wrap > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::after,
.updates-wrap > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::before,
.updates-wrap > .biomekka-atmosphere-surface > .biomekka-card-atmosphere::after{
  opacity:calc(var(--bm-card-opacity) * .075)!important;
  filter:
    blur(37px)
    brightness(.66)
    saturate(.76)!important;
}

/* Dark front layer: cards, controls and tiles inside a main card. */
.biomekka-atmosphere-surface
.biomekka-atmosphere-surface
> .biomekka-card-atmosphere{
  background:
    linear-gradient(
      142deg,
      rgba(5,18,19,.985),
      rgba(1,7,9,.999)
    )!important;
}

.biomekka-atmosphere-surface
.biomekka-atmosphere-surface
> .biomekka-card-atmosphere::before,
.biomekka-atmosphere-surface
.biomekka-atmosphere-surface
> .biomekka-card-atmosphere::after{
  opacity:calc(var(--bm-card-opacity) * .025)!important;
  filter:
    blur(44px)
    brightness(.42)
    saturate(.68)!important;
}

/* BIOMEKKA SHARED CARD EDGE START */
/*
 * Every shared card gets the same green-to-blue top edge.
 * This replaces the old homepage-only list, so Control Room,
 * Changelog and dynamically generated Update cards match too.
 */
.site-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  width:auto!important;
  height:2px!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(
    90deg,
    transparent,
    #82e45e 28%,
    #58a9d8 72%,
    transparent
  )!important;
  opacity:.72!important;
  z-index:3!important;
  pointer-events:none!important;
}
/* BIOMEKKA SHARED CARD EDGE END */

/* Dark framing layer: header and footer. */
.site-header .biomekka-card-atmosphere,
.site-footer-match .biomekka-card-atmosphere,
.footer .biomekka-card-atmosphere,
.bm-site-header .biomekka-card-atmosphere,
.bm-site-footer .biomekka-card-atmosphere{
  background:
    linear-gradient(
      142deg,
      var(--bm-frame-surface-top),
      var(--bm-frame-surface-bottom)
    )!important;
}

.site-header
.biomekka-card-atmosphere::before,
.site-header
.biomekka-card-atmosphere::after,
.site-footer-match
.biomekka-card-atmosphere::before,
.site-footer-match
.biomekka-card-atmosphere::after,
.footer
.biomekka-card-atmosphere::before,
.footer
.biomekka-card-atmosphere::after,
.bm-site-header
.biomekka-card-atmosphere::before,
.bm-site-header
.biomekka-card-atmosphere::after,
.bm-site-footer
.biomekka-card-atmosphere::before,
.bm-site-footer
.biomekka-card-atmosphere::after{
  opacity:calc(var(--bm-card-opacity) * .48)!important;

  filter:
    blur(45px)
    brightness(.56)
    saturate(.90)!important;
}

/*
 * Independent white-lightning canvas:
 *
 * z-index 0 = dark moving background
 * z-index 1 = random bright white light
 * z-index 2 = site interface and cards
 */
.biomekka-background-lightning,
.biomekka-lightning-stage{
  display:none!important;
}

.biomekka-lightning-canvas{
  position:fixed;
  inset:0;
  z-index:1;
  display:block;
  width:100vw;
  height:100vh;
  pointer-events:none;
  background:transparent;
  opacity:1;
}


@media(prefers-reduced-motion:reduce){
  .biomekka-lightning-canvas{
    display:none!important;
  }
}

/* BIOMEKKA LIGHTING DEPTH END */


/* BIOMEKKA TOUCH ATMOSPHERE STABILITY START
 * Samsung Internet/Android can flicker while compositing several very
 * large blurred animated gradient layers. Keep the same atmosphere on
 * touch phones, but hold those layers still and retire compositor hints.
 */
@media (hover:none) and (pointer:coarse){
  .biomekka-page-atmosphere::before,
  .biomekka-page-atmosphere::after,
  .biomekka-card-atmosphere::before,
  .biomekka-card-atmosphere::after{
    animation:none!important;
    transition:none!important;
    will-change:auto!important;
  }

  .biomekka-background-lightning{
    will-change:auto!important;
  }
}
/* BIOMEKKA TOUCH ATMOSPHERE STABILITY END */

/* BIOMEKKA UNIFIED SITE SHELL START */
:root{
  --bm-font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bm-font-body:15px;
  --bm-font-small:11px;
  --bm-font-label:10px;
  --bm-font-nav:10px;
  --bm-radius-card:8px;
  --bm-control-height:42px;
}

html,
body{
  max-width:100%;
  overflow-x:clip;
}

body{
  display:block;
  padding:0;
  font-family:var(--bm-font-family)!important;
  font-size:var(--bm-font-body)!important;
  line-height:1.55;
}

button,
input,
select,
textarea,
optgroup{
  font-family:var(--bm-font-family)!important;
}

h1{
  font-family:var(--bm-font-family)!important;
  font-size:clamp(48px,7vw,96px)!important;
  line-height:.94!important;
}

h2{
  font-family:var(--bm-font-family)!important;
  font-size:clamp(24px,3vw,38px)!important;
  line-height:1.08!important;
}

h3{
  font-family:var(--bm-font-family)!important;
  font-size:clamp(18px,2vw,24px)!important;
  line-height:1.15!important;
}

:where(p,li,dd,dt,blockquote,figcaption){
  font-family:var(--bm-font-family);
}

:where(img,video,iframe,canvas,svg){
  max-width:100%;
}

:where(pre,code){
  max-width:100%;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

:where(main,section,article,aside,div,form,fieldset,figure) > *{
  min-width:0;
}

:where(.shell,.wrap,.updates-wrap,.newsletter-action-wrap){
  width:min(var(--site-width),calc(100% - 44px));
  max-width:100%;
  margin-inline:auto;
}

.newsletter-page{
  width:min(700px,calc(100% - 44px));
  max-width:100%;
  margin:clamp(48px,8vw,110px) auto;
}

biomekka-header,
biomekka-footer{
  display:block;
  width:100%;
  min-width:0;
}

biomekka-header{
  position:sticky;
  top:0;
  z-index:90;
}

biomekka-footer{
  position:relative;
  z-index:2;
}

.bm-site-header{
  position:relative;
  width:100%;
  min-height:72px;
  border-bottom:1px solid var(--softline);
  background:rgba(5,9,11,.91);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  backdrop-filter:blur(17px);
}

.bm-site-header-inner{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  width:min(var(--site-width),calc(100% - 30px));
  min-height:72px;
  margin-inline:auto;
  align-items:center;
  gap:20px;
}

.bm-site-brand{
  display:flex;
  min-width:0;
  align-items:center;
  color:#fff;
  text-decoration:none;
}

.bm-site-logo{
  display:block;
  width:218px;
  height:51px;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}

.bm-site-nav{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.bm-site-nav a{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:5px;
  color:#aebbb4;
  font-family:var(--bm-font-family)!important;
  font-size:var(--bm-font-nav)!important;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease;
}

.bm-site-nav a:hover,
.bm-site-nav a.active{
  border-color:rgba(131,232,93,.29);
  background:rgba(131,232,93,.055);
  color:var(--accent2);
  transform:translateY(-1px);
}

.bm-header-context{
  display:flex;
  min-width:112px;
  max-width:180px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:9px 12px;
  border:1px solid rgba(131,232,93,.22);
  border-radius:999px;
  background:rgba(10,20,23,.84);
  color:#b8c6be;
  font-family:var(--bm-font-family)!important;
  font-size:9px!important;
  font-weight:950;
  letter-spacing:.10em;
  line-height:1;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.bm-header-live-status{
  color:var(--accent2);
}

.bm-nav-toggle{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:0;
  border:1px solid rgba(131,232,93,.28);
  border-radius:6px;
  background:rgba(10,20,23,.9);
  color:var(--text);
  cursor:pointer;
}

.bm-nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:99px;
  background:currentColor;
  transition:transform .16s ease,opacity .16s ease;
}

biomekka-header[data-menu-open] .bm-nav-toggle span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

biomekka-header[data-menu-open] .bm-nav-toggle span:nth-child(2){
  opacity:0;
}

biomekka-header[data-menu-open] .bm-nav-toggle span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.bm-site-footer{
  display:flex;
  width:min(var(--site-width),calc(100% - 44px));
  max-width:100%;
  margin:28px auto 32px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:var(--bm-radius-card);
  background:linear-gradient(90deg,rgba(131,232,93,.025),rgba(112,188,229,.025)),#080e11;
  color:var(--muted);
  font-size:var(--bm-font-small)!important;
  box-shadow:var(--shadow);
}

.bm-footer-social-wrap{
  display:flex;
  min-width:0;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.bm-footer-prompt{
  color:#eef4f0;
  font-size:var(--bm-font-small)!important;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.bm-footer-socials{
  display:flex;
  min-width:0;
  gap:9px;
  flex-wrap:wrap;
}

.bm-footer-social{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid rgba(131,232,93,.34);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(131,232,93,.15),rgba(7,13,15,.94));
  color:#f5fff5;
  font-size:var(--bm-font-label)!important;
  font-weight:900;
  letter-spacing:.07em;
  text-decoration:none;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 5px 14px rgba(0,0,0,.22);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.bm-footer-social::before{
  content:'';
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:999px;
  background:#83e85d;
  box-shadow:0 0 10px rgba(131,232,93,.78);
}

.bm-footer-social::after{
  content:'↗';
  color:#83e85d;
  font-size:12px;
  line-height:1;
}

.bm-footer-social:hover{
  transform:translateY(-2px);
  border-color:rgba(131,232,93,.88);
  background:linear-gradient(180deg,rgba(131,232,93,.23),rgba(10,18,19,.98));
  box-shadow:0 0 18px rgba(131,232,93,.18),0 8px 18px rgba(0,0,0,.30);
}

.bm-footer-legal{
  min-width:0;
  line-height:1.7;
  text-align:right;
}

.bm-footer-legal a{
  margin-left:12px;
  color:inherit;
  opacity:.86;
}

.bm-footer-legal a:hover{
  color:#eef4f0;
  opacity:1;
}

.site-card{
  min-width:0;
  border-color:var(--line)!important;
  border-radius:var(--bm-radius-card)!important;
  box-shadow:var(--shadow)!important;
}

.site-feature{
  min-width:0;
  border-color:var(--line)!important;
  border-radius:5px;
}


/* Keep the moving page gradient at exactly half its previous intensity. */
.biomekka-page-atmosphere::before,
.biomekka-page-atmosphere::after{
  opacity:calc(var(--bm-page-opacity) * .23)!important;
}

.biomekka-lightning-canvas{
  width:100%!important;
  max-width:none;
}

@media(max-width:980px){
  .bm-site-header-inner{
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:10px;
  }

  .bm-site-logo{
    width:180px;
    height:46px;
  }

  .bm-nav-toggle{
    display:flex;
    grid-column:3;
    grid-row:1;
  }

  .bm-header-context{
    grid-column:2;
    grid-row:1;
    min-width:0;
    max-width:150px;
  }

  .bm-site-nav{
    position:absolute;
    top:100%;
    right:0;
    left:0;
    display:none;
    grid-template-columns:1fr;
    max-height:calc(100vh - 72px);
    padding:10px;
    overflow-y:auto;
    border:1px solid var(--softline);
    border-top:0;
    background:rgba(5,9,11,.985);
    box-shadow:0 18px 30px rgba(0,0,0,.4);
    backdrop-filter:blur(17px);
  }

  biomekka-header[data-menu-open] .bm-site-nav{
    display:grid;
  }

  .bm-site-nav a{
    width:100%;
    min-height:44px;
    justify-content:flex-start;
    padding:12px 14px;
    white-space:normal;
  }
}

@media(max-width:700px){
  :where(.shell,.wrap,.updates-wrap,.newsletter-action-wrap){
    width:calc(100% - 20px);
  }

  .newsletter-page{
    width:calc(100% - 20px);
    margin:42px auto;
    padding:22px;
  }

  h1{
    font-size:clamp(40px,14vw,64px)!important;
  }

  .hero h1{
    white-space:normal!important;
    overflow-wrap:anywhere;
  }

  .bm-site-header-inner{
    width:calc(100% - 20px);
  }

  .bm-site-footer{
    display:block;
    width:calc(100% - 20px);
    padding:18px;
  }

  .bm-footer-prompt{
    display:block;
    margin-bottom:10px;
  }

  .bm-footer-socials{
    margin-bottom:15px;
  }

  .bm-footer-legal{
    text-align:left;
  }

  .bm-footer-legal a{
    display:block;
    margin:4px 0 0;
  }

  .cookie-settings-standalone{
    width:calc(100% - 20px);
    margin-top:-20px;
    text-align:left;
  }

  .controls,
  .updates-controls{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media(max-width:520px){
  .bm-site-logo{
    width:154px;
    height:43px;
  }

  .bm-header-context{
    display:none;
  }

  .bm-site-header-inner{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .bm-nav-toggle{
    grid-column:2;
  }
}
/* BIOMEKKA UNIFIED SITE SHELL END */

/* Long headings must wrap rather than widen narrow mobile pages. */
h1,
h2,
h3{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Compact action-card titles use one shared size and wrap on words. */
.newsletter-page h1,
.newsletter-confirm-card h1{
  font-size:clamp(32px,6vw,54px)!important;
  overflow-wrap:normal;
  word-break:normal;
}

/* Shared typography scale for equivalent content across every page. */
:where(p,li,dd,dt,blockquote){
  font-size:var(--bm-font-body)!important;
  line-height:1.65;
}

:where(.hero p,.hero-copy,.updates-hero p,.update-detail-summary){
  font-size:17px!important;
  line-height:1.65!important;
}

:where(small,figcaption,.small,.updates-status){
  font-size:var(--bm-font-small)!important;
}

:where(.eyebrow,.section-kicker,.live-kicker,.habitat-kicker,.history-kicker,.future-kicker,.newsletter-kicker,.newsletter-eyebrow,.update-card-meta,.update-detail-meta,.label){
  font-size:var(--bm-font-label)!important;
}

.site-button{
  font-family:var(--bm-font-family)!important;
  font-size:var(--bm-font-small)!important;
  font-weight:900;
  line-height:1.1;
}

/* The mobile dropdown must be allowed to leave the animated header frame. */
.bm-site-header.biomekka-atmosphere-surface{
  overflow:visible!important;
}


/* BIOMEKKA SHARED COOKIE CONTROLS START */
.bm-footer-cookie-settings{
  margin:0 0 0 12px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
  font:inherit;
  text-decoration:underline;
  opacity:.86;
}

.bm-footer-cookie-settings:hover,
.bm-footer-cookie-settings:focus-visible{
  color:#eef4f0;
  opacity:1;
}

.cookie-banner{
  position:fixed;
  right:14px;
  bottom:14px;
  left:14px;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:min(900px,calc(100% - 28px));
  max-width:900px;
  margin:0 auto;
  padding:14px 15px;
  border:1px solid rgba(131,232,93,.42);
  border-radius:6px;
  background:#091014;
  box-shadow:0 12px 36px rgba(0,0,0,.60);
  color:#eef4ef;
}

.cookie-banner[hidden]{display:none!important}

.cookie-copy{
  min-width:0;
  font-size:12px;
  line-height:1.5;
}

.cookie-copy strong{
  display:block;
  margin-bottom:3px;
  color:#83e85d;
  font-size:13px;
}

.cookie-actions{
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  gap:8px;
}

.cookie-btn{
  padding:8px 11px;
  border:1px solid rgba(131,232,93,.42);
  border-radius:4px;
  background:#10191d;
  color:#eef4ef;
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:800;
}

.cookie-btn.primary{background:#315f28}

@media(max-width:640px){
  .cookie-banner{
    align-items:flex-start;
    flex-direction:column;
  }

  .bm-footer-cookie-settings{
    margin-left:8px;
  }
}
/* BIOMEKKA SHARED COOKIE CONTROLS END */


/* BIOMEKKA SHARED PAGE TITLES START */
/*
 * Every non-homepage page title now uses the homepage title language:
 * same family, heavy weight, spacing, uppercase treatment and shadow.
 * text-transform keeps the underlying page copy unchanged.
 */
.bm-page-title{
  max-width:100%;
  margin-block-start:10px;
  color:var(--text);
  font-family:var(--bm-font-family)!important;
  font-size:clamp(40px,5.2vw,72px)!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  line-height:.96!important;
  overflow-wrap:anywhere;
  text-shadow:0 7px 34px rgba(0,0,0,.48);
  text-transform:uppercase!important;
}

@media(max-width:700px){
  .bm-page-title{
    font-size:clamp(34px,11vw,52px)!important;
    line-height:.96!important;
  }
}
/* BIOMEKKA SHARED PAGE TITLES END */


/* BIOMEKKA SHARED SYSTEM MAP START */
.bm-system-map{
  display:grid;
  grid-template-columns:minmax(110px,1fr) 22px minmax(110px,1fr) 22px minmax(110px,1fr) 22px minmax(110px,1fr) 22px minmax(110px,1fr);
  gap:7px;
  align-items:stretch;
  min-width:0;
}

.bm-system-node{
  display:flex;
  min-width:0;
  min-height:126px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:13px 10px;
  border:1px solid rgba(131,232,93,.16);
  border-radius:4px;
  background:rgba(4,10,12,.56);
  text-align:center;
}

.bm-system-node > span{
  color:#a8f58c;
  font-size:25px;
  line-height:1;
}

.bm-system-node strong{
  margin-top:10px;
  color:#f2f6f3;
  font-size:11px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.bm-system-node small{
  margin-top:6px;
  color:#98a9a0;
  font-size:10px;
  line-height:1.35;
}

.bm-system-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(131,232,93,.62);
  font-size:19px;
  font-weight:900;
}

@media(max-width:1120px){
  .bm-system-map{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .bm-system-arrow{
    display:none;
  }
}

@media(max-width:720px){
  .bm-system-map{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bm-system-node:last-of-type{
    grid-column:1/-1;
  }
}

@media(max-width:340px){
  .bm-system-map{
    grid-template-columns:1fr;
  }

  .bm-system-node:last-of-type{
    grid-column:auto;
  }

  .bm-system-node{
    min-height:105px;
  }
}
/* BIOMEKKA SHARED SYSTEM MAP END */