:root {
  --bg: #090e16;
  --ink: #f5f3ed;
  --muted: #aab3bf;
  --lime: #c6ff6a;
  --orange: #ff985d;
  --line: #28313d;
  --panel: #141c27;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    16px/1.6 "DM Sans",
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
a:hover {
  color: var(--lime);
}
.wrap {
  max-width: 1420px;
  margin: auto;
  padding: 0 clamp(22px, 5vw, 80px);
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}
.head {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 21px "Space Grotesk";
  letter-spacing: -0.06em;
}
.brand svg {
  width: 42px;
  height: 42px;
}
.brand b {
  color: var(--lime);
}
nav {
  display: flex;
  gap: 28px;
  font-size: 13px;
  color: #c4d0d1;
}
.status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 15px var(--lime);
}
.hero {
  position: relative;
  min-height: 760px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 20px;
  isolation: isolate;
  overflow: hidden;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 73% 41%, #273c40, transparent 34%),
    linear-gradient(145deg, #0b1720, #090e16 70%);
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.13;
  background-image:
    linear-gradient(#a3b6ad 1px, transparent 1px),
    linear-gradient(90deg, #a3b6ad 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent, #000);
}
h1,
h2,
h3 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.065em;
  line-height: 1.05;
}
h1 {
  font-size: clamp(62px, 8.5vw, 132px);
  margin: 26px 0;
  max-width: 850px;
}
h1 i {
  color: var(--lime);
  font-style: normal;
}
h1 .italic {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.08em;
  color: #ffb587;
}
.hero .intro {
  max-width: 590px;
  color: #bdc7ce;
  font-size: 18px;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.btn {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid #7e9a91;
  border-radius: 5px;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 13px;
  transition:
    transform 0.2s,
    background 0.2s;
}
.btn:hover {
  transform: translateY(-3px);
}
.btn.primary {
  background: var(--lime);
  border-color: var(--lime);
  color: #112016;
}
.btn.primary:hover {
  background: #e1ffaa;
  color: #112016;
}
.orbit {
  height: 540px;
  position: relative;
  display: grid;
  place-items: center;
}
.orbit svg {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0 60px #b0ff7855);
  animation: drift 9s ease-in-out infinite;
}
.orbitnote {
  position: absolute;
  bottom: 5%;
  right: 5%;
  color: #a9bcb5;
  font: 11px monospace;
  letter-spacing: 0.12em;
}
.orbitnote:before {
  content: "● ";
  color: var(--lime);
}
.sticker {
  position: absolute;
  right: 9%;
  top: 10%;
  width: 115px;
  height: 115px;
  border-radius: 100%;
  border: 1px dashed var(--lime);
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(13deg);
  font-weight: 700;
  font-size: 11px;
  color: var(--lime);
  letter-spacing: 0.12em;
}
.marquee {
  padding: 15px 0;
  border-top: 1px solid #394651;
  border-bottom: 1px solid #394651;
  background: #c6ff6a;
  color: #15211d;
  font: 700 12px "Space Grotesk";
  letter-spacing: 0.2em;
  text-align: center;
}
.marquee span {
  margin: 0 24px;
}
.section {
  padding: 105px 0;
  border-bottom: 1px solid var(--line);
}
.sectionhead {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 40px;
}
.sectionhead h2 {
  font-size: clamp(44px, 6vw, 85px);
  margin: 13px 0 0;
}
.sectionhead p {
  max-width: 400px;
  color: var(--muted);
}
.workgrid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}
.case {
  position: relative;
  border: 1px solid #33444c;
  background: var(--panel);
  border-radius: 12px;
  overflow: hidden;
  display: block;
  transition:
    transform 0.25s,
    border 0.25s;
}
.case:hover {
  transform: translateY(-5px);
  border-color: var(--lime);
  color: var(--ink);
}
.case .art {
  height: 285px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.case.wide .art {
  height: 350px;
}
.art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #141c27 0, transparent 55%);
}
.art svg {
  height: 75%;
  width: 75%;
  filter: drop-shadow(0 0 26px #73fed533);
}
.case .body {
  padding: 25px 29px 30px;
}
.case h3 {
  font-size: clamp(27px, 3vw, 39px);
  margin: 10px 0;
}
.case p {
  color: #b9c5ce;
  margin: 0 0 20px;
  font-size: 14px;
  max-width: 480px;
}
.case .arrow {
  color: var(--lime);
  font-size: 13px;
  font-weight: 700;
}
.tag {
  color: var(--lime);
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 700;
}
.case.a .art {
  background: radial-gradient(circle, #255655, #0f252e 70%);
}
.case.b .art {
  background: radial-gradient(circle, #263d73, #0f202e 70%);
}
.case.c .art {
  background: linear-gradient(160deg, #423e31, #1a2830 65%);
}
.case.d .art {
  background: radial-gradient(circle, #3b305c, #0c2029 67%);
}
.notesgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.note {
  padding: 32px;
  border: 1px solid #34434b;
  border-radius: 10px;
  transition: border 0.2s;
  background: #101924;
}
.note:hover {
  border-color: var(--lime);
  color: var(--ink);
}
.note h3 {
  font-size: 27px;
  margin: 23px 0 16px;
  line-height: 1.2;
}
.note p {
  color: var(--muted);
  font-size: 14px;
}
.note .arrow {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--lime);
}
.aside {
  background: #c6ff6a;
  color: #122018;
  padding: 45px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.aside .eyebrow {
  color: #3f6033;
}
.aside h3 {
  font-size: clamp(38px, 4vw, 57px);
  margin: 15px 0;
}
.aside p {
  color: #253d31;
}
.personal {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.personal h2 {
  font-size: clamp(46px, 6vw, 85px);
}
.personal p {
  color: var(--muted);
  font-size: 18px;
}
.manifesto {
  padding: 50px;
  border-radius: 15px;
  background: radial-gradient(circle at 78% 12%, #744b3c, #1b2832 50%, #102029);
  border: 1px solid #4e4543;
  min-height: 340px;
  display: flex;
  align-items: center;
  font: 600 clamp(29px, 3.8vw, 54px)/1.25 "Space Grotesk";
  letter-spacing: -0.05em;
}
.manifesto i {
  color: #ffb587;
  font-style: normal;
}
.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 32px 0;
  color: #a9b9be;
  font-size: 12px;
}
.mini {
  background: none;
  border: 1px solid #405159;
  color: #d8ecdf;
  padding: 9px 13px;
  border-radius: 5px;
  cursor: pointer;
}
.mini:hover {
  border-color: var(--lime);
}
.terminal {
  display: none;
  position: fixed;
  z-index: 50;
  inset: 0;
  background: #02070dd9;
  place-items: center;
  padding: 20px;
}
.terminal.open {
  display: grid;
}
.terminalbox {
  width: min(700px, 100%);
  background: #101923;
  border: 1px solid var(--lime);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 80px #0008;
}
.terminalbox code {
  display: block;
  color: var(--lime);
  white-space: pre-wrap;
  margin: 20px 0;
  font: 13px/1.9 monospace;
}
.terminalbox button {
  float: right;
}
.close {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}
@keyframes drift {
  0%,
  100% {
    transform: translateY(5px) rotate(-2deg);
  }
  50% {
    transform: translateY(-14px) rotate(2deg);
  }
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 70px 0;
    min-height: auto;
  }
  .orbit {
    height: 300px;
  }
  .orbit svg {
    height: 300px;
  }
  .sticker {
    right: 16%;
    top: 0;
  }
  .workgrid,
  .personal {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 75px 0;
  }
}
@media (max-width: 650px) {
  .wrap {
    padding: 0 20px;
  }
  .head {
    height: 72px;
  }
  .brand {
    font-size: 18px;
  }
  .brand svg {
    width: 32px;
    height: 32px;
  }
  nav {
    gap: 14px;
    font-size: 12px;
  }
  nav a:nth-child(2) {
    display: none;
  }
  .status {
    display: none;
  }
  .hero h1 {
    font-size: clamp(56px, 13vw, 87px);
  }
  .hero .intro {
    font-size: 16px;
  }
  .orbit {
    height: 250px;
  }
  .orbit svg {
    height: 250px;
  }
  .sticker {
    width: 78px;
    height: 78px;
    font-size: 8px;
  }
  .marquee span {
    margin: 0 5px;
    font-size: 9px;
  }
  .sectionhead {
    display: block;
  }
  .sectionhead p {
    margin-top: 20px;
  }
  .workgrid,
  .notesgrid {
    grid-template-columns: 1fr;
  }
  .case .art,
  .case.wide .art {
    height: 210px;
  }
  .personal {
    gap: 30px;
  }
  .manifesto {
    padding: 30px;
    min-height: 240px;
  }
  .aside {
    padding: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.hero {
  grid-template-columns: 1fr 1.06fr;
  min-height: 790px;
  gap: 45px;
}
.hero:before {
  background: radial-gradient(
    circle at 77% 43%,
    #385e4f 0%,
    #122b32 35%,
    #090e16 70%
  );
}
.hero:after {
  opacity: 0.1;
}
.hero-copy {
  z-index: 3;
}
.hero h1 {
  font-size: clamp(58px, 7.6vw, 115px);
}
/* Workshop objects are native buttons, with decorative SVG artwork. */
.hero {
  grid-template-columns: 0.88fr 1.12fr;
  gap: 32px;
  min-height: 800px;
  padding-block: 48px;
}
.hero h1 {
  font-size: clamp(58px, 7.1vw, 104px);
}
.hero-copy,
.workshop {
  min-width: 0;
}
.workshop {
  position: relative;
  width: 100%;
  border: 1px solid #44665f;
  border-radius: 16px;
  background: #101f28;
  overflow: hidden;
  box-shadow: 0 28px 80px #0005;
}
.workshop-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  font: 9px/1.5 monospace;
  letter-spacing: 0.08em;
  color: #b6caba;
  border-bottom: 1px solid #34564f;
}
.workshop-topline span:last-child {
  color: #c6ff6a;
}
.workshop-scene {
  position: relative;
  aspect-ratio: 4 / 3;
}
.room-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.labnode {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #eef5e9;
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.labnode svg {
  display: block;
  width: 100%;
  height: calc(100% - 30px);
  overflow: visible;
  transition: transform 0.18s;
}
.station-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #607b70;
  border-radius: 5px;
  background: #10252b;
  font:
    600 11px/1.4 "DM Sans",
    sans-serif;
  white-space: nowrap;
}
.station-number {
  color: #b2c1ac;
  font: 10px monospace;
}
.labnode:hover,
.labnode[aria-expanded="true"] {
  background: #b8efce0d;
  border-color: #8aaa79;
}
.labnode:hover svg {
  transform: translateY(-4px);
}
.labnode[aria-expanded="true"] .station-label {
  color: #13241b;
  background: var(--lime);
  border-color: var(--lime);
}
.labnode[aria-expanded="true"] .station-number {
  color: #314b2d;
}
.labnode[data-room="meetingiq"] {
  left: 33%;
  top: 30%;
  width: 34%;
  height: 33%;
}
.labnode[data-room="precipiq"] {
  left: 3%;
  top: 3%;
  width: 29%;
  height: 27%;
}
.labnode[data-room="experiments"] {
  left: 68%;
  top: 3%;
  width: 29%;
  height: 27%;
}
.labnode[data-room="notes"] {
  left: 2%;
  top: 60%;
  width: 30%;
  height: 31%;
}
.labnode[data-room="autopilot"] {
  left: 35%;
  top: 65%;
  width: 30%;
  height: 31%;
}
.labnode[data-room="ntk"] {
  left: 69%;
  top: 58%;
  width: 30%;
  height: 31%;
}
.station-preview {
  display: grid;
  border-top: 1px solid #44665f;
  background: #0e1c24;
}
.station-idle,
.roomdetail {
  grid-area: 1 / 1;
  min-height: 192px;
  padding: 22px 24px;
}
.station-idle p,
.roomdetail p {
  color: #b9cdc5;
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0;
}
.station-idle a,
.roomdetail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lime);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.roomdetail {
  position: relative;
}
.roomdetail strong {
  display: block;
  font:
    700 23px/1.2 "Space Grotesk",
    sans-serif;
  padding-right: 35px;
  margin-top: 7px;
}
.roomdetail .eyebrow {
  padding-right: 35px;
  font-size: 10px;
}
.roomdetail .close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 44px;
}
.room-instruction {
  color: #a5cbbd;
  font: 12px/1.6 monospace;
  margin-top: 22px;
}
.room-instruction span {
  color: var(--lime);
}
.case .project-status {
  margin: 4px 0 14px;
}
.project-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.project-guide h2 {
  font-size: clamp(34px, 4vw, 54px);
  margin: 16px 0;
}
.project-guide p {
  color: var(--muted);
}
.project-guide strong {
  color: var(--ink);
}
.project-guide .status-note {
  font-size: 12px;
}
.about-accent {
  color: var(--lime);
}
.portrait-card {
  width: 100%;
  max-width: 440px;
  margin: 0;
  justify-self: end;
  border: 1px solid #547267;
  border-radius: 12px;
  overflow: hidden;
  background: #14282d;
}
.portrait-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #10252b;
}
.portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
}
.portrait-card figcaption {
  padding: 24px;
}
.portrait-label {
  font: 10px/1.6 monospace;
  color: #bac9b9;
  letter-spacing: 0.06em;
}
.wrap.section {
  padding: 95px clamp(20px, 5vw, 80px);
}
.personal > * {
  min-width: 0;
}
.personal .portrait-quote {
  color: #f0f1df;
  font:
    600 clamp(28px, 3vw, 38px)/1.15 "Space Grotesk",
    sans-serif;
  letter-spacing: -0.04em;
  margin: 14px 0 10px;
}
.personal .portrait-caption {
  font-size: 14px;
  margin: 0;
}
@media (max-width: 1050px) {
  .hero {
    grid-template-columns: 1fr;
    display: grid;
    padding-block: 45px;
    gap: 35px;
  }
  .hero h1 {
    max-width: 760px;
  }
  .workshop {
    max-width: 720px;
    justify-self: center;
  }
  .hero-copy {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .wrap.section {
    padding-block: 65px;
  }
  .hero h1 {
    font-size: clamp(48px, 12vw, 76px);
  }
  .workshop-topline {
    font-size: 8px;
    padding: 12px;
  }
  .workshop-topline span:last-child {
    display: none;
  }
  .workshop-scene {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
  }
  .room-art {
    opacity: 0.25;
  }
  .labnode[data-room] {
    position: relative;
    inset: auto;
    width: 100%;
    height: 156px;
    background: #10262dee;
    border-color: #4b6864;
    padding: 8px 4px;
  }
  .labnode svg {
    width: 100%;
    max-width: 175px;
    height: 102px;
  }
  .station-label {
    font-size: 11px;
    gap: 5px;
    padding: 5px 4px;
    border: 0;
    background: transparent;
    white-space: normal;
  }
  .station-number {
    display: none;
  }
  .station-idle,
  .roomdetail {
    padding: 20px;
    min-height: 210px;
  }
  .project-guide {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .portrait-card {
    justify-self: center;
  }
}
.terminalbox {
  max-height: min(80vh, 750px);
  overflow: auto;
}
.terminal-output {
  height: 230px;
  overflow: auto;
  white-space: pre-wrap;
  background: #071019;
  border: 1px solid #314d45;
  border-radius: 8px;
  padding: 15px;
  color: #bfffc4;
  font: 13px/1.6 monospace;
  margin: 16px 0;
}
.terminal-form {
  display: flex;
  gap: 8px;
}
.terminal-form input {
  flex: 1;
  min-width: 0;
  background: #071019;
  color: #dfffe0;
  border: 1px solid #526f5a;
  border-radius: 6px;
  padding: 12px;
  font: 14px monospace;
}
.terminal-form button,
.ask-form button {
  cursor: pointer;
  background: var(--lime);
  border: 0;
  border-radius: 5px;
  padding: 10px 16px;
  color: #13201a;
  font-weight: 800;
}
.terminal-help {
  font-size: 11px;
  color: #b5c2bb;
}
.brand img {
  width: 42px;
  height: 42px;
  flex: none;
}
.brand {
  min-width: 0;
}
.brand:focus-visible,
.btn:focus-visible,
.mini:focus-visible,
.labnode:focus-visible,
.note:focus-visible,
.case:focus-visible,
nav a:focus-visible,
.terminal-form input:focus-visible,
.terminal-form button:focus-visible,
.close:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}
.skip-link {
  position: absolute;
  top: -90px;
  left: 12px;
  z-index: 1000;
  background: var(--lime);
  color: #112016;
  padding: 10px 15px;
}
.skip-link:focus {
  top: 12px;
}
.btn,
.mini,
.labnode,
.case,
.note {
  touch-action: manipulation;
}
.head nav a {
  padding: 8px 0;
}
.section {
  scroll-margin-top: 25px;
}
.marquee {
  line-height: 1.55;
}
@media (max-width: 650px) {
  .brand img {
    width: 32px;
    height: 32px;
  }
  .head nav {
    gap: 12px;
  }
  .hero {
    overflow: hidden;
  }
  .hero-copy h1 {
    overflow-wrap: normal;
  }
  .hero .intro {
    max-width: 38ch;
  }
  .room-instruction {
    font-size: 11px;
  }
  .case .body {
    padding: 22px;
  }
  .terminal-form button {
    min-width: 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workshop * {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}
.notes-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.notes-controls button {
  background: #1a2b32;
  color: #e2f3e8;
  border: 1px solid #536c60;
  border-radius: 25px;
  padding: 8px 15px;
  font-weight: 700;
  cursor: pointer;
}
.notes-controls button[aria-pressed="true"] {
  background: #c6ff6a;
  color: #122018;
}
.note[hidden] {
  display: none;
}
.notes-archive {
  color: #c6ff6a;
  display: inline-block;
  margin-top: 18px;
}
.cmd-launch {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 31;
  border: 1px solid #bfff86;
  color: #112016;
  background: #c6ff6a;
  border-radius: 40px;
  padding: 12px 19px;
  font-weight: 800;
  cursor: pointer;
}
.cmd-box {
  position: fixed;
  z-index: 35;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px;
  background: #050a11c9;
}
.cmd-box.open {
  display: flex;
}
.cmd-inner {
  width: min(660px, 100%);
  border: 1px solid #79967c;
  border-radius: 15px;
  background: #101c25;
  padding: 20px;
  box-shadow: 0 30px 90px #000b;
}
.cmd-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.cmd-top strong {
  font-size: 18px;
  color: #c6ff6a;
}
.cmd-input {
  width: 100%;
  border: 1px solid #516758;
  background: #09121b;
  color: #f0fff4;
  border-radius: 8px;
  padding: 15px;
  margin: 16px 0;
  font-size: 16px;
}
.cmd-results {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow: auto;
}
.cmd-results a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #344840;
  border-radius: 7px;
  color: #e9f6ed;
}
.cmd-results a:hover,
.cmd-results a:focus-visible {
  border-color: #c6ff6a;
  color: #c6ff6a;
}
.cmd-close {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
}
@media (max-width: 650px) {
  .nowboard {
    grid-template-columns: 1fr;
  }
  .cmd-launch {
    padding: 11px 14px;
    right: 13px;
    bottom: 13px;
  }
}
/* v9: retain the visual identity without continuously repainting glow effects. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-wght-normal.9fea608a947e.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-wght-normal.0640890476fc.woff2")
    format("woff2");
}
.labnode {
  animation: none;
}
.roomdetail .close {
  float: right;
  min-width: 44px;
}
.terminal,
.cmd-box {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  width: min(700px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  border: 1px solid #79967c;
  border-radius: 15px;
  background: #101c25;
  color: #f5f3ed;
  overflow: auto;
}
.terminal:not([open]),
.cmd-box:not([open]) {
  display: none;
}
.terminal[open],
.cmd-box[open] {
  display: block;
}
.terminal::backdrop,
.cmd-box::backdrop {
  background: #050a11d9;
}
.terminalbox,
.cmd-inner {
  width: 100%;
  max-height: none;
  border: 0;
  padding: 20px;
  box-shadow: none;
}
.cmd-top strong {
  font-size: clamp(13px, 4vw, 18px);
}
.cmd-close,
.terminalbox .close {
  min-width: 44px;
  flex: none;
}
.cmd-results {
  max-height: min(330px, 42dvh);
}
.cmd-launch {
  bottom: calc(16px + env(safe-area-inset-bottom));
}
@media (max-width: 400px) {
  .terminal-form {
    flex-wrap: wrap;
  }
  .terminal-form input {
    flex-basis: 100%;
  }
  .terminal-form button {
    width: 100%;
  }
}

/* Keep the phone launcher in the page flow so it cannot cover other controls. */
@media (max-width: 700px) {
  .cmd-launch {
    position: static;
    z-index: auto;
  }
}

/* v13: four clear entry points without adding another UI dependency. */
.discovery{padding-top:72px;padding-bottom:78px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.discovery h2{font-size:clamp(40px,5vw,69px);margin:14px 0}
.discovery>p{max-width:720px;color:var(--muted);margin-bottom:28px}
.discovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.discovery-grid a{display:flex;flex-direction:column;gap:14px;padding:28px;background:#14202b;border:1px solid #3c5350;border-radius:12px;min-height:245px;text-decoration:none;transition:border-color .2s,transform .2s}
.discovery-grid a:hover,.discovery-grid a:focus-visible{border-color:var(--lime);color:var(--ink);transform:translateY(-2px)}
.discovery-grid strong{font:700 clamp(23px,3vw,32px)/1.15 "Space Grotesk",sans-serif;letter-spacing:-.04em}
.discovery-grid span:not(.discovery-number){color:#c3ced1;font-size:14px}
.discovery-grid b{color:var(--lime);margin-top:auto;font-size:13px}
.discovery-number{color:var(--lime);font-size:11px;letter-spacing:.13em;font-weight:700}
@media(max-width:700px){.discovery{padding-block:48px}.discovery-grid{grid-template-columns:1fr}.discovery-grid a{min-height:190px;padding:23px}}

/* v15: make the homepage a personal introduction, not a product portal. */
.personal-shortcut{padding-block:38px;border-bottom:1px solid var(--line)}
.personal-shortcut p{font-size:11px;font-weight:700;color:var(--lime);letter-spacing:.15em}
.personal-shortcut a{display:inline-flex;align-items:center;min-height:44px;color:#e0f4d8;text-decoration:underline;text-underline-offset:.25em}
.connect-home{padding-block:65px 82px;border-top:1px solid var(--line)}
.connect-home h2{font-size:clamp(35px,5vw,65px);margin:12px 0}
.connect-home p{color:var(--muted)}
.connect-home a{display:inline-flex;align-items:center;min-height:44px;padding:12px 20px;background:var(--lime);color:#152319;font-weight:750;border-radius:7px;text-decoration:none;margin-top:14px}
@media(max-width:700px){.connect-home{padding-block:42px 55px}}

/* v17: personal About section */
.about-refined{gap:clamp(28px,5vw,68px)}
.about-refined .about-story{min-width:0}
.about-refined .about-lead{font-size:clamp(18px,2.3vw,23px);line-height:1.55;color:#e9efe8}
.about-refined .about-places{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}
.about-refined .about-places span{border:1px solid #53746b;background:#172c2f;border-radius:30px;padding:9px 13px;color:#d9efdf;font-size:13px}
.about-refined .about-principle{border-left:3px solid var(--lime);padding:12px 17px;background:#14272a;border-radius:0 6px 6px 0}
.about-refined .about-secondary{display:inline-flex;align-items:center;min-height:44px;color:#dcf7df;text-decoration:underline;text-underline-offset:.24em;font-weight:700}
.about-refined .portrait-frame{overflow:hidden;border-radius:12px}
.about-refined .portrait-frame img{display:block;width:100%;height:auto;object-fit:cover}
@media(max-width:700px){.about-refined .about-places{gap:7px}.about-refined .about-places span{font-size:12px}}

/* v18: compact, optional lab directory and smaller screens */
.more-lab{margin-top:24px;border:1px solid #435e59;border-radius:10px;background:#132329;color:#e8f5e8}
.more-lab summary{cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:14px 21px;font-weight:700}
.more-lab summary:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.more-lab-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 18px 19px}
.more-lab-links a{display:flex;align-items:center;padding:14px;min-height:48px;border:1px solid #415f58;border-radius:8px;text-decoration:none;color:#d3eddf}
.more-lab-links a:hover,.more-lab-links a:focus-visible{border-color:var(--lime)}
@media(max-width:700px){.more-lab-links{grid-template-columns:1fr}.hero .actions{gap:9px}.hero h1{overflow-wrap:normal}.workgrid .case{min-width:0}.about-refined .portrait-frame img{max-width:100%}}
@media(max-width:400px){.more-lab summary{padding-inline:14px}.hero .btn{max-width:100%;white-space:normal}}

/* v19: quiet typography and mobile rhythm, no new navigation */
.hero .intro{line-height:1.7;text-wrap:pretty}
.workgrid .body p{line-height:1.65}
.about-refined p{line-height:1.7}
@media(max-width:700px){
 .hero{min-height:auto;padding-block:34px}
 .hero h1{font-size:clamp(45px,10vw,72px);line-height:1.06;letter-spacing:-.055em}
 .hero .intro{font-size:16px;line-height:1.65}
 .sectionhead h2{font-size:clamp(36px,9vw,58px)}
 .workgrid{gap:15px}
 .workgrid .body{padding:20px}
 .about-refined{padding-block:48px}
}
@media(max-width:380px){.wrap{padding-inline:18px}.hero h1{font-size:clamp(42px,10vw,54px)}}

/* v22 curated identities: monograms pending independently verified brand artwork */
.brand-accent{display:flex;align-items:center;gap:10px;margin-bottom:10px;font:700 11px/1.4 "Space Grotesk",sans-serif;letter-spacing:.08em}
.brand-accent span,.lab-monogram{display:inline-grid;place-items:center;flex:none;border-radius:9px;width:38px;height:38px;font:800 13px/1 "Space Grotesk",sans-serif;color:#102021;background:var(--brand-color,#c6ff6a)}
.brand-meeting{--brand-color:#c6ff6a;color:#c6ff6a}.brand-weather{--brand-color:#51c5e8;color:#79dfff}.brand-ntk{--brand-color:#f2bf88;color:#f2bf88}
.brand-skill{--brand-color:#ffad66}.brand-screen{--brand-color:#b595ff}.brand-ai{--brand-color:#d9a7ff}.brand-auto{--brand-color:#89d7bd}.brand-decision{--brand-color:#79c9ed}.brand-eng{--brand-color:#c6ff6a}
.more-lab-links a.lab-brand{gap:14px;justify-content:flex-start;padding:13px 16px;border-left:3px solid var(--brand-color)}
.lab-brand strong{color:#f3f7f2}
.workgrid .case .brand-accent{padding-top:3px}
@media(max-width:540px){.lab-brand span:last-child{min-width:0;overflow-wrap:anywhere}.lab-monogram{width:34px;height:34px}.brand-accent{font-size:10px}}

.lab-real-logo{flex:none;width:38px;height:38px;object-fit:contain;border-radius:9px;background:#261e22;padding:2px}
@media(max-width:540px){.lab-real-logo{width:34px;height:34px}}

.brand-weather .precipiq-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:transparent;color:#79dfff;width:auto;height:auto;border-radius:0;font:800 15px/1.05 'Space Grotesk',sans-serif;letter-spacing:.03em}.brand-weather .precipiq-wordmark small{font:600 8px/1.2 'DM Sans',sans-serif;letter-spacing:.11em;color:#b9e6ee}

.brand-accent .brand-real-inline{display:block;flex:none;width:38px;height:38px;object-fit:contain;border-radius:9px;background:#111e2a;padding:2px}

.brand-meeting .meetingiq-real-logo{display:block;width:150px;height:38px;max-width:100%;object-fit:contain;object-position:left center;background:transparent;border-radius:0;padding:0}

/* v23: a fourth featured project, taking visual cues from SkillVaultIQ's orange-to-pink identity */
.workgrid .skillvault-feature{--skill-orange:#ffab64;--skill-pink:#f486ae;border-color:#765260}
.workgrid .skillvault-feature:hover,.workgrid .skillvault-feature:focus-visible{border-color:var(--skill-orange)}
.skillvault-feature .art.skillvault-art{height:285px;background:radial-gradient(circle at 48% 28%,#653951 0%,#2c2638 52%,#151e29 100%);isolation:isolate}
.skillvault-visual{width:min(86%,370px);height:210px;position:relative;z-index:1;border:1px solid #936878;border-radius:16px;background:linear-gradient(125deg,#241f31,#38273a 70%,#42293b);box-shadow:0 25px 55px #0007;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:25px}
.skillvault-glow{pointer-events:none;position:absolute;inset:-20%;z-index:-1;background:radial-gradient(circle,#ef87573d,transparent 67%)}
.skillvault-apphead{display:flex;gap:15px;align-items:center;font:750 clamp(19px,2.5vw,30px)/1.1 "Space Grotesk",sans-serif;color:#f8f2f3;white-space:nowrap}
.skillvault-apphead img{display:block;max-width:50px;height:50px;object-fit:contain}
.skillvault-apphead b{background:linear-gradient(110deg,#ffb468,#f48db8);color:transparent;background-clip:text}
.skillvault-samples{display:flex;flex-wrap:wrap;gap:8px}
.skillvault-samples span{padding:5px 10px;border:1px solid #8b6377;border-radius:30px;font-size:10px;color:#eecddd;background:#39283b}
.skillvault-artline{display:flex;gap:9px;width:100%;margin-top:auto}
.skillvault-artline i{height:4px;background:#f69e93;border-radius:5px;flex:1;opacity:.75}
.skillvault-artline i:nth-child(2){background:#bf79ae;flex:2}
.skillvault-artline i:nth-child(3){background:#ffbb6e}
.skillvault-feature .tag,.skillvault-feature .arrow{color:#ffbd85}
@media(max-width:700px){.skillvault-feature .art.skillvault-art{height:230px}.skillvault-visual{height:185px;padding:19px;gap:16px}.skillvault-apphead img{max-width:43px;height:43px}}