/* OpenTac site theme.
 *
 * Colours come from the hardware: dark coverlay/ink for the chrome, the amber
 * of polyimide flex and printed TPU bumps as the one accent, copper for links.
 * Plain white pages in light mode, a cool near-black in dark mode.
 */

/* ---------- colour tokens ---------- */

:root {
  --ot-ink: #161c23;            /* header, hero, dark bands */
  --ot-ink-2: #1f2730;
  --ot-amber: #e08a2c;          /* polyimide / TPU */
  --ot-amber-soft: #f7c98c;
  --ot-on-dark: #eef0f2;
  --ot-on-dark-muted: #aab3bd;
  --ot-radius: .35rem;
  --ot-media-bg: #0b0e12;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ot-ink);
  --md-primary-fg-color--light: var(--ot-ink-2);
  --md-primary-fg-color--dark: #0e1217;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, .72);
  --md-accent-fg-color: #c96f17;
  --md-accent-fg-color--transparent: rgba(201, 111, 23, .1);
  --md-accent-bg-color: #ffffff;
  --md-typeset-a-color: #a5530f;     /* 5.5:1 on white */
  --md-footer-bg-color: var(--ot-ink);
  --md-footer-bg-color--dark: #0e1217;
  --ot-muted: #5b6570;
  --ot-rule: #e3e6ea;
  --ot-paper: transparent;           /* figure background */
}

[data-md-color-scheme="slate"] {
  --md-hue: 212;
  --md-default-bg-color: #12161b;
  --md-primary-fg-color: #0d1014;
  --md-primary-fg-color--light: #1a2028;
  --md-primary-fg-color--dark: #090b0e;
  --md-primary-bg-color: #eef0f2;
  --md-primary-bg-color--light: rgba(238, 240, 242, .7);
  --md-accent-fg-color: #f5b46e;
  --md-accent-fg-color--transparent: rgba(245, 180, 110, .12);
  --md-typeset-a-color: #f0a55a;
  --md-code-bg-color: #1a2027;
  --md-footer-bg-color: #0d1014;
  --md-footer-bg-color--dark: #090b0e;
  --ot-muted: #9aa4ae;
  --ot-rule: #262d36;
  --ot-paper: #ffffff;               /* paper figures stay on white */
}

/* ---------- type ---------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--md-default-fg-color);
}
.md-typeset h1 { font-size: 1.9em; }
.md-typeset h2 { font-size: 1.4em; }
.md-typeset h3 { font-size: 1.12em; }
.md-header__title { font-weight: 600; }
.md-tabs__link { font-size: .72rem; }

/* ---------- figures (all pages) ---------- */

.md-typeset figure { max-width: 100%; }
.md-typeset figure img { border-radius: var(--ot-radius); }
/* Paper figures are drawn on white; in dark mode they sit on a white card.
   Photos and cut-out figures opt out with ot-fig--clear. */
[data-md-color-scheme="slate"] .md-typeset figure.ot-fig img {
  background: var(--ot-paper);
  padding: .5rem;
}
[data-md-color-scheme="slate"] .md-typeset figure.ot-fig--clear img {
  background: transparent;
  padding: 0;
}
.md-typeset figcaption {
  max-width: 42rem;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ot-muted);
  font-style: normal;
}
.md-typeset figure.ot-fig figcaption { text-align: left; }
.md-typeset figure.ot-fig { margin: 1.6em auto; }
/* A figure image that links to the full-size file (too small to read on a
   phone otherwise). */
.md-typeset figure a > img { cursor: zoom-in; }

/* photo grids (build pages) */
.md-typeset figure > br { display: none; }   /* md_in_html span mode adds one */
.md-typeset .ot-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin: 1em 0 1.6em;
}
.md-typeset .ot-photos--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-typeset .ot-photos--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-typeset .ot-photos.ot-photos--contain img { object-fit: contain; background: #fff; }
.md-typeset .ot-photos figure { margin: 0; }
.md-typeset .ot-photos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.md-typeset .ot-photos--wide img { aspect-ratio: 4 / 3; }
.md-typeset .ot-photos figcaption { font-size: .66rem; margin-top: .3em; text-align: left; }

/* ---------- media frames + loops ---------- */

.md-typeset .ot-media {
  margin: 0;
  border-radius: var(--ot-radius);
  overflow: hidden;
  background: var(--ot-media-bg);
  line-height: 0;
}
.md-typeset .ot-media video,
.md-typeset .ot-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.md-typeset .ot-media img { aspect-ratio: auto; }
/* A clip with a caption: <figure class="ot-clip"><div class="ot-media">...</div><figcaption> */
.md-typeset figure.ot-clip { margin: 0; text-align: left; }
.md-typeset figure.ot-clip figcaption {
  max-width: none;
  margin: .45em 0 0;
  font-size: .68rem;
  text-align: left;
}
.md-typeset .ot-media--board { background: transparent; }
.md-typeset .ot-media--board video { object-fit: contain; }

/* ---------- home: hero ---------- */

.ot-hero {
  background: var(--ot-ink);
  color: var(--ot-on-dark);
}
.ot-hero__inner {
  padding: 2.6rem .8rem 1.8rem;
  text-align: center;
}
.ot-hero__name {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}
.ot-hero__title {
  margin: .5rem auto 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ot-amber-soft);
  max-width: 34rem;
}
.ot-hero__authors {
  margin: .9rem auto 0;
  max-width: 44rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ot-on-dark);
}
.ot-hero__affil {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem 1.1rem;
  margin: .3rem auto 0;
  max-width: 44rem;
  font-size: .84rem;
  color: var(--ot-on-dark-muted);
}
.ot-author { white-space: nowrap; }
.ot-contact__person { display: inline-block; max-width: 100%; }
.ot-contact__person a { white-space: nowrap; }
.ot-hero__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .3rem .85rem;
  margin: .65rem auto 0;
  max-width: 56rem;
  font-size: .63rem;
  line-height: 1.6;
  color: var(--ot-on-dark);
}
.ot-hero__contact strong { font-weight: 700; }
.ot-hero__contact a { color: inherit; text-decoration: none; }
.ot-hero__contact a:hover { text-decoration: underline; }
.ot-hero__contact .ot-hero__email {
  color: var(--ot-amber-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: .15em;
}
.ot-hero__contact .ot-hero__email:hover { color: #fff; }
.ot-hero__contact a:focus-visible {
  outline: 2px solid var(--ot-amber-soft);
  outline-offset: 3px;
}
.ot-hero__venue {
  margin: .65rem auto 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ot-amber-soft);
}
.ot-hero__authors a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: .15em;
}
.ot-hero__authors a:hover { color: var(--ot-amber-soft); }
.ot-hero__authors sup,
.ot-hero__affil sup { font-size: .7em; margin-left: .05em; }
.ot-hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem 1rem;
  margin: .6rem auto 0;
}
.ot-hero__logos a { display: block; padding: .25rem; }
.ot-hero__logos a:focus-visible { outline: 2px solid var(--ot-amber-soft); outline-offset: 4px; }
.ot-hero__logo { display: block; height: auto; }
.ot-hero__logo--jhu { width: clamp(190px, 55vw, 240px); }
.ot-hero__logo--mit { width: 76px; }
.ot-hero__lede {
  margin: .9rem auto 0;
  max-width: 32rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ot-on-dark-muted);
}
.ot-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.3rem;
}
.ot-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: cover;
  object-position: 50% 62%;
}

/* buttons: plain, one filled */
.ot-btn,
.md-typeset a.ot-btn {
  display: inline-block;
  padding: .5em 1.15em;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 2em;
  color: var(--ot-on-dark);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 125ms, border-color 125ms, color 125ms;
}
.ot-btn:hover,
.ot-btn:focus-visible,
.md-typeset a.ot-btn:hover {
  border-color: var(--ot-amber);
  color: #fff;
}
.ot-btn--primary,
.md-typeset a.ot-btn--primary {
  background: var(--ot-amber);
  border-color: var(--ot-amber);
  color: #17110a;
}
.ot-btn--primary:hover,
.md-typeset a.ot-btn--primary:hover {
  background: #eea24c;
  border-color: #eea24c;
  color: #17110a;
}
.md-typeset a.ot-btn--dark {
  border-color: var(--ot-rule);
  color: var(--md-default-fg-color);
}
.md-typeset a.ot-btn--dark:hover { border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); }

/* ---------- home: story ---------- */

/* The home page uses the full grid width (nav and toc hidden). */
.md-typeset .ot-section-title { margin-top: 0; }

.md-typeset .ot-video {
  max-width: 46rem;
  margin: 1.2rem auto 3rem;
  text-align: center;
}
.md-typeset .ot-video__lede {
  max-width: 36rem;
  margin: 0 auto 1.2rem;
  color: var(--ot-muted);
}
.md-typeset .ot-media--video video { object-fit: contain; }

.md-typeset .ot-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.4rem;
  align-items: center;
  margin: 3.6rem 0;
}
.md-typeset .ot-story--flip > .ot-story__text { order: 2; }
.md-typeset .ot-story__text h2 { margin-top: 0; }
.md-typeset .ot-story__text p:last-child { margin-bottom: 0; }

.md-typeset a.ot-more {
  display: inline-block;
  margin-right: 1.2em;
  font-weight: 600;
  text-decoration: none;
}
.md-typeset a.ot-more::after { content: " \2192"; }
.md-typeset a.ot-more:hover { text-decoration: underline; }

.md-typeset .ot-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}

/* Home: real-sensor clips and the key results, right after the animation. */
.md-typeset .ot-evidence { margin: 1.2rem 0 3.6rem; }
.md-typeset .ot-evidence > .ot-section-title { text-align: center; margin-bottom: 1.2rem; }
.md-typeset .ot-evidence .ot-strip { margin: 0 0 1.6rem; }
.md-typeset .ot-keys { max-width: 46rem; margin: 0 auto; }
.md-typeset .ot-keys table:not([class]) { font-size: .72rem; }
.md-typeset .ot-keys table:not([class]) td:first-child { font-weight: 600; white-space: nowrap; }
.md-typeset .ot-keys table:not([class]) th,
.md-typeset .ot-keys table:not([class]) td { padding: .6em .9em; }
.md-typeset .ot-keys .ot-more { margin-top: .2em; }

/* A row of clips with different shapes at one height: each item's flex-grow
   is its aspect ratio, so widths come out proportional and heights equal. */
.md-typeset .ot-strip {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin: -1.6rem 0 3.6rem;
}
.md-typeset .ot-strip__item { margin: 0; min-width: 0; }
.md-typeset .ot-strip__item--wide { flex: 1.7778 1 0; }
.md-typeset .ot-strip__item--tall { flex: .5624 1 0; }
.md-typeset .ot-strip video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ot-media-bg);
  border-radius: var(--ot-radius);
  object-fit: cover;
}
.md-typeset .ot-strip__item--wide video { aspect-ratio: 16 / 9; }
.md-typeset .ot-strip__item--tall video { aspect-ratio: 478 / 850; }
.md-typeset .ot-strip figcaption {
  margin: .45em 0 0;
  text-align: left;
  font-size: .68rem;
}
/* Four clips: the two wide ones stacked on the left, the two tall ones beside
   them, each as tall as the stack. */
.md-typeset .ot-strip--stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .66fr) minmax(0, .66fr);
  gap: .8rem;
  align-items: start;
}
/* figures are fit-content by default: take the whole cell before the clip loads */
.md-typeset .ot-strip--stack > .ot-strip__item { width: 100%; }
.md-typeset .ot-strip--stack > .ot-strip__item--wide { grid-column: 1; }
.md-typeset .ot-strip--stack > .ot-strip__item--tall { grid-row: 1 / span 2; grid-column: 2; }
.md-typeset .ot-strip--stack > .ot-strip__item--tall ~ .ot-strip__item--tall { grid-column: 3; }

.md-typeset figure.ot-wide { margin: 0 0 3.6rem; }
.md-typeset figure.ot-wide img { width: 100%; max-width: 54rem; }
.md-typeset figure.ot-wide figcaption { margin-left: auto; margin-right: auto; text-align: center; }

.md-typeset .ot-robots { margin: 3.6rem 0; }
.md-typeset .ot-robots__text { max-width: 40rem; }
.md-typeset .ot-robots__text h2 { margin-top: 0; }
.md-typeset .ot-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 1.2em 0 2em;
}
.md-typeset .ot-grid2--narrow { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-left: auto; margin-right: auto; }
.md-typeset .ot-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.4rem;
}
/* Wide comparison clips, one per row at the full width. A clip whose shape
   is not 16:9 sets aspect-ratio on its <video>. */
.md-typeset .ot-stack {
  display: grid;
  gap: 1.2rem;
  margin: 1.4rem 0 2em;
}
.md-typeset .ot-stack > .ot-clip,
.md-typeset .ot-grid2 > .ot-clip,
.md-typeset .ot-grid3 > .ot-clip { width: 100%; }
.md-typeset .ot-stack + .ot-grid3 { margin-top: 0; }
/* A portrait clip in a grid takes two rows. */
.md-typeset .ot-grid2 > .ot-clip--tall2,
.md-typeset .ot-grid3 > .ot-clip--tall2 { grid-row: span 2; }

.md-typeset .ot-start {
  margin: 4rem 0 1rem;
  padding: 1.6rem 1.8rem 1.8rem;
  border: 1px solid var(--ot-rule);
  border-radius: calc(var(--ot-radius) * 2);
}
.md-typeset .ot-start h2 { margin-top: 0; }
.md-typeset .ot-start__buttons { justify-content: flex-start; }

/* ---------- demos (results page): narrow clips, easy to extend ---------- */

.md-typeset .ot-demos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.2rem;
  margin: 1.2em 0 2em;
}
.md-typeset .ot-demo { margin: 0; flex: 0 0 auto; width: 11.5rem; }
.md-typeset .ot-demo--wide { width: 32rem; max-width: 100%; }
.md-typeset .ot-demo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 478 / 850;
  object-fit: cover;
  background: var(--ot-media-bg);
  border-radius: var(--ot-radius);
}
.md-typeset .ot-demo--wide video { aspect-ratio: 16 / 9; }
.md-typeset .ot-demo figcaption {
  margin: .5em 0 0;
  max-width: none;
  text-align: left;
  font-size: .7rem;
}
.md-typeset .ot-demo figcaption strong { color: var(--md-default-fg-color); }

/* ---------- hardware page ---------- */

.md-typeset .ot-features {
  counter-reset: ot-feature;
  list-style: none;
  margin-left: 0;
  padding: 0;
}
.md-typeset .ot-features > li {
  counter-increment: ot-feature;
  position: relative;
  margin: 0 0 1.4em;
  padding-left: 2.2em;
}
.md-typeset .ot-features > li::before {
  content: counter(ot-feature);
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--ot-amber);
  color: #17110a;
  font-weight: 700;
  font-size: .85em;
  line-height: 1.5em;
  text-align: center;
}
/* A feature's clip or picture sits under its text, across the text column. */
.md-typeset .ot-features figure.ot-clip,
.md-typeset .ot-features figure.ot-fig { margin: 1em 0 0; }
.md-typeset .ot-features figure.ot-fig { text-align: left; }
.md-typeset .ot-features figure.ot-fig img { max-width: min(100%, 18rem); }
.md-typeset .ot-media--4x3 video { aspect-ratio: 4 / 3; }
.md-typeset .ot-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.2em 0;
}
.md-typeset .ot-boards figure { margin: 0; }
.md-typeset .ot-boards img,
.md-typeset .ot-boards video {
  width: 100%;
  height: auto;
  border-radius: var(--ot-radius);
}

/* ---------- ready-to-order designs (design/examples.md, generated) ---------- */

/* One card per design: the board preview (its SVG, on white in both schemes,
   like the paper figures), then name, numbers and the download. The preview box
   has a fixed shape, so nothing moves as the lazy images arrive. */
.md-typeset .ot-designs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin: 1em 0 2em;
}
.md-typeset figure.ot-design {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  margin: 0;
  border: 1px solid var(--ot-rule);
  border-radius: var(--ot-radius);
  overflow: hidden;
  text-align: left;
}
.md-typeset .ot-design > a { display: block; line-height: 0; }
.md-typeset .ot-design img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: .4rem;
  background: #fff;
  border-radius: 0;
}
.md-typeset .ot-design figcaption {
  max-width: none;
  margin: 0;
  padding: .55em .7em .7em;
  border-top: 1px solid var(--ot-rule);
  font-size: .68rem;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}
.md-typeset .ot-design .ot-nowrap { white-space: nowrap; }
.md-typeset .ot-design figcaption strong {
  display: inline-block;
  margin-bottom: .15em;
  color: var(--md-default-fg-color);
  font-size: 1.08em;
  line-height: 1.35;
}

/* ---------- order the readout board: the file table (build/order-readout.md) ---------- */

/* The only table whose cells link into a board production folder. Without this,
   a phone breaks its file names letter by letter; with it, they stay whole and
   the table scrolls sideways in Material's table wrapper. */
.md-typeset table:not([class]):has(a[href*="/production"]) code {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* ---------- build overview: the steps table (build/index.md) ---------- */

.md-typeset .ot-steps table:not([class]) th:first-child,
.md-typeset .ot-steps table:not([class]) td:first-child { width: 1.6em; min-width: 0; padding-right: 0; }

/* ---------- pictures on the design, build and use pages ---------- */

/* Screenshots of OpenTac-CAD are dark; a hairline keeps them from merging
   into a dark page, and they skip the white card of the paper figures. */
.md-typeset figure.ot-screen img { border: 1px solid var(--ot-rule); }
/* A row of pictures that keep their own shape (screenshots, drawings), inside
   one figure with one caption; each picture may carry a one-word label. */
.md-typeset .ot-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  align-items: end;
  margin: 0 0 .4em;
}
.md-typeset .ot-shots--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-typeset .ot-shots figure { margin: 0; }
.md-typeset .ot-shots img { display: block; width: 100%; height: auto; }
.md-typeset .ot-shots figcaption { margin: .3em 0 0; font-size: .66rem; text-align: left; }
.md-typeset figure.ot-fig > .ot-shots + figcaption { margin-top: .4em; }
/* A tall, narrow figure beside the text it illustrates (centred on small screens). */
.md-typeset figure.ot-fig.ot-fig--aside { max-width: 12rem; }
@media screen and (min-width: 60em) {
  .md-typeset figure.ot-fig.ot-fig--aside { float: right; margin: .2em 0 1em 1.6em; }
  .md-typeset .ot-fig--aside ~ h2 { clear: both; }
}
/* Home, "Use it": the text and a screenshot of the start screen side by side. */
.md-typeset .ot-start__cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 1.6rem;
  align-items: start;
}
.md-typeset .ot-start__shot { margin: .4rem 0 0; }
.md-typeset .ot-start__shot img { width: 100%; height: auto; border: 1px solid var(--ot-rule); }
.md-typeset .ot-start__shot figcaption { margin: .45em 0 0; font-size: .68rem; text-align: left; }

/* ---------- small screens ---------- */

@media screen and (max-width: 59.984375em) {
  .md-typeset .ot-story {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2.6rem 0;
  }
  .md-typeset .ot-story--flip > .ot-story__text { order: 0; }
  .md-typeset .ot-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-typeset .ot-start__cols { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

@media screen and (max-width: 44.984375em) {
  .ot-hero__inner { padding: 1.8rem .8rem 1.4rem; }
  .ot-hero__name { font-size: 2.4rem; }
  .ot-hero__title { font-size: 1rem; }
  .ot-hero__photo { max-height: 15rem; }
  .md-typeset .ot-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -1rem;
  }
  .md-typeset .ot-strip__item--wide { grid-column: 1 / -1; }
  .md-typeset .ot-strip--stack > .ot-strip__item--wide { grid-column: 1 / -1; }
  .md-typeset .ot-strip--stack > .ot-strip__item--tall,
  .md-typeset .ot-strip--stack > .ot-strip__item--tall ~ .ot-strip__item--tall { grid-row: auto; grid-column: auto; }
  .md-typeset .ot-grid3 { grid-template-columns: 1fr; }
  .md-typeset .ot-grid2 { grid-template-columns: 1fr; }
  .md-typeset .ot-grid2 > .ot-clip--tall2,
  .md-typeset .ot-grid3 > .ot-clip--tall2 { grid-row: auto; }
  .md-typeset .ot-boards { grid-template-columns: 1fr; }
  /* on a phone a feature's clip also takes the column of the number badges */
  .md-typeset .ot-features figure.ot-clip { margin-left: -2.2em; width: calc(100% + 2.2em); max-width: none; }
  .md-typeset .ot-photos,
  .md-typeset .ot-photos--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-typeset .ot-demos { gap: .8rem; }
  .md-typeset .ot-demo { width: calc(50% - .4rem); }
  .md-typeset .ot-demo--wide { width: 100%; }
  .md-typeset .ot-start { padding: 1.1rem 1rem 1.3rem; }
  .md-typeset .ot-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .md-typeset .ot-shots:not(.ot-shots--three) { grid-template-columns: minmax(0, 1fr); }
  /* all four columns on a phone, so the page links are not off to the side */
  .md-typeset .ot-steps table:not([class]) { font-size: .62rem; }
  .md-typeset .ot-steps table:not([class]) th,
  .md-typeset .ot-steps table:not([class]) td { min-width: 0; padding: .65em .5em; }
}

@media screen and (max-width: 29.984375em) {
  .ot-hero .ot-hero__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }
  .ot-hero .ot-btn { text-align: center; padding-left: .6em; padding-right: .6em; }
  .md-typeset .ot-keys table:not([class]) td:first-child { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .ot-btn { transition: none; }
}

/* ---------- QR decoder page (docs/qr.md, docs/javascripts/qr.js) ---------- */

/* Rows blue, columns red, as in the design previews (docs/designs/files/*.svg). */
[data-md-color-scheme="default"] {
  --ot-qr-row: #2b46c0;
  --ot-qr-col: #c0352b;
  --ot-qr-cell: rgba(224, 138, 44, .2);
  --ot-qr-cell-edge: #c96f17;
  --ot-qr-hole: #8a949e;
  --ot-qr-unused: #c4cad0;
}
[data-md-color-scheme="slate"] {
  --ot-qr-row: #8ea4ff;
  --ot-qr-col: #ff8b7e;
  --ot-qr-cell: rgba(224, 138, 44, .2);
  --ot-qr-cell-edge: #e08a2c;
  --ot-qr-hole: #7d8791;
  --ot-qr-unused: #3d4651;
}
.md-typeset .ot-qr__status { font-weight: 600; }
.md-typeset .ot-qr__fig { width: 100%; margin: 1em 0 1.6em; }
.md-typeset .ot-qr__fig figcaption { max-width: 42rem; margin-left: auto; margin-right: auto; text-align: left; }
.md-typeset .ot-qr__drawing { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.md-typeset .ot-qr__drawing text {
  font-family: var(--md-text-font-family, sans-serif);
  font-size: 11px;
  fill: var(--md-default-fg-color);
}
.md-typeset .ot-qr__drawing .ot-qr-t-muted { fill: var(--ot-muted); }
.md-typeset .ot-qr__drawing .ot-qr-t-row { fill: var(--ot-qr-row); }
.md-typeset .ot-qr__drawing .ot-qr-t-col { fill: var(--ot-qr-col); }
.ot-qr-cell { fill: var(--ot-qr-cell); stroke: var(--ot-qr-cell-edge); }
.ot-qr-cell--big { stroke: var(--ot-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.ot-qr-hole { fill: none; stroke: var(--ot-qr-hole); stroke-dasharray: 2 2; }
.ot-qr-cu-row, .ot-qr-cu-col { fill: none; stroke-linecap: round; }
.ot-qr-cu-row { stroke: var(--ot-qr-row); }
.ot-qr-cu-col { stroke: var(--ot-qr-col); }
.ot-qr-via { fill: var(--ot-qr-row); }
.ot-qr-drill { fill: var(--md-default-bg-color); }
.ot-qr-origin, .ot-qr-dim, .ot-qr-scale { fill: none; stroke: var(--md-default-fg-color); stroke-width: 1; }
.ot-qr-cable { fill: none; stroke: var(--ot-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ot-qr-break { fill: none; stroke: var(--ot-muted); stroke-width: 1; }
.ot-qr-contact--row { fill: var(--ot-qr-row); }
.ot-qr-contact--col { fill: var(--ot-qr-col); }
.ot-qr-contact--none { fill: var(--ot-qr-unused); }
.md-typeset .ot-qr__tablewrap { overflow-x: auto; margin: 1em 0; }
.md-typeset table.ot-qr__table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: .7rem;
  line-height: 1.45;
}
.md-typeset .ot-qr__table th,
.md-typeset .ot-qr__table td {
  padding: .45em .6em;
  border-bottom: 1px solid var(--ot-rule);
  text-align: left;
  vertical-align: top;
}
.md-typeset .ot-qr__table th { font-weight: 600; }
.md-typeset .ot-qr__table td:first-child { width: 48%; }
.md-typeset .ot-qr__table tfoot td { border-bottom: 0; }
.md-typeset .ot-qr__table .ot-qr__num { text-align: right; font-variant-numeric: tabular-nums; }
.md-typeset .ot-qr__table td:nth-child(2) { overflow-wrap: anywhere; }
.md-typeset .ot-qr__table--lines { width: auto; min-width: 16rem; display: inline-table; margin: .6em 1.2em .6em 0; vertical-align: top; }
.md-typeset .ot-qr__table--lines td:first-child { width: auto; }
.md-typeset .ot-qr__meaning {
  display: block;
  margin-top: .15em;
  color: var(--ot-muted);
  font-size: .95em;
}
.md-typeset .ot-qr__details { margin: 1em 0; }
.md-typeset .ot-qr__error { color: var(--md-typeset-a-color); font-weight: 600; }
.md-typeset .ot-qr__form label { display: block; font-weight: 600; margin-bottom: .3em; }
.md-typeset .ot-qr__form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .5em .6em;
  font-family: var(--md-code-font-family);
  font-size: .8em;
  color: var(--md-code-fg-color);
  background: var(--md-code-bg-color);
  border: 1px solid var(--ot-rule);
  border-radius: var(--ot-radius);
  word-break: break-all;
}
.md-typeset .ot-qr__btn {
  display: inline-block;
  margin: .6em 0 0;
  padding: .5em 1.15em;
  border: 1px solid var(--ot-rule);
  border-radius: 2em;
  background: transparent;
  color: var(--md-default-fg-color);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
.md-typeset .ot-qr__btn:hover,
.md-typeset .ot-qr__btn:focus-visible { border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); }
.md-typeset .ot-qr__btn--primary,
.md-typeset .ot-qr__btn--primary:hover,
.md-typeset .ot-qr__btn--primary:focus-visible {
  background: var(--ot-amber);
  border-color: var(--ot-amber);
  color: #17110a;
}
.md-typeset .ot-qr__btn--primary:hover { background: #eea24c; border-color: #eea24c; }
.md-typeset .ot-qr pre code { word-break: break-all; white-space: pre-wrap; }