/* 
#                     @@@@@@@@                     
#               %@@@@@@@...&@@@@@@@&#              
#            @@@@(                (@@@@(           
#         .@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@(         
#       /@@@@@@%.    /@@@@@@@@@.      %&@@@@(      
#     @@@@@%      (@@@#  @@. @@@@@       @@@@@@    
#   &@@@@@#      @@@@@@@@@@@@@@@@@@&     #@@(@@@%  
# /@@@**@@,   &@@@(              (@@@@@(  @@@ ,@@@ 
# @@@. /@@#/@@@@@@                ,@@@@@@/@@%  ,@@@
#@@@,  *@@@@@ &@@,      ,@@@       @@@@ @@@@/   %@@
#@@@,   *@@@  &@@      .@@@@@      .@@@ %@@@    .@@
#@@@,   %@@@& &@@,       ,,,       @@@@&@@@@@   .@@
#*@@@.  @@#/@@@@@@                ,@@@@@( (@@  .@@@
# &@@@. @@#   &@@@@*            .(@@@&    (@@ ,@@& 
#  #@@@@@@@      &@@@@@@@@@@@@@@@@@&      @@@@@@#  
#    #@@@@@@       @@@@#     #@@@@       &@@@@#    
#      .@@@@@@#.     ,@@@@@@@@@(     #@@@@@(.      
#          (@@@@@@@@@@@@@@@@@@@@@@@@@@@@@(         
#             &@@@(.             ./@@@@            
#                %@@@@@@@@@@@@@@@@&#               


============================================================
Styles for The Cybernetics Lab site.
============================================================ */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url("/fonts/NotoSans.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url("/fonts/NotoSans-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Color Emoji";
  font-display: swap;
  src: url("/fonts/NotoColorEmoji.woff2") format("woff2");
}

@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/fonts/MaterialSymbolsOutlined.woff2") format("woff2");
}

:root {
  --clab-bg: #020202;
  --clab-fg: #e8e8e8;
  --clab-line: #fff;
  --clab-font: "Noto Sans", sans-serif;
  --clab-header-height: 91px;
  --clab-gutter: max(3rem, calc((100% - 1600px) / 2 + 3rem));
  --color-line: #222;
  --color-muted: #c6c6c6;
  --color-dim: #ababab;
  --color-panel: #0c0c0c;
  --space-small: .75rem;
  --space-medium: 1.5rem;
  --space-large: 3rem;
  --space-xlarge: 6rem;
  --hero-video: 1;
  --logo-menu: 0;
  --explore-pixel-ratio: 2;
}

html.light {
  --clab-bg: #fafafa;
  --clab-fg: #1a1a1a;
  --clab-line: #111;
  --color-line: #ddd;
  --color-muted: #303030;
  --color-dim: #444;
  --color-panel: #eee;
}

html {
  background: var(--clab-bg);
  scroll-behavior: smooth;
  scroll-padding-top: var(--clab-header-height);
}

html, body, *, *::before, *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, filter .4s ease;
}

html, body {
  margin: 0;
  overflow-x: clip;
  color: var(--clab-fg);
  font-family: var(--clab-font);
}

body {
  box-sizing: border-box;
  min-height: 100vh;
  padding-top: var(--clab-header-height);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

::selection { background: color-mix(in srgb, var(--clab-fg) 75%, transparent); color: var(--clab-bg); }
:focus-visible { outline: 2px solid var(--clab-fg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

.material-symbols-outlined,
#footer-research h4::before,
#footer-publications h4::before,
#footer-solutions h4::before,
#footer-engage h4::before {
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
}

/* ============================================================
   Bars: shared header and footer navigation
   ============================================================ */

.bar {
  padding: 1.25rem 2rem 1.75rem;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  font-size: .6rem;
  letter-spacing: .12em;
  color: #888;
}

.bar a {
  position: relative;
  color: #888;
  transition: color .3s ease;
  text-decoration: none;
  padding: .6rem .7rem;
  margin: -.6rem -.7rem;
}

.bar a::after,
.bar button.icon::after {
  content: "";
  position: absolute;
  left: -.8rem;
  right: -.8rem;
  bottom: .25rem;
  height: 1px;
  background: var(--c, #fff);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease .12s;
}

.bar a:hover { color: var(--c, #fff); }
.bar a:hover, .bar button.icon:hover, #footer-grid a:hover { transition-duration: .06s; }
.bar a:hover::after,
.bar a.on::after,
.bar button.icon:hover::after,
.bar button.icon.on::after { transform: scaleX(1); }
.bar a.on, .bar a.on:hover { color: var(--c, #fff); }
.bar a.on::after { background: var(--c, #fff); transition-delay: 0s; }

.bar button.icon {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .7rem;
  margin: -.6rem -.7rem;
  border: 0;
  background: none;
  color: #888;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color .3s ease;
}

.bar button.icon span { font-size: 20px; transition: none; }
.bar button.icon .label { font-size: inherit; color: inherit; }
.bar button.icon:hover, .bar button.icon.on { color: #fff; }
.bar button.icon.holographic:is(:hover, .on) span {
  background-image: radial-gradient(circle at 50% 50%, #ffd36e, #ff9de2 25%, #b79cff 50%, #7ee8ff 75%, #a6ff9e 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: radial-holo 4s ease-in-out infinite alternate;
}
@keyframes radial-holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.bar button.icon.holographic:is(:hover, .on) #holodisc-icon { -webkit-background-clip: border-box; background-clip: border-box; }
.bar button.icon.holographic:is(:hover, .on)::after {
  background: linear-gradient(90deg, #ffd36e, #ff9de2, #b79cff, #7ee8ff, #a6ff9e, #ffd36e);
  background-size: 300% 100%;
  animation: scan-holo 4s linear infinite;
}
#holodisc-icon { width: 20px; height: 20px; background: currentColor; mask: url("/images/icons/holodisc.svg") no-repeat center / contain; -webkit-mask: url("/images/icons/holodisc.svg") no-repeat center / contain; }

.dot { width: 1px; height: 10px; background: #555; align-self: center; }
#conn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 0; }

/* ============================================================
   Header
   ============================================================ */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  background: var(--clab-bg);
  border-bottom: 1px solid #222;
  box-sizing: border-box;
  height: var(--clab-header-height);
  padding: 2.2rem var(--clab-gutter);
  font-size: .7rem;
  gap: 2rem;
  justify-content: flex-start;
}

#site-header a:not(#header-logo, #header-home),
#site-header button.icon {
  display: flex;
  align-items: center;
  padding: 2.2rem .7rem;
  margin: -2.2rem -.7rem;
}

#site-header a:hover,
#site-header a.on,
#site-header a.on:hover { color: #fff; }

body:has(#explore.open, #holodisc.open, #consent.open) #site-header a.on:not(:hover) { color: #888; }
html.light body:has(#explore.open, #holodisc.open, #consent.open) #site-header a.on:not(:hover) { color: #555; }

#site-header a::after,
#site-header button.icon::after { display: none; }

#site-header::before,
#header-home {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 32px;
}

#site-header::before {
  content: "";
  background: url("/images/cybernetics_lab_wordmark.svg") no-repeat center / contain;
  filter: brightness(0) invert(1);
  z-index: 1;
  pointer-events: none;
}

#header-home { display: none; z-index: 2; padding: 0; margin: 0; }
#nav-menu { display: contents; }
#site-header #nav-menu #nav-home { display: none; }
#nav-burger { display: none; }

#header-logo { align-self: center; padding: 0; margin: 0 -.4rem 0 0; }
#header-logo img {
  display: block;
  height: 30px;
  margin: -6.5px 0 -6.5px -8px;
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

#site-header.intro #header-logo img { animation: logo-spin .8s cubic-bezier(.22,1,.36,1); }

body:has(#explore.open) #header-logo,
body:has(#holodisc.open) #header-logo,
body:has(#consent.open) #header-logo,
body:has(#faq) #header-logo { cursor: pointer; }

@keyframes logo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#site-header:where(.intro) #nav-menu > .dot,
#site-header:where(.intro) #nav-menu > a:not(#header-logo),
#site-header:where(.intro) #nav-menu > button.icon {
  animation: nav-reveal .5s cubic-bezier(.22,1,.36,1) backwards;
}

#site-header #nav-menu > :nth-child(1) { animation-delay: .18s; }
#site-header #nav-menu > :nth-child(2) { animation-delay: .26s; }
#site-header #nav-menu > :nth-child(3) { animation-delay: .34s; }
#site-header #nav-menu > :nth-child(4) { animation-delay: .42s; }
#site-header #nav-menu > :nth-child(5) { animation-delay: .5s; }
#site-header #nav-menu > :nth-child(6) { animation-delay: .58s; }
#site-header #nav-menu > :nth-child(7) { animation-delay: .66s; }
#site-header #nav-menu > :nth-child(8) { animation-delay: .74s; }
#site-header #nav-menu > :nth-child(9) { animation-delay: .82s; }
#site-header #nav-menu > :nth-child(10) { animation-delay: .9s; }

@keyframes nav-reveal {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

#site-header #theme-toggle, #site-header #search-btn { margin-left: auto; }
#site-header .dot:has(+ #search-btn) { display: none; }

body > :not(#site-header):not(#consent):not(#gate):not(#holodisc):not(#explore) {
  transform-origin: 50% 0;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, filter .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
body.pushed > :not(#site-header):not(#consent):not(#gate):not(#holodisc):not(#explore):not(#zHover) { transform: perspective(1200px) translateZ(-900px); filter: blur(80px); }html:has(body.pushed) { background: var(--clab-bg); }

#nav-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--nav-colour, var(--clab-line));
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
  transition: transform .16s cubic-bezier(.4,0,.2,1), background .45s cubic-bezier(.4,0,.2,1);
}

#nav-drawer[data-nav="header-logo"] { display: none; }

#nav-drawer.open {
  transform: scaleY(1);
  pointer-events: auto;
  transition: transform .24s cubic-bezier(.16,1,.3,1), background .45s cubic-bezier(.4,0,.2,1);
}

#nav-line,
#nav-trail {
  position: absolute;
  bottom: 0;
  left: var(--line-left, 0);
  right: var(--line-right, 100%);
  height: 1px;
  background: var(--line-colour, #fff);
  opacity: 0;
}

#nav-line { transition: left .3s cubic-bezier(.16,1,.3,1), right .65s cubic-bezier(.16,1,.3,1), background .35s ease, opacity .35s ease; }
#nav-line.right { transition: left .65s cubic-bezier(.16,1,.3,1), right .3s cubic-bezier(.16,1,.3,1), background .35s ease, opacity .35s ease; }
#nav-trail { transition: left .55s cubic-bezier(.16,1,.3,1), right 1s cubic-bezier(.16,1,.3,1), background .35s ease, opacity .35s ease; }
#nav-trail.right { transition: left 1s cubic-bezier(.16,1,.3,1), right .55s cubic-bezier(.16,1,.3,1), background .35s ease, opacity .35s ease; }
#nav-line.instant, #nav-trail.instant { transition: none; }
#nav-line.show { opacity: 1; }
#nav-line.holo {
  background: linear-gradient(90deg, #ffd36e, #ff9de2, #b79cff, #7ee8ff, #a6ff9e, #ffd36e);
  background-size: 300% 100%;
  animation: scan-holo 4s linear infinite;
}
#nav-trail.show { opacity: .35; }

@media (max-width: 820px) {
  :root { --logo-menu: 1; --menu-width: calc(100vw - 62px); }
  #site-header { transform: translateX(0); transition: background-color .4s ease, color .4s ease, border-color .4s ease, filter .4s ease, transform .3s cubic-bezier(.22,1,.36,1); }
  #site-header.menu-open { transform: translateX(var(--menu-width)); }
  html:has(#site-header.menu-open, #explore.open) { overflow: hidden; }
  #site-header::before, #header-home { width: min(260px, calc(100% - 136px)); transition: opacity .3s ease, filter .4s ease; }
  #header-home { display: block; }
  #site-header.scrolled::before, #site-header.scrolled #header-home { opacity: 0; pointer-events: none; }
  #nav-burger { z-index: 3; position: relative; display: block; flex: none; align-self: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--clab-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #nav-burger::before { content: ""; position: absolute; top: calc((28px - var(--clab-header-height)) / 2); bottom: calc((28px - var(--clab-header-height)) / 2); left: calc(var(--clab-gutter) * -1); right: -16px; }
  #nav-burger span { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: currentColor; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s cubic-bezier(.22,1,.36,1), background-color .4s ease; }
  #nav-burger span:nth-child(1) { transform: translateY(-7px) rotate(0deg); }
  #nav-burger span:nth-child(3) { transform: translateY(7px) rotate(0deg); }
  #site-header.menu-open #nav-burger span:nth-child(1) { transform: translateY(0) rotate(45deg); }
  #site-header.menu-open #nav-burger span:nth-child(2) { opacity: 0; }
  #site-header.menu-open #nav-burger span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
  #header-logo { position: absolute; top: 50%; left: 50%; z-index: 3; margin: 0; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  #site-header.scrolled #header-logo { opacity: 1; pointer-events: auto; }
  #header-logo img { margin: -6.5px 0; transition: transform .3s cubic-bezier(.22,1,.36,1), filter .4s ease; }
  #site-header.menu-open #header-logo img { transform: rotate(360deg); }
  #nav-menu::before { content: ""; order: -2; flex: none; align-self: stretch; height: 34px; margin: calc((var(--clab-header-height) - 34px) / 2 - var(--space-medium)) 0 var(--space-medium); background: url("/images/cybernetics_lab_wordmark.svg") no-repeat left center / contain; filter: brightness(0); }
  #site-header #nav-menu #nav-home { display: flex; order: -1; }
  #nav-line, #nav-trail { display: none; }
  #nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: var(--menu-width);
    height: 100dvh;
    box-sizing: border-box;
    padding: var(--space-medium) var(--clab-gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-right: 1px solid var(--color-line);
    transform: translateX(-100%);
    visibility: hidden;
    transition: visibility 0s .3s;
  }
  #site-header.menu-open #nav-menu { visibility: visible; transition: none; }
  #nav-menu .dot { display: none; }
  #site-header #nav-menu :is(a, button.icon) { margin: 0 calc(var(--clab-gutter) * -1); padding: .8rem var(--clab-gutter); font-size: 1rem; letter-spacing: .04em; color: #222; }
  #site-header #nav-menu :is(a, button.icon):is(:hover, .on) { color: #000; }
  #site-header #nav-menu button.icon .material-symbols-outlined { font-size: 1.3rem; }
  #site-header #nav-menu button.icon .label { letter-spacing: inherit; }
  body > :not(#site-header):not(#consent):not(#gate):not(#holodisc):not(#explore) { transition: background-color .4s ease, color .4s ease, border-color .4s ease, filter .9s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1); }
  body:has(#site-header.menu-open) > :not(#site-header):not(#consent):not(#gate):not(#holodisc):not(#explore):not(#zHover) { transform: translateX(var(--menu-width)); }
}

/* ============================================================
   Footer
   ============================================================ */

#site-footer {
  border-top: 1px solid #222;
  padding: 3.5rem 0 0;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

#footer-grid { display: flex; flex-wrap: wrap; gap: 4rem; padding: 0 var(--clab-gutter); }
#footer-grid h4 {
  margin: 0 0 1.25rem;
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: none;
  color: #888;
}
#footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
#footer-grid a { font-size: .7rem; color: #888; text-decoration: none; transition: color .3s ease; }
#footer-grid a:hover { color: var(--c, #fff); }

#footer-research h4,
#footer-publications h4,
#footer-solutions h4,
#footer-engage h4 { color: var(--c); display: flex; align-items: center; gap: .5rem; }
#footer-research h4::before,
#footer-publications h4::before,
#footer-solutions h4::before,
#footer-engage h4::before { font-size: 1.1rem; }
#footer-research h4::before { content: "coronavirus"; }
#footer-publications h4::before { content: "lab_profile"; }
#footer-solutions h4::before { content: "sdk"; }
#footer-engage h4::before { content: "forum"; }
#footer-lab h4 { font-size: 0; }
#footer-lab h4::before {
  content: "";
  display: block;
  width: 120px;
  height: 20px;
  background: url("/images/cybernetics_lab_icon_color.webp") no-repeat left center / contain;
  filter: brightness(0) invert(1);
}
#footer-research a:hover,
#footer-publications a:hover,
#footer-lab a:hover,
#footer-solutions a:hover,
#footer-engage a:hover { color: #fff; }

#footer-brand {
  margin-right: auto;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#footer-brand p { margin: 0; font-size: .7rem; line-height: 1.8; color: #666; }

#footer-bottom {
  border-top: 1px solid #222;
  margin-top: 3.5rem;
  box-sizing: border-box;
  height: var(--clab-header-height);
  padding: 0 var(--clab-gutter);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#footer-links { display: flex; align-items: center; gap: 1.5rem; }
#footer-links a::after, #footer-links button.icon::after { display: none; }
#footer-links a:hover { color: #fff; }
#console-toggle span { font-size: 15px; }
#console-toggle #console-state { font: inherit; letter-spacing: inherit; }
#console-toggle.on, #console-toggle.on:hover { color: #ff8c1a; }

#footer-disclaimer {
  margin: 0;
  font-size: .46rem;
  line-height: 1.9;
  letter-spacing: normal;
  color: #555;
}
#footer-copy { letter-spacing: .12em; }
#footer-copy a { padding: 0; margin: 0; }
#footer-copy a::after { left: 0; right: 0; bottom: -7px; }

#footer-phone {
  margin: 0;
  font-size: .7rem;
  color: #888;
}
#footer-phone a { color: #fff; text-decoration: none; }
#footer-brand hr { display: block; width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid #333; opacity: .4; }
#footer-locations { margin: 0; font-size: .7rem; line-height: 1.8; color: #888; font-family: "Noto Sans", "Noto Color Emoji", sans-serif; }
#footer-machine a, #footer-human a { font-size: inherit; text-decoration: underline; }

#footer-icon {
  display: block;
  align-self: flex-start;
  max-width: 200px;
  filter: grayscale(0) brightness(1) invert(1);
}

@media (max-width: 820px) {
  #site-footer { padding-bottom: calc(var(--space-large) + env(safe-area-inset-bottom)); }
  #footer-bottom { flex-wrap: wrap; height: auto; padding: var(--space-medium) var(--clab-gutter); row-gap: 1.25rem; }
  #footer-copy { flex: 1 0 100%; }
  #console-toggle, .dot:has(+ #console-toggle) { display: none; }
}

/* ============================================================
   Auth gate
   ============================================================ */

.gate {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  padding: 1rem;
  background: #111;
}

#consent-box .gate { position: static; transform: none; width: auto; padding: 0; background: none; }
#consent-box.collapse #consent-inner #consent-text, #consent-box.collapse #consent-inner #consent-more { animation: consent-collapse .3s ease-in forwards; }
#consent-box.expand #consent-inner #consent-text, #consent-box.expand #consent-inner #consent-more { animation: consent-expand .6s cubic-bezier(.05,.95,.1,1) forwards; }
@keyframes consent-collapse {
  from { grid-template-rows: 1fr; margin-top: 0; opacity: 0; }
  to { grid-template-rows: 0fr; margin-top: -1.25rem; opacity: 0; }
}
#consent-box .gate-actions { justify-content: flex-end; flex-wrap: nowrap; margin-top: 1.25rem; padding-top: 1.25rem; border-top: .5px solid #ccc; }
#consent-box .gate-actions ~ hr, #consent-box .gate > hr:last-child { display: none; }
#gate-pass-wrap { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
#gate-pass-wrap > div { overflow: hidden; }
#gate-login-fields:not([data-step="login"]) #gate-pass-wrap { grid-template-rows: 0fr; opacity: 0; }
#gate-user-label, #gate-to-reset { position: relative; }
#gate-user-label span, #gate-to-reset span { transition: opacity .25s ease; }
#gate-user-label span + span, #gate-to-reset span + span { position: absolute; left: 0; top: 0; opacity: 0; }
#gate-login-fields:not([data-step="login"]) :is(#gate-user-label, #gate-to-reset) span:first-child { opacity: 0; }
#gate-login-fields:not([data-step="login"]) :is(#gate-user-label, #gate-to-reset) span + span { opacity: 1; }
#gate-login-fields:not([data-step="login"]) #gate-login-btn,
#gate-login-fields:not([data-step="email"]) #gate-reset-start-btn,
#gate-login-fields:not([data-step="code"]) #gate-reset-verify-btn,
#gate-login-fields:not([data-step="password"]) #gate-reset-complete-btn { display: none; }
#consent-box .gate-section.show { animation: gate-in .4s cubic-bezier(.22,1,.36,1); }
@keyframes gate-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
#consent-box .field { margin-bottom: 1rem; }
#consent-box .field label { display: block; margin-bottom: .4rem; font-size: .72rem; color: #555; }
#consent-box .field input, #consent-box .field select { background: #e0e0e0; color: #111; padding: .6rem .75rem; font-size: .8rem; outline: 0; box-shadow: inset 0 -1px 0 transparent; transition: box-shadow .25s ease; }
#consent-box .field input:focus, #consent-box .field select:focus { box-shadow: inset 0 -1px 0 #111; }
#consent-box .gate button:not(.gate-link) {
  border: 2px solid #ccc;
  background: none;
  color: #555;
  padding: .55rem .8rem;
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
#consent-box .gate button:not(.gate-link):hover { color: #067a4c; border-color: #067a4c; }
#consent-revoke { margin-top: -1rem; }
#gate:not(.show) + #consent-revoke, #gate.busy + #consent-revoke { display: none; }
#gate.busy { pointer-events: none; opacity: .5; transition: opacity .2s ease; }
#consent-box .gate:not(.show.open) + #consent-revoke { display: none; }
#consent-wrap { position: relative; width: 100%; max-width: calc(640px + 5rem); }
#consent-box { position: relative; z-index: 1; margin: 0 auto; box-sizing: border-box; }
#consent-alert {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 0;
  padding: .75rem 2.5rem;
  background: #ddd;
  color: #111;
  font-size: .72rem;
  line-height: 1.4;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1), visibility 0s .4s;
}
#consent-alert:has(.gate-msg:not(:empty)) { visibility: visible; transform: translateY(0); transition: transform .4s cubic-bezier(.22,1,.36,1), visibility 0s; }
#consent-alert:has(.gate-msg.err) { background: #ff4f4f; }
#consent-wrap:has(.gate-msg.err) { animation: consent-shake .4s ease; }
@keyframes consent-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
#consent-alert .gate-msg { margin: 0; color: #111; overflow-wrap: anywhere; }
#consent-alert { box-sizing: border-box; margin: 0 auto; max-width: calc(640px + 5rem); }
#consent-wrap:has(#consent-box.login) #consent-alert { max-width: 400px; }
#consent-box input.rejected, #consent-box input.rejected:focus { box-shadow: inset 0 -1px 0 #ff4f4f; }
#consent-revoke .gate-link { font-size: .6rem; letter-spacing: .12em; }
#consent-revoke .gate-link:hover { color: #ff4f4f; }
#consent-box .gate-actions .gate-link { padding: 0 .5rem 0 0; background: none; border: 0; }
#consent-box .gate-actions .gate-link, #consent-revoke .gate-link { order: -1; margin-right: auto; font-family: inherit; font-size: .72rem; letter-spacing: normal; text-transform: none; color: #555; text-decoration: none; transition: color .2s ease; }
#consent-box .gate-actions .gate-link:hover { color: #111; }

.gate.show.open,
.gate-section.show,
.gate-reset-step.show,
.strength.revealed,
#gate-signup-closed.revealed,
#gate-resend-wrap.show { display: block; }

.gate-section,
.gate-reset-step,
.strength,
#gate-signup-closed,
#authed-note,
#ws-url,
#gate-login-fields.collapsed,
.identity,
#gate-resend-wrap { display: none; }

.identity.show { display: flex; }
#authed-note.show { display: inline; }
#gate-nu-consent-terms { height: var(--terms-height, auto); }
.consent-doc.scrollable { max-height: 12rem; overflow-y: auto; }

.field { margin-bottom: .75rem; position: relative; }
.field input, .field select, .gate button, #holodisc select, #disc-login input { border: 0; background: #222; color: #fff; padding: .5rem; }
.field input, .field select { width: 100%; box-sizing: border-box; }
.field-msg.revealed, .gate-msg.revealed, .gate-msg.err { color: #ff6b6b; }
input.rejected { outline: 1px solid #ff6b6b; }
.phone-flag { position: absolute; right: .5rem; top: 1.9rem; }
.strength { height: 6px; background: #222; }
.strength-fill { height: 100%; width: 0; }
.gate-link { background: none; border: 0; padding: 0; text-decoration: underline; color: #fff; cursor: pointer; }
.gate-actions, .pass-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Consent
   ============================================================ */

#consent {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  animation: consent-fade .4s ease;
}

#consent.open { display: flex; }

#holodisc {
  position: fixed;
  top: var(--clab-header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem var(--clab-gutter);
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
  color: #e8e8e8;
  font: .72rem/1.5 var(--clab-font);
  animation: consent-fade .4s ease;
}

#holodisc.open { display: flex; }

#explore {
  position: fixed;
  top: var(--clab-header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: none;
  animation: consent-fade .4s ease;
}

#explore.open { display: block; }

#holodisc iframe {
  width: 100%;
  max-width: 1600px;
  height: 100%;
  border: 1px solid #222;
  background: #000;
}

#consent-box {
  width: 2px;
  padding: 0;
  overflow: hidden;
  background: #eee;
  border-top: 1px solid #1f5fd6;
  border-bottom: 1px solid #1f5fd6;
  display: grid;
  grid-template-rows: 0fr;
  animation: consent-open 2.6s cubic-bezier(.05,.95,.1,1) .15s forwards, consent-border-fade .6s ease 1.21s forwards;
}

@keyframes consent-border-fade {
  to { border-color: transparent; }
}

#consent-inner {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: consent-peek .25s cubic-bezier(.05,.95,.1,1) .71s forwards;
}

@keyframes consent-peek {
  to { min-height: 64px; }
}

@keyframes consent-open {
  0% { width: 2px; padding: 0; grid-template-rows: 0fr; background: transparent; }
  12% { width: 2px; padding: 0; grid-template-rows: 0fr; background: transparent; }
  22% { width: 100%; padding: 0 2.5rem; grid-template-rows: 0fr; background: transparent; }
  60% { width: 100%; padding: 0 2.5rem; grid-template-rows: 0fr; background: transparent; }
  100% { width: 100%; padding: calc(2.5rem - 14px) 2.5rem 2.5rem; grid-template-rows: 1fr; background: #eee; }
}

@keyframes consent-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

#consent-logo {
  position: absolute;
  top: 14px;
  right: 0;
  height: 30px;
  opacity: 0;
  filter: invert(1);
  animation: consent-fade .5s ease 2.26s forwards;
}

#consent-slot {
  flex: none;
  width: 48px;
  height: 64px;
  margin: -14px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 11px, #000 calc(100% - 11px), transparent);
  mask-image: linear-gradient(transparent, #000 11px, #000 calc(100% - 11px), transparent);
}

#consent-reel {
  display: flex;
  flex-direction: column;
  transform: translateY(-128px);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  animation: consent-reel .5s cubic-bezier(.22,1,.36,1) 1.21s forwards;
}

#consent-box.login #consent-reel { animation: consent-reel-login .5s cubic-bezier(.22,1,.36,1) forwards; }
#consent-box.login.instant #consent-reel { animation: none; transform: translateY(0); }
#consent-box.revert:not(.login) #consent-reel { animation: none; transform: translateY(-64px); }
@keyframes consent-reel-login {
  from { transform: translateY(-64px); }
  to { transform: translateY(0); }
}

#consent-title { height: 1.4em; }
#consent-title-reel { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.22,1,.36,1); }
#consent-title-reel > span { display: block; height: 1.4em; line-height: 1.4em; }
#consent-box.login #consent-title-reel { transform: translateY(-1.4em); }

#consent-box.login.instant #consent-title-reel { transition: none; }
#consent-box.instant { width: 100%; border-color: transparent; animation: consent-open-instant .6s cubic-bezier(.05,.95,.1,1) forwards; }
#consent-box { max-width: calc(640px + 5rem); transition: max-width .6s cubic-bezier(.05,.95,.1,1) .15s; }
#consent-box.login { max-width: 400px; }
@keyframes consent-open-instant {
  from { grid-template-rows: 0fr; padding: 0 2.5rem; }
  to { grid-template-rows: 1fr; padding: calc(2.5rem - 14px) 2.5rem 2.5rem; }
}
#consent-box.instant #consent-inner { animation: none; min-height: 64px; }
#consent-box.instant #consent-logo, #consent-box.instant #consent-icon { animation: none; opacity: 1; }
#consent-box.instant #consent-reel-logo { animation: none; opacity: 0; }
#consent-box.instant #consent-title { animation: none; flex-grow: 1; padding-left: .6rem; padding-right: calc(48px + .6rem); opacity: 1; }
#consent-box.instant #consent-text, #consent-box.instant #consent-more { animation: none; grid-template-rows: 1fr; margin-top: 0; opacity: 1; }
#consent-box.instant #consent-reel { animation: none; transform: translateY(-64px); }
#consent-box h4 #consent-login-icon { color: #111; }

#consent-reel > * {
  flex: none;
  width: 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#consent-reel-logo { display: block; width: auto; height: 30px; margin: 17px auto; animation: logo-spin .5s cubic-bezier(.22,1,.36,1) .71s backwards, consent-reel-out .5s cubic-bezier(.22,1,.36,1) 1.21s forwards; }

#consent-reel #consent-icon { opacity: 0; animation: consent-fade .5s cubic-bezier(.22,1,.36,1) 1.21s forwards; }

@keyframes consent-reel-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes consent-reel {
  0% { transform: translateY(-128px); filter: none; }
  6% { filter: none; }
  7% { filter: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0 5'/%3E%3C/filter%3E%3C/svg%3E#b"); }
  40% { filter: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0 5'/%3E%3C/filter%3E%3C/svg%3E#b"); }
  41% { filter: none; }
  100% { transform: translateY(-64px); filter: none; }
}

#consent-title {
  flex: 0 0 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  animation: consent-title .5s cubic-bezier(.22,1,.36,1) 1.71s forwards;
}

@keyframes consent-title {
  from { flex-grow: 0; padding-left: 0; padding-right: 0; opacity: 0; }
  to { flex-grow: 1; padding-left: .6rem; padding-right: calc(48px + .6rem); opacity: 1; }
}

#consent-box a { color: #111; text-decoration: underline; }

#consent-box hr { border: 0; border-top: .5px solid #ccc; margin: 0; }
#consent-box #gate-scan-btn, #gate-scan-btn {
  font-weight: 500;
  width: 100%;
  margin-bottom: 1rem;
  --corner: 10px;
  --edge: 1px;
  padding: .75rem;
  border: 0;
  border-radius: 0;
  --ink: #888;
  --inset: 4px;
  color: #3b82f6;
  background: none;
  background-image:
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size:
    var(--corner) var(--edge), var(--edge) var(--corner),
    var(--corner) var(--edge), var(--edge) var(--corner),
    var(--corner) var(--edge), var(--edge) var(--corner),
    var(--corner) var(--edge), var(--edge) var(--corner);
  background-position:
    top var(--inset) left var(--inset), top var(--inset) left var(--inset),
    top var(--inset) right var(--inset), top var(--inset) right var(--inset),
    bottom var(--inset) left var(--inset), bottom var(--inset) left var(--inset),
    bottom var(--inset) right var(--inset), bottom var(--inset) right var(--inset);
}
#consent-box #gate-scan-btn, #gate-scan-btn { position: relative; isolation: isolate; }
#gate-scan-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(115deg, #ff9de2, #ffd36e, #a6ff9e, #7ee8ff, #b79cff, #ff9de2);
  background-size: 300% 300%;
  transition: opacity .25s ease;
}
#gate-scan-btn:hover::before { opacity: .6; animation: scan-holo 3s linear infinite; }
@keyframes scan-holo { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
#gate-scan-btn span {
  background: linear-gradient(90deg, #3b82f6, #a78bfa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.light #consent-box #gate-scan-btn, html.light #gate-scan-btn { background-color: transparent; }
#gate-or { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
#gate-or hr { flex: 1; }
#gate-or span { font-style: italic; font-size: .7em; color: #999; }

#consent-text, #consent-more {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -1.25rem;
  opacity: 0;
  animation: consent-expand 1.04s cubic-bezier(.05,.95,.1,1) 1.71s forwards;
}

#consent-box.login #consent-text { animation-delay: 0s; }
#consent-text > div, #consent-more > div {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#consent-text { position: relative; }
#consent-text > div { max-height: 260px; overflow-y: auto; scrollbar-width: none; }
#consent-box.login #consent-text > div { max-height: none; }
#consent-box:not(.login) #consent-text > div { margin: 1.25rem 0 0; transition: margin-bottom .4s ease; }
#consent-box:not(.login):has(#consent-actions) #consent-text > div { margin-bottom: 2rem; }
#consent-inner > hr { opacity: 0; animation: consent-fade .5s ease 1.71s forwards; }
#consent-box.instant #consent-inner > hr { animation: none; opacity: 1; }
#consent-box:not(.login) #consent-text > div > p { padding-right: 1.5rem; }
#consent-text > div::-webkit-scrollbar { display: none; }
#consent-rail { position: absolute; top: 0; right: 2.5rem; height: 0; width: 1px; background: #ccc; opacity: 0; transition: opacity .3s ease; }
#consent-box.ready:not(.login) #consent-rail.scrolls { opacity: 1; }
#consent-more > div > hr { opacity: 0; transition: opacity .4s ease; }
#consent-more > div:has(#consent-actions) > hr { opacity: 1; }
#consent-dot { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #111; cursor: grab; transition: top .35s cubic-bezier(.22,1,.36,1), transform .2s ease, box-shadow .2s ease; }
#consent-dot::before { content: ""; position: absolute; inset: -10px; }
#consent-dot:hover, #consent-rail.drag #consent-dot { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(0, 0, 0, .12); }
#consent-rail.drag #consent-dot { transition: none; cursor: grabbing; }

@keyframes consent-expand {
  from { grid-template-rows: 0fr; margin-top: -1.25rem; opacity: 0; }
  to { grid-template-rows: 1fr; margin-top: 0; opacity: 1; }
}

#consent-actions { display: flex; align-items: center; gap: .75rem; height: 2.6rem; margin-top: .5rem; overflow: hidden; animation: consent-actions-in .4s ease; }
@keyframes consent-actions-in {
  from { height: 0; margin-top: -1.25rem; opacity: 0; }
  to { height: 2.6rem; margin-top: .5rem; opacity: 1; }
}

#consent-actions button {
  border: 2px solid #111;
  background: none;
  color: #111;
  padding: .55rem 1.4rem;
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

#consent-accept:hover { color: #067a4c; border-color: #067a4c; }
#consent-decline:hover { color: #ff4f4f; border-color: #ff4f4f; }

#consent-agree {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #555;
  cursor: pointer;
  user-select: none;
}

#consent-check { display: none; }

#consent-slider {
  position: relative;
  width: 2.4rem;
  height: 1.2rem;
  border: 2px solid #ccc;
  background: none;
  transition: border-color .2s ease;
}

#consent-slider::after {
  content: "";
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: .8rem;
  height: .8rem;
  background: #555;
  transition: left .2s ease, background .2s ease;
}

#consent-check:checked + #consent-slider { border-color: #067a4c; }
#consent-check:checked + #consent-slider::after { left: 1.4rem; background: #067a4c; }
#consent-check:checked ~ * { color: #111; }

#consent-box h4 {
  margin: 14px 0 .75rem;
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .16em;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

#consent-box h4 .material-symbols-outlined {
  font-size: 2.1rem;
  color: #1f5fd6;
}

#sec-invalid h2 { color: #111; font-weight: normal; margin-top: 0; }
#sec-claim h2, #sec-done h2 { color: #1f5fd6; font-weight: normal; font-size: 1.4rem; margin: 0 0 .75rem; }
#sec-claim .sub { margin-bottom: 1.75rem; }
html.light #sec-claim h2, html.light #sec-done h2 { color: #7da7f5; }
#sec-claim .label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .4rem; }
#sec-claim .label-row label { margin: 0; }
#sec-claim .pass-tools { display: flex; gap: .25rem; flex-wrap: nowrap; }
#sec-claim .pass-tools button { background: none; border: 0; padding: 0 .4rem; font: inherit; font-size: .72rem; color: #555; text-decoration: none; cursor: pointer; }
#sec-claim .pass-tools button:hover { color: #111; }
html.light #sec-claim .pass-tools button { color: #aaa; }
html.light #sec-claim .pass-tools button:hover { color: #eee; }
#sec-claim #nu-pass-qrng-hint { display: block; margin-top: .4rem; font: inherit; font-size: .72rem; color: #555; }
#sec-claim #nu-pass-qrng-hint:not(:empty) { margin-bottom: .75rem; }
html.light #sec-claim #nu-pass-qrng-hint { color: #aaa; }
#nu-strength-label { display: none; }
#consent-box.login #consent-text > div { position: relative; }
#consent-box:has(#sec-claim.show, #sec-done.show) #consent-revoke { position: absolute; left: 0; bottom: 0; margin: 0; height: 2.1rem; display: flex; align-items: center; }
#sec-invalid .gate-actions #consent-revoke { display: block; margin: 0 auto 0 0; }
#consent-box #sec-invalid #consent-revoke .gate-link:hover { color: #ff4f4f; }
html.light #consent-box #sec-invalid #consent-revoke .gate-link:hover { color: #c02626; }
#consent-box #sec-invalid button:not(.gate-link):hover { color: #111; border-color: #111; }

#consent-box p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.8;
  color: #444;
}

/* ============================================================
   Golden ticket
   ============================================================ */

#golden-ticket {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  opacity: 0;
  margin: 0 auto .75rem;
  max-width: calc(640px + 5rem);
  padding: .6rem 1rem;
  text-align: center;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
#golden-ticket.ready, #golden-ticket.expired {
  animation: golden-reveal .7s cubic-bezier(.22, 1, .36, 1) both;
}
#golden-ticket.ready {
  color: #3a2c00;
  background: linear-gradient(90deg, #b57edc 0%, #7ec8ff 6%, #7dffb0 12%, #ffe9b3 20%, #f4d774 30%, #d4af37 50%, #f4d774 70%, #ffe9b3 80%, #7dffb0 88%, #7ec8ff 94%, #b57edc 100%);
  border: .5px solid #b8860b;
  box-shadow: 0 0 18px rgba(212, 175, 55, .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
#golden-ticket.expired {
  color: #2b2b2b;
  background: linear-gradient(90deg, #6f6f6f, #9c9c9c, #bcbcbc, #9c9c9c, #6f6f6f);
  border: .5px solid #7a7a7a;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
@keyframes golden-reveal {
  0% { width: 2px; opacity: 0; }
  14% { width: 2px; opacity: 1; }
  100% { width: 100%; opacity: 1; }
}
#consent-wrap:has(#consent-box.login) #golden-ticket { max-width: 400px; }
#consent-wrap:has(#golden-ticket) #consent-box { border-top-color: #fff; border-bottom-color: #fff; opacity: 0; animation: consent-open 2.6s cubic-bezier(.05,.95,.1,1) .15s forwards, consent-border-fade .6s ease 1.21s forwards, consent-fade .01s linear .46s forwards; }
#consent-wrap:has(#golden-ticket) #consent-login-icon { color: #d4af37; }
#consent-wrap:has(#golden-ticket.expired) #consent-login-icon { color: #a8a8a8; }
#golden-ticket.ready::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: golden-shine 1.1s ease-out .85s 1 forwards;
}
@keyframes golden-shine { to { transform: translateX(280%) skewX(-20deg); } }

/* ============================================================
   Content
   ============================================================ */

main { max-width: 1600px; width: 100%; margin: 0 auto; padding: 0 var(--space-large) var(--space-xlarge); box-sizing: border-box; }
main > section + section { margin-top: var(--space-xlarge); padding-top: var(--space-xlarge); border-top: 1px solid var(--color-line); }
main > :is(.hero, :has(.hero)) + section { margin-top: 0; padding-top: var(--space-xlarge); border-top: 0; }
main > section + section:has(> .hero:first-child) { padding-top: 0; }
main > section + section > .hero:first-child { padding-top: var(--space-xlarge); }
main > .hero.separated + section { border-top: 1px solid var(--color-line); padding-top: var(--space-large); }

a { color: var(--clab-fg); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.h1 { font-size: clamp(3rem, 6vw, 6rem); font-weight: 200; letter-spacing: -.03em; line-height: 1; margin: 0; }
.h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 200; letter-spacing: -.03em; line-height: 1.1; margin: 0; text-align: center; }
.h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.h4 { font-size: 1.7rem; font-weight: 300; letter-spacing: -.012em; line-height: 1.2; margin: 0; }
.lead { font-size: 1.1rem; font-weight: 300; line-height: 1.6; color: var(--clab-fg); margin: 0; }
.body, :is(.event-detail, #event, #bio) ul { font-size: .82rem; font-weight: 400; line-height: 1.85; color: var(--color-muted); margin: 0; }
.label { font-size: .75rem; letter-spacing: .1em; color: var(--color-muted); }
.label-hi { font-size: .75rem; letter-spacing: .12em; color: var(--clab-fg); }
.eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .78rem; letter-spacing: .1em; color: var(--clab-fg); }
.eyebrow .material-symbols-outlined { font-size: 1.25rem; }
.icon { background: currentColor; mask: var(--icon) no-repeat center / contain; -webkit-mask: var(--icon) no-repeat center / contain; }
.eyebrow .icon { width: 1.25rem; height: 1.25rem; }
#zero .hero { height: calc(200vh / 3); }
.hero.small { height: auto; min-height: 0; padding: var(--space-xlarge) 0; }
.hero .eyebrow .icon { width: 3rem; height: 3rem; }
.hero .eyebrow .material-symbols-outlined { font-size: 3rem; }

.hero { position: relative; height: calc(100vh - var(--clab-header-height)); min-height: 560px; display: flex; align-items: center; justify-content: center; width: 100vw; margin-left: calc(50% - 50vw); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; opacity: .15; }
.fpo { position: relative; }
.fpo::before { content: ""; position: absolute; inset: 0; opacity: .2; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='%23fff' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.hero-content { position: relative; z-index: 1; padding: 0 var(--space-large); box-sizing: border-box; width: 100%; max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-medium); }
.hero-content > * { max-width: 50%; }
main[data-content$="/home.json"] > .hero .hero-content::before { content: ""; flex: none; width: 6rem; height: 6rem; background: url("/images/cybernetics_lab_icon_color.webp") no-repeat center / contain; animation: hero-logo-in 1.2s cubic-bezier(.22,1,.36,1) .15s backwards; }
@keyframes hero-logo-in { from { opacity: 0; transform: rotate(-360deg) scale(.6); } }
.subtitle { font-size: 1.45rem; line-height: 1.35; }
.hero-actions { display: flex; gap: var(--space-small); flex-wrap: wrap; margin-top: var(--space-small); }
.hero-actions a, .tile a, #holodisc #open-button { text-decoration: none; border: 1px solid #888; padding: .55rem 1.4rem; font-size: .78rem; letter-spacing: .14em; }
.hero-actions a, .tile a, .cal-nav, #holodisc #open-button { color: #888; transition: color .3s ease, border-color .3s ease, background-color .3s ease, opacity .3s ease, visibility .3s ease; }
.hero-actions a:hover, .tile a:hover, #holodisc #open-button:hover { color: #fff; border-color: #fff; transition-duration: .06s; }
html.light .hero-actions a, html.light .tile a, html.light .cal-nav, html.light #holodisc #open-button { color: #555; border-color: #555; }
html.light .hero-actions a:hover, html.light .tile a:hover, html.light #holodisc #open-button:hover { color: #111; border-color: #111; }
.hero-actions a::after, .tile a::after, :is(.event-detail, #event, #bio) ul a::after { font-family: "Material Symbols Outlined"; line-height: 1; display: inline-block; }
.hero-actions a::after, .tile a::after { content: "arrow_forward"; font-size: 1rem; width: 1rem; height: 1rem; overflow: hidden; vertical-align: -.2em; margin-left: .5rem; }

.article { display: grid; gap: var(--space-xlarge); }
.article-header, .article-footer { display: flex; flex-direction: column; gap: var(--space-medium); }
.article-header { padding-bottom: var(--space-xlarge); border-bottom: 1px solid var(--color-line); }
#research .article-header { padding-bottom: 0; border-bottom: 0; }
#events .article-header { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; padding-bottom: var(--space-large); }
#events .article-header::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 100vw; border-top: 1px solid var(--color-line); transform: translateX(-50%); }
#events .article-header .eyebrow { grid-column: 1 / -1; }
#events { --nav: 2.75rem; position: relative; gap: var(--space-large); padding-top: var(--space-large); }
#events::before { content: ""; position: absolute; left: 50%; top: -1px; width: 100vw; border-top: 1px solid var(--color-line); transform: translateX(-50%); }
main:has(> #events:last-of-type) { padding-bottom: var(--space-large); }
#research .article-header { display: grid; grid-template-columns: 1fr 1fr; }
#research .article-header > * { max-width: none; padding-right: var(--space-xlarge); }
#research .article-header > * + * { border-left: 1px solid var(--color-line); padding: 0 0 0 var(--space-xlarge); }
.article-footer { padding-top: var(--space-xlarge); border-top: 1px solid var(--color-line); }
.article-footer > .article-columns { max-width: none; }
.placeholder { aspect-ratio: 4 / 3; }
.article-header > *, .article-footer > * { max-width: calc(50% - var(--space-xlarge) / 2); }
.article-header.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xlarge); align-items: center; }
.article-header.split > * { max-width: none; }
.player { position: relative; display: flex; flex-direction: column; background: #000; overflow: hidden;     border: 1px solid #222;}
.player::before {}
.player::after { content: ""; position: absolute; right: 1.75rem; bottom: 5.5rem; width: 1.75rem; height: 1.75rem; background: url("/images/cybernetics_lab_icon_color.webp") no-repeat center / contain; mix-blend-mode: difference; transition: bottom .3s ease; pointer-events: none; }
.player.playing:not(:hover)::after { bottom: 1.75rem; }
.player video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: pointer; }
.player:fullscreen video { object-fit: contain; flex: 1; min-height: 0; aspect-ratio: auto; }
.player-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1.75rem; padding: 1.25rem 1.75rem; color: #888; font-size: .8rem; letter-spacing: .12em; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); transition: opacity .3s ease; }
.player.playing:not(:hover) .player-bar { opacity: 0; }
.player button { flex: none; border: 0; background: none; padding: 0; color: inherit; font-size: 28px; cursor: pointer; transition: color .3s ease, opacity .3s ease; }
.player button:hover { color: #fff; transition-duration: .06s; }
.player-seek { position: relative; flex: 1; height: 1.75rem; cursor: pointer; touch-action: none; }
.player-seek::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, .25); }
.player-fill { position: absolute; left: 0; top: 50%; width: 0; height: 2px; margin-top: -1px; background: #fff; }
.player-fill::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.player-time { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-volume, #holodisc input[type=range] { flex: none; width: 5rem; height: 1.75rem; margin: 0; background: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
.player-volume::-webkit-slider-runnable-track, #holodisc input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(255, 255, 255, .25); }
.player-volume::-moz-range-track, #holodisc input[type=range]::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .25); }
.player-volume::-webkit-slider-thumb, #holodisc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: #fff; }
.player-volume::-moz-range-thumb, #holodisc input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xlarge) calc(var(--space-xlarge) * 1.5); border-top: 1px solid var(--color-line); }
.tile { display: flex; flex-direction: column; gap: var(--space-small); border-top: 1px solid var(--color-line); padding-top: var(--space-xlarge); text-decoration: none; color: inherit; }
.tile:nth-child(-n+3) { border-top: 0; }
.tile a { align-self: flex-start; margin-top: var(--space-small); }
.tile .material-symbols-outlined { font-size: 2rem; }
.tile .icon { width: 2rem; height: 2rem; }
.article-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xlarge); }
.prose { display: flex; flex-direction: column; gap: var(--space-medium); max-width: 66ch; }
.media { position: relative; overflow: hidden; }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.article-columns:has(> .media) > .prose > :first-child { text-box: trim-start cap alphabetic; }
.article-columns:has(> .media) > .prose > :last-child { text-box: trim-end cap alphabetic; }
.article-columns:has(> .media) > .prose > .h3 { font-size: 1.7rem; font-weight: 300; letter-spacing: -.012em; line-height: 1.2; }
.rule { grid-column: 1 / -1; width: 100%; margin: 0; border: 0; border-top: 1px solid var(--color-line); }

.side-by-side { display: grid; grid-template-columns: 1fr 1fr; }
.side-by-side > article { display: flex; flex-direction: column; gap: var(--space-medium); padding-right: var(--space-xlarge); }
.side-by-side > article + article { border-left: 1px solid var(--color-line); padding: 0 0 0 var(--space-xlarge); }

.toc { position: relative; display: flex; flex-direction: column; gap: var(--space-small); }
.toc::before { content: ""; position: absolute; left: -1rem; top: var(--line-top, 0); width: 1px; height: var(--line-height, 0); background: var(--clab-fg); opacity: 0; transition: top .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1), opacity .35s ease; }
.toc.show::before { opacity: 1; }
.toc .label { margin-bottom: var(--space-small); }
.toc a { display: flex; align-items: center; gap: .6rem; font-size: .82rem; line-height: 1.4; color: var(--color-dim); text-decoration: none; transition: color .3s ease; }
.toc a:hover, .toc a.on { color: var(--clab-fg); }
.toc a:hover { transition-duration: .06s; }
.toc .material-symbols-outlined { flex: none; font-size: 1.1rem; }
.toc-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-small); }
.toc-boxes a { display: flex; align-items: center; gap: .75rem; padding: var(--space-medium); border: 1px solid var(--color-line); background: var(--color-panel); color: var(--color-muted); font-size: .9rem; line-height: 1.3; text-decoration: none; transition: color .3s ease, border-color .3s ease; }
.toc-boxes a:hover { color: var(--clab-fg); border-color: var(--clab-fg); transition-duration: .06s; }
.toc-boxes .material-symbols-outlined { flex: none; font-size: 1.5rem; }
:is(.toc, .toc-boxes) .count { margin-left: auto; padding-left: var(--space-small); font-size: .75rem; color: var(--color-dim); font-variant-numeric: tabular-nums; }

#faq { display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--space-xlarge); padding-bottom: var(--space-large); }
#faq + main::before { content: ""; display: block; width: 100vw; margin: 0 0 var(--space-large) calc(50% - 50vw); border-top: 1px solid var(--color-line); }
#faq > * { grid-column: 2; }
#faq > :is(.hero, .toc-boxes) { grid-column: 1 / -1; }
#faq > .toc-boxes { padding-bottom: var(--space-large); border-bottom: 1px solid var(--color-line); }
#faq > .toc { grid-column: 1; align-self: start; position: sticky; top: var(--clab-header-height); padding-top: var(--space-large); }
#faq .hero { height: auto; min-height: 0; padding: var(--space-xlarge) 0; }
#faq > section + section { margin-top: var(--space-large); padding-top: var(--space-large); }
#faq > .toc + section { padding-top: var(--space-large); }
#faq .article { gap: var(--space-large); }
#faq .article-header { padding-bottom: var(--space-large); flex-direction: row; align-items: center; gap: var(--space-small); }
#faq .article-header .eyebrow .material-symbols-outlined { font-size: 2rem; }
#faq .article-columns { gap: var(--space-large) var(--space-xlarge); }
#faq .prose { gap: var(--space-small); }
#faq .body { opacity: .75; }

@media (max-width: 1200px) {
  #faq { display: block; }
  #faq > .toc { display: none; }
}

@media (max-width: 820px) {
  .toc-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .toc-boxes { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Calendar
   ============================================================ */

.cal-controls { display: flex; align-items: center; gap: .75rem; max-width: none; }
.cal-nav { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: none; width: var(--nav); height: var(--nav); overflow: visible; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; font-size: 1.25rem; line-height: 1; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .cal-nav:hover { color: #fff; border-color: #fff; transition-duration: .06s; background: color-mix(in srgb, currentColor 12%, transparent); }
  html.light .cal-nav:hover { color: #111; border-color: #111; }
}
.cal-nav.reset { order: -1; opacity: 0; visibility: hidden; pointer-events: none; }
.cal-nav.close { display: none; }
#events:has(.calendar.open) .cal-nav:not(.close) { display: none; }
#events:has(.calendar.open) .cal-nav.close { display: flex; animation: nav-pop .4s cubic-bezier(.22,1,.36,1); }
@keyframes nav-pop { from { opacity: 0; transform: scale(.6); } }
#events.shifted:not(:has(.calendar.open)) .cal-nav.reset { opacity: 1; visibility: visible; pointer-events: auto; }

.calendar { --months: 4; position: relative; display: flex; gap: var(--space-xlarge); container-type: inline-size; }
.calendar hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--color-line); }
.month { position: relative; flex: 0 1 calc((100% - 3 * var(--space-xlarge)) / 4); min-width: 0; display: flex; flex-direction: column; gap: var(--space-medium); }
.month { overflow-x: clip; }
.month > * { flex: none; width: calc((100cqw - 3 * var(--space-xlarge)) / 4); }
.month h3 { white-space: nowrap; }
.calendar.open .month:not(.keep) { flex-basis: 0; max-height: 0; opacity: 0; visibility: hidden; margin-right: calc(-1 * var(--space-xlarge)); pointer-events: none; }
.month-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.month-days span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--color-muted); }
.month-days .day { border: 2px solid transparent; border-radius: 50%; color: #888; }
.month-days .holiday { opacity: .35; }
.month-days .day.today { position: relative; isolation: isolate; color: var(--clab-fg); font-weight: 700; }
.month-days .day.today::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: color-mix(in srgb, var(--clab-fg) 12%, transparent); }
.month-days .event { cursor: pointer; border-color: #3b82f6; color: var(--clab-fg); transition: border-color .3s ease, color .3s ease; }
.month-days .event:hover { border-color: #93c5fd; transition-duration: .06s; }
.month-days .on, .month-days .on:hover { border-color: var(--clab-fg); color: var(--clab-fg); animation: day-expand .5s cubic-bezier(.22,1,.36,1); }
@keyframes day-expand {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.month-events { display: flex; flex-direction: column; gap: var(--space-medium); }
.month-holidays { display: flex; flex-direction: column; gap: .25rem; }
.month-holidays .label { margin: 0; display: flex; align-items: center; gap: .6rem; font-size: .55rem; color: #555; letter-spacing: .05em; }
.month-holidays .date { flex: none; width: 1.4rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid #555; border-radius: 50%; font-size: .6rem; }
.month-events [data-date] { cursor: pointer; display: flex; align-items: center; gap: 1rem; }
.month-events .date { flex: none; width: 1.75rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #3b82f6; border-radius: 50%; font-size: .7rem; }
.month-events .current { display: none; }

.event-detail { flex: 1 1 0; min-width: 0; margin-left: calc(-1 * var(--space-xlarge)); overflow: hidden; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 0fr; gap: var(--space-xlarge); align-items: start; }
.calendar.open .event-detail { margin-left: 0; grid-template-rows: 1fr; }
.event-detail > * { min-height: 0; overflow: hidden; }
.event-detail .prose { max-width: none; }
.event-detail .focus { font-style: italic; font-weight: 200; }
.event-detail .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
:is(.event-detail, #event, #bio) ul { padding-left: 1.1rem; }
:is(.event-detail, #event, #bio) ul a { color: var(--color-muted); }
:is(.event-detail, #event, #bio) ul a::after { content: "arrow_outward"; font-size: .9rem; vertical-align: -.1em; margin-left: .25rem; }
.speaker { display: flex; align-items: flex-start; gap: var(--space-small); }
.speaker .avatar { flex: none; width: 3rem; height: 3rem; border: 1px solid var(--color-line); border-radius: 50%; overflow: hidden; }
.speaker .avatar img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .portrait { display: block; width: 12rem; height: 12rem; border: 1px solid var(--color-line); border-radius: 50%; object-fit: cover; }
.hero-actions a.external::after { content: "arrow_outward"; }
#bio > .hero.small { padding: var(--space-xlarge) 0 var(--space-large); }
#bio > .hero + section { padding-top: var(--space-large); border-top: 1px solid var(--color-line); }
#bio .hero-content > :is(.h3, .subtitle) { margin-bottom: calc(-1 * var(--space-small)); }
#bio .hero-content > .portrait { order: -2; }
#bio .hero-content > :nth-last-child(3) { order: -1; font-size: .78rem; letter-spacing: .1em; color: var(--clab-fg); }
#bio .hero-content > :nth-last-child(2) { font-size: 1.45rem; line-height: 1.35; color: var(--clab-fg); }
.speaker .body { font-size: .75rem; }
.speaker .label-hi { font-size: .82rem; }
#event .article-body { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xlarge); align-items: start; }
#event .prose { max-width: none; }
#event .hero .eyebrow { justify-content: center; }
#event.article { gap: var(--space-large); }
#event .hero { height: auto; min-height: 0; padding: 0; }
#event .hero-content { gap: var(--space-small); }
#event .hero-content > * { max-width: min(100%, 64rem); }
#event-paper { margin: 0; font-size: 2rem; font-weight: 300; line-height: 1.25; color: var(--clab-fg); }
#event-date { font-size: 1.4rem; font-weight: 300; letter-spacing: .04em; color: var(--clab-fg); }
#event-paper:empty, #event-meta:empty, #event-focus:empty { display: none; }
#event-meta { font-size: .78rem; line-height: 1.9; letter-spacing: .08em; }
#event-focus { font-size: .78rem; font-style: italic; font-weight: 200; letter-spacing: .08em; }
#event .article-body { padding-top: var(--space-large); border-top: 1px solid var(--color-line); }
#event hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--color-line); }
#event-video:empty, #event-about:empty { display: none; }
#event-video { width: 100%; max-width: 64rem; margin: var(--space-large) auto 0; }
#event-info { padding-left: var(--space-small); border-left: 2px solid #3b82f6; font-size: .75rem; letter-spacing: .06em; }
#event-intro { display: flex; flex-direction: column; gap: var(--space-medium); }
#event-intro > p:first-child { font-size: 1.1rem; font-weight: 300; line-height: 1.6; color: var(--clab-fg); }
#event-about { display: flex; flex-direction: column; gap: var(--space-small); padding: var(--space-medium); background: var(--color-panel); border: 1px solid var(--color-line); }
#event-side { gap: var(--space-medium); }
#event-side .speaker-card { display: flex; flex-direction: column; gap: var(--space-small); padding-bottom: var(--space-medium); border-bottom: 1px solid var(--color-line); }
#event-side .speaker-card > .body { font-size: .75rem; line-height: 1.8; }
#event-side ul { display: flex; flex-direction: column; gap: var(--space-small); }

@media (max-width: 820px) {
  :root { --clab-gutter: var(--space-medium); --hero-video: 0; --explore-pixel-ratio: 2; }
  main, .hero-content { padding-left: var(--clab-gutter); padding-right: var(--clab-gutter); }
  .article-columns, .side-by-side, .tiles, .event-detail, #event .article-body, #research .article-header, .article-header.split { grid-template-columns: 1fr; }
  .tile:nth-child(n+2) { border-top: 1px solid var(--color-line); }
  .media { aspect-ratio: 4 / 3; }
  .calendar { --months: 1; flex-direction: column; }
  .month, .event-detail { flex: none; margin: 0; }
  .month > * { width: auto; }
  .calendar.open .month, .event-detail { display: none; }
  .calendar.open .event-detail { display: grid; }
  .player-bar { flex-wrap: wrap; gap: .25rem 1rem; padding: .75rem; }
  .player-seek { order: -1; flex: 1 0 calc(100% - 14px); margin: 0 4px 0 10px; }
  .player-time { margin-right: auto; }
  .player-volume { display: none; }
  .player::after, .player.playing:not(:hover)::after { top: 1rem; right: 1rem; bottom: auto; }
  .hero-content > *, .article-header > *, .article-footer > * { max-width: 100%; }
  main[data-content$="/home.json"] > .hero .hero-content::before { width: 5rem; height: 5rem; }
  .side-by-side > article, #research .article-header > * { padding: 0; }
  .side-by-side > article + article, #research .article-header > * + * { border-left: 0; border-top: 1px solid var(--color-line); margin-top: var(--space-large); padding-top: var(--space-large); }
}

#explore { overflow: hidden; background: #000; }
#explore-panel { position: relative; height: 100%; }
#mainCanvas { position: fixed; top: var(--clab-header-height); left: 0; width: 100%; height: calc(100% - var(--clab-header-height)); display: block; z-index: 0; }
#particlecount { display: none; }
#fps { position: fixed; z-index: 20; padding: 2px 7px; background: rgba(0,0,0,.55); pointer-events: none; }
#fps { left: 100px; bottom: 40px; font-family: 'Courier New', monospace; color: #7fff7f; }
#zTop .ztbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-small); color: #ffdf7f; font-size: .75rem; letter-spacing: .1em; }
#zTop .zauto { margin-top: 0; }
#zTop .zlh { margin-top: 14px; }
#bins { position: fixed; right: 8px; top: calc(var(--clab-header-height) + 64px); bottom: .5rem; width: 176px; z-index: 30; overflow: hidden; font-family: ui-monospace, monospace; font-size: 9px; line-height: 1.3; color: #7fff7f; }
#bins .binhead { color: #ffdf7f; opacity: .85; margin-bottom: 4px; letter-spacing: .12em; cursor: pointer; }
#bins .binrow { display: flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; }
#bins .binrow:hover { background: rgba(127,255,127,.12); }
#bins .binrank { width: 18px; color: #555; text-align: right; }
#bins .binid { width: 48px; color: #9aa; }
#bins .binsnip { width: 96px; color: #cfe; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bins .binbar { flex: 1; min-width: 0; height: 5px; background: rgba(127,255,127,.12); }
#bins .binbar i { display: block; height: 100%; background: #7fff7f; }
#bins .bincnt { width: 34px; text-align: right; color: #fff; }
#zHover { position: fixed; display: none; pointer-events: none; z-index: 2147483647; width: 280px; background: rgba(6,8,7,.9); border: 1px solid rgba(255,255,255,.1); border-radius: 0; padding: 12px; font-size: .78rem; color: var(--clab-fg); filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; transform: none; text-shadow: none; -webkit-font-smoothing: antialiased; }
#zCaret { position: fixed; display: none; width: 1px; pointer-events: none; z-index: 2147483647; }
#zmem { position: relative; z-index: 30; display: flex; flex-direction: column; gap: var(--space-medium); height: 100%; overflow: clip; padding: var(--space-medium); box-sizing: border-box; pointer-events: none; }
#zmem > * { pointer-events: auto; }
#zTop { position: absolute; top: var(--space-medium); left: 0; right: 0; margin: 0 auto; width: min(1200px, 100%); padding: 0 var(--space-small); box-sizing: border-box; }
#zmem:has(#zList:not(.zledger)) #zTop, #zmem:has(#zList.zexp) #zTop { display: none; }
#zmem:has(#zList.zexp) #zList { margin-bottom: auto; }
#zmem:has(#zList.zexp) .hero { height: 0; overflow: visible; }
#zmem:has(#zList.zexp) .hero-content { transform: translateY(calc(-100% + var(--space-medium))); }
#zmem .hero { flex: none; height: auto; padding: 0; margin-top: calc((100vh - var(--clab-header-height)) / 2 - var(--space-medium)); width: 100%; margin-left: 0; pointer-events: none; }
#zmem .hero-content > * { pointer-events: auto; }
#zmem .field { transform: translateY(-50%); display: flex; align-items: center; gap: var(--space-small); width: 100%; max-width: 1200px; margin: 0; padding-bottom: var(--space-small); border-bottom: 1px solid var(--color-dim); }
#zSearch { flex: 1; min-width: 0; padding: 0; line-height: 1.3; background: none; color: var(--clab-fg); font-family: var(--clab-font); text-align: left; outline: 0; appearance: none; -webkit-appearance: none; }
#zSearch::placeholder { color: var(--color-dim); opacity: 1; }
#zSearch::-webkit-search-cancel-button { display: none; }
#zClear { flex: none; padding: 0; border: 0; background: none; color: var(--color-dim); font-size: 2rem; line-height: 1; cursor: pointer; }
#zClear:hover { color: var(--clab-fg); }
#zSearch:placeholder-shown ~ #zClear { display: none; }
#zmem .toc, #zList, #zDetail, #holodisc :is(#disc-panel, #view-dock, #audio-transport, #jog-panel, #stems-panel, #disc-login) { padding: var(--space-small); background: rgba(6,8,7,.82); border: 1px solid var(--color-line); backdrop-filter: blur(3px); box-sizing: border-box; }
#zmem .toc { order: 1; flex: none; align-self: center; width: min(1200px, 100%); }
#zmem:has(#zList:empty):has(#zDetail:empty) .toc { position: absolute; bottom: var(--space-medium); left: 0; right: 0; margin: 0 auto; width: min(1200px, calc(100% - 2 * var(--space-medium))); }
#zList, #zDetail { align-self: center; width: min(1200px, 100%); flex: 0 1 auto; min-height: 0; overflow-y: auto; }
#zList:empty, #zDetail:empty { display: none; }
#zSchema .zschemaline { padding: 1px 0; }
#zList { display: flex; flex-direction: column; gap: 1px; margin-top: calc(-1 * var(--space-medium)); padding-top: 0; }
.zrow-t { display: flex; gap: 6px; align-items: baseline; cursor: pointer; white-space: nowrap; padding: 1px 0; }
.zrow-t:hover { background: rgba(127,255,127,.12); }
.ztnum { color: #ffdf7f; width: 40px; flex: 0 0 auto; }
.zttype { color: var(--color-dim); width: 64px; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; }
.ztdesc { overflow: hidden; text-overflow: ellipsis; }
.zsub { color: #ffdf7f; letter-spacing: .1em; font-size: .6rem; margin: 2px 0; }
.zkv { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; white-space: normal; word-break: break-word; }
.zkv b { color: var(--color-dim); width: 52px; flex: 0 0 auto; font-weight: 400; }
#zDetail a { color: #7fdfff; cursor: pointer; }
.zbar { height: 4px; background: rgba(255,255,255,.08); margin-top: 3px; }
.zbar i { display: block; height: 100%; background: #7fff7f; }

@media (max-width: 820px) {
  #zmem { touch-action: pan-x pan-y; }
  #zmem:not(:has(#zList.zexp)) { justify-content: flex-end; padding-bottom: calc(var(--space-medium) + var(--kb, 0px)); }
  #zmem:not(:has(#zList.zexp)) .hero { min-height: 0; margin-top: 0; }
  #zmem:not(:has(#zList.zexp)) .field { transform: none; }
  #zmem:not(:has(#zList.zexp)) :is(#zDetail, .toc) { display: none !important; }
  #zmem:not(:has(#zList.zexp)) #zTop { position: static; order: -2; flex: none; }
  #zList:not(.zexp) { order: -1; max-height: calc(50% + var(--kb, 0px) / 2); margin-top: 0; grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================
   Holodisc
   ============================================================ */

#holodisc canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#holodisc canvas:active { cursor: grabbing; }
#holodisc #file-input { display: none; }
#holodisc h1 { margin: 0 0 .75rem; font-size: .75rem; font-weight: 400; letter-spacing: .12em; color: #e8e8e8; }

#holodisc button { padding: 3px 10px; border: 1px solid #888; background: none; color: #888; font: inherit; letter-spacing: .1em; cursor: pointer; transition: color .3s ease, border-color .3s ease; }
#holodisc button:hover { color: #fff; border-color: #fff; transition-duration: .06s; }
#holodisc button.on { color: #3ecf8e; border-color: #3ecf8e; }
#holodisc button.mute.on { color: #ff4f4f; border-color: #ff4f4f; }
#holodisc button.solo.on { color: #ffdf7f; border-color: #ffdf7f; }
#holodisc button.wide { flex: 1; padding: 6px 8px; }
#holodisc #demo-button { display: block; width: 100%; margin-bottom: 10px; padding: 9px; }
#holodisc select { padding: 2px 6px; font: inherit; }
#holodisc input[type=checkbox] { accent-color: #3ecf8e; width: auto; height: auto; }
#holodisc input[type=range] { flex: 1; width: auto; min-width: 0; height: 1rem; }
#disc-login { color: #e8e8e8; font: inherit; }
#disc-login::backdrop { background: rgba(0, 0, 0, .6); }
#disc-login input { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; font: inherit; }

#holodisc .row, #holodisc .view-row { display: flex; align-items: center; margin: 8px 0; gap: 10px; }
#holodisc .view-row { justify-content: space-between; }
#holodisc .view-row > * { position: static; margin: 0; }
#holodisc .view-row :is(span, label) { color: #ababab; white-space: nowrap; font: inherit; }
#holodisc .view-row :is([data-k=window-text], [data-k=plate-map-label]) { white-space: normal; font-size: .62rem; line-height: 1.35; }
#holodisc .view-row output { min-width: 44px; text-align: right; color: #e8e8e8; white-space: nowrap; }
#holodisc #disc-buttons { margin-top: 14px; }

#holodisc #view-dock { position: absolute; top: 16px; right: 16px; width: 270px; max-height: calc(100% - 32px); overflow: auto; padding: 0; text-align: left; z-index: 2; }
#holodisc #view-dock[open] { width: min(520px, calc(100% - 32px)); }
#holodisc #view-dock > summary { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px var(--space-small); background: #060807; color: #ababab; letter-spacing: .12em; list-style: none; cursor: pointer; user-select: none; }
#holodisc #view-dock > summary:hover, #holodisc #view-dock[open] > summary { color: #fff; }
#holodisc #view-dock > summary::-webkit-details-marker { display: none; }
#holodisc #view-dock > summary .material-symbols-outlined { font-size: 16px; }
#holodisc #view-dock > summary .material-symbols-outlined:last-child { margin-left: auto; transition: transform .3s ease; }
#holodisc #view-dock[open] > summary .material-symbols-outlined:last-child { transform: rotate(180deg); }
#holodisc #view-dock > :not(summary) { padding: var(--space-small); border-top: 1px solid var(--color-line); }
#holodisc #gyro-button { position: absolute; top: 16px; right: 16px; z-index: 2; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(6,8,7,.82); backdrop-filter: blur(3px); }
#holodisc #gyro-button .material-symbols-outlined { font-size: 20px; }
#gyro-button { display: none; }
#holodisc .view-panel pre { margin: 10px 0 0; color: #7fdfff; font: .62rem/1.4 ui-monospace, monospace; white-space: pre; overflow: hidden; }
#holodisc #disc-panel { position: absolute; top: 16px; left: 16px; width: 260px; }
#holodisc #orbit-hint { position: absolute; right: 16px; bottom: 16px; color: #555; }
#holodisc #drop-hint { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; pointer-events: none; text-align: center; width: max-content; max-width: 90vw; }
#holodisc #drop-hint :is(a, button) { pointer-events: auto; }
#holodisc #open-button .material-symbols-outlined { font-size: 1rem; vertical-align: -.2em; margin-left: .5rem; }
#holodisc #drop-error { max-width: min(720px, 90vw); color: #ff4f4f; }
#holodisc #drop-error:empty { display: none; }
@media (pointer: coarse) {
  html:has(#holodisc.open) { overflow: hidden; }
  .disc-loaded :is(#view-dock, #disc-panel, #audio-transport, #jog-panel, #stems-panel) { display: none !important; }
  .disc-loaded #gyro-button { display: flex; }
  #holodisc #open-button { display: none; }
  #holodisc #drop-hint .h2 { pointer-events: auto; }
}
#holodisc #drop-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 1.1rem; color: #3ecf8e; background: rgba(2, 2, 2, .6); border: 2px dashed #3ecf8e; pointer-events: none; }

#holodisc #disc-info { color: #ababab; }
#holodisc #disc-info table { border-collapse: collapse; }
#holodisc #disc-info td { padding: 2px 14px 2px 0; vertical-align: middle; color: #e8e8e8; }
#holodisc #disc-info td:nth-child(2) { color: #888; white-space: nowrap; }
#holodisc #disc-info td:first-child { width: 40px; text-align: center; padding-right: 10px; }
#holodisc #disc-info .raw { border-bottom: 1px dotted #888; cursor: help; }
#holodisc #disc-info svg { vertical-align: middle; margin-right: 8px; }
#holodisc #disc-info .material-symbols-outlined { font-size: 22px; color: #e8e8e8; vertical-align: middle; }
#holodisc #disc-info .material-symbols-outlined.sm { font-size: 18px; margin-left: 6px; cursor: help; vertical-align: -3px; }
#holodisc #disc-info .material-symbols-outlined.off { color: #666; }
#holodisc .flip { display: inline-block; width: 40px; height: 40px; perspective: 140px; vertical-align: middle; position: relative; }
#holodisc .flip i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; }

#holodisc #layout-view { display: flex; gap: 14px; align-items: center; margin: 10px 0 0; }
#holodisc #layout-map { position: static; width: 360px; height: 180px; cursor: default; }
#holodisc #layout-legend { font-size: .68rem; color: #ababab; line-height: 1.6; }
#holodisc #layout-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; }
#holodisc #layout-legend b { color: #e8e8e8; font-weight: 400; }
#holodisc #layout-legend .dim { color: #666; }
#holodisc #spectrum-canvas { position: static; display: block; width: 100%; height: 56px; margin: 0 0 6px; background: #0c0c0c; cursor: default; }

#holodisc #status-badges { display: flex; flex-direction: column; gap: 10px; }
#holodisc .badge-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#holodisc .badge-set b { font-size: .62rem; letter-spacing: .14em; color: #888; font-weight: 400; }
#holodisc #status-badges span { padding: 5px 10px; font-size: .68rem; background: rgba(6, 8, 7, .82); border: 1px solid var(--color-line); color: #555; transition: color .5s, border-color .5s, box-shadow .5s; }
#holodisc #status-badges span.wait { color: #ffdf7f; border-color: #ffdf7f; }
#holodisc #status-badges span.ok { color: #3fb950; border-color: #3fb950; box-shadow: 0 0 12px rgba(63, 185, 80, .5); }
#holodisc #status-badges span.bad { color: #ff4f4f; border-color: #ff4f4f; box-shadow: 0 0 12px rgba(255, 79, 79, .5); }

#holodisc #track-list { max-height: 150px; overflow: auto; margin: 6px 0; border: 1px solid var(--color-line); }
#holodisc .track { padding: 2px 6px; cursor: pointer; white-space: pre; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, monospace; }
#holodisc .track:hover { background: rgba(127, 255, 127, .12); }
#holodisc .track.on { background: rgba(127, 255, 127, .25); }
#holodisc #track-text { white-space: pre-wrap; max-height: 90px; overflow: auto; color: #e8e8e8; margin: 0; font-family: ui-monospace, monospace; }

#holodisc #stem-list { margin: 6px 0; border: 1px solid var(--color-line); padding: 4px; }
#holodisc .stem { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: .68rem; }
#holodisc .stem span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#holodisc .stem span.bad, #holodisc #stem-list img.bad { color: #ff4f4f; }
#holodisc .stem input[type=range] { flex: none; width: 70px; }
#holodisc .stem button { padding: 2px 6px; font-size: .62rem; }
#holodisc .stem-track { color: #7fdfff; padding: 4px 4px 0; font-size: .68rem; cursor: pointer; }
#holodisc .stem-track.on { color: #fff; }
#holodisc #stem-list img { display: block; width: 100%; }

#holodisc #audio-transport { position: absolute; top: 16px; left: 300px; right: 300px; display: flex; align-items: center; gap: 10px; }
#holodisc #audio-title { color: #7fdfff; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#holodisc #audio-time { color: #e8e8e8; white-space: nowrap; min-width: 90px; text-align: right; }
#holodisc #jog-panel { position: absolute; top: 60px; right: 16px; width: 270px; text-align: center; }
#holodisc #jog-panel canvas { display: block; margin: 0 auto; width: 150px; height: 150px; position: static; cursor: grab; border-radius: 50%; }
#holodisc #jog-panel canvas:active { cursor: grabbing; }
#holodisc #jog-panel span { color: #ababab; font-size: .68rem; }
#holodisc #stems-panel { position: absolute; top: 264px; right: 16px; width: 270px; max-height: calc(50% - 280px); overflow: auto; }

#holodisc :is(#disc-panel, #view-dock, #orbit-hint, #disc-controls, #stems-panel, #audio-transport, #jog-panel, #track-list .track, #stem-list .stem) { animation: gate-in 1.2s ease-out both; }
#holodisc #view-dock { animation-delay: .4s; }
#holodisc #orbit-hint { animation-delay: .8s; }

/* ============================================================
   Light mode
   ============================================================ */

html.light #header-logo img { filter: invert(0); }
html.light #consent-logo { filter: none; }

html.light .bar,
html.light .bar a,
html.light .bar button.icon,
html.light #footer-grid a,
html.light #footer-phone,
html.light #footer-locations { color: #555; }

html.light #footer-grid h4,
html.light #footer-disclaimer,
html.light #footer-brand p { color: #6b6b6b; }

html.light #footer-research h4 { color: #5b34c7; }
html.light #footer-publications h4 { color: #0b7286; }
html.light #footer-solutions h4 { color: #c00e86; }
html.light #footer-engage h4 { color: #067a4c; }

html.light .bar a:hover,
html.light .bar button.icon:hover,
html.light .bar button.icon.on,
html.light #site-header a:hover,
html.light #site-header a.on,
html.light #footer-links a:hover,
html.light #footer-phone a { color: #111; }
html.light #footer-machine { color: #555; }
html.light #footer-machine a { color: #111; }

html.light #console-toggle.on, html.light #console-toggle.on:hover { color: #ff8c1a; }

html.light #site-header,
html.light #site-footer,
html.light #footer-bottom,
html.light #footer-brand hr { border-color: #ddd; }

html.light .dot { background: #bbb; }
.dot.ok, html.light .dot.ok { background: #3fb950; }
html.light #footer-icon { filter: grayscale(1) brightness(0) invert(0); }
html.light #footer-lab h4::before { filter: brightness(0) invert(0); }
html.light #site-header::before { filter: brightness(0) invert(0); }

html.light .gate { background: #111; }
html.light #consent-box { background: #111; }
html.light #consent-box p { color: #bbb; }
html.light #consent-rail { background: #333; }
html.light #consent-dot { background: #eee; }
html.light #consent-dot:hover, html.light #consent-rail.drag #consent-dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
html.light #consent-box h4 { color: #eee; }
html.light #consent-box a { color: #eee; }
html.light #consent-box hr { border-top-color: #333; }
html.light #consent-actions button { color: #aaa; }
html.light #consent-accept:hover { color: #3ecf8e; }
html.light #consent-decline:hover { color: #ff4f4f; }
html.light #consent-agree { color: #aaa; }
html.light #consent-check:checked + #consent-slider { border-color: #3ecf8e; }
html.light #consent-check:checked + #consent-slider::after { background: #3ecf8e; }
html.light .field input,
html.light .field select,
html.light .gate button,
html.light .gate-link { background: #1f1f1f; color: #eee; }
html.light #consent-box h4 #consent-login-icon { color: #eee; }
html.light #consent-box .field label { color: #aaa; }
html.light #consent-box .field input:focus, html.light #consent-box .field select:focus { box-shadow: inset 0 -1px 0 #eee; }
html.light #consent-box .gate button:not(.gate-link) { background: none; border-color: #333; color: #aaa; }
html.light #consent-box .gate button:not(.gate-link):hover { color: #3ecf8e; border-color: #3ecf8e; }
html.light #consent-box .gate-actions { border-top-color: #333; }
html.light #consent-box .gate-actions .gate-link, html.light #consent-revoke .gate-link { background: none; color: #aaa; }
html.light #consent-box .gate-actions .gate-link:hover { color: #eee; }
html.light #consent-revoke .gate-link:hover { color: #ff4f4f; }
html.light #consent-alert { background: #222; color: #eee; }
html.light #consent-alert .gate-msg { color: #eee; }
html.light #consent-alert:has(.gate-msg.err) { background: #ff4f4f; color: #111; }
html.light #consent-alert:has(.gate-msg.err) .gate-msg { color: #111; }

/* ============================================================
   CHANGE LOG
   Document: theme.css
   Version: 4.0.1
   ------------------------------------------------------------
   0.3 - Base layout, header with nav drawer and line, footer, auth gate, consent panel, chat panel, light mode.
   4.0.1, Remove - Chat panel, chat toggle and on-device model hooks.
   4.0.1, Add - Links and bar buttons snap to hover colour and fade back out.
   4.0.1, Change - Consent text and actions expand together with the panel height.
   4.0.1, Add - Console [ON]/[OFF] label inside the footer toggle, orange when on.
   4.0.1, Add - Consented label beside the connection dot and Withdraw link.
   4.0.1, Change - Bar buttons inherit the site font.
   4.0.1, Remove - Unused icon size, duplicate keyframes and dead footer rules.
   4.0.1, Add - Prismatic hover on bar buttons and the holodisc icon.
   ============================================================ */