:root {
      color-scheme: dark;
      --violet-deep: #4b1d8f;
      --violet-mid: #703dbd;
      --violet-light: #9f68ff;
      --stage-bg: #050018;
      --site-bg: radial-gradient(circle at 20% 18%, rgba(90, 45, 160, 0.35), transparent 55%),
        radial-gradient(circle at 80% 10%, rgba(40, 120, 180, 0.25), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(20, 12, 50, 0.65), transparent 60%),
        linear-gradient(180deg, #07051a 0%, #040214 55%, #030111 100%);
      --site-pattern: repeating-linear-gradient(135deg, rgba(170, 140, 255, 0.08), rgba(170, 140, 255, 0.08) 1px, transparent 1px, transparent 12px),
        repeating-linear-gradient(-135deg, rgba(80, 200, 240, 0.06), rgba(80, 200, 240, 0.06) 1px, transparent 1px, transparent 14px);
      --tablet-color: #71faff;
      --panel-bg: transparent;
      --panel-border: rgba(255, 255, 255, 0.18);
      --text-main: #ffffff;
      --text-sub: rgba(255, 255, 255, 0.76);
      --accent: #ffce5c;
      --accent-soft: rgba(255, 206, 92, 0.25);
      --glass: rgba(255, 255, 255, 0.08);
      --shadow: 0 15px 35px rgba(18, 0, 54, 0.55);
    }
    .membrane-directory__actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
    }
    .membrane-directory__actions button {
      border-radius: 999px;
      padding: 8px 14px;
      font-weight: 800;
      letter-spacing: 0.3px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      background: linear-gradient(135deg, rgba(0, 180, 255, 0.9), rgba(0, 122, 255, 0.95), rgba(0, 255, 255, 0.85));
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 12px rgba(0, 180, 255, 0.35);
      color: #8ad6ff;
      text-shadow: none;
    }
    .membrane-directory__actions button:hover {
      filter: brightness(1.08);
    }

    * {
      box-sizing: border-box;
    }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  font-family: 'Bangers', cursive;
  color: var(--text-main);
  background: var(--site-bg);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--site-pattern);
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

body.body--social-space #bgCanvas,
body.body--social-space .imean-sky,
body.body--social-space .stage,
body.body--social-space .mainstage,
body.body--social-space #donutCanvas,
body.body--social-space #spiral2dCanvas,
body.body--social-space .membrane-layer,
body.body--social-space .sidebar-shell,
body.body--social-space .sidebar-shell__reveal,
body.body--social-space .donut-institute-nav,
body.body--social-space .donut-institute-badge,
body.body--social-space .donut-institute-links,
body.body--social-space .attention-tagline,
body.body--social-space .quantum-cloud-lines,
body.body--social-space .fractal-orient,
body.body--social-space .input-focus-hud,
body.body--social-space .hud-canvas,
body.body--social-space .joystick-hud,
body.body--social-space .joystick-hint,
body.body--social-space .circle-chips,
body.body--social-space .desk-bar {
  position: absolute !important;
}

#navBoardCustom {
  display: none !important;
  pointer-events: none !important;
}

#donutCanvas {
  pointer-events: auto !important;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  transform: none;
  transform-origin: center center;
}

#spiral2dCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3; /* above the donut */
  pointer-events: none;
}

/* Hide the experimental sun/toggle overlay that blocks donut clicks */
.sun-control {
  pointer-events: none;
}

.app, .mainstage {
  position: relative;
}

/* Background and ring chrome should not intercept clicks */
.background-layer,
.background-stack,
.menu-ring,
.menu-ring__circle {
  pointer-events: none !important;
}
.menu-ring {
  pointer-events: none;
}
.menu-ring__circle {
  pointer-events: none;
}
.menu-ring__slots {
  pointer-events: none;
}
.menu-ring__slot,
.menu-ring__steer {
  pointer-events: auto;
}

/* Keep the membrane directory interactive even when docked/floating */
#membraneDirectoryPanel,
#membraneDirectoryPanel .membrane-dock-control-panel {
  pointer-events: auto !important;
  overflow-y: auto;
  max-height: calc(100vh - 40px);
}

/* Make sure the tablet overlay never eats clicks */
.membrane-tablet canvas {
  pointer-events: none !important;
}

/* Panels stay interactive above the canvas */
.membrane-panel,
.nav-board {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Hide Board to avoid overlay */
.app {
  position: relative;
      width: 100%;
      min-height: 100vh;
      height: 100vh;
      overflow: hidden;
      display: block;
    }

.app.app--social-space {
  padding-bottom: clamp(40px, 10vh, 140px);
}

/* (was hiding membrane UI in social-mode; Donuts.html embeds membrane via iframe and needs it interactive) */

.social-extension {
  position: relative;
  min-height: clamp(520px, 90vh, 1200px);
  padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 80px) clamp(100px, 18vh, 220px);
  background: linear-gradient(180deg, rgba(8, 6, 20, 0.98), rgba(6, 5, 18, 0.99)),
    var(--site-bg);
  border-top: 1px solid rgba(120, 160, 255, 0.18);
  z-index: 20;
  overflow: hidden;
}

.social-extension::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--site-pattern);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.social-extension__inner {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  position: relative;
  z-index: 1;
}

.social-extension.is-visible .social-extension__inner {
  opacity: 1;
  transform: translateY(0);
}

.social-extension__inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
}

.social-extension__header {
  display: grid;
  gap: 8px;
  text-align: left;
}

.social-extension__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(200, 210, 255, 0.6);
}

.social-extension__title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 248, 255, 0.92);
}

.social-extension__sub {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(220, 225, 255, 0.65);
}

.social-extension__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.social-extension__card {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(130, 160, 255, 0.2);
  background: rgba(10, 8, 26, 0.72);
  box-shadow: inset 0 0 24px rgba(120, 140, 240, 0.1);
  min-height: 140px;
}

.social-extension__card h3 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 230, 180, 0.9);
}

.social-extension__card p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(220, 220, 245, 0.7);
}

.stage, .mainstage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.hud-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
}

#creativeTimeCanvas {
  z-index: 5;
  opacity: 0.85;
}

.input-focus-hud {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 10, 26, 0.7);
  border: 1px solid rgba(125, 214, 255, 0.2);
  color: rgba(234, 242, 255, 0.82);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.7;
  backdrop-filter: blur(8px) saturate(1.05);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.input-focus-hud.is-lol {
  border-color: rgba(255, 214, 143, 0.35);
  color: rgba(255, 224, 180, 0.92);
  opacity: 0.95;
}

/* Bullseye sits above LoL symbol; CircleSquare HUD disabled */
#circleSquareCanvas {
  display: none;
}
#circleSquareCanvas {
  opacity: 0.9;
}
body.circle-square-enabled #circleSquareCanvas {
  display: block;
}
#lolSymbolCanvas {
  z-index: 6;
  opacity: 0.9;
  pointer-events: none;
}
body.lol-symbol-interactive #lolSymbolCanvas {
  pointer-events: auto;
  cursor: pointer;
}
body.lol-symbol-drag #lolSymbolCanvas {
  cursor: grab;
}
body.lol-symbol-drag #lolSymbolCanvas.is-dragging {
  cursor: grabbing;
}
#bullseyeCanvas {
  z-index: 7;
  opacity: 0.9;
}
#circumpointHudCanvas {
  z-index: 8;
  opacity: 0.85;
}
#stellarCompassCanvas {
  z-index: 5;
  opacity: 0.85;
}

.lol-selection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-top: 6px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(8, 12, 28, 0.55);
  border: 1px solid rgba(125, 214, 255, 0.12);
}
.lol-selection-item {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(125, 214, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}
.echo-dome__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 72px;
  max-height: 180px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(125, 214, 255, 0.16);
  background: rgba(6, 10, 24, 0.6);
  overflow-y: auto;
}
.echo-dome__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 34, 0.75);
  color: rgba(240, 245, 255, 0.92);
  font-size: 0.72rem;
}
.echo-dome__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.echo-dome__meta {
  color: rgba(170, 200, 255, 0.8);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.echo-dome__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.echo-dome__clear {
  padding: 4px 12px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.echo-dome__remove {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(12, 18, 34, 0.6);
  color: rgba(225, 234, 255, 0.86);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.echo-dome__remove:hover {
  border-color: rgba(255, 206, 92, 0.6);
  background: rgba(255, 206, 92, 0.18);
}
.echo-dome__empty {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(125, 214, 255, 0.18);
  color: rgba(200, 220, 255, 0.72);
  font-size: 0.72rem;
  text-align: center;
}
.prism-orchard__map {
  position: relative;
  height: 120px;
  margin-top: 6px;
  border-radius: 16px;
  border: 1px solid rgba(125, 214, 255, 0.18);
  background: radial-gradient(circle at 20% 20%, rgba(125, 214, 255, 0.18), transparent 45%),
    radial-gradient(circle at 80% 35%, rgba(255, 212, 120, 0.14), transparent 50%),
    linear-gradient(135deg, rgba(7, 10, 26, 0.82), rgba(18, 24, 48, 0.72));
  overflow: hidden;
}
.prism-orchard__map::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(125, 214, 255, 0.2);
  opacity: 0.6;
  pointer-events: none;
}
.prism-orchard__dot {
  position: absolute;
  width: var(--dot-size, 6px);
  height: var(--dot-size, 6px);
  border-radius: 50%;
  background: hsl(var(--dot-hue, 200), 70%, 60%);
  box-shadow: 0 0 8px hsla(var(--dot-hue, 200), 80%, 70%, 0.6);
  transform: translate(-50%, -50%);
  opacity: 0.9;
  cursor: pointer;
}
.prism-orchard__dot.is-selected {
  box-shadow: 0 0 12px hsla(var(--dot-hue, 200), 85%, 70%, 0.9),
    0 0 0 6px rgba(125, 214, 255, 0.2);
  outline: 1px solid rgba(255, 255, 255, 0.6);
}
.prism-orchard__dot.is-hovered:not(.is-selected) {
  box-shadow: 0 0 10px hsla(var(--dot-hue, 200), 80%, 70%, 0.8),
    0 0 0 4px rgba(125, 214, 255, 0.18);
  outline: 1px solid rgba(255, 255, 255, 0.35);
}
.resonance-commons__map {
  position: relative;
  height: 130px;
  margin-top: 6px;
  border-radius: 16px;
  border: 1px solid rgba(125, 214, 255, 0.16);
  background: radial-gradient(circle at 15% 20%, rgba(125, 214, 255, 0.18), transparent 48%),
    radial-gradient(circle at 75% 70%, rgba(255, 170, 120, 0.12), transparent 55%),
    linear-gradient(135deg, rgba(6, 12, 28, 0.86), rgba(20, 26, 50, 0.72));
  overflow: hidden;
}
.resonance-commons__map::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  border: 1px dashed rgba(125, 214, 255, 0.16);
  opacity: 0.7;
  pointer-events: none;
}
.resonance-commons__map svg {
  width: 100%;
  height: 100%;
  display: block;
}
.resonance-commons__edge {
  stroke: hsla(var(--edge-hue, 210), 70%, 60%, 0.35);
  stroke-width: 0.6;
  opacity: 0.7;
  pointer-events: none;
}
.resonance-commons__edge.is-bridge {
  stroke-dasharray: 3 3;
  opacity: 0.5;
}
.resonance-commons__edge.is-dimmed {
  opacity: 0.18;
}
.resonance-commons__edge.is-hovered {
  opacity: 0.6;
  stroke-width: 0.9;
}
.resonance-commons__node {
  fill: hsl(var(--node-hue, 210), 72%, 60%);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 0.6;
  opacity: 0.92;
  cursor: pointer;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.resonance-commons__node:hover {
  opacity: 1;
}
.resonance-commons__node.is-dimmed {
  opacity: 0.28;
}
.resonance-commons__node.is-focused {
  stroke-width: 1.2;
  filter: drop-shadow(0 0 6px hsla(var(--node-hue, 210), 80%, 70%, 0.8));
}
.resonance-commons__node.is-hovered {
  opacity: 1;
  filter: drop-shadow(0 0 8px hsla(var(--node-hue, 210), 80%, 70%, 0.9));
}
.herbal-magic__count {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(210, 230, 255, 0.7);
}
.herbal-magic__list {
  margin-top: 8px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(125, 214, 255, 0.16);
  background: rgba(6, 10, 24, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  max-height: 220px;
  overflow-y: auto;
}
.herbal-magic__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 34, 0.75);
  color: rgba(240, 245, 255, 0.92);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.herbal-magic__card:hover {
  border-color: rgba(255, 206, 92, 0.5);
  transform: translateY(-1px);
}
.herbal-magic__card.is-active {
  border-color: rgba(125, 214, 255, 0.65);
  box-shadow: 0 0 16px rgba(125, 214, 255, 0.2);
}
.herbal-magic__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.herbal-magic__name {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.herbal-magic__sub {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(170, 200, 255, 0.8);
}
.herbal-magic__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.herbal-magic__badge {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid hsla(var(--badge-hue, 210), 70%, 60%, 0.45);
  background: hsla(var(--badge-hue, 210), 60%, 30%, 0.25);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 236, 255, 0.86);
}
.herbal-magic__badge--caution {
  --badge-hue: 28;
  border-style: dashed;
  color: rgba(255, 224, 180, 0.9);
}
.herbal-magic__intensity {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(255, 210, 140, 0.8);
}
.herbal-magic__detail {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 14, 28, 0.6);
  color: rgba(235, 242, 255, 0.92);
}
.herbal-magic__detail-title {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.herbal-magic__detail-sub {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(170, 200, 255, 0.75);
  margin-bottom: 10px;
}

.herbal-magic__geometry {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(120, 190, 255, 0.2);
  background: rgba(8, 14, 28, 0.72);
}
.herbal-magic__geometry-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: center;
}
.herbal-magic__viewer {
  display: grid;
  gap: 6px;
  justify-items: center;
}
.herbal-magic__viewer-title {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 220, 255, 0.7);
}
.herbal-magic__viewer-canvas {
  width: 200px;
  height: 200px;
  min-width: 200px;
  min-height: 200px;
  border-radius: 14px;
  border: 1px solid rgba(120, 190, 255, 0.2);
  background: radial-gradient(circle at 50% 40%, rgba(20, 30, 60, 0.8), rgba(8, 12, 24, 0.9));
}
.herbal-magic__glyph-wrap {
  display: grid;
  gap: 6px;
  justify-items: center;
}
.herbal-magic__glyph {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  display: block;
}
.herbal-magic__time-map {
  margin-top: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(120, 190, 255, 0.2);
  background: rgba(10, 16, 34, 0.65);
  display: grid;
  gap: 6px;
}
.herbal-magic__time-canvas {
  width: 220px;
  height: 150px;
  margin: 0 auto;
  display: block;
}
.herbal-magic__geometry-summary {
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(198, 220, 255, 0.8);
}
.herbal-magic__molecules {
  margin-top: 10px;
}
.herbal-magic__compound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.herbal-magic__compound {
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(120, 190, 255, 0.18);
  background: rgba(8, 12, 26, 0.7);
  display: grid;
  gap: 6px;
}
.herbal-magic__compound-name {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.92);
}
.herbal-magic__motif {
  width: 64px;
  height: 64px;
  margin: 0 auto;
}
.herbal-magic__compound-meta {
  display: grid;
  gap: 6px;
}
.herbal-magic__compound-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.herbal-magic__compound-chip {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(120, 190, 255, 0.2);
  color: rgba(198, 220, 255, 0.8);
}
.herbal-magic__compound-svg {
  width: 100%;
  max-width: 140px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 16, 34, 0.6);
  padding: 4px;
}
.herbal-magic__compound-smiles {
  font-size: 0.58rem;
  line-height: 1.4;
  color: rgba(190, 210, 255, 0.75);
  word-break: break-word;
}
.herbal-magic__row {
  margin-bottom: 8px;
}
.herbal-magic__row-title {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 220, 255, 0.7);
  margin-bottom: 4px;
}
.herbal-magic__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.herbal-magic__chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 18, 34, 0.7);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(225, 234, 255, 0.86);
}
.herbal-magic__note {
  font-size: 0.72rem;
  color: rgba(220, 235, 255, 0.8);
  line-height: 1.4;
}
.herbal-magic__caution {
  border-left: 2px solid rgba(255, 180, 110, 0.7);
  padding-left: 8px;
  color: rgba(255, 210, 160, 0.85);
}
.herbal-magic__alert {
  margin: 6px 0 10px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 188, 130, 0.6);
  background: rgba(34, 18, 10, 0.35);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 212, 170, 0.92);
}
.herbal-magic__provenance {
  margin-top: 6px;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(175, 198, 232, 0.7);
}
.herbal-magic__legend {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(125, 214, 255, 0.18);
  color: rgba(200, 220, 255, 0.75);
  font-size: 0.7rem;
  line-height: 1.45;
}
.herbal-magic__presets {
  flex-wrap: wrap;
  gap: 8px;
}
.herbal-magic__legend-title {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(210, 230, 255, 0.75);
  margin-bottom: 6px;
}
.herbal-magic__mix {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(120, 190, 255, 0.18);
  background: rgba(8, 14, 28, 0.55);
  display: grid;
  gap: 10px;
}
.herbal-magic__mix-body {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}
.herbal-magic__mix-list {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(120, 190, 255, 0.16);
  background: rgba(6, 10, 22, 0.72);
  min-height: 80px;
  max-height: 220px;
  overflow-y: auto;
}
.herbal-magic__mix-item {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 18, 36, 0.7);
}
.herbal-magic__mix-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.herbal-magic__mix-item-name {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(225, 236, 255, 0.9);
}
.herbal-magic__mix-item-weight {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255, 212, 170, 0.85);
}
.herbal-magic__mix-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.herbal-magic__mix-remove {
  border: 1px solid rgba(255, 180, 110, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(26, 16, 10, 0.4);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 210, 170, 0.9);
  cursor: pointer;
}
.herbal-magic__mix-visual {
  padding: 8px;
  border-radius: 12px;
  border: 1px dashed rgba(120, 190, 255, 0.2);
  background: rgba(10, 16, 34, 0.65);
  display: grid;
  gap: 8px;
}
.herbal-magic__mix-canvas {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  border: 1px solid rgba(120, 190, 255, 0.2);
  background: radial-gradient(circle at 50% 45%, rgba(20, 30, 60, 0.8), rgba(8, 12, 24, 0.9));
}
.herbal-magic__mix-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.herbal-magic__metric {
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(120, 190, 255, 0.2);
  background: rgba(8, 12, 26, 0.7);
  display: grid;
  gap: 4px;
}
.herbal-magic__metric-label {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 220, 255, 0.65);
}
.herbal-magic__metric-value {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(226, 236, 255, 0.9);
}
.herbal-magic__ritual {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(120, 190, 255, 0.18);
  background: rgba(8, 12, 26, 0.65);
  display: grid;
  gap: 8px;
}
.herbal-magic__ritual-card {
  min-height: 120px;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed rgba(120, 190, 255, 0.35);
  background: rgba(6, 10, 22, 0.72);
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(226, 236, 255, 0.86);
  white-space: pre-wrap;
}
.herbal-magic__empty {
  font-size: 0.72rem;
  color: rgba(200, 220, 255, 0.72);
  text-align: center;
  padding: 8px 10px;
}
.crystal-magic__count {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(210, 230, 255, 0.7);
}
.crystal-magic__list {
  margin-top: 8px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(125, 214, 255, 0.16);
  background: rgba(6, 10, 24, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.crystal-magic__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 34, 0.75);
  color: rgba(240, 245, 255, 0.92);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.crystal-magic__card:hover {
  border-color: rgba(255, 206, 92, 0.5);
  transform: translateY(-1px);
}
.crystal-magic__card.is-active {
  border-color: rgba(125, 214, 255, 0.65);
  box-shadow: 0 0 16px rgba(125, 214, 255, 0.2);
}
.crystal-magic__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crystal-magic__name {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.crystal-magic__sub {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(170, 200, 255, 0.8);
}
.crystal-magic__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.crystal-magic__badge {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid hsla(var(--badge-hue, 210), 70%, 60%, 0.45);
  background: hsla(var(--badge-hue, 210), 60%, 30%, 0.25);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 236, 255, 0.86);
}
.crystal-magic__badge--caution {
  --badge-hue: 28;
  border-style: dashed;
  color: rgba(255, 224, 180, 0.9);
}
.crystal-magic__intensity {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(255, 210, 140, 0.8);
}
.crystal-magic__detail {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 14, 28, 0.6);
  color: rgba(235, 242, 255, 0.92);
}
.crystal-magic__detail-title {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.crystal-magic__detail-sub {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(170, 200, 255, 0.8);
}
.crystal-magic__detail-head {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.crystal-magic__row {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.crystal-magic__row-title {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(170, 200, 255, 0.7);
}
.crystal-magic__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.crystal-magic__chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(120, 210, 255, 0.28);
  background: rgba(20, 30, 52, 0.8);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230, 240, 255, 0.88);
}
.crystal-magic__note {
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(210, 230, 255, 0.86);
}
.crystal-magic__caution {
  color: rgba(255, 210, 160, 0.9);
}
.crystal-magic__legend {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(120, 210, 255, 0.12);
  background: rgba(6, 10, 24, 0.55);
}
.crystal-magic__legend-title {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: rgba(170, 200, 255, 0.7);
}
.crystal-magic__presets {
  flex-wrap: wrap;
}
.crystal-magic__empty {
  font-size: 0.72rem;
  color: rgba(200, 220, 255, 0.72);
  text-align: center;
  padding: 8px 10px;
}
.lol-position-pad {
  position: relative;
  width: 100%;
  height: clamp(90px, 18vh, 160px);
  margin-top: 6px;
  border-radius: 16px;
  border: 1px solid rgba(125, 214, 255, 0.18);
  background:
    radial-gradient(circle at center, rgba(125, 214, 255, 0.22) 0%, rgba(12, 18, 40, 0.82) 62%, rgba(8, 12, 28, 0.92) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0.5px, transparent 0),
    linear-gradient(rgba(255, 255, 255, 0.08) 0.5px, transparent 0);
  background-size: auto, 24px 24px, 24px 24px;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 10px 20px rgba(0, 0, 0, 0.35);
  touch-action: none;
  cursor: crosshair;
}
.lol-position-pad::before,
.lol-position-pad::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 6px rgba(125, 214, 255, 0.35);
  pointer-events: none;
}
.lol-position-pad::before {
  width: 1px;
  height: 70%;
  transform: translate(-50%, -50%);
}
.lol-position-pad::after {
  width: 70%;
  height: 1px;
  transform: translate(-50%, -50%);
}
.lol-position-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffd38a;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 12px rgba(255, 214, 143, 0.65), 0 0 18px rgba(125, 214, 255, 0.35);
  transform: translate(-50%, -50%);
}
.lol-extraction-item {
  cursor: pointer;
}
.lol-selection-item.is-locked {
  background: rgba(255, 214, 143, 0.22);
  border: 1px solid rgba(255, 214, 143, 0.5);
  color: rgba(255, 244, 230, 0.95);
}
.lol-selection-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.lol-opacity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 28px;
  margin-top: 6px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(8, 12, 28, 0.55);
  border: 1px solid rgba(125, 214, 255, 0.12);
}
.lol-opacity-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
  align-items: center;
}
.lol-opacity-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}
.lol-opacity-input {
  width: 100%;
}

.sidebar {
  position: fixed;
  top: 12px;
  bottom: 12px;
  left: 12px;
  right: auto;
  width: clamp(380px, 38vw, 520px);
  max-width: 520px;
  min-width: 360px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px;
  padding-right: 0; /* remove extra gutter */
  margin: 0;
  pointer-events: auto;
  background: none !important;
  border: none;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 30;
  transition: none;
}

.sidebar > * {
  pointer-events: auto;
}

.sidebar {
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar {
  width: 12px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 999px;
  margin: 8px 0; /* inset to avoid pill overlap */
}
.sidebar::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 999px;
  border: none !important;
  box-shadow: none !important;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: transparent !important;
}

.sidebar-scroll-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  width: 12px;
  pointer-events: none;
  background: transparent !important;
  opacity: 0 !important;
  border-radius: 12px;
  display: none !important;
}

.sidebar-topbar {
  display: none !important;
}



.sidebar-topbar__btn:hover:not(:disabled) {
  border-color: rgba(255, 206, 92, 0.8);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 206, 92, 0.35), 0 12px 18px rgba(0, 0, 0, 0.28);
}

.sidebar-topbar__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sidebar-topbar__btn--ghost {
  background: rgba(255, 255, 255, 0.03);
}





.sidebar::after {
  display: none !important;
}









.sidebar__close {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 5, 25, 0.6);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 12px 24px 0;
  cursor: pointer;
}

.sidebar-toggle {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 80;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(8, 0, 28, 0.72);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.82rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(4, 0, 20, 0.45);
}

.sidebar-toggle__icon {
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
  display: inline-block;
}

.sidebar-toggle__icon::before,
.sidebar-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: none;
}

.sidebar-toggle__icon::before {
  top: -6px;
}

.sidebar-toggle__icon::after {
  top: 6px;
}



body.sidebar-open 

    .sidebar::-webkit-scrollbar {
      width: 8px;
    }

    .sidebar::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
    }

	    .sidebar::-webkit-scrollbar-thumb {
	      background: linear-gradient(180deg, rgba(255, 206, 92, 0.75), rgba(255, 206, 92, 0.35));
	      border-radius: 12px;
	    }

    .sidebar__header {
      display: none;
    }

    .panel,
    .floating-panel {
      scrollbar-width: none;
    }

    .panel::-webkit-scrollbar,
    .floating-panel::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

	    .panel {
	      position: relative;
	      /* Base panel tint (no blur): needed so SM panels are not "invisible". */
	      background: linear-gradient(155deg, rgba(12, 18, 46, 0.92), rgba(8, 10, 26, 0.86));
	      border-radius: 26px;
	      padding: 18px;
	      border: 1px solid rgba(255, 255, 255, 0.16);
	      box-shadow: 0 22px 40px rgba(6, 4, 16, 0.45);
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      overflow: hidden;
    }

.membrane-column {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  pointer-events: auto;
  z-index: 45;
  height: auto;
  max-height: none;
  overflow: visible;
}

.membrane-layer {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: auto;
  display: block;
  overflow: visible;
  --symmetry-rotation: 0deg;
  transition: transform 0.3s ease;
  transform-origin: center;
  transform: rotate(var(--symmetry-rotation));
}
.membrane-layer::-webkit-scrollbar,
.membrane-column::-webkit-scrollbar {
  width: 12px;
}
.membrane-layer::-webkit-scrollbar-track,
.membrane-column::-webkit-scrollbar-track {
  background: rgba(6,6,16,0.55);
  border-radius: 999px;
}
	.membrane-layer::-webkit-scrollbar-thumb,
	.membrane-column::-webkit-scrollbar-thumb {
	  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
	  border-radius: 999px;
	  border: 2px solid rgba(6,6,16,0.75);
	  box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
	}
	.membrane-layer::-webkit-scrollbar-thumb:hover,
	.membrane-column::-webkit-scrollbar-thumb:hover {
	  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.16));
	}

.membrane-layer::-webkit-scrollbar {
  width: 6px;
}

.membrane-layer::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
}

.membrane-layer.symmetry--reflect {
  transform: scaleX(-1) rotate(var(--symmetry-rotation));
}
.membrane-layer .membrane-panel {
  position: absolute !important;
  pointer-events: auto;
}
.membrane-layer.symmetry--reflect .membrane-panel {
  transform: scaleX(-1);
}

.membrane-layer--solo {
  max-width: 100%;
}

.membrane-panel.is-hidden,
.membrane-panel[hidden] {
  display: none !important;
}

.donut-event-display {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 80;
  min-width: 200px;
  max-width: 260px;
  padding: 12px 14px;
  background: rgba(8, 6, 26, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(5, 4, 24, 0.4);
  backdrop-filter: blur(12px) saturate(1.1);
  color: #eaf2ff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

.donut-event-display--panel {
  position: static;
  min-width: 0;
  max-width: 360px;
  width: min(100%, 360px);
  pointer-events: auto;
  background: rgba(8, 10, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px) saturate(1.08);
  margin-top: 12px;
  padding: 50px 50px 50px;
}

.donut-adapter__card {
  margin-top: 0;
  max-width: 100%;
  display: flex;
  justify-content: center;
}

/* Consolidated UI overrides */
html,
body {
  overflow-x: hidden;
}

.stage {
  background: none;
  background-color: transparent;
}


#sidebar,
#sidebarRight {
  position: fixed;
  top: 12px;
  bottom: 12px;
  padding: 12px;
  width: clamp(380px, 38vw, 520px);
  max-width: 520px;
  min-width: 360px;
  overflow-x: hidden;
  overflow-y: auto;
}
#sidebar {
  left: 12px;
  right: auto;
}
#sidebarRight {
  right: 12px;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 18px;
}

#sidebar,
#sidebarRight,
.membrane-layer {
  scrollbar-width: auto;
  scrollbar-color: rgba(255, 255, 255, 0.65) rgba(10, 10, 18, 0.55);
}

#sidebar::-webkit-scrollbar,
#sidebarRight::-webkit-scrollbar,
.membrane-layer::-webkit-scrollbar {
  width: 12px;
}

	#sidebar::-webkit-scrollbar-thumb,
	#sidebarRight::-webkit-scrollbar-thumb,
	.membrane-layer::-webkit-scrollbar-thumb {
	  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
	  border-radius: 12px;
	  border: 2px solid rgba(6, 6, 16, 0.75);
	  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
	}

#sidebar::-webkit-scrollbar-track,
#sidebarRight::-webkit-scrollbar-track,
.membrane-layer::-webkit-scrollbar-track {
  background: rgba(6, 6, 16, 0.7);
  border-radius: 12px;
}

#sidebar .membrane-panel,
#sidebarRight .membrane-panel {
  min-height: 380px;
  margin: 0 0 18px 0;
}

#membraneDirectoryPanel,
#membraneDirectoryPanel .membrane-dock-control-panel {
  pointer-events: auto;
  overflow-y: visible;
  max-height: none;
}
#membraneDirectoryPanel {
  width: clamp(380px, 38vw, 520px);
  min-width: 360px;
  min-height: 520px;
  background: linear-gradient(165deg, rgba(12, 24, 62, 0.88), rgba(8, 10, 26, 0.86)) !important;
  border: 1px solid rgba(125, 214, 255, 0.20) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 12px 14px 18px;
}
#membraneDirectoryPanel.panel--floating {
  width: clamp(380px, 38vw, 520px);
  min-width: 360px;
  min-height: 520px;
  background: linear-gradient(165deg, rgba(12, 24, 62, 0.88), rgba(8, 10, 26, 0.86)) !important;
  border: 1px solid rgba(125, 214, 255, 0.20) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sidebar .membrane-directory-panel,
#sidebarRight .membrane-directory-panel {
  width: clamp(380px, 38vw, 520px);
  min-width: 360px;
  min-height: 520px;
  margin: 12px 0 14px;
  padding: 12px 14px 18px;
}
.membrane-directory-panel .membrane-directory__content {
  scrollbar-width: auto;
  padding: 0 10px 16px;
  margin-bottom: 0;
  max-height: none;
  overflow-y: visible;
  margin-top: 52px;
}
.membrane-directory-panel .membrane-directory__block--list {
  max-height: none;
  height: auto;
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}
.membrane-directory-panel .membrane-directory__block {
  padding-bottom: 8px;
}
.membrane-directory__stack {
  gap: 14px;
}
.membrane-directory-panel {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.membrane-directory-panel .membrane-directory__block {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.membrane-directory-panel.time-map {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.membrane-directory-panel .membrane-directory__content,
.membrane-directory-panel .membrane-directory__block {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.membrane-directory-panel::before,
.membrane-directory-panel::after {
  content: none;
  background: none;
}

/* Final sidebar-only overrides (do not affect central membrane) */
#sidebar,
#sidebarRight {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#sidebar .sidebar-topbar,
#sidebarRight .sidebar-topbar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Hard reset for membrane directory panel and its children (to kill residual fills) */
.membrane-directory-panel,
.membrane-directory-panel *,
.membrane-directory-panel::before,
.membrane-directory-panel::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Restore a solid shell when the membrane directory is floating. */
#floatingLayer #membraneDirectoryPanel.panel--floating,
.floating-layer #membraneDirectoryPanel.panel--floating,
#membraneDirectoryPanel.panel--floating {
  background: rgba(10, 18, 38, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 16px !important;
}


/* Force membrane directory content/backdrop globally to transparent */
.membrane-directory__backdrop {
  opacity: 0 !important;
  display: none !important;
  background: transparent !important;
}
.membrane-directory__content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}
.membrane-directory__block,
.membrane-directory__block--list,
.membrane-directory__block--designer {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Final safety: nuke all background/shadow/border inside sidebars only */
body:not(.has-pinned-sidebars) #sidebar,
body:not(.has-pinned-sidebars) #sidebar *,
body:not(.has-pinned-sidebars) #sidebarRight,
body:not(.has-pinned-sidebars) #sidebarRight * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  filter: none !important;
}

#donutAdapterPanel {
  max-width: 420px;
  min-width: 280px;
  min-height: 260px;
  padding-bottom: 12px;
  padding-top: 80px; /* space for dock HUD */
}
#donutAdapterPanel.panel--floating {
  width: min(340px, 82vw);
  min-width: 280px;
  min-height: 260px;
  max-width: min(420px, 90vw);
}
#donutAdapterPanel > .panel__title {
  display: none;
}
.panel-dock-controls {
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}
.donut-event-display--panel {
  margin: 40px 32px 32px 32px;
  padding: 60px;
  max-width: 420px;
}

#geometryMorphPanel.panel--floating {
  width: min(360px, 82vw);
  max-width: min(420px, 90vw);
}

#circumpointPanel[data-dock="floating"] {
  width: min(360px, 85vw);
  max-width: min(420px, 90vw);
}

.membrane-panel,
.nav-board {
  position: relative;
  z-index: 70;
  pointer-events: auto;
}

.membrane-panel {
  --dock-accent: #ffce5c;
  --dock-accent-strong: #ffe699;
  --dock-surface: rgba(12, 14, 26, 0.9);
  --dock-surface-secondary: rgba(8, 10, 22, 0.82);
  --dock-rim: rgba(255, 255, 255, 0.14);
  --dock-glow: rgba(255, 206, 92, 0.22);
  --dock-text: rgba(240, 245, 255, 0.94);
}
#brainwavePanel {
  --dock-accent: #78d7ff;
  --dock-accent-strong: #b8ecff;
  --dock-surface: rgba(6, 12, 26, 0.9);
  --dock-surface-secondary: rgba(4, 10, 22, 0.82);
}
#cloudsPanel {
  --dock-accent: #6cca7c;
  --dock-accent-strong: #a6f1b4;
  --dock-surface: rgba(6, 16, 12, 0.9);
  --dock-surface-secondary: rgba(5, 12, 10, 0.82);
}
#primaryCirclePanel,
#unitCirclePanel {
  --dock-accent: #b78bff;
  --dock-accent-strong: #e2c7ff;
}
#torusSectionPanel {
  --dock-accent: #9f68ff;
  --dock-accent-strong: #d7c1ff;
}
#solarGate,
#geometryMorphPanel {
  --dock-accent: #ffce5c;
  --dock-accent-strong: #ffe7a6;
}
#fieldDeckPanel {
  --dock-accent: #6dc8ff;
  --dock-accent-strong: #b7e5ff;
}
#donutAdapterPanel {
  --dock-accent: #71faff;
  --dock-accent-strong: #b7ffff;
}
#trajectoryPanel {
  --dock-accent: #ff9f6f;
  --dock-accent-strong: #ffd1b6;
}
#chaosPanel {
  --dock-accent: #ff5f7a;
  --dock-accent-strong: #ffc2cf;
}
#crownPanel {
  --dock-accent: #d7b0ff;
  --dock-accent-strong: #f1e1ff;
}
#entryDoorPanel {
  --dock-accent: #a5d7ff;
  --dock-accent-strong: #d9efff;
}
#brainwavePanel,
#cloudsPanel,
#geometryMorphPanel,
#fieldDeckPanel,
#chaosPanel,
#trajectoryPanel,
#donutAdapterPanel,
#torusSectionPanel,
#primaryCirclePanel,
#unitCirclePanel,
#crownPanel,
#entryDoorPanel,
#solarGate {
  --dock-text: rgba(245, 248, 255, 0.96);
  --dock-rim: rgba(255, 255, 255, 0.16);
}

#membraneTablet {
  display: none;
}

.attention-tagline {
  z-index: 1;
}

.menu-ring {
  z-index: 1;
}


.donut-institute-nav {
  position: fixed;
  top: 18px;
  left: 18px;
  /* Keep above canvases/panels so links remain clickable. */
  z-index: 2400;
  isolation: isolate;
}

/* Social-space mode forces many elements to absolute. Keep nav absolute, but preserve
   in-flow stacking inside the nav so the roll-down panel behaves. */
body.body--social-space .donut-institute-badge,
body.body--social-space .donut-institute-links {
  position: relative !important;
}

.donut-institute-badge {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid rgba(130, 232, 255, 0.72);
  background:
    linear-gradient(160deg, rgba(6, 10, 28, 0.95), rgba(4, 8, 22, 0.86));
  color: rgba(240, 247, 255, 0.98);
  font-family: "Space Mono", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: none;
  white-space: nowrap;
  max-width: min(560px, calc(100vw - 28px));
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:
    0 14px 36px rgba(2, 5, 20, 0.55),
    inset 0 0 0 2px rgba(109, 211, 255, 0.34),
    inset 0 -10px 30px rgba(12, 29, 68, 0.35);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  cursor: pointer;
  pointer-events: auto;
}

.donut-institute-badge:hover {
  border-color: rgba(164, 238, 255, 0.88);
  box-shadow:
    0 18px 40px rgba(2, 7, 24, 0.6),
    inset 0 0 0 2px rgba(145, 227, 255, 0.38),
    inset 0 -10px 30px rgba(10, 27, 64, 0.44);
}

.donut-institute-badge:focus-visible {
  outline: 2px solid rgba(125, 240, 255, 0.7);
  outline-offset: 3px;
}

.donut-institute-links {
  margin-top: 12px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(109, 181, 232, 0.34);
  background:
    linear-gradient(180deg, rgba(3, 7, 24, 0.86), rgba(2, 5, 18, 0.9));
  box-shadow:
    0 26px 58px rgba(2, 3, 12, 0.62),
    inset 0 0 0 1px rgba(120, 208, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 2401;
  min-width: 300px;
  max-width: min(520px, calc(100vw - 28px));
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 260ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 260ms;
  overflow: hidden;
}

.donut-institute-nav.is-open .donut-institute-links {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  overflow: auto;
  transition:
    max-height 260ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 0s;
}

.donut-institute-links a,
.donut-institute-links .is-disabled {
  display: block;
  padding: 13px 16px;
  border-radius: 18px;
  border: 1px solid rgba(132, 152, 203, 0.30);
  background: linear-gradient(160deg, rgba(7, 14, 38, 0.95), rgba(8, 13, 32, 0.86));
  text-decoration: none;
  font-family: "Space Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(238, 246, 255, 0.94);
  line-height: 1.2;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
  pointer-events: auto; /* avoid click-through */
}

.donut-institute-links a:hover {
  background: linear-gradient(160deg, rgba(12, 22, 56, 0.95), rgba(10, 18, 42, 0.9));
  border-color: rgba(155, 205, 255, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(166, 223, 255, 0.22),
    0 8px 18px rgba(3, 10, 30, 0.42);
  transform: translateX(2px);
}

.donut-institute-links a.is-current,
.donut-institute-links .is-disabled.is-current,
.donut-institute-links a[aria-current="page"] {
  background: linear-gradient(130deg, rgba(65, 138, 191, 0.42), rgba(73, 206, 245, 0.28));
  border-color: rgba(143, 236, 255, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(197, 244, 255, 0.48),
    0 10px 26px rgba(42, 134, 192, 0.34);
  color: rgba(247, 252, 255, 1);
}

.donut-institute-links .is-disabled.is-current {
  opacity: 1 !important;
  cursor: default;
}

.donut-institute-links .is-current {
  outline: 1px solid rgba(191, 245, 255, 0.96);
  outline-offset: 0;
}

.donut-institute-links .is-current .link-hourglass {
  display: none;
}

.donut-institute-links a.is-current,
.donut-institute-links .is-disabled.is-current,
.donut-institute-links a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(88, 184, 255, 0.22), rgba(126, 248, 255, 0.16));
  border-color: rgba(125, 240, 255, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(170, 244, 255, 0.28),
    0 0 16px rgba(78, 180, 255, 0.22);
  color: rgba(247, 252, 255, 0.98);
}

.donut-institute-links .is-disabled.is-current {
  opacity: 1 !important;
  cursor: default;
}

.donut-institute-links .is-current {
  outline: 1px solid rgba(172, 242, 255, 0.85);
  outline-offset: 0;
}

.donut-institute-links .is-current .link-hourglass {
  display: none;
}

.donut-institute-links .is-disabled {
  opacity: 0.52;
  cursor: not-allowed;
  user-select: none;
}

.donut-institute-links .is-disabled:hover {
  background: linear-gradient(160deg, rgba(7, 14, 38, 0.95), rgba(8, 13, 32, 0.86));
  border-color: rgba(132, 152, 203, 0.30);
  box-shadow: none;
  transform: none;
}

.donut-institute-links .link-hourglass {
  display: none !important;
}

.donut-institute-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin: 6px 6px 8px;
  border-radius: 999px;
}

.donut-institute-links a.donut-institute-sub {
  font-size: 11px;
  opacity: 0.82;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.03);
  padding-left: 18px;
  position: relative;
}

.donut-institute-links a.donut-institute-sub::before {
  content: "->";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.75;
}

@media (max-width: 820px) {
  .donut-institute-nav {
    top: 14px;
    left: 14px;
  }
  .donut-institute-badge {
    padding: 10px 15px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .donut-institute-links {
    min-width: min(360px, calc(100vw - 24px));
    max-width: min(420px, calc(100vw - 24px));
    padding: 12px;
  }
  .donut-institute-links a,
  .donut-institute-links .is-disabled {
    font-size: 14px;
    padding: 11px 14px;
    border-radius: 16px;
  }
}

.panel-dock-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 6px 10px;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.panel-pin-toggle.panel-pin-toggle--compact {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 18px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.panel-pin-toggle--compact button {
  min-width: 32px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #dfe6ff;
}
.panel-pin-toggle--compact button:hover {
  background: rgba(255, 255, 255, 0.12);
}
.panel-dock-button {
  min-width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #e8eeff;
}
.panel-dock-button.panel-dock-button--desktop {
  padding: 0 12px;
  min-width: 54px;
}
.panel-dock-button.panel-dock-button--delete {
  color: #ff7979;
}
.panel-dock-hint {
  display: none;
}

    .panel--floating {
      position: absolute !important;
      width: min(340px, 85vw);
      min-width: 260px;
      max-width: min(360px, 85vw);
      max-height: 88vh;
      overflow-y: auto;
      pointer-events: auto;
      border-radius: 20px;
      box-shadow: 0 18px 40px rgba(10, 8, 45, 0.45);
    }

    .panel--floating .panel__title {
      cursor: move;
      padding-right: 120px;
    }

    .panel__toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
    }

/* Give the membrane panel header breathing room from dock controls */
.membrane-ui .membrane-ui__toolbar {
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  padding-left: 12px;
  padding-right: 12px;
  z-index: 6;
  justify-content: flex-start;
  text-align: left;
}

    /* Mirror the padding based on dock side */
    .membrane-panel[data-dock="left"] .membrane-ui__toolbar {
      padding-left: 84px;
      padding-right: 240px;
    }

    .membrane-panel[data-dock="right"] .membrane-ui__toolbar {
      padding-left: 240px;
      padding-right: 84px;
    }

    /* Membrane title styling */
.membrane-ui .membrane-ui__title {
  font-family: 'Barlow Condensed', 'Space Mono', sans-serif;
  font-size: 2.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  color: rgba(240, 232, 255, 0.88);
  text-shadow: 0 0 12px rgba(120, 170, 255, 0.22);
  text-align: left;
  display: block;
  line-height: 1.05;
}

    .panel__tag {
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.05);
      letter-spacing: 1.4px;
      font-size: 0.72rem;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.78);
    }

    /* Floating membrane tilt (desktop-only hover) */
    .membrane-panel.panel--floating {
      --mem-tilt-x: 0deg;
      --mem-tilt-y: 0deg;
      --mem-tilt-scale: 1.004;
      transform-style: preserve-3d;
      transform: perspective(900px)
        rotateX(var(--mem-tilt-x))
        rotateY(var(--mem-tilt-y))
        scale(var(--mem-tilt-scale));
      transition: transform 160ms ease, box-shadow 220ms ease, filter 220ms ease;
      will-change: transform;
    }

    .membrane-panel.panel--floating:hover,
    .membrane-panel.panel--floating.is-tilting {
      box-shadow:
        0 18px 40px rgba(8, 0, 30, 0.42),
        0 0 24px rgba(120, 180, 255, 0.18);
      filter: brightness(1.04);
      --mem-tilt-x: -4deg;
      --mem-tilt-y: 4deg;
      --mem-tilt-scale: 1.01;
    }

.membrane-dock-control-panel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  display: flex;
  gap: 16px;
  z-index: 5;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  min-height: 92px;
  background:
    linear-gradient(160deg, var(--dock-surface), var(--dock-surface-secondary)),
    radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--dock-accent) 35%, transparent), transparent 58%),
    radial-gradient(circle at 78% 60%, color-mix(in srgb, var(--dock-accent-strong, var(--dock-accent)) 28%, transparent), transparent 52%);
  border: 1px solid var(--dock-rim);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.46),
    0 0 26px color-mix(in srgb, var(--dock-accent) 22%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -14px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
  justify-content: space-between;
}

#membraneDirectoryPanel .membrane-dock-control-panel {
  position: sticky;
  top: 10px;
  left: 0;
  right: 0;
  width: auto;
}

.control-pill {
  isolation: isolate;
  margin-bottom: 14px;
}
.control-pill::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--dock-accent-strong, var(--dock-accent)) 32%, transparent), transparent 62%),
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.08), transparent 55%);
  opacity: 0.8;
  pointer-events: none;
  mix-blend-mode: screen;
}

.panel-dock-button {
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--dock-accent) 40%, rgba(255, 255, 255, 0.16));
  background:
    linear-gradient(160deg, rgba(90, 150, 220, 0.16), rgba(40, 80, 130, 0.12)),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.06));
  color: color-mix(in srgb, var(--dock-accent-strong, var(--dock-accent)) 65%, #dfe9ff);
  font-size: 0.76rem;
  letter-spacing: 0.8px;
  text-transform: none;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.panel-dock-button:hover {
  border-color: var(--dock-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.28),
    0 0 14px color-mix(in srgb, var(--dock-accent) 24%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.panel-dock-button:active {
  transform: translateY(0);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.panel-dock-button:focus-visible {
  outline: 2px solid rgba(255, 206, 92, 0.8);
  outline-offset: 3px;
}
.panel-dock-button[hidden] {
  display: none !important;
}

.panel-pin-toggle {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.04);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    .panel-pin-toggle button {
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.75rem;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      padding: 8px 10px;
      min-width: 36px;
      height: 32px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .panel-pin-toggle button.is-active {
      background: rgba(255, 206, 92, 0.16);
      color: #fff;
      box-shadow: inset 0 0 0 1px rgba(255, 206, 92, 0.32);
    }

    .panel-dock-button--desktop {
      font-size: 0.78rem;
      letter-spacing: 0.8px;
      min-width: 38px;
      min-height: 38px;
    }

.panel-dock-button--square {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  line-height: 1;
  border-radius: 0;
  order: 4;
  background: transparent !important;(160deg, rgba(90, 150, 220, 0.14), rgba(30, 60, 110, 0.08));
}

.pin-slider {
  position: relative;
  flex: 1 1 260px;
  max-width: 360px;
  min-width: 220px;
  height: 48px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--dock-accent) 18%, transparent), rgba(255,255,255,0.02)),
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--dock-accent) 24%, rgba(255,255,255,0.12));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 10px 22px rgba(0,0,0,0.35);
  overflow: hidden;
}
.pin-slider__track {
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: transparent !important;(90deg,
    color-mix(in srgb, var(--dock-accent) 18%, rgba(255,255,255,0.05)),
    color-mix(in srgb, var(--dock-accent-strong, var(--dock-accent)) 20%, rgba(255,255,255,0.1)));
}
.pin-slider__markers {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: auto;
  color: color-mix(in srgb, var(--dock-text) 70%, rgba(255,255,255,0.65));
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.pin-marker {
  opacity: 0.65;
  transition: opacity 0.15s ease;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--dock-accent) 55%, rgba(255, 255, 255, 0.35));
  background: radial-gradient(circle, color-mix(in srgb, var(--dock-accent) 22%, rgba(255,255,255,0.08)), rgba(255,255,255,0.02));
  cursor: pointer;
  padding: 0;
  border-width: 1px;
  appearance: none;
  -webkit-appearance: none;
  background-clip: padding-box;
}
.pin-slider[data-active="left"] .pin-marker--left,
.pin-slider[data-active="float"] .pin-marker--center,
.pin-slider[data-active="right"] .pin-marker--right {
  opacity: 1;
  box-shadow: 0 0 14px color-mix(in srgb, var(--dock-accent) 28%, transparent);
}
.pin-slider__thumb {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), color-mix(in srgb, var(--dock-accent-strong, var(--dock-accent)) 48%, transparent)),
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--dock-accent) 38%, rgba(255,140,120,0.08)), rgba(255,140,120,0.05));
  box-shadow:
    0 0 14px color-mix(in srgb, var(--dock-accent) 35%, transparent),
    0 8px 16px rgba(0, 0, 0, 0.35),
    inset 0 0 10px rgba(255,255,255,0.4);
  transition: transform 0.2s ease, left 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
  user-select: none;
  touch-action: manipulation;
}
.pin-marker:focus-visible {
  outline: 2px solid rgba(255, 206, 92, 0.8);
  outline-offset: 2px;
}

/* Solar Gate-inspired dock styling for the main control strip */
.membrane-dock-control-panel.control-pill {
  --dock-accent: #f2c86b;
  --dock-accent-strong: #ffe7a6;
  --dock-surface: rgba(22, 14, 36, 0.94);
  --dock-surface-secondary: rgba(30, 16, 52, 0.9);
  --dock-rim: rgba(255, 235, 198, 0.24);
  --dock-text: #f7f1ff;
  padding: 12px 16px;
  gap: 12px;
  background:
    linear-gradient(165deg, var(--dock-surface), var(--dock-surface-secondary)),
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--dock-accent) 32%, transparent), transparent 58%),
    radial-gradient(circle at 82% 62%, color-mix(in srgb, var(--dock-accent-strong) 26%, transparent), transparent 52%);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.46),
    0 0 26px color-mix(in srgb, var(--dock-accent) 18%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -12px 24px rgba(0, 0, 0, 0.28);
}
.membrane-dock-control-panel.control-pill::after {
  border-radius: 16px;
  inset: 8px;
  background:
    radial-gradient(circle at 52% 46%, color-mix(in srgb, var(--dock-accent-strong) 34%, transparent), transparent 64%),
    radial-gradient(circle at 24% 32%, rgba(255, 255, 255, 0.08), transparent 52%);
}
.membrane-dock-control-panel.control-pill .panel-dock-button {
  min-width: 42px;
  min-height: 40px;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--dock-accent) 48%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(165deg, rgba(60, 44, 92, 0.65), rgba(24, 16, 44, 0.7)),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
  color: color-mix(in srgb, var(--dock-text) 82%, rgba(255, 255, 255, 0.85));
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.membrane-dock-control-panel.control-pill .panel-dock-button:hover {
  background:
    linear-gradient(165deg, rgba(92, 72, 118, 0.8), rgba(34, 22, 60, 0.78));
  border-color: color-mix(in srgb, var(--dock-accent) 72%, #ffe7a6);
}
.membrane-dock-control-panel.control-pill .panel-dock-button--square {
  width: 46px;
  height: 38px;
  border-radius: 11px;
  border-style: dashed;
}
.membrane-dock-control-panel.control-pill .panel-dock-button--desk {
  min-width: 55px;
  min-height: 35px;
  padding-inline: 4px;
  background:
    linear-gradient(145deg, rgba(255, 214, 143, 0.14), rgba(120, 90, 200, 0.12)),
    linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08));
  color: color-mix(in srgb, var(--dock-text) 90%, #fdf2d0);
  border-color: color-mix(in srgb, var(--dock-accent) 54%, rgba(255, 255, 255, 0.18));
  border-style: dashed;
  border-radius: 0;
  font-size: 0.9rem;
}
.membrane-dock-control-panel.control-pill .panel-dock-button--circleMode {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-width: 1.5px;
  border-style: dashed;
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(135deg, rgba(255, 214, 143, 0.18), rgba(120, 90, 200, 0.12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.membrane-dock-control-panel.control-pill .pin-slider {
  height: 38px;
  min-width: 110px;
  max-width: 180px;
  background:
    linear-gradient(135deg, rgba(255, 215, 140, 0.14), rgba(255, 235, 196, 0.1)),
    linear-gradient(180deg, rgba(40, 26, 52, 0.7), rgba(28, 18, 40, 0.82));
  border: 1px dashed color-mix(in srgb, var(--dock-accent) 48%, rgba(255, 255, 255, 0.16));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 14px rgba(0, 0, 0, 0.28);
}
.membrane-dock-control-panel.control-pill .pin-slider__track {
  inset: 4px;
  background: transparent !important;(90deg,
    color-mix(in srgb, var(--dock-accent) 42%, rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--dock-accent-strong) 46%, rgba(255, 255, 255, 0.14)));
}
.membrane-dock-control-panel.control-pill .pin-slider__markers {
  padding: 0 4px;
}
.membrane-dock-control-panel.control-pill .pin-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--dock-accent) 60%, rgba(255, 255, 255, 0.35));
  background: radial-gradient(circle, color-mix(in srgb, var(--dock-accent) 38%, rgba(255, 255, 255, 0.12)), rgba(255, 255, 255, 0.03));
}
.membrane-dock-control-panel.control-pill .pin-slider__thumb {
  width: 22px;
  height: 22px;
  background:
    radial-gradient(circle at 30% 32%, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--dock-accent-strong) 42%, transparent)),
    radial-gradient(circle at 58% 70%, color-mix(in srgb, var(--dock-accent) 34%, rgba(60, 28, 80, 0.16)), rgba(26, 18, 38, 0.22));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--dock-accent) 30%, transparent),
    0 6px 12px rgba(0, 0, 0, 0.26),
    inset 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Gradient picker */
.bg-gradient-picker {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 143, 0.2), rgba(10, 6, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: crosshair;
}
.bg-gradient-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 214, 143, 0.5));
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 10px rgba(255, 214, 143, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.bg-gradient-target {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 143, 0.08), transparent 60%);
  pointer-events: none;
}

.bg-gradient-rail {
  position: relative;
  width: 100%;
  height: 46px;
  border-radius: 999px;
  background: transparent !important;(90deg, rgba(255, 214, 143, 0.65), rgba(120, 90, 200, 0.4));
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.4),
    0 6px 14px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  cursor: pointer;
}
.bg-gradient-rail__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 143, 0.22), transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.bg-gradient-rail__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 214, 143, 0.6)),
    radial-gradient(circle at 70% 70%, rgba(120, 90, 200, 0.35), transparent 65%);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 12px rgba(255, 214, 143, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.panel-dock-button--circleMode {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  border-radius: 50%;
  padding: 0;
  border: 1px dashed color-mix(in srgb, var(--dock-accent) 40%, rgba(255, 255, 255, 0.35));
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(135deg, rgba(255, 214, 143, 0.18), rgba(120, 90, 200, 0.12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
}
.panel-dock-button--circleMode::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  opacity: 0.85;
}

.panel-dock-button--desk {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  border-radius: 12px;
  font-size: 0.95rem;
  letter-spacing: 0.6px;
  border: 1px dashed color-mix(in srgb, var(--dock-accent) 36%, rgba(255, 255, 255, 0.28));
  background:
    linear-gradient(145deg, rgba(255, 214, 143, 0.14), rgba(120, 90, 200, 0.12)),
    linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08));
  color: var(--dock-text);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.panel-dock-button--desk:hover,
.panel-dock-button--circleMode:hover {
  border-color: rgba(255, 206, 92, 0.85);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 -8px 16px rgba(0,0,0,0.28);
}

.sidebar-edge-pill {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 72px;
  border-radius: 12px;
  background: transparent !important;(180deg, rgba(10,12,22,0.85), rgba(10,12,22,0.6));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: 0.8;
}
.sidebar-edge-pill:hover { opacity: 1; }
.sidebar-edge-pill svg { width: 14px; height: 14px; fill: none; stroke: rgba(255,255,255,0.85); stroke-width: 2; }
.sidebar-edge-pill--left { left: 6px; }
.sidebar-edge-pill--right { right: 6px; transform: translateY(-50%) scaleX(-1); }
.sidebar-edge-pill--left.is-collapsed { transform: translateY(-50%) scaleX(-1); }
.sidebar-edge-pill--right.is-collapsed { transform: translateY(-50%) scaleX(1); }

.sidebar .sidebar-edge-pill,



.sidebar .sidebar-edge-pill.sidebar-edge-pill--left { right: -26px; left: auto; transform: translateY(-50%); }
.sidebar .sidebar-edge-pill.sidebar-edge-pill--right { left: -26px; right: auto; transform: translateY(-50%) scaleX(-1); }

#membraneRestoreButton {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

    .panel-dock-button--desk-icon {
      width: 38px;
      height: 38px;
      padding: 0 !important;
      font-size: 0.88rem;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      min-width: 38px;
      min-height: 38px;
    }

    .panel-dock-button--delete {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.35);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
      position: relative;
      overflow: hidden;
    }

    .panel-dock-button--delete::after {
      content: '⏻';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 200, 200, 0.9);
      font-size: 0.95rem;
      pointer-events: none;
    }

.membrane-panel .panel-dock-button--delete {
  color: rgba(255, 120, 120, 0.9);
}

.membrane-panel .panel-dock-button--delete:hover {
  border-color: rgba(255, 120, 120, 0.8);
  color: #fff;
}

.membrane-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  cursor: default;
  z-index: 6;
  transition: opacity 0.15s ease;
}

.membrane-panel:hover .membrane-resize-handle {
  opacity: 0.35;
}

.membrane-resize-handle:hover {
  opacity: 0.8;
}

.membrane-resize-handle--se { right: 2px; bottom: 2px; cursor: se-resize; }
.membrane-resize-handle--sw { left: 2px; bottom: 2px; cursor: sw-resize; }
.membrane-resize-handle--ne { right: 2px; top: 2px; cursor: ne-resize; }
.membrane-resize-handle--nw { left: 2px; top: 2px; cursor: nw-resize; }
.membrane-resize-handle--e  { right: 2px; top: 50%; transform: translateY(-50%); cursor: ew-resize; display: none !important; }
.membrane-resize-handle--w  { left: 2px; top: 50%; transform: translateY(-50%); cursor: ew-resize; display: none !important; }
.membrane-resize-handle--s  { left: 50%; bottom: 2px; transform: translateX(-50%); cursor: ns-resize; }
.membrane-resize-handle--n  { left: 50%; top: 2px; transform: translateX(-50%); cursor: ns-resize; }

.membrane-panel .panel-dock-button--circle {
  font-size: 0.75rem;
  padding: 4px 10px;
}

.membrane-panel .panel-dock-button--circle.is-active {
  border-color: var(--dock-accent);
  background: color-mix(in srgb, var(--dock-accent) 24%, rgba(255, 255, 255, 0.12));
}

.membrane-panel::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 22px;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none;
}

.membrane-panel {
  /* Sub-membrane look: deeper blue tint (less bright, more blue). */
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 140, 255, 0.20), transparent 64%),
    radial-gradient(circle at 82% 22%, rgba(0, 210, 255, 0.11), transparent 66%),
    radial-gradient(circle at 52% 96%, rgba(60, 90, 255, 0.12), transparent 60%),
    linear-gradient(165deg, rgba(6, 14, 40, 0.82), rgba(10, 6, 22, 0.74));
  border: 1px solid rgba(125, 214, 255, 0.26);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: auto;
  resize: none;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  padding-top: 44px;
}

.bundle-panel {
  padding-top: 60px;
}

.desk-panel {
  max-width: 640px;
  min-width: 360px;
  background: rgba(10, 8, 20, 0.72);
}

.bundle-content {
  position: relative;
  display: block;
}

.membrane-wave-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  border-radius: inherit;
  opacity: 0.9;
}

.bundle-tabs {
  position: absolute;
  top: 10px;
  left: 14px;
  right: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 6;
}

.bundle-tab {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bundle-tab.is-active {
  border-color: rgba(255, 206, 92, 0.65);
  background: transparent !important;(145deg, rgba(255, 206, 92, 0.28), rgba(255, 255, 255, 0.08));
  color: #fff;
}

.desk-panel .bundle-tabs {
  gap: 8px;
}

.desk-panel .bundle-tab {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.bundle-empty {
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

    .panel-dock-hint {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      align-items: center;
      margin: 6px 0 10px;
      padding: 8px 10px;
      font-size: 0.7rem;
      line-height: 1.3;
      color: rgba(255, 255, 255, 0.78);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 12px;
      pointer-events: none;
    }

    .panel-dock-hint strong {
      font-size: 0.72rem;
      letter-spacing: 1px;
    }

.panel--floating.membrane-panel {
  min-height: 240px;
  min-width: 260px;
  width: min(680px, 90vw);
  max-width: min(520px, 90vw);
  max-height: 82vh;
}

.membrane-panel::-webkit-scrollbar {
  display: none;
}

.membrane-panel {
  scrollbar-width: none;
}

.membrane-panel--locked {
  opacity: 0.55;
  filter: grayscale(0.35);
  pointer-events: none;
  position: relative;
}

.membrane-panel--locked::after {
  content: 'Membrane locked · Solar Gate unlock required';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 18px;
  background: rgba(10, 0, 28, 0.6);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.membrane-panel--custom {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.35);
}

body[data-symmetry-renorm="true"] .membrane-panel {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.2);
}

    .membrane-panel--desktop {
      overflow: hidden;
    }

    .membrane-resize-handle {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: transparent;
      opacity: 0;
      z-index: 6;
      transition: opacity 0.15s ease;
    }

    .membrane-panel:hover .membrane-resize-handle {
      opacity: 0.35;
    }

    .membrane-resize-handle:hover {
      opacity: 0.8;
    }

    .membrane-resize-handle--se { right: 2px; bottom: 2px; cursor: se-resize; }
    .membrane-resize-handle--sw { left: 2px; bottom: 2px; cursor: sw-resize; }
    .membrane-resize-handle--ne { right: 2px; top: 2px; cursor: ne-resize; }
    .membrane-resize-handle--nw { left: 2px; top: 2px; cursor: nw-resize; }
    .membrane-resize-handle--e  { right: 2px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
    .membrane-resize-handle--w  { left: 2px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
    .membrane-resize-handle--s  { left: 50%; bottom: 2px; transform: translateX(-50%); cursor: ns-resize; }
    .membrane-resize-handle--n  { left: 50%; top: 2px; transform: translateX(-50%); cursor: ns-resize; }

    .membrane-panel--circular {
      border-radius: 999px;
      aspect-ratio: 1 / 1;
      max-width: 420px;
      min-width: 260px;
      min-height: 260px;
      padding: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .membrane-panel--circular > :not(.membrane-dock-control-panel):not(.membrane-circular-overlay) {
      opacity: 0;
      pointer-events: none;
    }

    .membrane-panel--circular .membrane-dock-control-panel {
      top: 6px;
      right: 10px;
    }

    .membrane-circular-overlay {
      position: absolute;
      inset: 32px;
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.28);
      pointer-events: none;
      z-index: 4;
    }

    .membrane-circular-node {
      position: absolute;
      width: 96px;
      height: 96px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 0.7rem;
      line-height: 1.3;
      padding: 12px;
      color: rgba(255, 255, 255, 0.85);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
    }

    .membrane-circular-node::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 26px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mean-field__grid,
    .transport-panel__grid,
    .thermo-panel__grid,
    .graph-panel__grid,
    .grail-panel__grid,
    .kairo-panel__grid,
    .manifold-panel__grid,
    .predictive-panel__grid,
    .control-panel__grid,
    .spectral-panel__grid,
    .symmetry-panel__grid,
    .circumpoint-panel__grid,
    .rl-panel__grid,
    .quantum-panel__grid,
    .wavelet-panel__grid,
    .trajectory-panel__grid,
    .complexity-panel__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 12px;
    }

    .mean-field__metric,
    .transport-panel__metric,
    .thermo-panel__metric,
    .graph-panel__metric,
    .grail-panel__metric,
    .kairo-panel__metric,
    .manifold-panel__metric,
    .predictive-panel__metric,
    .control-panel__metric,
    .spectral-panel__metric,
    .symmetry-panel__metric,
    .circumpoint-panel__metric,
    .rl-panel__metric,
    .quantum-panel__metric,
    .wavelet-panel__metric {
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: rgba(255, 255, 255, 0.03);
      font-family: 'Space Mono', monospace;
      letter-spacing: 0.05em;
      color: rgba(220, 235, 255, 0.9);
    }

    .mean-field__metric strong,
    .transport-panel__metric strong,
    .thermo-panel__metric strong,
    .graph-panel__metric strong,
    .grail-panel__metric strong,
    .kairo-panel__metric strong,
    .manifold-panel__metric strong,
    .predictive-panel__metric strong,
    .control-panel__metric strong,
    .spectral-panel__metric strong,
    .symmetry-panel__metric strong,
    .rl-panel__metric strong,
    .quantum-panel__metric strong,
    .wavelet-panel__metric strong,
    .trajectory-panel__metric strong,
    .complexity-panel__metric strong {
      font-size: 1.12rem;
      color: #fff;
    }

    .mean-field__controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 12px;
    }

    .mean-field__controls .field {
      gap: 6px;
    }

    .mean-field__controls output,
    #thermoTemperatureDisplay,
    #meanFieldDriveValue,
    #meanFieldCouplingValue,
    #meanFieldInhibitionValue,
    #graphRewireValue,
    #predictiveGainValue,
    #predictivePrecisionDisplay,
    #controlTargetValue,
    #controlStimGainValue,
    #spectralWindowValue,
    #rlRewardBiasValue,
    #rlExplorationDisplay,
    #quantumDecoherenceDisplay,
    #quantumEntanglementDisplay,
    #waveletScaleValue {
      display: block;
      text-align: right;
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.85);
    }

    .quantum-overlay {
      position: absolute;
      inset: 10% 15%;
      border: 1px dashed rgba(148, 236, 255, 0.4);
      pointer-events: none;
      z-index: 20;
      mix-blend-mode: screen;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .quantum-overlay.is-active {
      opacity: 0.8;
    }

    .quantum-overlay__arc {
      position: absolute;
      border-radius: 999px;
      border: 1px solid rgba(148, 236, 255, 0.5);
      animation: quantumPulse 4s linear infinite;
    }

    .quantum-overlay__arc--inner {
      inset: 10%;
      animation-delay: 0s;
    }

    .quantum-overlay__arc--outer {
      inset: 0;
      animation-delay: 1s;
    }

    @keyframes quantumPulse {
      0% { transform: scale(0.9); opacity: 0.2; }
      50% { transform: scale(1.05); opacity: 0.8; }
      100% { transform: scale(0.9); opacity: 0.2; }
    }

    .transport-panel__direction {
      margin: 0;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.7);
      font-family: 'Space Mono', monospace;
    }

    .membrane-desktop {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 360px;
      border: 1px dashed rgba(255, 255, 255, 0.25);
      border-radius: 22px;
      background: rgba(0, 0, 0, 0.18);
      overflow: hidden;
    }

    .membrane-desktop-window {
      position: absolute;
      min-width: 240px;
      min-height: 160px;
      width: 320px;
      height: 220px;
      background: rgba(12, 4, 28, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      box-shadow: 0 18px 35px rgba(6, 0, 30, 0.45);
      overflow: hidden;
    }

    .membrane-desktop-window__header {
      padding: 8px 14px;
      font-size: 0.78rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.82);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      cursor: grab;
      background: rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .membrane-desktop-window__body {
      padding: 12px;
      overflow: auto;
      height: calc(100% - 38px);
    }

    .membrane-desktop-window__handle {
      position: absolute;
      background: transparent;
      z-index: 5;
      cursor: inherit;
      transition: background 0.1s ease;
    }

    .membrane-desktop-window__handle--e,
    .membrane-desktop-window__handle--w {
      top: 0;
      bottom: 0;
      width: 10px;
      cursor: inherit;
    }

    .membrane-desktop-window__handle--e {
      right: -3px;
    }

    .membrane-desktop-window__handle--w {
      left: -3px;
    }

    .membrane-desktop-window__handle--n,
    .membrane-desktop-window__handle--s {
      left: 0;
      right: 0;
      height: 10px;
      cursor: inherit;
    }

    .membrane-desktop-window--icon {
      width: 150px;
      height: 150px;
      min-width: 90px;
      min-height: 90px;
      border-radius: 22px;
      text-align: center;
    }

    .membrane-desktop-window--icon .membrane-desktop-window__header {
      width: 100%;
      height: 100%;
      padding: 12px;
      border-bottom: none;
      justify-content: center;
      text-align: center;
    }

    .membrane-desktop-window--icon .membrane-desktop-window__body {
      display: none;
    }

    .membrane-desktop-window__handle--n {
      top: -3px;
    }

    .membrane-desktop-window__handle--s {
      bottom: -3px;
    }

    .membrane-custom__header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .membrane-custom__title {
      flex: 1;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      padding: 8px 12px;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      font-family: 'Space Mono', monospace;
      letter-spacing: 1px;
    }

    .membrane-custom__title:focus {
      outline: none;
      border-color: rgba(255, 206, 92, 0.8);
      box-shadow: 0 0 8px rgba(255, 206, 92, 0.35);
    }

    .membrane-custom__actions {
      display: flex;
      gap: 8px;
    }

    .membrane-custom__remove {
      font-size: 0.75rem;
      padding: 4px 10px;
    }

    .membrane-custom__notes {
      width: 100%;
      min-height: 90px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: rgba(0, 0, 0, 0.2);
      color: rgba(255, 255, 255, 0.9);
      padding: 12px;
      font-family: 'Space Mono', monospace;
      font-size: 0.9rem;
      resize: vertical;
    }

    .membrane-custom__notes:focus {
      outline: none;
      border-color: rgba(255, 206, 92, 0.8);
      box-shadow: 0 0 12px rgba(255, 206, 92, 0.25);
    }

    .attention-tagline {
      position: fixed;
      top: 8vh;
      left: 50%;
      transform: translateX(-50%);
      display: grid;
      gap: 4px;
      text-align: center;
      pointer-events: none;
      z-index: 52;
      mix-blend-mode: normal;
      padding: 8px 16px;
      border-radius: 12px;
      background: radial-gradient(circle at 50% 40%, rgba(140, 220, 255, 0.08), rgba(0, 0, 0, 0));
      opacity: 1;
      transition: opacity 0.22s ease, transform 0.26s ease;
    }

    body.membrane-directory-open .attention-tagline {
      opacity: 0;
      transform: translateX(-50%) translateY(-12px);
    }

    .attention-tagline__main {
      font-size: clamp(1rem, 2vw, 1.35rem);
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: #e8ecf6;
      text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(180, 215, 255, 0.22);
    }

    .attention-tagline__sub {
      font-size: clamp(0.8rem, 1.4vw, 1rem);
      letter-spacing: 0.08em;
      color: rgba(233, 236, 246, 0.9);
      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(180, 215, 255, 0.18);
      transition: opacity 0.24s ease, transform 0.28s ease;
    }

    .attention-tagline__golden {
      width: min(62vw, 520px);
      height: var(--meta-golden-width, 1px);
      margin: 6px auto 0;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 204, 120, 0.08) 38.2%,
        rgba(255, 228, 170, 0.9) 61.8%,
        rgba(255, 204, 120, 0.08) 100%
      );
      background-size: 220% 100%;
      opacity: 0;
      box-shadow: 0 0 18px rgba(255, 206, 110, var(--meta-golden-glow, 0));
      transition: opacity 0.35s ease, height 0.35s ease;
      animation: meta-golden-drift var(--meta-golden-speed, 12s) ease-in-out infinite;
    }

    .attention-tagline__meta {
      font-size: clamp(0.7rem, 1.2vw, 0.95rem);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255, 228, 170, 0.92);
      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(255, 206, 110, 0.35);
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .attention-tagline.is-meta-golden .attention-tagline__golden {
      opacity: var(--meta-golden-line-opacity, 0.75);
    }

    .attention-tagline.is-meta-golden .attention-tagline__meta {
      opacity: var(--meta-golden-opacity, 0.85);
      transform: translateY(0);
    }

    .attention-tagline__main {
      transition: opacity 0.36s ease, transform 0.42s ease, letter-spacing 0.38s ease;
    }

    .attention-tagline.is-rolling .attention-tagline__main,
    .attention-tagline.is-rolling .attention-tagline__sub {
      opacity: 0;
      transform: translateY(-14px);
    }

    .quantum-cloud-lines {
      position: fixed;
      top: calc(8vh + 92px);
      left: 50%;
      transform: translateX(-50%);
      width: min(76vw, 920px);
      display: grid;
      gap: 8px;
      text-align: center;
      pointer-events: none;
      z-index: 51;
      opacity: var(--cloud-intensity, 0.85);
      filter: drop-shadow(0 0 16px rgba(120, 188, 255, 0.18));
    }

    .quantum-cloud-lines[hidden] {
      display: none !important;
    }

    .quantum-cloud-lines__line {
      font-size: clamp(0.7rem, 1.3vw, 0.98rem);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: hsla(var(--line-hue, 42), 72%, 80%, 0.92);
      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(150, 210, 255, 0.25);
      transform: translateX(var(--line-shift, 0px));
      animation: cloud-line-drift var(--cloud-speed, 10s) ease-in-out infinite;
      animation-delay: var(--line-delay, 0s);
    }

    @keyframes meta-golden-drift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes cloud-line-drift {
      0% {
        transform: translateX(var(--line-shift, 0px));
      }
      50% {
        transform: translateX(calc(var(--line-shift, 0px) * -1));
      }
      100% {
        transform: translateX(var(--line-shift, 0px));
      }
    }


    .fractal-orient {
      --fractal-depth: 0.35;
      --fractal-azimuth: 0deg;
      display: none !important;
      position: fixed;
      top: 50%;
      left: 50%;
      width: min(360px, 38vw);
      aspect-ratio: 1 / 1;
      pointer-events: none;
      transform:
        translate(-50%, -50%)
        scale(calc(0.8 + var(--fractal-depth) * 0.4))
        rotate(var(--fractal-azimuth));
      filter: drop-shadow(0 0 24px rgba(140, 220, 255, 0.22));
      z-index: 54;
      opacity: calc(0.4 + var(--fractal-depth) * 0.6);
    }

    .fractal-orient__halo {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        repeating-radial-gradient(circle at 50% 50%,
          rgba(180, 230, 255, 0.08) 0px,
          rgba(180, 230, 255, 0.08) 4px,
          rgba(255, 255, 255, 0) 8px,
          rgba(255, 255, 255, 0) 12px),
        conic-gradient(
          from 0deg,
          rgba(200, 240, 255, 0.22),
          rgba(120, 180, 255, 0.08),
          rgba(200, 240, 255, 0.22));
      mix-blend-mode: screen;
      animation: fractalSpin 22s linear infinite;
    }

    .fractal-orient__core {
      position: absolute;
      inset: 20%;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22), rgba(100, 160, 255, 0.08));
      box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(120, 200, 255, 0.3);
    }

    .fractal-orient__label {
      position: absolute;
      bottom: -44px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(220, 240, 255, 0.85);
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.35);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
      pointer-events: none;
    }

    @keyframes fractalSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .core-radial-menu {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 70;
      display: grid;
      place-items: center;
    }

    .core-radial-menu[hidden] {
      display: none !important;
    }

    .core-radial-menu__inner {
      position: absolute;
      width: 260px;
      height: 260px;
      pointer-events: auto;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, rgba(120, 200, 255, 0.08), rgba(0, 0, 0, 0));
      display: block;
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.2s ease, transform 0.22s ease;
    }

    .core-radial-menu.is-open .core-radial-menu__inner {
      opacity: 1;
      transform: scale(1);
    }

    .core-radial-item {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 54px;
      height: 54px;
      margin: -27px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
      color: #e7f6ff;
      display: grid;
      place-items: center;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transform:
        rotate(calc(var(--angle) * 1deg))
        translate(110px)
        rotate(calc(var(--angle) * -1deg));
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .core-radial-menu.is-open .core-radial-item {
      transform:
        rotate(calc(var(--angle) * 1deg))
        translate(118px)
        rotate(calc(var(--angle) * -1deg));
    }

    .core-radial-item:hover {
      border-color: rgba(255, 206, 92, 0.85);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    }

    .sun-seed-menu {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 90;
    }

    .sun-seed-menu[hidden] {
      display: none !important;
    }

    .sun-seed-menu__inner {
      position: absolute;
      width: 360px;
      height: 360px;
      pointer-events: auto;
      transform: translate(-50%, -50%) scale(0.92);
      opacity: 0;
      transition: opacity 0.24s ease, transform 0.28s ease;
    }

    .sun-seed-menu.is-open .sun-seed-menu__inner {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .sun-seed-menu__flower {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--seed-color, #ffd45c) 28%, transparent), transparent 62%),
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--seed-color, #ffd45c) 24%, transparent), transparent 68%),
        radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--seed-color, #ffd45c) 24%, transparent), transparent 68%),
        radial-gradient(circle at 82% 50%, color-mix(in srgb, var(--seed-color, #ffd45c) 24%, transparent), transparent 68%),
        radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--seed-color, #ffd45c) 24%, transparent), transparent 68%),
        radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.16), transparent 56%),
        radial-gradient(circle at 72% 72%, rgba(120, 180, 255, 0.16), transparent 58%);
      filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
    }

    .sun-seed-menu__flower::before,
    .sun-seed-menu__flower::after {
      content: "";
      position: absolute;
      inset: 16%;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 0 28px rgba(255, 255, 255, 0.08);
    }

    .sun-seed-menu__flower::after {
      inset: 34%;
      border-color: color-mix(in srgb, var(--seed-color, #ffd45c) 50%, rgba(255, 255, 255, 0.1));
      box-shadow: 0 0 30px color-mix(in srgb, var(--seed-color, #ffd45c) 35%, transparent);
    }

    .sun-seed-menu__center {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 132px;
      height: 132px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.12) 50%, transparent 70%),
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--seed-color, #ffd45c) 38%, transparent), rgba(6, 8, 20, 0.75));
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
    }

    .sun-seed-menu__title {
      font-family: "Bangers", sans-serif;
      font-size: 1rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff5e0;
    }

    .sun-seed-menu__subtitle {
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(220, 235, 255, 0.7);
      margin-top: 4px;
    }

    .sun-seed-menu__page {
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
      margin-top: 6px;
    }

    .sun-seed-menu__slots {
      position: absolute;
      inset: 0;
    }

    .sun-seed-menu__slot {
      position: absolute;
      left: 50%;
      top: 50%;
      min-width: 86px;
      max-width: 126px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), rgba(18, 12, 32, 0.72) 62%),
        radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--seed-color, #ffd45c) 28%, transparent), transparent 65%);
      color: #f8f4ff;
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 6px;
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .sun-seed-menu__slot:hover {
      border-color: color-mix(in srgb, var(--seed-color, #ffd45c) 70%, rgba(255, 255, 255, 0.18));
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
    }

    .sun-seed-menu__slot--nav {
      min-width: 74px;
      background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.4), rgba(18, 10, 30, 0.8) 65%),
        radial-gradient(circle at 70% 70%, rgba(120, 210, 255, 0.3), transparent 70%);
    }

    .sun-seed-menu__slot[disabled] {
      opacity: 0.35;
      cursor: default;
      pointer-events: none;
    }

    .sun-seed-menu__glyph {
      font-size: 0.9rem;
      color: #d8ecff;
    }

    .sun-seed-menu__label {
      display: inline-block;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (max-width: 720px) {
      .sun-seed-menu__inner {
        width: 280px;
        height: 280px;
      }

      .sun-seed-menu__center {
        width: 108px;
        height: 108px;
      }

      .sun-seed-menu__slot {
        min-width: 72px;
        max-width: 100px;
        font-size: 0.6rem;
      }
    }

    @media (max-width: 720px) {
      .attention-tagline {
        top: 12vh;
        padding: 6px 10px;
      }
      .attention-tagline__main {
        letter-spacing: 0.16em;
      }
      .attention-tagline__golden {
        width: min(72vw, 420px);
      }
      .quantum-cloud-lines {
        top: calc(12vh + 84px);
        width: min(88vw, 520px);
      }
    }

    .membrane-builder__list {
      list-style: disc;
      margin: 0 0 14px 18px;
      padding: 0;
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.92rem;
      line-height: 1.4;
    }

    .membrane-builder__action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .donuscope-builder {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .donuscope-builder__sidebar {
      flex: 0 0 220px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 14px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.18);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .donuscope-builder__sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.82rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.75);
    }

    .donuscope-builder__torus-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .donuscope-builder__torus-chip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 8px 10px;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease;
      gap: 10px;
    }

    .donuscope-builder__torus-chip span {
      flex: 1;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.88);
    }

    .donuscope-builder__torus-chip button {
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      font-size: 0.78rem;
      padding: 0;
    }

    .donuscope-builder__torus-chip.is-active {
      border-color: rgba(255, 206, 92, 0.8);
      background: rgba(255, 206, 92, 0.08);
    }

    .donuscope-builder__editor {
      flex: 1 1 280px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .donuscope-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .donuscope-section .control__label-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    .donuscope-section .control__hint {
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.55);
    }

    .donuscope-section .is-hidden {
      display: none;
    }

    .donuscope-builder__pair {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
    }

    .donuscope-builder__circles {
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 14px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .donuscope-builder__circles-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.75);
    }

    .donuscope-builder__circle-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .donuscope-builder__circle {
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: rgba(255, 255, 255, 0.02);
    }

    .donuscope-builder__circle-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 8px;
    }

    .donuscope-builder__circle-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .donuscope-builder__circle-meta button {
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      font-size: 0.78rem;
    }

    .donuscope-builder__actions {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }

    .donuscope-builder__empty {
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.55);
      text-align: center;
      padding: 20px 0;
    }

    .gyro-scope-panel .panel__title-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .gyro-scope-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .gyro-scope-tab {
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.86);
      font-size: 0.78rem;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .gyro-scope-tab.is-active {
      border-color: rgba(255, 206, 92, 0.7);
      background: rgba(255, 206, 92, 0.1);
      color: #fff;
    }

    .gyro-scope-pane[hidden] {
      display: none;
    }

.membrane-directory {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.membrane-directory-panel .membrane-directory__content {
  max-height: none;
  overflow-y: visible;
  padding-right: 8px;
}
#membraneDirectoryPanel {
  min-width: 320px;
  min-height: 440px;
}

.membrane-tablet {
  position: relative;
  width: 100%;
  height: 200px;
  margin: 14px 0;
  border-radius: 18px;
  border: none !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
}

    .membrane-tablet::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--tablet-color), transparent 70%), color-mix(in srgb, var(--tablet-color), transparent 85%) 1px, transparent 1px, transparent 32px),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--tablet-color), transparent 70%), color-mix(in srgb, var(--tablet-color), transparent 85%) 1px, transparent 1px, transparent 32px);
      mix-blend-mode: screen;
      opacity: 0.55;
      animation: tabletGridScroll 20s linear infinite;
      pointer-events: none;
      filter: drop-shadow(0 0 12px color-mix(in srgb, var(--tablet-color), transparent 40%));
    }

    .membrane-tablet::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.15), transparent 40%),
                  radial-gradient(circle at 70% 65%, rgba(113, 250, 255, 0.2), transparent 45%);
      mix-blend-mode: screen;
      opacity: 0.6;
    }

    .membrane-tablet canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .membrane-tablet__glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), transparent 60%),
                  radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--tablet-color), transparent 45%), transparent 65%);
      mix-blend-mode: screen;
      opacity: 0.9;
      filter: blur(2px);
    }

    .membrane-tablet__customizer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      margin: 10px 0 18px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(0, 0, 0, 0.25);
      animation: tabletFade 0.3s ease;
    }

    @keyframes tabletFade {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes tabletGridScroll {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(-32px, -32px, 0); }
    }

.membrane-directory__actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0 12px;
}

.membrane-directory__toggles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.membrane-directory__toggles .toggle {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.8);
}

.membrane-directory__toggles .toggle__visual {
  border: 1px solid rgba(150, 200, 235, 0.6);
  background: linear-gradient(180deg, rgba(12, 22, 42, 0.85), rgba(6, 12, 28, 0.7)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 6px 14px rgba(6, 14, 32, 0.35);
}

.membrane-directory__toggles .toggle__visual::after {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(186, 210, 240, 0.9));
  box-shadow:
    0 0 10px rgba(128, 170, 240, 0.45),
    inset 0 0 4px rgba(255, 255, 255, 0.6);
}

.membrane-directory__toggles .toggle input:checked + .toggle__visual {
  border-color: rgba(255, 206, 92, 0.7);
  background: linear-gradient(180deg, rgba(42, 30, 16, 0.75), rgba(18, 12, 8, 0.7)) !important;
  box-shadow:
    0 0 16px rgba(255, 206, 92, 0.25),
    inset 0 0 0 1px rgba(255, 206, 92, 0.2);
}

.membrane-directory__toggles .toggle input:checked + .toggle__visual::after {
  background: radial-gradient(circle at 30% 30%, rgba(255, 246, 201, 0.98), rgba(255, 205, 110, 0.95));
  box-shadow:
    0 0 12px rgba(255, 206, 92, 0.55),
    inset 0 0 6px rgba(255, 255, 255, 0.7);
}



.membrane-directory__links-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  flex: 1 1 100%;
}

.membrane-directory__links-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: 'Bangers', 'Anton', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffe6b0;
  padding-left: 0;
  text-shadow: none;
  text-rendering: geometricPrecision;
}

.membrane-directory__links-title::before {
  content: none;
}

.membrane-directory__links-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 226, 154, 0.9), rgba(113, 250, 255, 0.12));
  box-shadow: 0 0 10px rgba(255, 206, 92, 0.35);
}

@supports (-webkit-background-clip: text) {
  .membrane-directory__links-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #ffe6b0;
  }
}

.membrane-directory__links {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.membrane-directory__links::-webkit-scrollbar {
  height: 0;
}

.membrane-directory__links .ghost-btn {
  border-style: solid;
  border-color: rgba(160, 220, 255, 0.45);
  background: rgba(18, 28, 48, 0.55);
  color: #e8f4ff;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(6, 10, 22, 0.35);
}

.membrane-directory__links .ghost-btn:hover {
  border-color: rgba(255, 226, 154, 0.75);
  background: rgba(40, 80, 140, 0.35);
  box-shadow: 0 8px 20px rgba(16, 40, 90, 0.35);
  transform: translateY(-1px);
}

.membrane-directory__links .ghost-btn:focus-visible {
  outline: 2px solid rgba(255, 226, 154, 0.65);
  outline-offset: 2px;
}

.membrane-directory__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 18px;
  border-radius: 16px;
  border: 1.5px solid rgba(170, 220, 255, 0.5);
  outline: 1px solid rgba(255, 255, 255, 0.12);
  outline-offset: -3px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.16)),
    linear-gradient(145deg, rgba(12, 16, 36, 0.82), rgba(8, 10, 26, 0.88));
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 12px rgba(0, 0, 0, 0.22);
  gap: 14px;
  flex-wrap: wrap;
}


    .membrane-directory__meta {
      display: flex;
      flex-direction: column;
      min-width: 200px;
    }

    .membrane-directory__name {
      font-family: 'Bangers', 'Anton', 'Inter', sans-serif;
      font-weight: 800;
      letter-spacing: 1.2px;
      font-size: 1.05rem;
      color: #fffbff;
      text-shadow: 0 0 10px rgba(255, 0, 153, 0.7), 0 0 14px rgba(0, 255, 255, 0.5);
    }

    .membrane-directory__status {
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 0.4px;
      text-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
    }

.membrane-navigator {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: grid;
      place-items: center;
      z-index: 55;
      mix-blend-mode: screen;
    }

    .membrane-navigator__ring {
      position: relative;
      width: min(880px, 82vw);
      height: min(880px, 82vw);
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.22);
      opacity: 0.75;
      backdrop-filter: blur(2px);
      pointer-events: none;
    }

    .membrane-navigator__ring .navigator-slot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: 0 -50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 200px;
      opacity: 0.75;
      cursor: pointer;
      pointer-events: auto;
      transform: rotate(var(--slot-angle, 0deg))
        translate(-50%, calc(-1 * var(--slot-radius, 320px)))
        rotate(calc(-1 * var(--slot-angle, 0deg)))
        scale(0.8);
      transition: opacity 0.25s ease, transform 0.28s ease, color 0.2s ease;
      animation: navigatorSlotSlide 0.9s cubic-bezier(0.25, 0.9, 0.24, 1.12) forwards;
      animation-delay: var(--slot-delay, 0s);
    }

    .membrane-navigator__ring .navigator-slot.is-active {
      opacity: 1;
      color: #fff;
      text-shadow: 0 0 18px rgba(255, 255, 255, 0.78);
      transform: rotate(var(--slot-angle, 0deg))
        translate(-50%, calc(-1 * var(--slot-radius, 320px)))
        rotate(calc(-1 * var(--slot-angle, 0deg)))
        scale(1.08);
    }

    .navigator-slot__dot {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 28%, #ffffff 0%, #ffe7ff 40%, rgba(255, 214, 255, 0.85) 68%, rgba(90, 40, 120, 0.25) 100%),
        radial-gradient(circle at 60% 70%, rgba(80, 180, 255, 0.35), transparent 60%);
      border: 2.5px solid rgba(255, 245, 255, 0.9);
      box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.38),
        0 0 36px rgba(255, 210, 255, 0.95),
        0 0 78px rgba(120, 255, 240, 0.7);
      opacity: 0.95;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }

    .navigator-slot.is-active .navigator-slot__dot {
      transform: scale(1.14);
      box-shadow:
        0 0 36px rgba(255, 220, 255, 1),
        0 0 78px rgba(113, 250, 255, 0.75);
      opacity: 1;
    }

    .membrane-navigator__ring .navigator-slot:hover .navigator-slot__dot {
      transform: scale(3.2);
      box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.45),
        0 0 44px rgba(255, 230, 255, 1),
        0 0 96px rgba(120, 255, 240, 0.85);
      opacity: 1;
      transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    }

    .membrane-navigator__ring .navigator-slot:hover .navigator-slot__label {
      color: #fff;
      text-shadow:
        0 0 14px rgba(0, 0, 0, 0.6),
        0 0 28px rgba(255, 255, 255, 0.75);
    }

    .navigator-slot__label {
      text-align: center;
      font-size: 0.9rem;
      letter-spacing: 1.2px;
      color: rgba(245, 245, 250, 0.94);
      text-shadow:
        0 0 10px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(255, 255, 255, 0.6);
      line-height: 1.25;
      text-transform: uppercase;
      font-weight: 700;
    }

    @keyframes navigatorSlotSlide {
      0% {
        opacity: 0;
        transform: rotate(var(--slot-angle, 0deg))
          translate(-50%, -60px)
          rotate(calc(-1 * var(--slot-angle, 0deg)))
          scale(0.5);
        filter: blur(3px);
      }
      100% {
        opacity: 0.9;
        transform: rotate(var(--slot-angle, 0deg))
          translate(-50%, calc(-1 * var(--slot-radius, 320px)))
          rotate(calc(-1 * var(--slot-angle, 0deg)))
          scale(0.95);
        filter: blur(0);
      }
    }

    .membrane-navigator__pointer {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0.1));
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.75);
      animation: navigatorPulse 1.6s ease-in-out infinite;
    }

    .membrane-navigator__label {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.82rem;
      letter-spacing: 1.4px;
      color: rgba(255, 255, 255, 0.85);
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.18);
    }

    @keyframes navigatorPulse {
      0% { transform: scale(0.94); opacity: 0.6; }
      50% { transform: scale(1.06); opacity: 1; }
      100% { transform: scale(0.94); opacity: 0.6; }
    }

    .membrane-directory__status.is-locked {
      color: rgba(255, 120, 120, 0.9);
    }

    .membrane-directory__actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .membrane-directory__actions button {
      font-size: 0.68rem;
      letter-spacing: 0.8px;
      padding: 4px 8px;
    }

    .membrane-directory__empty {
      text-align: center;
      padding: 12px;
      border-radius: 12px;
      border: 1px dashed rgba(255, 255, 255, 0.2);
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.75);
    }

    .crown-panel {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .crown-panel .panel__subtitle {
      margin: -4px 0 4px;
      font-size: 0.9rem;
      color: var(--text-sub);
    }

    .crown-status {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(0, 0, 0, 0.15);
    }

    .crown-status__badge {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
    }

    .crown-panel.is-connected .crown-status__badge {
      background: #8dff9f;
      box-shadow: 0 0 12px rgba(141, 255, 159, 0.7);
    }

    .crown-panel.is-mock .crown-status__badge {
      background: #ffde7c;
      box-shadow: 0 0 12px rgba(255, 222, 124, 0.6);
    }

    .crown-status__text {
      display: flex;
      flex-direction: column;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .crown-status__text strong {
      font-size: 0.95rem;
      letter-spacing: 1.2px;
    }

    .crown-fields {
      display: grid;
      gap: 10px;
    }

    .crown-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .crown-field input {
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 12px;
      padding: 10px 12px;
      background: rgba(0, 0, 0, 0.12);
      color: var(--text-main);
      font-family: 'Bangers', cursive;
      font-size: 0.95rem;
      letter-spacing: 1px;
    }

    .crown-field input:focus {
      outline: none;
      border-color: rgba(255, 206, 92, 0.8);
      box-shadow: 0 0 0 2px rgba(255, 206, 92, 0.15);
    }

    .password-field {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(0, 0, 0, 0.12);
    }

    .password-field input {
      border: none;
      background: transparent;
      padding: 10px 12px;
    }

    .password-field input:focus {
      border: none;
      outline: none;
      box-shadow: none;
    }

    .password-toggle {
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.7);
      font-size: 1.2rem;
      padding: 0 12px;
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .password-toggle:hover {
      color: rgba(255, 255, 255, 1);
    }

    .crown-actions {
      display: flex;
      gap: 10px;
    }

    .crown-actions .ghost-btn {
      flex: 1 1 0;
      text-align: center;
    }

    .ghost-btn--solid {
      background: rgba(255, 206, 92, 0.22);
      border: 1px solid rgba(255, 206, 92, 0.6);
    }

    .ghost-btn--solid:hover {
      background: rgba(255, 206, 92, 0.32);
      border-color: rgba(255, 206, 92, 0.9);
    }

    /* Custom membrane CTA: dashed outline without changing other ghost buttons */
    #addCustomMembraneBtn {
      border: 1.5px dashed rgba(255, 255, 255, 0.75) !important;
      border-style: dashed !important;
      background: rgba(255, 255, 255, 0.05) !important;
      color: #ffffff !important;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
      align-self: flex-start;
      margin-left: 18px;
      transform: translateX(0);
    }

#addCustomMembraneBtn:hover {
  border-color: rgba(255, 206, 92, 0.9) !important;
  background: rgba(255, 206, 92, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 206, 92, 0.28) !important;
}

    .crown-mock-btn {
      width: 100%;
    }

    .crown-panel .ghost-btn[disabled] {
      opacity: 0.4;
      cursor: progress;
    }

    .crown-hint {
      margin: 0;
      font-size: 0.75rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-sub);
    }

    .solar-gate {
      background: transparent !important;
      border: 1px solid var(--panel-border);
      border-radius: 20px;
      padding: 20px 20px 32px;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .solar-gate::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 18% 12%, rgba(255, 206, 92, 0.18), transparent 55%);
      pointer-events: none;
    }

    .solar-gate__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .solar-gate__title {
      font-size: 1.05rem;
      color: var(--accent);
      text-shadow: 0 0 12px rgba(255, 206, 92, 0.45);
    }

    .solar-gate__status {
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.75);
    }

    .solar-gate__status::before {
      content: attr(data-free-stacks);
      margin-right: 6px;
      font-size: 0.72rem;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: rgba(120, 215, 255, 0.8);
    }

    .solar-gate__status[data-free-stacks=""]::before {
      display: none;
    }

    .solar-gate__status::after {
      content: attr(data-next-dimension);
      margin-left: 6px;
      font-size: 0.72rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(255, 220, 150, 0.8);
    }

    .solar-gate__subtitle {
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: rgba(255, 255, 255, 0.72);
    }

    .solar-gate__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 180px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .solar-gate__list.is-empty {
      display: none;
    }

    .solar-gate__list.is-hidden {
      display: none;
    }

    .solar-gate__empty {
      margin: 12px 0 0;
      font-size: 0.78rem;
      letter-spacing: 1.2px;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
    }

    .solar-gate__empty.is-hidden {
      display: none;
    }

    .solar-gate__list::-webkit-scrollbar {
      width: 6px;
    }

    .solar-gate__list::-webkit-scrollbar-thumb {
      background: rgba(255, 206, 92, 0.28);
      border-radius: 4px;
    }

    .solar-gate__item {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid rgba(255, 206, 92, 0.28);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
      box-shadow: inset 0 0 18px rgba(255, 206, 92, 0.08);
    }

    .solar-gate__chip {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 206, 92, 0.9), rgba(255, 206, 92, 0.25));
      color: rgba(28, 14, 0, 0.86);
      font-size: 0.9rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      box-shadow: 0 0 18px rgba(255, 206, 92, 0.3);
    }

    .solar-gate__text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .solar-gate__name {
      font-size: 0.88rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.92);
    }

    .solar-gate__meta {
      font-size: 0.72rem;
      letter-spacing: 1px;
      color: rgba(255, 255, 255, 0.62);
      text-transform: uppercase;
    }

    .solar-gate__item {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid rgba(255, 206, 92, 0.28);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
      box-shadow: inset 0 0 18px rgba(255, 206, 92, 0.08);
    }

    .solar-gate__chip {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 206, 92, 0.9), rgba(255, 206, 92, 0.25));
      color: rgba(28, 14, 0, 0.86);
      font-size: 0.9rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      box-shadow: 0 0 18px rgba(255, 206, 92, 0.3);
    }

    .solar-gate__text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .solar-gate__name {
      font-size: 0.88rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.92);
    }

    .solar-gate__meta {
      font-size: 0.72rem;
      letter-spacing: 1px;
      color: rgba(255, 255, 255, 0.62);
      text-transform: uppercase;
    }

    .panel--harmonics {
      gap: 12px;
    }

    .panel__title {
      margin: 0;
      font-size: 1.2rem;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .panel__lead {
      margin: -4px 0 6px;
      font-size: 0.78rem;
      line-height: 1.4;
      letter-spacing: 0.8px;
      color: var(--text-sub);
      text-transform: uppercase;
    }

   .floating-panel {
     position: absolute;
     top: 24px;
     right: 28px;
     width: clamp(260px, 26vw, 340px);
     background: transparent !important;(155deg, rgba(30, 68, 140, 0.72), rgba(12, 28, 62, 0.82));
     border-radius: 24px;
     border: 1px solid rgba(140, 200, 255, 0.35);
     box-shadow:
       0 20px 45px rgba(7, 15, 34, 0.55),
       inset 0 0 45px rgba(90, 170, 255, 0.12);
     padding: 18px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     max-height: min(80vh, 720px);
     overflow-y: auto;
     overscroll-behavior: contain;
     z-index: 5;
     backdrop-filter: blur(18px) saturate(150%);
     -webkit-backdrop-filter: blur(18px) saturate(150%);
   }

   #fieldSpectraPanel {
     left: 50%;
     right: auto;
     transform: translateX(-50%);
   }

   #fieldSpectraPanel.panel--floating {
     left: auto;
     right: auto;
     transform: none;
   }

    .floating-panel__header {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .floating-panel__title {
      margin: 0;
      letter-spacing: 2px;
      font-size: 1.1rem;
      text-transform: uppercase;
      color: #d4ecff;
      text-shadow: 0 0 12px rgba(120, 190, 255, 0.45);
    }

    .floating-panel__subtitle {
      margin: 0;
      font-size: 0.78rem;
      letter-spacing: 1px;
      color: rgba(210, 240, 255, 0.75);
      text-transform: uppercase;
    }

    .floating-panel__canvas {
      position: relative;
      border-radius: 18px;
      border: 1px solid rgba(170, 220, 255, 0.28);
      background: transparent !important;(160deg, rgba(35, 60, 120, 0.4), rgba(15, 25, 48, 0.65));
      aspect-ratio: 1 / 1;
      overflow: hidden;
      box-shadow: inset 0 0 35px rgba(35, 90, 180, 0.28);
      flex: 0 0 auto;
      min-height: 220px;
    }

    .floating-panel__portal {
      display: none;
      gap: 14px;
      margin-top: 14px;
    }

    .floating-panel__portal.is-visible {
      display: grid;
    }

    .portal-visual {
      position: relative;
      padding: 16px 18px 18px;
      border-radius: 16px;
      border: 1px solid rgba(160, 220, 255, 0.22);
      background: transparent !important;(165deg, rgba(26, 52, 102, 0.42), rgba(16, 30, 58, 0.58));
      box-shadow:
        inset 0 0 24px rgba(80, 160, 255, 0.24),
        0 12px 30px rgba(8, 12, 24, 0.42);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .portal-visual[hidden] {
      display: none;
    }

    /* Hide rotating cube preview */
    .portal-visual--cube {
      display: none !important;
    }

    .portal-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    .portal-visual__caption {
      margin: 12px 0 0;
      font-size: 0.72rem;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: rgba(210, 238, 255, 0.82);
    }

    .portal-visual__metric {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      font-size: 0.74rem;
      letter-spacing: 0.9px;
      color: rgba(235, 248, 255, 0.78);
      text-transform: uppercase;
    }

    .portal-cube {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      transform-style: preserve-3d;
      transform: rotateX(-22deg) rotateY(32deg);
      animation: cube-spin 14s linear infinite;
    }

    .portal-cube__face {
      position: absolute;
      inset: 20%;
      border: 1px solid rgba(180, 230, 255, 0.35);
      background: rgba(70, 150, 255, 0.14);
      box-shadow: 0 0 22px rgba(90, 180, 255, 0.18);
    }

    .portal-cube__face--front { transform: translateZ(38px); }
    .portal-cube__face--back { transform: rotateY(180deg) translateZ(38px); }
    .portal-cube__face--left { transform: rotateY(-90deg) translateZ(38px); }
    .portal-cube__face--right { transform: rotateY(90deg) translateZ(38px); }
    .portal-cube__face--top { transform: rotateX(90deg) translateZ(38px); }
    .portal-cube__face--bottom { transform: rotateX(-90deg) translateZ(38px); }

    .portal-cube__pulse {
      position: absolute;
      inset: 32%;
      border-radius: 50%;
      border: 1px solid rgba(255, 220, 120, 0.4);
      box-shadow: 0 0 24px rgba(255, 220, 120, 0.36);
      animation: cube-pulse 4.5s ease-in-out infinite;
    }

    .portal-loom {
      position: relative;
      width: 100%;
      padding-bottom: 80%;
      display: grid;
      place-items: center;
    }

    .portal-loom__ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255, 210, 140, 0.35);
      background: radial-gradient(circle at 50% 50%, rgba(255, 220, 170, 0.32), rgba(255, 220, 170, 0));
      animation: loom-breathe 6s ease-in-out infinite;
    }

    .portal-loom__ring--primary {
      width: 76%;
      height: 76%;
    }

    .portal-loom__ring--secondary {
      width: 52%;
      height: 52%;
      animation-delay: 1.4s;
    }

    .portal-loom__ring--tertiary {
      width: 32%;
      height: 32%;
      animation-delay: 2.8s;
    }

    .portal-loom__pulse {
      position: absolute;
      width: 18%;
      height: 18%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 252, 210, 0.94), rgba(255, 252, 210, 0));
      filter: blur(2px);
      animation: loom-pulse 3s ease-in-out infinite;
    }

    .portal-stack {
      display: flex;
      gap: 6px;
      justify-content: space-between;
      align-items: flex-end;
      min-height: 80px;
    }

    .portal-stack__layer {
      flex: 1 1 0;
      height: calc(var(--layer-scale, 1) * 58px);
      border-radius: 8px;
      border: 1px solid rgba(140, 200, 255, 0.26);
      background: transparent !important;(180deg, rgba(90, 160, 255, 0.65), rgba(30, 70, 130, 0.45));
      box-shadow: 0 12px 16px rgba(10, 20, 48, 0.35);
      opacity: 0.85;
      transform-origin: center bottom;
      animation: stack-hover 5s ease-in-out infinite;
    }

    .portal-stack__layer:nth-child(1) { --layer-scale: 0.5; animation-delay: 0.2s; }
    .portal-stack__layer:nth-child(2) { --layer-scale: 0.7; animation-delay: 0.5s; }
    .portal-stack__layer:nth-child(3) { --layer-scale: 0.9; animation-delay: 0.8s; }
    .portal-stack__layer:nth-child(4) { --layer-scale: 1.05; animation-delay: 1.1s; }
    .portal-stack__layer:nth-child(5) { --layer-scale: 1.2; animation-delay: 1.4s; }

    .floating-panel__modes {
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }

    .mode-chip {
      flex: 1 1 0;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(150, 210, 255, 0.32);
      background: rgba(28, 68, 132, 0.32);
      color: #d4ecff;
      font-family: 'Bangers', cursive;
      font-size: 0.75rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease;
      white-space: normal;
      line-height: 1.3;
    }

    .mode-chip:hover {
      border-color: rgba(190, 235, 255, 0.7);
      background: rgba(70, 140, 210, 0.4);
      transform: translateY(-1px);
    }

    .mode-chip.is-active {
      border-color: rgba(215, 250, 255, 0.9);
      background: rgba(90, 180, 255, 0.45);
      box-shadow: 0 0 16px rgba(90, 180, 255, 0.42);
    }

    .floating-panel__status {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      margin-top: 6px;
      border-radius: 14px;
      border: 1px solid rgba(150, 210, 255, 0.28);
      background: rgba(20, 48, 96, 0.35);
    }

    .floating-panel__label {
      font-size: 0.74rem;
      color: rgba(210, 240, 255, 0.72);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .floating-panel__control {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 6px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(150, 210, 255, 0.24);
      background: rgba(20, 48, 96, 0.32);
      font-size: 0.78rem;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .floating-panel__control input[type="range"] {
      width: 100%;
      accent-color: #8fd3ff;
    }

    .floating-panel__dimension {
      display: grid;
      gap: 12px;
      background: rgba(16, 40, 82, 0.42);
      border: 1px solid rgba(160, 215, 255, 0.28);
      border-radius: 16px;
      padding: 12px 14px;
    }

    .floating-panel__angle {
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      font-size: 0.74rem;
      color: rgba(210, 240, 255, 0.72);
    }

    .floating-panel__angle input[type="range"] {
      width: 100%;
      accent-color: rgba(255, 206, 120, 0.92);
    }

    .floating-panel__angle--secondary {
      border-top: 1px solid rgba(160, 215, 255, 0.18);
      padding-top: 10px;
    }

    .floating-panel__hint {
      font-size: 0.74rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(210, 240, 255, 0.6);
      border-radius: 14px;
      border: 1px dashed rgba(150, 210, 255, 0.3);
      padding: 10px 12px;
      background: rgba(18, 42, 90, 0.35);
    }

    .floating-panel__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .dimension-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 14px;
      border: 1px solid rgba(160, 215, 255, 0.32);
      background: rgba(18, 40, 90, 0.4);
      color: rgba(220, 240, 255, 0.85);
      font-size: 0.72rem;
      letter-spacing: 1.1px;
      text-transform: uppercase;
    }

    .dimension-chip.is-gyro {
      border-color: rgba(255, 206, 140, 0.52);
      box-shadow: 0 0 14px rgba(255, 206, 140, 0.32);
      color: rgba(255, 230, 180, 0.95);
    }

    .dimension-chip.is-muted {
      opacity: 0.45;
      border-style: dashed;
    }

    .floating-panel__value {
      font-size: 0.95rem;
      color: #f4feff;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .gyro-panel {
      position: absolute;
      bottom: 32px;
      right: 420px;
      width: 240px;
      height: 240px;
      border-radius: 30px;
      border: 1px solid rgba(180, 235, 255, 0.25);
      background: transparent !important;(155deg, rgba(40, 90, 180, 0.12), rgba(10, 20, 40, 0.22));
      backdrop-filter: blur(24px) saturate(140%);
      -webkit-backdrop-filter: blur(24px) saturate(140%);
      box-shadow:
        0 18px 36px rgba(8, 10, 35, 0.32),
        inset 0 0 50px rgba(90, 180, 255, 0.16);
      pointer-events: none;
      display: flex;
      justify-content: center;
      align-items: stretch;
      overflow: hidden;
      z-index: 4;
    }

    .gyro-panel.panel--floating {
      pointer-events: auto;
    }

    .gyro-panel.is-active {
      border-color: rgba(180, 235, 255, 0.6);
      box-shadow:
        0 22px 48px rgba(8, 10, 35, 0.42),
        inset 0 0 60px rgba(120, 210, 255, 0.28);
    }

    .gyro-panel::before {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 26px;
      border: 1px solid rgba(120, 200, 255, 0.14);
      background: transparent !important;(140deg, rgba(40, 120, 210, 0.12), rgba(12, 24, 48, 0.18));
      pointer-events: none;
      transition: border 0.35s ease, background 0.35s ease;
      z-index: 1;
    }

    .gyro-panel.is-active::before {
      border-color: rgba(150, 225, 255, 0.32);
      background: transparent !important;(150deg, rgba(60, 140, 240, 0.16), rgba(15, 26, 50, 0.22));
    }

    .gyro-panel canvas {
      width: 100%;
      height: 100%;
      flex: 1 1 auto;
      display: block;
      position: relative;
      z-index: 2;
    }

    .gyro-panel__legend {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 14px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(120, 200, 255, 0.24);
      background: rgba(18, 40, 82, 0.32);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .gyro-panel__legend-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .gyro-panel__label {
      font-size: 0.78rem;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: rgba(210, 240, 255, 0.82);
      text-shadow: 0 0 12px rgba(110, 200, 255, 0.4);
    }

    .gyro-panel__status {
      font-size: 0.68rem;
      letter-spacing: 1.1px;
      color: rgba(210, 240, 255, 0.6);
      text-transform: uppercase;
    }

    .gyro-panel__status.is-idle {
      color: rgba(210, 240, 255, 0.4);
    }

    .gyro-panel__badges {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-height: 18px;
    }

    .gyro-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 6px;
      border-radius: 8px;
      border: 1px solid rgba(140, 210, 255, 0.32);
      background: transparent !important;(180deg, rgba(28, 62, 132, 0.58), rgba(12, 28, 64, 0.34));
      font-size: 0.64rem;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: var(--badge-color, rgba(210, 240, 255, 0.76));
    }

    .gyro-badge__dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 8px currentColor;
    }

    .gyro-badge--empty {
      opacity: 0.5;
      border-style: dashed;
      justify-content: center;
      width: 100%;
    }


    .field-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 6px;
      padding-right: 6px;
    }

    .field-stack::-webkit-scrollbar {
      width: 6px;
    }

    .field-stack::-webkit-scrollbar-thumb {
      background: rgba(150, 210, 255, 0.25);
      border-radius: 4px;
    }

    .field-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 16px;
      border: 1px solid rgba(160, 210, 255, 0.24);
      background: rgba(18, 40, 82, 0.32);
      padding: 10px 12px;
      gap: 12px;
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      text-align: left;
      color: inherit;
      font: inherit;
    }

    .field-row:hover {
      border-color: rgba(190, 235, 255, 0.6);
      background: rgba(36, 80, 150, 0.42);
      transform: translateY(-1px);
    }

    .field-row:focus-visible {
      outline: 2px solid rgba(215, 250, 255, 0.8);
      outline-offset: 2px;
    }

    .field-row.is-active {
      border-color: rgba(215, 250, 255, 0.9);
      background: rgba(90, 180, 255, 0.28);
      box-shadow: 0 0 16px rgba(90, 180, 255, 0.38);
    }

    .field-row__info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .field-row__title {
      font-size: 0.95rem;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .field-row__meta {
      font-size: 0.75rem;
      letter-spacing: 0.6px;
      color: rgba(210, 240, 255, 0.7);
    }

    .field-row__actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .field-row__toggle {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(200, 235, 255, 0.35);
      background: rgba(200, 235, 255, 0.12);
      padding: 0;
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }

    .field-row__toggle::before {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: rgba(200, 235, 255, 0.15);
      transition: background 0.2s ease;
    }

    .field-row__toggle:hover {
      border-color: rgba(220, 250, 255, 0.6);
      background: rgba(200, 235, 255, 0.2);
    }

    .field-row__toggle.is-enabled {
      background: rgba(90, 180, 255, 0.55);
      border-color: rgba(215, 250, 255, 0.9);
      box-shadow: 0 0 10px rgba(90, 180, 255, 0.45);
    }

    .field-row__toggle.is-enabled::before {
      background: rgba(255, 255, 255, 0.85);
    }

    .field-row__toggle:focus-visible {
      outline: 2px solid rgba(215, 250, 255, 0.8);
      outline-offset: 2px;
    }

    .field-row__placeholder {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1px dashed rgba(200, 235, 255, 0.35);
      background: rgba(200, 235, 255, 0.08);
      display: inline-block;
    }

    .floating-panel__canvas--inactive::after {
      content: 'Preview temporarily unavailable';
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-size: 0.78rem;
      letter-spacing: 1px;
      color: rgba(210, 240, 255, 0.8);
      text-transform: uppercase;
      padding: 0 18px;
      text-align: center;
      backdrop-filter: blur(2px);
    }

    #fieldDonutCanvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .ghost-btn--glass {
      border-color: rgba(150, 210, 255, 0.4);
      color: #d4ecff;
      background: rgba(40, 110, 200, 0.15);
    }

    .ghost-btn--glass:hover {
      background: rgba(90, 180, 255, 0.25);
      border-color: rgba(180, 230, 255, 0.6);
    }

    .control-grid {
      display: flex;
      margin-bottom: 30px;
      flex-direction: column;
      gap: 16px;
    }

    .control {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .control.control--toggle-row {
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 10px 16px;
      padding: 10px 12px;
    }

    .control.control--toggle-row > label.toggle,
    .control.control--toggle-row > label.toggle--pill {
      margin: 0;
    }

    .control--ignition {
      align-items: flex-start;
      background: transparent !important;(155deg, rgba(60, 12, 90, 0.32), rgba(20, 38, 90, 0.26));
      border: 1px solid rgba(255, 206, 92, 0.28);
      border-radius: 16px;
      padding: 16px 14px;
      gap: 10px;
    }

    .circle-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(150, 210, 255, 0.22);
      background: transparent !important;(155deg, rgba(30, 18, 60, 0.42), rgba(20, 12, 45, 0.55));
    }

    .circle-section__header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .circle-section__header h3 {
      margin: 0;
      font-size: 0.95rem;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(210, 240, 255, 0.92);
    }

    .circle-section__header p {
      margin: 0;
      font-size: 0.72rem;
      letter-spacing: 1.1px;
      color: rgba(210, 240, 255, 0.58);
      text-transform: uppercase;
    }

    .circle-section__body {
      display: grid;
      gap: 14px;
      grid-template-columns: 1fr;
    }

    .circle-section__body[hidden] {
      display: none;
    }

    .circle-section--aux .circle-section__body {
      grid-template-columns: 1fr;
    }

    .circle-section__header--collapsible {
      align-items: center;
    }

    .section-toggle {
      border: 1px solid rgba(150, 210, 255, 0.35);
      background: rgba(255, 255, 255, 0.08);
      color: rgba(220, 240, 255, 0.8);
      font-family: 'Bangers', cursive;
      font-size: 0.72rem;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease;
    }

    .section-toggle:hover {
      border-color: rgba(200, 235, 255, 0.7);
      background: rgba(120, 190, 255, 0.18);
    }

    .controls-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 30px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(150, 210, 255, 0.22);
      background: transparent !important;(155deg, rgba(18, 12, 50, 0.45), rgba(18, 12, 40, 0.55));
    }

    .controls-section__grid--dual {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 14px;
      width: 100%;
    }

    .controls-section__grid--shared {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      width: 100%;
    }

    .control-stack-box {
      border: 1px solid rgba(150, 210, 255, 0.24);
      border-radius: 16px;
      padding: 12px 12px 6px;
      background: linear-gradient(145deg, rgba(18, 12, 50, 0.55), rgba(8, 8, 22, 0.68));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 18px rgba(0, 0, 0, 0.35);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .control-stack-box__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .control-stack-box__title {
      font-size: 0.98rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: #f5e1ff;
      text-transform: uppercase;
    }

    .control-stack-box__meta {
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.72);
      letter-spacing: 0.4px;
    }

    .circle-panel__header {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .circle-panel__preview {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 140px;
      margin-top: 8px;
      margin-bottom: 10px;
      border-radius: 22px;
      border: 1px dashed rgba(255, 255, 255, 0.2);
      background: radial-gradient(circle, rgba(255, 255, 255, 0.04), rgba(6, 0, 18, 0.82));
      overflow: hidden;
    }

    .sci-magic__preview {
      border: 1px solid rgba(140, 210, 255, 0.25);
      background: radial-gradient(circle at 20% 20%, rgba(130, 230, 255, 0.12), rgba(8, 6, 24, 0.85)),
        radial-gradient(circle at 80% 80%, rgba(255, 216, 140, 0.12), transparent 55%);
      box-shadow: inset 0 0 28px rgba(12, 6, 32, 0.85), 0 0 22px rgba(120, 220, 255, 0.18);
    }

    .sci-magic__preview::after {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 18px;
      border: 1px solid rgba(140, 210, 255, 0.12);
      box-shadow: inset 0 0 18px rgba(140, 210, 255, 0.18);
      opacity: 0.7;
      pointer-events: none;
    }

    .sci-magic__log {
      margin-top: 6px;
      margin-bottom: 14px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(140, 210, 255, 0.18);
      background: rgba(8, 6, 24, 0.5);
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 140px;
      overflow-y: auto;
    }

    .sci-magic__log-entry {
      font-size: 0.78rem;
      color: rgba(230, 234, 255, 0.82);
      line-height: 1.35;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .sci-magic__log-entry span {
      white-space: nowrap;
    }

    .sci-magic__log-entry .sci-magic__log-note {
      color: rgba(255, 220, 170, 0.85);
    }

    .sci-magic__log-empty {
      font-size: 0.78rem;
      color: rgba(230, 234, 255, 0.55);
    }

    .cortex-preview__viz {
      min-height: 180px;
    }

    .circle-panel__layer {
      position: absolute;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-radius: 50%;
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.12);
      opacity: 0.9;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    }

    .circle-panel__layer--minor {
      z-index: 2;
      box-shadow: 0 0 24px rgba(120, 220, 255, 0.42);
    }

    .circle-panel__layer--major {
      z-index: 1;
      box-shadow: 0 0 28px rgba(255, 200, 120, 0.45);
    }

    .circle-panel__layer-label {
      font-size: 0.82rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.75);
    }

    .circle-panel__hint {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: rgba(255, 255, 255, 0.6);
      margin: 0;
    }

    .controls-section__title {
      margin: 0;
      font-size: 0.9rem;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(210, 240, 255, 0.88);
    }

    .controls-section__grid {
      display: grid;
      gap: 12px;
    }

    .control--interactive {
      gap: 14px;
      justify-content: space-between;
      padding: 14px 12px;
    }

    .circle-card {
      flex-direction: column;
      align-items: stretch;
      gap: 18px;
      padding: 18px 18px 20px;
      border-radius: 20px;
      background:
        linear-gradient(160deg, rgba(24, 40, 84, 0.72), rgba(12, 18, 42, 0.86)),
        rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(170, 215, 255, 0.22);
      box-shadow:
        0 32px 64px rgba(8, 12, 26, 0.46),
        inset 0 0 18px rgba(140, 200, 255, 0.12);
    }

    .circle-card--primary {
      border-color: rgba(120, 190, 255, 0.4);
      box-shadow:
        0 38px 70px rgba(16, 76, 140, 0.46),
        inset 0 0 18px rgba(120, 190, 255, 0.18);
    }

    .circle-card--unit {
      border-color: rgba(255, 206, 120, 0.42);
      box-shadow:
        0 38px 70px rgba(140, 76, 12, 0.38),
        inset 0 0 18px rgba(255, 206, 120, 0.16);
    }

    .circle-card--free {
      border-color: rgba(160, 235, 255, 0.4);
      box-shadow:
        0 32px 64px rgba(20, 90, 160, 0.38),
        inset 0 0 18px rgba(160, 235, 255, 0.18);
    }

    .circle-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .circle-card__title {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .circle-card__role {
      font-size: 0.75rem;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: rgba(210, 235, 255, 0.68);
    }

    .circle-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(180, 225, 255, 0.35);
      font-size: 0.78rem;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(220, 240, 255, 0.9);
    }

    .circle-card__meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      width: 100%;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.75rem;
      color: rgba(210, 235, 255, 0.75);
    }

    .field input[type="text"],
    .field select,
    .field input[type="number"] {
      width: 100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(150, 210, 255, 0.32);
      background: rgba(14, 28, 60, 0.58);
      color: rgba(244, 252, 255, 0.92);
      font-family: 'Bangers', cursive;
      font-size: 0.95rem;
      letter-spacing: 1px;
    }

    .field input[type="text"]::placeholder {
      color: rgba(210, 235, 255, 0.45);
      font-style: italic;
    }

    .field input[type="text"]:focus-visible,
    .field select:focus-visible,
    .field input[type="number"]:focus-visible {
      outline: 2px solid rgba(255, 212, 120, 0.65);
      outline-offset: 2px;
    }

    .field--gain .gain-control {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
    }

    .field--gain input[type="range"] {
      width: 100%;
    }

    .field--gain input[type="number"] {
      width: 72px;
      text-align: center;
      padding: 8px 10px;
    }

    .circle-card__toggles {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .toggle--pill {
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(160, 220, 255, 0.3);
      background: rgba(16, 32, 64, 0.6);
    }

    .toggle--pill input:checked + .toggle__visual {
      box-shadow: 0 0 0 6px rgba(123, 200, 255, 0.28);
    }

    .toggle--mini {
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(150, 210, 255, 0.2);
      background: rgba(10, 20, 44, 0.65);
      font-size: 0.68rem;
      letter-spacing: 1px;
    }

    .toggle--mini .toggle__visual {
      transform: scale(0.85);
    }

    .quantum-branches {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 8px;
    }

    .meta-line__section {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid rgba(120, 170, 220, 0.18);
    }

    .meta-line__section:first-of-type {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }

    .meta-book-presets__actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      align-items: center;
      padding-top: 18px;
    }

    .book-signal-results {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .book-signal-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 12px;
      border: 1px solid rgba(120, 170, 220, 0.2);
      background: rgba(12, 22, 42, 0.6);
    }

    .book-signal-result__title {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      color: rgba(220, 240, 255, 0.88);
    }

    .book-signal-result__meta {
      font-size: 0.7rem;
      letter-spacing: 0.8px;
      color: rgba(180, 210, 240, 0.6);
    }

    .book-signal-result__pin {
      white-space: nowrap;
    }

    .book-signal-empty {
      padding: 8px 12px;
      border-radius: 12px;
      border: 1px dashed rgba(120, 170, 220, 0.22);
      color: rgba(190, 220, 250, 0.6);
      font-size: 0.72rem;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .book-signal-pins {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .book-signal-pin {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid rgba(150, 210, 255, 0.3);
      background: rgba(255, 255, 255, 0.08);
      padding: 4px 10px;
      font-size: 0.65rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(220, 240, 255, 0.9);
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease;
    }

    .book-signal-pin:hover {
      border-color: rgba(190, 235, 255, 0.65);
      background: rgba(120, 190, 255, 0.16);
    }

    .book-signal-pin__remove {
      opacity: 0.6;
      font-size: 0.62rem;
      letter-spacing: 0;
    }

    .circle-card__footnote {
      font-size: 0.75rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(210, 235, 255, 0.5);
    }

    .circle-card__actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .circle-card__action {
      border: 1px solid rgba(150, 210, 255, 0.4);
      border-radius: 999px;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(220, 240, 255, 0.85);
      font-family: 'Bangers', cursive;
      font-size: 0.74rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .circle-card__action:hover {
      border-color: rgba(190, 235, 255, 0.7);
      background: rgba(120, 190, 255, 0.18);
      transform: translateY(-1px);
    }

    .control--select select {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(180, 235, 255, 0.28);
      background: rgba(20, 48, 96, 0.28);
      color: var(--text-main);
      font-family: 'Bangers', cursive;
      letter-spacing: 1px;
      font-size: 0.9rem;
    }

    .control--select select:focus-visible {
      outline: 2px solid rgba(255, 206, 92, 0.6);
      outline-offset: 2px;
    }

    .control-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      gap: 10px;
    }

    .control-visual {
      position: relative;
      display: grid;
      place-items: center;
    }

    .control-visual--display {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      border: 2px solid rgba(180, 235, 255, 0.35);
      margin: 12px auto 10px;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.35), transparent 60%),
        linear-gradient(150deg, rgba(16, 32, 60, 0.72), rgba(8, 16, 32, 0.8));
      box-shadow:
        0 22px 46px rgba(6, 12, 28, 0.42),
        inset 0 0 24px rgba(120, 175, 255, 0.2);
      pointer-events: none;
    }

    .control-visual--primary {
      border-color: rgba(123, 200, 255, 0.6);
      box-shadow:
        0 24px 52px rgba(20, 75, 140, 0.38),
        inset 0 0 28px rgba(123, 200, 255, 0.28);
    }

    .control-visual--unit {
      border-color: rgba(255, 206, 92, 0.7);
      box-shadow:
        0 24px 52px rgba(120, 65, 5, 0.32),
        inset 0 0 28px rgba(255, 206, 92, 0.32);
    }

    .control-body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
      flex: 1;
      width: 100%;
    }

    #circlePanelAnchor {
      display: contents;
    }

    .control--aux {
      min-height: 320px;
    }

    .control-visual--aux {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 12px auto 6px;
      display: grid;
      place-items: center;
      border: 2px solid rgba(255, 245, 205, 0.45);
      background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.48), transparent 62%),
        radial-gradient(circle at 70% 72%, rgba(255, 255, 255, 0.18), transparent 62%),
        linear-gradient(155deg, rgba(64, 30, 120, 0.6), rgba(18, 8, 42, 0.7));
      box-shadow:
        0 22px 46px rgba(6, 12, 30, 0.45),
        inset 0 0 26px rgba(255, 215, 120, 0.24);
    }

    .circle-glyph {
      position: relative;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(24, 10, 40, 0.95) 0%, rgba(24, 10, 40, 0.65) 55%, transparent 75%);
      box-shadow:
        0 0 24px hsla(var(--glyph-hue, 40), 85%, 70%, 0.45),
        inset 0 0 20px rgba(0, 0, 0, 0.28);
    }

    .circle-glyph::before,
    .circle-glyph::after {
      content: '';
      position: absolute;
      border-radius: 50%;
    }

    .circle-glyph::after {
      inset: 16px;
      background: radial-gradient(circle, hsla(var(--glyph-hue, 40), 85%, 70%, 0.85) 0%, rgba(255, 255, 255, 0.6) 40%, transparent 70%);
      box-shadow: 0 0 16px hsla(var(--glyph-hue, 40), 85%, 70%, 0.4);
      animation: glyphPulse 6s ease-in-out infinite;
    }

    .circle-glyph::before {
      inset: -4px;
      border: 1.4px dashed hsla(var(--glyph-hue, 40), 75%, 65%, 0.55);
      animation: circleGlyphOrbit 7s linear infinite;
      opacity: 0.7;
    }

    .aux-toggle-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      opacity: 0.55;
    }

    .toggle--disabled {
      opacity: 0.55;
      pointer-events: none;
    }

    .control__hint--pending {
      font-style: italic;
      color: rgba(220, 225, 255, 0.7);
    }

    @keyframes circleGlyphOrbit {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes glyphPulse {
      0%, 100% { transform: scale(1); opacity: 0.95; }
      50% { transform: scale(1.12); opacity: 0.8; }
    }

    .circle-sun {
      position: relative;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(18, 8, 30, 0.92) 0%, rgba(18, 8, 30, 0.75) 45%, rgba(18, 8, 30, 0) 100%);
      overflow: hidden;
    }

    .circle-sun::before,
    .circle-sun::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }

    .circle-sun::before {
      background:
        radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%),
        radial-gradient(circle at 30% 30%, var(--sun-arc-color, rgba(255, 230, 160, 0.65)), transparent 70%),
        conic-gradient(from 0deg, transparent 0deg 90deg, rgba(255, 255, 255, 0.15) 90deg 180deg, transparent 180deg 360deg);
      animation: sunAurora 9s linear infinite;
      opacity: 0.85;
    }

    .circle-sun::after {
      inset: 18%;
      border-radius: 50%;
      background:
        radial-gradient(circle, var(--sun-core-color, #ffeb9d) 0%, rgba(255, 255, 255, 0.8) 45%, transparent 70%);
      box-shadow:
        0 0 18px rgba(255, 245, 210, 0.7),
        0 0 32px rgba(255, 215, 120, 0.28);
      animation: sunPulse 4.6s ease-in-out infinite;
    }

    .circle-sun::marker {
      content: none;
    }

    .circle-sun--primary {
      --sun-arc-color: rgba(120, 215, 255, 0.55);
      --sun-core-color: #9be5ff;
      box-shadow: 0 0 26px rgba(120, 215, 255, 0.35);
    }

    .circle-sun--unit {
      --sun-arc-color: rgba(255, 210, 140, 0.55);
      --sun-core-color: #ffe6a0;
      box-shadow: 0 0 26px rgba(255, 210, 140, 0.35);
    }

    @keyframes sunPulse {
      0%, 100% { transform: scale(1); opacity: 0.95; }
      50% { transform: scale(1.12); opacity: 0.8; }
    }

    @keyframes sunAurora {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

@keyframes crystallinePulse {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 0%; }
}

@keyframes crystalShift {
  0% { opacity: 0.45; transform: translateY(0); }
  35% { opacity: 0.65; transform: translateY(-8px); }
  70% { opacity: 0.55; transform: translateY(4px); }
  100% { opacity: 0.45; transform: translateY(0); }
}

    @keyframes cube-spin {
      0% { transform: rotateX(-22deg) rotateY(32deg); }
      50% { transform: rotateX(-18deg) rotateY(212deg); }
      100% { transform: rotateX(-22deg) rotateY(392deg); }
    }

    @keyframes cube-pulse {
      0%, 100% { transform: scale(1); opacity: 0.85; }
      50% { transform: scale(1.2); opacity: 0.35; }
    }

    @keyframes loom-breathe {
      0%, 100% { transform: scale(1); opacity: 0.68; }
      50% { transform: scale(1.08); opacity: 0.88; }
    }

    @keyframes loom-pulse {
      0%, 100% { transform: scale(0.85); opacity: 0.7; }
      50% { transform: scale(1.12); opacity: 0.9; }
    }

    @keyframes stack-hover {
      0%, 100% { transform: translateY(0); opacity: 0.82; }
      50% { transform: translateY(-6px); opacity: 1; }
    }

    .control__hint {
      display: block;
      font-size: 0.75rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(210, 240, 255, 0.75);
      margin-bottom: 6px;
    }

    .select-wrapper select {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(180, 235, 255, 0.28);
      background: rgba(18, 38, 76, 0.36);
      color: var(--text-main);
      font-family: 'Bangers', cursive;
      letter-spacing: 1px;
      font-size: 0.9rem;
    }

    .select-wrapper select:focus-visible {
      outline: 2px solid rgba(255, 206, 92, 0.6);
      outline-offset: 2px;
    }

    .control--stack {
      flex-direction: column;
      align-items: flex-start;
    }

    .control--stack .field {
      width: 100%;
      align-self: stretch;
    }

    .control--stack .field--gain .gain-control {
      width: 100%;
    }

    .control--stack input[type="range"] {
      width: 100%;
    }

    .control__label {
      font-size: 0.95rem;
      letter-spacing: 1px;
      color: var(--accent);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .cycle-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 6px;
    }

    .cycle-controls__toggle {
      margin: 0;
    }

    .cycle-controls__interval {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.7rem;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: rgba(220, 235, 255, 0.8);
    }

    .cycle-controls__interval input {
      width: 90px;
      padding: 6px 8px;
      border-radius: 10px;
      border: 1px solid rgba(180, 235, 255, 0.28);
      background: rgba(18, 38, 76, 0.36);
      color: var(--text-main);
      font-family: 'Bangers', cursive;
      letter-spacing: 1px;
    }

    .levogyre-panel {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .levogyre-panel__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }

    .levogyre-card {
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      padding: 12px 14px;
      background: transparent !important;(145deg, rgba(11, 18, 38, 0.8), rgba(18, 4, 32, 0.6));
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 90px;
    }

    .levogyre-card header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .levogyre-card h3 {
      margin: 0;
      font-size: 0.95rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    .levogyre-card p {
      margin: 0;
      font-size: 0.95rem;
      letter-spacing: 0.8px;
    }

    .levogyre-card small {
      font-size: 0.7rem;
      color: rgba(220, 235, 255, 0.76);
      letter-spacing: 0.6px;
    }

    .levogyre-chip {
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 2px 10px;
      font-size: 0.7rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.8);
    }

    .levogyre-panel__status {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 8px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(8, 10, 24, 0.6);
      padding: 10px 14px;
    }

    .levogyre-panel__status span {
      display: block;
      font-size: 0.7rem;
      letter-spacing: 0.7px;
      color: rgba(210, 225, 255, 0.7);
      text-transform: uppercase;
    }

    .levogyre-panel__status strong {
      font-size: 0.92rem;
      letter-spacing: 1px;
      color: #fff;
    }

    .levogyre-panel__controls {
      display: flex;
      flex-direction: column;
      gap: 6px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 10px 14px;
      background: rgba(6, 10, 26, 0.5);
    }

    .levogyre-panel__control-hint {
      margin: 0;
      font-size: 0.72rem;
      letter-spacing: 0.8px;
      color: rgba(220, 235, 255, 0.78);
    }

    .levogyre-panel__hint {
      margin: 0;
      font-size: 0.76rem;
      letter-spacing: 0.9px;
      color: rgba(230, 240, 255, 0.8);
    }

    .rotation-panel {
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 12px;
      display: grid;
      gap: 8px;
      background: rgba(8, 10, 24, 0.55);
      transition: opacity 0.2s ease;
    }

    .rotation-panel.is-disabled {
      opacity: 0.45;
      pointer-events: none;
    }

    .rotation-panel .field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .rotation-panel select,
    .rotation-panel input[type="range"] {
      width: 100%;
    }

.rotation-spin-field.is-hidden {
  display: none;
}

.rotation-panel__hint {
  margin: 6px 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.7px;
  color: rgba(210, 225, 255, 0.7);
}

    .control__label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .control__label-row .toggle {
      margin: 0;
    }

    .control__note {
      margin: -2px 0 8px;
      font-size: 0.74rem;
      letter-spacing: 0.8px;
      color: rgba(210, 240, 255, 0.7);
      line-height: 1.35;
      max-width: 260px;
    }

    .toggle-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 6px;
    }

    .toggle-row .toggle {
      flex: 1 1 120px;
    }

    .basepoint-lab {
      padding: 10px 12px;
      margin-bottom: 10px;
      border-radius: 12px;
      border: 1px solid rgba(150, 210, 255, 0.25);
      background: transparent !important;(145deg, rgba(20, 18, 40, 0.6), rgba(10, 8, 24, 0.5));
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .basepoint-lab__row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      align-items: center;
    }
    .basepoint-lab .control__label-row {
      margin: 0;
    }

    .creative-time-toggles {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .creative-time__header {
      margin-bottom: 8px;
    }
    .creative-time__sections {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
    }
    .creative-time__section {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.02);
    }
    .creative-time__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .creative-time__grid .field,
    .creative-time__grid .field.field--gain {
      width: 100%;
      display: block;
      padding-left: 0;
      padding-right: 0;
    }
    .creative-time__grid .field input[type="range"] {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
    .field__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .field__inline-toggle {
      margin: 0;
    }
    .field--row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    /* Let Creative Time sliders span edge-to-edge inside the section padding. */
    .creative-time__section .field input[type="range"] {
      width: calc(100% + 20px);
      margin-left: -10px;
      margin-right: -10px;
      box-sizing: border-box;
    }
    .creative-time__cti-readout {
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-weight: 600;
    }
    .creative-time__cti-value {
      font-size: 1.4rem;
      color: rgba(255, 214, 143, 0.95);
      letter-spacing: 0.5px;
    }
    .creative-time__cti-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: rgba(255, 255, 255, 0.7);
    }
    .creative-time__cti-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.75);
    }
    .creative-time__section .control--toggle-row {
      margin-bottom: 6px;
    }
    .creative-time__mirror {
      gap: 12px;
    }
    .creative-time__mirror-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      align-items: end;
    }
    .creative-time__mirror-save {
      justify-self: start;
    }
    .creative-time__mirror-list {
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }
    .creative-time__mirror-row {
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
    }
    .creative-time__mirror-meta {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
      letter-spacing: 0.2px;
    }
    .creative-time__mirror-date {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.85rem;
    }
	    .creative-time__mirror-summary {
	      margin: 6px 0 0;
	      line-height: 1.5;
	    }

	    .self-narration__list {
	      display: grid;
	      gap: 10px;
	      margin-top: 4px;
	    }

	    .self-narration__row {
	      padding: 10px;
	      border: 1px solid rgba(255, 255, 255, 0.12);
	      border-radius: 12px;
	      background: rgba(6, 12, 24, 0.34);
	    }

	    .self-narration__meta {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 10px;
	    }

	    .self-narration__when {
	      font-size: 0.85rem;
	      letter-spacing: 0.02em;
	      color: rgba(230, 236, 255, 0.88);
	    }

	    .self-narration__actions {
	      display: inline-flex;
	      gap: 8px;
	      flex-wrap: wrap;
	    }

	    .self-narration__text {
	      margin: 8px 0 0;
	      line-height: 1.5;
	      color: rgba(230, 236, 255, 0.78);
	      font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	      font-size: 0.82rem;
	    }
    .creative-time__selflet-list {
      display: grid;
      gap: 8px;
      margin-top: 6px;
    }
    .creative-time__selflet {
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.035);
      display: grid;
      gap: 8px;
    }
    .creative-time__selflet-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .creative-time__selflet-header .field {
      flex: 1;
      margin-bottom: 0;
    }
    .creative-time__selflet-remove {
      white-space: nowrap;
    }
    .orbit-lights--compact {
      display: flex;
      gap: 12px;
    }
    .orbit-lights--tight {
      gap: 8px;
    }
    .orbit-lights--tight {
      gap: 8px;
    }
    .orbit-lights--compact .orbit-light,
    .orbit-light--solo {
      width: 14px;
      height: 14px;
      border: 1px dashed rgba(255, 255, 255, 0.35);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 230, 180, 0.45), rgba(255, 230, 180, 0.08));
      box-shadow: 0 0 10px rgba(255, 206, 92, 0.35);
      opacity: 0.65;
      display: inline-block;
    }
    .orbit-lights--compact .orbit-light.is-active {
      opacity: 1;
      box-shadow: 0 0 14px rgba(255, 206, 92, 0.5);
    }
    body:not(.bullseye-enabled) .orbit-lights,
    body:not(.bullseye-enabled) .orbit-light,
    body:not(.bullseye-enabled) .orbit-light--solo {
      opacity: 0 !important;
      display: none !important;
      pointer-events: none !important;
    }

    .control input[type="number"],
    .control input[type="text"] {
      width: 64px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-main);
      font-family: 'Bangers', cursive;
      font-size: 0.9rem;
      letter-spacing: 1px;
      padding: 4px;
      text-align: center;
    }

    .range-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  max-width: 100%;
  display: block;
  flex: 1 1 100%;
  min-width: 0;
  height: 10px;
  border-radius: 9px;
  background: linear-gradient(270deg, #ff00cc, #3333ff, #00ccff, #ffcc00, #ff00cc);
  background-size: 400% 100%;
  animation: glowLine 24s linear infinite;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35), 0 0 8px rgba(120, 200, 255, 0.25);
  outline: none;
  margin: 6px 0;
}

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, 0.8);
      background: rgba(255, 255, 255, 0.25);
      cursor: pointer;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    input[type=range]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, 0.8);
      background: rgba(255, 255, 255, 0.25);
      cursor: pointer;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    input[type=range]:disabled {
      animation: none;
      background: transparent !important;(90deg, rgba(120, 120, 160, 0.6), rgba(120, 120, 160, 0.6));
      cursor: not-allowed;
      opacity: 0.5;
    }
    input[type=range]:disabled::-webkit-slider-thumb,
    input[type=range]:disabled::-moz-range-thumb {
      border-color: rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.2);
      box-shadow: none;
      cursor: not-allowed;
    }

    /* Force sliders inside SM / panel controls to span the full available width. */
    .control input[type=range],
    .control-group input[type=range],
    .control-field input[type=range],
    .membrane-panel input[type=range],
    .floating-panel input[type=range],
    .floating-panel__control input[type=range],
    .floating-panel__angle input[type=range],
    .nav-board__field input[type=range],
    .horizon-stone__field input[type=range],
    .grid-builder input[type=range] {
      width: 100%;
      max-width: 100%;
      flex: 1 1 100%;
      min-width: 0;
      margin-left: 0;
      margin-right: 0;
    }

    .toggle {
      --toggle-width: 46px;
      --toggle-height: 26px;
      --toggle-thumb: 18px;
      --toggle-padding: 4px;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 0.9rem;
      letter-spacing: 1px;
      color: var(--text-sub);
    }

    .toggle input {
      display: none;
    }

    .toggle__visual {
      width: var(--toggle-width);
      height: var(--toggle-height);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: transparent !important;(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
      position: relative;
      transition: all 0.22s ease;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .toggle__visual::after {
      content: '';
      position: absolute;
      top: var(--toggle-padding);
      left: var(--toggle-padding);
      width: var(--toggle-thumb);
      height: var(--toggle-thumb);
      border-radius: 50%;
      background: #ffffff;
      transition: all 0.22s ease;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    }

    .toggle input:checked + .toggle__visual {
      border-color: rgba(255, 206, 92, 0.65);
      background: transparent !important;(145deg, rgba(255, 206, 92, 0.32), rgba(255, 206, 92, 0.18));
      box-shadow: 0 0 14px rgba(255, 206, 92, 0.28);
    }

    .toggle input:checked + .toggle__visual::after {
      transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb) - (var(--toggle-padding) * 2)));
      background: #ffe47a;
    }

    .toggle--ignition {
      --toggle-width: 56px;
      --toggle-height: 30px;
      --toggle-thumb: 20px;
      --toggle-padding: 5px;
    }

    .toggle--ignition input:checked + .toggle__visual {
      box-shadow: 0 0 18px rgba(255, 206, 92, 0.55);
    }

    .control-group {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 8px;
    }

    .mode-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.9rem;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
      letter-spacing: 1px;
    }

    .field-chip.is-active {
      background: rgba(255, 206, 92, 0.18);
      border-color: rgba(255, 206, 92, 0.6);
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(255, 206, 92, 0.25);
    }

    .field-chip:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.28);
    }

    .ghost-btn {
      align-self: flex-start;
      border: 1px dashed rgba(255, 255, 255, 0.25);
      border-radius: 999px;
      padding: 6px 14px;
      background: transparent;
      color: var(--text-main);
      font-size: 0.9rem;
      letter-spacing: 1.2px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .ghost-btn:hover {
      border-color: rgba(255, 206, 92, 0.6);
      background: rgba(255, 206, 92, 0.18);
    }

    .ghost-btn.is-active {
      border-color: rgba(255, 206, 92, 0.75);
      background: rgba(255, 206, 92, 0.2);
      box-shadow: 0 10px 22px rgba(255, 206, 92, 0.2);
      transform: translateY(-2px);
    }

    .ghost-btn.is-holding {
      border-color: rgba(120, 214, 255, 0.8);
      box-shadow: 0 0 18px rgba(120, 214, 255, 0.35);
      background: rgba(120, 214, 255, 0.12);
    }

    .thoughtshape-capture-row {
      align-items: center;
    }

    .thoughtshape-capture {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .thoughtshape-quality {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(8, 14, 28, 0.35);
      font-size: 0.72rem;
      letter-spacing: 1px;
      color: rgba(225, 232, 255, 0.82);
    }

    .thoughtshape-quality__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.35);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
    }

    .thoughtshape-quality.is-good {
      border-color: rgba(144, 255, 206, 0.55);
      color: rgba(202, 255, 233, 0.9);
    }

    .thoughtshape-quality.is-good .thoughtshape-quality__dot {
      background: rgba(144, 255, 206, 0.9);
      box-shadow: 0 0 10px rgba(144, 255, 206, 0.55);
    }

    .thoughtshape-quality.is-ok {
      border-color: rgba(255, 226, 125, 0.55);
      color: rgba(255, 236, 174, 0.9);
    }

    .thoughtshape-quality.is-ok .thoughtshape-quality__dot {
      background: rgba(255, 226, 125, 0.9);
      box-shadow: 0 0 10px rgba(255, 226, 125, 0.5);
    }

    .thoughtshape-quality.is-bad {
      border-color: rgba(255, 136, 136, 0.55);
      color: rgba(255, 193, 193, 0.9);
    }

    .thoughtshape-quality.is-bad .thoughtshape-quality__dot {
      background: rgba(255, 136, 136, 0.9);
      box-shadow: 0 0 10px rgba(255, 136, 136, 0.55);
    }

    .creative-grid {
      display: grid;
      gap: 10px;
      max-height: 240px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .creative-grid--harmonics {
      gap: 14px;
    }

    .creative-grid::-webkit-scrollbar {
      width: 6px;
    }

    .creative-grid::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.18);
      border-radius: 4px;
    }

    .creative-card {
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.06);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      overflow: hidden;
    }

    .creative-card--harmonics {
      background: transparent !important;(155deg, rgba(255, 255, 255, 0.1), rgba(20, 35, 70, 0.35));
      padding: 16px;
      gap: 12px;
    }

    .creative-card.active {
      border-color: rgba(255, 206, 92, 0.6);
      box-shadow: 0 16px 32px rgba(255, 206, 92, 0.28);
    }

    .creative-card__header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .creative-card__glyph {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 2px solid rgba(255, 206, 92, 0.4);
      box-shadow:
        0 0 18px rgba(255, 206, 92, 0.3),
        inset 0 0 14px rgba(255, 255, 255, 0.18);
      background: radial-gradient(circle, rgba(255, 206, 92, 0.75), rgba(255, 206, 92, 0.15) 60%, transparent 100%);
    }

    .creative-card__glyph--burst {
      border-color: rgba(143, 211, 255, 0.45);
      box-shadow:
        0 0 18px rgba(143, 211, 255, 0.36),
        inset 0 0 14px rgba(143, 211, 255, 0.2);
      background: radial-gradient(circle, rgba(143, 211, 255, 0.85), rgba(40, 90, 210, 0.35) 65%, transparent 100%);
    }

    .creative-card__glyph--helio {
      border-color: rgba(180, 255, 240, 0.45);
      box-shadow:
        0 0 18px rgba(160, 255, 235, 0.34),
        inset 0 0 14px rgba(160, 255, 235, 0.2);
      background: radial-gradient(circle, rgba(160, 255, 235, 0.86), rgba(20, 80, 120, 0.35) 65%, transparent 100%);
    }

    .creative-card__titles {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .creative-card h3 {
      margin: 0;
      font-size: 1rem;
      letter-spacing: 1.2px;
      color: var(--accent);
    }

    .creative-card p {
      margin: 0;
      font-size: 0.8rem;
      color: var(--text-sub);
      letter-spacing: 0.6px;
      line-height: 1.4;
    }

    .card-toggle {
      align-self: stretch;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(18, 38, 76, 0.36);
      padding: 6px 12px;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: 'Bangers', cursive;
      color: var(--text-main);
    }

    .card-toggle--harmonics {
      margin-top: 8px;
    }

    .card-toggle__label {
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .card-toggle__status {
      font-size: 0.74rem;
      letter-spacing: 1px;
      padding: 2px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.08);
    }

    .card-toggle.is-active {
      border-color: rgba(255, 206, 92, 0.65);
      box-shadow: 0 10px 22px rgba(255, 206, 92, 0.24);
    }

    .card-toggle.is-active .card-toggle__status {
      border-color: rgba(255, 206, 92, 0.75);
      background: rgba(255, 206, 92, 0.25);
      color: rgba(24, 12, 0, 0.85);
    }

    .card-toggle:hover {
      border-color: rgba(255, 206, 92, 0.6);
      background: rgba(255, 206, 92, 0.18);
    }

    .label-form {
      display: grid;
      gap: 8px;
    }

    .label-form input {
      width: 100%;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-main);
      font-size: 0.85rem;
      font-family: 'Bangers', cursive;
      letter-spacing: 1px;
      padding: 6px 10px;
    }

    .label-form button {
      justify-self: flex-start;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.1);
      padding: 6px 16px;
      letter-spacing: 1.2px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .label-form button:hover {
      border-color: rgba(255, 206, 92, 0.6);
      background: rgba(255, 206, 92, 0.18);
    }

    .label-controls {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
    }

    .label-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 220px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .label-stack::-webkit-scrollbar {
      width: 6px;
    }

    .label-stack::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.18);
      border-radius: 4px;
    }

    .label-chip {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.05);
      padding: 8px 10px;
      display: grid;
      gap: 4px;
      letter-spacing: 1px;
    }

    .parallax-reef__chip {
      appearance: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      color: inherit;
      font: inherit;
      background: rgba(255, 255, 255, 0.05);
    }

    .parallax-reef__chip.is-active {
      border-color: rgba(140, 220, 255, 0.6);
      box-shadow: 0 0 0 1px rgba(120, 210, 255, 0.35), 0 0 14px rgba(120, 210, 255, 0.2);
      background: linear-gradient(135deg, rgba(70, 120, 150, 0.3), rgba(255, 255, 255, 0.06));
    }

    .parallax-reef__chip:focus-visible {
      outline: 2px solid rgba(140, 220, 255, 0.65);
      outline-offset: 2px;
    }

    .parallax-reef__chip-action {
      font-size: 0.62rem;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: rgba(200, 234, 255, 0.7);
    }

    .axiom-loom__list {
      max-height: 200px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .axiom-loom__chip {
      gap: 8px;
    }

    .axiom-loom__text {
      font-size: 0.82rem;
      letter-spacing: 0.4px;
      color: rgba(233, 242, 255, 0.92);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .axiom-loom__chip.is-latest {
      border-color: rgba(255, 204, 150, 0.45);
      box-shadow: 0 0 0 1px rgba(255, 204, 150, 0.18);
    }

    .axiom-loom__latest {
      font-size: 0.58rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255, 214, 160, 0.9);
      border: 1px solid rgba(255, 214, 160, 0.35);
      border-radius: 999px;
      padding: 2px 6px;
    }

    .axiom-loom__legend {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 2px;
    }

    .axiom-loom__legend-title {
      font-size: 0.62rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(180, 206, 240, 0.85);
    }

    .axiom-loom__legend-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .axiom-loom__legend-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(120, 160, 220, 0.35);
      background: rgba(18, 32, 60, 0.35);
      font-size: 0.6rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(210, 228, 255, 0.85);
    }

    .axiom-loom__legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--axiom-grid, #a3c2d8);
    }

    .axiom-loom__legend-chip[data-axiom-legend="warm"] .axiom-loom__legend-swatch {
      background: var(--axiom-warm, #f3c28c);
    }

    .axiom-loom__legend-chip[data-axiom-legend="cool"] .axiom-loom__legend-swatch {
      background: var(--axiom-cool, #88c2d3);
    }

    .axiom-loom__targets {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .axiom-loom__target {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(120, 160, 220, 0.35);
      background: rgba(18, 32, 60, 0.35);
      font-size: 0.62rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(210, 228, 255, 0.85);
    }

    .axiom-loom__target.is-off {
      opacity: 0.5;
    }

    .axiom-loom__target input {
      margin: 0;
      accent-color: #8fd3ff;
    }

    .axiom-loom__row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .axiom-loom__weight {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      font-size: 0.7rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(200, 214, 255, 0.8);
    }

    .axiom-loom__weight input {
      flex: 1;
    }

    .axiom-loom__remove {
      font-size: 0.7rem;
      padding: 4px 10px;
      letter-spacing: 1px;
    }

    .capture-timeline {
      width: 100%;
      height: 28px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(120, 160, 220, 0.35);
      background: rgba(10, 16, 30, 0.6);
    }

    .capture-timeline canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  padding: 0;
  z-index: 1;
}

#donutCanvas {
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  display: block;
  margin: 0 auto;
}

#spiral2dCanvas {
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  display: block;
  margin: 0;
  z-index: 3;
}


    .metrics-panel {
      gap: 10px;
    }

    .metrics-panel__description {
      margin: -4px 0 4px;
      font-size: 0.85rem;
      line-height: 1.5;
      letter-spacing: 0.5px;
      color: rgba(230, 240, 255, 0.82);
      text-transform: none;
    }

    .metrics-panel__baseline {
      display: grid;
      gap: 4px;
      font-size: 0.85rem;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .metrics-panel__baseline span {
      color: var(--accent);
    }

    .metrics-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .metrics-chip {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(150, 210, 255, 0.35);
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 0.72rem;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: rgba(220, 240, 255, 0.85);
    }

    .metrics-chip.is-inactive {
      opacity: 0.45;
    }

    .metrics-analysis {
      display: grid;
      gap: 8px;
      margin-top: 6px;
      font-size: 0.72rem;
      letter-spacing: 0.4px;
      text-transform: none;
    }

    .metrics-analysis__group {
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(10, 12, 30, 0.55);
      padding: 8px 10px;
      box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.04);
    }

    .metrics-analysis__heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 4px;
    }

    .metrics-analysis__rows {
      display: grid;
      gap: 2px;
    }

    .metrics-analysis__row {
      display: flex;
      justify-content: space-between;
      color: rgba(220, 235, 255, 0.88);
    }

    .metrics-analysis__row strong {
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.4px;
    }

    .metrics-analysis__timestamp {
      font-size: 0.65rem;
      color: rgba(255, 255, 255, 0.58);
      margin-top: 4px;
      display: block;
    }

    .metrics-analysis__empty {
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.68);
    }

    .sun-orb-wrap {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .sun-orb {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(108px, 30vw, 140px);
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      border: 1px solid rgba(255, 206, 92, 0.45);
      background:
        radial-gradient(circle, rgba(255, 222, 150, 0.45), rgba(255, 206, 92, 0.08) 68%),
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 62%),
        linear-gradient(150deg, rgba(255, 210, 120, 0.28), rgba(20, 5, 40, 0.82));
      padding: 18px;
      cursor: pointer;
      box-shadow:
        0 0 32px rgba(255, 206, 92, 0.34),
        inset 0 0 28px rgba(255, 206, 92, 0.4);
      transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

    .sun-orb:hover,
    .sun-orb:focus-visible {
      transform: translateY(-4px);
      box-shadow:
        0 0 46px rgba(255, 206, 92, 0.58),
        inset 0 0 34px rgba(255, 206, 92, 0.55);
    }

    .sun-orb__halo {
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      border: 1px solid rgba(255, 238, 190, 0.35);
      background:
        radial-gradient(circle, rgba(255, 206, 92, 0.28), rgba(255, 206, 92, 0)),
        conic-gradient(from 0deg, rgba(255, 255, 255, 0.38), rgba(255, 206, 92, 0.05), rgba(255, 255, 255, 0.38));
      box-shadow:
        0 0 30px rgba(255, 206, 92, 0.32),
        inset 0 0 26px rgba(255, 206, 92, 0.25);
      pointer-events: none;
    }

    .sun-orb__icon {
      position: relative;
      font-size: 2.1rem;
      color: rgba(255, 230, 180, 0.94);
      text-shadow: 0 0 16px rgba(255, 206, 92, 0.55);
      z-index: 1;
    }

    .sun-orb__label {
      font-size: 0.72rem;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      color: rgba(255, 235, 200, 0.85);
      text-align: center;
    }

    .solar-gate__mode {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255, 206, 92, 0.25);
      background: transparent !important;(155deg, rgba(64, 26, 90, 0.35), rgba(20, 8, 42, 0.45));
    }

    .solar-gate__mode-label {
      text-transform: uppercase;
      letter-spacing: 1.3px;
      font-size: 0.76rem;
      color: rgba(255, 230, 170, 0.85);
    }

    .solar-gate__mode-buttons {
      display: flex;
      gap: 10px;
    }

    .solar-gate__mode-btn {
      flex: 1 1 0;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 206, 92, 0.28);
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 235, 200, 0.85);
      font-family: 'Bangers', cursive;
      font-size: 0.78rem;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .solar-gate__mode-btn:hover {
      border-color: rgba(255, 220, 150, 0.6);
      background: rgba(255, 206, 92, 0.18);
      transform: translateY(-1px);
    }

    .solar-gate__mode-btn.is-active {
      border-color: rgba(255, 220, 150, 0.85);
      background: rgba(255, 206, 92, 0.32);
      color: rgba(35, 12, 45, 0.95);
      box-shadow: 0 0 14px rgba(255, 206, 92, 0.38);
    }

    .solar-gate__actions {
      margin-top: 14px;
      display: flex;
      justify-content: center;
    }

    .solar-gate__membrane-btn {
      width: 100%;
      letter-spacing: 1px;
      font-size: 0.78rem;
    }

    .dynamics-panel {
      background: transparent !important;(145deg, rgba(30, 18, 42, 0.82), rgba(10, 6, 18, 0.8));
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.05);
      overflow: hidden;
      position: relative;
      padding-top: 18px;
    }

    .dynamics-panel .field {
      margin-bottom: 14px;
    }

    .dynamics-actions {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }

    .dynamics-plot {
      position: relative;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(8, 10, 20, 0.55);
      padding: 10px;
      margin-bottom: 8px;
      max-width: 100%;
    }

    #scenarioPlotCanvas {
      width: 100%;
      height: 130px;
      display: block;
      border-radius: 12px;
      background: rgba(4, 6, 12, 0.8);
    }

    .dynamics-plot__meta {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      font-size: 0.72rem;
      letter-spacing: 0.6px;
      color: rgba(255, 255, 255, 0.72);
      text-transform: uppercase;
    }

    #scenarioPlotLabel {
      color: var(--accent);
    }

    #scenarioDiagnostics {
      color: rgba(255, 255, 255, 0.65);
    }

    .dynamics-status {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.75);
      letter-spacing: 0.6px;
    }

    .dynamics-panel.is-running .dynamics-status {
      color: var(--accent);
    }

    .chaos-panel {
      background: rgba(6, 12, 24, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.04);
      margin-top: 18px;
      overflow: visible;
    }

    .chaos-panel__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .chaos-panel__status {
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      font-size: 0.78rem;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.75);
    }

    .chaos-panel.chaos-panel--ordered .chaos-panel__status {
      color: #8ef9ff;
      border-color: rgba(142, 249, 255, 0.5);
      background: rgba(30, 120, 180, 0.25);
    }

    .chaos-panel.chaos-panel--critical .chaos-panel__status {
      color: #ffe08e;
      border-color: rgba(255, 224, 142, 0.5);
      background: rgba(100, 70, 10, 0.35);
    }

    .chaos-panel.chaos-panel--chaotic .chaos-panel__status {
      color: #ff8eae;
      border-color: rgba(255, 142, 174, 0.55);
      background: rgba(90, 10, 30, 0.35);
    }

    .chaos-panel__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .chaos-chip {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 8px 10px;
      background: rgba(10, 16, 30, 0.65);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-size: 0.7rem;
      color: rgba(210, 230, 255, 0.75);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .chaos-chip strong {
      font-size: 0.95rem;
      color: #ffffff;
    }

    .chaos-panel__route {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 0.72rem;
      color: rgba(210, 230, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .chaos-panel__route-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .chaos-route-chip {
      padding: 4px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(30, 18, 45, 0.55);
      font-size: 0.7rem;
      color: rgba(255, 255, 255, 0.78);
    }

    .chaos-route-chip.is-active {
      border-color: rgba(255, 239, 120, 0.6);
      background: rgba(120, 90, 10, 0.6);
      color: #ffec9a;
    }

    .boundary-strip {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .boundary-chip {
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      font-size: 12px;
      letter-spacing: 0.01em;
    }
    .boundary-chip.is-on {
      border-color: #ffd56f;
      background: rgba(255, 213, 111, 0.14);
      color: #ffe8b3;
    }
    .boundary-chip.is-muted {
      opacity: 0.6;
    }

    .toast {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%) translateY(120%);
      padding: 10px 18px;
      border-radius: 12px;
      background: rgba(20, 5, 40, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.18);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      font-size: 0.8rem;
      transition: transform 0.3s ease, opacity 0.3s ease;
      opacity: 0;
      pointer-events: none;
      z-index: 5;
    }

.brainwave-panel {
  position: relative;
  background: rgba(6, 8, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 14px 18px;
  box-shadow: 0 18px 40px rgba(4, 0, 20, 0.45);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      display: flex;
      flex-direction: column;
      gap: 10px;
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.brainwave-panel:not(.membrane-panel) {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 6;
}

.brainwave-panel.membrane-panel {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: calc(100vw - (var(--sidebar-shell-width, 0px) * 1) - 20px);
  width: min(100%, calc(100vw - (var(--sidebar-shell-width, 0px) * 1) - 20px));
  margin: 0 auto;
}

.brainwave-panel.is-collapsed {
  max-height: 56px;
  overflow: hidden;
  padding: 6px 14px 8px;
}

    .brainwave-panel.is-collapsed .brainwave-panel__header p {
      display: none;
    }

.brainwave-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.brainwave-panel__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brainwave-panel__header h3 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

.brainwave-panel__header p {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: rgba(220, 235, 255, 0.75);
}

.brainwave-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.brainwave-panel__light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.brainwave-panel__light.is-on {
  background: #8dffbf;
  box-shadow: 0 0 12px rgba(141, 255, 191, 0.8);
}

.brainwave-panel__light.is-connected:not(.is-on) {
  background: #ffdf8d;
  box-shadow: 0 0 10px rgba(255, 223, 141, 0.7);
}

.brainwave-panel__light.is-mock {
  background: #ffd685;
  box-shadow: 0 0 10px rgba(255, 214, 133, 0.8);
}

.brainwave-panel__controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
  row-gap: 6px;
  margin-top: 10px;
    }

.brainwave-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.brainwave-toolbar .field {
  flex: 1 1 160px;
  min-width: 160px;
}

#brainwavePsdMaxHzField,
#brainwavePsdWindowField {
  flex: 0 0 140px;
  min-width: 140px;
}

.brainwave-toolbar .field span {
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.75);
}

.brainwave-toolbar__hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: none;
}

.brainwave-toolbar__hint.is-warn {
  color: rgba(255, 223, 141, 0.92);
}

.brainwave-toolbar__diag {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  text-transform: none;
  font-family: 'Space Mono', monospace;
}

.brainwave-toolbar__diag.is-warn {
  color: rgba(255, 223, 141, 0.95);
}

.brainwave-toolbar__badge {
  align-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Space Mono', monospace;
  white-space: nowrap;
}

.brainwave-toolbar__badge.is-warn {
  border-color: rgba(255, 223, 141, 0.55);
  color: rgba(255, 223, 141, 0.95);
  box-shadow: 0 0 10px rgba(255, 223, 141, 0.18);
}

.brainwave-scale {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.brainwave-scale__toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.78);
}

.brainwave-scale__slider {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 240px;
  min-width: 220px;
}

.brainwave-scale__slider.is-disabled {
  opacity: 0.45;
}

.brainwave-scale__slider.is-disabled input {
  pointer-events: none;
}

.brainwave-scale__label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.7);
}

#brainwaveRawMaxRange {
  flex: 1 1 auto;
  min-width: 140px;
}

.brainwave-scale__readout {
  display: flex;
  align-items: center;
  gap: 6px;
}

#brainwaveRawMaxValue {
  width: 72px;
  text-align: right;
}

.brainwave-scale__unit {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.7);
}

.brainwave-calibration {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 12, 22, 0.4);
}

.brainwave-calibration__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.7);
}

.brainwave-calibration__status {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
}

.brainwave-calibration__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
}

.brainwave-calibration__controls .field {
  flex: 1 1 160px;
  min-width: 150px;
}

.brainwave-raw-readout {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brainwave-raw-readout__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.75);
}
.brainwave-raw-readout__meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.68);
  text-transform: none;
}
.brainwave-raw-readout__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  max-height: 140px;
  overflow-y: auto;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: rgba(240, 245, 255, 0.9);
}
.brainwave-raw-readout__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.brainwave-raw-readout__label {
  color: rgba(170, 200, 255, 0.85);
}
.brainwave-raw-readout__value {
  color: rgba(255, 255, 255, 0.9);
}

    .brainwave-mode-btn,
    .brainwave-collapse-btn {
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 999px;
      background: transparent !important;(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
      color: rgba(255, 255, 255, 0.88);
      text-transform: uppercase;
      font-size: 0.72rem;
      letter-spacing: 1.3px;
      padding: 6px 18px;
      cursor: pointer;
      box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08);
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .brainwave-mode-btn:hover,
    .brainwave-collapse-btn:hover {
      border-color: rgba(255, 255, 255, 0.5);
      color: #fff;
    }

    .brainwave-mode-btn.is-active {
      background: transparent !important;(145deg, rgba(255, 206, 92, 0.4), rgba(255, 130, 60, 0.25));
      border-color: rgba(255, 206, 92, 0.75);
      color: #fff;
    }

    #brainwaveCanvas {
      width: 100%;
      height: 720px;
      border-radius: 16px;
      background: rgba(2, 4, 12, 0.8);
    }

.brainwave-panel__bands {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 6px;
  max-width: 240px;
}

.brainwave-bands-grid {
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr;
  gap: 12px;
  align-items: stretch;
}

.brainwave-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

.brainwave-range {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(7, 9, 22, 0.55);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 180px;
}

.brainwave-range--wide {
  grid-column: span 1;
}

.brainwave-range--compact {
  min-height: 140px;
}

.brainwave-range__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.75);
}

#brainwaveRangeCanvas {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  background: rgba(2, 4, 12, 0.8);
}

#brainwaveLoomCanvas {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  background: rgba(2, 4, 12, 0.8);
}

#brainwavePhaseCanvas,
#brainwaveBalanceCanvas,
#brainwavePhaseLadderCanvas,
#brainwaveCouplingCanvas {
  width: 100%;
  height: 130px;
  border-radius: 12px;
  background: rgba(2, 4, 12, 0.8);
}

.brainwave-range__hint {
  margin: 0;
  font-size: 0.6rem;
  color: rgba(200, 210, 240, 0.55);
  letter-spacing: 0.06em;
}

.brainwave-band {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border 0.2s ease, background 0.2s ease;
}

.brainwave-band__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.brainwave-band.is-active {
  border-color: rgba(255, 206, 92, 0.7);
  background: rgba(255, 206, 92, 0.12);
}

.brainwave-band__label {
  font-weight: 700;
  text-transform: none;
}

.brainwave-band__value {
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
}

.brainwave-band__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: none;
}

.brainwave-band__range {
  font-family: 'Space Mono', monospace;
}

.brainwave-band__freq {
  text-align: right;
}

.brainwave-panel.is-streaming {
  box-shadow: 0 18px 40px rgba(50, 12, 70, 0.6);
  border-color: rgba(141, 255, 191, 0.35);
}

.brainwave-panel.is-connected:not(.is-streaming) {
  border-color: rgba(255, 223, 141, 0.35);
}

.brainwave-panel.is-collapsed #brainwaveCanvas,
.brainwave-panel.is-collapsed .brainwave-legend,
.brainwave-panel.is-collapsed .brainwave-single {
  display: none;
}

    .brainwave-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 0.72rem;
      letter-spacing: 1px;
      color: rgba(220, 235, 255, 0.8);
    }

    .brainwave-legend span {
      padding: 4px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(6, 8, 20, 0.7);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 6px 16px rgba(3, 3, 12, 0.45);
      text-transform: uppercase;
    }

    .brainwave-single {
      margin-top: 12px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(120, 210, 255, 0.12);
      background: rgba(6, 10, 24, 0.55);
    }

    .brainwave-single__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      color: rgba(210, 230, 255, 0.9);
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .brainwave-single__field {
      min-width: 160px;
    }

    #brainwaveSingleCanvas {
      width: 100%;
      height: 160px;
      display: block;
    }

    .intention-block {
      margin: 6px 0 14px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.04);
      display: grid;
      gap: 10px;
    }

    .intention-block__header h3 {
      margin: 0;
    }

    .intention-block .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .intention-block .field input {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      padding: 10px 12px;
      background: rgba(0, 0, 0, 0.25);
      color: #fff;
      font-size: 0.95rem;
      font-family: 'Space Mono', monospace;
    }

    .intention-presets {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .intention-presets button {
      flex: 1 1 100px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.8rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 8px 12px;
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .intention-presets button:hover,
    .intention-presets button:focus-visible {
      border-color: rgba(255, 206, 92, 0.8);
      background: rgba(255, 206, 92, 0.14);
      outline: none;
    }

    .intention-presets button.is-active {
      border-color: rgba(255, 214, 153, 0.9);
      background: rgba(255, 214, 153, 0.24);
      color: #fff;
      box-shadow: 0 0 18px rgba(255, 214, 153, 0.35);
    }

    .intention-status {
      margin: 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.78);
    }

    .intention-ring {
      --intention-ring-color: rgba(255, 215, 175, 0.9);
      --intention-ring-thickness: 4px;
      --intention-ring-opacity: 0.45;
      --intention-ring-scale: 1;
      position: fixed;
      top: 6vh;
      left: 50%;
      width: min(72vw, 960px);
      aspect-ratio: 1 / 1;
      transform: translateX(-50%) scale(var(--intention-ring-scale));
      border-radius: 999px;
      border: var(--intention-ring-thickness) solid var(--intention-ring-color);
      box-shadow:
        0 0 35px rgba(255, 255, 255, 0.15),
        0 0 95px var(--intention-ring-color);
      opacity: var(--intention-ring-opacity);
      pointer-events: none;
      z-index: 35;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 45px rgba(255, 255, 255, 0.25));
      transition:
        opacity 0.25s ease,
        transform 0.35s ease,
        border-width 0.2s ease,
        border-color 0.35s ease;
    }

    .intention-ring[hidden] {
      display: none;
    }

    .intention-ring::after {
      content: '';
      position: absolute;
      inset: 14%;
      border: 1px dashed rgba(255, 255, 255, 0.35);
      border-radius: 999px;
      opacity: 0.75;
      animation: pulseRing 8s linear infinite;
    }

    .intention-ring__label {
      position: absolute;
      bottom: -48px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.85);
      text-transform: uppercase;
      text-align: center;
      white-space: nowrap;
      pointer-events: none;
    }

    @keyframes pulseRing {
      0% { transform: scale(0.85); opacity: 0.35; }
      50% { transform: scale(1.05); opacity: 0.9; }
      100% { transform: scale(0.85); opacity: 0.35; }
    }

    .metrics-flow {
      margin-top: 12px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      padding: 12px;
      background: rgba(5, 8, 20, 0.5);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .metrics-flow__status {
      font-size: 0.86rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.88);
    }

    .metrics-flow--superfluid .metrics-flow__status {
      color: #7df9ff;
    }

    .metrics-flow__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .flow-cell {
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      padding: 8px 10px;
      text-transform: uppercase;
      font-size: 0.7rem;
      letter-spacing: 0.9px;
      color: rgba(220, 235, 255, 0.78);
    }

    .flow-cell strong {
      display: block;
      margin-top: 4px;
      font-size: 0.9rem;
      color: #ffffff;
    }

    .metrics-flow__notes {
      margin: 0;
      font-size: 0.72rem;
      letter-spacing: 0.8px;
      color: rgba(220, 235, 255, 0.68);
    }

    .toast.is-visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    @keyframes animateCloud {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }

    @keyframes glowLine {
      0% { background-position: 0% 50%; }
      100% { background-position: 400% 50%; }
    }

    .phase-map {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      padding: 1.4rem;
    }

    .phase-map__row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .phase-map__readout {
      flex: 1;
      min-width: 180px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 14px;
      padding: 0.9rem 1rem;
      box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.03);
    }

    .phase-map__label {
      display: block;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.62);
      margin-bottom: 0.2rem;
    }

    .phase-map__value {
      font-size: 1.35rem;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .phase-map__value--pulse {
      display: inline-block;
      animation: antikytheraRolloverPulse 1.1s ease-out;
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    .phase-map__toggles {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
    }

    .phase-map__hint {
      font-size: 0.88rem;
      margin: 0;
      color: rgba(255, 255, 255, 0.72);
    }

    .phase-map__hint.is-alert {
      color: #ffc760;
    }

    @keyframes antikytheraRolloverPulse {
      0% { transform: scale(1); text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
      40% { transform: scale(1.06); text-shadow: 0 0 12px rgba(255, 214, 125, 0.7); }
      100% { transform: scale(1); text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    }


    @media (max-width: 1080px) {
      .app {
        display: block;
        min-height: 100vh;
      }

      .sidebar {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: transparent !important;(180deg, rgba(20, 5, 40, 0.94), rgba(20, 5, 40, 0.92));
        z-index: 70;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        padding-top: 60px;
      }

      .sidebar.is-open {
        transform: translateX(0);
      }

      .sidebar__close {
        display: inline-flex;
      }

      .sidebar-toggle {
        display: inline-flex;
      }

      

      .membrane-layer {
        position: relative;
        top: 0;
        left: 0;
        bottom: auto;
        width: 100%;
        max-width: none;
        padding: 0 24px 80px;
      }

      body.sidebar-open {
        overflow: hidden;
      }

      .stage {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
      }

      .floating-panel {
        top: 16px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: min(92vw, 420px);
      }

      .gyro-panel {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        margin: 24px auto 0;
      }

      .sun-orb {
        margin: 0 auto;
        width: clamp(112px, 38vw, 148px);
      }
    }

    @media (max-width: 720px) {
      .floating-panel {
        width: calc(100% - 26px);
        left: 50%;
        transform: translateX(-50%);
      }

      .gyro-panel {
        width: clamp(200px, 70vw, 260px);
        height: clamp(200px, 70vw, 260px);
        margin: 20px auto 0;
      }

      .sun-orb {
        margin-top: 0;
        width: clamp(104px, 52vw, 136px);
      }
    }
.entry-door-panel {
  padding: 22px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent !important;(160deg, rgba(30, 6, 62, 0.9), rgba(18, 2, 38, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 360px;
}

.entry-door-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08), transparent 55%);
  opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: screen;
}

.menu-ring {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 54;
}

.menu-ring__circle {
  width: min(780px, 72vw);
  height: min(780px, 72vw);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 70px rgba(0, 0, 0, 0.2),
    0 0 90px rgba(80, 140, 255, 0.08);
  opacity: 0.78;
  pointer-events: none;
  position: relative;
  margin: 0 auto;
}

.menu-ring__circle::before,
.menu-ring__circle::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  opacity: 0.6;
  pointer-events: none;
}
.menu-ring__circle::after {
  inset: -18%;
  opacity: 0.42;
  animation: revolverPulse 6s ease-in-out infinite;
}

.menu-ring__slots {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  transition: opacity 0.25s ease;
  transform: scale(var(--revolver-scale, 1));
}

.menu-ring__steer {
  display: none;
}
.menu-ring__steer:hover {
}

/* Horizon Stone arrows */
.horizon-stone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.horizon-stone__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.horizon-stone__steer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.horizon-stone__arrow {
  width: 42px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent !important;(135deg, rgba(255,255,255,0.14), rgba(80,120,200,0.18));
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.horizon-stone__arrow:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.9);
}

.menu-ring__slot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 220px;
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
  outline: none;
  color: rgba(245, 245, 250, 0.92);
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(255, 255, 255, 0.42);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 1;
}
.menu-ring__slot:focus { outline: none; }
.menu-ring__slot.is-muted {
  opacity: 0;
}

.menu-ring__dot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 60%, transparent 100%);
  border: 2px dashed rgba(255, 255, 255, 0.76);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.2),
    0 0 46px rgba(120, 180, 255, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
  opacity: 0.9;
  position: relative;
  overflow: hidden;
}
.menu-ring__dot::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  opacity: 0.5;
  animation: menuSweep 4.5s ease-in-out infinite;
}
.menu-ring__dot::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  opacity: 0.5;
  animation: menuSweep 4.5s ease-in-out infinite;
}

.menu-ring__label {
  font-size: 0.78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(-10px) scale(0.9);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.menu-ring__slot:hover .menu-ring__dot {
  transform: scale(1.28);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.9),
    0 0 60px rgba(120, 180, 255, 0.35);
  opacity: 1;
}
.menu-ring__slot.is-active .menu-ring__dot {
  transform: scale(1.45);
  box-shadow:
    0 0 28px rgba(255, 255, 255, 0.95),
    0 0 70px rgba(140, 190, 255, 0.45);
}
.menu-ring__slot.is-active {
  opacity: 1;
  z-index: 2;
}

.menu-ring__slot:hover .menu-ring__label {
  color: #fff;
  text-shadow:
    0 0 14px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(255, 255, 255, 0.7);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.menu-ring[hidden] {
  display: none;
}

.menu-subcluster {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.menu-subcircle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 80%);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.2),
    0 0 22px rgba(120, 180, 255, 0.24);
  pointer-events: auto;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.menu-subcircle:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.35),
    0 0 30px rgba(140, 200, 255, 0.3);
}

.menu-subcircle.is-active {
  transform: scale(1.2);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.45),
    0 0 34px rgba(140, 200, 255, 0.32);
}

@keyframes menuSweep {
  0%, 100% { opacity: 0.4; transform: rotate(0deg); }
  50% { opacity: 0.8; transform: rotate(180deg); }
}

@keyframes revolverPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.02); }
}

.entry-door-panel > * {
  position: relative;
  z-index: 1;
}

.entry-door__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.entry-door__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 4px;
}

.entry-door__links a {
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.entry-door__links a:hover {
  border-color: rgba(255, 206, 92, 0.6);
  color: #fff;
}

.entry-door__meta {
  margin: 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6);
}

.entry-door__title {
  margin: 2px 0 0;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry-door__coords {
  display: flex;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.entry-door__coord {
  color: rgba(255, 255, 255, 0.85);
}

.entry-door__torus {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2));
  overflow: hidden;
}

.entry-door__ring {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: entryDoorPulse 6s linear infinite;
}

.entry-door__ring--inner {
  inset: 62px;
  animation-duration: 4s;
  opacity: 0.7;
}

.entry-door__node {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent !important;(145deg, #ffce5c, #ff7efc);
  box-shadow: 0 0 18px rgba(255, 126, 252, 0.75);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

@keyframes entryDoorPulse {
  0% { transform: rotate(0deg); opacity: 0.4; }
  50% { opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.4; }
}

.entry-door__intention {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entry-door__field input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

.entry-door__suggestions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.entry-door__suggestions button {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 12px;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.entry-door__suggestions button:hover {
  border-color: rgba(255, 206, 92, 0.6);
  color: #fff;
}

.entry-door__route {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.beings-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.beings-stage {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 28, 0.6);
  padding: 12px;
  margin-bottom: 14px;
}

.beings-stage__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.beings-stage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.beings-stage__title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.75);
}

.beings-stage__meta {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(125, 240, 255, 0.7);
  margin-top: 4px;
}

.beings-dropzone {
  border: 1px dashed rgba(125, 240, 255, 0.5);
  border-radius: 12px;
  padding: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(4, 8, 20, 0.6);
  margin-bottom: 10px;
}

.beings-dropzone.is-active {
  border-color: rgba(255, 206, 92, 0.8);
  color: #fff;
  background: rgba(20, 14, 6, 0.75);
}

.beings-staging {
  display: grid;
  gap: 10px;
  max-height: 180px;
  overflow: auto;
  padding-right: 6px;
}

.beings-staging__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.32);
}

.beings-staging__item.is-dragging {
  opacity: 0.5;
}

.beings-staging__name {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.beings-staging__class {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 206, 92, 0.8);
  margin-top: 4px;
}

.beings-staging__remove {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.beings-staging__remove:hover {
  border-color: rgba(255, 206, 92, 0.6);
  color: #fff;
}

.beings-next {
  margin: 6px 0 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.beings-controls .field input,
.beings-controls .field select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

.beings-stats {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}

.beings-list {
  display: grid;
  gap: 12px;
  max-height: 420px;
  overflow: auto;
  padding-right: 6px;
}

.beings-card {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.beings-card__title {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}

.beings-card__meta {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}

.beings-card__desc {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.beings-card__make {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: rgba(125, 240, 255, 0.85);
}

.beings-card.is-dragging {
  opacity: 0.5;
}

.textures-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}

.textures-dropzone {
  border: 1px dashed rgba(255, 210, 160, 0.6);
  border-radius: 14px;
  padding: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(12, 10, 6, 0.6);
}

.textures-dropzone.is-active {
  border-color: rgba(255, 224, 146, 0.95);
  color: #fff;
  background: rgba(28, 20, 12, 0.8);
}

.textures-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.textures-controls {
  margin-bottom: 14px;
}

.textures-layer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 4px;
}

.textures-layer-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 8px 0 6px;
}

.textures-layer-chip {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 26, 0.65);
  color: rgba(255, 255, 255, 0.86);
  font-family: 'Bangers', cursive;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
  text-align: left;
}

.textures-layer-chip:hover {
  border-color: rgba(255, 222, 160, 0.6);
}

.textures-layer-chip.is-active {
  border-color: rgba(255, 226, 160, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 226, 160, 0.25);
}

.textures-layer-chip.is-disabled {
  opacity: 0.55;
}

.textures-layer-chip.is-dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.textures-layer-chip.is-over {
  border-color: rgba(140, 220, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(140, 220, 255, 0.25);
}

.textures-layer-thumb {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(24, 20, 16, 0.6);
  background-size: cover;
  background-position: center;
}

.textures-layer-name {
  font-size: 0.75rem;
}

.textures-layer-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(8, 10, 24, 0.6);
}

.textures-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 6px;
}

.textures-library__meta {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 215, 255, 0.7);
  margin-bottom: 12px;
}

.textures-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.textures-bake-size {
  min-width: 140px;
}

.textures-mask-row {
  align-items: end;
}

.textures-mask-preview {
  width: 64px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 20, 0.55);
  background-size: cover;
  background-position: center;
}

.textures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.textures-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 9, 18, 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.textures-card.is-drop {
  border-color: rgba(255, 214, 140, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 214, 140, 0.25);
}

.textures-card.is-selected {
  border-color: rgba(255, 226, 160, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 226, 160, 0.3);
}

.textures-card__preview {
  position: relative;
  min-height: 150px;
  padding: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.textures-card__preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.textures-card__overlay {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(12, 14, 20, 0.65);
  color: rgba(255, 255, 255, 0.85);
}

.textures-card.is-loaded .textures-card__overlay {
  opacity: 0;
}

.textures-card__body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.textures-card__title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
}

.textures-card__note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(196, 212, 235, 0.8);
}

.textures-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.textures-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.textures-card__action {
  border: 1px dashed rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 4px 10px;
  background: transparent;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 248, 255, 0.85);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.textures-card__action:hover {
  border-color: rgba(255, 206, 92, 0.6);
  background: rgba(255, 206, 92, 0.18);
}

.textures-card__action--danger:hover {
  border-color: rgba(255, 140, 120, 0.7);
  background: rgba(255, 120, 120, 0.2);
}

.textures-card.is-hidden {
  display: none;
}

.textures-card__tag {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(76, 98, 128, 0.25);
  color: rgba(226, 236, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.textures-card__preview--paper {
  background-image:
    linear-gradient(160deg, rgba(255, 244, 224, 0.95), rgba(197, 168, 120, 0.88)),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.25) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px);
  background-size: cover, 8px 8px, 9px 9px;
}

.textures-card__preview--vitruvian {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(112, 86, 52, 0.35) 0 44%, transparent 45%),
    linear-gradient(transparent 48%, rgba(112, 86, 52, 0.4) 49%, rgba(112, 86, 52, 0.4) 51%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(112, 86, 52, 0.4) 49%, rgba(112, 86, 52, 0.4) 51%, transparent 52%),
    linear-gradient(155deg, rgba(249, 236, 208, 0.95), rgba(200, 170, 122, 0.88));
}

.textures-card__preview--egyptian {
  background-image:
    linear-gradient(120deg, rgba(244, 220, 168, 0.96), rgba(186, 146, 84, 0.88)),
    repeating-linear-gradient(90deg, rgba(146, 110, 62, 0.25) 0 2px, transparent 2px 8px);
}

.textures-card__preview--magic {
  background-image:
    radial-gradient(circle at 70% 30%, rgba(120, 98, 62, 0.4) 0 35%, transparent 36%),
    repeating-linear-gradient(0deg, rgba(110, 84, 52, 0.2) 0 1px, transparent 1px 6px),
    linear-gradient(150deg, rgba(242, 224, 188, 0.95), rgba(186, 150, 98, 0.88));
}

.textures-card__preview--kabbalah {
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 100, 68, 0.3) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg, rgba(120, 100, 68, 0.3) 0 1px, transparent 1px 10px),
    linear-gradient(135deg, rgba(236, 216, 186, 0.95), rgba(168, 138, 96, 0.86));
}

.textures-card__preview--monkey {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(116, 82, 44, 0.35) 0 18%, transparent 19%),
    repeating-linear-gradient(135deg, rgba(96, 68, 42, 0.2) 0 2px, transparent 2px 9px),
    linear-gradient(145deg, rgba(230, 206, 170, 0.95), rgba(162, 124, 78, 0.86));
}

.textures-next {
  margin-top: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(160, 220, 255, 0.75);
}

@media (max-width: 900px) {
  .textures-toolbar {
    grid-template-columns: 1fr;
  }

  .textures-actions {
    justify-content: flex-start;
  }
}

.entry-door__route header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.entry-door__shuffle {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  cursor: pointer;
}

.entry-door__route-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.entry-door__route-list li {
  color: rgba(255, 255, 255, 0.78);
  position: relative;
}

.entry-door__route-list li::marker {
  color: rgba(255, 206, 92, 0.8);
}

.entry-door__route-list li.is-pending {
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}

.entry-door__actions {
  display: flex;
  justify-content: flex-end;
}

.membrane-ui .membrane-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-left: 0;
  margin-left: 12px;
  margin-right: 12px;
}

.membrane-search--directory {
  margin-top: 18px;
}

.membrane-ui .membrane-search label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(205, 215, 235, 0.78);
  text-shadow: 0 0 10px rgba(90, 130, 210, 0.18);
  display: block;
  margin-left: 27px;
}

.membrane-search {
  position: relative;
}

.membrane-search input {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  border-radius: 999px;
  border: 1px solid rgba(140, 205, 245, 0.75) !important;
  box-shadow:
    0 0 0 0.8px rgba(12, 22, 40, 0.65),
    0 0 0 1.6px rgba(120, 190, 235, 0.45),
    0 0 10px rgba(120, 190, 235, 0.18) !important;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(10, 18, 38, 0.7), rgba(8, 14, 30, 0.58));
  background-clip: padding-box;
  display: block;
  width: calc(100% - 24px);
  margin-right: 0;
  min-height: 32px;
  color: #e9f2ff;
  font-family: 'Space Mono', monospace;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.membrane-search input::placeholder {
  color: rgba(195, 210, 235, 0.6);
}

.membrane-search input:focus {
  border-color: rgba(160, 230, 255, 1) !important;
  box-shadow:
    0 0 0 1px rgba(12, 32, 60, 0.78),
    0 0 0 1.8px rgba(160, 230, 255, 0.78),
    0 0 16px rgba(160, 230, 255, 0.28) !important;
  background: linear-gradient(180deg, rgba(14, 28, 60, 0.82), rgba(10, 22, 48, 0.72));
}
.membrane-directory--compact .membrane-directory__actions-bar,
.membrane-directory--compact .membrane-directory__stack,
.membrane-directory--compact .membrane-directory__subtitle,
.membrane-directory--compact .panel__subtitle {
  display: none !important;
}
.membrane-directory--compact .membrane-directory__content {
  padding-bottom: 8px;
  margin-top: 6px;
}
.membrane-directory--compact .membrane-search {
  margin-bottom: 6px;
}

.membrane-panel.is-search-hidden {
  display: none !important;
}

.journey-step {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.journey-step__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.journey-step__continue {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 4px 14px;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.journey-step__continue:hover {
  border-color: rgba(255, 206, 92, 0.7);
  color: #fff;
}

.geometry-morph__status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
}

.geometry-morph__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.geometry-morph__row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.geometry-morph__label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.geometry-morph__viz {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.1));
}

.geometry-morph__viz canvas {
  width: 100%;
  height: auto;
  display: block;
}

.geometry-morph__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.geometry-morph__close {
  margin-left: auto;
  padding: 6px 10px;
  line-height: 1;
}

    .membrane-tablet__label {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Barlow Condensed', 'Space Mono', sans-serif;
      font-size: 0.86rem;
      letter-spacing: 2.6px;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 12px;
      background: rgba(5, 0, 18, 0.75);
      border: 1px solid color-mix(in srgb, var(--tablet-color), white 12%);
      color: #fff;
      box-shadow:
        0 0 12px color-mix(in srgb, var(--tablet-color), transparent 40%),
        0 0 32px rgba(255, 255, 255, 0.25);
      pointer-events: none;
      text-align: center;
    }

    .pattern-control-label {
      width: 100%;
      text-align: center;
      font-family: 'Barlow Condensed', 'Space Mono', sans-serif;
      font-size: 0.92rem;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      padding: 8px 12px;
      margin: 10px auto 14px;
      border-radius: 12px;
      background: rgba(5, 0, 18, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: rgba(255, 255, 255, 0.94);
      box-shadow:
        0 0 14px rgba(255, 255, 255, 0.12),
        0 0 28px rgba(120, 200, 255, 0.25);
    }
:root {
  --horizon-stone-bg: rgba(10, 5, 25, 0.8);
  --horizon-stone-border: rgba(255, 255, 255, 0.15);
  --horizon-toggle-bg: rgba(255, 255, 255, 0.05);
  --horizon-toggle-active: rgba(255, 206, 92, 0.2);
}

.background-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.background-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
  transition: opacity 400ms ease, filter 400ms ease;
}

.background-layer[data-grid-layer="flower"] {
  opacity: 0.4;
  mix-blend-mode: lighten;
}

.background-layer[data-grid-layer="quantum"] {
  opacity: 0.5;
}

.background-layer[data-grid-layer="spiral"] {
  opacity: 0.45;
  mix-blend-mode: lighten;
}

.spiral-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spiral-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.spiral-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.spiral-card__title {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.spiral-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spiral-card.is-highlighted {
  box-shadow: 0 0 0 2px rgba(125, 214, 255, 0.35);
  border-color: rgba(125, 214, 255, 0.6);
}

.add-spiral-prompt {
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.add-spiral-prompt__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.background-layer.is-layer-disabled {
  opacity: 0;
  filter: blur(6px);
}

.sun-control {
  display: none !important;
}
.sun-ring,
.sun-core,
.sun-row,
.sun-row-timer,
.sun-puck,
#sunControl {
  display: none !important;
}

/* Nukes old orb/hide button visuals everywhere */
.sun-control,
.sun-ring,
.sun-core,
.sun-row,
.sun-row-timer,
.sun-puck,
.sun-orb,
.sun-orb-wrap,
#sunGlyph,
#sunGlyphLabel,
.sun-orb__halo,
.sun-orb__icon,
.sun-orb__label,
#sunControl,
#sunCore,
#sunRow,
#sunForce,
#sunSlotB,
#sunSlotC,
#sunRowTimer,
#sunTimerRing,
#sunTimerText,
#sunPuck,
#sunBack,
.sun-btn,
.sun-btn-large,
.sun-btn-wrap {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: fixed !important;
  left: -99999px !important;
  top: -99999px !important;
}


.circle-sun {
  display: none !important;
}
.circle-sun::before,
.circle-sun::after {
  display: none !important;
  content: none !important;
}
.sun-control,
.sun-ring,
.sun-core,
.sun-row,
.sun-row-timer,
.sun-puck,
.sun-control--fixed,
.sun-ui,
.sun-orb-wrap,
.sun-orb {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  position: fixed !important;
  left: -99999px !important;
  top: -99999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#solarGate .sun-orb-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  min-height: clamp(160px, 36vw, 220px) !important;
  margin: 6px 0 18px !important;
}

#solarGate .sun-orb,
#solarGate #sunGlyph {
  display: inline-flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: clamp(140px, 32vw, 200px) !important;
  height: clamp(140px, 32vw, 200px) !important;
  min-width: 140px !important;
  min-height: 140px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 20px !important;
}

#solarGate #sunGlyphLabel,
#solarGate .sun-orb__label {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  font-size: 0.78rem !important;
}

#solarGate .sun-orb__halo {
  display: block !important;
  opacity: 1 !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 12px !important;
}

#solarGate .sun-orb__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 2.6rem !important;
  line-height: 1 !important;
}

.sun-ring {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.08);
}

.sun-core {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.35), rgba(30, 40, 60, 0.28));
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.sun-core:hover {
  transform: scale(1.06);
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.4);
}

.sun-row {
  position: absolute;
  bottom: -38px;
  display: flex;
  gap: 10px;
}

.sun-row .mini {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(40, 30, 60, 0.8);
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sun-row-timer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.sun-row-timer .ring-fill {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 4px solid rgba(255, 206, 92, 0.4);
  box-shadow: 0 0 18px rgba(255, 206, 92, 0.28);
}

.sun-row-timer span {
  color: #fff;
  letter-spacing: 0.08em;
}

.sun-puck {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.nav-preview--sun {
  position: absolute;
  right: -140px;
  top: 50%;
  transform: translateY(-50%);
}

.sun-back-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.sun-labels {
  position: absolute;
  bottom: -38px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.sun-label {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.sun-hint {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}

.background-layer {
  pointer-events: none;
}

.horizon-stone {
  display: none;
}

.horizon-stone__pill {
  pointer-events: auto;
  border: 1px solid var(--horizon-stone-border);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(120, 90, 200, 0.28), rgba(40, 10, 60, 0.18)),
    linear-gradient(215deg, rgba(255, 180, 140, 0.22), rgba(60, 40, 110, 0.12));
  background-size: 220% 220%;
  color: rgba(255, 255, 255, 0.85);
  padding: 12px 28px;
  display: grid;
  row-gap: 6px;
  min-width: min(520px, 80vw);
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 12px 22px rgba(7, 0, 18, 0.28),
    0 0 16px rgba(120, 180, 255, 0.14),
    0 0 26px rgba(255, 206, 92, 0.14);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateY(0);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  animation: horizonGradientShift 12s ease-in-out infinite;
}

.horizon-stone__pill::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 206, 92, 0.12), transparent 42%),
              radial-gradient(circle at 70% 70%, rgba(120, 200, 255, 0.12), transparent 44%);
  filter: blur(6px);
  opacity: 0.6;
  z-index: -1;
}

.horizon-stone__pill::after {
  content: '';
  position: absolute;
  inset: -6%;
  background: transparent !important;(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: 0.22;
  z-index: -2;
}

.horizon-stone__pill:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 206, 92, 0.7);
  box-shadow:
    0 20px 32px rgba(7, 0, 18, 0.35),
    0 0 30px rgba(140, 210, 255, 0.32),
    0 0 48px rgba(255, 206, 92, 0.26),
    inset 0 0 18px rgba(255, 255, 255, 0.14);
}

@keyframes horizonGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.horizon-stone__pill-label {
  font-size: 0.9rem;
}

.horizon-stone__pill-meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 2px;
}

.horizon-stone__pill-toggles {
  display: inline-flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.pill-toggle input {
  accent-color: #ffd45c;
}

.pill-toggle__visual {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.pill-toggle__label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

.horizon-stone__panel {
  pointer-events: auto;
  width: 480px;
  max-width: calc(100vw - 20px);
  border-radius: 24px;
  border: 1px solid var(--horizon-stone-border);
  background: rgba(8, 0, 25, 0.92);
  padding: 18px 20px 16px;
  box-shadow: 0 35px 55px rgba(6, 0, 18, 0.45);
  transform-origin: top center;
  transform: translateY(-12px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.horizon-stone.is-open .horizon-stone__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.horizon-stone__panel--embedded {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  width: 100%;
  max-width: none;
  position: static;
  box-shadow: none;
  margin-top: 12px;
}

@keyframes horizonOrbit {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.65; }
  50% { transform: translate3d(6px, -4px, 0) rotate(180deg); opacity: 0.9; }
  100% { transform: translate3d(0, 0, 0) rotate(360deg); opacity: 0.65; }
}

@keyframes horizonDrift {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

.horizon-stone__title {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 10px;
}

.horizon-stone__title + .horizon-stone__hint {
  margin-top: -6px;
}

.horizon-stone__hint {
  font-size: 0.7rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.horizon-stone__section {
  margin-bottom: 18px;
}

.horizon-stone__section:last-child {
  margin-bottom: 0;
}

.horizon-stone__section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.horizon-stone__toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.horizon-stone__toggle {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--horizon-toggle-bg);
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 12px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.horizon-stone__toggle--wide {
  grid-column: span 2;
}

.horizon-stone__toggle.is-active {
  border-color: rgba(255, 206, 92, 0.85);
  background: var(--horizon-toggle-active);
  color: #fff3c9;
}

.horizon-stone__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: space-between;
}

.horizon-nav {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.2);
}

.horizon-nav__hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.68);
}

.horizon-nav__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.horizon-nav__chip {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.horizon-nav__chip:hover {
  border-color: rgba(255, 206, 92, 0.8);
  background: rgba(255, 206, 92, 0.18);
  transform: translateY(-1px);
}

.nav-board {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: min(340px, 40vw);
  max-height: 420px;
  pointer-events: auto;
  z-index: 120;
}

.nav-board--expanded {
  right: 22px;
  bottom: 22px;
  transform: none;
  width: min(620px, 70vw);
  max-height: 520px;
  display: none;
  z-index: 130;
}

.nav-board--expanded[hidden] {
  display: none;
}

.nav-board--expanded:not([hidden]) {
  display: block;
}

.nav-board--custom {
  left: 22px;
  right: auto;
  bottom: 22px;
  width: min(380px, 42vw);
  max-height: 520px;
  display: none;
  z-index: 130;
}

.nav-board--custom[hidden] {
  display: none;
}

.nav-board--custom:not([hidden]) {
  display: block;
}

.nav-board__wood {
  border: 1px solid rgba(110, 80, 40, 0.6);
  border-radius: 18px;
  padding: 14px 16px 12px;
  background:
    linear-gradient(135deg, rgba(120, 80, 45, 0.9), rgba(76, 52, 30, 0.9)),
    linear-gradient(45deg, rgba(160, 110, 60, 0.4), rgba(60, 40, 24, 0.6));
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.4);
  color: rgba(255, 245, 230, 0.9);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.nav-board__wood--expanded {
  padding: 16px 18px 14px;
  border-radius: 20px;
}

.nav-board__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.nav-board__title {
  font-size: 1.05rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 245, 230, 0.95);
}

.nav-board__subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.nav-board__hint {
  margin: 6px 0 10px;
  font-size: 0.82rem;
  color: rgba(255, 245, 230, 0.8);
}

.nav-board__cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 8px;
}

.nav-board__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nav-board__chips--expanded {
  gap: 10px;
}

.nav-board__toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.nav-board__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  letter-spacing: 0.06em;
}

.nav-board__toggle input {
  accent-color: #ffd45c;
}

.nav-board__chip {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent !important;(135deg, rgba(44, 44, 64, 0.9), rgba(26, 24, 44, 0.92));
  color: #fff;
  letter-spacing: 0.09em;
  font-size: 0.82rem;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-board__chip:hover {
  border-color: rgba(255, 206, 92, 0.8);
  background: transparent !important;(135deg, rgba(255, 206, 92, 0.18), rgba(60, 60, 90, 0.9));
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    inset 0 0 14px rgba(255, 206, 92, 0.16),
    0 10px 20px rgba(0, 0, 0, 0.4);
}

.nav-board__custom-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.nav-board__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-board__field span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255, 245, 230, 0.8);
}

.nav-board__field input[type="number"],
.nav-board__field input[type="color"] {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.15);
  padding: 8px 10px;
  color: #fff;
}

.nav-board__field input[type="range"] {
  width: 100%;
}

.nav-board__field output {
  font-size: 0.76rem;
  color: rgba(255, 245, 230, 0.75);
}

.nav-board__field--full {
  grid-column: 1 / -1;
}

.nav-board__cta {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 206, 92, 0.6);
  background: rgba(255, 206, 92, 0.12);
  color: #fff4d6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nav-board__cta:hover {
  border-color: rgba(255, 206, 92, 0.9);
  background: rgba(255, 206, 92, 0.2);
  transform: translateY(-1px);
}

.nav-board__cta--close {
  border-color: rgba(255, 120, 120, 0.6);
  background: rgba(255, 120, 120, 0.12);
  color: #ffeaea;
  float: right;
  margin-top: 0;
}

.nav-board__cta-row .nav-board__cta {
  flex: 1 1 0;
  text-align: center;
}

.horizon-stone__chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.horizon-chip {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.75rem;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  cursor: pointer;
}

.horizon-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 206, 92, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.horizon-stone__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.horizon-stone__field {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.horizon-stone__field input,
.horizon-stone__field select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(6, 0, 20, 0.9);
  color: #fff6ff;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  padding: 6px 10px;
  appearance: none;
}

.horizon-stone__field select option {
  background: rgba(6, 0, 20, 0.95);
  color: #fffaf6;
}

.horizon-stone__field select:focus {
  outline: none;
  border-color: rgba(255, 206, 92, 0.8);
  box-shadow: 0 0 12px rgba(255, 206, 92, 0.45);
}

.horizon-stone__field input[type="range"] {
  accent-color: #ffd369;
  padding: 0;
}

.horizon-stone__field output {
  font-size: 0.72rem;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.65);
}

.horizon-stone__field--full {
  grid-column: span 2;
}

.horizon-stone__field--toggle {
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: 12px;
}

.horizon-stone__sun-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.horizon-stone__sun-fields input[type="number"] {
  text-align: center;
}

.horizon-stone__preset {
  flex: 1 1 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.horizon-stone__preset:hover {
  border-color: rgba(255, 206, 92, 0.85);
  background: rgba(255, 206, 92, 0.1);
}

@media (max-width: 720px) {
  .horizon-stone {
    bottom: 16px;
  }

  .horizon-stone__panel {
    width: calc(100vw - 32px);
  }

  .horizon-stone__toggles,
  .horizon-stone__fields,
  .horizon-stone__sun-fields {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .horizon-stone__field--full {
    grid-column: span 1;
  }

  .horizon-stone__toggle--wide {
    grid-column: span 1;
  }
}
.membrane-directory-panel {
  position: relative;
  overflow: hidden;
  margin: 12px auto;
}

.membrane-directory-panel .panel__toolbar {
  margin-top: 12px;
}

.membrane-pin-controls {
  margin-left: auto;
  display: none;
  gap: 8px;
  align-items: center;
}

.membrane-directory-panel.panel--floating .membrane-pin-controls {
  display: none !important;
}

.membrane-pin-controls,
.membrane-pin-btn,
#membraneDirectoryPanel .membrane-pin-controls,
#membraneDirectoryPanel .membrane-pin-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.membrane-pin-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.membrane-pin-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.membrane-pin-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.22);
}

.membrane-pin-btn--left::before,
.membrane-pin-btn--right::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.membrane-pin-btn--left::before {
  border-right: 9px solid rgba(255, 255, 255, 0.85);
  transform: translateX(-2px);
}

.membrane-pin-btn--right::before {
  border-left: 9px solid rgba(255, 255, 255, 0.85);
  transform: translateX(2px);
}

.membrane-pin-btn--circle::before,
.membrane-pin-btn--circle::after {
  content: none;
}

.membrane-pin-btn--circle {
  background: transparent;
  box-shadow: none;
}

.membrane-directory__stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.membrane-directory__block {
  border: none !important;
  border-radius: 18px;
  padding: 12px;
  background: transparent !important;
  box-shadow: none !important;
}

.membrane-directory__block--designer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.membrane-directory__block--list {
  max-height: none;
  min-height: 0;
  overflow: visible;
}

.time-map {
  background:
    radial-gradient(circle at 18% 14%, rgba(0, 140, 255, 0.22), transparent 64%),
    radial-gradient(circle at 86% 22%, rgba(0, 210, 255, 0.12), transparent 68%),
    linear-gradient(165deg, rgba(6, 12, 34, 0.92), rgba(6, 8, 22, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.time-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  mix-blend-mode: normal;
  opacity: 0;
  filter: none;
  animation: none;
  pointer-events: none;
}

.time-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  mix-blend-mode: normal;
  opacity: 0;
  pointer-events: none;
}

@keyframes iridescentSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.membrane-directory__backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0 !important;
  display: none !important;
}

.membrane-directory__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: inherit;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.membrane-directory__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: clamp(240px, 45vh, 560px);
  padding: 6px 8px 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.35) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 220, 255, 0.6) transparent;
}
:root {
  color-scheme: dark;
}

.imean-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, #1d103f 0%, #0b0722 45%, #030112 100%);
  z-index: -1;
}

.imean-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 25%, rgba(120, 90, 200, 0.35) 0%, rgba(15, 10, 45, 0) 55%);
  mix-blend-mode: screen;
  opacity: 0.85;
}
:root {
  --grid-bg-start: #1d103f;
  --grid-bg-mid: #0b0722;
  --grid-bg-end: #030112;
  --grid-glow: rgba(120, 90, 200, 0.35);
  --grid-line: rgba(222, 210, 255, 0.4);
  --grid-line-strong: rgba(222, 210, 255, 0.8);
  transparent: rgba(10, 8, 24, 0.8);
  --panel-border: rgba(255, 255, 255, 0.18);
  --text: rgba(245, 235, 255, 0.9);
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 20%, var(--grid-bg-start) 0%, var(--grid-bg-mid) 45%, var(--grid-bg-end) 100%);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------------------------------
   No-glass panels: remove blur + glow edges across the UI.
   ------------------------------------------------------------------------- */
.panel,
.floating-panel,
.membrane-panel,
.sidebar-shell {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.panel,
.floating-panel,
.membrane-panel {
  box-shadow: 0 22px 40px rgba(6, 4, 16, 0.45) !important;
}

.panel::before,
.panel::after,
.floating-panel::before,
.floating-panel::after,
.membrane-panel::before,
.membrane-panel::after {
  content: none !important;
}

#grid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.grid-builder {
  position: fixed;
  top: 24px;
  right: 24px;
  width: min(360px, 92vw);
  padding: 16px;
  border-radius: 18px;
  background: var(transparent);
  border: 1px solid var(--panel-border);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
}

.grid-builder h2 {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grid-builder .field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.grid-builder input[type="number"],
.grid-builder input[type="range"] {
  width: 100%;
}

.grid-builder .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.grid-builder label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.grid-builder__button {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}



.membrane-swipe-return:hover::after,
.membrane-swipe-return:hover .membrane-swipe-return__dot {
  transform: scale(1.1);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.membrane-swipe-return.is-active {
  opacity: 1;
  pointer-events: auto;
}
.everything__stack {
  display: grid;
  gap: 10px;
  padding: 8px 4px;
}
.everything__controls {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 8px 4px 0;
}
.everything__layer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.everything__layer strong {
  letter-spacing: 0.4px;
}
.everything__layer span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Platonic solid cards */
.solid-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: transparent !important;
  box-shadow: none !important;
}
.solid-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8f1ff;
  margin-bottom: 8px;
}
.solid-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd37a;
  box-shadow: 0 0 8px rgba(255, 211, 122, 0.7);
  display: inline-block;
}
.solid-card .toggle { margin-bottom: 8px; }
.solid-card .control { margin-bottom: 8px; }
.solid-card--footer { margin-top: 16px; }
.cloud-list {
  margin-top: 8px;
}
.cloud-count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.cloud-count-row input[type="number"] {
  width: 86px;
}
.cloud-offsets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cloud-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cloud-debug-overlay {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2100;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 12, 22, 0.88);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  color: rgba(240, 245, 255, 0.94);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: min(520px, 92vw);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cloud-debug-overlay__title {
  font-weight: 600;
  margin-bottom: 6px;
}
.cloud-debug-overlay__body {
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  max-height: 40vh;
  overflow: auto;
}
.joystick-hud {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2100;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 12, 22, 0.88);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  color: rgba(240, 245, 255, 0.92);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  max-width: min(240px, 72vw);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.joystick-hud__title {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}
.joystick-hud__modes {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.78);
}
.joystick-hud__grid {
  display: grid;
  gap: 6px;
}
.joystick-hud__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.joystick-hud__value {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.95);
}
.joystick-hint {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2100;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 26, 0.86);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  color: rgba(240, 245, 255, 0.9);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  max-width: min(640px, 92vw);
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 760px) {
  .joystick-hud {
    right: 12px;
    left: 12px;
    bottom: 64px;
    max-width: none;
  }
  .joystick-hint {
    bottom: 12px;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    padding: 6px 10px;
  }
}

/* Legacy sidebars: keep panels readable (tinted), but avoid blur-heavy chrome. */
#sidebar,
#sidebarRight {
  background: transparent;
  box-shadow: none;
  border: none;
}

#sidebar .sidebar-topbar,
#sidebarRight .sidebar-topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#sidebar .panel,
#sidebarRight .panel,
#sidebar .floating-panel,
#sidebarRight .floating-panel,
#sidebar .membrane-panel,
#sidebarRight .membrane-panel,
#sidebar .membrane-directory-panel,
#sidebarRight .membrane-directory-panel,
#sidebar #membraneDirectoryPanel,
#sidebarRight #membraneDirectoryPanel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Global background overrides to keep canvas visible */
html, body, .app, .stage, .mainstage {
  background: transparent !important;
}
.sidebar-shell {
  position: fixed;
  top: 16px;
  right: 16px;
  left: auto;
  width: 420px;
  max-width: 420px;
  max-height: calc(100vh - 24px);
  min-height: 520px;
  background: rgba(12, 10, 40, 0.35);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  z-index: 300;
  display: none; /* default hidden */
  flex-direction: column;
  overflow: visible;
  pointer-events: auto;
}
.sidebar-shell.is-overlay { display: flex; }
.sidebar-shell.is-docked { display: flex; right: auto; left: 16px; }
.sidebar-shell.is-hidden { display: none !important; }
.sidebar-shell.is-overlay ~ #sidebarRight {
  right: calc(16px + var(--sidebar-shell-width, 0px) + 16px);
}
.sidebar-shell.is-docked ~ #sidebar {
  left: calc(16px + var(--sidebar-shell-width, 0px) + 16px);
}
.sidebar-shell--compact {
  width: 420px;
}
.sidebar-shell--expanded {
  width: clamp(520px, 48vw, 640px);
}
.sidebar-shell__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(10, 8, 30, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-shell__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-shell__controls--left {
  margin-right: auto;
}

/* Keep only the side hide handle; remove the top circular shell controls. */
.sidebar-shell__controls--left .sidebar-shell__toggle {
  display: none !important;
}
.sidebar-hide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 104px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65));
  color: rgba(255, 255, 255, 0.8);
  font-size: 22px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  z-index: 2;
}
#sidebar .sidebar-hide {
  right: -14px;
}
#sidebarRight .sidebar-hide {
  left: -14px;
}
.sidebar-hide:hover {
  filter: brightness(1.08);
}

.sidebar-shell .sidebar-hide {
  left: -14px;
  right: auto;
}
.sidebar-shell.is-docked .sidebar-hide {
  right: -14px;
  left: auto;
}

.sidebar-reveal {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 290;
}
.sidebar-reveal--left { left: 8px; }
.sidebar-reveal--right { right: 8px; }
.sidebar-reveal:hover { filter: brightness(1.08); }

.sidebar-shell__reveal {
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  position: fixed;
  overflow: visible;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 290;
}
.sidebar-shell__reveal-icon {
  pointer-events: none;
}
.sidebar-shell__reveal.is-locked .sidebar-shell__reveal.is-locked {
  filter: grayscale(0.15) brightness(0.9);
  cursor: not-allowed;
}
.sidebar-shell__reveal--left { left: 8px; }
.sidebar-shell__reveal--right { right: 8px; }
.sidebar-shell.is-hidden[data-last-side="left"] ~ .sidebar-shell__reveal--left { display: grid; }
.sidebar-shell.is-hidden[data-last-side="right"] ~ .sidebar-shell__reveal--right { display: grid; }
.sidebar-shell__reveal:hover { filter: brightness(1.08); }

.sidebar-shell .membrane-directory__content,
.sidebar-shell .membrane-directory__block--list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.sidebar-shell .membrane-directory__content::-webkit-scrollbar,
.sidebar-shell .membrane-directory__block--list::-webkit-scrollbar {
  width: 8px;
}
.sidebar-shell .membrane-directory__content::-webkit-scrollbar-track,
.sidebar-shell .membrane-directory__block--list::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-shell .membrane-directory__content::-webkit-scrollbar-thumb,
.sidebar-shell .membrane-directory__block--list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 118, 46, 0.85), rgba(255, 0, 153, 0.75));
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.sidebar-shell__title {
  font-size: 16px;
  letter-spacing: 0.8px;
  color: #ffdede;
  font-family: 'Bangers', 'Anton', 'Inter', sans-serif;
  text-shadow: 0 0 8px rgba(255, 0, 153, 0.6), 0 0 12px rgba(0, 255, 255, 0.4);
}
.sidebar-shell__toggle {
  background: rgba(255, 255, 255, 0.1);
  color: #f4f6ff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  padding: 0;
  width: 36px;
  height: 36px;
  font-size: 12px;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-shell__toggle--roll {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.sidebar-shell__toggle[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.2);
  color: #0d0c26;
}
.sidebar-shell__toggle {
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
}
.sidebar-shell__toggle:hover { background: rgba(255, 255, 255, 0.18); }
.membrane-directory__actions-bar {
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}

.membrane-presets {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 24, 0.35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  display: grid;
  gap: 10px;
  z-index: 120;
  transform-origin: top right;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 140ms ease, transform 140ms ease;
}

.membrane-presets[hidden] {
  display: none !important;
}

.membrane-presets.is-open {
  animation: membraneDropdownIn 160ms ease both;
}

@keyframes membraneDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.membrane-presets__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.membrane-presets__title {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 240, 255, 0.78);
}

.membrane-presets__hint {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 240, 255, 0.55);
}

.membrane-presets__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.membrane-directory__add-sm {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(6, 6, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sm-library-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 18, 0.7);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 520;
}
.sm-library-overlay[hidden] {
  display: none !important;
}

.sm-library-card {
  width: min(720px, 92vw);
  max-height: min(70vh, 720px);
  background: linear-gradient(160deg, rgba(23, 18, 50, 0.98), rgba(10, 9, 24, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px 18px 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sm-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sm-library-header h3 {
  font-size: 18px;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f6e7ff;
}

.sm-library-search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(9, 8, 24, 0.7);
  color: #f4f4ff;
}

.sm-library-paywall {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(120, 214, 255, 0.24);
  background:
    radial-gradient(circle at 20% 30%, rgba(90, 180, 255, 0.16), transparent 55%),
    radial-gradient(circle at 80% 40%, rgba(182, 140, 255, 0.14), transparent 62%),
    rgba(7, 6, 20, 0.72);
}

.sm-library-paywall__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sm-library-paywall__title {
  font-family: "Orbitron", "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(210, 240, 255, 0.95);
}

.sm-library-paywall__copy {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(240, 244, 255, 0.78);
}

.sm-library-paywall__price {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 230, 166, 0.22);
  background: rgba(255, 230, 166, 0.08);
  color: rgba(255, 236, 190, 0.92);
  white-space: nowrap;
}

.sm-library-paywall__contact {
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(240, 244, 255, 0.78);
  align-self: center;
  text-align: right;
  max-width: 260px;
  line-height: 1.35;
}

.sm-library-paywall__email {
  color: rgba(170, 230, 255, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(170, 230, 255, 0.25);
}

.sm-library-paywall__email:hover {
  border-bottom-color: rgba(170, 230, 255, 0.55);
}

.sm-library-list {
  overflow-y: auto;
  padding-right: 6px;
  display: grid;
  gap: 10px;
}

.sm-library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 6, 20, 0.7);
}

.sm-library-item__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sm-library-item__title {
  font-size: 14px;
  color: #f0effa;
}

.sm-library-item__status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.sidebar-shell__toggle--dashed {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.sidebar-shell__toggle--float {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(8, 10, 24, 0.6);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  color: transparent;
}
.sidebar-shell__toggle--float::before,
.sidebar-shell__toggle--float::after {
  content: none;
}
.sidebar-shell__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 220, 255, 0.65) transparent;
}
.sidebar-shell__body::-webkit-scrollbar {
  width: 10px;
}
.sidebar-shell__body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  margin: 6px 0;
}
.sidebar-shell__body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(113, 250, 255, 0.75), rgba(255, 118, 46, 0.65));
  border-radius: 999px;
  border: 2px solid rgba(6, 6, 16, 0.75);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}
.sidebar-shell__body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(113, 250, 255, 0.9), rgba(255, 118, 46, 0.8));
}
.sidebar-shell__dock {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 4px 12px;
}
.sidebar-shell__dock .membrane-panel {
  width: 100%;
  margin: 0;
  padding-top: 18px;
}
.sidebar-shell__dock .panel-chrome {
  position: relative;
  top: auto;
  z-index: 1;
}
.sidebar-shell #membraneDirectoryPanel {
  width: 100%;
  margin: 0;
  padding: 16px 12px 18px;
  background: linear-gradient(165deg, rgba(12, 24, 62, 0.88), rgba(8, 10, 26, 0.86)) !important;
  border: 1px solid rgba(125, 214, 255, 0.20) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
}
.sidebar-shell .membrane-directory-panel.time-map,
.sidebar-shell .membrane-directory-panel::before,
.sidebar-shell .membrane-directory-panel::after {
  background: transparent !important;
  border-image: linear-gradient(135deg, rgba(255, 118, 46, 0.6), rgba(255, 0, 153, 0.5), rgba(0, 255, 255, 0.5)) 1;
}
.sidebar-shell .membrane-directory__content {
  margin-top: 8px;
  padding: 0 0 12px;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.sidebar-shell .membrane-directory__stack {
  gap: 16px;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
.sidebar-shell .membrane-directory__block--list {
  max-height: none;
  min-height: 0;
  overflow: visible;
  width: 100%;
}
.sidebar-shell .membrane-directory__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.4) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 220, 255, 0.7) transparent;
}

.sidebar-shell .membrane-directory__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-image: radial-gradient(circle at 10% 20%, rgba(255, 0, 153, 0.14), transparent 30%), radial-gradient(circle at 80% 10%, rgba(0, 255, 255, 0.16), transparent 32%), radial-gradient(circle at 20% 70%, rgba(255, 208, 0, 0.12), transparent 30%);
  border-radius: 12px;
  padding: 0;
  width: 100%;
}
.sidebar-shell .panel__toolbar.membrane-ui__toolbar {
  margin-top: 2px;
}
.sidebar-shell .membrane-directory__stack {
  display: flex;
}

/* Hide legacy membrane layer by default */
#membraneLayer,
.membrane-layer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Hide legacy sidebar chrome completely */
.sidebar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.has-pinned-sidebars .sidebar {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.has-pinned-sidebars #sidebar .panel,
body.has-pinned-sidebars #sidebarRight .panel,
body.has-pinned-sidebars #sidebar .membrane-panel,
body.has-pinned-sidebars #sidebarRight .membrane-panel {
  background: linear-gradient(155deg, rgba(20, 8, 38, 0.92), rgba(12, 4, 24, 0.78)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 28px 45px rgba(6, 4, 16, 0.55),
    inset 0 0 32px rgba(255, 255, 255, 0.08),
    inset 0 0 60px rgba(120, 90, 200, 0.12) !important;
}

/* Circle chips (placeholder styling) */
.circle-chips {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 280;
}
.circle-chips .chip {
  position: absolute;
  pointer-events: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #f4f6ff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
}

/* Desk bar (placeholder styling) */
.desk-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  min-height: 36px;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  --desk-chip-width: 120px;
  --desk-max-visible: 10;
  background: rgba(12, 10, 40, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  z-index: 280;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 246, 255, 0.35) rgba(12, 10, 40, 0.18);
}

.desk-bar.desk-bar--limit {
  width: min(calc((var(--desk-max-visible) * (var(--desk-chip-width) + 8px)) + 20px), calc(100% - 24px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

body.has-desk-bar .sidebar-shell {
  max-height: calc(100vh - 24px - 72px);
}

.desk-bar[aria-hidden="true"] {
  display: none;
}
.desk-bar .chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #f4f6ff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  pointer-events: auto;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.desk-bar::-webkit-scrollbar {
  height: 8px;
}
.desk-bar::-webkit-scrollbar-track {
  background: rgba(12, 10, 40, 0.18);
  border-radius: 999px;
}
.desk-bar::-webkit-scrollbar-thumb {
  background: rgba(244, 246, 255, 0.35);
  border-radius: 999px;
}

/* Panel chrome (placeholder) */
.panel-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  padding: 6px 10px;
  background: rgba(12, 10, 40, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px 12px 0 0;
  backdrop-filter: blur(12px);
  z-index: 50;
  pointer-events: auto;
}
.panel-chrome .ghost-btn {
  padding: 4px 8px;
  font-size: 12px;
}
.panel-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7dd6ff;
  align-self: center;
}
.panel-chrome__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.panel-chrome__title {
  font-size: 13px;
  font-weight: 600;
  color: #eef3ff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.panel-chrome__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.slice-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.slice-strip__cell {
  height: 14px;
  border-radius: 999px;
  background: rgba(100, 180, 255, 0.12);
  border: 1px solid rgba(100, 180, 255, 0.18);
  overflow: hidden;
  position: relative;
}

.slice-strip__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(64, 200, 255, 0.45), rgba(90, 120, 255, 0.65));
  opacity: 0.9;
}

.slice-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.slice-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(160, 190, 255, 0.12);
  overflow: hidden;
  position: relative;
}

.slice-thumb.is-active {
  border-color: rgba(120, 210, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(120, 210, 255, 0.25), 0 0 24px rgba(120, 210, 255, 0.18);
}

.slice-thumb canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.slice-strip.is-dragging,
.slice-thumbs.is-dragging {
  cursor: grabbing;
}

/* Circle & Square panel: allow scrolling if tall and keep it narrow */
#circleSquarePanel {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  width: min(460px, 90vw);
  max-width: 480px;
}

/* Everything focus mode */
body.focus-everything #circleChips {
  display: none !important;
}

body.focus-everything #everythingPanel.panel--floating {
  width: min(640px, 92vw);
  max-width: min(640px, 92vw);
}

.dot-circle-panel__canvas {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(125, 214, 255, 0.18);
  background: radial-gradient(circle at 35% 20%, rgba(20, 32, 60, 0.65), rgba(6, 10, 18, 0.95));
  min-height: 260px;
  margin: 12px 0 16px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(60, 120, 200, 0.2);
}

.dot-circle-panel__canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.dot-circle-panel__hud {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(210, 235, 255, 0.7);
  pointer-events: none;
}

.account-social-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.account-panel--social .panel__header {
  padding-bottom: 4px;
}

.social-scroll {
  display: grid;
  gap: 14px;
}

.social-card {
  border-radius: 18px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(120, 156, 255, 0.2);
  background: linear-gradient(160deg, rgba(35, 22, 70, 0.9), rgba(8, 6, 20, 0.92));
  box-shadow: inset 0 0 24px rgba(120, 140, 240, 0.12);
  display: grid;
  gap: 12px;
}

.social-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.social-card__title {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248, 248, 255, 0.86);
}

.social-card__meta {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(182, 196, 255, 0.6);
}

.account-social-section textarea {
  min-height: 82px;
  resize: vertical;
}

.signal-preview {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(240, 220, 160, 0.18);
  background: rgba(14, 10, 28, 0.7);
  color: rgba(248, 240, 210, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal-preview[data-symbol="lol"] { border-color: rgba(240, 220, 160, 0.3); }
.signal-preview[data-symbol="spiral"] { border-color: rgba(185, 140, 255, 0.35); }
.signal-preview[data-symbol="bullseye"] { border-color: rgba(255, 160, 120, 0.35); }
.signal-preview[data-symbol="point"] { border-color: rgba(120, 230, 220, 0.35); }

.donute-thread-list {
  display: grid;
  gap: 8px;
}

.donute-thread {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 10, 24, 0.72);
}

.donute-thread.is-empty {
  color: rgba(255, 255, 255, 0.45);
  justify-content: center;
  font-size: 0.8rem;
}

.donute-thread__tone {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.donute-thread__tone.tone-gold { background: #f5d27a; }
.donute-thread__tone.tone-violet { background: #b77bff; }
.donute-thread__tone.tone-aqua { background: #7ef6e4; }
.donute-thread__tone.tone-ember { background: #ff9b6a; }

.donute-thread__text {
  font-size: 0.8rem;
  color: rgba(244, 244, 255, 0.9);
}

.presence-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(200, 210, 255, 0.7);
}

.presence-value {
  color: rgba(248, 232, 180, 0.9);
}

/* Auth overlay */
.auth-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr; /* Force vertical stacking (no implicit multi-column auto-placement). */
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  gap: 22px;
  padding: 24px;
  background: rgba(6, 6, 18, 0.78);
  backdrop-filter: blur(14px);
  z-index: 600;
}

.auth-overlay[hidden] {
  display: none !important;
}

/* Profile pill */
.profile-pill {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 320;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 8, 26, 0.7);
  color: rgba(245, 240, 255, 0.92);
  font-family: 'Bangers', cursive;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}


.profile-pill__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  background: rgba(125, 214, 255, 0.8);
  color: rgba(10, 6, 22, 0.9);
  box-shadow: 0 0 10px rgba(125, 214, 255, 0.6);
  background-size: cover;
  background-position: center;
}

.profile-pill__avatar.has-photo {
  color: transparent;
}


.account-profile {
  margin: 14px 0 18px;
}

/* Profile panel */
.profile-card {
  display: grid;
  gap: 6px;
  text-align: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 6, 20, 0.7);
}

.profile-card__avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: radial-gradient(circle at 30% 30%, #f4d37e, #7b4bff 70%);
  color: #1a0f36;
}

.profile-card__name {
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.profile-card__email,
.profile-card__presence {
  font-size: 0.8rem;
  color: rgba(225, 230, 255, 0.7);
}

.profile-meta {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 7, 20, 0.6);
}

.profile-meta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(210, 218, 255, 0.65);
}

.profile-meta__value {
  color: rgba(244, 232, 190, 0.92);
}

.auth-overlay.is-visible {
  animation: authFade 0.3s ease;
}

@keyframes authFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-card {
  width: min(520px, 92vw);
  border-radius: 18px;
  padding: 18px 18px 22px;
  background: linear-gradient(155deg, rgba(20, 8, 38, 0.92), rgba(12, 4, 24, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 28px 45px rgba(6, 4, 16, 0.55), inset 0 0 32px rgba(255, 255, 255, 0.08);
}

.auth-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.auth-card__header > div {
  width: 100%;
  text-align: center;
}

#authOverlayClose {
  display: none !important;
}

.auth-card__kicker {
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(210, 220, 255, 0.6);
}

.auth-card__title {
  margin: 4px 0 0;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.auth-card__status {
  margin: 6px 0 14px;
  color: rgba(230, 236, 255, 0.7);
  font-size: 0.85rem;
  text-align: center;
}

/* Big mission lines above the auth card */
.auth-hero {
  width: min(860px, calc(100vw - 48px));
  text-align: center;
  position: relative;
  padding: 8px 10px 0;
}

.auth-hero::before {
  content: '';
  position: absolute;
  inset: -26px -14px -22px;
  background:
    radial-gradient(circle at 40% 40%, rgba(0, 170, 255, 0.26), transparent 56%),
    radial-gradient(circle at 68% 35%, rgba(182, 140, 255, 0.24), transparent 60%),
    radial-gradient(circle at 55% 72%, rgba(90, 180, 255, 0.14), transparent 62%);
  filter: blur(16px);
  opacity: 0.92;
  pointer-events: none;
  z-index: -1;
}

.auth-hero__line {
  margin: 0;
  font-family: "Orbitron", "Barlow Condensed", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 6.4vw, 4.9rem);
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-wrap: balance;
  color: transparent;
  background: linear-gradient(90deg,
    rgba(210, 250, 255, 0.98),
    rgba(125, 214, 255, 0.96),
    rgba(92, 168, 255, 0.96),
    rgba(182, 140, 255, 0.96)
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10);
  text-shadow:
    0 26px 80px rgba(0, 0, 0, 0.65),
    0 0 42px rgba(125, 214, 255, 0.22);
  animation: authShimmer 10s ease-in-out infinite;
}

.auth-overlay.is-visible .auth-hero__line {
  animation-play-state: running;
}

@keyframes authShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-hero__line {
    animation: none;
  }
}

.auth-hero__sub {
  margin: 12px 0 0;
  font-family: "Orbitron", "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.8vw, 1.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(170, 230, 255, 0.92);
  text-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
}

.auth-card__header button {
  display: none !important;
}


.membrane-xdock {
  position: fixed;
  left: 50%;
  bottom: 12px;
  --xdock-shift: -96px;
  transform: translateX(calc(-50% + var(--xdock-shift)));
  width: min(780px, calc(100vw - 24px));
  z-index: 281;
  display: grid;
  gap: 8px;
  justify-items: end;
  pointer-events: none;
}

.membrane-xdock > * {
  pointer-events: auto;
}

.membrane-xdock .membrane-xbar {
  width: 100%;
  margin: 0;
}

@media (max-width: 720px) {
  .membrane-xdock {
    width: calc(100vw - 16px);
    bottom: 8px;
    --xdock-shift: -12px;
  }
}

.membrane-xbar {
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid rgba(123, 184, 255, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 24, 52, 0.56), rgba(8, 14, 32, 0.52));
  display: grid;
  gap: 8px;
}

.membrane-xbar[hidden] {
  display: none !important;
}

.membrane-xbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.membrane-xbar__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.membrane-xbar--collapsed .membrane-xbar__field,
.membrane-xbar--collapsed .membrane-xbar__history {
  display: none !important;
}


.membrane-xbar__title {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(202, 228, 255, 0.92);
}

.membrane-xbar__field {
  display: grid;
  gap: 4px;
}

.membrane-xbar__field > span {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(197, 222, 255, 0.74);
}

.membrane-xbar__field input,
.membrane-xbar__field textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(130, 185, 255, 0.34);
  background: rgba(6, 14, 34, 0.8);
  color: rgba(234, 243, 255, 0.96);
  padding: 8px 10px;
  font-size: 0.84rem;
  line-height: 1.35;
}

.membrane-xbar__field textarea {
  resize: vertical;
  min-height: 54px;
  max-height: 160px;
}

.membrane-xbar__actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.membrane-xbar__history {
  border-top: 1px solid rgba(129, 182, 255, 0.22);
  padding-top: 8px;
  display: grid;
  gap: 6px;
}

.membrane-xbar__history-title {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(197, 222, 255, 0.74);
}

.membrane-xbar__history-list {
  display: grid;
  gap: 7px;
  max-height: 170px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(118, 170, 240, 0.26);
  background: rgba(8, 16, 36, 0.6);
}

.membrane-xbar--expanded .membrane-xbar__history-list {
  max-height: 300px;
}

.membrane-xbar__item {
  border: 1px solid rgba(118, 170, 240, 0.24);
  border-radius: 10px;
  background: rgba(9, 17, 38, 0.74);
  padding: 8px;
  display: grid;
  gap: 4px;
}

.membrane-xbar__item-text {
  color: rgba(232, 242, 255, 0.94);
  font-size: 0.82rem;
  line-height: 1.35;
  white-space: pre-wrap;
}

.membrane-xbar__item-meta {
  color: rgba(176, 204, 238, 0.76);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.membrane-xbar__item-target {
  color: rgba(156, 196, 238, 0.86);
  font-size: 0.72rem;
  line-height: 1.3;
  word-break: break-all;
}

.membrane-xbar__item-link {
  color: rgba(145, 214, 255, 0.95);
  font-size: 0.78rem;
  text-decoration: none;
}

.membrane-xbar__item-link:hover {
  text-decoration: underline;
}

/* Responsive layout pass: tablet and phone */
@media (max-width: 1100px) {
  .sidebar-shell {
    top: 12px;
    right: 12px;
    width: min(420px, calc(100vw - 24px));
    max-width: min(420px, calc(100vw - 24px));
    min-height: min(520px, calc(100svh - 24px));
    max-height: calc(100svh - 24px);
  }

  .sidebar-shell.is-docked {
    left: 12px;
  }

  .sidebar-shell--expanded {
    width: min(520px, calc(100vw - 24px));
  }

  .sidebar-shell .membrane-directory__scroll {
    max-height: calc(100svh - 360px);
  }

  .membrane-xdock {
    width: min(700px, calc(100vw - 20px));
    --xdock-shift: -44px;
  }
}

@media (max-width: 820px) {
  .donut-institute-nav {
    top: 10px;
    left: 10px;
  }

  .donut-institute-badge {
    max-width: calc(100vw - 20px);
    font-size: 10px;
    padding: 7px 11px;
    letter-spacing: 0.05em;
  }

  .donut-institute-links {
    min-width: 0;
    width: min(320px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
  }

  .attention-tagline {
    top: 10vh;
    width: min(94vw, 760px);
    padding: 6px 10px;
  }

  .attention-tagline__main {
    letter-spacing: 0.14em;
  }

  .attention-tagline__sub {
    letter-spacing: 0.06em;
  }

  .sidebar-shell,
  .sidebar-shell.is-overlay,
  .sidebar-shell.is-docked {
    top: 58px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    min-height: 0;
    height: calc(100svh - 132px);
    max-height: calc(100svh - 132px);
  }

  .sidebar-shell .sidebar-hide,
  .sidebar-shell.is-docked .sidebar-hide {
    left: auto;
    right: 8px;
    top: 8px;
    transform: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 20px;
    line-height: 1;
  }

  .sidebar-shell__body {
    gap: 14px;
    padding-bottom: 8px;
  }

  .sidebar-shell #membraneDirectoryPanel {
    padding: 12px 10px 14px;
    border-radius: 12px !important;
  }

  #membraneDirectoryPanel,
  #membraneDirectoryPanel.panel--floating,
  .sidebar .membrane-directory-panel,
  #sidebarRight .membrane-directory-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  body.has-desk-bar .sidebar-shell {
    max-height: calc(100svh - 184px);
    height: calc(100svh - 184px);
  }

  .desk-bar {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    min-height: 34px;
    padding: 5px 8px;
    gap: 6px;
  }

  .desk-bar .chip {
    font-size: 11px;
    padding: 5px 8px;
  }

  .membrane-xdock {
    width: calc(100vw - 12px);
    transform: translateX(-50%);
    --xdock-shift: 0px;
    justify-items: stretch;
  }

  .membrane-xbar {
    margin: 4px 0 8px;
    padding: 9px;
    border-radius: 10px;
    gap: 6px;
  }

  .membrane-xbar__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .membrane-xbar__header-actions {
    width: 100%;
    gap: 6px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .membrane-xbar__header-actions .ghost-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
  }

  .membrane-xbar__field textarea {
    min-height: 48px;
    max-height: 140px;
  }

  .membrane-xbar__history-list {
    max-height: 140px;
  }

  .membrane-xbar--expanded .membrane-xbar__history-list {
    max-height: 220px;
  }
}

@media (max-width: 560px) {
  .donut-institute-badge {
    font-size: 9px;
  }

  .attention-tagline {
    top: 9vh;
  }

  .attention-tagline__main {
    font-size: 0.92rem;
    letter-spacing: 0.1em;
  }

  .attention-tagline__sub {
    font-size: 0.72rem;
  }

  .sidebar-shell,
  .sidebar-shell.is-overlay,
  .sidebar-shell.is-docked {
    top: 54px;
    left: 6px;
    right: 6px;
    height: calc(100svh - 126px);
    max-height: calc(100svh - 126px);
    border-radius: 10px;
  }

  body.has-desk-bar .sidebar-shell {
    max-height: calc(100svh - 174px);
    height: calc(100svh - 174px);
  }

  .membrane-xbar__title {
    font-size: 0.7rem;
  }

  .membrane-xbar__field > span {
    font-size: 0.62rem;
  }

  .membrane-xbar__field input,
  .membrane-xbar__field textarea {
    font-size: 0.8rem;
    padding: 7px 9px;
  }

  .membrane-xbar__item-text {
    font-size: 0.78rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .sidebar-shell,
  .sidebar-shell.is-overlay,
  .sidebar-shell.is-docked {
    top: 8px;
    left: 8px;
    right: 8px;
    height: calc(100svh - 74px);
    max-height: calc(100svh - 74px);
  }

  body.has-desk-bar .sidebar-shell {
    height: calc(100svh - 112px);
    max-height: calc(100svh - 112px);
  }

  .attention-tagline {
    top: 16px;
  }
}