:root {
  color-scheme:dark;
  --bg:#070a10;
  --surface:#0e131e;
  --line:#ffffff12;
  --text:#eef2fa;
  --muted:#8792a6;
  --blue:#377dff;
  --ice:#8bb8ff;
  --mint:#6fddce;
  --display:'Avenir Next','Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;
  --body:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

@media(max-width:680px) {
  .site-header .changelog-nav {
    position:static;
    width:auto;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    display:flex!important;
    grid-template-columns:none;
    gap:14px!important;
    font-size:10px!important
  }
  .site-header .changelog-nav a {
    padding:6px 0
  }
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.7 var(--body);
  -webkit-font-smoothing:antialiased
}
button,input {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button,a,summary {
  touch-action:manipulation
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
img {
  max-width:100%;
  display:block
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:600
}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--ice);
  outline-offset:5px
}
::selection {
  background:#377dff66;
  color:white
}
.wrap {
  max-width:1280px;
  width:calc(100% - 112px);
  margin-inline:auto
}
.section-space {
  padding-block:112px
}
.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.icon {
  height:20px;
  width:20px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.skip-link {
  position:fixed;
  z-index:100;
  left:20px;
  top:15px;
  background:white;
  color:#070a10;
  padding:10px 20px;
  transform:translateY(-200%)
}
.skip-link:focus {
  transform:none
}
.site-glow {
  position:absolute;
  top:0;
  right:0;
  width:70%;
  height:850px;
  pointer-events:none;
  background:radial-gradient(ellipse at 70% 10%,#102a5c35,transparent 60%)
}
/* Navigation */
.site-header {
  height:92px;
  position:relative;
  z-index:20
}
.nav-wrap {
  max-width:1392px;
  width:calc(100% - 64px);
  margin:auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.8px;
  white-space:nowrap
}
.brand b {
  font:9px/1 var(--mono);
  letter-spacing:1.2px;
  color:#8b9ab3;
  padding:5px 6px;
  border:1px solid #344055;
  border-radius:4px;
  margin-left:4px
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:31px;
  font-size:12px;
  color:#a8b2c4
}
.site-header nav a {
  transition:color .2s
}
.site-header nav a:hover {
  color:white
}
.nav-divider {
  height:15px;
  width:1px;
  background:#ffffff20
}
.nav-source {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #ffffff1c;
  border-radius:7px;
  padding:9px 13px;
  color:#dce5f5
}
.nav-source .icon {
  width:15px;
  height:15px
}
.nav-source .icon:last-child {
  width:12px;
  height:12px;
  margin-left:4px
}
.nav-toggle {
  display:none!important
}
.language-link {
  font-family:var(--mono)
}
.icon-button {
  border:1px solid #ffffff18;
  background:#ffffff07;
  border-radius:50%;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s
}
.icon-button:hover {
  background:#ffffff18
}
/* Hero */
.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  position:relative;
  padding-top:80px;
  padding-bottom:74px;
  min-height:684px
}
.hero-copy {
  position:relative;
  z-index:2
}
.release-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:500;
  letter-spacing:1.1px;
  color:#a3b3ce;
  padding:6px 9px 6px 0
}
.release-link .icon {
  width:13px;
  height:13px;
  margin-left:7px
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:100%;
  background:#619bff;
  box-shadow:0 0 10px #438aff60;
  flex-shrink:0
}
.hero h1 {
  font-size:clamp(62px,6.2vw,90px);
  letter-spacing:-5px;
  line-height:1.13;
  margin-top:26px;
  display:flex;
  flex-direction:column;
  font-weight:600
}
.hero h1>span:first-child {
  letter-spacing:-3px
}
.hero-word {
  background:linear-gradient(100deg,#a6cbff 0,#6c9efb 48%,#3474f2 86%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:650
}
.hero-statement {
  font-size:21px;
  line-height:1.65;
  margin-top:25px;
  letter-spacing:.4px;
  color:#d4deed
}
.hero-detail {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  margin-top:13px
}
.hero-actions {
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:30px
}
.button {
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:14px 23px;
  border-radius:7px;
  min-height:48px;
  font-size:13px;
  font-weight:600;
  transition:transform .2s,background .2s,box-shadow .2s
}
.button:hover {
  transform:translateY(-3px)
}
.button .icon {
  height:17px;
  width:17px
}
.button-primary {
  color:white;
  background:linear-gradient(180deg,#4285ff,#2264e7);
  box-shadow:inset 0 1px #ffffff30,0 5px 20px #176bff20
}
.button-primary:hover {
  box-shadow:inset 0 1px #ffffff30,0 8px 30px #176bff45;
  background:linear-gradient(180deg,#5792ff,#3474f2)
}
.button-quiet {
  background:transparent;
  padding:10px 0;
  gap:10px;
  color:#c9d3e3;
  font-size:12px
}
.play-circle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  border:1px solid #677998;
  border-radius:50%
}
.play-circle .icon {
  width:12px;
  height:12px;
  fill:currentColor;
  stroke-width:0;
  margin-left:1px
}
.hero-note {
  font-size:10px;
  color:#6c7890;
  margin-top:21px;
  letter-spacing:.8px
}
.hero-art {
  position:relative;
  margin-left:-25px;
  margin-right:-30px;
  align-self:stretch;
  min-height:500px
}
.orbit-scene {
  position:absolute;
  inset:0;
  perspective:800px;
  --px:0px;
  --py:0px;
  transform:translate(var(--px),var(--py));
  transition:transform .6s ease-out
}
.orbital-grid {
  position:absolute;
  inset:5% -10% -15%;
  background-image:linear-gradient(#4168a417 1px,transparent 1px),linear-gradient(90deg,#4168a417 1px,transparent 1px);
  background-size:42px 42px;
  transform:rotateX(58deg) rotateZ(-27deg);
  mask-image:radial-gradient(ellipse,black,transparent 64%)
}
.orbital-haze {
  position:absolute;
  inset:-10%;
  background:radial-gradient(ellipse at 50% 50%,#1a58c426 0,transparent 56%)
}
.orbital-label {
  position:absolute;
  left:50%;
  top:9%;
  transform:translateX(-50%);
  font:8px var(--mono);
  letter-spacing:3px;
  color:#506788;
  white-space:nowrap
}
.orbit {
  position:absolute;
  left:50%;
  top:47%;
  border:1px solid #4f7bc127;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-22deg);
  pointer-events:none
}
.orbit-outer {
  width:105%;
  height:80%;
  border-color:#446dab13
}
.orbit-middle {
  width:86%;
  height:66%;
  box-shadow:0 0 65px #1b5bd90a,inset 0 0 60px #1b5bd908;
  border-top-color:#426daf3b
}
.orbit-inner {
  width:61%;
  height:46%;
  border-style:dashed;
  border-color:#5d8de522
}
.orbit-track {
  position:absolute;
  left:50%;
  top:47%;
  width:86%;
  height:66%;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-22deg)
}
.orbit-track span {
  position:absolute;
  top:50%;
  left:0;
  width:5px;
  height:5px;
  background:#a2c7ff;
  border-radius:100%;
  box-shadow:0 0 18px 4px #397effa0;
  offset-path:ellipse(50% 50% at 50% 50%);
  offset-distance:0%;
  animation:orbital-run 20s linear infinite
}
.track-two {
  width:61%;
  height:46%;
  transform:translate(-50%,-50%) rotate(-22deg)
}
.track-two span {
  width:3px;
  height:3px;
  animation-duration:15s;
  animation-direction:reverse;
  box-shadow:0 0 10px 3px #56c9dd90
}
.orb-core {
  position:absolute;
  top:46%;
  left:50%;
  width:142px;
  height:142px;
  transform:translate(-50%,-50%) rotate(-9deg);
  border-radius:35px;
  background:linear-gradient(135deg,#3b64945c,#16356790 45%,#14294380);
  border:1px solid #699cf16b;
  box-shadow:inset 0 0 40px #3c82ee20,0 0 60px #1c67ed27,0 20px 70px #0008;
  animation:core-float 6s ease-in-out infinite
}
.core-inset {
  position:absolute;
  inset:8px;
  border-radius:28px;
  border:1px solid #8abdff20;
  background:linear-gradient(150deg,#213a5d,#101b2f 60%);
  display:grid;
  place-items:center
}
.core-inset img {
  transform:rotate(9deg);
  filter:drop-shadow(0 0 12px #176bff35);
  width:87px;
  height:87px
}
.core-reflection {
  position:absolute;
  left:20%;
  right:20%;
  height:1px;
  top:-1px;
  background:#c4e8ff;
  box-shadow:0 0 20px 3px #76b2ff60
}
.orbit-node {
  position:absolute;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  animation:node-float 7s ease-in-out infinite
}
.orbit-node>div {
  display:grid;
  place-items:center;
  width:55px;
  height:55px;
  border-radius:14px;
  border:1px solid #7897c144;
  background:linear-gradient(150deg,#203453e6,#0d1829f0);
  box-shadow:0 12px 40px #0005,inset 0 1px #bcd5ff1a;
  backdrop-filter:blur(10px)
}
.orbit-node .icon {
  width:22px;
  height:22px;
  color:#9fc4ff
}
.orbit-node>span {
  font:10px var(--mono);
  letter-spacing:.6px;
  color:#8ba5cb
}
.node-skills {
  top:21%;
  left:18%;
  animation-delay:-2s
}
.node-experts {
  right:6%;
  top:38%;
  animation-delay:-4s
}
.node-office {
  left:29%;
  bottom:16%
}
.node-experts .icon {
  color:#91d6d6
}
.node-office .icon {
  color:#bdcbff
}
.star {
  position:absolute;
  border-radius:50%;
  background:#7cadf9;
  box-shadow:0 0 10px #397eff80;
  animation:twinkle 5s ease-in-out infinite
}
.star-a {
  top:20%;
  right:26%;
  width:3px;
  height:3px
}
.star-b {
  bottom:29%;
  right:14%;
  width:2px;
  height:2px;
  animation-delay:-1s
}
.star-c {
  top:47%;
  left:8%;
  width:2px;
  height:2px;
  animation-delay:-3s
}
.star-d {
  top:8%;
  right:4%;
  width:2px;
  height:2px
}
.orbital-caption {
  position:absolute;
  left:50%;
  top:64%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:4px
}
.orbital-caption>span {
  font-size:15px;
  font-weight:600;
  letter-spacing:.3px;
  color:#b4cae9
}
.orbital-caption small {
  font-size:9px;
  color:#5b7291;
  white-space:nowrap
}
.orbit-coord {
  position:absolute;
  bottom:7%;
  right:3%;
  font:8px var(--mono);
  letter-spacing:2px;
  color:#3a5275
}
/* WorkBuddy package compatibility */
.compatibility-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding-bottom:64px;
  border-bottom:1px solid var(--line)
}
.openness {
  border-block:1px solid var(--line)
}
.openness .section-heading {
  margin-bottom:60px
}
.compatibility-copy h3,.modules-copy h3 {
  font-size:27px;
  line-height:1.5;
  letter-spacing:-.6px
}
.compatibility-copy {
  min-width:0
}
.compatibility-intro {
  max-width:420px;
  margin-top:24px;
  color:#a0adc1;
  font-size:14px;
  line-height:1.95
}
.compatibility-copy .text-link {
  margin-top:28px
}
.compatibility-packages {
  min-width:0;
  padding:30px 32px 22px;
  border:1px solid #7d9fdb26;
  border-radius:16px;
  background:linear-gradient(135deg,#377dff0e,transparent 65%),var(--surface)
}
.compatibility-route {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.5px
}
.compatibility-route>span {
  display:inline-flex;
  align-items:center;
  gap:8px
}
.compatibility-route-arrow {
  flex:1;
  min-width:22px;
  color:var(--ice);
  justify-content:center
}
.compatibility-row {
  display:flex;
  gap:18px;
  padding:25px 0;
  border-bottom:1px solid var(--line)
}
.compatibility-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:none;
  border:1px solid #377dff33;
  border-radius:10px;
  color:var(--ice);
  background:#377dff0a
}
.compatibility-icon .icon {
  width:19px;
  height:19px
}
.compatibility-row h4 {
  font-size:17px;
  font-weight:600;
  margin:0
}
.compatibility-row:last-child {
  border-bottom:0;
  padding-bottom:0
}
.compatibility-row p {
  margin-top:8px;
  color:#a0adc1;
  font-size:12px;
  line-height:1.85
}
#compatibility-faq {
  scroll-margin-top:100px
}
@media(max-width:1050px) {
  .compatibility-section {
    gap:40px
  }
  .compatibility-packages {
    padding-inline:24px
  }
  .compatibility-route {
    font-size:17px;
    gap:10px
  }
}
@media(max-width:760px) {
  .compatibility-copy h3,.modules-copy h3 {
    font-size:23px
  }
  .compatibility-section {
    grid-template-columns:1fr;
    gap:32px
  }
  .compatibility-packages {
    padding:24px 20px 20px
  }
  .compatibility-intro {
    font-size:13px
  }
  .compatibility-row {
    gap:12px
  }
  .compatibility-row p {
    font-size:12px
  }
}
/* Product showcase */
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  margin-bottom:40px
}
.eyebrow {
  font:9px/1.6 var(--mono);
  letter-spacing:2px;
  color:#7499cf;
  margin-bottom:20px
}
h2 {
  font-size:clamp(35px,3.4vw,49px);
  line-height:1.3;
  letter-spacing:-1.8px
}
h2 span {
  color:#727f95
}
.section-aside {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  max-width:310px;
  padding-bottom:5px
}
.product-showcase {
  position:relative;
  border:1px solid #7d9fdb33;
  border-radius:13px;
  background:linear-gradient(160deg,#172234,#0c121e 55%);
  box-shadow:0 25px 90px #0005,0 -8px 70px #2366e110;
  overflow:hidden
}
.product-tabs {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:16px;
  border-bottom:1px solid var(--line)
}
.product-tabs button {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 19px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:#8091ae;
  font-size:12px;
  transition:all .2s
}
.product-tabs .icon {
  width:15px;
  height:15px
}
.product-tabs button:hover {
  background:#ffffff05;
  color:#dce6f6
}
.product-tabs button[aria-selected=true] {
  background:#225ab925;
  border-color:#5a8cee55;
  color:#c1d8ff;
  box-shadow:inset 0 1px #c3dcff0a
}
.product-panel[hidden] {
  display:none
}
.product-bar {
  display:flex;
  justify-content:space-between;
  padding:12px 21px;
  font:8px var(--mono);
  letter-spacing:1.2px;
  color:#7491b9;
  background:#0a101a
}
.product-bar>div {
  display:flex;
  gap:8px;
  align-items:center
}
.panel-index {
  color:#586882
}
.screen-button {
  display:block;
  border:0;
  border-block:1px solid #ffffff0d;
  padding:0;
  width:100%;
  position:relative;
  background:#101114;
  overflow:hidden
}
.screen-button>img {
  width:100%;
  height:auto;
  aspect-ratio:3006/1640;
  object-fit:contain
}
.zoom-pill {
  position:absolute;
  bottom:17px;
  right:18px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#dce8fa;
  font-size:10px;
  padding:8px 12px;
  border:1px solid #91abca44;
  border-radius:30px;
  background:#142235e8;
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(4px);
  transition:all .2s
}
.screen-button:hover .zoom-pill,.screen-button:focus-visible .zoom-pill {
  opacity:1;
  transform:none
}
.zoom-pill .icon {
  width:13px;
  height:13px
}
.product-caption {
  padding:23px 27px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.product-caption h3 {
  font-size:16px;
  letter-spacing:.1px
}
.product-caption p {
  font-size:11px;
  line-height:1.7;
  color:#7e8ea8;
  margin-top:5px
}
.caption-arrow {
  border-radius:50%;
  width:36px;
  height:36px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border:1px solid #ffffff14;
  color:#8aa5ce
}
.caption-arrow .icon {
  height:16px;
  width:16px
}
.screenshot-note {
  font-size:10px;
  color:#67778f;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-top:20px
}
.screenshot-note .icon {
  width:11px;
  height:11px
}
/* Capability composition */
.capabilities {
  padding-top:35px
}
.file-dot {
  width:5px;
  height:5px;
  background:#80c1b2;
  border-radius:50%;
  margin-left:auto
}
.code-muted {
  color:#536b8b
}
.code-blue {
  color:#7faeff
}
.code-mint {
  color:#8ed8c7
}
.text-link {
  font-size:11px;
  font-weight:500;
  color:#95bbff;
  display:inline-flex;
  gap:11px;
  align-items:center;
  margin-top:22px
}
.text-link .icon {
  width:14px;
  height:14px;
  transition:transform .2s
}
.text-link:hover .icon {
  transform:translateX(3px)
}
/* Architecture */
.modules-layout {
  padding-top:64px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:115px;
  align-items:center
}
.modules-copy>p:not(.eyebrow) {
  font-size:13px;
  line-height:1.9;
  color:#8492a9;
  max-width:390px;
  margin-top:25px
}
.module-stack {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:9px
}
.module-stack:before {
  content:'';
  position:absolute;
  inset:-35px 30px;
  background:radial-gradient(ellipse,#2160bf1c,transparent 65%);
  pointer-events:none
}
.module {
  position:relative;
  display:grid;
  grid-template-columns:30px 72px 1fr 18px;
  gap:12px;
  align-items:center;
  border:1px solid #809fc123;
  border-radius:8px;
  background:linear-gradient(100deg,#121e31,#0c1422);
  padding:15px 18px;
  transition:transform .25s,border-color .25s
}
.module:hover {
  transform:translateX(-7px);
  border-color:#669ced66
}
.module-icon {
  display:grid;
  place-items:center;
  height:30px;
  width:30px;
  background:#467eff0d;
  border:1px solid #729fe52c;
  border-radius:6px;
  color:#a8c6f1
}
.module .icon {
  width:15px;
  height:15px
}
.module strong {
  font-weight:500;
  font-size:13px;
  letter-spacing:.1px
}
.module>span:not(.module-icon):not(.module-number) {
  font-size:10px;
  color:#778ba9
}
.module .module-number {
  font:9px var(--mono);
  color:#405c80
}
.runtime {
  padding:21px 19px;
  border:1px solid #5586d635;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:13px;
  background:#142c4b44;
  position:relative
}
.runtime:before {
  content:'';
  width:1px;
  height:23px;
  position:absolute;
  top:-23px;
  left:50%;
  background:linear-gradient(#5078b432,#5586d669)
}
.runtime>span:nth-child(2) {
  font-size:13px;
  color:#b5cbeb
}
.runtime small {
  margin-left:auto;
  font:7px var(--mono);
  letter-spacing:1px;
  color:#4f75a5
}
/* Installation + FAQ */
.start-layout {
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:90px;
  align-items:start
}
.start-copy>p:not(.eyebrow) {
  font-size:13px;
  color:#8593aa;
  line-height:1.95;
  margin-top:24px
}
.start-copy>.button {
  margin-top:27px
}
.setup-guide {
  display:flex;
  width:max-content;
  margin-top:17px
}
.terminal {
  background:#0b121d;
  border:1px solid #7292c533;
  border-radius:11px;
  overflow:hidden;
  box-shadow:0 20px 70px #0003
}
.terminal-header {
  height:50px;
  background:#131e2d;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:14px;
  font-size:10px;
  color:#8394af;
  border-bottom:1px solid var(--line)
}
.terminal-dots {
  display:flex;
  gap:5px
}
.terminal-dots i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#3e5371
}
.copy-button {
  border:0;
  background:none;
  color:#8aa4c7;
  padding:7px;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px
}
.copy-button .icon {
  width:12px;
  height:12px
}
.copy-button:hover {
  color:#cfddf2
}
.source-tabs {
  display:flex;
  gap:5px;
  padding:12px 17px 0;
  align-items:center
}
.source-tabs button {
  border:0;
  background:none;
  color:#596f91;
  padding:5px 11px;
  border-radius:5px;
  font:10px var(--mono)
}
.source-tabs button[aria-selected=true] {
  background:#223d672e;
  color:#a2bef0
}
.source-tabs>span {
  font:8px var(--mono);
  margin-left:auto;
  color:#3f5473
}
.terminal pre {
  font:10px/2.9 var(--mono);
  color:#c6d2e7;
  overflow-x:auto;
  white-space:pre;
  padding:17px 23px 24px;
  margin:0;
  tab-size:2
}
.shell-prompt {
  color:#4c6282;
  margin-right:9px;
  user-select:none
}
.terminal-bottom {
  display:flex;
  align-items:center;
  gap:7px;
  border-top:1px solid #7091c113;
  padding:12px 21px;
  font:7px var(--mono);
  letter-spacing:1.3px;
  color:#516b91
}
.terminal-bottom .status-dot {
  width:4px;
  height:4px
}
.terminal-note {
  font-size:10px;
  line-height:1.9;
  color:#687994;
  margin-top:14px
}
.faq {
  margin-top:95px;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:65px;
  align-items:start
}
.faq>h3 {
  font-size:21px;
  line-height:1.5;
  letter-spacing:-.5px
}
.faq details {
  border-top:1px solid #849bc620
}
.faq details:last-child {
  border-bottom:1px solid #849bc620
}
.faq summary {
  cursor:pointer;
  list-style:none;
  padding:19px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  font-size:12px;
  color:#b7c4d9
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq-plus {
  height:13px;
  width:13px;
  position:relative;
  flex-shrink:0
}
.faq-plus:before,.faq-plus:after {
  content:'';
  position:absolute;
  background:#6f8ab1;
  left:0;
  right:0;
  height:1px;
  top:6px
}
.faq-plus:after {
  transform:rotate(90deg);
  transition:transform .2s
}
.faq details[open] .faq-plus:after {
  transform:rotate(0deg)
}
.faq details p {
  font-size:11px;
  line-height:2;
  color:#8090a9;
  padding:0 28px 21px 0
}
/* Closing */
.button-secondary {
  background:#122543;
  border:1px solid #4d77b753;
  color:#c1d4f1
}
.button-secondary:hover {
  background:#1a3357
}
.site-footer {
  padding-top:35px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:25px
}
.site-footer .brand {
  font-size:19px
}
.site-footer>div:first-child>p {
  font-size:9px;
  color:#6b7c98;
  margin-top:10px
}
.site-footer>nav {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:10px;
  color:#8a9cba
}
.site-footer nav a:hover {
  color:white
}
.back-top {
  height:29px;
  width:29px;
  border:1px solid #ffffff1a;
  border-radius:50%;
  display:grid;
  place-items:center
}
.back-top .icon {
  transform:rotate(-90deg);
  width:14px;
  height:14px
}
.footer-fine {
  width:100%;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-top:10px;
  padding:20px 0 28px;
  font-size:8px;
  color:#53637e
}
.footer-fine>span:nth-child(2) {
  margin-left:auto
}
/* Changelog */
.changelog-page {
  min-height:100vh
}
.changelog-nav a[aria-current=page] {
  color:white
}
.changelog-main {
  max-width:1120px
}
.changelog-hero {
  padding:92px 0 72px;
  border-bottom:1px solid var(--line)
}
.changelog-hero h1 {
  max-width:780px;
  margin-top:14px;
  font-size:clamp(44px,6vw,76px);
  line-height:1.08;
  letter-spacing:-3px
}
.changelog-hero>p:not(.eyebrow) {
  max-width:650px;
  margin-top:24px;
  color:#9aa8be;
  font-size:17px
}
.changelog-summary {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:32px
}
.changelog-summary span {
  padding:7px 11px;
  border:1px solid #ffffff17;
  border-radius:999px;
  color:#8595ae;
  font:10px var(--mono);
  letter-spacing:.3px
}
.release-list {
  position:relative;
  padding:24px 0 48px
}
.release-entry {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:44px;
  padding:38px 0;
  border-bottom:1px solid var(--line)
}
.release-entry time {
  padding-top:5px;
  color:#64738b;
  font:10px/1.5 var(--mono);
  letter-spacing:.6px
}
.release-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px
}
.release-heading h2 {
  font-size:24px;
  line-height:1.35;
  letter-spacing:-.5px
}
.release-entry p {
  max-width:760px;
  margin-top:13px;
  color:#98a6bb;
  font-size:15px;
  line-height:1.85
}
.release-featured {
  margin-top:18px;
  padding:34px 28px;
  border:1px solid #4e86e950;
  border-radius:14px;
  background:linear-gradient(120deg,#11213c99,#0d1420 68%)
}
.release-featured+.release-entry {
  margin-top:18px;
  border-top:1px solid var(--line)
}
.tag,.tag-group {
  flex-shrink:0
}
.tag {
  display:inline-flex;
  padding:5px 8px;
  border:1px solid #5e82bd45;
  border-radius:5px;
  background:#1a2b472e;
  color:#8fb6f6;
  font:9px/1.4 var(--mono);
  white-space:nowrap
}
.tag:hover {
  border-color:#75a6f48c;
  color:#c9ddff
}
.tag-group {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  max-width:440px
}
.release-keywords {
  margin-top:17px;
  color:#6681ab;
  font:9px/1.5 var(--mono);
  letter-spacing:.4px
}
.changelog-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  margin:48px 0 110px;
  padding:34px 38px;
  border:1px solid #ffffff14;
  border-radius:12px;
  background:#0d1420
}
.changelog-cta h2 {
  font-size:22px
}
.changelog-cta p {
  margin-top:8px;
  color:#8290a5;
  font-size:13px
}
.changelog-cta .button {
  flex-shrink:0
}
.search-intent {
  margin:56px 0 0;
  padding:40px;
  border-left:2px solid #4c86ea;
  background:linear-gradient(90deg,#101c2f,#0b1019 74%)
}
.search-intent h2 {
  margin-top:11px;
  font-size:28px;
  letter-spacing:-.7px
}
.search-intent>p:not(.eyebrow) {
  max-width:850px;
  margin-top:15px;
  color:#9aa8bd;
  font-size:15px;
  line-height:1.9
}
.search-intent code {
  padding:2px 5px;
  border-radius:4px;
  background:#ffffff0d;
  color:#b9cef0;
  font:12px var(--mono)
}
.search-intent>div {
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:19px
}
.search-intent a {
  color:#87b1f6;
  font-size:12px
}
.search-intent a:hover {
  color:white
}
@media(max-width:760px) {
  .changelog-nav {
    display:flex!important;
    gap:14px!important;
    font-size:10px!important
  }
  .changelog-nav a:nth-child(2),.changelog-nav a:nth-child(4),.changelog-nav .nav-divider {
    display:none
  }
  .changelog-hero {
    padding:58px 0 46px
  }
  .changelog-hero h1 {
    font-size:44px;
    letter-spacing:-2px
  }
  .release-entry,.release-featured {
    grid-template-columns:1fr;
    gap:13px;
    padding:28px 0
  }
  .release-featured {
    padding:25px 20px
  }
  .release-heading {
    display:block
  }
  .release-heading h2 {
    font-size:21px
  }
  .tag,.tag-group {
    margin-top:12px
  }
  .tag-group {
    justify-content:flex-start
  }
  .changelog-cta {
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:70px;
    padding:28px 24px
  }
  .search-intent {
    margin-top:38px;
    padding:28px 22px
  }
  .search-intent h2 {
    font-size:23px
  }
}
/* Dialogs and state */
body.dialog-open {
  overflow:hidden
}
dialog {
  padding:0;
  color:var(--text);
  background:#101925;
  border:1px solid #6888b643;
  border-radius:13px;
  max-height:94dvh;
  box-shadow:0 35px 140px #000b
}
dialog::backdrop {
  background:#030811e8;
  backdrop-filter:blur(10px)
}
.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 17px;
  font:9px var(--mono);
  letter-spacing:.5px
}
.dialog-top>div {
  display:flex;
  flex-direction:column;
  gap:3px
}
.dialog-top strong {
  font:500 13px var(--body)
}
.dialog-top>div>span {
  font:9px var(--body);
  color:#7890b2
}
.image-dialog {
  width:min(1600px,95vw)
}
.image-dialog>img {
  width:100%;
  max-height:calc(94dvh - 128px);
  object-fit:contain;
  background:#090b10
}
.image-dialog>p {
  padding:13px 18px;
  font-size:11px;
  color:#94a7c5
}
.film-dialog {
  width:min(480px,92vw)
}
.film-dialog video {
  display:block;
  max-height:calc(90dvh - 123px);
  width:100%;
  aspect-ratio:9/16;
  background:#03050a
}
.film-download {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:11px;
  padding:12px
}
.film-download .icon {
  width:13px;
  height:13px
}
.toast {
  position:fixed;
  z-index:100;
  bottom:25px;
  left:50%;
  transform:translate(-50%,15px);
  padding:10px 20px;
  border:1px solid #799bc34a;
  background:#14253b;
  color:#d0e0f8;
  border-radius:7px;
  font-size:12px;
  box-shadow:0 10px 50px #0008;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
/* Motion remains decorative; content is visible without JS. */
@keyframes orbital-run {
  to {
    offset-distance:100%
  }
}
@keyframes core-float {
  0%,100% {
    transform:translate(-50%,-50%) rotate(-9deg)
  }
  50% {
    transform:translate(-50%,-54%) rotate(-6deg)
  }
}
@keyframes node-float {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-7px)
  }
}
@keyframes twinkle {
  0%,100% {
    opacity:.3
  }
  50% {
    opacity:1
  }
}
@keyframes intro {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.hero-copy>* {
  animation:intro .8s both
}
.hero-copy>h1 {
  animation-delay:.08s
}
.hero-statement {
  animation-delay:.16s
}
.hero-detail {
  animation-delay:.23s
}
.hero-actions {
  animation-delay:.3s
}
.hero-note {
  animation-delay:.36s
}
.enhanced .reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s,transform .7s
}
.enhanced .reveal.is-visible {
  opacity:1;
  transform:none
}
/* Responsive */
@media(min-width:1600px) {
  .hero {
    min-height:760px;
    padding-top:95px
  }
  .hero-art {
    margin-right:-55px
  }
  .hero h1 {
    font-size:97px
  }
  .hero-statement {
    font-size:23px
  }
  .hero-detail {
    font-size:14px
  }
  .hero-art .orb-core {
    width:160px;
    height:160px
  }
  .hero-art .core-inset img {
    width:100px;
    height:100px
  }
}
@media(max-width:1150px) {
  .wrap {
    width:calc(100% - 72px)
  }
  .hero h1 {
    font-size:72px;
    letter-spacing:-4px
  }
  .hero {
    padding-top:65px;
    min-height:640px
  }
  .hero-statement {
    font-size:19px
  }
  .hero-art {
    min-height:450px;
    margin-left:-10px
  }
  .orb-core {
    width:122px;
    height:122px;
    border-radius:29px
  }
  .core-inset {
    border-radius:23px
  }
  .core-inset img {
    width:76px;
    height:76px
  }
  .orbit-node>div {
    height:46px;
    width:46px;
    border-radius:12px
  }
  .orbital-caption {
    top:63%
  }
  .modules-layout {
    gap:55px
  }
  .start-layout {
    gap:50px
  }
  .terminal pre {
    font-size:9px;
    padding-inline:17px
  }
  .section-aside {
    max-width:260px
  }
  .site-header nav {
    gap:22px
  }
  .nav-wrap {
    width:calc(100% - 48px)
  }
}
@media(max-width:900px) {
  .hero {
    grid-template-columns:1.13fr 1fr;
    min-height:610px;
    padding-top:50px
  }
  .hero h1 {
    font-size:62px;
    letter-spacing:-4px
  }
  .hero-statement {
    font-size:18px
  }
  .hero-detail {
    font-size:11px
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .button {
    padding:12px 17px;
    font-size:11px;
    gap:12px
  }
  .hero-actions .button-quiet {
    padding:0;
    gap:6px;
    font-size:10px
  }
  .hero-note {
    font-size:8px
  }
  .hero-art {
    margin-left:-15px;
    margin-right:-15px;
    min-height:410px
  }
  .orbital-label {
    font-size:7px;
    letter-spacing:1.5px
  }
  .orbit-node>div {
    height:40px;
    width:40px
  }
  .orbit-node .icon {
    height:18px;
    width:18px
  }
  .node-skills {
    left:10%;
    top:23%
  }
  .node-office {
    left:20%;
    bottom:21%
  }
  .node-experts {
    right:0
  }
  .orbit-coord {
    bottom:10%;
    font-size:6px
  }
  .orb-core {
    width:105px;
    height:105px;
    border-radius:26px
  }
  .core-inset {
    inset:6px;
    border-radius:21px
  }
  .core-inset img {
    width:66px;
    height:66px
  }
  .orbital-caption {
    top:60%
  }
  .orbital-caption small {
    font-size:7px
  }
  .orbital-caption>span {
    font-size:12px
  }
  .section-space {
    padding-block:80px
  }
  .section-heading {
    gap:30px
  }
  .section-aside {
    max-width:230px;
    font-size:11px
  }
  .modules-layout {
    gap:38px
  }
  .module {
    padding:13px 12px;
    gap:8px;
    grid-template-columns:28px 58px 1fr 13px
  }
  .module strong {
    font-size:11px
  }
  .module>span:not(.module-icon):not(.module-number) {
    font-size:9px
  }
  .runtime small {
    font-size:6px;
    letter-spacing:.5px
  }
  .start-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .start-copy {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:30px;
    align-items:center
  }
  .start-copy .eyebrow,.start-copy h2 {
    grid-column:1
  }
  .start-copy>p:not(.eyebrow) {
    grid-column:2;
    grid-row:2;
    margin-top:0
  }
  .start-copy>.button {
    grid-column:1;
    width:max-content
  }
  .start-copy>.setup-guide {
    grid-column:2;
    grid-row:3
  }
  .terminal pre {
    font-size:12px
  }
  .faq {
    grid-template-columns:1fr 1.4fr;
    gap:40px
  }
  .nav-source .icon:first-child {
    display:none
  }
  .site-header nav {
    font-size:10px;
    gap:18px
  }
  .brand {
    font-size:20px
  }
  .brand b {
    font-size:8px
  }
  h2 {
    font-size:35px
  }
}
@media(max-width:680px) {
  :root {
    scroll-padding-top:25px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    height:75px
  }
  .nav-wrap {
    width:calc(100% - 40px)
  }
  .brand {
    font-size:20px;
    gap:9px
  }
  .brand>img {
    width:29px;
    height:29px
  }
  .brand b {
    font-size:7px;
    padding:4px 5px
  }
  .nav-toggle {
    display:inline-flex!important;
    width:34px;
    height:34px;
    border-radius:7px
  }
  .site-header nav {
    position:absolute;
    top:66px;
    left:20px;
    right:20px;
    padding:16px;
    border:1px solid #6683b038;
    border-radius:10px;
    box-shadow:0 15px 40px #000a;
    background:#101928;
    display:none;
    grid-template-columns:1fr 1fr;
    gap:5px;
    font-size:13px
  }
  .site-header nav.is-open {
    display:grid
  }
  .site-header nav a {
    padding:10px
  }
  .site-header .nav-divider {
    display:none
  }
  .site-header .language-link {
    grid-column:2;
    grid-row:1;
    text-align:right
  }
  .nav-source {
    grid-column:2;
    grid-row:2/4;
    align-self:center;
    justify-content:center
  }
  .nav-source .icon:first-child {
    display:block
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:39px;
    padding-bottom:0;
    min-height:0
  }
  .hero h1 {
    font-size:clamp(53px,13.6vw,88px);
    line-height:1.12;
    letter-spacing:-3.5px;
    margin-top:21px
  }
  .hero h1>span:first-child {
    letter-spacing:-2px
  }
  .release-link {
    font-size:8px;
    letter-spacing:.9px
  }
  .hero-statement {
    font-size:18px;
    margin-top:23px;
    line-height:1.7
  }
  .hero-detail {
    font-size:11px;
    margin-top:12px;
    line-height:1.85
  }
  .hero-actions {
    margin-top:25px;
    gap:17px
  }
  .hero-actions .button {
    padding:13px 21px;
    font-size:12px;
    gap:20px
  }
  .hero-actions .button-quiet {
    font-size:11px;
    padding:0;
    gap:8px
  }
  .hero-note {
    font-size:9px;
    margin-top:17px;
    letter-spacing:.5px
  }
  .hero-art {
    height:350px;
    min-height:0;
    margin:0 -10px -5px
  }
  .orbit-scene {
    max-width:480px;
    width:100%;
    margin:auto
  }
  .orbital-label {
    top:8%;
    font-size:7px;
    letter-spacing:2px
  }
  .orbit-outer {
    width:96%;
    height:91%
  }
  .orbit-middle,.track-one {
    width:81%;
    height:74%
  }
  .orbit-inner,.track-two {
    width:59%;
    height:55%
  }
  .orb-core {
    width:107px;
    height:107px;
    top:47%
  }
  .orbit-node>div {
    height:41px;
    width:41px;
    border-radius:11px
  }
  .orbit-node>span {
    font-size:8px
  }
  .node-skills {
    left:12%;
    top:22%
  }
  .node-experts {
    right:4%;
    top:37%
  }
  .node-office {
    left:27%;
    bottom:10%
  }
  .orbital-caption {
    top:66%
  }
  .orbital-caption small {
    font-size:7px
  }
  .orbit-coord {
    font-size:6px;
    bottom:6%;
    right:5%
  }
  .orbital-grid {
    inset:0
  }
  .section-space {
    padding-block:65px
  }
  .section-heading {
    display:block;
    margin-bottom:26px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.4px;
    margin-bottom:16px
  }
  h2 {
    font-size:31px;
    line-height:1.4;
    letter-spacing:-1px
  }
  .section-aside {
    font-size:11px;
    max-width:none;
    margin-top:17px
  }
  .product-tabs {
    padding:9px 7px;
    gap:2px;
    justify-content:space-between
  }
  .product-tabs button {
    padding:9px 8px;
    gap:5px;
    font-size:9px
  }
  .product-tabs .icon {
    width:12px;
    height:12px
  }
  .product-showcase {
    border-radius:9px
  }
  .product-bar {
    padding:10px 11px;
    font-size:6px;
    letter-spacing:.5px
  }
  .product-bar .status-dot {
    width:4px;
    height:4px
  }
  .product-caption {
    padding:15px;
    gap:10px;
    align-items:start
  }
  .product-caption h3 {
    font-size:12px;
    line-height:1.7
  }
  .product-caption p {
    font-size:9px;
    line-height:1.85;
    margin-top:6px
  }
  .caption-arrow {
    width:26px;
    height:26px
  }
  .caption-arrow .icon {
    width:12px;
    height:12px
  }
  .zoom-pill {
    opacity:1;
    transform:none;
    bottom:9px;
    right:9px;
    font-size:7px;
    padding:4px 7px;
    gap:4px
  }
  .zoom-pill .icon {
    width:9px;
    height:9px
  }
  .screenshot-note {
    font-size:8px;
    margin-top:15px
  }
  .capabilities {
    padding-top:8px
  }
  .modules-layout {
    grid-template-columns:1fr;
    gap:32px
  }
  .modules-copy>p:not(.eyebrow) {
    font-size:11px;
    margin-top:17px
  }
  .text-link {
    font-size:10px;
    margin-top:17px
  }
  .module {
    grid-template-columns:30px 69px 1fr 15px;
    padding:14px 15px;
    gap:11px
  }
  .module strong {
    font-size:12px
  }
  .module>span:not(.module-icon):not(.module-number) {
    font-size:9px
  }
  .runtime>span:nth-child(2) {
    font-size:12px
  }
  .runtime small {
    font-size:6px
  }
  .start-copy {
    display:block
  }
  .start-copy>p:not(.eyebrow) {
    font-size:11px;
    margin-top:19px
  }
  .start-copy>.button {
    margin-top:24px;
    font-size:12px;
    gap:18px
  }
  .start-copy>.setup-guide {
    margin-top:18px
  }
  .start-layout {
    gap:32px
  }
  .terminal-header {
    height:44px;
    padding:0 11px;
    gap:9px;
    font-size:9px
  }
  .terminal-dots {
    gap:4px
  }
  .terminal-dots i {
    width:4px;
    height:4px
  }
  .copy-button {
    font-size:8px;
    padding:6px 0;
    gap:4px
  }
  .copy-button .icon {
    width:11px;
    height:11px
  }
  .terminal pre {
    font-size:8px;
    line-height:3;
    padding:13px 12px 18px
  }
  .shell-prompt {
    margin-right:3px
  }
  .source-tabs {
    padding:10px 9px 0
  }
  .source-tabs button {
    font-size:9px
  }
  .source-tabs>span {
    font-size:7px
  }
  .terminal-bottom {
    font-size:6px;
    letter-spacing:1px;
    padding:12px
  }
  .terminal-note {
    font-size:9px
  }
  .faq {
    margin-top:60px;
    grid-template-columns:1fr;
    gap:25px
  }
  .faq>h3 {
    font-size:19px
  }
  .faq summary {
    font-size:11px;
    padding:17px 0
  }
  .faq details p {
    font-size:10px
  }
  .site-footer {
    padding-top:28px;
    gap:21px
  }
  .site-footer .brand {
    font-size:18px
  }
  .site-footer>nav {
    width:100%;
    gap:23px;
    font-size:10px
  }
  .back-top {
    margin-left:auto
  }
  .site-footer>div:first-child>p {
    font-size:8px;
    margin-top:9px
  }
  .footer-fine {
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    margin-top:3px;
    font-size:7px
  }
  .footer-fine>span:nth-child(2) {
    grid-column:1/-1;
    grid-row:2;
    margin:0
  }
  .image-dialog {
    width:96vw;
    border-radius:9px
  }
  .dialog-top {
    padding:11px;
    font-size:7px
  }
  .dialog-top .icon-button {
    width:30px;
    height:30px
  }
  .dialog-top .icon {
    height:16px;
    width:16px
  }
  .image-dialog>p {
    font-size:9px;
    padding:11px
  }
  .film-dialog {
    width:min(440px,92vw)
  }
  .toast {
    font-size:11px;
    max-width:90vw;
    text-align:center;
    white-space:normal
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .enhanced .reveal {
    opacity:1;
    transform:none
  }
  .orbit-scene {
    transform:none!important
  }
}
/* The source navigation intentionally contains only the two repository addresses. */
.source-navigation {
  position:relative
}
.source-navigation>summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #ffffff1c;
  border-radius:7px;
  padding:9px 13px;
  color:#dce5f5;
  min-height:38px
}
.source-navigation>summary::-webkit-details-marker {
  display:none
}
.source-navigation>summary>.icon {
  width:15px;
  height:15px
}
.source-chevron {
  height:5px;
  width:5px;
  border-right:1px solid #92afd5;
  border-bottom:1px solid #92afd5;
  transform:rotate(45deg);
  margin-left:9px;
  margin-top:-3px;
  transition:transform .2s
}
.source-navigation[open] .source-chevron {
  transform:rotate(225deg);
  margin-top:3px
}
.source-menu {
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:277px;
  background:#111c2c;
  border:1px solid #6683b03b;
  border-radius:10px;
  padding:6px;
  box-shadow:0 18px 50px #0009
}
.source-menu>a {
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px!important;
  border-radius:6px
}
.source-menu>a:hover {
  background:#243c5d66
}
.source-menu>a>.icon {
  width:18px;
  height:18px;
  color:#97b9ed
}
.source-menu>a>.icon:last-child {
  margin-left:auto;
  width:13px;
  height:13px
}
.source-menu>a>span {
  font-size:12px;
  color:#d6e2f4
}
.source-menu small {
  display:block;
  font:8px/1.8 var(--mono);
  color:#6f87a9;
  margin-top:2px
}
@media(max-width:680px) {
  .source-navigation {
    grid-column:1/-1;
    margin-top:5px
  }
  .source-navigation>summary {
    font-size:12px;
    padding:11px
  }
  .source-menu {
    position:static;
    width:100%;
    margin-top:7px;
    box-shadow:none;
    background:#0b1422
  }
  .site-header nav a.language-link {
    padding:10px
  }
  .site-header .source-menu>a {
    padding:11px!important
  }
  .source-menu small {
    font-size:9px
  }
}
.hero-art {
  overflow:clip
}
@media(min-width:681px) {
  .hero {
    padding-top:68px;
    padding-bottom:64px
  }
  .section-aside {
    font-size:13px
  }
  .hero-detail {
    color:#96a2b6
  }
  .hero-note {
    color:#8290a7
  }
  .hero-art {
    min-height:490px
  }
}
@media(prefers-reduced-motion:reduce) {
  .source-chevron {
    transition:none
  }
}
/* Editorial tour of the actual sidebar; status is explicit for each area. */
.workspace-section {
  padding-bottom:35px
}
.workspace-section .section-aside {
  max-width:335px
}
.workspace-tour {
  display:grid;
  grid-template-columns:267px minmax(0,1fr);
  border:1px solid #6683b034;
  border-radius:13px;
  background:linear-gradient(115deg,#111a27,#0b121c 70%);
  overflow:hidden;
  box-shadow:0 30px 70px #0003
}
.workspace-sidebar {
  background:#111925;
  border-right:1px solid #7091c11a;
  padding:25px 16px 21px;
  display:flex;
  flex-direction:column
}
.workspace-wordmark {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:17px;
  letter-spacing:-.5px;
  font-weight:600;
  padding:0 13px 26px
}
.workspace-tabs {
  display:flex;
  flex-direction:column;
  gap:5px
}
.workspace-tabs button {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:12px 13px;
  border:1px solid transparent;
  border-radius:6px;
  background:none;
  color:#8290a6;
  font-size:12px;
  min-height:47px;
  transition:background .2s,color .2s
}
.workspace-tabs button>.icon:first-child {
  width:18px;
  height:18px
}
.workspace-tabs button>.icon:last-child {
  margin-left:auto;
  opacity:0;
  width:13px;
  height:13px
}
.workspace-tabs button[aria-selected=true] {
  color:#d5e4ff;
  background:#326ed522;
  border-color:#608ede38
}
.workspace-tabs button[aria-selected=true]>.icon:last-child {
  opacity:1
}
.workspace-tabs button:hover {
  color:#c4d5ef;
  background:#ffffff04
}
.workspace-tabs button:nth-child(8) {
  margin-top:15px;
  border-top:1px solid #ffffff12
}
.workspace-panel {
  padding:35px 42px 32px;
  min-height:500px
}
.workspace-panel[hidden] {
  display:none
}
.workspace-panel-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#6883a8;
  font-size:10px;
  margin-bottom:30px
}
.feature-state {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:9px;
  letter-spacing:.4px;
  color:#b1bccd;
  padding:4px 9px;
  border:1px solid #ffffff16;
  border-radius:20px;
  white-space:nowrap
}
.feature-state>i {
  height:4px;
  width:4px;
  background:#7c8aa1;
  border-radius:50%
}
.feature-state.available {
  color:#89c6b3;
  border-color:#54988230;
  background:#38735f0d
}
.feature-state.available>i {
  background:#75baaa
}
.feature-state.partial {
  color:#b1c6e6;
  border-color:#547bac45;
  background:#417aba0d
}
.feature-state.partial>i {
  background:#709ddd
}
.workspace-panel h3 {
  font-size:27px;
  letter-spacing:-.6px;
  line-height:1.45
}
.workspace-lead {
  color:#8a9ab3;
  font-size:12px;
  line-height:2;
  margin-top:18px;
  max-width:610px
}
.workspace-panel ul {
  list-style:none;
  padding:0;
  margin:26px 0 24px;
  display:flex;
  flex-direction:column;
  gap:18px
}
.workspace-panel li {
  display:flex;
  gap:15px;
  align-items:baseline
}
.workspace-panel h4 {
  font-size:12px;
  font-weight:500;
  margin:0 0 4px;
  color:#becce0
}
.workspace-panel li p {
  font-size:11px;
  line-height:1.8;
  color:#6f829f
}
.workspace-panel>.text-link {
  margin-top:23px
}
.workspace-footnote {
  font-size:9px;
  text-align:center;
  color:#60748e;
  margin-top:19px
}
.developer-paths {
  margin-top:25px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.developer-paths>a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-top:1px solid #6f8fb41c;
  font-size:11px;
  color:#c4d3e8
}
.developer-paths>a>.icon {
  width:15px;
  height:15px;
  color:#81aaf0
}
.developer-paths>a>.icon:last-child {
  margin-left:auto;
  width:13px;
  height:13px
}
.developer-paths>a>span>small {
  display:block;
  font-size:10px;
  color:#6c81a2;
  margin-top:3px
}
.developer-paths>a:hover {
  color:#94beff
}
.module-code {
  margin-top:9px;
  display:block;
  border:1px solid #5c7dab21;
  border-radius:6px;
  background:#090f19;
  padding:12px 15px;
  overflow:auto;
  color:#708fbd;
  font:9px/1.9 var(--mono)
}
@media(max-width:1150px) {
  .workspace-tour {
    grid-template-columns:239px minmax(0,1fr)
  }
  .workspace-panel {
    padding:30px
  }
  .workspace-panel h3 {
    font-size:24px
  }
  .workspace-tabs button {
    font-size:11px;
    gap:9px
  }
}
@media(max-width:900px) {
  .workspace-tour {
    grid-template-columns:218px minmax(0,1fr)
  }
  .workspace-panel {
    padding:26px;
    min-height:500px
  }
  .workspace-panel h3 {
    font-size:23px
  }
  .workspace-lead {
    font-size:11px
  }
  .workspace-panel li p {
    font-size:10px
  }
  .workspace-tabs button {
    padding-inline:10px;
    font-size:10px
  }
  .workspace-sidebar {
    padding-inline:10px
  }
  .workspace-tabs button>.icon:first-child {
    width:16px;
    height:16px
  }
  .workspace-panel-top {
    margin-bottom:23px
  }
  .workspace-panel h4 {
    font-size:11px
  }
}
@media(max-width:680px) {
  .workspace-section {
    padding-bottom:12px
  }
  .workspace-tour {
    display:block;
    border-radius:9px
  }
  .workspace-sidebar {
    padding:16px 10px 12px;
    border-right:0;
    border-bottom:1px solid #7091c121
  }
  .workspace-wordmark {
    padding:0 8px 15px;
    font-size:15px
  }
  .workspace-wordmark img {
    width:21px;
    height:21px
  }
  .workspace-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px
  }
  .workspace-tabs button {
    min-height:37px;
    padding:8px 7px;
    gap:7px;
    font-size:9px
  }
  .workspace-tabs button:nth-child(8) {
    margin-top:0;
    border-top-color:transparent
  }
  .workspace-tabs button>.icon:first-child {
    width:14px;
    height:14px
  }
  .workspace-tabs button>.icon:last-child {
    display:none
  }
  .workspace-panel {
    padding:24px 19px 27px;
    min-height:0
  }
  .workspace-panel-top {
    font-size:9px;
    margin-bottom:21px
  }
  .feature-state {
    font-size:8px;
    padding:3px 8px
  }
  .workspace-panel h3 {
    font-size:23px;
    letter-spacing:-.3px
  }
  .workspace-lead {
    font-size:11px;
    margin-top:15px
  }
  .workspace-panel ul {
    gap:18px;
    margin-top:24px
  }
  .workspace-panel li {
    gap:11px
  }
  .workspace-panel li p {
    font-size:10px;
    line-height:1.85
  }
  .workspace-footnote {
    font-size:8px;
    line-height:1.8;
    text-align:left;
    margin-top:13px
  }
  .developer-paths {
    margin-top:22px
  }
  .developer-paths>a {
    font-size:11px
  }
  .developer-paths>a>span>small {
    font-size:9px
  }
  .module-code {
    font-size:8px;
    padding:12px
  }
}