@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme:dark;
  --bg:#0b1017;
  --panel:#111922;
  --panel-2:#151f2a;
  --line:#26313b;
  --line-strong:#36434c;
  --text:#eef2f0;
  --muted:#95a3a8;
  --dim:#687780;
  --accent:#d9f06e;
  --danger:#eb8b7a;
  font-family:'DM Sans',Arial,sans-serif;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  min-width:320px;
  background:var(--bg);
  color:var(--text)
}

button,a {
  font:inherit
}

a {
  color:inherit
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}

.is-hidden {
  display:none!important
}

.skip-link {
  position:absolute;
  left:20px;
  top:-60px;
  z-index:10;
  padding:10px 14px;
  background:var(--accent);
  color:#0b1017
}

.skip-link:focus {
  top:12px
}

.site-shell {
  max-width:1540px;
  min-height:100vh;
  margin:auto;
  padding:0 58px;
  display:flex;
  flex-direction:column
}

.site-header {
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:20px;
  text-decoration:none
}

.brand-mark {
  width:51px;
  height:51px;
  border:1px solid var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:-2px;
  transform:rotate(-2deg)
}

.brand-mark span {
  font-size:8px;
  transform:translateY(-3px);
  padding:0 1px
}

.brand-copy {
  display:flex;
  flex-direction:column;
  gap:4px
}

.brand-copy strong {
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  letter-spacing:.11em
}

.brand-copy small {
  color:var(--dim);
  font-size:9px;
  font-weight:700;
  letter-spacing:.23em
}

.header-tag {
  color:var(--muted);
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:14px
}

.header-dot,.status-dot,.pulse-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px #d9f06e77
}

.site-footer {
  margin-top:auto;
  min-height:84px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:var(--dim);
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700
}

.hero {
  border-bottom:1px solid var(--line);
  min-height:440px;
  padding-top:48px;
  position:relative;
  overflow:hidden
}

.eyebrow,.section-kicker,.panel-index {
  color:var(--accent);
  font-size:10px;
  letter-spacing:.22em;
  font-weight:700
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:13px
}

.eyebrow-line {
  width:22px;
  height:1px;
  background:var(--accent)
}

.eyebrow-index {
  color:var(--dim);
  margin-left:8px
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr 450px;
  gap:30px;
  align-items:center;
  min-height:292px
}

.hero h1 {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(58px,6vw,96px);
  line-height:.99;
  letter-spacing:-.07em;
  font-weight:500;
  margin:20px 0 27px;
  max-width:750px
}

.hero h1 em {
  color:var(--accent);
  font-style:normal
}

.hero-lead {
  max-width:550px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  margin:0
}

.hero-graphic {
  height:280px;
  position:relative;
  display:grid;
  place-items:center
}

.graphic-ring {
  position:absolute;
  border:1px solid #293c40;
  border-radius:50%;
  transform:rotate(-17deg) scaleY(.62)
}

.ring-1 {
  width:315px;
  height:315px
}

.ring-2 {
  width:230px;
  height:230px;
  border-color:#42513f
}

.ring-3 {
  width:130px;
  height:130px;
  border-color:#859658
}

.graphic-center {
  height:73px;
  width:73px;
  border-radius:50%;
  background:var(--accent);
  display:grid;
  place-items:center;
  color:#18221e;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:-.05em;
  box-shadow:0 0 60px #d9f06e3b
}

.graphic-cross {
  position:absolute;
  color:var(--accent);
  font:16px 'Space Grotesk',sans-serif
}

.cross-1 {
  top:29px;
  right:35px
}

.cross-2 {
  bottom:25px;
  left:21px
}

.hero-foot {
  display:flex;
  justify-content:space-between;
  padding:22px 0 26px;
  color:var(--dim);
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em
}

.hero-foot span:first-child {
  display:flex;
  gap:10px;
  align-items:center
}

.hero-foot .pulse-dot {
  width:6px;
  height:6px
}

.catalog-section {
  padding:53px 0 90px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:27px
}

.section-heading h2 {
  font-family:'Space Grotesk',sans-serif;
  font-size:33px;
  letter-spacing:-.04em;
  font-weight:500;
  margin:11px 0 0
}

.section-kicker {
  margin:0
}

.section-aside {
  color:var(--dim);
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700
}

.device-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}

.device-card {
  background:var(--panel);
  border:1px solid var(--line);
  transition:border-color .2s,transform .2s
}

.device-card:hover {
  border-color:#6b7d64;
  transform:translateY(-3px)
}

.card-top {
  padding:21px 22px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--dim);
  font-size:10px;
  letter-spacing:.14em;
  font-weight:700
}

.card-status {
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:9px;
  text-transform:uppercase
}

.card-status .status-dot {
  width:6px;
  height:6px
}

.device-illustration {
  height:215px;
  margin:0 13px;
  background:radial-gradient(circle at 50% 50%,#1f3237 0,#16232a 45%,#131d26 80%);
  border:1px solid #23333b;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden
}

.device-illustration:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);
  background-size:28px 28px
}

.board {
  width:160px;
  height:96px;
  border-radius:9px;
  background:linear-gradient(150deg,#344b48,#1e3535);
  border:5px solid #0c1b1d;
  box-shadow:14px 20px 20px #0007,0 0 0 1px #82a58a;
  transform:rotate(-21deg) skewY(3deg);
  position:relative
}

.board:before,.board:after {
  content:'';
  position:absolute;
  left:7px;
  right:7px;
  height:5px;
  background:repeating-linear-gradient(90deg,#ae9862 0 5px,transparent 5px 13px)
}

.board:before {
  top:-10px
}

.board:after {
  bottom:-10px
}

.board-label {
  position:absolute;
  left:14px;
  top:14px;
  color:#c1d2b9;
  font:700 11px 'Space Grotesk',sans-serif;
  letter-spacing:.04em
}

.board-chip {
  position:absolute;
  width:37px;
  height:26px;
  left:65px;
  top:43px;
  border-radius:2px;
  background:#0e1a1d;
  border:3px solid #506a62
}

.board-lines {
  position:absolute;
  left:16px;
  bottom:17px;
  display:flex;
  gap:4px
}

.board-lines i {
  height:3px;
  width:6px;
  background:var(--accent);
  border-radius:50%
}

.board-port {
  position:absolute;
  width:16px;
  height:29px;
  right:-13px;
  top:32px;
  border:4px solid #a0aaa2;
  background:#222a2d
}

.illustration-coordinate {
  position:absolute;
  color:#718d86;
  font-size:9px;
  letter-spacing:.15em
}

.coordinate-1 {
  left:15px;
  top:15px
}

.coordinate-2 {
  right:15px;
  bottom:15px
}

.card-body {
  padding:24px 23px 22px
}

.card-heading {
  display:flex;
  align-items:end;
  justify-content:space-between
}

.card-type {
  margin:0 0 5px;
  color:var(--accent);
  font-size:11px
}

.card-heading h3 {
  font:600 29px 'Space Grotesk',sans-serif;
  letter-spacing:-.04em;
  margin:0
}

.card-number {
  font:400 13px 'Space Grotesk',sans-serif;
  color:var(--dim)
}

.card-description {
  min-height:52px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  margin:15px 0 21px
}

.card-meta {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
  color:#bdc8c9;
  font-size:11px;
  padding:0 0 23px
}

.meta-divider {
  height:3px;
  width:3px;
  border-radius:50%;
  background:var(--dim)
}

.open-device {
  min-height:45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line-strong);
  color:var(--accent);
  font-size:11px;
  letter-spacing:.16em;
  font-weight:700;
  text-decoration:none;
  padding-top:18px
}

.open-device:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.detail-page {
  padding:35px 0 90px
}

.breadcrumb {
  display:flex;
  gap:15px;
  align-items:center;
  color:var(--dim);
  font-size:10px;
  letter-spacing:.17em;
  font-weight:700
}

.breadcrumb a {
  text-decoration:none;
  color:var(--accent)
}

.breadcrumb a:hover {
  text-decoration:underline
}

.detail-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:62px 0 53px
}

.detail-header h1 {
  font:500 clamp(58px,6.5vw,95px)/1 'Space Grotesk',sans-serif;
  letter-spacing:-.07em;
  margin:15px 0 17px
}

.detail-subtitle {
  margin:0;
  color:var(--muted);
  font-size:15px
}

.detail-subtitle span {
  padding:0 9px;
  color:var(--dim)
}

.detail-badge {
  border:1px solid #435a44;
  background:#1a2b25;
  color:var(--accent);
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700;
  padding:12px 15px;
  display:flex;
  align-items:center;
  gap:9px;
  text-transform:uppercase
}

.detail-layout {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.8fr);
  gap:22px
}

.detail-panel,.side-panel {
  background:var(--panel);
  border:1px solid var(--line)
}

.detail-panel {
  padding:32px
}

.panel-header {
  border-bottom:1px solid var(--line);
  padding-bottom:22px
}

.panel-header h2,.side-panel h2 {
  font:500 25px 'Space Grotesk',sans-serif;
  letter-spacing:-.035em;
  margin:11px 0 0
}

.status-list {
  padding:6px 0 8px
}

.status-row {
  min-height:67px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line)
}

.status-label {
  font-size:10px;
  letter-spacing:.15em;
  font-weight:700;
  color:var(--dim)
}

.status-row strong {
  font-size:13px;
  font-weight:600;
  text-align:right
}

.muted-slash {
  color:var(--dim);
  padding:0 2px
}

.connection-value.state-connected {
  color:var(--accent)
}

.connection-value.state-error {
  color:var(--danger)
}

.inline-message {
  padding:13px 15px;
  background:#24303b;
  color:#cbd4d2;
  font-size:12px;
  line-height:1.5;
  border-left:2px solid var(--accent);
  margin:17px 0 0
}

.action-stack {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin-top:25px
}

.button {
  min-height:51px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid transparent;
  text-decoration:none;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:700
}

.button-primary {
  background:var(--accent);
  color:#15211c
}

.button-primary:hover:not(:disabled) {
  background:#e4fa85
}

.button-secondary {
  background:transparent;
  color:var(--text);
  border-color:#60706a
}

.button-secondary:hover:not(:disabled) {
  border-color:var(--accent);
  color:var(--accent)
}

.button-danger {
  grid-column:span 2;
  color:var(--danger);
  border-color:#864d48;
  background:#2b2022
}

.button:disabled {
  opacity:.45
}

.safety-note {
  display:flex;
  gap:9px;
  color:var(--dim);
  font-size:11px;
  line-height:1.5;
  margin:17px 0 0
}

.safety-note span {
  color:var(--danger);
  font-size:8px;
  transform:translateY(4px)
}

.detail-side {
  display:flex;
  flex-direction:column;
  gap:17px
}

.side-panel {
  padding:31px
}

.side-panel-top {
  display:flex;
  justify-content:space-between;
  gap:10px
}

.release-source {
  color:var(--dim);
  font-size:9px;
  letter-spacing:.12em;
  font-weight:700
}

.side-intro {
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  max-width:330px;
  margin:14px 0 25px
}

.release-facts {
  margin:0
}

.release-facts div {
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:10px;
  padding:13px 0;
  border-top:1px solid var(--line)
}

.release-facts dt {
  font-size:10px;
  color:var(--dim);
  letter-spacing:.14em;
  font-weight:700
}

.release-facts dd {
  margin:0;
  text-align:right;
  overflow-wrap:anywhere;
  font-size:12px
}

.release-facts .checksum {
  font-family:monospace;
  font-size:10px;
  line-height:1.4
}

.release-message {
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  margin:17px 0 0
}

.release-message:empty {
  display:none
}

.text-link {
  display:inline-block;
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-decoration:none;
  margin-top:18px
}

.text-link:hover {
  text-decoration:underline
}

.info-strip {
  display:flex;
  gap:15px;
  padding:18px 20px;
  border:1px solid #354452;
  background:#15212b
}

.info-icon {
  border:1px solid #6f8286;
  border-radius:50%;
  width:18px;
  height:18px;
  flex:0 0 18px;
  text-align:center;
  color:#a8bdbe;
  font:700 12px/16px Arial
}

.info-strip p {
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
  margin:0
}

.empty-page {
  padding:100px 0;
  min-height:500px
}

.empty-page h1 {
  font:500 55px 'Space Grotesk',sans-serif;
  margin:15px 0
}

.empty-page p:not(.section-kicker) {
  color:var(--muted)
}

.empty-page .button {
  max-width:230px;
  margin-top:30px
}

@media(max-width:1100px) {
  .site-shell {
    padding:0 34px
  }
  .hero-grid {
    grid-template-columns:1fr 300px
  }
  .hero-graphic {
    transform:scale(.82)
  }
  .device-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .detail-layout {
    grid-template-columns:1fr 340px
  }
}

@media(max-width:800px) {
  .site-shell {
    padding:0 22px
  }
  .header-tag {
    display:none
  }
  .hero {
    min-height:auto
  }
  .hero-grid {
    grid-template-columns:1fr
  }
  .hero-graphic {
    display:none
  }
  .hero h1 {
    font-size:clamp(58px,10vw,80px);
    margin-top:32px
  }
  .hero-lead {
    padding-bottom:55px
  }
  .device-grid {
    grid-template-columns:1fr 1fr
  }
  .detail-layout {
    grid-template-columns:1fr
  }
  .detail-header {
    padding:50px 0 35px
  }
  .side-panel {
    padding:28px
  }
}

@media(max-width:600px) {
  .site-shell {
    padding:0 17px
  }
  .site-header {
    height:76px
  }
  .brand {
    gap:11px
  }
  .brand-mark {
    height:42px;
    width:42px;
    font-size:11px
  }
  .brand-copy strong {
    font-size:12px
  }
  .brand-copy small {
    font-size:7px;
    letter-spacing:.13em
  }
  .hero {
    padding-top:38px
  }
  .hero h1 {
    font-size:58px
  }
  .hero-lead {
    font-size:14px
  }
  .hero-foot {
    font-size:8px
  }
  .hero-foot>span:last-child {
    display:none
  }
  .section-heading {
    align-items:start
  }
  .section-heading h2 {
    font-size:29px
  }
  .section-aside {
    display:none
  }
  .catalog-section {
    padding:42px 0 65px
  }
  .device-grid {
    grid-template-columns:1fr
  }
  .detail-header {
    display:block
  }
  .detail-header h1 {
    font-size:61px
  }
  .detail-badge {
    width:max-content;
    margin-top:24px
  }
  .detail-panel {
    padding:21px
  }
  .status-row {
    align-items:start;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:12px 0
  }
  .status-row strong {
    text-align:left
  }
  .action-stack {
    grid-template-columns:1fr
  }
  .button-danger {
    grid-column:auto
  }
  .side-panel {
    padding:22px
  }
  .site-footer {
    font-size:8px;
    line-height:1.5
  }
  .site-footer span:last-child {
    display:none
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}