/* The Lead Engine Studio, round 2 (3 Nov 2026). Point of view: a machine. An aluminium casing (light, brushed, hairlines) with
   black instrument displays where the engine runs; vermilion is only ever the engine's signal light, the owner's colour only
   ever their own things. Hubot Sans (wide, for the machine's voice) and Martian Mono (readouts, tabular numerals), both OFL.
   Released for this page (Qasim, 3 Nov): the two-faces rule, flat/no-glow, no wires, restraint on scroll motion. */
@font-face { font-family: "Hubot Sans"; src: url("fonts/HubotSans.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/MartianMono.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }
/* the six type choices an owner can give their form (round 3); the same files go into the form, one choice at a time */
@font-face { font-family: "MB Instrument"; src: url("fonts/type/InstrumentSans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "MB Archivo"; src: url("fonts/type/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "MB Garamond"; src: url("fonts/type/EBGaramond.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "MB Bodoni"; src: url("fonts/type/BodoniModa.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "MB Besley"; src: url("fonts/type/Besley.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "MB Plex Mono"; src: url("fonts/type/PlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MB Plex Mono"; src: url("fonts/type/PlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "MB Plex Mono"; src: url("fonts/type/PlexMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --alu: #DCDDD8; --alu-hi: #E8E9E4; --alu-lo: #CBCCC6; --ink: #0C0C0B; --mut: #55564F; --faint: #62635D;
  --rule: rgba(12, 12, 11, .14); --rule-2: rgba(12, 12, 11, .3);
  --lcd: #0D0E0D; --lcd-2: #151615; --lcd-3: #1D1E1C; --lcd-ink: #ECECE6; --lcd-mut: #8E8F88; --lcd-faint: #5E5F59; --lcd-rule: rgba(236, 236, 230, .1); --lcd-rule-2: rgba(236, 236, 230, .2);
  --sig: #D84B32; --sig-dim: #3A2620;
  --ui: "Hubot Sans", "Helvetica Neue", Arial, sans-serif; --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --out: cubic-bezier(.23, 1, .32, 1); --io: cubic-bezier(.77, 0, .175, 1);
  --pad: clamp(16px, 2.2vw, 32px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--alu); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); font: 430 15px/1.5 var(--ui); font-stretch: 100%; -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100vh;
  background: var(--alu); }
h1, h2, h3, p, ol, ul, dl, dd, pre { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-stretch: 87.5%; font-size: 11px; font-weight: 450; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* LEDs: square, exact, lit only when something is happening */
.led { display: inline-block; flex: none; width: 7px; height: 7px; background: #A9AAA4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: background-color .18s, box-shadow .18s; }
.lcd .led { background: #2C2D2A; box-shadow: none; }
.led--on, .lcd .led.led--on, .is-on > .led, .is-on .st__hd .led, .lcd .is-on > .led { background: var(--sig); box-shadow: inset 0 1px 0 rgba(255, 210, 196, .55); }
.led--dim { background: #A9AAA4; }

/* the black instrument display: inset in the casing */
.lcd { background: var(--lcd); color: var(--lcd-ink); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 1px rgba(255, 255, 255, .5); }

/* keys: hardware buttons, black, with an indicator */
.key { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 3px; background: var(--ink); color: var(--alu-hi); font-weight: 560; font-size: 13.5px; text-decoration: none; border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 0 rgba(255, 255, 255, .6); transition: transform .16s var(--out), background-color .2s; }
.key:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .key:hover { background: #262624; } }

/* a restyle swaps on one frame: no cross-fade (round 3) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { display: none; }

/* the bar */
.bar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px var(--pad);
  background: var(--alu); border-bottom: 1px solid var(--rule); }
.bar__mark img { display: block; height: 21px; width: auto; }
.bar__unit { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 560; }
.bar__unit .mono { color: var(--mut); min-width: 13ch; }
.bar__sep { width: 1px; height: 14px; background: var(--rule-2); }
.bar .key { justify-self: end; }

main { padding: 0 var(--pad); }

/* chapter 2: the studio */
.studio { padding-top: clamp(80px, 12vh, 140px); }
.studio__hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); gap: 24px 48px; align-items: end; }
.studio__hd p { color: var(--mut); text-wrap: pretty; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4vh, 44px); border: 1px solid var(--rule-2); border-radius: 6px; overflow: hidden; background: var(--alu-hi); }
/* the three agents (round 4): a number, the business it is shown with, the name, one line, and a small exact drawing of
   what that agent produces (a range on a scale, a slot in a week, a run of nights) */
.mode { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: auto auto 1fr; gap: 4px 16px; align-content: start; text-align: left; padding: 14px 18px 16px; border: 0; border-left: 1px solid var(--rule-2); background: transparent; color: var(--ink); transition: background-color .2s, color .2s; }
.mode:first-child { border-left: 0; }
.mode__hd { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; color: var(--faint); margin-bottom: 14px; }
.mode__hd span + span { color: var(--mut); }
.mode b { grid-column: 1; font-size: clamp(19px, 1.6vw, 24px); font-weight: 720; font-stretch: 115%; letter-spacing: -.02em; line-height: 1.05; }
.mode__p { grid-column: 1; color: var(--mut); font-size: 13.5px; line-height: 1.4; max-width: 30ch; }
.mode__d { grid-column: 2; grid-row: 2 / span 2; align-self: end; width: 96px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1; color: var(--ink); }
.mode__d-on { fill: currentColor; stroke: none; }
.mode__d-off { fill: none; stroke: var(--rule-2); }
.mode__d-ln { stroke: var(--rule-2); }
.mode__d-t { fill: currentColor; stroke: none; font: 500 11px var(--mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .mode:hover { background: #F0F1EC; } }
.mode:active { background: var(--alu-lo); }
.mode[aria-checked="true"] { background: var(--lcd); color: var(--lcd-ink); }
.mode[aria-checked="true"] .mode__hd { color: var(--lcd-faint); }
.mode[aria-checked="true"] .mode__hd span + span { color: var(--lcd-mut); }
.mode[aria-checked="true"] .mode__p { color: #BDBEB7; }
.mode[aria-checked="true"] .mode__d { color: var(--lcd-ink); }
.mode[aria-checked="true"] .mode__d-off, .mode[aria-checked="true"] .mode__d-ln { stroke: var(--lcd-rule-2); }
.mode[aria-checked="true"] .mode__d-on { fill: var(--sig); }
.mode[aria-checked="true"] .led { background: var(--sig); box-shadow: inset 0 1px 0 rgba(255, 210, 196, .55); }

.rig { display: grid; grid-template-columns: 264px minmax(0, 1fr) 132px 352px; gap: 12px; margin-top: 12px; align-items: start; }
.ctl { position: sticky; top: 64px; max-height: calc(100vh - 76px); overflow-y: auto; scrollbar-width: thin; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--alu-hi); }
.ctl__grp { padding: 16px; }
.ctl__grp + .ctl__grp { border-top: 1px solid var(--rule-2); }
.ctl__t { font-weight: 680; font-size: 14px; font-stretch: 112%; margin-bottom: 12px; }
.fld { display: grid; gap: 6px; }
.fld span, .row__l { font-size: 12px; color: var(--mut); }
.fld input { width: 100%; padding: 10px 12px; background: #F6F6F2; border: 1px solid var(--rule-2); border-radius: 3px; font-size: 15px; transition: border-color .15s; }
.fld input:focus { outline: none; border-color: var(--ink); }
.logo { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.logo__prev { flex: none; width: 38px; height: 38px; border-radius: 3px; border: 1px dashed var(--rule-2); display: grid; place-items: center; overflow: hidden; background: #F6F6F2; }
.logo__prev img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.logo__up { position: relative; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: 3px; font-size: 12.5px; font-weight: 560; cursor: pointer; background: #F6F6F2; transition: border-color .15s, transform .16s var(--out); }
.logo__up:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .logo__up:hover { border-color: var(--ink); } }
.logo__up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.logo__up:focus-within { outline: 2px solid var(--sig); outline-offset: 3px; }
.logo__x { border: 0; background: none; color: var(--mut); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
.presets button { display: grid; gap: 6px; justify-items: center; padding: 6px 4px 6px; border-radius: 3px; border: 1px solid var(--rule-2); background: #F6F6F2; color: var(--mut); font-size: 11.5px; transition: border-color .15s, color .15s, transform .16s var(--out); }
.presets button:active { transform: scale(.97); }
.presets button[aria-checked="true"] { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pv { position: relative; display: block; width: 100%; height: 32px; border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pv b, .pv s, .pv u { position: absolute; left: 6px; right: 6px; display: block; text-decoration: none; }
.pv b { top: 6px; height: 4px; width: 55%; border-radius: 1px; }
.pv s { top: 13px; height: 7px; }
.pv u { bottom: 5px; height: 6px; width: 40%; }
.pv--clean { background: #fff; } .pv--clean b { background: #17181B; } .pv--clean s { border: 1px solid #c9ccd2; border-radius: 2px; } .pv--clean u { background: #1E40AF; border-radius: 2px; }
.pv--editorial { background: #F7F1E6; } .pv--editorial b { background: #221C15; height: 5px; } .pv--editorial s { border-bottom: 1px solid #8a7f70; } .pv--editorial u { border: 1px solid #111; }
.pv--bold { background: #000; } .pv--bold b { background: #fff; height: 6px; } .pv--bold s { background: #222; border-radius: 3px; } .pv--bold u { background: #C9432D; border-radius: 6px; }
.pv--soft { background: #EEF2F8; } .pv--soft b { background: #141B2D; } .pv--soft s { background: #dfe5f0; border-radius: 3px; } .pv--soft u { background: #ddd3fb; border-radius: 6px; }
.row { display: grid; gap: 7px; align-content: start; }
.row + .row { margin-top: 14px; }
.sw { display: flex; flex-wrap: wrap; gap: 5px; }
.sw button, .sw__own { position: relative; width: 23px; height: 23px; border-radius: 3px; padding: 0; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: transform .16s var(--out); }
.sw button:active, .sw__own:active { transform: scale(.92); }
.sw button[aria-checked="true"], .sw__own.is-on { box-shadow: 0 0 0 2px var(--alu-hi), 0 0 0 3.5px var(--ink); }
.sw__own { --c: conic-gradient(#f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e); background: var(--c); cursor: pointer; overflow: hidden; }
.sw__own input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sw__own:focus-within { outline: 2px solid var(--sig); outline-offset: 3px; }
.tones { display: flex; gap: 6px; }
.tones button { width: 32px; height: 24px; border-radius: 3px; padding: 0; background: var(--t); border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); transition: transform .16s var(--out); }
.tones button:active { transform: scale(.94); }
.tones button[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--alu-hi), 0 0 0 3.5px var(--ink); }
/* segmented switches: a recessed track, the chosen key raised */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; gap: 2px; background: var(--alu-lo); border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }
.seg button { padding: 7px 4px; border: 0; border-radius: 3px; background: transparent; color: var(--mut); font-size: 12.5px; font-weight: 520; transition: color .15s, background-color .15s, transform .16s var(--out); }
.seg button:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .seg button:hover { color: var(--ink); } }
.seg button[aria-pressed="true"] { background: #FAFAF7; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(0, 0, 0, .06); }
/* type: six tiles, each name set in its own face once the controls are near (so the files load only then) */
.faces { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 0; background: none; box-shadow: none; }
.faces .face { display: grid; gap: 4px; justify-items: start; align-content: space-between; min-height: 58px; padding: 9px 10px 8px; text-align: left;
  border: 1px solid var(--rule-2); border-radius: 3px; background: #F6F6F2; color: var(--ink); }
.face b { font-size: 19px; line-height: 1; font-weight: 600; letter-spacing: -.01em; }
.face small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 450 11px/1.25 var(--mono); font-stretch: 75%; letter-spacing: -.01em; color: var(--mut); }
.faces .face[aria-pressed="true"] { background: var(--lcd); color: var(--lcd-ink); border-color: #000; box-shadow: none; }
.face[aria-pressed="true"] small { color: var(--lcd-mut); }
.ctl.is-seen .ff-modern b { font-family: "MB Instrument", var(--ui); font-weight: 600; letter-spacing: -.015em; }
.ctl.is-seen .ff-wide b { font-family: "MB Archivo", var(--ui); font-stretch: 125%; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.ctl.is-seen .ff-classic b { font-family: "MB Garamond", Georgia, serif; font-weight: 500; font-size: 22px; letter-spacing: 0; }
.ctl.is-seen .ff-elegant b { font-family: "MB Bodoni", Georgia, serif; font-weight: 500; font-size: 21px; letter-spacing: 0; }
.ctl.is-seen .ff-warm b { font-family: "MB Besley", Georgia, serif; font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.ctl.is-seen .ff-technical b { font-family: "MB Plex Mono", var(--mono); font-weight: 500; font-size: 15px; letter-spacing: -.02em; }
.seg--sm { display: inline-grid; }
.seg--sm button { padding: 5px 12px; font-size: 12px; }

/* bays */
.bay { border: 1px solid var(--rule-2); border-radius: 6px; background: var(--alu-hi); padding: 10px; }
.bay__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 10px; }
.bay__t { display: inline-flex; align-items: center; gap: 8px; font-weight: 680; font-size: 14px; font-stretch: 112%; }

.dev { margin: 0 auto; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 18px 40px -24px rgba(0, 0, 0, .45); max-width: 100%; transition: transform .25s var(--out); }
.dev__chrome { display: flex; align-items: center; height: 34px; padding: 0 10px; background: #EDEEEA; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.url { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; padding: 3px 14px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); color: var(--mut); font: 450 11.5px var(--mono); font-stretch: 87.5%; }
.url i { width: 6px; height: 8px; border: 1.5px solid var(--faint); border-radius: 1px; }
.dev[data-device="mobile"] { max-width: 390px; border-radius: 40px; box-shadow: 0 0 0 9px var(--ink), 0 0 0 10px #000, 0 24px 50px -26px rgba(0, 0, 0, .6); margin: 12px auto; }
.dev[data-device="mobile"] .dev__chrome { display: none; }
.dev.is-swap { transform: scale(.985); }

/* the sample website around the form (round 3): a believable small-business page, in the owner's type, colour, buttons
   and corners; its layout follows the chosen type (editorial faces centre, Wide goes big, Technical shows its rules) */
.site { --s-pad: clamp(18px, 3vw, 36px); background: var(--s-bg, #fff); color: var(--s-ink, #17181B); font-family: var(--s-font, system-ui); }
.site__bar { display: flex; justify-content: space-between; gap: 12px; padding: 7px var(--s-pad); font-size: 11.5px; color: var(--s-mut); border-bottom: 1px solid var(--s-line); }
.site__hd { display: flex; align-items: center; gap: 22px; padding: 16px var(--s-pad); border-bottom: 1px solid var(--s-line); }
.site__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.site__logo { flex: none; width: 18px; height: 18px; border-radius: min(var(--s-rf, 4px), 5px); background: var(--s-acc); overflow: hidden; }
.site__logo.has-img { width: auto; height: 30px; border-radius: 0; background: none; overflow: visible; }
.site__logo img { height: 100%; width: auto; max-width: 160px; object-fit: contain; object-position: left center; display: block; }
.site__name { font-family: var(--s-head); font-weight: 650; font-size: 18px; letter-spacing: -.015em; white-space: nowrap; }
.site__nav { display: flex; gap: 20px; font-size: 13.5px; }
.site__cta { flex: none; padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: var(--s-rb, 8px); background: var(--s-acc); color: var(--s-on, #fff); border: 1.5px solid var(--s-acc); }
.site[data-btn="outline"] .site__cta { background: transparent; color: var(--s-acc); }
.site[data-btn="tint"] .site__cta { background: color-mix(in srgb, var(--s-acc) 16%, var(--s-bg)); border-color: transparent; color: var(--s-acc-t, var(--s-acc)); }
.site__intro { padding: clamp(28px, 4.5vw, 52px) var(--s-pad) 6px; max-width: 760px; margin: 0 auto; }
.site__crumb { font-size: 12px; color: var(--s-mut); margin-bottom: 14px; }
.site__crumb i { font-style: normal; opacity: .5; margin: 0 4px; }
.site__intro h3 { font-family: var(--s-head); font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.025em; line-height: 1.04; font-weight: 650; text-wrap: balance; }
.site__intro p:last-child { margin-top: 12px; color: var(--s-mut); font-size: 15px; line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
.site__ft { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 18px var(--s-pad) 20px; border-top: 1px solid var(--s-line); color: var(--s-mut); font-size: 12px; }
.site__ftn { display: grid; gap: 2px; }
.site__ftn b { font-family: var(--s-head); color: var(--s-ink); font-size: 14px; font-weight: 650; }
/* Elegant and Classic: an editorial site, the name centred over the nav, the intro centred */
.site[data-face="elegant"] .site__hd, .site[data-face="classic"] .site__hd { display: grid; grid-template-columns: 1fr auto 1fr; }
.site[data-face="elegant"] .site__brand, .site[data-face="classic"] .site__brand { grid-column: 2; grid-row: 1; margin: 0; }
.site[data-face="elegant"] .site__nav, .site[data-face="classic"] .site__nav { grid-column: 1; grid-row: 1; }
.site[data-face="elegant"] .site__cta, .site[data-face="classic"] .site__cta { grid-column: 3; grid-row: 1; justify-self: end; }
.site[data-face="elegant"] .site__name, .site[data-face="classic"] .site__name { font-size: 21px; font-weight: 500; letter-spacing: 0; }
.site[data-face="elegant"] .site__intro, .site[data-face="classic"] .site__intro { text-align: center; }
.site[data-face="elegant"] .site__intro p:last-child, .site[data-face="classic"] .site__intro p:last-child { margin-inline: auto; }
.site[data-face="elegant"] .site__intro h3, .site[data-face="classic"] .site__intro h3 { font-weight: 500; letter-spacing: -.01em; font-size: clamp(32px, 3.8vw, 50px); }
/* Wide: the name and the headline go big and wide */
.site[data-face="wide"] .site__name, .site[data-face="wide"] .site__intro h3, .site[data-face="wide"] .site__ftn b { font-stretch: 125%; font-weight: 750; letter-spacing: -.03em; }
.site[data-face="wide"] .site__intro h3 { font-size: clamp(30px, 3.6vw, 46px); line-height: .98; }
/* Technical: the page shows its structure */
.site[data-face="technical"] .site__intro h3 { font-weight: 500; letter-spacing: -.035em; }
.site[data-face="technical"] .site__nav span::before { content: "/"; margin-right: 4px; opacity: .45; }
.site[data-face="technical"] .site__crumb { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
/* Warm: softer weight in the headline */
.site[data-face="warm"] .site__intro h3 { font-weight: 600; letter-spacing: -.02em; }
/* a phone (the device toggle, or a narrow screen): one row header, no nav, the intro left */
.dev[data-device="mobile"] .site__nav, .dev[data-device="mobile"] .site__bar span + span { display: none; }
.dev[data-device="mobile"] .site__hd { display: flex; gap: 12px; }
.dev[data-device="mobile"] .site__brand { margin-right: auto; }
.dev[data-device="mobile"] .site__intro { text-align: left; }
.dev[data-device="mobile"] .site__intro p:last-child { margin-inline: 0; }
@media (max-width: 560px) {
  .site__nav, .site__bar span + span { display: none; }
  .site .site__hd, .site[data-face] .site__hd { display: flex; gap: 12px; } .site .site__brand, .site[data-face] .site__brand { margin-right: auto; }
  .site .site__intro { text-align: left; } .site .site__intro p:last-child { margin-inline: 0; }
  .site__ft { flex-direction: column; align-items: start; }
  .bay__hd .seg--sm { display: none; }   /* already on a phone: Desktop / Phone has nothing to show */
}
/* the form's frame carries a 6 px gutter inside (frame.js), so the frame sits 6 px wider to keep the edges in line */
.site__form { position: relative; padding: 16px calc(var(--s-pad) - 6px) 28px; max-width: 760px; margin: 0 auto; min-height: 360px; }
#form { display: block; width: 100%; height: 640px; border: 0; background: transparent; }
/* a cover while the form loads; the frame itself is never made invisible (Chrome pauses a hidden cross-site frame) */
.site__wait { position: absolute; inset: 0; display: grid; place-content: start center; justify-items: center; gap: 12px; padding-top: 60px; background: var(--s-bg, #fff); color: var(--s-mut); transition: opacity .3s; }
.site__wait i { width: 120px; height: 2px; background: var(--s-line); position: relative; overflow: hidden; }
.site__wait i::after { content: ""; position: absolute; inset: 0; background: var(--s-acc); transform-origin: 0 50%; animation: fill 1.2s var(--io) forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(.9); } }

/* the engine bus between the website and the back office */
/* the engine (round 3): a sequencer rail on its left edge. The request is a chip with the customer's initials that steps
   down the rail; at each station it stops while the station's bar fills and its readout says what it is doing for this
   request, then it leaves for the back office. References: Vercel and GitHub Actions run steps, Elektron's step lights. */
.bus { position: sticky; top: 64px; display: grid; grid-template-rows: auto auto 1fr; border-radius: 6px; min-height: 440px; overflow: hidden; }
.bus__hd { display: flex; justify-content: space-between; gap: 6px; padding: 12px 10px 10px 12px; border-bottom: 1px solid var(--lcd-rule); color: var(--lcd-mut); text-transform: uppercase; }
.bus__hd [data-bus-state] { color: var(--lcd-ink); text-transform: none; white-space: nowrap; }
/* requests waiting their turn sit at the top of the rail, a fixed-height row so the stations never move */
.bus__q { display: flex; gap: 3px; height: 26px; padding: 6px 8px 0 5px; }
.bus__q i { display: grid; place-items: center; width: 27px; height: 17px; border-radius: 2px; background: var(--lcd-3); color: var(--lcd-mut); font-size: 9px; font-style: normal; font-weight: 600; box-shadow: inset 0 0 0 1px var(--lcd-rule-2); }
.bus__q i.more { width: auto; padding: 0 4px; background: none; box-shadow: none; }
.bus__st { position: relative; z-index: 1; display: grid; align-content: space-evenly; padding: 0 10px 10px 0; }
.bus__st li { position: relative; display: grid; gap: 3px; padding: 10px 0 10px 40px; }
.bus__st .led { position: absolute; left: 15px; top: 13px; }
.bus__st p { display: flex; align-items: baseline; gap: 5px; }
.bus__st p .mono { color: var(--lcd-faint); font-size: 9.5px; }
.bus__st b { font-size: 12.5px; font-weight: 620; color: var(--lcd-mut); transition: color .15s; }
.bus__v { font-size: 10px; font-stretch: 75%; color: var(--lcd-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bus__bar { position: relative; height: 2px; margin-top: 3px; background: var(--lcd-rule); overflow: hidden; }
.bus__bar i { position: absolute; inset: 0; background: var(--lcd-ink); transform-origin: 0 50%; transform: scaleX(0); }
.bus__st li.is-busy b, .bus__st li.is-on b { color: var(--lcd-ink); }
.bus__st li.is-busy .bus__v { color: var(--lcd-mut); }
.bus__st li.is-on .bus__v { color: var(--lcd-ink); }
.bus__st li.is-on .bus__bar i { transform: none; background: var(--sig); }
.bus__wire { position: absolute; left: 18px; top: 74px; bottom: 16px; width: 1px; background: var(--lcd-rule-2); }
.bus__wire i { position: absolute; inset: 0; background: var(--sig); transform-origin: 50% 0; transform: scaleY(0); }
.bus__pkt { position: absolute; z-index: 2; left: 5px; top: 74px; width: 27px; height: 17px; display: grid; place-items: center; border-radius: 2px;
  background: var(--lcd-ink); color: var(--lcd); font-size: 9px; font-weight: 600; letter-spacing: 0; opacity: 0; }
.bus.is-done .bus__st li.is-on .led { animation: beat .5s steps(1) 1; }
@keyframes beat { 50% { background: var(--lcd-ink); } }
/* the chip on its way into the back office (a fixed clone) */
.fly { position: fixed; z-index: 40; left: 0; top: 0; width: 27px; height: 17px; display: grid; place-items: center; border-radius: 2px; background: var(--lcd-ink); color: var(--lcd); font: 600 9px/1 var(--mono); pointer-events: none; }

/* the back office: a real-looking product on the display, in the owner's colour (--acc) */
.bo { position: sticky; top: 64px; border-radius: 6px; overflow: hidden; --acc: #1E40AF; --acc-l: color-mix(in srgb, var(--acc) 55%, #fff); }
.bo__top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--lcd-rule); }
.bo__logo { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: var(--acc); overflow: hidden; }
.bo__logo.has-img { background: #fff; }
.bo__logo img { width: 100%; height: 100%; object-fit: contain; }
.bo__name { font-size: 14px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo__sig { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--lcd-mut); text-transform: uppercase; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--lcd-rule); }
.stats > div { padding: 12px 14px; display: grid; gap: 4px; }
.stats > div + div { border-left: 1px solid var(--lcd-rule); }
.stats b { font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.stats > div:first-child b { color: var(--acc-l); }
.stats span { font-size: 11.5px; color: var(--lcd-mut); }
.inbox { padding: 6px; display: grid; gap: 2px; overflow: hidden; }
.req { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; }
.req.is-new { background: var(--lcd-3); }
.req.is-in { animation: slot .45s var(--out); }
@keyframes slot { from { transform: translateY(-100%); opacity: 0; } }
.av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lcd-3); color: var(--lcd-mut); font: 600 11px/1 var(--ui); transition: opacity .12s; }
.req.is-new .av { background: var(--acc); color: var(--acc-ink, #fff); }
.req__m { display: grid; min-width: 0; }
.req__m b { font-size: 13px; font-weight: 560; }
.req__m span { font-size: 12px; color: var(--lcd-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req__t { font-family: var(--mono); font-stretch: 87.5%; font-size: 11px; color: var(--lcd-mut); }
.tag { font: 600 10.5px/1 var(--ui); color: var(--acc-ink, #fff); padding: 5px 7px; border-radius: 3px; background: var(--acc); }

.card { padding: 4px 14px 16px; min-height: 280px; border-top: 1px solid var(--lcd-rule); }
/* the back office at rest: an instrument readout with a quiet signal (round 4) */
.idle { display: grid; gap: 14px; padding: 18px 2px 6px; }
.idle__l { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; color: var(--lcd-ink); text-transform: uppercase; }
.idle__l .led { background: var(--sig); box-shadow: inset 0 1px 0 rgba(255, 210, 196, .55); }
.idle__url { justify-self: end; color: var(--lcd-mut); text-transform: none; }
.scope { position: relative; height: 34px; border-top: 1px solid var(--lcd-rule); border-bottom: 1px solid var(--lcd-rule); overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 23px, var(--lcd-rule) 23px 24px); }
.scope::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--lcd-rule-2); }
.scope i { position: absolute; top: 6px; bottom: 6px; left: 0; width: 100%; animation: sweep 5.2s linear infinite; }
.scope i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--lcd-ink); }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(calc(100% - 2px)); } }
.idle.is-in .scope i { animation-duration: 1.1s; }
.idle.is-in .scope i::before { background: var(--sig); }
.card:has(.idle) { min-height: 0; }
.idle__dl { display: grid; gap: 0; }
.idle__dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lcd-rule); }
.idle__dl dt { color: var(--lcd-faint); text-transform: uppercase; }
.idle__dl dd { margin: 0; font-size: 13px; color: var(--lcd-ink); }
.idle.is-in [data-idle="0"] { color: var(--sig); }
.who { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; }
.who__av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 650 14px/1 var(--ui); color: var(--acc-ink, #fff); background: var(--acc); }
.who b { display: block; font-size: 17px; font-weight: 680; letter-spacing: -.01em; }
.who div span { font-size: 12px; color: var(--lcd-mut); }
.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 4px 0 14px; }
.track li { position: relative; display: grid; gap: 2px; padding-top: 10px; }
.track li::before, .track li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--lcd-rule-2); }
.track li::after { background: var(--sig); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s var(--out); }
.track li.is-on::after { transform: none; }
.track b { font-size: 11.5px; font-weight: 640; color: var(--lcd-faint); transition: color .2s; }
.track span { font-size: 10.5px; line-height: 1.3; color: var(--lcd-faint); transition: color .2s; }
.track li.is-on b { color: var(--lcd-ink); }
.track li.is-on span { color: var(--lcd-mut); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--lcd-rule); }
.facts > div { padding: 8px 0 8px; border-bottom: 1px solid var(--lcd-rule); min-width: 0; }
.facts > div:nth-child(odd):not(.is-wide) { padding-right: 10px; }
.facts > div.is-wide { grid-column: 1 / -1; }
.facts dt { font-size: 11px; color: var(--lcd-mut); }
.facts dd { margin-top: 1px; font-size: 13px; overflow-wrap: anywhere; }
.acts { display: flex; gap: 6px; margin-top: 14px; }
.act { flex: 1; padding: 10px 12px; border-radius: 4px; border: 1px solid var(--lcd-rule-2); background: transparent; color: var(--lcd-ink); font-size: 13px; font-weight: 560; transition: transform .16s var(--out), border-color .15s; }
.act:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .act:hover { border-color: rgba(236, 236, 230, .4); } }
.act--go { flex: 1.6; background: var(--acc); border-color: transparent; color: var(--acc-ink, #fff); font-weight: 640; }
.toast { margin-top: 10px; font-size: 12.5px; color: var(--lcd-mut); }
.card .who, .card .track, .card .facts, .card .acts { transition: opacity .3s, transform .4s var(--out); }
.card.is-in .who, .card.is-in .track, .card.is-in .facts, .card.is-in .acts { opacity: 0; transform: translateY(8px); }
.card .track { transition-delay: .05s; } .card .facts { transition-delay: .1s; } .card .acts { transition-delay: .15s; }
.bo.is-hit .bo__sig { color: var(--lcd-ink); }

.landed { position: fixed; z-index: 30; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border: 0; border-radius: 4px; background: var(--ink); color: var(--alu-hi); font-size: 14px; font-weight: 560; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }

/* the one line */
.ship { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(96px, 14vh, 170px); }
.ship__p { margin-top: 18px; color: var(--mut); max-width: 46ch; text-wrap: pretty; }
.plate { position: relative; border-radius: 6px; padding: 14px 18px 22px; }
.plate__hd { display: flex; justify-content: space-between; color: var(--lcd-mut); text-transform: uppercase; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--lcd-rule); }
.plate pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 450 14px/1.6 var(--mono); font-stretch: 87.5%; color: var(--lcd-ink); padding-right: 84px; }
.key--lcd { position: absolute; right: 16px; bottom: 18px; background: var(--lcd-3); box-shadow: inset 0 0 0 1px var(--lcd-rule-2); padding: 8px 14px; font-size: 12.5px; color: var(--lcd-ink); }
@media (hover: hover) and (pointer: fine) { .key--lcd:hover { background: #2A2B28; } }

/* narrower: the machine stacks; the engine bus lies down between the website and the back office */

/* ---------- the back office, round 5: real tabs over a body of fixed height ---------- */
.bo__tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--lcd-rule); }
.bo__tabs [role="tab"] { padding: 6px 8px 9px; border: 0; background: none; color: var(--lcd-faint); font-size: 12.5px; box-shadow: inset 0 -2px 0 transparent; transition: color .15s; }
@media (hover: hover) and (pointer: fine) { .bo__tabs [role="tab"]:hover { color: var(--lcd-mut); } }
.bo__tabs [role="tab"][aria-selected="true"] { color: var(--lcd-ink); box-shadow: inset 0 -2px 0 var(--acc-l); }
.bo__tabs [role="tab"]:focus-visible { outline: 2px solid var(--acc-l); outline-offset: -2px; }
.bo__body { position: relative; height: 600px; }
.bo__p { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.bo__p[hidden] { display: none !important; }
.bo__p--pad { padding: 4px 14px 14px; overflow-y: auto; scrollbar-width: thin; }
/* the tab fills its body: the grid grows, a quiet line sits at the foot */
.bo__p--pad > .nights { grid-template-rows: auto repeat(3, 76px); }
.bo__p--pad > .nights .night { height: auto; min-height: 56px; }
.cal__ft { margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--lcd-rule); color: var(--lcd-faint); font-size: 10px; text-transform: uppercase; }
.card { flex: 1; min-height: 0 !important; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lcd-rule-2) transparent; }
/* the inbox rows are buttons now: a row opens its request */
.req { display: block; padding: 0; border-radius: 4px; }
.req__b { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 4px; background: none; color: inherit; text-align: left; }
@media (hover: hover) and (pointer: fine) { .req__b:hover { background: var(--lcd-2); } }
.req.is-sel .req__b { background: var(--lcd-3); }
.req__b:focus-visible { outline: 2px solid var(--acc-l); outline-offset: -2px; }
.tag--done { background: transparent; color: var(--lcd-ink); box-shadow: inset 0 0 0 1px var(--lcd-rule-2); }
.who .stamp { margin-left: auto; padding: 5px 8px; border: 1px solid var(--acc-l); border-radius: 3px; color: var(--acc-l); text-transform: uppercase; font-size: 10px; white-space: nowrap; }
.track.is-done li:last-child b::after { content: "  ✓"; color: var(--acc-l); }
.act[aria-disabled="true"] { background: transparent; color: var(--acc-l); border-color: var(--acc-l); cursor: default; }
.act[aria-disabled="true"]:active { transform: none; }
/* what the customer gets, and what was sent */
.msg { margin-top: 12px; padding: 12px 12px 10px; border: 1px solid var(--lcd-rule-2); border-radius: 4px; }
.msg__l { color: var(--lcd-mut); text-transform: uppercase; font-size: 10px; margin-bottom: 6px; }
.msg__t { white-space: pre-line; font-size: 13px; line-height: 1.5; color: var(--lcd-ink); }
.msg__n { margin-top: 8px; font-size: 11.5px; color: var(--lcd-faint); }
.facts { margin-top: 14px; }
/* a reply, drafted in place */
.reply { display: grid; gap: 10px; padding: 14px 0 4px; }
.reply__hd { display: grid; gap: 4px; }
.reply__hd b { font-size: 15px; font-weight: 650; }
.reply__hd .mono { color: var(--lcd-mut); text-transform: uppercase; font-size: 10px; }
.draft { width: 100%; resize: none; padding: 10px 12px; border: 1px solid var(--lcd-rule-2); border-radius: 4px; background: var(--lcd-2); color: var(--lcd-ink); font: 400 13px/1.5 var(--ui); }
.draft:focus { outline: none; border-color: var(--acc-l); }
.reply .acts { margin-top: 0; }
/* the calendar */
.cal__hd { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 10px; }
.cal__hd b { font-size: 15px; font-weight: 650; }
.cal__hd .mono { color: var(--lcd-mut); text-transform: uppercase; font-size: 10px; }
.nights { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.nights__w { color: var(--lcd-faint); font-size: 10px; text-align: center; padding-bottom: 4px; }
.night { position: relative; display: grid; align-content: space-between; height: 64px; padding: 6px; border-radius: 3px; background: var(--lcd-2); }
.night b { font-weight: 400; color: var(--lcd-mut); }
.night span { font-size: 11px; font-weight: 600; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.night.is-today { box-shadow: inset 0 0 0 1px var(--lcd-ink); }
.night.is-booked { background: var(--acc); color: var(--acc-ink, #fff); }
.night.is-booked b { color: inherit; opacity: .75; }
.night.is-held { background: var(--lcd-2); color: var(--acc-l); box-shadow: inset 0 0 0 1px var(--acc-l); }
.cal__key { display: flex; align-items: center; gap: 8px; color: var(--lcd-mut); font-size: 10px; }
.cal__key .k { width: 14px; height: 10px; border-radius: 2px; }
.cal__key .k--booked { background: var(--acc); }
.cal__key .k--held { box-shadow: inset 0 0 0 1px var(--acc-l); margin-left: 8px; }
.week { display: grid; grid-template-columns: 40px repeat(5, minmax(0, 1fr)); gap: 3px; }
.week__d { color: var(--lcd-mut); font-size: 10px; text-align: center; padding-bottom: 4px; }
.week__d.is-today { color: var(--lcd-ink); box-shadow: inset 0 -2px 0 var(--acc-l); }
.week__h { color: var(--lcd-faint); font-size: 10px; padding-top: 6px; }
.slot { height: 56px; border-radius: 3px; background: var(--lcd-2); padding: 6px; overflow: hidden; }
.slot.is-on { background: var(--acc); color: var(--acc-ink, #fff); }
.slot b { font-size: 11px; font-weight: 600; line-height: 1.2; display: block; }
.agenda { display: grid; }
.agenda li { display: grid; grid-template-columns: 82px 44px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--lcd-rule); }
.agenda li .mono { color: var(--lcd-mut); font-size: 10.5px; padding-top: 2px; }
.agenda li b { display: block; font-size: 13px; font-weight: 600; }
.agenda li span span { font-size: 12px; color: var(--lcd-mut); }
.agenda li.is-set { box-shadow: inset 2px 0 0 var(--acc-l); padding-left: 8px; }
/* customers */
.cus { display: grid; }
.cus li { border-bottom: 1px solid var(--lcd-rule); }
.cus__b { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 2px; border: 0; background: none; color: inherit; text-align: left; }
@media (hover: hover) and (pointer: fine) { .cus__b:hover { background: var(--lcd-2); } }
.cus__b:focus-visible { outline: 2px solid var(--acc-l); outline-offset: -2px; }
.cus__s { color: var(--lcd-mut); font-size: 10.5px; }
.cus1 .acts { margin-top: 14px; }
/* the owner's look reaches the back office too */
.bo[data-look="editorial"] .who b, .bo[data-look="editorial"] .cal__hd b { font-family: "MB Bodoni", Georgia, serif; font-weight: 500; }
.bo[data-look="bold"] .who b, .bo[data-look="bold"] .cal__hd b { font-weight: 800; letter-spacing: -.02em; }
.bo[data-look="bold"] .night, .bo[data-look="bold"] .slot { border-radius: 0; }
.bo[data-look="soft"] .night, .bo[data-look="soft"] .slot, .bo[data-look="soft"] .msg, .bo[data-look="soft"] .req__b { border-radius: 10px; }
@media (max-width: 900px) { .bo__body { height: 620px; } }

@media (max-width: 1240px) {
  .rig { grid-template-columns: minmax(0, 1fr) 340px; }
  .ctl { grid-column: 1 / -1; position: static; max-height: none; display: block; }
  .ctl__grp:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 0 16px; }
  .ctl__grp:first-child .ctl__t { grid-column: 1 / -1; }
  .ctl__grp:first-child .fld { grid-column: 1 / 3; }
  .ctl__grp:first-child .logo { margin-top: 0; }
  .ctl__grp:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-content: start; align-items: start; }
  .ctl__grp:last-child .ctl__t, .ctl__grp:last-child .presets { grid-column: 1 / -1; }
  .ctl__grp:last-child .row + .row { margin-top: 0; }
  .ctl__grp:last-child .row { margin-bottom: 14px; }
  .ctl { grid-row: 1; } .bus { grid-row: 2; grid-column: 1 / -1; } .site-bay, .bo { grid-row: 3; }
  .bus { display: block; position: relative; top: 0; min-height: 0; }
  .bus__hd { border-bottom: 0; padding: 10px 12px 6px; }
  .bus__st { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px 12px 16px; }
  .bus__st li { padding: 14px 0 0; }
  .bus__st .led { left: 0; top: 0; }
  .bus__st p .mono { display: none; }
  .bus__wire { left: 12px; right: 12px; top: 71px; bottom: auto; width: auto; height: 1px; }
  .bus__wire i { transform-origin: 0 50%; transform: scaleX(0); }
  .bus__pkt { left: 0; top: 63px; }
}
@media (max-width: 900px) {
  .rig { grid-template-columns: minmax(0, 1fr); }
  .ctl, .bus, .site-bay, .bo { grid-row: auto; grid-column: auto; }
  .bo { position: static; }
  .card { min-height: 0; }
  .studio__hd { grid-template-columns: 1fr; }
  .ship { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bar { grid-template-columns: auto 1fr; }
  .bar .key { font-size: 12.5px; padding: 9px 12px; }
  .modes { grid-template-columns: 1fr; }
  .mode { border-left: 0; border-top: 1px solid var(--rule-2); padding: 12px 14px 14px; }
  .mode:first-child { border-top: 0; }
  .mode__hd { margin-bottom: 8px; }
  .ctl { display: block; }
  .ctl__grp + .ctl__grp { border-left: 0; border-top: 1px solid var(--rule-2); }
  .ctl__grp:last-child { display: block; }
  .ctl__grp:last-child .row + .row { margin-top: 14px; }
  .ctl__grp:last-child .row { margin-bottom: 0; }
  .bus__st b { font-size: 11px; }
  .bus__v { font-size: 9px; }
  .dev[data-device="mobile"] { box-shadow: 0 0 0 6px var(--ink), 0 0 0 7px #000; border-radius: 28px; margin: 8px auto; }
}
/* fingers: every control at least 40px to hit */
@media (pointer: coarse) {
  .sw button, .sw__own { width: 36px; height: 36px; }
  .tones button { width: 44px; height: 36px; }
  .seg button { padding: 11px 4px; }
  .seg--sm button { padding: 9px 14px; }
  .logo__up, .logo__x { padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}