:root {
  --glass-bg: rgba(8, 18, 29, 0.76);
  --glass-bg-strong: rgba(9, 19, 30, 0.88);
  --glass-bg-soft: rgba(9, 20, 31, 0.62);
  --glass-border: rgba(190, 220, 255, 0.18);
  --glass-border-strong: rgba(215, 236, 255, 0.28);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --glass-shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.28);
  --glass-blur: blur(18px) saturate(1.25);
  --glass-blur-soft: blur(12px) saturate(1.18);
  --glass-teal: rgba(32, 215, 186, 0.72);
  --glass-red: rgba(224, 52, 63, 0.68);
  --glass-blue: rgba(92, 181, 255, 0.7);
  --glass-orange: rgba(249, 115, 22, 0.72);
}

html {
  background: #050b12;
}

body {
  letter-spacing: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body:not(.map-screen)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 10, 16, 0.42), rgba(4, 10, 16, 0.84)),
    linear-gradient(135deg, rgba(32, 215, 186, 0.07), rgba(224, 52, 63, 0.035) 48%, rgba(92, 181, 255, 0.055));
}

h1,
h2,
h3 {
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.screen,
.app-header,
.page,
.footer {
  position: relative;
  z-index: 1;
}

.screen {
  display: grid;
  align-items: start;
}

.shell,
.app-header-inner,
.page,
.footer-inner {
  position: relative;
  z-index: 1;
}

.mast,
.app-header {
  border-color: var(--glass-border) !important;
}

.app-header {
  background: rgba(5, 12, 20, 0.72) !important;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

.brand img,
.mark,
.avatar {
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 0 24px rgba(32, 215, 186, 0.14) !important;
}

.directory-layout {
  align-items: stretch !important;
}

.project-directory,
.links-panel,
.panel,
.support-card,
.summary-tile,
.mini-card,
.note-card,
.stat-block,
.hero-aside,
.map-shell,
.sidebar-shell,
.redirect-card,
.banner-strip,
.tool-link,
.project,
.signal-card,
.live-links a,
.link-list a,
.download-item,
.choice-button,
.code-shell,
.wordmark-panel,
.asset-figure,
details,
.helper-note,
.summary-note,
.inline-stat,
.node-row,
.mini-link,
.map-topbar,
.map-sidebar,
.map-stat {
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(--glass-bg) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    var(--glass-shadow-soft) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.project-directory {
  padding: clamp(18px, 2.4vw, 28px);
}

.links-panel,
.panel,
.redirect-card,
.map-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022)),
    var(--glass-bg-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    var(--glass-shadow) !important;
}

.project,
.tool-link,
.link-list a,
.download-item,
.choice-button,
.live-links a,
.mini-link,
.button,
.copy-button,
.back-link {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 180ms ease !important;
}

.project.active,
.tool-link,
.choice-button[aria-pressed="true"],
.live-links a:hover,
.project.active:hover,
.project.active:focus-visible,
.tool-link:hover,
.tool-link:focus-visible,
.link-list a:hover,
.link-list a:focus-visible,
.mini-link:hover,
.mini-link:focus-visible,
.back-link:hover,
.back-link:focus-visible {
  border-color: rgba(32, 215, 186, 0.56) !important;
  background:
    linear-gradient(140deg, rgba(32, 215, 186, 0.18), rgba(255, 255, 255, 0.035)),
    rgba(8, 24, 34, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 48px rgba(0, 0, 0, 0.34),
    0 0 30px rgba(32, 215, 186, 0.12) !important;
}

.project.active:hover,
.project.active:focus-visible,
.tool-link:hover,
.tool-link:focus-visible,
.link-list a:hover,
.link-list a:focus-visible,
.button:hover,
.button:focus-visible,
.copy-button:hover,
.copy-button:focus-visible {
  transform: translateY(-2px);
}

.project.disabled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(9, 18, 29, 0.66) !important;
  opacity: 0.82 !important;
}

.state,
.plain-tag {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(32, 215, 186, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tool-link[href*="carto"],
.carto-link,
.button.carto-link,
.site-nav a[data-site-link="carto"] {
  border-color: var(--glass-red) !important;
  background:
    linear-gradient(140deg, rgba(224, 52, 63, 0.22), rgba(255, 255, 255, 0.035)),
    rgba(26, 12, 22, 0.78) !important;
  color: #fff7f8 !important;
}

.tool-link[href*="beacon"],
.button.beacon-link {
  border-color: var(--glass-orange) !important;
  background:
    linear-gradient(140deg, rgba(249, 115, 22, 0.2), rgba(255, 255, 255, 0.035)),
    rgba(28, 17, 10, 0.78) !important;
  color: #fff0dd !important;
}

.tool-link[href*="live.meshcore"],
.site-nav a[data-site-link="corescope"],
.button:not(.secondary):not(.ghost):not(.carto-link):not(.beacon-link) {
  border-color: var(--glass-teal) !important;
}

.tool-link[href*="meshview"],
.tool-link[href*="mv.canadaverse"],
.tool-link[href*="meshmon"],
.tool-link[href*="malla"] {
  border-color: var(--glass-blue) !important;
}

.button,
.copy-button,
.back-link,
.mini-link {
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

.button.secondary,
.button.ghost,
.copy-button,
.back-link,
.mini-link {
  background: rgba(8, 18, 29, 0.62) !important;
  color: var(--text) !important;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}

.button:not(.secondary):not(.ghost):not(.carto-link):not(.beacon-link) {
  background: linear-gradient(135deg, #24dac2, #18b7d6) !important;
  color: #031217 !important;
}

.helper-note,
.summary-note,
.field input,
.field select,
.field textarea,
.code-toolbar,
.code-shell pre,
.map-actions .button {
  background: rgba(3, 13, 24, 0.58) !important;
}

.field input,
.field select,
.field textarea {
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.button:focus,
.button.secondary:focus,
.button.ghost:focus,
.choice-button:focus,
.copy-button:focus,
summary:focus,
a:focus-visible {
  outline: 3px solid rgba(114, 189, 245, 0.26) !important;
  outline-offset: 2px !important;
}

.key-value .row,
.data-table th,
.data-table td,
.packet-feed-row,
.footer,
.code-toolbar {
  border-color: var(--glass-border) !important;
}

.page {
  padding-top: clamp(20px, 3vw, 30px) !important;
}

.page > .panel:first-child {
  min-height: 236px;
  display: grid;
  align-content: center;
}

.page > .panel:first-child .panel-header {
  margin-bottom: clamp(18px, 3vw, 28px);
}

.panel-header {
  gap: 16px !important;
}

.panel-header > .action-row {
  justify-content: flex-end;
}

.action-row .button,
.button-row .button,
.map-actions .button {
  min-width: max-content;
}

.map-screen .app-header,
.map-screen .page,
.map-screen .footer,
.map-screen::before {
  display: none;
}

body.map-screen {
  background: #07101a;
}

.map-screen-overlay {
  gap: 18px !important;
}

.map-topbar,
.map-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    rgba(8, 17, 28, 0.84) !important;
}

.map-sidebar {
  overflow: hidden;
}

.map-node-scroll {
  border-radius: 8px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .project-directory,
  .links-panel,
  .panel,
  .support-card,
  .summary-tile,
  .mini-card,
  .note-card,
  .stat-block,
  .hero-aside,
  .map-shell,
  .sidebar-shell,
  .redirect-card,
  .banner-strip,
  .tool-link,
  .project,
  .signal-card,
  .live-links a,
  .link-list a,
  .download-item,
  .choice-button,
  .code-shell,
  details,
  .helper-note,
  .summary-note,
  .inline-stat,
  .node-row,
  .mini-link,
  .map-topbar,
  .map-sidebar,
  .map-stat {
    background: rgba(9, 19, 30, 0.94) !important;
  }
}

@media (max-width: 980px) {
  .map-screen-overlay {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
  }

  .map-topbar {
    order: 1;
  }

  .map-sidebar {
    order: 2;
    width: 100%;
  }

  #map-canvas {
    height: 48vh !important;
    min-height: 360px !important;
  }
}

@media (max-width: 760px) {
  .app-header-inner,
  .mast {
    gap: 14px !important;
  }

  .site-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px !important;
  }

  .site-nav a {
    min-width: 0;
    text-align: center;
  }

  .panel-header {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: start !important;
  }

  .panel-header > .action-row,
  .action-row,
  .button-row {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    justify-content: stretch !important;
  }

  .action-row .button,
  .button-row .button,
  .map-actions .button {
    width: 100%;
    min-width: 0;
  }

  .page > .panel:first-child {
    min-height: 0;
  }

  .project-directory,
  .links-panel,
  .panel,
  .redirect-card {
    padding: 18px !important;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .directory-layout,
  .project-grid,
  .tool-grid,
  .hub-grid,
  .reference-grid,
  .selection-grid,
  #wizard .selection-grid,
  #usb-options .selection-grid,
  .metrics-grid,
  .summary-grid,
  .field-grid,
  .split,
  .home-live-grid,
  .home-link-sections,
  .icon-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
    min-width: 0;
  }

  .directory-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .site-nav,
  .panel-header,
  .project-space,
  .project-directory,
  .links-panel,
  .project-grid,
  .tool-grid,
  .hub-grid,
  .reference-grid,
  .selection-grid,
  .split,
  .stack {
    min-width: 0 !important;
  }

  .site-nav a,
  .link-list a,
  .download-item,
  .choice-button,
  .tool-link,
  .project,
  .live-links a,
  .support-card,
  .summary-tile {
    width: 100%;
    min-width: 0 !important;
  }

  .directory-head > div,
  .panel-header > div,
  .project-space,
  .project-copy,
  .tool-link,
  .brand-copy {
    max-width: 100%;
    min-width: 0 !important;
  }

  .site-nav a,
  .brand-subtitle,
  .lede,
  .panel-copy,
  .directory-head p,
  .project-copy small,
  .tool-link small,
  .link-list span,
  .helper-note {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .project,
  .tool-link {
    min-width: 0;
  }

  .tool-link {
    min-height: 112px !important;
  }

  .map-screen-overlay {
    padding: 10px !important;
  }

  .map-topbar {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .map-topbar .site-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  #map-canvas {
    height: 42vh !important;
    min-height: 300px !important;
  }
}

@media (max-width: 460px) {
  .shell,
  .app-header-inner,
  .page,
  .footer-inner {
    width: min(100% - 20px, 100%) !important;
  }

  h1 {
    font-size: clamp(2rem, 14vw, 3rem) !important;
  }

  .project {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar copy"
      "avatar state" !important;
  }

  .project-copy strong,
  .tool-link span,
  .brand-name {
    overflow-wrap: anywhere;
  }

  .signal-card {
    text-align: left !important;
  }
}