:root {
  color-scheme: dark;
  font-family: Inter, Avenir, "Helvetica Neue", system-ui, sans-serif;
  color: #f1eadc;
  background: #080a0b;
  --brass: #d99b50;
  --cyan: #76c8d2;
  --line: rgba(241, 234, 220, 0.14);
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
  background:
    radial-gradient(circle at 50% 38%, rgba(217, 155, 80, 0.08), transparent 28%),
    radial-gradient(circle, rgba(255,255,255,.4) 0 .5px, transparent .8px) 0 0 / 83px 83px,
    #080a0b;
}
main { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 7vh 0 24px; }
header { display: grid; justify-items: center; text-align: center; }
.seal { width: 38px; height: 38px; margin-bottom: 20px; border: 1px solid var(--brass); border-radius: 50%; box-shadow: inset 0 0 0 8px #080a0b, inset 0 0 0 9px rgba(217,155,80,.5); }
header > p:first-of-type, .number, footer {
  color: #989487;
  font: .65rem/1.4 ui-monospace, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
h1 { margin: 7px 0; font: 500 clamp(2.3rem, 6vw, 5.2rem)/.95 Georgia, serif; letter-spacing: -.045em; }
.rule { width: 90px; height: 1px; margin: 19px 0; background: var(--brass); }
.dek { max-width: 480px; margin: 0; color: #aaa597; font: .95rem/1.55 Georgia, serif; }
.instruments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8vh; }
.instrument { position: relative; display: grid; min-height: 380px; padding: 24px; overflow: hidden; border: 1px solid var(--line); color: inherit; background: rgba(13,16,17,.92); text-decoration: none; transition: transform 160ms, border-color 160ms; }
.instrument.live:hover { z-index: 2; border-color: var(--brass); transform: translateY(-5px); }
.number { align-self: start; }
.instrument h2 { align-self: end; margin: 0 0 10px; font: 500 1.55rem/1.05 Georgia, serif; }
.instrument p { align-self: start; margin: 0; color: #9f9b90; font-size: .75rem; line-height: 1.55; }
.enter { align-self: end; display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); color: #d2c9b8; font: .62rem ui-monospace, monospace; text-transform: uppercase; }
.enter b { color: var(--brass); font-size: 1rem; }
.orbital-mark, .bench-mark, .future-mark, .component-mark, .library-mark { position: absolute; top: 78px; right: 24px; left: 24px; height: 130px; }
.orbital-mark { border: 1px solid rgba(118,200,210,.32); border-radius: 50%; transform: rotate(-13deg) scaleY(.46); }
.orbital-mark::after { position: absolute; top: 50%; left: 50%; width: 23px; height: 23px; content: ""; border-radius: 50%; background: var(--brass); box-shadow: 0 0 30px rgba(217,155,80,.6); transform: translate(-50%,-50%); }
.orbital-mark i { position: absolute; top: -3px; left: 56%; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.bench-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bench-mark i { border: 1px solid rgba(118,200,210,.28); background: linear-gradient(45deg, transparent 48%, rgba(118,200,210,.18) 49% 51%, transparent 52%); }
.bench-mark::after { position: absolute; top: 50%; right: 8%; left: 54%; height: 2px; content: ""; background: var(--brass); transform: rotate(-18deg); box-shadow: 24px -8px 0 var(--brass); }
.component-mark { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; padding: 18px 14%; }
.component-mark i { height: 62%; border: 1px solid rgba(118,200,210,.38); background: rgba(118,200,210,.06); }
.component-mark i:nth-child(2) { height: 92%; border-color: rgba(217,155,80,.6); transform: skewY(-18deg); transform-origin: bottom; }
.component-mark i:nth-child(3) { height: 38%; border-radius: 50%; background: rgba(98,210,155,.1); }
.library-mark { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 10px 7%; perspective: 360px; }
.library-mark i { border: 1px solid rgba(118,200,210,.34); background: linear-gradient(145deg, rgba(118,200,210,.08), transparent); transform: rotateY(-13deg); }
.library-mark i:nth-child(2) { border-color: rgba(217,155,80,.65); transform: translateY(15px) rotateY(-13deg); }
.library-mark i:nth-child(3) { transform: translateY(-7px) rotateY(-13deg); }
.library-mark i:nth-child(4) { border-color: rgba(98,210,155,.44); transform: translateY(9px) rotateY(-13deg); }
.future { opacity: .48; }
.future-mark { display: grid; place-items: center; color: #77746c; font: 5rem Georgia, serif; }
footer { display: flex; justify-content: space-between; margin-top: 42px; padding-top: 15px; border-top: 1px solid var(--line); }
@media (max-width: 800px) {
  .instruments { grid-template-columns: 1fr; }
  .instrument { min-height: 330px; }
  footer { gap: 16px; flex-direction: column; }
}