:root {
  --lagoon-bbs-bg: #020706;
  --lagoon-bbs-panel: rgba(5, 16, 14, .95);
  --lagoon-bbs-cyan: #65d1ff;
  --lagoon-bbs-lime: #9cff38;
  --lagoon-bbs-magenta: #ff2d9f;
  --lagoon-bbs-yellow: #ffd84d;
  --lagoon-bbs-muted: #87aa9b;
  --lagoon-bbs-line: rgba(101, 209, 255, .28);
  --lagoon-bbs-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

body[data-page="krabs-lagoon"] {
  color: #effff7;
  background:
    linear-gradient(rgba(101, 209, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 209, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 82% -10%, rgba(101, 209, 255, .12), transparent 34rem),
    var(--lagoon-bbs-bg);
  background-size: 28px 28px, 28px 28px, auto, auto;
  font-family: var(--lagoon-bbs-mono);
}

body[data-page="krabs-lagoon"]::before {
  position: fixed;
  z-index: 200;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .055;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(156, 255, 56, .22) 4px);
  animation: lagoon-bbs-scan 15s linear infinite;
}

body[data-page="krabs-lagoon"]::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .4;
  background:
    radial-gradient(circle, rgba(156, 255, 56, .6) 0 1px, transparent 2px) 13px 7px / 157px 131px,
    radial-gradient(circle, rgba(101, 209, 255, .55) 0 1px, transparent 2px) 62px 41px / 211px 173px;
  mask-image: linear-gradient(to bottom, #000 0 72%, transparent 98%);
  animation: lagoon-bbs-field 22s linear infinite;
}

body[data-page="krabs-lagoon"] .app-header,
body[data-page="krabs-lagoon"] .lagoon-app { position: relative; z-index: 1; }

body[data-page="krabs-lagoon"] .app-header {
  overflow: hidden;
  border-bottom-color: var(--lagoon-bbs-line);
  background: rgba(2, 7, 6, .96);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .36);
  backdrop-filter: blur(12px);
}

body[data-page="krabs-lagoon"] .app-header::after {
  position: absolute;
  right: 100%;
  bottom: 0;
  width: 36%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--lagoon-bbs-cyan), var(--lagoon-bbs-lime), transparent);
  filter: drop-shadow(0 0 5px var(--lagoon-bbs-cyan));
  animation: lagoon-bbs-header 6.5s ease-in-out infinite;
}

body[data-page="krabs-lagoon"] .brand img {
  filter: drop-shadow(0 0 12px rgba(101, 209, 255, .35));
  animation: lagoon-bbs-logo 4.4s ease-in-out infinite;
}

body[data-page="krabs-lagoon"] .brand-copy strong {
  overflow: hidden;
  max-width: 28ch;
  color: #effff7;
  font-size: .78rem;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="krabs-lagoon"] .brand-copy span {
  color: var(--lagoon-bbs-cyan);
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-page="krabs-lagoon"] .site-nav a {
  padding-inline: 10px;
  border: 1px solid transparent;
  color: var(--lagoon-bbs-muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body[data-page="krabs-lagoon"] .site-nav a:hover,
body[data-page="krabs-lagoon"] .site-nav a:focus-visible,
body[data-page="krabs-lagoon"] .site-nav a[aria-current="page"] {
  border-color: var(--lagoon-bbs-line);
  color: var(--lagoon-bbs-cyan);
  background: rgba(101, 209, 255, .07);
}

body[data-page="krabs-lagoon"] .lagoon-app {
  background:
    linear-gradient(135deg, rgba(101, 209, 255, .035), transparent 36%),
    linear-gradient(rgba(101, 209, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 209, 255, .025) 1px, transparent 1px),
    rgba(2, 7, 6, .86);
  background-size: auto, 28px 28px, 28px 28px, auto;
}

body[data-page="krabs-lagoon"] .lagoon-hud,
body[data-page="krabs-lagoon"] .data-banner,
body[data-page="krabs-lagoon"] .explore-rail,
body[data-page="krabs-lagoon"] .inspector-rail,
body[data-page="krabs-lagoon"] .lagoon-workspace,
body[data-page="krabs-lagoon"] .view-panel,
body[data-page="krabs-lagoon"] .desktop-tabs,
body[data-page="krabs-lagoon"] .mobile-tabs {
  border-color: var(--lagoon-bbs-line);
  background: var(--lagoon-bbs-panel);
}

body[data-page="krabs-lagoon"] .lagoon-hud {
  box-shadow: inset 0 -1px rgba(156, 255, 56, .12);
}

body[data-page="krabs-lagoon"] .lagoon-title-group p,
body[data-page="krabs-lagoon"] .eyebrow {
  color: var(--lagoon-bbs-cyan);
  font-family: var(--lagoon-bbs-mono);
  font-size: .58rem;
  letter-spacing: .13em;
}

body[data-page="krabs-lagoon"] .lagoon-title-group h1 {
  color: #effff7;
  font-family: var(--lagoon-bbs-mono);
  letter-spacing: -.04em;
  text-shadow: 2px 0 rgba(101, 209, 255, .45), -2px 0 rgba(255, 45, 159, .35);
  text-transform: uppercase;
}

body[data-page="krabs-lagoon"] .lagoon-hud-metrics div {
  border-left-color: var(--lagoon-bbs-line);
}

body[data-page="krabs-lagoon"] .lagoon-hud-metrics dt,
body[data-page="krabs-lagoon"] .data-banner span,
body[data-page="krabs-lagoon"] .control-block,
body[data-page="krabs-lagoon"] .rail-note,
body[data-page="krabs-lagoon"] .panel-header p { color: var(--lagoon-bbs-muted); }

body[data-page="krabs-lagoon"] .lagoon-hud-metrics dd,
body[data-page="krabs-lagoon"] .data-banner strong { font-family: var(--lagoon-bbs-mono); text-transform: uppercase; }

body[data-page="krabs-lagoon"] .data-banner { background: rgba(7, 24, 20, .96); }
body[data-page="krabs-lagoon"] .data-banner.is-fresh .state-icon { color: var(--lagoon-bbs-lime); text-shadow: 0 0 10px var(--lagoon-bbs-lime); }
body[data-page="krabs-lagoon"] .data-banner.is-partial .state-icon,
body[data-page="krabs-lagoon"] .data-banner.is-stale .state-icon,
body[data-page="krabs-lagoon"] .data-banner.is-empty .state-icon { color: var(--lagoon-bbs-yellow); }
body[data-page="krabs-lagoon"] .data-banner.is-error .state-icon,
body[data-page="krabs-lagoon"] .data-banner.is-offline .state-icon { color: var(--lagoon-bbs-magenta); }

body[data-page="krabs-lagoon"] :is(button, input, select, .role-filters span, .lagoon-dialog, .honesty-card, .about-grid section, .node-list li) {
  border-radius: 0;
  font-family: var(--lagoon-bbs-mono);
}

body[data-page="krabs-lagoon"] :is(button, input, select) {
  border-color: var(--lagoon-bbs-line);
  color: #effff7;
  background: rgba(7, 25, 21, .96);
}

body[data-page="krabs-lagoon"] button {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

body[data-page="krabs-lagoon"] button:hover,
body[data-page="krabs-lagoon"] button:focus-visible {
  border-color: var(--lagoon-bbs-cyan);
  background: rgba(101, 209, 255, .1);
  box-shadow: 0 0 18px rgba(101, 209, 255, .12);
  transform: translateY(-1px);
}

body[data-page="krabs-lagoon"] .desktop-tabs button[aria-selected="true"],
body[data-page="krabs-lagoon"] .mobile-tabs button[aria-selected="true"],
body[data-page="krabs-lagoon"] .primary-button {
  color: #041008;
  border-color: var(--lagoon-bbs-lime);
  background: var(--lagoon-bbs-lime);
  box-shadow: 0 0 16px rgba(156, 255, 56, .18);
}

body[data-page="krabs-lagoon"] .lagoon-workspace,
body[data-page="krabs-lagoon"] .lagoon-figure,
body[data-page="krabs-lagoon"] .canvas-wrap {
  position: relative;
  border-color: var(--lagoon-bbs-line);
  box-shadow: inset 0 0 28px rgba(101, 209, 255, .035);
}

body[data-page="krabs-lagoon"] .lagoon-workspace::before {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -1px;
  width: 24px;
  height: 5px;
  content: "";
  pointer-events: none;
  background: var(--lagoon-bbs-cyan);
  box-shadow: 29px 0 0 var(--lagoon-bbs-lime), 0 0 8px var(--lagoon-bbs-cyan);
}

body[data-page="krabs-lagoon"] .canvas-state {
  border: 1px solid var(--lagoon-bbs-line);
  border-radius: 0;
  background: rgba(2, 7, 6, .92);
  box-shadow: 6px 6px 0 rgba(101, 209, 255, .08);
}

body[data-page="krabs-lagoon"] .activity-strip strong,
body[data-page="krabs-lagoon"] .link-quality,
body[data-page="krabs-lagoon"] .role-summary strong { color: var(--lagoon-bbs-lime); }

body[data-page="krabs-lagoon"] .lagoon-dialog {
  border: 1px solid var(--lagoon-bbs-cyan);
  color: #effff7;
  background: #06100e;
  box-shadow: 9px 9px 0 rgba(101, 209, 255, .08), 0 0 34px rgba(101, 209, 255, .12);
}

body[data-page="krabs-lagoon"] :focus-visible {
  outline-color: var(--lagoon-bbs-lime);
  box-shadow: 0 0 0 3px rgba(156, 255, 56, .2);
}

@keyframes lagoon-bbs-scan { to { background-position: 0 160px; } }
@keyframes lagoon-bbs-field { to { background-position: 170px 138px, -215px 178px; } }
@keyframes lagoon-bbs-header { to { transform: translateX(380%); } }
@keyframes lagoon-bbs-logo { 50% { transform: translateY(-2px); filter: drop-shadow(0 0 13px var(--lagoon-bbs-cyan)); } }

@media (max-width: 720px) {
  body[data-page="krabs-lagoon"] .site-nav { overflow-x: auto; scrollbar-width: none; }
  body[data-page="krabs-lagoon"] .site-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 374px) {
  body[data-page="krabs-lagoon"] .canvas-toolbar,
  body[data-page="krabs-lagoon"] .toolbar-group { gap: 4px; }
  body[data-page="krabs-lagoon"] .tool-button { min-width: 42px; padding-inline: 6px; font-size: .58rem; }
  body[data-page="krabs-lagoon"] #pause-button { min-width: 72px; font-size: .54rem; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="krabs-lagoon"]::before,
  body[data-page="krabs-lagoon"]::after,
  body[data-page="krabs-lagoon"] .app-header::after,
  body[data-page="krabs-lagoon"] .brand img { animation: none; }
  body[data-page="krabs-lagoon"] button { transition: none; }
}