/* ==========================================================================
   MAKER NAME
   Written here and nowhere else. Every page shows it through
   <span class="maker"></span>, so changing this one line renames the site.
   ========================================================================== */
:root {
  --maker: "Berris.tools";
}
.maker::before { content: var(--maker); }

/* ==========================================================================
   NAME OF THE FRAME (the first part on the Parts shelf)
   A working name. Written here and nowhere else; pages show it through
   class="frame-name".
   ========================================================================== */
:root {
  --frame: "Deck frame";
}
.frame-name::before { content: var(--frame); }


/* ==========================================================================
   The look: the page is the front panel of a piece of gear.
   Light-grey powder coat with black silkscreen. The Dark key in the top row
   swaps it for a graphite panel with white silkscreen (site.js sets
   data-theme="dark" on <html> and remembers the choice). Keys are keys, pictures
   are screens set into the panel, group names are engraved legends.
   ========================================================================== */
:root {
  color-scheme: light;

  --panel: #d4d7d3;          /* the powder coat */
  --panel-raised: #e3e5e1;
  --ink: #131415;            /* the silkscreen */
  --ink-soft: #45484a;
  --hair: rgba(19, 20, 21, 0.24);
  --badge: #131415;          /* the name badge */
  --badge-ink: #e3e5e1;

  --key: #232427;            /* a key that is not selected */
  --key-edge: #3d4044;
  --key-label: #f1f2ef;
  --key-dim: #7b7e82;
  --key-drop: rgba(0, 0, 0, 0.42);
  --screen: #0d0d0f;         /* the glass the pictures are drawn on */
  --screen-edge: #000000;
  --slot: #1a1b1d;
  --slot-edge: #303236;
  --slot-ink: #6c6f73;

  --amber: #f2a33a;          /* a selected key */
  --amber-ink: #17120a;
  --green: #35d07f;          /* an indicator that is on */

  --display: Bahnschrift, "DIN Alternate", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --narrow: Bahnschrift, "DIN Condensed", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: Bahnschrift, "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "SF Mono", Menlo, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --panel: #2a2c2f;
  --panel-raised: #35383b;
  --ink: #eceee9;
  --ink-soft: #b4b7b4;
  --hair: rgba(236, 238, 233, 0.24);
  --badge: #e3e5e1;
  --badge-ink: #131415;

  --key: #161719;
  --key-edge: #484b50;
  --key-drop: rgba(0, 0, 0, 0.55);
  --screen: #0b0b0c;
  --screen-edge: #000000;
  --slot: #1c1d1f;
  --slot-edge: #3c3f43;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--text);
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

p { margin: 0 0 0.9em; }
h1, h2, h3 { margin: 0; text-wrap: balance; }

/* Links in running text. Keys, screens and picture links carry a class and are styled on their own. */
a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:not([class]):hover { background: var(--amber); color: var(--amber-ink); text-decoration-color: transparent; }
a:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }

code {
  font: 0.9em var(--mono);
  background: var(--panel-raised);
  border-radius: 4px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

.wrap { width: min(100% - 40px, 1120px); margin-inline: auto; }


/* ==========================================================================
   Keys
   .key            a dark key
   .key.is-on      the selected key: amber, as a selected feature key
   .key.is-dim     a key with nothing behind it yet
   .key.mode       the small square keys in the top row; .is-here lights the indicator
   .key.theme      the last key in that row: a moon while the panel is light, a sun while it is dark
   ========================================================================== */
.key {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px 12px;
  background: var(--key);
  color: var(--key-label);
  border: 1px solid var(--key-edge);
  border-radius: 10px;
  box-shadow: 0 2px 0 var(--key-drop);
  font: 600 1.02rem/1.1 var(--display);
  text-align: center;
  text-decoration: none;
}
a.key:hover, button.key:hover { border-color: var(--key-label); }
a.key:active, button.key:active { transform: translateY(2px); box-shadow: 0 0 0 var(--key-drop); }
.key { transition: transform 0.06s, box-shadow 0.06s, border-color 0.12s; }
.key.is-on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
a.key.is-on:hover { border-color: var(--amber-ink); }
.key.is-dim { color: var(--key-dim); cursor: default; }
:root[data-theme="dark"] .key.is-on { box-shadow: 0 2px 0 var(--key-drop), 0 0 26px -6px var(--amber); }

.key.mode { width: 62px; height: 62px; padding: 8px 3px 0; border-radius: 9px; font-size: 0.86rem; }
.key.mode::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #101112;
  border: 1px solid #55585d;
}
.key.mode.is-here::after { background: var(--green); border-color: var(--green); }
button.key { cursor: pointer; }
.key.theme { padding: 0; }
.key.theme::after { content: none; }              /* no indicator: the icon says which panel is on */
.key.theme svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.key.theme .sun, [data-theme="dark"] .key.theme .moon { display: none; }
[data-theme="dark"] .key.theme .sun { display: block; }

.keys { display: flex; flex-wrap: wrap; gap: 10px; }


/* ==========================================================================
   Top row and the rating plate at the bottom (the same on every page)
   ========================================================================== */
.top { padding-block: 18px 0; }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }

.badge {
  display: inline-block;
  padding: 11px 15px 9px;
  background: var(--badge);
  color: var(--badge-ink);
  border-radius: 3px;
  font: 700 1.06rem/1 var(--display);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}
.top-keys { display: flex; align-items: center; gap: 8px; }      /* the shelf keys and the theme key: one row, one spacing */
.modes { display: flex; gap: 8px; }

.rating { padding-block: 26px 44px; }
.cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1.5px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cells > * { background: var(--panel); padding: 14px 16px 15px; font-size: 0.93rem; line-height: 1.42; }
.tag {
  display: block;
  margin-bottom: 6px;
  font: 700 0.72rem/1.2 var(--display);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.cells .maker { font: 700 1rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }


/* ==========================================================================
   Headlines and the group legend
   ========================================================================== */
.intro { padding-block: clamp(22px, 4vw, 46px) clamp(30px, 4.4vw, 50px); }
.page-head .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 26px 60px;
  align-items: end;
}
.over { margin: 0 0 16px; font: 600 1rem/1.2 var(--display); }
.intro h1 {
  font: 700 clamp(2.8rem, 6.1vw, 4.5rem)/0.95 var(--narrow);
  font-stretch: 75%;
}
.intro .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 44px; align-items: center; }
.intro .lead { margin: 24px 0 16px; max-width: 40ch; }
.lead { margin: 0 0 16px; font-size: 1.14rem; line-height: 1.42; }
.sticker {
  display: inline-block;
  margin: 0;
  padding: 7px 11px 6px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.35;
}

.page-head { padding-block: clamp(24px, 4.6vw, 50px) clamp(26px, 4vw, 44px); }
.page-head h1 {
  margin-bottom: 14px;
  font: 700 clamp(2.4rem, 6.6vw, 4.5rem)/0.95 var(--narrow);
  font-stretch: 75%;
}
.page-head .lead { margin-bottom: 0; max-width: 54ch; }
.crumb { margin: 0 0 16px; font: 600 0.96rem/1.2 var(--display); }
.tagline { margin: 0 0 8px; max-width: 34ch; font: 600 1.3rem/1.25 var(--text); }
.app-name { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.app-name img { width: 76px; height: 76px; border-radius: 17px; }
.app-name h1 { margin: 0; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.buy span { font-size: 0.93rem; color: var(--ink-soft); }
.spec { padding: 16px 18px 17px; border: 1.5px solid var(--ink); border-radius: 6px; }

.group { padding-block: 6px 42px; scroll-margin-top: 12px; }
.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font: 700 1.22rem/1 var(--display);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.legend::before, .legend::after {      /* the bracket: a line through the legend with a tick at each end */
  content: "";
  height: 12px;
  border-top: 2px solid var(--ink);
  transform: translateY(6px);
}
.legend::before { flex: none; width: 26px; border-left: 2px solid var(--ink); }
.legend::after { flex: 1; min-width: 26px; border-right: 2px solid var(--ink); }
.legend small { font: 600 0.82rem/1 var(--display); letter-spacing: 0.12em; color: var(--ink-soft); }
.group-note { margin: -8px 0 22px; max-width: 66ch; }


/* ==========================================================================
   Pictures
   .screen   dark glass around a picture with a transparent background
   .plate    a picture that brings its own dark plate; .flat rounds a square one
   ========================================================================== */
.screen {
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(10px, 2.6vw, 28px);
  background: var(--screen);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--screen-edge);
}
.plate { margin: 0; }
.photo { display: block; margin: 0; }          /* a render with no background: the thing stands on the panel */
.photo img { margin-inline: auto; }
.photo.main img { max-width: min(100%, 780px); }
.zoom { display: block; width: fit-content; max-width: 100%; }
.plate.flat img { border-radius: 12px; }
.plate.flat .zoom, .plate.flat img { width: 100%; }
.caption { margin: 10px 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* A picture that can be turned (site.js). .spin-view holds the still picture; the script lays a canvas over it. */
.spin { margin: 0; }
.spin-view {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.spin-view:active { cursor: grabbing; }
.spin-view:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 6px; border-radius: 8px; }
.spin-view img { pointer-events: none; }
.spin-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spin-view.is-live img { visibility: hidden; }
html:not(.js) .needs-js { display: none; }      /* words and keys that only make sense while the script runs */

/* The stage: one turned picture with notes beside it. With the script running (and motion allowed) the section
   is tall and its contents stay in view, so scrolling through it turns the picture once round. */
.stage { padding-block: 8px 50px; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px 46px; align-items: center; }
.stage .spin-view img { width: auto; max-height: 60vh; max-height: 60svh; }
.marks { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.marks li { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 4px; transition: opacity 0.2s; }
.marks strong { display: block; font: 700 1.45rem/1.08 var(--narrow); font-stretch: 85%; }
.marks .led { margin-top: 0.5em; background: var(--green); transition: background-color 0.2s; }
.stage[data-step] .marks li { opacity: 0.45; }
.stage[data-step] .marks .led { background: #6d7073; }
.stage[data-step="0"] .marks li:nth-child(1), .stage[data-step="1"] .marks li:nth-child(2), .stage[data-step="2"] .marks li:nth-child(3) { opacity: 1; }
.stage[data-step="0"] .marks li:nth-child(1) .led, .stage[data-step="1"] .marks li:nth-child(2) .led, .stage[data-step="2"] .marks li:nth-child(3) .led { background: var(--green); }
.moves .stage { height: 280vh; padding-block: 0; }
.moves .stage-pin { position: sticky; top: 0; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding-block: 16px; }
p.hint { display: none; margin: 10px 0 14px; font-size: 0.88rem; color: var(--ink-soft); }
div + .caption { margin-top: 22px; }


/* ==========================================================================
   Label and value pairs, and the indicator lamp
   ========================================================================== */
.pairs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; align-items: baseline; margin: 0; }
.pairs dt {
  font: 700 0.72rem/1.3 var(--display);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pairs dd { margin: 0; line-height: 1.38; }

.led {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: #6d7073;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  vertical-align: 0.05em;
}
.led.amber { background: var(--amber); animation: standby 2.8s ease-in-out infinite; }   /* waiting: it breathes */
@keyframes standby { 50% { opacity: 0.35; } }
:root[data-theme="dark"] .led.amber { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 9px var(--amber); }
:root[data-theme="dark"] .led.green { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 9px var(--green); }
.led.green { background: var(--green); }


/* ==========================================================================
   Front page shelves
   ========================================================================== */
.entry-info {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px 60px;
  align-items: start;
  margin-top: 24px;
}
.entry-info h3 { margin-bottom: 10px; font: 700 clamp(1.7rem, 4vw, 2.5rem)/1 var(--narrow); font-stretch: 80%; }
.entry-info p { margin: 0; max-width: 52ch; }
.entry-info h3 a:not(:hover), .app-id h3 a:not(:hover) { text-decoration: none; }
.entry-info .pairs { margin-bottom: 20px; }

.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 44px; }
.module { display: grid; gap: 14px; align-content: start; }
.module p { margin: 0; max-width: 46ch; }
.module .screen { position: relative; aspect-ratio: 2 / 1; padding: 0; overflow: hidden; }
.module .screen img {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  max-width: none;
  object-fit: contain;
}
.module .screen.fill img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.module .photo { position: relative; aspect-ratio: 2 / 1; }
.module .photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.module .empty { align-self: center; }
.app-id { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.app-id img { width: 46px; height: 46px; border-radius: 10px; }
.app-id h3 { font: 700 2rem/1 var(--narrow); font-stretch: 80%; }

/* An empty shelf: dark slots with only a number, as a key for an object that is not in the show. */
.empty { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 20px 36px; align-items: center; }
.empty p { margin: 0 0 12px; max-width: 52ch; }
.slots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.slots li {
  position: relative;
  width: 78px;
  height: 78px;
  padding: 6px 9px;
  background: var(--slot);
  border: 1px solid var(--slot-edge);
  border-radius: 11px;
  color: var(--slot-ink);
  font-size: 0.86rem;
  line-height: 1.2;
}
.slots li::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--slot-edge);
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   The frame beside the headline stands on a small dark stage, lit from above with plain white light.
   -------------------------------------------------------------------------- */
.console { display: grid; gap: 10px; min-width: 0; }
/* The "coming soon" page: the name at the top, the two words in the middle, one line under them. */
.soon { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100svh; }
.soon-main { align-self: center; padding-block: 28px 96px; }      /* the extra below balances the name badge above */
.soon-word {
  display: flex;
  align-items: center;
  gap: 0.2em;
  margin: 0 0 22px;
  font: 700 clamp(3.3rem, 13.5vw, 9rem)/0.9 var(--narrow);
  font-stretch: 75%;
  text-transform: uppercase;
}
.soon-word .led { flex: none; width: 0.26em; height: 0.26em; margin: 0 0.04em 0.06em 0; }
.soon-main .lead { margin: 0; max-width: 34ch; }
.lit {
  position: relative;
  margin: 0;
  overflow: hidden;
  padding: 14px 14px 4px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--screen-edge);
  background:
    radial-gradient(58% 40% at 50% 80%, rgba(244, 244, 242, 0.34), transparent 74%),
    linear-gradient(180deg, #15161a 0%, #060607 100%);
}
/* --------------------------------------------------------------------------
   The tour on the Builds shelf: one screen, and a row of keys that pick which page of the profile it shows.
   Without the script the first page is shown and the keys are hidden.
   -------------------------------------------------------------------------- */
.tour { display: grid; gap: 10px; }
.tour-screen { display: block; padding: clamp(12px, 2.4vw, 26px); }
.tour figure { display: none; grid-template-columns: auto minmax(0, 1fr); gap: 16px clamp(20px, 4vw, 54px); align-items: center; margin: 0; }
.tour figure.is-on { display: grid; animation: arrive 0.22s ease-out; }
@keyframes arrive { from { opacity: 0.25; } }
.tour figcaption { color: #eceee9; }                    /* the screen is dark in both themes */
.tour small { font: 700 0.74rem/1.3 var(--display); letter-spacing: 0.15em; text-transform: uppercase; color: #9da19f; }
.tour-name { display: block; margin: 8px 0 12px; font: 700 clamp(2.2rem, 5.6vw, 3.9rem)/0.92 var(--narrow); font-stretch: 78%; }
.tour p { margin: 0; max-width: 30ch; font-size: 1.08rem; line-height: 1.4; color: #c0c3c0; }
.tour-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 132px)); gap: 8px; }
.key.pick { height: 54px; padding: 9px 4px 0; border-radius: 9px; font-size: 0.9rem; }
.key.pick::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #101112;
  border: 1px solid #55585d;
}
.key.pick[aria-pressed="true"]::after { background: var(--green); border-color: var(--green); }


/* ==========================================================================
   Guide and app pages
   ========================================================================== */

/* Signal path: who is plugged into what */
.path {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 104px minmax(0, 1fr) 156px minmax(0, 1fr);
  align-items: start;
}
.node { padding: 16px 18px 18px; border: 1.5px solid var(--ink); border-radius: 8px; }
.node h3 { margin-bottom: 12px; font: 700 0.8rem/1.2 var(--display); letter-spacing: 0.15em; text-transform: uppercase; }
.node p { margin: 0; font-size: 0.97rem; line-height: 1.42; }
.node b { display: block; font-weight: 700; }
.part { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start; }
.part + .part { margin-top: 16px; }
.part svg { width: 58px; height: auto; margin-top: 3px; }
.wire { position: relative; height: 1.5px; margin-top: 76px; background: var(--ink); }
.wire span {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: max-content;
  max-width: 134px;
  transform: translateX(-50%);
  font: 600 0.82rem/1.2 var(--display);
  text-align: center;
}
.wire::after, .wire.both::before {
  content: "";
  position: absolute;
  top: 50%;
  border: 5px solid transparent;
  transform: translateY(-50%);
}
.wire::after { right: 0; border-left: 9px solid var(--ink); border-right: 0; }
.wire.both::before { left: 0; border-right: 9px solid var(--ink); border-left: 0; }
.path-note { margin: 20px 0 0; max-width: 70ch; }

/* Steps: a number key and what to do */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  column-gap: 24px;
  padding-block: 18px;
  border-top: 1px solid var(--hair);
}
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  background: var(--key);
  color: var(--key-label);
  border: 1px solid var(--key-edge);
  border-radius: 9px;
  box-shadow: 0 2px 0 var(--key-drop);
  font: 700 1.7rem/1 var(--display);
}
.steps h3 { margin: 5px 0 3px; font: 700 1.45rem/1.08 var(--narrow); font-stretch: 85%; }
.steps p { margin: 0; max-width: 66ch; }
.steps + .keys, .plain + .keys, .path-note + .keys { margin-top: 22px; }

/* Pictures two across, each with its name and a line or two */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 30px; }
.shots figure { margin: 0; }
.shots .zoom { margin-inline: auto; }
/* .even: pictures of different shapes get the same room, so the lines under them start level */
.shots.even .zoom { display: grid; place-items: center; width: 100%; height: 330px; }
.shots.even img { width: auto; max-height: 330px; }
.shots h3 { margin: 14px 0 4px; font: 700 1.45rem/1.08 var(--narrow); font-stretch: 85%; }
.shots p { margin: 0; font-size: 0.99rem; }
.aside { align-self: start; padding: 16px 18px 17px; border: 1.5px solid var(--ink); border-radius: 6px; }
.aside h3 { margin-top: 0; }
.plain { margin: 0; max-width: 68ch; }
.plain + .plate, .plain + .shots { margin-top: 24px; }

/* A heading and a line or two beside each picture */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: 16px 46px;
  align-items: start;
  padding-block: 30px;
  border-top: 1px solid var(--hair);
}
.feature:first-child { border-top: 0; padding-top: 0; }
.feature h2 { margin-bottom: 10px; font: 700 1.7rem/1.04 var(--narrow); font-stretch: 85%; }
.feature p { margin: 0; }
.feature .plate, .feature .side { min-width: 0; }

.table-scroll { margin-top: 20px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
th, td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
thead th {
  border-bottom: 1.5px solid var(--ink);
  font: 700 0.72rem/1.3 var(--display);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
tbody th { font-weight: 600; }
.kit { table-layout: fixed; }                    /* a kit list: how many, what, a remark */
.kit thead th:first-child { width: 4.2em; }
.kit thead th:nth-child(2) { width: 42%; }
.kit td:first-child { font-variant-numeric: tabular-nums; }
.table-scroll + .caption { margin-top: 14px; }
.cells strong { display: block; margin-bottom: 3px; font: 700 1.06rem/1.2 var(--display); }


/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width: 900px) {
  .intro .wrap, .page-head .wrap, .entry-info { grid-template-columns: minmax(0, 1fr); }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .stage-grid { grid-template-columns: minmax(0, 1fr); }
  .stage-grid .spin { order: -1; }
  .stage .spin-view img { max-height: 44vh; max-height: 44svh; }
  .marks { gap: 12px; }
  .marks strong { font-size: 1.2rem; }
  .feature:not(.text-first) .plate { order: -1; }

  .path { grid-template-columns: minmax(0, 1fr); }
  .wire { width: 1.5px; height: 54px; margin-top: 0; margin-left: 30px; }
  .wire span { left: 18px; top: 50%; bottom: auto; max-width: none; transform: translateY(-50%); text-align: left; }
  .wire::after, .wire.both::before { top: auto; left: 50%; right: auto; border: 5px solid transparent; transform: translateX(-50%); }
  .wire::after { bottom: 0; border-top: 9px solid var(--ink); border-bottom: 0; }
  .wire.both::before { top: 0; border-bottom: 9px solid var(--ink); border-top: 0; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .wrap { width: min(100% - 32px, 1120px); }
  .modules, .shots { grid-template-columns: minmax(0, 1fr); }
  .legend { font-size: 1rem; letter-spacing: 0.12em; gap: 10px; }
  .legend::before { width: 16px; }
  .tour figure { grid-template-columns: minmax(0, 1fr); }
  .tour-keys { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .key.pick { height: 46px; font-size: 0.72rem; padding-inline: 1px; }
  .key.pick::after { top: 4px; right: 4px; width: 7px; height: 7px; }
  .shots.even .zoom { height: auto; }
  .empty { grid-template-columns: minmax(0, 1fr); }
  .slots li { width: 64px; height: 64px; }
  .key.mode { width: 52px; height: 52px; font-size: 0.78rem; }
  .top-keys { gap: 6px; }
  .key.theme svg { width: 22px; height: 22px; }
  .modes { gap: 6px; }
  .app-name img { width: 58px; height: 58px; border-radius: 13px; }
  .steps li { grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; }
  .steps li::before { width: 50px; height: 50px; font-size: 1.4rem; }
  table { font-size: 0.88rem; }
  th, td { padding-right: 10px; }
  p.hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .led.amber, .tour figure.is-on { animation: none; }
  .key { transition: none; }
}