/* ADOR.IS Open Standards and Specifications Index */

html {
  overflow-x: clip;
}

body {
  min-width: 0;
}

.standards-hero {
  min-height: 920px;
  grid-template-columns: minmax(430px, .82fr) minmax(610px, 1.18fr);
  background:
    radial-gradient(circle at 76% 43%, rgba(22, 103, 255, .15), transparent 34%),
    #07111f;
}

.standards-hero .hero-copy {
  align-self: center;
}

.standards-hero h1 {
  max-width: 800px;
  font-size: clamp(58px, 5.7vw, 92px);
}

.standards-hero figure {
  min-height: 610px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .24);
}

.standards-hero figure img {
  object-position: center;
}

.standards-hero figure:after {
  background:
    linear-gradient(90deg, rgba(3, 10, 21, .26), transparent 42%),
    linear-gradient(180deg, transparent 66%, rgba(3, 10, 21, .52));
}

.standards-hero .visual-stat {
  min-width: 150px;
}

.standards-intro {
  padding-bottom: 96px;
}

.standards-foundations {
  padding: 0 clamp(24px, 7vw, 110px) 122px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 7vw;
  color: #fff;
  background: #07111f;
}

.foundation-copy {
  padding: 80px 0;
  align-self: center;
}

.foundation-copy h2,
.lifecycle-head h2,
.map-head h2,
.composition-copy h2 {
  margin: 0 0 28px;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -.06em;
}

.foundation-copy > p:not(.kicker),
.map-head > p:not(.kicker),
.composition-copy > p:not(.kicker) {
  max-width: 600px;
  color: #bdc8d5;
  font-size: 17px;
  line-height: 1.75;
}

.foundation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.foundation-grid article {
  min-height: 260px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background:
    linear-gradient(rgba(82, 216, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 216, 255, .035) 1px, transparent 1px),
    rgba(255, 255, 255, .018);
  background-size: 30px 30px;
}

.foundation-grid article > span {
  color: var(--cyan);
  font: 700 12px/1.4 "Courier New", monospace;
}

.foundation-grid h3 {
  margin: 64px 0 12px;
  font-size: 25px;
  letter-spacing: -.035em;
}

.foundation-grid p {
  max-width: 340px;
  color: #b8c4d2;
  font-size: 15px;
  line-height: 1.7;
}

.foundation-grid article > i {
  width: 88px;
  height: 88px;
  position: absolute;
  right: -24px;
  bottom: -24px;
  border: 1px solid rgba(82, 216, 255, .24);
  transform: rotate(45deg);
  box-shadow:
    0 0 0 14px rgba(22, 103, 255, .055),
    0 0 0 28px rgba(82, 216, 255, .025);
}

.standards-lifecycle {
  padding: 120px clamp(24px, 7vw, 110px);
}

.lifecycle-head {
  margin-bottom: 70px;
  display: grid;
  grid-template-columns: .55fr 1fr .72fr;
  gap: 5vw;
  align-items: end;
}

.lifecycle-head h2 {
  margin: 0;
}

.lifecycle-head h2 em {
  color: var(--blue);
}

.lifecycle-head > p:last-child {
  margin: 0;
  color: #526073;
  font-size: 17px;
  line-height: 1.72;
}

.lifecycle-track {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.lifecycle-track li {
  min-height: 330px;
  padding: 26px 22px;
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lifecycle-track li > span {
  color: var(--blue);
  font: 700 12px/1.4 "Courier New", monospace;
}

.lifecycle-node {
  width: 74px;
  height: 74px;
  margin: 54px 0 38px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22, 103, 255, .34);
  transform: rotate(45deg);
  background: rgba(22, 103, 255, .04);
}

.lifecycle-node:before,
.lifecycle-node:after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(82, 216, 255, .28);
}

.lifecycle-node:after {
  inset: 26px;
  background: var(--blue);
  border: 0;
  box-shadow: 0 0 18px rgba(22, 103, 255, .42);
}

.lifecycle-track li:not(:last-child) .lifecycle-node > i {
  width: calc((100vw - clamp(48px, 14vw, 220px)) / 6 - 54px);
  height: 1px;
  position: absolute;
  left: 52px;
  top: -1px;
  background: linear-gradient(90deg, rgba(22, 103, 255, .6), rgba(82, 216, 255, .18));
  transform: rotate(-45deg);
  transform-origin: left center;
}

.lifecycle-track h3 {
  margin: 0 0 12px;
  font-size: 22px;
}

.lifecycle-track p {
  color: #526073;
  font-size: 15px;
  line-height: 1.65;
}

.standards-map {
  padding: 120px clamp(24px, 7vw, 110px);
  color: #fff;
  background: #0b182a;
}

.map-head {
  margin-bottom: 70px;
  display: grid;
  grid-template-columns: .55fr 1fr .72fr;
  gap: 5vw;
  align-items: end;
}

.map-head h2 {
  margin: 0;
}

.map-head > p:last-child {
  margin: 0;
}

.domain-map {
  min-height: 720px;
  padding: 46px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 150px 260px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    linear-gradient(rgba(82, 216, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 216, 255, .045) 1px, transparent 1px),
    #07111f;
  background-size: 38px 38px;
}

.domain-map:before,
.domain-map:after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  background: rgba(82, 216, 255, .32);
  transform: translate(-50%, -50%);
}

.domain-map:before {
  width: 1px;
  height: 70%;
}

.domain-map:after {
  width: 70%;
  height: 1px;
}

.domain-map article {
  min-height: 235px;
  padding: 28px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(99, 169, 255, .24);
  background: linear-gradient(145deg, rgba(19, 45, 79, .96), rgba(7, 17, 31, .98));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
}

.domain-map article > span,
.domain-map article > b {
  color: var(--cyan);
  font: 700 12px/1.4 "Courier New", monospace;
  letter-spacing: .06em;
}

.domain-map article h3 {
  margin: 52px 0 11px;
  font-size: 25px;
  letter-spacing: -.035em;
}

.domain-map article p {
  color: #b9c5d3;
  font-size: 15px;
  line-height: 1.65;
}

.domain-map article > b {
  margin-top: auto;
}

.domain-core {
  width: 210px;
  height: 210px;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(82, 216, 255, .6);
  background: linear-gradient(145deg, rgba(22, 103, 255, .78), rgba(7, 17, 31, .98));
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow:
    0 0 55px rgba(22, 103, 255, .28),
    0 0 0 22px rgba(82, 216, 255, .025),
    0 0 0 44px rgba(22, 103, 255, .018);
}

.domain-core > * {
  transform: rotate(-45deg);
}

.domain-core b {
  color: #fff;
  font: 700 15px/1.3 "Courier New", monospace;
  letter-spacing: .08em;
}

.domain-core span {
  margin-top: 6px;
  color: #a9d9ec;
  font: 700 9px/1.3 "Courier New", monospace;
  letter-spacing: .08em;
}

.domain-core i {
  width: 8px;
  height: 8px;
  position: absolute;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.domain-core i:first-child { left: 14px; top: 14px; }
.domain-core i:nth-child(2) { right: 14px; top: 14px; }
.domain-core i:nth-child(3) { right: 14px; bottom: 14px; }
.domain-core i:nth-child(4) { left: 14px; bottom: 14px; }

.standards-directory-heading {
  padding-bottom: 70px;
}

.standards-directory {
  position: relative;
}

.standards-directory .controls {
  grid-template-columns: minmax(290px, 1.1fr) repeat(3, minmax(185px, .58fr));
  grid-template-areas:
    "search state type surface"
    "family family family family";
  gap: 22px 24px;
}

.standards-directory .search-wrap { grid-area: search; }
.standards-directory .standard-family-fieldset { grid-area: family; }
.standards-directory .state-wrap { grid-area: state; }
.standards-directory .type-wrap { grid-area: type; }
.standards-directory .surface-wrap { grid-area: surface; }

.standard-family-filters {
  width: 100%;
  min-width: 0;
  padding-bottom: 5px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(22, 103, 255, .5) rgba(10, 21, 39, .08);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.standard-family-filters::-webkit-scrollbar { height: 5px; }
.standard-family-filters::-webkit-scrollbar-track { background: rgba(10, 21, 39, .08); }
.standard-family-filters::-webkit-scrollbar-thumb { background: rgba(22, 103, 255, .5); }

.standard-family-filters button {
  min-height: 50px;
  flex: 0 0 auto;
  padding-right: 20px;
  padding-left: 20px;
  white-space: nowrap;
}

.standards-directory .results-bar {
  margin-bottom: 0;
}

.standard-groups {
  min-width: 0;
  border-top: 1px solid var(--line);
}

.standard-group {
  --domain-accent: #52d8ff;
  --domain-rgb: 82, 216, 255;
  min-width: 0;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: linear-gradient(90deg, #07111f 0, #07111f 210px, rgba(255, 255, 255, .16) 210px);
}

.standard-group[data-family="cloud"] {
  --domain-accent: #7c91ff;
  --domain-rgb: 124, 145, 255;
}

.standard-group[data-family="browser"] {
  --domain-accent: #65e1c0;
  --domain-rgb: 101, 225, 192;
}

.standard-group[data-family="spatial"] {
  --domain-accent: #7fc7ff;
  --domain-rgb: 127, 199, 255;
}

.standard-group-rail {
  min-width: 0;
  padding: 30px 22px;
  position: relative;
  color: #fff;
  background:
    linear-gradient(rgba(var(--domain-rgb), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--domain-rgb), .055) 1px, transparent 1px),
    #07111f;
  background-size: 26px 26px;
}

.standard-group-rail:after {
  content: "";
  width: 1px;
  height: 82px;
  position: absolute;
  top: 30px;
  right: 0;
  background: var(--domain-accent);
}

.standard-group-index {
  display: block;
  color: var(--domain-accent);
  font: 700 12px/1.4 "Courier New", monospace;
  letter-spacing: .08em;
}

.standard-group-rail h3 {
  margin: 68px 0 14px;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.standard-group-rail p {
  margin: 0;
  color: #b5c2d1;
  font-size: 15px;
  line-height: 1.65;
}

.standard-group-count {
  margin-top: 30px;
  display: block;
  color: #9daec0;
  font: 700 12px/1.4 "Courier New", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.standard-group-cards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.standard-card {
  --card-accent: var(--domain-accent);
  --card-rgb: var(--domain-rgb);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .3);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.standard-card:hover,
.standard-card:focus-within {
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: 0 20px 60px rgba(16, 31, 52, .09);
}

.standard-card-topline {
  min-height: 70px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.standard-number {
  color: var(--blue);
  font: 700 13px/1.3 "Courier New", monospace;
  letter-spacing: .08em;
}

.standard-state {
  max-width: 245px;
  padding: 8px 10px;
  color: #0d5a65;
  background: #dff5fb;
  font: 700 12px/1.35 "Courier New", monospace;
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.standard-state.state-candidate {
  color: #5c4200;
  background: #fff0c7;
}

.standard-state.state-living {
  color: #31469a;
  background: #e6e9ff;
}

.standard-state.state-framework {
  color: #175840;
  background: #ddf5e9;
}

.standard-plate {
  min-height: 230px;
  margin: 0 26px;
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(var(--card-rgb), .28);
  background:
    linear-gradient(rgba(var(--card-rgb), .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--card-rgb), .065) 1px, transparent 1px),
    linear-gradient(145deg, #102642, #07111f 72%);
  background-size: 28px 28px, 28px 28px, auto;
}

.standard-plate:after {
  content: "";
  width: 240px;
  height: 240px;
  position: absolute;
  right: -110px;
  bottom: -135px;
  border: 1px solid rgba(var(--card-rgb), .17);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(var(--card-rgb), .025),
    0 0 0 56px rgba(var(--card-rgb), .015);
}

.standard-plate-code,
.standard-plate-domain {
  position: absolute;
  z-index: 2;
  top: 18px;
  font: 700 11px/1.4 "Courier New", monospace;
  letter-spacing: .07em;
}

.standard-plate-code {
  left: 18px;
  color: var(--card-accent);
}

.standard-plate-domain {
  right: 18px;
  max-width: 55%;
  color: #99a9bd;
  text-align: right;
}

.standard-schematic {
  width: 270px;
  height: 132px;
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
}

.standard-node,
.standard-path {
  position: absolute;
  display: block;
}

.standard-node {
  width: 26px;
  height: 26px;
  z-index: 2;
  border: 1px solid var(--card-accent);
  background: #0b182a;
  box-shadow: 0 0 15px rgba(var(--card-rgb), .25);
  transform: rotate(45deg);
}

.standard-node:after {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--card-accent);
}

.standard-node.node-a { left: 8px; top: 12px; }
.standard-node.node-b { left: 8px; bottom: 12px; }
.standard-node.node-c { left: 122px; top: 52px; width: 42px; height: 42px; }
.standard-node.node-d { right: 8px; top: 12px; }
.standard-node.node-e { right: 8px; bottom: 12px; }
.standard-node.node-f { left: 125px; top: 4px; width: 18px; height: 18px; opacity: .72; }

.standard-path {
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, var(--card-accent), rgba(var(--card-rgb), .18));
  transform-origin: left center;
}

.standard-path.path-a { width: 114px; left: 30px; top: 32px; transform: rotate(20deg); }
.standard-path.path-b { width: 116px; left: 30px; bottom: 32px; transform: rotate(-20deg); }
.standard-path.path-c { width: 112px; left: 151px; top: 71px; transform: rotate(-20deg); }
.standard-path.path-d { width: 112px; left: 151px; bottom: 61px; transform: rotate(20deg); }

.plate-ai .standard-node.node-c { border-radius: 50%; transform: none; }
.plate-cloud .standard-node { border-radius: 2px; transform: none; }
.plate-browser .standard-node.node-a,
.plate-browser .standard-node.node-d { width: 48px; height: 18px; transform: none; }
.plate-spatial .standard-schematic { transform: translate(-50%, -50%) perspective(340px) rotateX(52deg) rotateZ(-8deg); }

.standard-card-body {
  padding: 27px 26px 30px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.standard-acronym {
  color: var(--blue);
  font: 700 13px/1.45 "Courier New", monospace;
  letter-spacing: .045em;
  overflow-wrap: anywhere;
}

.standard-card h4 {
  margin: 12px 0 14px;
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.standard-summary {
  margin: 0;
  color: #405069;
  font-size: 16px;
  line-height: 1.72;
}

.standard-surfaces {
  margin: 23px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.standard-surfaces span {
  padding: 7px 9px;
  color: #28507e;
  background: rgba(22, 103, 255, .075);
  border: 1px solid rgba(22, 103, 255, .12);
  font: 700 12px/1.3 "Courier New", monospace;
}

.standard-facts {
  margin: 25px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.standard-facts > div {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.standard-facts > div:first-child {
  grid-column: 1 / -1;
}

.standard-facts dt,
.standard-profile-grid dt,
.standard-compare-card dt {
  margin-bottom: 5px;
  color: #5b6b7e;
  font: 700 11px/1.35 "Courier New", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.standard-facts dd {
  margin: 0;
  color: #1f3048;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.standard-profile {
  margin-top: 25px;
  border-top: 1px solid var(--line);
}

.standard-profile > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--blue);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}

.standard-profile > summary::-webkit-details-marker { display: none; }
.standard-profile > summary:after { content: "+"; font-size: 20px; font-weight: 400; }
.standard-profile[open] > summary:after { content: "−"; }

.standard-profile-content {
  padding: 20px;
  border: 1px solid var(--line);
  background: #f6f8fa;
}

.standard-profile-block + .standard-profile-block {
  margin-top: 19px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
}

.standard-profile-block > b {
  color: #315070;
  font: 700 12px/1.4 "Courier New", monospace;
  letter-spacing: .055em;
}

.standard-profile-block p {
  margin: 8px 0 0;
  color: #33445b;
  font-size: 15px;
  line-height: 1.68;
}

.standard-profile-grid {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.standard-profile-grid > div {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.standard-profile-grid dd {
  margin: 0;
  color: #33445b;
  font-size: 14px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.standard-related-line {
  margin: 20px 0 0;
  color: #34465e;
  font-size: 14px;
  line-height: 1.6;
}

.standard-source-list {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.standard-source-link {
  min-height: 48px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #124fbd;
  background: #fff;
  border: 1px solid rgba(22, 103, 255, .2);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.standard-compare-control {
  min-height: 50px;
  margin-top: 18px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #31435b;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.standard-compare-control input {
  width: 1px;
  height: 1px;
  position: absolute;
  opacity: 0;
}

.standard-compare-box {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  position: relative;
  border: 1px solid #8190a2;
}

.standard-compare-control.is-selected .standard-compare-box {
  background: var(--blue);
  border-color: var(--blue);
}

.standard-compare-control.is-selected .standard-compare-box:after {
  content: "";
  width: 8px;
  height: 4px;
  position: absolute;
  left: 5px;
  top: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}

.standard-compare-control.is-disabled {
  color: #7b8795;
  cursor: not-allowed;
  opacity: .66;
}

.standard-compare-control:focus-within,
.standard-profile > summary:focus-visible,
.standard-source-link:focus-visible,
.standard-compare-remove:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.standard-compare-tray {
  min-height: 62px;
  padding: 12px 18px;
  position: fixed;
  z-index: 30;
  right: 26px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  background: #0b182a;
  border: 1px solid rgba(82, 216, 255, .36);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .28);
}

.standard-compare-tray[hidden] { display: none; }

.standard-compare-tray span {
  color: #d3dbe5;
  font-size: 14px;
}

.standard-compare-tray a,
.standard-compare-tray button {
  min-height: 38px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  color: #07111f;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.standard-compare-tray button {
  color: #c9d4e1;
  background: transparent;
}

.standards-comparison .compare-message-inline {
  min-height: 24px;
  color: #d6e0ea;
  font-size: 14px;
}

#clear-standard-comparison {
  padding: 8px 0;
  color: var(--cyan);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 700;
}

.standard-compare-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.standard-compare-empty {
  min-height: 240px;
  padding: 40px;
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  text-align: center;
}

.standard-compare-empty b {
  color: #fff;
  font-size: 22px;
}

.standard-compare-empty p {
  margin: 8px 0 0;
  color: #aebccc;
  font-size: 15px;
}

.standard-compare-card {
  min-width: 0;
  padding: 27px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, .14);
}

.standard-compare-card:last-child { border-right: 0; }

.standard-compare-domain {
  color: var(--cyan);
  font: 700 12px/1.4 "Courier New", monospace;
  letter-spacing: .05em;
}

.standard-compare-card h3 {
  margin: 36px 0 7px;
  font-size: 26px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.standard-compare-acronym {
  color: #9fb1c5;
  font: 700 13px/1.4 "Courier New", monospace;
}

.standard-compare-card dl {
  margin: 28px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.standard-compare-card dl > div {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.standard-compare-card dt { color: #8fa1b7; }

.standard-compare-card dd {
  margin: 0;
  color: #d1dae4;
  font-size: 14px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.standard-compare-remove {
  min-height: 44px;
  margin-top: auto;
  color: var(--cyan);
  background: transparent;
  border: 1px solid rgba(82, 216, 255, .35);
  cursor: pointer;
  font-weight: 700;
}

.standards-composition {
  padding: 120px clamp(24px, 7vw, 110px);
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 0;
  color: #fff;
  background: #07111f;
}

.composition-copy {
  padding: 58px;
  background: #0b182a;
}

.composition-copy dl {
  margin: 38px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.composition-copy dl div {
  padding: 17px 0;
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.composition-copy dt {
  color: var(--cyan);
  font: 700 11px/1.45 "Courier New", monospace;
}

.composition-copy dd {
  margin: 0;
  color: #c5cfdb;
  font-size: 14px;
  line-height: 1.62;
}

.composition-visual {
  min-height: 760px;
  padding: 80px 72px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  background:
    linear-gradient(rgba(82, 216, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 216, 255, .055) 1px, transparent 1px),
    radial-gradient(circle at 66% 40%, rgba(22, 103, 255, .18), transparent 38%),
    #07111f;
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.composition-layer {
  width: 74%;
  min-height: 92px;
  margin: 0 auto 22px;
  padding: 0 28px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 45px 1fr 70px;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(82, 216, 255, .24);
  background: linear-gradient(90deg, rgba(18, 43, 77, .97), rgba(8, 21, 39, .98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22);
  transform: perspective(700px) rotateX(4deg) rotateZ(-1.5deg);
}

.composition-layer:nth-of-type(3) { margin-left: 16%; }
.composition-layer:nth-of-type(4) { margin-left: 20%; }
.composition-layer:nth-of-type(5) { margin-left: 24%; }
.composition-layer:nth-of-type(6) { margin-left: 28%; }

.composition-layer span,
.composition-layer b {
  color: var(--cyan);
  font: 700 12px/1.4 "Courier New", monospace;
  letter-spacing: .08em;
}

.composition-layer b {
  color: #fff;
  font-size: 15px;
}

.composition-layer > i {
  width: 58px;
  height: 28px;
  position: relative;
  border: 1px solid rgba(82, 216, 255, .28);
}

.composition-layer > i:before,
.composition-layer > i:after {
  content: "";
  position: absolute;
  background: var(--cyan);
}

.composition-layer > i:before { width: 28px; height: 1px; left: 14px; top: 13px; }
.composition-layer > i:after { width: 5px; height: 5px; left: 26px; top: 11px; box-shadow: 0 0 9px var(--cyan); }

.composition-axis {
  width: 1px;
  position: absolute;
  z-index: 3;
  left: 20%;
  top: 68px;
  bottom: 68px;
  background: linear-gradient(var(--cyan), var(--blue));
}

.composition-axis i {
  width: 8px;
  height: 8px;
  position: absolute;
  left: -4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.composition-axis i:first-child { top: 8%; }
.composition-axis i:nth-child(2) { top: 28%; }
.composition-axis i:nth-child(3) { top: 48%; }
.composition-axis i:nth-child(4) { top: 68%; }
.composition-axis i:nth-child(5) { top: 88%; }

.standards-method .method-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.standards-method .method-grid article {
  min-height: 300px;
}

.standards-method .method-grid h3 {
  margin-top: 62px;
}

.standards-method .benchmark-note {
  max-width: 980px;
}

.standards-related .compute-related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.standards-related .compute-related-grid a {
  min-height: 355px;
}

.standards-related .compute-related-grid b {
  margin-top: 62px;
}

@media (max-width: 1280px) {
  .standards-hero {
    grid-template-columns: minmax(390px, .8fr) minmax(520px, 1.2fr);
    gap: 35px 38px;
  }

  .standards-hero h1 {
    font-size: clamp(55px, 5.8vw, 78px);
  }

  .domain-map {
    gap: 150px 210px;
  }

  .standard-card h4 {
    font-size: 25px;
  }

  .standard-plate {
    min-height: 210px;
  }
}

@media (max-width: 1080px) {
  .standards-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 150px;
  }

  .standards-hero figure {
    min-height: 540px;
  }

  .standards-foundations,
  .standards-composition {
    grid-template-columns: 1fr;
  }

  .foundation-copy {
    padding-bottom: 20px;
  }

  .lifecycle-head,
  .map-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .lifecycle-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lifecycle-track li:not(:last-child) .lifecycle-node > i {
    display: none;
  }

  .domain-map {
    min-height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
  }

  .domain-map:before,
  .domain-map:after,
  .domain-core {
    display: none;
  }

  .standards-directory .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "search search"
      "family family"
      "state type"
      "surface surface";
  }

  .standard-group {
    grid-template-columns: 180px minmax(0, 1fr);
    background: linear-gradient(90deg, #07111f 0, #07111f 180px, rgba(255, 255, 255, .16) 180px);
  }

  .standard-group-cards {
    grid-template-columns: 1fr;
  }

  .standard-profile-grid {
    grid-template-columns: 1fr;
  }

  .standard-compare-grid {
    grid-template-columns: 1fr;
  }

  .standard-compare-card {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }

  .standard-compare-card:last-child {
    border-bottom: 0;
  }

  .standards-related .compute-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .standards-hero {
    padding: 122px 22px 34px;
  }

  .standards-hero h1 {
    font-size: clamp(44px, 13vw, 58px);
  }

  .standards-hero figure {
    min-height: 390px;
  }

  .standards-hero figure img {
    object-position: 52% center;
  }

  .standards-hero figcaption {
    left: 14px;
    right: 14px;
    font-size: 11px;
  }

  .standards-hero .visual-stat {
    bottom: 15px;
    min-width: 120px;
  }

  .standards-hero .visual-stat small {
    font-size: 11px;
  }

  .standards-hero .visual-stat.left { left: 15px; }
  .standards-hero .visual-stat.right { right: 15px; }

  .standards-hero .hero-foot {
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .standards-intro,
  .standards-directory-heading {
    padding-right: 22px;
    padding-left: 22px;
  }

  .standards-foundations,
  .standards-lifecycle,
  .standards-map,
  .standards-composition {
    padding: 82px 22px;
  }

  .foundation-copy {
    padding: 0 0 28px;
  }

  .foundation-grid,
  .lifecycle-track,
  .domain-map,
  .standards-related .compute-related-grid {
    grid-template-columns: 1fr;
  }

  .foundation-grid article {
    min-height: 235px;
  }

  .lifecycle-track li {
    min-height: 265px;
  }

  .lifecycle-node {
    margin: 42px 0 32px;
  }

  .domain-map {
    padding: 20px;
  }

  .domain-map article {
    min-height: 220px;
  }

  .standards-directory {
    padding-right: 22px;
    padding-left: 22px;
  }

  .standards-directory .controls {
    padding: 18px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "family"
      "state"
      "type"
      "surface";
  }

  .standards-directory .results-bar {
    padding: 18px 0;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .standards-directory .research-date {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .standard-group {
    display: block;
    background: transparent;
  }

  .standard-group-rail {
    min-height: 230px;
  }

  .standard-group-rail h3 {
    margin-top: 48px;
  }

  .standard-card-topline {
    padding: 20px;
    align-items: flex-start;
  }

  .standard-state {
    max-width: 190px;
    font-size: 11px;
  }

  .standard-plate {
    min-height: 190px;
    margin: 0 20px;
  }

  .standard-schematic {
    transform: translate(-50%, -50%) scale(.82);
  }

  .plate-spatial .standard-schematic {
    transform: translate(-50%, -50%) scale(.82) perspective(340px) rotateX(52deg) rotateZ(-8deg);
  }

  .standard-card-body {
    padding: 24px 20px 28px;
  }

  .standard-card h4 {
    font-size: 25px;
  }

  .standard-facts,
  .standard-profile-grid {
    grid-template-columns: 1fr;
  }

  .standard-facts > div:first-child {
    grid-column: auto;
  }

  .standard-profile-content {
    padding: 16px;
  }

  .standard-compare-tray {
    min-height: 66px;
    right: 12px;
    bottom: 10px;
    left: 12px;
    justify-content: space-between;
    gap: 10px;
  }

  body.has-standard-tray {
    padding-bottom: 82px;
  }

  .standard-compare-tray span {
    font-size: 13px;
  }

  .standards-comparison,
  .standards-method,
  .standards-selection,
  .standards-related,
  .standards-contact {
    padding-right: 22px;
    padding-left: 22px;
  }

  .composition-copy {
    padding: 34px 24px;
  }

  .composition-copy dl div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .composition-visual {
    min-height: 600px;
    padding: 62px 20px;
  }

  .composition-layer {
    width: 84%;
    min-height: 82px;
    padding: 0 16px;
    grid-template-columns: 30px 1fr 48px;
    gap: 10px;
  }

  .composition-layer:nth-of-type(n) {
    margin-right: auto;
    margin-left: auto;
  }

  .composition-layer > i {
    width: 44px;
  }

  .composition-axis {
    display: none;
  }

  .standards-method .method-grid,
  .standards-selection .selection-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .standard-card,
  .standard-source-link,
  .standard-compare-control {
    transition: none;
  }
}