@charset "UTF-8";
:root {
  font-family:"Segoe UI",Arial,sans-serif;
  color:#e6eee5;
  background:#060a08;
  font-synthesis:none;
  font-weight:400;
  --accent:166,232,142;
  --tint:45,106,55;
  --deep:12,28,19;
  --image-hue:0deg;
  --image-saturation:.7;
  --theme-name:green;
  color-scheme:dark
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  padding:12px;
  --accent:166,232,142;
  --tint:45,106,55;
  --deep:12,28,19;
  --image-hue:0deg;
  --image-saturation:.7
}
body[data-theme=yellow] {
  --accent:243,211,121;
  --tint:140,105,28;
  --deep:33,28,14;
  --image-hue:-65deg;
  --image-saturation:.65
}
body[data-theme=blue] {
  --accent:139,195,252;
  --tint:35,83,143;
  --deep:12,24,38;
  --image-hue:110deg;
  --image-saturation:.8
}
body[data-theme=red] {
  --accent:245,155,142;
  --tint:134,47,44;
  --deep:35,17,19;
  --image-hue:240deg;
  --image-saturation:.65
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
a:focus-visible,button:focus-visible {
  outline:2px solid rgb(var(--accent));
  outline-offset:6px
}
button {
  cursor:pointer
}
svg.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.world {
  position:relative;
  min-height:calc(100svh - 24px);
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(var(--accent),.12);
  border-radius:27px;
  background:rgb(var(--deep));
  transition:background 900ms,border-color 900ms
}
.atmosphere {
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none
}
.ambient-field {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 38% 18%,rgba(166,232,142,.12),transparent 65%),radial-gradient(ellipse at 15% 85%,rgba(45,106,55,.72),transparent 67%),linear-gradient(115deg,rgb(12,28,19),rgba(45,106,55,.25) 55%,rgb(12,28,19));
  filter:hue-rotate(var(--image-hue)) saturate(var(--image-saturation));
  transition:filter 1.1s
}
.color-wash {
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,rgba(var(--deep),.55) 0%,rgba(var(--deep),.08) 50%,rgba(var(--deep),.22) 100%),radial-gradient(ellipse at 12% 90%,rgba(var(--tint),.47),transparent 60%);
  transition:background 900ms
}
.vignette {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,9,6,.34),transparent 25%,transparent 75%,rgba(3,9,6,.7)),linear-gradient(90deg,rgba(3,9,6,.18),transparent 45%,rgba(3,9,6,.2))
}
.grain {
  position:absolute;
  inset:0;
  opacity:.035;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")
}
.site-header {
  height:89px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 4.2%;
  border-bottom:1px solid rgba(230,244,230,.1)
}
.wordmark {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:27px;
  font-weight:600;
  letter-spacing:.12em
}
.brand-dot {
  height:5px;
  width:5px;
  border-radius:50%;
  background:rgb(var(--accent));
  margin-top:17px;
  transition:background 700ms
}
.project-status {
  font-size:10px;
  letter-spacing:.04em;
  color:#b7c3b8;
  display:flex;
  align-items:center;
  gap:9px
}
.status-dot {
  width:5px;
  height:5px;
  display:inline-block;
  flex-shrink:0;
  border-radius:50%;
  background:rgb(var(--accent));
  box-shadow:0 0 12px rgba(var(--accent),.4)
}
.status-divider {
  color:#69796e;
  padding:0 3px
}
.header-access {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:18px
}
.header-access .icon {
  width:17px;
  height:17px;
  color:rgb(var(--accent))
}
main {
  position:relative;
  max-width:1400px;
  margin:0 auto
}
.intro {
  position:absolute;
  top:37px;
  left:5%;
  z-index:2;
  pointer-events:none
}
.eyebrow {
  font-size:8px;
  letter-spacing:.2em;
  color:#b0c3b0;
  margin:0 0 13px
}
.intro h1 {
  font-size:clamp(26px,2.6vw,37px);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:1.13;
  margin:0
}
.intro h1 span {
  color:#b8cbb8
}
.network {
  position:relative;
  height:clamp(640px,calc(100svh - 230px),830px);
  max-width:1100px;
  margin:0 auto
}
.connections {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:-1
}
.connection-paths path {
  stroke:rgba(var(--accent),.55);
  stroke-width:1.25;
  fill:none;
  transition:stroke 800ms
}
.connection-paths path.wire-twin {
  stroke:rgba(var(--accent),.18);
  stroke-width:1
}
.connection-halo path {
  stroke:rgba(var(--accent),.55);
  stroke-width:4;
  fill:none;
  filter:url(#line-glow);
  transition:stroke 800ms
}
.node-wrap {
  position:absolute
}
.node {
  position:relative;
  display:flex;
  border:1px solid rgba(var(--accent),.26);
  border-radius:17px;
  background:linear-gradient(135deg,rgba(216,237,214,.13),rgba(var(--deep),.49));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.055),0 12px 45px rgba(0,0,0,.12),0 0 0 6px rgba(var(--deep),.22),0 0 0 7px rgba(var(--accent),.1);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  transition:background 800ms,border-color 700ms,box-shadow 700ms,transform 300ms
}
.node:before {
  content:"";
  position:absolute;
  left:-13px;
  top:-13px;
  width:30px;
  height:30px;
  border:1px solid rgba(var(--accent),.14);
  border-right:0;
  border-bottom:0;
  border-top-left-radius:17px;
  pointer-events:none;
  transition:border-color 700ms
}
.node:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse at 10% 100%,rgba(var(--accent),.06),transparent 70%);
  pointer-events:none;
  transition:background 700ms
}
.node:hover {
  transform:none;
  border-color:rgba(var(--accent),.65);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 16px 42px rgba(0,0,0,.15),0 0 0 6px rgba(var(--deep),.22),0 0 0 7px rgba(var(--accent),.22)
}
.node.is-selected {
  border-color:rgba(var(--accent),.75);
  box-shadow:0 0 32px rgba(var(--accent),.12),0 0 0 6px rgba(var(--deep),.22),0 0 0 7px rgba(var(--accent),.22)
}
.node-number {
  position:absolute;
  left:17px;
  top:16px;
  color:rgba(var(--accent),.65);
  font-size:9px;
  letter-spacing:.1em
}
.node-check {
  position:absolute;
  right:14px;
  top:12px;
  width:15px!important;
  height:15px!important;
  color:rgb(var(--accent))
}
.about-wrap {
  left:12%;
  top:31%;
  width:145px
}
.node-about {
  height:142px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px
}
.about-icon {
  width:37px!important;
  height:37px!important;
  color:#e4efe1;
  stroke-width:1.4!important;
  margin-top:10px
}
.small-card-title {
  font-size:12px;
  font-weight:400
}
.node-caption {
  display:block;
  text-align:center;
  font-size:10px;
  line-height:1.6;
  color:#becabd;
  margin-top:18px
}
.node-caption .subtle {
  color:#8d9b8f;
  font-size:9px
}
.agent-wrap {
  left:49%;
  top:31%;
  width:292px
}
.node-agent {
  height:139px;
  align-items:center;
  padding:30px;
  gap:17px
}
.agent-icon {
  width:38px!important;
  height:38px!important;
  stroke-width:1.7!important;
  color:#cfe3c8
}
.agent-title {
  font-size:23px;
  letter-spacing:-.025em;
  line-height:1.1
}
.agent-title>span {
  display:block;
  font-size:11px;
  letter-spacing:0;
  color:#a8bba8;
  margin-top:8px
}
.agent-indicator {
  width:5px;
  height:5px;
  position:absolute;
  right:18px;
  top:17px;
  background:rgb(var(--accent));
  border-radius:50%;
  box-shadow:0 0 8px rgba(var(--accent),.45)
}
.agent-labels {
  display:flex;
  justify-content:space-between;
  margin:17px 37px 0 28px;
  font-size:8px;
  color:#b0c4ae
}
.branch-label {
  position:absolute;
  top:65px;
  right:calc(100% + 30px);
  width:120px;
  font-size:8px;
  color:rgba(var(--accent),.65)
}
.connect-wrap {
  left:22%;
  top:64%;
  width:300px
}
.node-connect {
  padding:22px;
  flex-direction:column;
  background:radial-gradient(ellipse at 2% 96%,rgba(var(--tint),.75),transparent 80%),linear-gradient(125deg,rgba(var(--accent),.13),rgba(var(--deep),.65))
}
.connect-heading {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:17px;
  letter-spacing:-.02em;
  line-height:1.25
}
.connect-heading>.icon {
  width:30px;
  height:30px;
  color:#d4e9cf
}
.connect-heading>.node-number {
  left:auto;
  right:0;
  top:0;
  position:relative;
  margin-left:auto;
  align-self:flex-start
}
.card-rule {
  height:1px;
  background:rgba(var(--accent),.1);
  margin:17px -2px 15px
}
.field-label {
  font-size:9px;
  color:#b9cbb6;
  margin-bottom:7px
}
.second-label {
  margin-top:14px
}
.integration-row {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:37px;
  padding:8px 11px;
  border:1px solid rgba(var(--accent),.08);
  border-radius:7px;
  background:rgba(var(--accent),.06);
  font-size:11px
}
.integration-row .icon {
  width:17px;
  height:17px;
  color:rgb(var(--accent))
}
.integration-state {
  margin-left:auto;
  color:rgba(var(--accent),.72);
  font-size:8px
}
.card-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  color:#d9e9d3;
  margin-top:17px
}
.card-action .icon {
  width:14px;
  height:14px;
  color:rgb(var(--accent))
}
.top-caption {
  position:absolute;
  bottom:calc(100% + 16px);
  left:0;
  right:0;
  text-align:center;
  font-size:8px;
  color:#b7c8b3;
  white-space:nowrap
}
.access-wrap {
  left:69%;
  top:65%;
  width:160px
}
.node-access {
  height:157px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px
}
.access-icon {
  width:35px!important;
  height:35px!important;
  stroke-width:1.4!important;
  color:#e5ece2;
  margin-top:8px
}
.access-spark {
  position:absolute;
  right:15px;
  top:11px;
  font-weight:300;
  color:rgba(var(--accent),.7);
  font-size:19px
}
.access-arrow {
  position:absolute;
  bottom:10px;
  right:13px;
  color:rgb(var(--accent))
}
.access-arrow .icon {
  width:14px;
  height:14px
}
.port {
  width:8px;
  height:8px;
  position:absolute;
  background:rgb(var(--accent));
  border-radius:50%;
  box-shadow:0 0 12px 3px rgba(var(--accent),.5),0 0 24px 5px rgba(var(--accent),.15);
  z-index:2;
  transition:background 800ms,box-shadow 800ms
}
.port:after {
  content:"";
  position:absolute;
  inset:-8px;
  background:radial-gradient(ellipse,rgba(var(--accent),.25),transparent 65%)
}
.port-right {
  right:-5px;
  top:50%;
  transform:translateY(-50%)
}
.port-left {
  left:-5px;
  top:50%;
  transform:translateY(-50%)
}
.port-bottom {
  bottom:-5px
}
.model-port {
  left:23%
}
.access-port {
  left:70%
}
.port-top {
  top:-5px;
  left:50%;
  transform:translateX(-50%)
}
.wire-caption {
  position:absolute;
  left:13%;
  top:calc(31% - 32px);
  font-size:8px;
  color:#a8bca7;
  letter-spacing:.015em
}
.scene-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:45px 5% 26px;
  gap:20px
}
.interaction-hint {
  display:flex;
  align-items:center;
  gap:10px;
  color:#9faf9e;
  font-size:9px;
  letter-spacing:.02em
}
.hint-cross {
  font-size:20px;
  font-weight:200;
  color:rgb(var(--accent))
}
.reset-control {
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  background:transparent;
  padding:10px 0;
  color:#bbc9b9;
  font-size:9px
}
.reset-control>span:last-child {
  font-size:16px;
  margin-left:9px
}
.theme-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgb(var(--accent));
  transition:background 800ms
}
.site-footer {
  min-height:65px;
  margin:0 4.2%;
  border-top:1px solid rgba(230,244,230,.1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#8fa18f;
  font-size:8px;
  letter-spacing:.01em
}
.site-footer>span {
  white-space:nowrap
}
.footer-separator {
  margin:0 10px;
  color:#607761
}
.site-footer nav {
  display:flex;
  gap:22px;
  flex-wrap:wrap
}
.site-footer a:hover,.text-link:hover {
  color:rgb(var(--accent))
}
.details-library {
  max-width:800px;
  margin:70px auto;
  padding:0 24px
}
.details-library>.detail-content {
  margin-bottom:70px
}
.js .details-library {
  display:none
}
.detail-dialog {
  position:fixed;
  z-index: 20;
  inset:24px 24px 24px auto;
  margin:0;
  width:min(430px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  height:fit-content;
  max-width:none;
  overflow:auto;
  border:1px solid rgba(var(--accent),.24);
  border-top-color:rgba(235,247,239,.32);
  border-left-color:rgba(var(--accent),.35);
  border-radius:22px;
  padding:62px 34px 32px;
  color:#e5ece3;
  background:linear-gradient(140deg,rgba(235,247,239,.09),transparent 46%,rgba(var(--accent),.035)),rgba(var(--deep),.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 1px 0 0 rgba(255,255,255,.035),0 25px 80px rgba(0,0,0,.2);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%)
}
.detail-dialog[open] {
  animation:panel-in 280ms ease-out
}
.detail-dialog::backdrop {
  background:rgba(2,5,3,.06)
}
@keyframes panel-in {
  from {
    opacity:0;
    transform:translateX(15px)
  }
  to {
    opacity:1;
    transform:translateX(0)
  }
}
.close-dialog {
  position:absolute;
  right:19px;
  top:19px;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  padding:0;
  border:1px solid rgba(var(--accent),.18);
  border-radius:50%;
  background:rgba(var(--accent),.05)
}
.close-dialog .icon {
  width:15px;
  height:15px
}
.detail-eyebrow {
  color:rgb(var(--accent));
  font-size:9px;
  letter-spacing:.18em
}
.detail-content h2 {
  font-size:35px;
  line-height:1.15;
  letter-spacing:-.045em;
  font-weight:400;
  margin:19px 0 20px
}
.detail-content p {
  font-size:12px;
  line-height:1.8;
  color:#bbc6bc;
  margin:0 0 18px
}
.detail-content h3 {
  font-weight:500;
  font-size:13px;
  margin:0 0 16px
}
.detail-divider {
  height:1px;
  background:rgba(var(--accent),.15);
  margin:27px 0
}
.feature-list {
  list-style:none;
  padding:0;
  margin:0
}
.feature-list li {
  display:flex;
  gap:14px;
  margin:21px 0
}
.feature-list li>span {
  font-size:9px;
  color:rgb(var(--accent));
  padding-top:3px
}
.feature-list strong {
  font-size:12px;
  font-weight:500
}
.feature-list p {
  font-size:11px;
  line-height:1.7;
  margin:6px 0 0
}
.detail-content p.detail-note {
  border-left:1px solid rgba(var(--accent),.4);
  padding-left:13px;
  font-size:10px;
  color:#9eaf9f;
  margin-top:29px
}
.service-detail {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:21px 0;
  border-bottom:1px solid rgba(var(--accent),.12)
}
.service-detail>.icon {
  color:rgb(var(--accent));
  width:23px;
  height:23px
}
.service-detail>div {
  flex:1
}
.service-detail h3 {
  margin:2px 0 6px
}
.service-detail p {
  font-size:11px;
  line-height:1.6;
  margin:0
}
.service-detail>span {
  font-size:8px;
  color:rgb(var(--accent));
  padding:4px 6px;
  border:1px solid rgba(var(--accent),.2);
  border-radius:4px;
  margin-top:2px
}
.steps {
  padding-left:17px;
  font-size:11px;
  color:#bbc6bc;
  line-height:1.8
}
.steps li {
  padding-left:6px;
  margin-bottom:8px
}
.steps li::marker {
  color:rgb(var(--accent))
}
.auth-preview {
  border:1px solid rgba(var(--accent),.15);
  border-radius:12px;
  padding:6px;
  margin-top:26px
}
.auth-tabs {
  display:flex;
  padding:3px;
  background:rgba(0,0,0,.1);
  border-radius:8px;
  gap:4px
}
.auth-tab {
  width:50%;
  border:0;
  border-radius:6px;
  background:transparent;
  font-size:11px;
  padding:11px 5px;
  color:#a8b5aa
}
.auth-tab.is-active {
  color:rgb(var(--accent));
  background:rgba(var(--accent),.09)
}
.auth-state {
  text-align:center;
  padding:34px 16px 29px
}
.auth-state>.icon {
  width:34px;
  height:34px;
  color:rgb(var(--accent));
  margin-bottom:15px
}
.auth-state h3 {
  font-size:14px;
  line-height:1.5;
  margin-bottom:10px
}
.auth-state p {
  font-size:11px
}
.coming-label {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:9px;
  color:rgb(var(--accent))
}
.text-link {
  font-size:11px;
  display:flex;
  justify-content:space-between;
  margin-top:25px
}
.contact-note {
  font-size:12px;
  line-height:1.7;
  color:#bbc6bc
}
.contact-note a {
  text-decoration:underline
}
.skip-link {
  position:fixed;
  left:30px;
  top:-100px;
  padding:15px;
  background:#152d1f;
  z-index:100
}
.skip-link:focus {
  top:20px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@media(min-width:1500px) {
  .network {
    max-width:1170px
  }
  .intro {
    top:47px
  }
  .about-wrap {
    top:29%
  }
  .agent-wrap {
    top:29%
  }
  .wire-caption {
    top:calc(29% - 32px)
  }
}
@media(max-width:1050px) {
  .network {
    height:710px
  }
  .intro {
    top:32px;
    left:6%
  }
  .about-wrap {
    left:10%;
    width:133px;
    top:30%
  }
  .node-about {
    height:133px
  }
  .agent-wrap {
    left:49%;
    width:255px;
    top:31%
  }
  .node-agent {
    height:130px;
    padding:22px;
    gap:12px
  }
  .agent-title {
    font-size:21px
  }
  .branch-label {
    right:calc(100% + 20px);
    width:100px;
    font-size:7px
  }
  .connect-wrap {
    left:20%;
    top:62%;
    width:280px
  }
  .access-wrap {
    left:70%;
    top:63%;
    width:145px
  }
  .node-access {
    height:147px
  }
  .wire-caption {
    left:10%;
    top:calc(30% - 32px)
  }
  .site-footer nav {
    gap:15px
  }
  .portrait {
    background-position:57% center
  }
}
@media(max-width:700px) {
  body {
    padding:7px
  }
  .world {
    border-radius:20px;
    min-height:calc(100svh - 14px)
  }
  .site-header {
    height:73px;
    margin:0 6%;
    flex-wrap:wrap
  }
  .wordmark {
    font-size:23px
  }
  .brand-dot {
    width:4px;
    height:4px;
    margin-top:14px
  }
  .project-status {
    position:absolute;
    top:93px;
    left:6%;
    font-size:8px;
    gap:6px;
    z-index:2
  }
  .status-divider {
    padding:0 1px
  }
  .header-access {
    font-size:10px;
    gap:10px
  }
  .header-access .icon {
    width:15px
  }
  .intro {
    top:57px;
    left:6%
  }
  .intro h1 {
    font-size:29px;
    line-height:1.13
  }
  .eyebrow {
    font-size:6px;
    letter-spacing:.17em;
    margin-bottom:10px
  }
  .network {
    height:688px;
    max-width:540px
  }
  .about-wrap {
    left:9%;
    top:32%;
    width:113px
  }
  .node-about {
    height:118px;
    border-radius:13px
  }
  .about-icon {
    width:31px!important;
    height:31px!important
  }
  .node-number {
    top:13px;
    left:13px;
    font-size:8px
  }
  .node-check {
    top:9px;
    right:10px
  }
  .small-card-title {
    font-size:10px
  }
  .agent-wrap {
    left:auto;
    right:7%;
    top:34%;
    width:185px
  }
  .node-agent {
    height:108px;
    padding:17px;
    gap:11px;
    border-radius:13px
  }
  .agent-icon {
    width:28px!important;
    height:28px!important
  }
  .agent-title {
    font-size:19px
  }
  .agent-title>span {
    font-size:8px;
    margin-top:6px;
    line-height:1.4
  }
  .agent-indicator {
    top:13px;
    right:12px;
    width:4px;
    height:4px
  }
  .agent-labels {
    font-size:6px;
    margin:16px 18px 0 12px
  }
  .branch-label {
    display:none
  }
  .node-caption {
    font-size:9px;
    margin-top:15px;
    line-height:1.6
  }
  .node-caption .subtle {
    font-size:8px
  }
  .connect-wrap {
    left:12%;
    top:65%;
    width:220px
  }
  .node-connect {
    padding:17px;
    border-radius:14px
  }
  .connect-heading {
    font-size:15px;
    gap:11px
  }
  .connect-heading>.icon {
    width:26px;
    height:26px
  }
  .card-rule {
    margin:14px 0 12px
  }
  .field-label {
    font-size:8px
  }
  .integration-row {
    min-height:33px;
    padding:7px 9px;
    font-size:10px;
    gap:7px
  }
  .integration-state {
    font-size:7px
  }
  .second-label {
    margin-top:12px
  }
  .card-action {
    font-size:8px;
    margin-top:15px
  }
  .top-caption {
    font-size:7px;
    bottom:calc(100% + 15px)
  }
  .access-wrap {
    left:auto;
    right:7%;
    top:66%;
    width:125px
  }
  .node-access {
    height:132px;
    border-radius:13px
  }
  .access-icon {
    width:30px!important;
    height:30px!important
  }
  .wire-caption {
    top:calc(32% - 28px);
    left:9%;
    font-size:7px
  }
  .scene-bottom {
    margin:39px 6% 19px;
    gap:10px
  }
  .interaction-hint {
    font-size:7px;
    gap:6px
  }
  .hint-cross {
    font-size:17px
  }
  .reset-control {
    font-size:8px;
    gap:7px
  }
  .reset-control>span:last-child {
    margin-left:3px
  }
  .site-footer {
    margin:0 6%;
    padding:20px 0;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    font-size:8px
  }
  .site-footer nav {
    gap:15px;
    row-gap:12px;
    font-size:7px
  }
  .portrait {
    background-position:57% center;
    opacity:.68
  }
  .color-wash {
    background:linear-gradient(180deg,rgba(var(--deep),.1),rgba(var(--deep),.06) 55%,rgba(var(--deep),.35)),radial-gradient(ellipse at 0% 80%,rgba(var(--tint),.44),transparent 70%)
  }
  .detail-dialog {
    inset:auto 12px 12px;
    margin:0;
    width:calc(100% - 24px);
    max-height:85dvh;
    padding:52px 25px 27px;
    border-radius:20px
  }
  .detail-content h2 {
    font-size:32px
  }
  .detail-dialog[open] {
    animation:panel-in-mobile 250ms ease-out
  }
  @keyframes panel-in-mobile {
    from {
      opacity:0;
      transform:translateY(20px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
}
@media(max-width:430px) {
  .network {
    height:660px
  }
  .about-wrap {
    left:8%;
    width:98px;
    top:33%
  }
  .node-about {
    height:109px
  }
  .agent-wrap {
    width:166px;
    right:6%;
    top:35%
  }
  .node-agent {
    padding:14px;
    gap:9px;
    height:102px
  }
  .agent-title {
    font-size:17px
  }
  .agent-title>span {
    font-size:7px
  }
  .agent-icon {
    width:26px!important;
    height:26px!important
  }
  .agent-labels {
    font-size:6px;
    margin-left:8px;
    margin-right:12px
  }
  .connect-wrap {
    left:8%;
    width:196px;
    top:66%
  }
  .node-connect {
    padding:15px
  }
  .connect-heading {
    font-size:14px
  }
  .connect-heading>.icon {
    width:23px;
    height:23px
  }
  .access-wrap {
    width:110px;
    right:6%;
    top:67%
  }
  .node-access {
    height:122px
  }
  .access-wrap .top-caption {
    font-size:6px
  }
  .top-caption {
    font-size:6px
  }
  .node-caption {
    font-size:8px
  }
  .wire-caption {
    left:8%;
    top:calc(33% - 27px);
    font-size:6px
  }
  .scene-bottom {
    margin-top:50px
  }
  .site-footer nav {
    gap:12px;
    font-size:6.5px
  }
  .interaction-hint {
    max-width:170px;
    line-height:1.6
  }
  .detail-dialog {
    max-height:88dvh
  }
}
@media(max-width:360px) {
  .connect-wrap {
    width:171px
  }
  .node-connect {
    padding:13px
  }
  .access-wrap {
    width:96px
  }
  .agent-wrap {
    width:150px
  }
  .agent-icon {
    width:22px!important;
    height:22px!important
  }
  .agent-title {
    font-size:16px
  }
  .agent-title>span {
    font-size:6.5px
  }
  .node-about {
    height:101px
  }
  .about-wrap {
    width:86px
  }
  .node-number {
    font-size:7px
  }
  .connect-heading {
    font-size:13px
  }
  .card-action {
    font-size:7px
  }
  .site-footer nav {
    column-gap:11px
  }
  .project-status {
    font-size:7px
  }
}
/* Keep small text readable and both lower cards separate at narrow widths. */ .site-footer {
  font-size:10px
}
.site-footer nav {
  gap:18px
}
.site-footer a {
  display:inline-flex;
  align-items:center;
  min-height:32px
}
.close-dialog {
  width:40px;
  height:40px;
  right:15px;
  top:15px
}
.detail-eyebrow {
  font-size:10px
}
.detail-content p {
  font-size:13px
}
.detail-content p.detail-note {
  font-size:11px
}
.detail-content h3 {
  font-size:14px
}
.feature-list strong {
  font-size:13px
}
.feature-list p,.service-detail p,.auth-state p,.steps {
  font-size:12px
}
.field-label {
  font-size:10px
}
.node-caption {
  font-size:11px
}
.top-caption {
  font-size:9px
}
.agent-labels {
  font-size:9px
}
.interaction-hint,.reset-control {
  font-size:10px
}
.node-caption .subtle {
  font-size:9px
}
.card-action {
  font-size:10px
}
.integration-state {
  font-size:9px
}
.wire-caption,.branch-label {
  font-size:9px
}
@media(max-width:700px) {
  .site-footer {
    font-size:10px;
    gap:9px
  }
  .site-footer nav {
    font-size:10px;
    gap:0 18px
  }
  .site-footer a {
    min-height:36px
  }
  .project-status {
    font-size:9px
  }
  .eyebrow {
    font-size:7px
  }
  .header-access {
    font-size:11px
  }
  .small-card-title {
    font-size:11px
  }
  .agent-title>span {
    font-size:9px
  }
  .agent-labels {
    font-size:8px;
    margin-left:4px;
    margin-right:6px
  }
  .node-caption {
    font-size:10px
  }
  .top-caption {
    font-size:8px
  }
  .field-label {
    font-size:9px
  }
  .integration-row {
    font-size:11px
  }
  .integration-state {
    font-size:8px
  }
  .card-action {
    font-size:9px
  }
  .interaction-hint {
    font-size:9px;
    max-width:190px
  }
  .reset-control {
    font-size:9px;
    min-height:44px
  }
  .wire-caption {
    font-size:8px
  }
  .access-wrap .top-caption {
    font-size:8px
  }
  .scene-bottom {
    margin-top:64px
  }
  .node-about,.node-agent,.node-access {
    backdrop-filter:blur(10px)
  }
}
@media(min-width:431px) and (max-width:520px) {
  .connect-wrap {
    left:8%;
    width:51%
  }
  .access-wrap {
    right:6%;
    width:28%
  }
  .node-connect {
    padding:16px
  }
  .agent-wrap {
    right:6%;
    width:46%
  }
}
@media(max-width:430px) {
  .agent-title>span {
    font-size:8px
  }
  .agent-labels {
    font-size:7px
  }
  .node-caption {
    font-size:9px
  }
  .node-caption .subtle {
    font-size:8px
  }
  .field-label {
    font-size:8px
  }
  .top-caption,.access-wrap .top-caption {
    font-size:7px
  }
  .card-action {
    font-size:8px
  }
  .wire-caption {
    font-size:7px
  }
  .interaction-hint {
    max-width:170px;
    font-size:8px
  }
  .reset-control {
    font-size:8px
  }
}
@media(max-width:360px) {
  .connect-wrap {
    left:6%;
    width:158px
  }
  .access-wrap {
    right:5%;
    width:86px
  }
  .node-connect {
    padding:12px
  }
  .connect-heading {
    gap:8px
  }
  .connect-heading>.icon {
    width:21px;
    height:21px
  }
  .integration-row {
    padding:7px;
    font-size:10px;
    gap:6px
  }
  .integration-state {
    font-size:7px
  }
  .card-action {
    font-size:7px
  }
  .node-access .small-card-title {
    font-size:10px
  }
  .top-caption,.access-wrap .top-caption {
    font-size:6.5px
  }
  .agent-title>span {
    font-size:7px
  }
  .project-status {
    font-size:8px
  }
  .interaction-hint {
    max-width:148px
  }
  .node-caption {
    font-size:8px
  }
}
@media(max-width:700px) {
  .site-footer,.site-footer nav {
    font-size:11px
  }
  .agent-labels {
    font-size:9px;
    margin-left:0;
    margin-right:0
  }
  .agent-title>span {
    font-size:9px
  }
  .top-caption,.access-wrap .top-caption {
    font-size:9px;
    white-space:normal;
    line-height:1.4
  }
  .node-caption {
    font-size:10px
  }
  .node-caption .subtle {
    font-size:9px
  }
  .wire-caption {
    font-size:9px
  }
  .field-label {
    font-size:10px
  }
  .integration-state {
    font-size:9px
  }
  .card-action {
    font-size:9px
  }
  .interaction-hint,.reset-control {
    font-size:9px
  }
}
@media(max-width:520px) {
  .connect-wrap {
    left:8%;
    width:calc(58% - 24px)
  }
  .access-wrap {
    right:6%;
    width:28%
  }
  .node-connect {
    padding:14px
  }
  .node-access .small-card-title {
    font-size:11px
  }
  .scene-bottom {
    margin-top:75px
  }
}
@media(max-width:360px) {
  .node-connect {
    padding:12px
  }
  .agent-title>span {
    font-size:8px
  }
  .agent-labels {
    font-size:8px
  }
  .connect-heading {
    font-size:12px;
    gap:6px
  }
  .connect-heading>.icon {
    width:19px;
    height:19px
  }
  .integration-row {
    gap:5px;
    padding:7px 5px
  }
  .integration-row .icon {
    width:14px;
    height:14px
  }
  .integration-state {
    font-size:8px
  }
  .card-action {
    font-size:8px
  }
  .top-caption,.access-wrap .top-caption {
    font-size:8px
  }
  .node-access .small-card-title {
    font-size:10px
  }
  .node-caption {
    font-size:9px
  }
  .node-caption .subtle {
    font-size:8px
  }
  .interaction-hint {
    font-size:8px
  }
  .reset-control {
    font-size:8px
  }
}
/* Quiet canvas: the information lives inside the cards, the image gets room. */
.world {
  display: flex;
  flex-direction: column;
}
main {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}
.network {
  width: 100%;
  height: clamp(660px, calc(100svh - 160px), 900px);
}
.node, .detail-dialog {
  border-color: rgba(var(--accent), .17);
  border-top-color: rgba(242,248,244,.4);
  border-left-color: rgba(228,241,232,.23);
  border-bottom-color: rgba(0,0,0,.36);
  background: linear-gradient(135deg,rgba(245,250,247,.075),rgba(245,250,247,.01) 48%,rgba(var(--accent),.025)),rgba(var(--deep),.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(255,255,255,.065),0 1px 2px rgba(0,0,0,.3),0 18px 48px rgba(0,0,0,.16);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.detail-dialog {
  background-color: rgba(var(--deep),.3);
}
.node::before, .node::after {
  display: none;
}
.node:hover {
  border-color: rgba(var(--accent), .34);
  border-top-color: rgba(245,250,247,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),inset 1px 0 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(255,255,255,.08),0 18px 48px rgba(0,0,0,.18);
}
.node.is-selected {
  border-color: rgba(var(--accent), .5);
  border-top-color: rgba(245,250,247,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.08),0 0 24px rgba(var(--accent),.06),0 18px 48px rgba(0,0,0,.16);
}
.node-agent {
  justify-content: center;
  text-align: center;
}
.agent-title {
  font-size: 22px;
  letter-spacing: .1em;
  font-weight: 400;
}
.agent-title > span {
  margin-top: 11px;
  letter-spacing: .015em;
}
.node-connect {
  padding: 26px;
}
.connect-heading {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.015em;
  margin-bottom: 17px;
}
.integration-row {
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 33px;
  padding: 6px 0;
  gap: 11px;
  color: #c0cec0;
  font-size: 12px;
}
.integration-row .icon {
  width: 16px;
  height: 16px;
  opacity: .8;
}
.connections-note {
  margin-top: 16px;
  color: #a4b5a5;
  font-size: 10px;
}
.about-footer {
  margin-top: 27px;
  padding-top: 19px;
  border-top: 1px solid rgba(var(--accent),.15);
}
.about-legal-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 14px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--accent),.14);
  border-top-color: rgba(245,250,247,.2);
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(255,255,255,.04),transparent),rgba(var(--deep),.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.about-legal-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: #c3cfc2;
  font-size: 10px;
  white-space: nowrap;
  transition: color 180ms;
}
.about-legal-bar a:hover {
  color: rgb(var(--accent));
}
.main-legal-footer {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 22px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0;
  border: 0;
  transform: translate(-50%,8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms, transform 220ms, visibility 0s 220ms;
}
.main-legal-footer.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%,0);
  transition-delay: 0s;
}
.main-legal-footer .about-legal-bar {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.node-about .small-card-title {
  font-size: 11px;
  letter-spacing: .1em;
}
@media (max-width: 900px) {
  .main-legal-footer {
    left: 50%;
    width: min(520px,calc(100% - 32px));
    max-width: none;
    bottom: 12px;
  }
  body[data-panel="ueber-syllo"] .detail-dialog {
    bottom: calc(var(--legal-bar-height,94px) + 24px);
    max-height: calc(100dvh - var(--legal-bar-height,94px) - 60px);
  }
}
.about-icon, .access-icon {
  margin-top: 0;
  opacity: .8;
}
.small-card-title {
  font-size: 12px;
  color: #c7d4c6;
}
.port {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 9px rgba(var(--accent), .3);
}
.port::after {
  display: none;
}
.port-right { right: -3px; }
.port-left { left: -3px; }
.port-bottom { bottom: -3px; }
.port-top { top: -3px; }
.connection-paths path {
  stroke-width: 1;
  stroke: rgba(var(--accent), .3);
}
.connection-halo {
  opacity: .16;
}
.site-footer {
  border-top: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 5%;
  padding: 22px 0 25px;
  gap: 7px;
}
.footer-identity {
  display: flex;
  align-items: center;
  gap: 17px;
}
.site-footer .wordmark {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .22em;
  min-height: 40px;
  color: #d4dfd1;
}
.footer-status {
  font-size: 9px;
  color: #9ead9f;
}
.site-footer nav {
  justify-content: center;
  font-size: 10px;
  gap: 0 22px;
}
.site-footer nav a {
  min-height: 32px;
}
@media (max-width: 700px) {
  .network {
    height: clamp(590px, calc(100svh - 160px), 740px);
  }
  .node-connect {
    padding: 20px;
  }
  .connect-heading {
    font-size: 14px;
    margin-bottom: 13px;
  }
  .agent-title {
    font-size: 20px;
  }
  .agent-title > span {
    font-size: 10px;
    letter-spacing: 0;
  }
  .site-footer {
    padding: 18px 0 20px;
    gap: 5px;
  }
  .site-footer nav {
    gap: 0 17px;
    font-size: 10px;
  }
  .site-footer nav a {
    min-height: 36px;
  }
}
@media (max-width: 430px) {
  .about-legal-bar {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 10px;
  }
  .about-legal-bar a {
    justify-content: center;
    min-height: 40px;
  }
  .node-connect {
    padding: 17px;
  }
  .connect-heading {
    font-size: 13px;
  }
  .small-card-title, .node-access .small-card-title {
    font-size: 11px;
  }
  .agent-title {
    font-size: 18px;
  }
  .agent-title > span {
    font-size: 9px;
  }
  .integration-row {
    font-size: 11px;
    gap: 9px;
  }
  .connections-note {
    font-size: 9px;
    margin-top: 13px;
  }
}
.wire-brand {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 98%;
  height: auto;
  aspect-ratio: 1450 / 280;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--accent), .77);
  transition: color 900ms;
}
.wire-artwork {
  color: inherit;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(var(--accent), .09));
}
.wire-trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.wire-playback {
  position: absolute;
  bottom: -6px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 9px;
  border: 0;
  border-radius: 50%;
  color: rgba(var(--accent), .5);
  background: transparent;
  transition: color 200ms, background 200ms;
}
.wire-playback[hidden] {
  display: none;
}
.wire-playback:hover, .wire-playback:focus-visible {
  color: rgb(var(--accent));
  background: rgba(var(--accent), .05);
}
.wire-playback svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wire-playback .playback-play, .wire-playback.is-paused .playback-pause {
  display: none;
}
.wire-playback.is-paused .playback-play {
  display: block;
}
.network {
  min-height: 740px;
}
.about-wrap, .agent-wrap {
  top: 15%;
}
.connect-wrap, .access-wrap {
  top: 70%;
}
@media (max-width: 700px) {
  .network {
    min-height: 590px;
  }
  .about-wrap, .agent-wrap {
    top: 20%;
  }
  .connect-wrap, .access-wrap {
    top: 67%;
  }
  .wire-playback {
    bottom: -21px;
    right: -5px;
  }
}
/* Compact utility panels; ABOUT US is a centered editorial surface. */
.detail-dialog {
  inset: 24px 24px auto auto;
  width: min(360px,calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 48px 26px 26px;
}
.compact-content h2 {
  font-size: 29px;
  margin: 17px 0 19px;
}
.compact-content .service-detail {
  gap: 12px;
  padding: 16px 0;
}
.compact-content .service-detail .icon {
  width: 21px;
  height: 21px;
}
.compact-content .service-detail h3 {
  font-size: 13px;
  margin-bottom: 4px;
}
.compact-content .service-detail p {
  font-size: 11px;
}
.compact-content .compact-note {
  font-size: 10px;
  color: #a5b5a4;
  margin: 20px 0 0;
}
.compact-content .auth-preview {
  margin-top: 0;
  padding: 0;
  border: 0;
}
.compact-content .auth-state {
  padding: 24px 0 0;
  text-align: left;
}
.compact-content .auth-state h3 {
  font-size: 12px;
  margin-bottom: 5px;
}
.compact-content .auth-state p {
  font-size: 11px;
  margin: 0;
}
body[data-panel="ueber-syllo"] .detail-dialog {
  inset: auto;
  top: calc((100dvh - var(--legal-bar-height,48px) - 28px) / 2);
  left: 50%;
  transform: translate(-50%,-50%);
  width: min(920px,calc(100% - 64px));
  max-height: calc(100dvh - var(--legal-bar-height,48px) - 64px);
  padding: 44px 52px 34px;
  border-radius: 24px;
}
body[data-panel="ueber-syllo"] .detail-dialog[open] {
  animation: about-reveal 280ms ease-out;
}
@keyframes about-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.about-hero {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: end;
  gap: 42px;
  margin: 24px 0 34px;
}
.about-story .about-hero h2 {
  margin: 0;
  font-size: clamp(38px,3.8vw,52px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.05em;
}
.about-hero h2 span {
  color: rgba(var(--accent),.78);
}
.about-story .about-hero p {
  margin: 0;
  padding-bottom: 2px;
  font-size: 13px;
  line-height: 1.85;
  color: #c7d0c4;
}
.about-purpose {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: start;
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid rgba(var(--accent),.15);
  border-bottom: 1px solid rgba(var(--accent),.15);
}
.about-story .about-purpose h3 {
  margin: 4px 0 0;
  color: rgba(var(--accent),.82);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.about-story .about-purpose p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  max-width: 60ch;
}
.about-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 27px 0 23px;
}
.about-story .about-section-heading h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
}
.about-section-heading > span {
  font-size: 10px;
  color: #a3b29f;
}
.about-journey {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-journey li {
  padding: 0 24px;
  border-left: 1px solid rgba(var(--accent),.12);
}
.about-journey li:first-child {
  padding-left: 0;
  border-left: 0;
}
.about-journey li:last-child {
  padding-right: 0;
}
.about-step-number {
  display: block;
  margin-bottom: 13px;
  color: rgba(var(--accent),.75);
  font-size: 10px;
  letter-spacing: .12em;
}
.about-journey h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.02em;
}
.about-story .about-journey p {
  margin: 0;
  font-size: 11px;
  line-height: 1.8;
}
.about-story .about-project-note {
  margin: 28px 0 0;
  color: #9eac9b;
  font-size: 10px;
  line-height: 1.6;
}
.main-legal-footer .about-legal-bar {
  gap: 4px 36px;
}
.main-legal-footer .about-legal-bar a {
  font-size: 11px;
  min-height: 38px;
}
@media (max-width: 700px) {
  .detail-dialog {
    inset: auto 12px 12px;
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
    padding: 44px 24px 25px;
  }
  body[data-panel="ueber-syllo"] .detail-dialog {
    width: calc(100% - 24px);
    max-height: calc(100dvh - var(--legal-bar-height,94px) - 48px);
    padding: 45px 26px 28px;
    border-radius: 20px;
  }
  .about-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 22px 0 25px;
  }
  .about-story .about-hero h2 {
    font-size: clamp(34px,7vw,44px);
  }
  .about-story .about-hero p {
    font-size: 12px;
  }
  .about-purpose {
    grid-template-columns: 70px 1fr;
    gap: 15px;
    padding: 20px 0;
  }
  .about-story .about-purpose p {
    font-size: 12px;
  }
  .about-journey li {
    padding-inline: 17px;
  }
}
@media (max-width: 520px) {
  .about-journey {
    grid-template-columns: 1fr;
    gap: 21px;
  }
  .about-journey li, .about-journey li:first-child, .about-journey li:last-child {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 9px;
    padding: 0;
    border: 0;
  }
  .about-step-number {
    margin: 3px 0 0;
  }
  .about-journey h4 {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .about-story .about-project-note {
    font-size: 9px;
  }
  .main-legal-footer .about-legal-bar {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px 26px;
  }
  .main-legal-footer .about-legal-bar a {
    justify-content: center;
    min-height: 34px;
  }
}
@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}