/* metric-matched fallback for the text face, so the first paint (Arial) takes the same lines as Space Grotesk and the
   font swap moves nothing. Numbers from fontTools over the Google latin woff2 vs Arial: weighted a-z+space advance ratio
   111.34 %, hhea ascent .984 / descent .292 divided by that. Measured: home hero h1 171 -> 257 px (2 -> 3 lines) before. */
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 111.34%; ascent-override: 88.37%; descent-override: 26.22%; line-gap-override: 0%; }
/* the two faces, self-hosted (docs/fonts, OFL): variable weight, latin subset, 22 + 40 KB, preloaded in main.html.
   No fonts.googleapis.com round trip: nothing off-site loads, and the page reads the same in a closed network. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --md-text-font: "Space Grotesk", "Space Grotesk Fallback"; --md-code-font: "JetBrains Mono"; }   /* Material derives --md-*-font-family on body from these */

/* strands-arm chrome: the doc pages. Loaded last. Header, tabs, search, tables, footer, rhythm.
   Tokens live in design.css; the landing has home.css. */

/* ---- header: one thin bar, the mark, the name, a pill search, the repo in mono ---- */
.md-header { background: rgba(11, 11, 13, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 0; box-shadow: none; }
.md-header[data-md-state="shadow"], .md-header--shadow { box-shadow: none; }
.md-header__inner { height: 3rem; align-items: center; }
.md-header__button.md-logo { margin: 0 .2rem 0 0; }
.md-header__title { font: 600 .82rem/1 "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; letter-spacing: .01em; height: auto; margin-left: .2rem; }
.md-header__topic { position: static; transform: none; opacity: 1; }
.md-header__topic + .md-header__topic { display: none; }   /* no page title swap in the bar; the tabs say where you are */
.md-header__title--active .md-header__topic:first-child { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.md-header__ellipsis { display: flex; align-items: center; gap: .5rem; }
.md-header__ellipsis::after { content: "leader arm, second life"; font: 500 .62rem/1 var(--arm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--arm-steel); padding-left: .6rem; border-left: 1px solid var(--arm-hairline); }
.md-header__source { width: auto; max-width: none; margin-left: .6rem; }
.md-source { font: 500 .66rem/1 var(--arm-mono); letter-spacing: .02em; color: var(--md-default-fg-color--light); }
.md-source:hover { color: var(--arm-tilt); opacity: 1; }
.md-source__icon { width: 2rem; height: 2rem; }
.md-source__icon svg { width: 1rem; height: 1rem; margin-top: .55rem; }
.md-source__repository { margin-left: 2rem; }
.md-source__facts { display: none; }

/* search: a pill, hairline, amber on focus; the dialog is a panel */
.md-search { padding: 0; }
.md-search__inner { width: 12rem; }
.md-search__form { height: 1.9rem; border-radius: 999px; background: #101013; border: 1px solid var(--arm-hairline); box-shadow: none; transition: border-color var(--arm-t) var(--arm-ease); }
.md-search__form:hover { background: #121216; }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-color: var(--arm-tilt); background: #101013; border-radius: 12px 12px 0 0; }
.md-search__input { font: 500 .72rem/1.9rem "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; color: var(--arm-bone); padding-left: 2.2rem; height: 1.9rem; }
.md-search__input::placeholder { color: var(--arm-steel); font-family: var(--arm-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.md-search__icon.md-icon { top: .35rem; left: .65rem; width: 1rem; height: 1rem; }
.md-search__icon.md-icon svg { width: 1rem; height: 1rem; }
.md-search__options { top: .3rem; }
.md-search__output { top: 1.9rem; border-radius: 0 0 12px 12px; }
.md-search__scrollwrap { background: #101013; border: 1px solid var(--arm-tilt); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.md-search-result__meta { background: #0d0d10; color: var(--arm-steel); font: 500 .62rem/1 var(--arm-mono); letter-spacing: .08em; text-transform: uppercase; padding: .8rem 1rem .8rem 2.2rem; }
.md-search-result__item { border-top: 1px solid var(--arm-hairline); }
.md-search-result__link:focus, .md-search-result__link:hover { background: var(--arm-pan-dim); }
.md-search-result__article { padding-left: 2.2rem; }
.md-search-result__icon { left: .65rem; color: var(--arm-steel); }
.md-search-result .md-typeset h1 { font-size: .9rem; color: var(--arm-bone); margin: .3em 0; }
.md-search-result .md-typeset { font-size: .72rem; color: var(--md-default-fg-color--light); }
.md-search-result mark { color: var(--arm-tilt); background: transparent; }
.md-search-result__more summary { color: var(--arm-pan); font: 500 .66rem/1 var(--arm-mono); }
.md-search__overlay { background: rgba(11, 11, 13, .6); }
@media (min-width: 60em) { [data-md-toggle="search"]:checked ~ .md-header .md-search__inner { width: 34rem; } }

/* ---- tabs: mono small caps, active in bone with the two-colour rule ---- */
.md-tabs { background: rgba(11, 11, 13, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--arm-hairline); }
.md-tabs__list { margin-left: .2rem; }
.md-tabs__item { height: 2.3rem; padding: 0; margin-right: 1.6rem; }
.md-tabs__link { font: 600 .64rem/2.3rem var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arm-steel); margin: 0; opacity: 1; position: relative; transition: color var(--arm-t) var(--arm-ease); }
.md-tabs__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--arm-pan) 0 50%, var(--arm-tilt) 50% 100%); transition: right var(--arm-t) var(--arm-ease); }
.md-tabs__link:hover, .md-tabs__link:focus-visible { color: var(--arm-bone); }
.md-tabs__link--active { color: var(--arm-bone); box-shadow: none; padding-bottom: 0; }
.md-tabs__link--active::after, .md-tabs__link:hover::after { right: 0; }

/* ---- the page: rhythm on 8 px, prose at 68ch, headings anchor ---- */
.md-main__inner { margin-top: 2rem; }
.md-content__inner { padding-bottom: 4rem; }
.md-content__inner > .md-content__button { display: none; }              /* no edit pencil */
.md-typeset { font-size: .82rem; line-height: 1.65; }
.md-typeset h1 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); margin: 0 0 .6em; }
.md-typeset h1 + p { font-size: 1rem; line-height: 1.5; color: var(--arm-bone); max-width: 56ch; }   /* the promise: the first sentence after the title */
.md-typeset h2 { font-size: clamp(1.35rem, 1rem + 1vw, 1.7rem); margin-top: 3.2rem; margin-bottom: 1rem; padding-bottom: .4rem; scroll-margin-top: 6rem; }
.md-typeset h2::after { width: 2.4rem; height: 2px; }
.md-typeset h3 { margin-top: 2.2rem; margin-bottom: .6rem; scroll-margin-top: 6rem; }
.md-typeset p, .md-typeset ul, .md-typeset ol { margin: 0 0 1em; }
.md-typeset hr { margin: 3rem 0; }
.md-typeset img, .md-typeset video { border-radius: 10px; }

/* numbers: mono where it is a number, sans where it is a sentence (design.js marks numeric cells with .num) */
.md-typeset table:not([class]) td { font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; font-variant-numeric: tabular-nums slashed-zero; }
.md-typeset table:not([class]) td.num { font-family: var(--arm-mono); font-size: .92em; color: var(--arm-bone); white-space: nowrap; }

/* tables: a quiet panel, small-caps header, hairline rows, no zebra, no elevation */
.md-typeset table:not([class]) { display: table; width: 100%; font-size: .8rem; border: 1px solid var(--arm-hairline); border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; margin: 1.4rem 0; box-shadow: none; }
.md-typeset .md-typeset__table { display: block; width: 100%; overflow-x: auto; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }
.md-typeset .md-typeset__table > table:not([class]) { margin: 0; min-width: 32rem; }
.md-typeset .md-typeset__table.scrolls { border-radius: 10px; box-shadow: inset -28px 0 24px -24px rgba(0, 0, 0, .95), inset -2px 0 0 var(--arm-tilt); }   /* the edge hint: more to the right */
.md-typeset table:not([class]) th { font: 600 .64rem/1.4 var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; color: #86868e; background: #0d0d10; border-bottom: 1px solid var(--arm-hairline); padding: .7rem .9rem; text-align: left; vertical-align: bottom; }
.md-typeset table:not([class]) th:first-child { border-left: 2px solid var(--arm-tilt); }
.md-typeset table:not([class]) td { padding: .6rem .9rem; border-top: 1px solid var(--arm-hairline); vertical-align: top; background: #101013; }
.md-typeset table:not([class]) tr:first-child td { border-top: 0; }
.md-typeset table:not([class]) tbody tr:hover td { background: #13131a; }
.md-typeset table:not([class]) td code { white-space: nowrap; }

/* code blocks: black on black, a hairline, the copy button in steel until hover */
.md-typeset pre > code { padding: 1rem 1.2rem; line-height: 1.6; font-size: .74rem; }
.md-typeset .highlight span.filename { font: 500 .62rem/1 var(--arm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--arm-steel); background: #0d0d10; border: 1px solid var(--arm-hairline); border-bottom: 0; border-radius: 8px 8px 0 0; padding: .6rem 1.2rem; }
.md-typeset .highlight span.filename + pre > code { border-radius: 0 0 8px 8px; }

/* details / admonitions: quieter title, tighter body */
.md-typeset .admonition, .md-typeset details { font-size: .78rem; margin: 1.4rem 0; padding: .2rem .9rem .5rem; }
.md-typeset .admonition > :last-child, .md-typeset details > :last-child { margin-bottom: .4rem; }
.md-typeset .admonition-title, .md-typeset summary { padding-left: 1.6rem; margin: 0 -.9rem .4rem; }
.md-typeset .admonition-title::before, .md-typeset summary::before { left: .5rem; width: .8rem; height: .8rem; top: .7rem; }

/* footer: the same block the landing uses */
.md-footer { background: var(--arm-bg); border-top: 1px solid var(--arm-hairline); }
.md-footer-meta { border-top: 0; background: transparent; }
.md-footer-meta__inner.arm-footer { justify-content: space-between; padding: 1.6rem .8rem 2rem; gap: .6rem; flex-wrap: wrap; }
.arm-footer__mark { display: inline-flex; align-items: center; gap: .5rem; color: var(--arm-bone); font: 600 .8rem/1 "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; letter-spacing: .01em; }
.arm-footer__mark svg { width: 1.4rem; height: 1.4rem; }
.arm-footer a { color: var(--arm-tilt); }
.arm-footer__order { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.arm-footer__order a { color: var(--arm-steel); text-decoration: none; }
.arm-footer__order a:hover { color: var(--arm-tilt); }
.arm-footer__order i { color: var(--arm-steel); font-style: normal; font-weight: 400; margin-right: .3rem; }  /* no opacity: .7 put it at 3.3:1 */

/* back to top: a pill, not a chip */
.md-top { background: #101013; border: 1px solid var(--arm-hairline); color: var(--arm-bone); font: 500 .66rem/1 var(--arm-mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.md-top:hover { background: var(--arm-tilt); color: #0b0b0d; }

/* nav drawer on small screens: same colours */
@media (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title { background: var(--arm-bg); color: var(--arm-bone); border-bottom: 1px solid var(--arm-hairline); }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo { display: none; }
  .md-nav--primary .md-nav__item { border-top-color: var(--arm-hairline); }
  .md-header__ellipsis::after { display: none; }
  .md-header__source { display: none; }
  .md-nav__source { background: var(--arm-bg); border-top: 1px solid var(--arm-hairline); }
}
@media (max-width: 44em) {
  .md-search__inner { width: auto; }
  .md-typeset h2 { margin-top: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .md-tabs__link, .md-tabs__link::after, .md-search__form { transition: none; }
}
.md-source__repository { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
.md-header__source { flex-shrink: 0; }

/* ---- opener strip: where you are, how long, what you leave with ---- */
.arm-opener { margin: 0 0 1.4rem; }
.arm-opener__crumb { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0 0 .9rem !important; font: 500 .62rem/1.6 var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arm-steel); }
.arm-opener__crumb span + span::before { content: "·"; margin: 0 1rem 0 -1rem; color: var(--arm-hairline); position: absolute; }
.arm-opener__crumb span { position: relative; }
.arm-opener__step b { color: var(--arm-tilt); font-weight: 600; }
.arm-opener__outcome { display: flex; gap: .8rem; align-items: baseline; margin: 0 !important; padding: .7rem .9rem; border-left: 2px solid var(--arm-pan); background: var(--arm-pan-dim); border-radius: 0 8px 8px 0; font-size: .78rem; color: var(--md-default-fg-color--light); max-width: 68ch; }
.arm-opener__outcome i { flex: none; font: 600 .6rem/1.8 var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arm-pan); }
.md-typeset .arm-opener + h1, .md-typeset .arm-opener ~ h1:first-of-type { margin-top: 0; }

/* ---- next step card ---- */
.arm-next { margin: 4rem 0 0; display: grid; gap: .8rem; }
.arm-next__card { position: relative; display: grid; gap: .3rem; padding: 1.2rem 3.4rem 1.2rem 1.3rem; border: 1px solid var(--arm-hairline); border-radius: 12px; background: #101013; color: inherit; text-decoration: none; transition: transform var(--arm-t) var(--arm-ease), border-color var(--arm-t) var(--arm-ease); }
.arm-next__card:hover, .arm-next__card:focus-visible { transform: translateY(-2px); border-color: var(--arm-tilt); }
.arm-next__k { font: 600 .6rem/1 var(--arm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--arm-tilt); }
.arm-next__t { font: 700 1.15rem/1.2 "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; letter-spacing: -.01em; color: var(--arm-bone); }
.arm-next__o { font-size: .78rem; color: var(--md-default-fg-color--light); max-width: 56ch; }
.arm-next__arrow { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--arm-steel); transition: transform var(--arm-t) var(--arm-ease), color var(--arm-t) var(--arm-ease); }
.arm-next__card:hover .arm-next__arrow { transform: translate(.3rem, -50%); color: var(--arm-tilt); }
.arm-next__prev { justify-self: start; font: 500 .66rem/1 var(--arm-mono); letter-spacing: .04em; color: var(--arm-steel); text-decoration: none; }
.arm-next__prev:hover { color: var(--arm-pan); }
@media (prefers-reduced-motion: reduce) { .arm-next__card, .arm-next__arrow { transition: none; } }

/* task lists: a real box, amber when checked */
.md-typeset .task-list-item { list-style: none; margin-left: -1.6em; }
.md-typeset .task-list-control { position: relative; padding-left: 1.6em; }
.md-typeset .task-list-indicator { position: absolute; left: 0; top: .28em; width: .85em; height: .85em; border: 1px solid var(--arm-steel); border-radius: 3px; background: #0d0d10; }
.md-typeset .task-list-indicator::before { content: none; }
.md-typeset [type="checkbox"]:checked + .task-list-indicator { background: var(--arm-tilt); border-color: var(--arm-tilt); }
.md-typeset [type="checkbox"]:checked + .task-list-indicator::after { content: ""; position: absolute; left: .25em; top: .08em; width: .25em; height: .5em; border: solid #0b0b0d; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---- 3D viewers on doc pages: framed, labelled ---- */
.md-typeset .arm-3d { display: block; position: relative; width: 100%; margin: 1.6rem 0; border: 1px solid var(--arm-hairline); border-radius: 12px; overflow: hidden; background: #0d0d10; }
/* before design.js wraps it, the bare element already takes the frame's exact height (viewer + label bar + 2 px of border),
   so the wrap moves nothing below it: layout shift 0 */
.md-typeset > model-viewer, .md-typeset > p > model-viewer { display: block; width: 100%; height: calc(26rem + var(--arm-3d-bar) + 2px); max-height: calc(60vh + var(--arm-3d-bar) + 2px); margin: 1.6rem 0; border-radius: 12px; background: #0d0d10; }
:root { --arm-3d-bar: calc(1.2rem + .868rem + 1px); }  /* .arm-3d__bar: .62rem * 1.4 line + .6rem * 2 padding + hairline */
.md-typeset .arm-3d model-viewer { display: block; width: 100%; height: 26rem; max-height: 60vh; border: 0; border-radius: 0; margin: 0; background: radial-gradient(ellipse at 50% 60%, #16161b 0, #0b0b0d 70%); }
.arm-3d__bar { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--arm-hairline); font: 500 .62rem/1.4 var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arm-steel); }
.arm-3d__label { color: #a8a8b0; }
.arm-3d__label::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .5rem; vertical-align: 1px; background: var(--arm-steel); animation: arm-pulse 1.4s ease-in-out infinite; }
.arm-3d.ready .arm-3d__label::before { background: var(--arm-tilt); animation: none; }
.arm-3d.failed .arm-3d__label::before { background: #e5484d; animation: none; }
.arm-3d__hint { text-align: right; }
@keyframes arm-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .arm-3d__label::before { animation: none; } }
@media (max-width: 44em) { .md-typeset .arm-3d model-viewer { height: 18rem; } .md-typeset > model-viewer, .md-typeset > p > model-viewer { height: calc(18rem + var(--arm-3d-bar) + 2px); } .arm-3d__hint { display: none; } }

/* ---- sidebars: mono small-cap group titles, "on this page" ---- */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link, .md-nav__item--section > .md-nav__link, .md-nav__item--nested > .md-nav__link[for] { font: 600 .6rem/1.6 var(--arm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--arm-steel); }
.md-nav--secondary > .md-nav__title { font: 600 .6rem/1.6 var(--arm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--arm-steel); background: transparent; box-shadow: none; }
.md-nav__link { font-size: .74rem; }
.md-nav--primary .md-nav__item .md-nav__link--active { font-weight: 500; }

/* ---- build-order rail: top of the primary sidebar, the five steps, you are here ---- */
.arm-rail { margin: 0 0 1.2rem; padding: 0 .6rem 1rem; border-bottom: 1px solid var(--arm-hairline); }
.arm-rail__k { margin: 0 0 .5rem; font: 600 .56rem/1.6 var(--arm-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--arm-steel); }
.arm-rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
.arm-rail ol::before { content: ""; position: absolute; left: .34rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--arm-hairline); }
.arm-rail li { position: relative; margin: 0; padding: 0; }
.arm-rail li::before { content: ""; position: absolute; left: .2rem; top: 50%; width: .3rem; height: .3rem; margin-top: -.15rem; border-radius: 50%; background: var(--arm-bg); border: 1px solid var(--arm-steel); box-sizing: border-box; transition: background var(--arm-t) var(--arm-ease), border-color var(--arm-t) var(--arm-ease), box-shadow var(--arm-t) var(--arm-ease); }
.arm-rail a { display: flex; align-items: baseline; gap: .55rem; padding: .28rem 0 .28rem 1.1rem; font: 500 .7rem/1.4 var(--md-text-font, sans-serif); color: var(--md-default-fg-color--light); text-decoration: none; transition: color var(--arm-t) var(--arm-ease); }
.arm-rail a i { font: 600 .56rem/1 var(--arm-mono); letter-spacing: .08em; font-style: normal; color: var(--arm-steel); min-width: 1.2em; }
.arm-rail a:hover, .arm-rail a:focus-visible { color: var(--arm-bone); }
.arm-rail li:hover::before { border-color: var(--arm-bone); }
.arm-rail .is-done::before { background: var(--arm-pan); border-color: var(--arm-pan); }
.arm-rail .is-done a i { color: var(--arm-pan); }
.arm-rail .is-current::before { background: var(--arm-tilt); border-color: var(--arm-tilt); box-shadow: 0 0 0 3px var(--arm-tilt-dim, rgba(255, 176, 0, .18)); }
.arm-rail .is-current a { color: var(--arm-bone); font-weight: 600; }
.arm-rail .is-current a i { color: var(--arm-tilt); }
@media (prefers-reduced-motion: reduce) { .arm-rail li::before, .arm-rail a { transition: none; } }

/* ---- parts legend under the robot viewer: hotspots on the model, chips that fly the camera ---- */
.arm-3d__legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: .4rem; padding: 1.4rem .8rem .7rem; background: linear-gradient(to top, rgba(11, 11, 13, .92) 40%, rgba(11, 11, 13, 0)); pointer-events: none; }
.arm-3d__legend > * { pointer-events: auto; }
.arm-3d__chip { appearance: none; cursor: pointer; border: 1px solid var(--arm-hairline); border-radius: 999px; background: rgba(11, 11, 13, .6); color: var(--md-default-fg-color--light); font: 500 .62rem/1 var(--arm-mono); letter-spacing: .06em; padding: .4rem .7rem; transition: color var(--arm-t) var(--arm-ease), border-color var(--arm-t) var(--arm-ease), background var(--arm-t) var(--arm-ease); }
.arm-3d__chip:hover, .arm-3d__chip:focus-visible { color: var(--arm-bone); border-color: var(--arm-steel); outline: none; }
.arm-3d__chip.is-on { color: #0b0b0d; background: var(--arm-tilt); border-color: var(--arm-tilt); }
.arm-3d__chip--all { margin-left: auto; color: var(--arm-pan); }
.arm-hotspot { appearance: none; cursor: pointer; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--arm-bone); background: rgba(11, 11, 13, .7); padding: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); transition: opacity .3s var(--arm-ease), transform var(--arm-t) var(--arm-ease), border-color var(--arm-t) var(--arm-ease); --min-hotspot-opacity: .25; }
.arm-hotspot span { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 500 .6rem/1 var(--arm-mono); letter-spacing: .08em; color: var(--arm-bone); background: rgba(11, 11, 13, .82); border: 1px solid var(--arm-hairline); border-radius: 6px; padding: .3rem .5rem; opacity: 0; transition: opacity var(--arm-t) var(--arm-ease); pointer-events: none; }
.arm-hotspot:hover span, .arm-hotspot:focus-visible span, .arm-hotspot.is-on span { opacity: 1; }
.arm-hotspot.is-on { border-color: var(--arm-tilt); transform: scale(1.25); box-shadow: 0 0 0 4px var(--arm-tilt-dim); }
@media (max-width: 44em) { .arm-3d__chip--all { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .arm-3d__chip, .arm-hotspot, .arm-hotspot span { transition: none; } }

/* the pan/tilt schematic (arm.js draws a 320x190 svg into .arm-schematic): the host holds that shape before the script runs */
.md-typeset .arm-schematic { aspect-ratio: 320 / 190; }
.md-typeset .arm-schematic svg { display: block; width: 100%; height: 100%; }

/* plate cards (docs/_plates.md, written by hooks/gen_numbers.py from the slicer JSON): one card per sliced plate,
   the whole card is the link to the .gcode.3mf; the bar is print time relative to the longest plate */
.md-typeset .arm-plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.md-typeset .arm-plate { display: flex; flex-direction: column; gap: .35rem; padding: .95rem 1rem 1rem; border: 1px solid var(--arm-hairline); border-radius: 10px; background: #0d0d10; color: inherit; text-decoration: none; transition: border-color var(--arm-t) var(--arm-ease), transform var(--arm-t) var(--arm-ease); }
.md-typeset .arm-plate:hover, .md-typeset .arm-plate:focus-visible { border-color: var(--arm-tilt); color: inherit; transform: translateY(-2px); }
.md-typeset .arm-plate:focus-visible { outline: 2px solid var(--arm-tilt); outline-offset: 2px; }
.arm-plate__n { font: 600 .6rem/1 var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arm-steel); }
.md-typeset .arm-plate__name { font: 700 1.05rem/1.2 "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; letter-spacing: -.01em; color: var(--arm-bone); text-transform: capitalize; }
.arm-plate__parts { font: 400 .68rem/1.4 var(--arm-mono); color: #a8a8b0; min-height: 1.9rem; }
.arm-plate__bar { display: block; height: 3px; border-radius: 2px; margin: .3rem 0 .1rem; background: linear-gradient(90deg, var(--arm-pan), var(--arm-tilt)) no-repeat; background-size: calc(var(--w, 1) * 100%) 100%; background-color: rgba(255, 255, 255, .06); }
.arm-plate__facts { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font: 500 .64rem/1.5 var(--arm-mono); letter-spacing: .04em; color: var(--arm-bone); font-variant-numeric: tabular-nums; }
.arm-plate__facts span:last-child { color: var(--arm-steel); }
.arm-plate__file { font: 400 .6rem/1.4 var(--arm-mono); color: var(--arm-steel); word-break: break-all; margin-top: auto; padding-top: .3rem; border-top: 1px dashed var(--arm-hairline); }
.md-typeset .arm-plate:hover .arm-plate__file { color: var(--arm-tilt); }
@media (prefers-reduced-motion: reduce) { .md-typeset .arm-plate { transition: none; } .md-typeset .arm-plate:hover { transform: none; } }

/* glossary terms + their tooltip (pymdownx abbr + Material content.tooltips). The term keeps the body face but gets the
   tilt-amber dotted rule; the tooltip is a small bordered card in the sans face at reading size, not Material's bold micro type */
.md-typeset abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--arm-tilt); padding-bottom: 1px; cursor: help; outline: none; transition: color var(--arm-t) var(--arm-ease), border-color var(--arm-t) var(--arm-ease); }
.md-typeset abbr[title]:hover, .md-typeset abbr[title]:focus-visible { color: var(--arm-tilt); border-bottom-style: solid; }
.md-typeset abbr[title]:focus-visible { outline: 2px solid var(--arm-tilt); outline-offset: 3px; border-radius: 2px; }
[role="tooltip"] > .md-tooltip2__inner { font: 400 .66rem/1.5 var(--md-text-font-family); letter-spacing: 0; color: var(--arm-bone); background: #0d0d10; border: 1px solid var(--arm-hairline); border-left: 3px solid var(--arm-tilt); border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); padding: .5rem .75rem .5rem .7rem; max-width: min(22rem, calc(100vw - 1.6rem)); user-select: text; -webkit-user-select: text; }
[role="tooltip"] > .md-tooltip2__inner::before { content: "term"; display: block; font: 600 .55rem/1 var(--arm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--arm-steel); margin-bottom: .3rem; }
.md-tooltip2--top[role="tooltip"]::before { border-top-color: #0d0d10; }
.md-tooltip2--bottom[role="tooltip"]::before { border-bottom-color: #0d0d10; }

/* "On this page": hairline down the list, a sliding pan->tilt marker on the section in view (design.js toc()), passed
   sections dim so the list reads as progress */
.md-sidebar--secondary .md-nav--secondary > .md-nav__list { position: relative; padding-left: .75rem; }
.md-sidebar--secondary .md-nav--secondary > .md-nav__list::before { content: ""; position: absolute; left: 0; top: .2rem; bottom: .2rem; width: 1px; background: var(--arm-hairline); }
.arm-toc-mark { position: absolute; left: -1px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--arm-pan), var(--arm-tilt)); opacity: 0; transition: top .32s var(--arm-ease), height .32s var(--arm-ease), opacity var(--arm-t) var(--arm-ease); pointer-events: none; }
.md-sidebar--secondary .md-nav__link--passed, .md-sidebar--secondary .md-nav__link--passed code { color: var(--arm-steel); }
.md-sidebar--secondary .md-nav__item .md-nav__link--active, .md-sidebar--secondary .md-nav__item .md-nav__link--active code { color: var(--arm-bone); }
@media (prefers-reduced-motion: reduce) { .arm-toc-mark { transition: opacity var(--arm-t) var(--arm-ease); } }

/* product screenshots in a browser frame (design.js shots()): same hairline frame as the 3D viewers, mono address */
.md-typeset figure.arm-shot { display: block; width: auto; max-width: 100%; margin: 1.4rem 0; border: 1px solid var(--arm-hairline); border-radius: 10px; overflow: hidden; background: #0d0d10; text-align: left; }
.arm-shot__bar { display: flex; align-items: center; gap: .3rem; height: 1.7rem; padding: 0 .7rem; border-bottom: 1px solid var(--arm-hairline); background: #111114; }
.arm-shot__bar i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.arm-shot__bar i:first-child { background: var(--arm-tilt); opacity: .8; }
.arm-shot__url { flex: 1; margin-left: .7rem; padding: .15rem .6rem; border-radius: 4px; background: rgba(255, 255, 255, .04); font: 500 .58rem/1.4 var(--arm-mono); letter-spacing: .04em; color: var(--arm-steel); text-align: center; }
.md-typeset figure.arm-shot img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
.md-typeset figure.arm-shot figcaption { margin: 0; padding: .5rem .8rem .6rem; font: 400 .62rem/1.5 var(--arm-mono); letter-spacing: .03em; color: var(--arm-steel); font-style: normal; max-width: none; text-align: left; border-top: 1px solid var(--arm-hairline); }

/* keyboard: every control we added shows the same amber ring (the chips had outline:none with only a border tint) */
.arm-3d__chip:focus-visible, .arm-hotspot:focus-visible, .arm-shot a:focus-visible { outline: 2px solid var(--arm-tilt) !important; outline-offset: 2px; }

/* proof GIFs (design.js proofs()): the shot frame with a label bar instead of an address */
.md-typeset figure.arm-proof { display: block; width: auto; max-width: 100%; margin: 1.4rem 0; border: 1px solid var(--arm-hairline); border-radius: 10px; overflow: hidden; background: #0d0d10; text-align: left; }
.arm-proof__bar { display: flex; align-items: baseline; gap: .6rem; padding: .4rem .8rem; border-bottom: 1px solid var(--arm-hairline); background: #111114; font: 500 .58rem/1.4 var(--arm-mono); letter-spacing: .06em; color: var(--arm-steel); }
.arm-proof__bar b { font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--arm-tilt); }
.arm-proof__bar span::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .4rem; border-radius: 50%; background: var(--arm-pan); vertical-align: middle; }
.md-typeset figure.arm-proof img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
.md-typeset figure.arm-proof figcaption { margin: 0; padding: .5rem .8rem .6rem; font: 400 .62rem/1.5 var(--arm-mono); letter-spacing: .03em; color: var(--arm-steel); font-style: normal; max-width: none; text-align: left; border-top: 1px solid var(--arm-hairline); }

/* 404 (overrides/404.html): the code as a quiet watermark, the five build steps as the way back in */
.arm-404 { max-width: 40rem; padding: 2rem 0 3rem; }
.arm-404__code { font: 600 .68rem/1 var(--arm-mono); letter-spacing: .18em; color: var(--arm-steel); margin: 0 0 .6rem; }
.arm-404__code::after { content: ""; display: block; width: 2.2rem; height: 2px; margin-top: .6rem; background: linear-gradient(90deg, var(--arm-pan), var(--arm-tilt)); }
.arm-404 h1 { margin: 0 0 .5rem; }
.arm-404__lead { color: var(--md-default-fg-color--light); margin: 0 0 1.6rem; }
.arm-404__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.arm-404__steps li { margin: 0; }
.arm-404__steps a { display: grid; grid-template-columns: 2.2rem 8rem 1fr; gap: .6rem; align-items: baseline; padding: .55rem .7rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .3rem; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.arm-404__steps a:hover { border-color: var(--arm-tilt); background: color-mix(in srgb, var(--arm-tilt) 6%, transparent); }
.arm-404__steps b { font: 600 .68rem/1.6 var(--arm-mono); color: var(--arm-tilt); }
.arm-404__steps span { font-weight: 600; }
.arm-404__steps i { font-style: normal; font-size: .72rem; color: var(--md-default-fg-color--light); }
.arm-404__home { margin: 1.6rem 0 0; font: 500 .68rem/1.6 var(--arm-mono); letter-spacing: .06em; }
@media (max-width: 44em) { .arm-404__steps a { grid-template-columns: 2rem 1fr; } .arm-404__steps i { grid-column: 2; } }

/* ---- paper. Someone prints "How it goes together" and takes it to the bench: night palette off, ink on white,
        the 3D frames collapse to their label, external links spell out their URL, nothing else of the chrome. ---- */
@media print {
  :root, [data-md-color-scheme="slate"] {
    --arm-bg: #fff; --arm-bone: #111; --arm-steel: #555; --arm-hairline: rgba(0, 0, 0, .3);
    --arm-pan: #2b47b8; --arm-tilt: #7a4f00; --arm-pan-dim: rgba(43, 71, 184, .12); --arm-tilt-dim: rgba(122, 79, 0, .12);
    --md-default-bg-color: #fff; --md-default-fg-color: #111; --md-default-fg-color--light: #333;
    --md-default-fg-color--lighter: #666; --md-default-fg-color--lightest: #e6e6e6;
    --md-typeset-color: #111; --md-typeset-a-color: #111; --md-code-bg-color: #f2f2f2; --md-code-fg-color: #111;
    --md-typeset-kbd-color: #eee; --md-typeset-kbd-accent-color: #fff; --md-typeset-kbd-border-color: #bbb;
    --md-typeset-table-color: rgba(0, 0, 0, .12); --md-typeset-mark-color: rgba(122, 79, 0, .2);
  }
  body, .md-main, .md-content, .md-typeset .highlight, .md-typeset pre > code { background: #fff !important; color: #111; }
  .md-typeset { color: #111; font-size: .72rem; }
  .md-typeset .highlight, .md-typeset pre > code { border: 1px solid #ccc; }
  .arm-opener, .arm-opener * { color: #333 !important; }
  .md-typeset .arm-3d { background: none; border: 1px dashed #999; break-inside: avoid; }
  .md-typeset .arm-3d model-viewer, .md-typeset > model-viewer, .md-typeset > p > model-viewer, iframe.viewer { display: none !important; }
  .arm-3d__bar, .arm-3d__label { background: none; color: #333 !important; }
  .arm-3d__label::before { display: none; }
  .arm-3d__hint { display: none; }
  .arm-3d__bar::after { content: "turn it in 3D on the web page"; font: 500 .62rem/1.4 var(--arm-mono); color: #666; margin-left: auto; }
  .arm-next, .arm-pip-bar, .md-clipboard, .md-top, .md-header, .md-tabs, .md-sidebar, .md-footer, .arm-foot, .md-content__button { display: none !important; }
  .md-typeset a { color: #111 !important; text-decoration: underline; }
  .md-typeset .headerlink { display: none; }
  .md-typeset a[href^="http"]:not([href*="cagataycali.github.io"]):not(.headerlink)::after { content: " (" attr(href) ")"; font: .8em/1 var(--arm-mono); color: #555; word-break: break-all; }
  .md-typeset h2, .md-typeset h3 { break-after: avoid; }
  .md-typeset pre, .md-typeset table, .md-typeset figure, .md-typeset img { break-inside: avoid; }
  .md-typeset table:not([class]) th { color: #111; }
}