@font-face {
  font-family: NewsreaderLocal;
  src: url("/vendor/fonts/newsreader/files/newsreader-latin-wght-normal.woff2");
}
@font-face {
  font-family: DMSansLocal;
  src: url("/vendor/fonts/dm-sans/files/dm-sans-latin-wght-normal.woff2");
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #10131d;
  color: #f3f1ed;
  font-family: DMSansLocal, Arial, sans-serif;
  overflow-x: hidden;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
.topbar {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 32px));
  height: 64px;
  padding: 0 12px 0 18px;
  border: 1px solid #ffffff20;
  border-radius: 18px;
  background: #111520d9;
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 18px 50px #0005;
}
.wordmark {
  font-family: NewsreaderLocal, serif;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-orb,
.cube-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff0c8, #d59538);
  color: #17120b;
  font: 700 0.8rem DMSansLocal;
  box-shadow: 0 0 30px #dca54355;
}
.cube-mark {
  border-radius: 9px;
  background: linear-gradient(145deg, #b8ffe0, #6bd1ad);
  color: #07150f;
}
.navlinks {
  display: flex;
  gap: 28px;
  font-size: 0.78rem;
  color: #d4d2ca;
}
.navlinks a:hover {
  color: #fff;
}
.pill {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  border-radius: 999px;
  padding: 14px 22px;
  background: #f4eee2;
  color: #17130f;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 30px #0004;
  transition: 0.25s;
}
.pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px #0006;
}
.pill.small {
  padding: 11px 16px;
}
.text-link {
  font-size: 0.82rem;
  border-bottom: 1px solid #ffffff44;
  padding-bottom: 4px;
}
.hero {
  min-height: 820px;
  padding: 150px max(6vw, 28px) 90px;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  align-items: center;
  gap: 5vw;
  position: relative;
}
.hero:after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  filter: blur(80px);
  background: #ad6b2022;
  top: -240px;
  left: -280px;
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 740px;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  color: #d9a94f;
}
.kicker i {
  width: 22px;
  height: 1px;
  background: currentColor;
}
.hero h1,
.section h2,
.final-section h2 {
  font:
    400 clamp(3.2rem, 6.3vw, 6.7rem)/0.92 NewsreaderLocal,
    serif;
  letter-spacing: -0.045em;
  margin: 22px 0;
}
.hero h1 em {
  color: #e1aa54;
  font-weight: 400;
}
.lede {
  max-width: 640px;
  font:
    400 1.13rem/1.7 NewsreaderLocal,
    serif;
  color: #b8bbc4;
}
.actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 34px;
}
.companion-scene {
  height: 610px;
  position: relative;
  display: grid;
  place-items: center;
}
.companion-scene img {
  width: min(430px, 82%);
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
  border-radius: 48% 48% 28% 28%;
  filter: saturate(0.8) contrast(1.08);
  box-shadow: 0 40px 100px #000b;
  position: relative;
  z-index: 2;
}
.orbit {
  position: absolute;
  border: 1px solid #e8b75944;
  border-radius: 50%;
  inset: 8%;
  transform: rotate(18deg);
}
.orbit.two {
  inset: 18% -5%;
  transform: rotate(-28deg);
  border-color: #8fc5ff33;
}
.floating-note {
  position: absolute;
  z-index: 3;
  width: 210px;
  padding: 16px 18px;
  background: #171b27e8;
  border: 1px solid #ffffff20;
  border-radius: 14px;
  box-shadow: 0 22px 60px #0008;
  backdrop-filter: blur(12px);
}
.floating-note small,
.app-detail > span {
  display: block;
  color: #d7ac5a;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  margin-bottom: 9px;
}
.floating-note strong {
  font:
    1.08rem/1.25 NewsreaderLocal,
    serif;
}
.n1 {
  left: -2%;
  top: 22%;
}
.n2 {
  right: -2%;
  bottom: 18%;
}
.spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2c36b;
  box-shadow: 0 0 20px 8px #f2c36b66;
}
.s1 {
  top: 12%;
  right: 16%;
}
.s2 {
  bottom: 9%;
  left: 19%;
}
.manifesto {
  padding: 46px 6vw;
  border-block: 1px solid #ffffff12;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  color: #777d8b;
  font:
    italic 1.15rem NewsreaderLocal,
    serif;
}
.manifesto strong {
  color: #f0c979;
  font-weight: 400;
}
.section {
  padding: 130px max(6vw, 28px);
  position: relative;
}
.section-intro {
  max-width: 820px;
  margin-bottom: 64px;
}
.section-intro h2,
.sticky-copy h2,
.memory-copy h2,
.world-copy h2,
.bric-copy h2 {
  font-size: clamp(2.8rem, 5vw, 5rem);
}
.section-intro > p:last-child,
.sticky-copy > p:last-child,
.world-copy > p:last-child,
.bric-copy > p {
  color: #aeb3c0;
  line-height: 1.7;
  max-width: 630px;
}
.day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.day-card {
  min-height: 410px;
  padding: 30px;
  border: 1px solid #ffffff14;
  border-radius: 22px;
  background: #161a25;
  display: flex;
  flex-direction: column;
}
.day-card.featured {
  background: linear-gradient(145deg, #272131, #171b25);
  transform: translateY(-18px);
  border-color: #e5b96133;
}
.day-card > span,
.portfolio-card > span {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: #d6aa59;
}
.day-card h3,
.principle h3,
.app-detail h3 {
  font:
    1.8rem/1.05 NewsreaderLocal,
    serif;
  margin: 25px 0 12px;
}
.day-card > p {
  color: #aeb1bb;
  line-height: 1.6;
}
.micro-ui,
.chat {
  margin-top: auto;
  padding: 18px;
  background: #0d1017;
  border-radius: 13px;
  display: grid;
  gap: 8px;
}
.micro-ui small {
  color: #888e9b;
}
.micro-ui mark {
  color: #e7bd70;
  background: none;
  border-top: 1px solid #ffffff16;
  padding-top: 10px;
}
.chat p {
  width: 88%;
  padding: 10px;
  border-radius: 10px;
  background: #292e3b;
  margin: 0;
  font-size: 0.76rem;
}
.chat p:last-child {
  justify-self: end;
  background: #e7c67f;
  color: #18130c;
}
.split-section,
.app-flow,
.bric-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  align-items: start;
  background: #0c0f16;
}
.sticky-copy {
  position: sticky;
  top: 130px;
}
.principle {
  display: flex;
  gap: 28px;
  padding: 34px 0;
  border-top: 1px solid #ffffff1a;
}
.principle > b {
  color: #dbaf5c;
  font-size: 0.66rem;
}
.principle h3 {
  margin: 0 0 8px;
}
.principle p {
  color: #9da2ad;
  line-height: 1.6;
}
.memory-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9vw;
  align-items: center;
  background: radial-gradient(
    circle at 25% 55%,
    #3e2e1c 0,
    #151821 35%,
    #10131d 67%
  );
}
.memory-visual {
  height: 560px;
  position: relative;
}
.tree-crown {
  position: absolute;
  width: 350px;
  height: 350px;
  border: 1px solid #dcb15d66;
  border-radius: 50%;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  box-shadow:
    inset 0 0 70px #dca84b16,
    0 0 80px #dca84b1a;
}
.tree-crown:before,
.tree-crown:after {
  content: "";
  position: absolute;
  inset: 20%;
  border: 1px solid #dcb15d44;
  border-radius: 42% 58% 55% 45%;
  transform: rotate(35deg);
}
.tree-crown:after {
  transform: rotate(-35deg);
}
.tree-crown i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f1cf83;
  box-shadow: 0 0 20px #e9b85e;
}
.tree-crown i:nth-child(1) {
  left: 18%;
  top: 24%;
}
.tree-crown i:nth-child(2) {
  right: 17%;
  top: 30%;
}
.tree-crown i:nth-child(3) {
  left: 42%;
  top: 13%;
}
.tree-crown i:nth-child(4) {
  left: 27%;
  bottom: 20%;
}
.tree-crown i:nth-child(5) {
  right: 28%;
  bottom: 17%;
}
.tree-crown i:nth-child(6) {
  left: 49%;
  top: 49%;
}
.tree-trunk {
  position: absolute;
  width: 18px;
  height: 210px;
  background: linear-gradient(#dcb05c, #5d4023);
  left: 50%;
  top: 46%;
  clip-path: polygon(36% 0, 70% 0, 100% 100%, 0 100%);
}
.tree-roots {
  position: absolute;
  width: 280px;
  height: 110px;
  border-top: 2px solid #c28d42;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.memory-copy ul,
.bric-copy ul {
  list-style: none;
  padding: 0;
}
.memory-copy li {
  padding: 18px 0;
  border-top: 1px solid #ffffff17;
  color: #aeb2bd;
}
.memory-copy li span {
  display: inline-block;
  color: #e4b961;
  width: 120px;
}
.app-deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.app-card {
  min-height: 190px;
  padding: 24px;
  text-align: left;
  color: #eff0ed;
  background: #151a25;
  border: 1px solid #ffffff14;
  border-radius: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: 0.25s;
}
.app-card:hover,
.app-card.active {
  border-color: #dfb35e;
  background: #292333;
  transform: translateY(-5px);
}
.app-card b {
  font: 1.45rem NewsreaderLocal;
}
.app-card span {
  color: #999fac;
  margin-top: 10px;
}
.app-card i {
  font-style: normal;
  margin-top: auto;
}
.app-detail {
  margin: 18px 0 0 auto;
  padding: 34px;
  width: calc(75% - 6px);
  background: #ece4d4;
  color: #1a1713;
  border-radius: 18px;
}
.app-detail p {
  color: #5b554d;
}
.stardust-section {
  background: radial-gradient(circle at 80%, #3d214766, #10131d 45%);
}
.stardust-meter {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
  gap: 55px;
  max-width: 850px;
  margin: auto;
}
.meter-ring {
  width: 230px;
  height: 230px;
  border: 1px solid #d9b5ff77;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow:
    inset 0 0 50px #bf68eb1c,
    0 0 60px #b35bdd22;
}
.meter-ring strong {
  font-size: 4rem;
  color: #dcadff;
}
.meter-ring span {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}
.stardust-meter h3 {
  font: 2.4rem NewsreaderLocal;
}
.stardust-meter p {
  color: #b4b0bd;
  line-height: 1.7;
}
.world-preview {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 6vw;
  background: #e7dfcf;
  color: #181713;
}
.world-media {
  position: relative;
}
.world-media video {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 28px;
  filter: saturate(0.75);
}
.status-chip {
  position: absolute;
  left: 20px;
  top: 20px;
  background: #111722db;
  color: #f4d598;
  border: 1px solid #ffffff3d;
  padding: 10px 13px;
  border-radius: 999px;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
}
.world-copy .kicker {
  color: #8b621e;
}
.world-copy > p:last-child {
  color: #5f5b53;
}
.final-section {
  padding: 150px 25px;
  text-align: center;
  background: #090c12;
}
.final-section h2 {
  max-width: 900px;
  margin: 25px auto;
  font-size: clamp(3rem, 6vw, 6rem);
}
.final-section > p:not(.kicker) {
  color: #a7abb3;
}
.final-section .pill {
  margin-top: 24px;
}
.large {
  width: 60px;
  height: 60px;
  margin: auto;
}
footer {
  padding: 34px max(4vw, 24px);
  display: flex;
  align-items: center;
  gap: 35px;
  border-top: 1px solid #ffffff12;
  font-size: 0.72rem;
  color: #9196a1;
}
footer p {
  margin-right: auto;
}
footer nav {
  display: flex;
  gap: 22px;
}

[data-site="ce"] body,
html[data-site="ce"] {
  background: #0c0a12;
}
[data-site="ce"] .topbar {
  background: #0e0b14dc;
}
[data-site="ce"] .kicker {
  color: #83e3bd;
}
[data-site="ce"] .hero h1 em {
  color: #9ae7c9;
}
.ce-hero {
  min-height: 850px;
  background: radial-gradient(circle at 78% 40%, #58275a55, transparent 38%);
}
.logo-stage {
  height: 650px;
  display: grid;
  place-items: center;
  position: relative;
}
.logo-stage img {
  position: relative;
  z-index: 2;
  width: min(560px, 95%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 28px;
  mix-blend-mode: screen;
  filter: contrast(1.08) saturate(1.15);
  box-shadow: 0 40px 120px #a62eb62b;
}
.logo-halo {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid #9dffc866;
  border-radius: 50%;
  box-shadow: 0 0 110px #d74ce144;
}
.coordinate {
  position: absolute;
  z-index: 3;
  bottom: 25px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: #b8e9d6;
  background: #0c0911cc;
  padding: 10px;
}
.constellation {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 30px 6vw 100px;
}
.node {
  position: relative;
  z-index: 2;
  padding: 22px;
  background: #121019;
  border: 1px solid #ffffff15;
  color: #e9e7e8;
  border-radius: 14px;
  display: grid;
  text-align: left;
  gap: 5px;
  cursor: pointer;
}
.node i {
  width: 11px;
  height: 11px;
  background: #70dbaf;
  border-radius: 50%;
  box-shadow: 0 0 18px #70dbaf;
}
.node b {
  font: 1.25rem NewsreaderLocal;
}
.node span {
  font-size: 0.68rem;
  color: #8e8993;
}
.node:hover,
.node.active {
  border-color: #86e7bd88;
  background: #1b1421;
}
.constellation-line {
  position: absolute;
  top: 46px;
  left: 13%;
  right: 13%;
  height: 1px;
  background: linear-gradient(90deg, #69dfb7, #d34ed6, #69dfb7);
}
.shell-section {
  background: #0b0910;
}
.desktop-window {
  border: 1px solid #ffffff25;
  background: #15101c;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 45px 120px #000b,
    0 0 80px #c64ad422;
}
.window-bar,
.window-foot {
  height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: #9f9aa5;
  background: #17131d;
}
.traffic {
  display: flex;
  gap: 7px;
}
.traffic i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #85528c;
}
.traffic i:nth-child(2) {
  background: #6db598;
}
.traffic i:nth-child(3) {
  background: #bd85c1;
}
.desktop {
  height: 580px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 45%,
    #623062 0,
    #251429 25%,
    #100c16 64%
  );
  background-image:
    radial-gradient(circle at 50% 45%, #5f2f6044, transparent 34%),
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size:
    auto,
    40px 40px,
    40px 40px;
}
.desktop:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 30%, #08060d 90%);
  pointer-events: none;
}
.desktop-bubble {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #b6ffe066;
  background: #1b1425cc;
  color: #eae7ec;
  box-shadow:
    inset 0 0 30px #6de5b420,
    0 0 32px #b748bb44;
  display: grid;
  place-content: center;
  gap: 7px;
  cursor: pointer;
  transition: 0.25s;
}
.desktop-bubble i {
  font-style: normal;
  font-size: 1.3rem;
  color: #91ecc7;
}
.desktop-bubble b {
  font-size: 0.66rem;
}
.desktop-bubble:hover,
.desktop-bubble.active {
  transform: translate(-50%, -50%) scale(1.09);
  border-color: #d883de;
  box-shadow:
    inset 0 0 35px #cf4ed644,
    0 0 42px #d34bda77;
}
.desktop-panel {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 22px;
  width: 320px;
  padding: 23px;
  background: #0b0910e8;
  border: 1px solid #ffffff24;
  border-radius: 14px;
  backdrop-filter: blur(15px);
}
.desktop-panel span {
  font-size: 0.56rem;
  letter-spacing: 0.15em;
  color: #8ce5c0;
}
.desktop-panel h3 {
  font: 1.35rem NewsreaderLocal;
  margin: 9px 0;
}
.desktop-panel p {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #aaa5af;
}
.truth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 25px;
}
.truth-grid article {
  padding: 24px;
  border-top: 1px solid #75dcb7;
}
.truth-grid p {
  color: #9e9aa3;
  line-height: 1.6;
}
.portfolio-section {
  background: #ede7da;
  color: #171518;
}
.portfolio-section .section-intro > p:last-child {
  color: #5e595f;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.portfolio-card {
  min-height: 330px;
  border-radius: 24px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  background: #17131b;
  color: #eee;
}
.portfolio-card h3 {
  font: 3rem NewsreaderLocal;
  margin: 30px 0 8px;
}
.portfolio-card p {
  color: #aaa3af;
  line-height: 1.6;
  max-width: 520px;
}
.portfolio-card a,
.portfolio-card > b {
  margin-top: auto;
  color: #9de8c8;
  font-size: 0.78rem;
}
.apps-card {
  background: #201427;
}
.tenari-card {
  background: #162230;
}
.brics-card {
  background: #22201c;
}
.app-flow {
  background: #0d0a12;
}
.host-map {
  display: grid;
  grid-template-columns: 150px 70px 1fr;
  align-items: center;
}
.host,
.hosts div {
  padding: 23px;
  border: 1px solid #ffffff20;
  border-radius: 14px;
  display: grid;
  gap: 5px;
}
.host b,
.hosts b {
  font: 1.25rem NewsreaderLocal;
}
.host span,
.hosts span {
  font-size: 0.65rem;
  color: #96919b;
}
.host.core {
  border-color: #8fe3c0;
  box-shadow: 0 0 45px #55d9a824;
}
.route-line {
  height: 1px;
  background: #8fe3c0;
}
.hosts {
  display: grid;
  gap: 12px;
}
.bric-feature {
  background: #e5ded1;
  color: #18151b;
  align-items: center;
}
.bric-copy > p {
  color: #5d5760;
}
.bric-copy li {
  display: inline-block;
  margin: 5px;
  padding: 8px 12px;
  border: 1px solid #77716d;
  border-radius: 999px;
  font-size: 0.7rem;
}
.bric-object {
  min-height: 470px;
  display: grid;
  place-content: center;
  position: relative;
}
.bric-screen {
  width: 260px;
  height: 230px;
  background: linear-gradient(145deg, #2a2230, #0c0910);
  border: 12px solid #49434b;
  border-radius: 42px 42px 28px 28px;
  display: flex;
  place-content: center;
  align-items: center;
  color: #93efc8;
  font: 5rem monospace;
  box-shadow:
    0 40px 60px #2e263050,
    0 0 40px #d055d550;
}
.bric-base {
  width: 180px;
  height: 40px;
  background: #39343b;
  margin: auto;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bric-object small {
  text-align: center;
  letter-spacing: 0.18em;
  margin-top: 18px;
}
.ce-final {
  background: radial-gradient(circle at 50%, #3b183e, #0a0710 50%);
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (max-width: 900px) {
  .navlinks {
    display: none;
  }
  .hero,
  .memory-section,
  .world-preview,
  .split-section,
  .app-flow,
  .bric-feature {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-top: 130px;
  }
  .companion-scene,
  .logo-stage {
    height: 520px;
  }
  .day-grid,
  .truth-grid {
    grid-template-columns: 1fr;
  }
  .day-card.featured {
    transform: none;
  }
  .app-deck,
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
  }
  .app-detail {
    width: 100%;
  }
  .sticky-copy {
    position: static;
  }
  .manifesto {
    flex-direction: column;
  }
  .stardust-meter {
    grid-template-columns: 1fr;
  }
  .constellation {
    grid-template-columns: 1fr 1fr;
  }
  .host-map {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .route-line {
    height: 50px;
    width: 1px;
    margin: auto;
  }
  .desktop-panel {
    width: 260px;
  }
}
@media (max-width: 580px) {
  .topbar {
    top: 10px;
  }
  .topbar .pill {
    display: none;
  }
  .wordmark {
    font-size: 1rem;
  }
  .hero {
    min-height: auto;
    padding-inline: 20px;
  }
  .hero h1 {
    font-size: 3.25rem;
  }
  .companion-scene {
    height: 430px;
  }
  .floating-note {
    width: 170px;
    padding: 12px;
  }
  .n1 {
    left: 0;
  }
  .n2 {
    right: 0;
  }
  .section {
    padding: 90px 20px;
  }
  .app-deck,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .constellation {
    padding-inline: 20px;
  }
  .desktop {
    height: 620px;
  }
  .desktop-bubble {
    --s: 4.6rem !important;
  }
  .desktop-panel {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }
  .window-foot span:last-child {
    display: none;
  }
  .memory-visual {
    height: 430px;
  }
  .tree-crown {
    width: 280px;
    height: 280px;
  }
  .world-media video {
    height: 380px;
  }
  footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  footer p {
    width: 100%;
    order: 2;
  }
  footer nav {
    order: 3;
    flex-wrap: wrap;
  }
}