/* strands-arm: workshop at night */
:root, [data-md-color-scheme="slate"] {
  --arm-bg: #0b0b0d;
  --arm-amber: #ffb000;
  --arm-steel: #7a7a82;
  --arm-hairline: rgba(122, 122, 130, .28);
  --arm-mono: "JetBrains Mono", ui-monospace, monospace;
  --md-default-bg-color: #0b0b0d;
  --md-default-fg-color: #d6d6da;
  --md-default-fg-color--light: #a9a9b0;
  --md-primary-fg-color: #0b0b0d;
  --md-accent-fg-color: #ffb000;
  --md-typeset-a-color: #ffb000;
  --md-code-bg-color: #08080a;
  --md-code-fg-color: #d6d6da;
  --md-footer-bg-color: #0b0b0d;
  --md-footer-bg-color--dark: #08080a;
}

body {
  font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  background: var(--arm-bg);
}

/* code blocks: black, amber copy button */
.md-typeset pre > code { background: #08080a; border: 1px solid var(--arm-hairline); border-radius: 8px; }
.md-clipboard { color: var(--arm-steel); }
.md-clipboard:hover { color: var(--arm-amber); }

/* model-viewer */
model-viewer {
  width: 100%;
  height: 62vh;
  background: var(--arm-bg);
  border-radius: 12px;
  border: 1px solid var(--arm-hairline);
  --poster-color: #0b0b0d;
  --progress-bar-color: #ffb000;
}
model-viewer::part(default-progress-bar) { background: #ffb000; }
@media (max-width: 44rem) {
  model-viewer { height: 48vh; }
}

/* hairline rules everywhere */
.md-typeset hr { border-bottom: 1px solid var(--arm-hairline); }

/* hero */
.arm-hero model-viewer { height: 62vh; }
.arm-claim {
  margin: 1rem 0 .4rem;
  font-size: 1.15rem;
  color: #d6d6da;
  letter-spacing: .01em;
}
.arm-strip {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: .55rem 0;
  border-top: 1px solid var(--arm-hairline);
  border-bottom: 1px solid var(--arm-hairline);
  color: var(--arm-steel);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.arm-strip b { color: var(--arm-amber); font-weight: 600; font-size: .95rem; }

/* cards */
.arm-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin: 1.2rem 0;
}
.arm-card {
  border: 1px solid var(--arm-hairline);
  border-radius: 10px;
  padding: .2rem 1rem .6rem;
  background: #101013;
  transition: border-color .15s;
}
.arm-card:hover { border-color: var(--arm-amber); }
.md-typeset .arm-card h2, .md-typeset .arm-card h3 { margin: .7rem 0 .3rem; font-size: .92rem; line-height: 1.3; padding: 0; letter-spacing: 0; }
.md-typeset .arm-card h2::after { display: none; }  /* cards are h2 for the outline (h1 -> h2), styled as card titles, no section rule */
.arm-card h2 a, .arm-card h3 a { color: var(--arm-amber); }
.arm-card p { font-size: .74rem; color: var(--md-default-fg-color--light); }
@media (max-width: 44rem) {
  .arm-cards { grid-template-columns: 1fr; }
  .arm-strip { gap: 1rem; }
}

/* schematic */
.arm-schematic {
  max-width: 380px;
  margin: 1rem auto;
  opacity: .9;
}

/* 390 px pass: hero specificity fix + tighter type */
@media (max-width: 44rem) {
  .arm-hero model-viewer { height: 48vh; }
  .arm-claim { font-size: 1rem; }
  .md-typeset h1.arm-claim { line-height: 1.15; } /* three lines of headline on a phone; 1.08 makes them touch */
  .arm-strip { font-size: .68rem; gap: .8rem; }
  .arm-strip b { font-size: .85rem; }
  .arm-schematic { max-width: 320px; }
  .md-typeset pre > code { font-size: .68rem; }
}

/* the joint viewer */
iframe.viewer{width:100%;height:min(72vh,720px);border:1px solid var(--arm-hairline);border-radius:12px;background:#0b0b0d;display:block}
iframe.viewer.hero{min-height:70vh;height:70vh;margin:.4rem 0 0;border-radius:12px}
.arm-sub{color:#9a9aa2;font-size:.9rem;margin:0 0 .6rem}
.arm-sub a{color:var(--arm-amber)}
@media (max-width:44rem){iframe.viewer.hero{min-height:60vh;height:60vh}}