/* strands-arm design system: two axes, two colours */
:root, [data-md-color-scheme="slate"] {
  --arm-pan: #6a8cff;           /* pan axis, servo 5 */
  --arm-tilt: #ffb000;          /* tilt axis, servo 6 */
  --arm-bone: #e6e1d6;          /* the printed PLA */
  --arm-steel: #8a8a93;         /* servo housings; 5.5:1 on every surface (#7a7a82 was 4.4:1 on the bars, under AA for 12 px labels) */
  --arm-pan-dim: rgba(106, 140, 255, .18);
  --arm-tilt-dim: rgba(255, 176, 0, .18);
  --arm-ease: cubic-bezier(.2, .8, .2, 1);   /* servo move */
  --arm-t: 260ms;
  --md-accent-fg-color: var(--arm-tilt);
  --md-accent-fg-color--transparent: var(--arm-tilt-dim);
  --md-typeset-a-color: var(--arm-tilt);
  --md-primary-fg-color--light: var(--arm-pan);
  --md-typeset-mark-color: var(--arm-tilt-dim);
  --md-typeset-kbd-color: #16161a;
  --md-typeset-kbd-accent-color: #1e1e24;
  --md-typeset-kbd-border-color: #2a2a31;
}

/* links: amber, blue on hover (the head turns) */
.md-typeset a { transition: color var(--arm-t) var(--arm-ease); }
.md-typeset a:hover, .md-typeset a:focus-visible { color: var(--arm-pan); }

/* headings: a short two-colour rule under h2 */
.md-typeset h1 { color: var(--arm-bone); letter-spacing: -.01em; }
.md-typeset h2 { color: var(--arm-bone); padding-bottom: .3rem; position: relative; }
.md-typeset h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 3.2rem;
  background: linear-gradient(90deg, var(--arm-pan) 0 50%, var(--arm-tilt) 50% 100%);
  border-radius: 1px;
}
.md-typeset h3 { color: var(--arm-bone); }

/* inline code: bone on black, hairline */
.md-typeset code { color: var(--arm-bone); border: 1px solid rgba(122,122,130,.22); border-radius: 4px; padding: .05em .35em; }
.md-typeset pre > code { border-radius: 8px; }
.md-typeset .highlight .k, .md-typeset .highlight .kn, .md-typeset .highlight .ow { color: var(--arm-pan); }
.md-typeset .highlight .s, .md-typeset .highlight .s1, .md-typeset .highlight .s2 { color: var(--arm-tilt); }
.md-typeset .highlight .mi, .md-typeset .highlight .mf { color: var(--arm-bone); }

/* admonitions: note/info/tip = pan blue, warning/danger = tilt amber */
.md-typeset .admonition, .md-typeset details {
  border-width: 0 0 0 3px; border-radius: 6px; background: #101013; box-shadow: none;
}
.md-typeset .admonition-title, .md-typeset summary { background: transparent !important; font-family: var(--arm-mono, monospace); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.md-typeset .admonition.note, .md-typeset .admonition.info, .md-typeset .admonition.tip, .md-typeset .admonition.abstract, .md-typeset details.note {
  border-color: var(--arm-pan);
}
.md-typeset .note > .admonition-title, .md-typeset .info > .admonition-title, .md-typeset .tip > .admonition-title, .md-typeset .abstract > .admonition-title { color: var(--arm-pan); }
.md-typeset .note > .admonition-title::before, .md-typeset .info > .admonition-title::before, .md-typeset .tip > .admonition-title::before, .md-typeset .abstract > .admonition-title::before { background-color: var(--arm-pan); }
.md-typeset .admonition.warning, .md-typeset .admonition.danger, .md-typeset .admonition.failure, .md-typeset .admonition.bug, .md-typeset details.warning {
  border-color: var(--arm-tilt);
}
.md-typeset .warning > .admonition-title, .md-typeset .danger > .admonition-title, .md-typeset .failure > .admonition-title, .md-typeset .bug > .admonition-title { color: var(--arm-tilt); }
.md-typeset .warning > .admonition-title::before, .md-typeset .danger > .admonition-title::before, .md-typeset .failure > .admonition-title::before, .md-typeset .bug > .admonition-title::before { background-color: var(--arm-tilt); }

/* nav: active page amber with a 2px amber bar, toc follow in pan blue */
.md-nav__link--active, .md-nav__link:hover { color: var(--arm-tilt); }
.md-nav__item .md-nav__link--active { border-left: 2px solid var(--arm-tilt); margin-left: -.6rem; padding-left: calc(.6rem - 2px); }
.md-nav--secondary .md-nav__link--active { color: var(--arm-pan); border-left-color: var(--arm-pan); }
.md-nav--secondary .md-nav__link:hover { color: var(--arm-pan); }
.md-nav__link { transition: color var(--arm-t) var(--arm-ease); }


/* selection and focus */
::selection { background: var(--arm-tilt-dim); color: var(--arm-bone); }
:focus-visible { outline: 2px solid var(--arm-pan); outline-offset: 2px; }

/* the ax swatches from the viewer, usable in prose: <span class="ax pan"></span> */
.md-typeset .ax { display: inline-block; width: .9em; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 .2em; }
.md-typeset .ax.pan { background: var(--arm-pan); }
.md-typeset .ax.tilt { background: var(--arm-tilt); }

@media (prefers-reduced-motion: reduce) {
  .md-typeset a, .md-nav__link, .md-typeset table:not([class]) tbody tr { transition: none; }
}

/* page enter (instant navigation only; the first paint is the browser's): the servo settles, 250 ms, 4 px rise.
   The head of the page arrives in four beats 40 ms apart, opener -> title -> promise -> first figure/paragraph; the
   rest of the article comes with the last beat. Nothing starts later than 120 ms, all is still by 370 ms. */
@keyframes arm-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.md-content.arm-enter .arm-opener,
.md-content.arm-enter .md-typeset > h1,
.md-content.arm-enter .md-typeset > h1 + p,
.md-content.arm-enter .md-typeset > h1 + p ~ * { animation: arm-enter 250ms var(--arm-ease) both; }
.md-content.arm-enter .md-typeset > h1 { animation-delay: 40ms; }
.md-content.arm-enter .md-typeset > h1 + p { animation-delay: 80ms; }
.md-content.arm-enter .md-typeset > h1 + p ~ * { animation-delay: 120ms; }

/* numbers: mono, tabular, amber while counting */
.md-typeset .n, .arm-strip b { font-family: var(--arm-mono, "JetBrains Mono", ui-monospace, monospace); font-variant-numeric: tabular-nums; font-weight: 600; }
.md-typeset .n { color: var(--arm-tilt); }
@media (prefers-reduced-motion: reduce) { .md-content.arm-enter .arm-opener, .md-content.arm-enter .md-typeset > h1, .md-content.arm-enter .md-typeset > h1 + p, .md-content.arm-enter .md-typeset > h1 + p ~ * { animation: none; } }

/* the mark: head tilts 10 deg on hover, a servo move */
.md-header__button.md-logo { padding: .3rem; }
.md-header__button.md-logo svg { width: 1.6rem; height: 1.6rem; fill: none; }
.arm-mark .tilt { transition: transform 320ms var(--arm-ease); transform-origin: 0 0; }
.md-logo:hover .arm-mark .tilt, .md-logo:focus-visible .arm-mark .tilt { transform: rotate(-10deg); }
@media (prefers-reduced-motion: reduce) { .arm-mark .tilt { transition: none; } }
.md-header__button.md-logo:hover { opacity: 1; }

/* type: one scale (1.25), a reading measure, numbers that line up */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.md-typeset { font-size: .82rem; line-height: 1.65; }
.md-typeset h1 { font-size: clamp(1.9em, 1.2em + 2vw, 2.6em); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; margin-bottom: 1.1em; text-wrap: balance; }
.md-typeset h2 { font-size: 1.5em; line-height: 1.2; letter-spacing: -.012em; font-weight: 600; margin-top: 2.2em; text-wrap: balance; }
.md-typeset h3 { font-size: 1.2em; line-height: 1.3; letter-spacing: -.008em; font-weight: 600; margin-top: 1.8em; }
.md-typeset h4 { font: 600 .72rem/1.4 var(--arm-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--arm-steel); margin-top: 1.6em; }
.md-typeset h5, .md-typeset h6 { font-family: var(--arm-mono, monospace); letter-spacing: .06em; }
/* measure: prose that sits directly in the article wraps at ~68ch; cards, tables, figures, the viewer stay full width */
.md-content__inner.md-typeset > p, .md-content__inner.md-typeset > ul, .md-content__inner.md-typeset > ol,
.md-content__inner.md-typeset > blockquote, .md-content__inner.md-typeset > .admonition, .md-content__inner.md-typeset > details { max-width: 68ch; }
.md-typeset p, .md-typeset li { text-wrap: pretty; }
.md-typeset li + li { margin-top: .2em; }
.md-typeset blockquote { border-left: 2px solid var(--arm-tilt); color: var(--arm-bone); font-size: 1.05em; line-height: 1.5; }
.md-typeset code { font-size: .84em; font-feature-settings: "calt" 0; }
.md-typeset table:not([class]) td, .md-typeset .n, .arm-num, .arm-strip b { font-variant-numeric: tabular-nums slashed-zero; }
.md-typeset hr { border-color: var(--arm-hairline); margin: 2.4em 0; }
.md-typeset a:not(.md-button) { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* sticky mover: the hero viewer docks bottom-right once scrolled past; the placeholder keeps the page from jumping */
iframe.viewer.hero.arm-pip { position: fixed; right: 1rem; bottom: 1rem; width: 22rem; height: 14rem; min-height: 0; margin: 0; z-index: 4;
  border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, .55), 0 0 0 1px var(--arm-hairline); animation: arm-pip-in var(--arm-t) var(--arm-ease); }
.arm-pip-bar { position: fixed; right: 1rem; bottom: calc(15rem + 2px); z-index: 5; display: none; gap: .3rem; }
.arm-pip-bar.on { display: flex; }
.arm-pip-bar button { font: 600 .62rem/1 var(--arm-mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--arm-bone);
  background: rgba(11, 11, 13, .85); border: 1px solid var(--arm-hairline); border-radius: 6px; padding: .35rem .5rem; cursor: pointer; backdrop-filter: blur(6px); }
.arm-pip-bar button:hover { border-color: var(--arm-tilt); color: var(--arm-tilt); }
@keyframes arm-pip-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { iframe.viewer.hero.arm-pip { animation: none; } }
@media (max-width: 60em) { iframe.viewer.hero.arm-pip { position: static; width: 100%; height: 60vh; box-shadow: none; } .arm-pip-bar { display: none !important; } }
.arm-pip-sent { height: 1px; margin-top: -1px; pointer-events: none; }