/* Bots. Everything the app looks like, so any host page only needs one element. */
:root {
  --ink: #0b0f14;
  --body: #4a525e;
  --muted: #5a6270;
  --line: #e1e4e9;
  --blue: #2e5fd8;
  --blue-d: #1f47b0;
  --soft: #e9effc;
  --mat: #f2f6fd;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  background: #fff;
  color: var(--ink);
  font:
    16px/1.3 -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    'Segoe UI',
    system-ui,
    sans-serif;
  overscroll-behavior: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a {
  color: var(--blue);
}
a:hover {
  color: var(--blue-d);
}
/* The whole screen is one card with two faces. */
#app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  perspective: 1800px;
  background: #02060e;
}
.turn {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.turn.atBack {
  transform: rotateY(180deg);
}
.turn.toBack {
  animation: turnBack 0.9s cubic-bezier(0.62, 0.02, 0.28, 1) both;
}
.turn.toFront {
  animation: turnFront 0.9s cubic-bezier(0.62, 0.02, 0.28, 1) both;
}
@keyframes turnBack {
  from {
    transform: rotateY(0deg) scale(1);
  }
  50% {
    transform: rotateY(90deg) scale(0.84);
  }
  to {
    transform: rotateY(180deg) scale(1);
  }
}
@keyframes turnFront {
  from {
    transform: rotateY(180deg) scale(1);
  }
  50% {
    transform: rotateY(90deg) scale(0.84);
  }
  to {
    transform: rotateY(0deg) scale(1);
  }
}
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.faceF {
  background: #fff;
}
.col {
  position: relative;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.faceB {
  transform: rotateY(180deg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #050d1c;
  background-image: linear-gradient(rgba(95, 190, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 190, 255, 0.07) 1px, transparent 1px), radial-gradient(90% 70% at 50% 0%, #0c2342 0%, #050d1c 70%);
  background-size:
    24px 24px,
    24px 24px,
    100% 100%;
  background-attachment: local;
  color: #d6ecff;
}
.top {
  flex: none;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 16px;
}
.brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand span {
  font-weight: 500;
  color: var(--body);
}
.cartb {
  height: 44px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--soft);
  border: 0;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 600;
}
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  background: var(--mat);
  overflow: hidden;
}
.stage > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.status {
  position: absolute;
  left: 12px;
  top: 12px;
  right: 66px;
  background: rgba(255, 255, 255, 0.93);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 19px;
  pointer-events: none;
}
.bar {
  height: 4px;
  border-radius: 2px;
  background: #d3dffa;
  margin-top: 6px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 4px;
  background: var(--blue);
  width: 0;
  transition: width 0.3s;
}
.sees {
  position: absolute;
  left: 148px; /* In the gap between the d-pad, which ends at 140, and the Drive button: it can never meet either. */
  bottom: 16px;
  pointer-events: none;
  opacity: 0.85;
}
.stage .sees canvas {
  display: block;
  width: 96px;
  height: 22px;
}
/* Its words stay for screen readers; the picture is the display. */
.sees small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
@media (max-width: 359px) {
  .sees {
    display: none;
  }
}
.row .note {
  display: block;
  font-size: 12px;
  line-height: 15px;
  color: var(--muted);
}
.cmp {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.cmp small {
  color: var(--muted);
  font-size: 12px;
}
.cmp b {
  font-weight: 600;
}
.cmp .better {
  color: #1d7a4e;
}
.cmp .worse {
  color: #b5482f;
}
.flipb {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  border: 0;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 15px;
  color: var(--body);
  background: var(--mat);
}
.i span {
  display: block;
  border-radius: 50%;
  background: #2f7fc4;
  color: #fff;
  font:
    italic 700 15px Georgia,
    serif;
  text-align: center;
}
.ctl {
  flex: none;
  padding: 10px 16px 0;
}
.say {
  display: flex;
  gap: 8px;
}
.say input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1px solid #c5cad3;
  border-radius: 12px;
  padding: 0 12px;
  font: inherit;
}
.go {
  height: 44px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 8px -16px 0;
  padding: 0 16px;
}
.chips::-webkit-scrollbar,
.opts::-webkit-scrollbar {
  display: none;
}
.chip {
  flex: none;
  height: 44px;
  padding: 0 13px;
  border-radius: 22px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}
.chip.on,
.opt.on {
  background: var(--soft);
  color: var(--blue-d);
  border-color: var(--blue);
}
.tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 6px 16px 0;
  border-bottom: 1px solid var(--line);
  /* Its own layer. Coming back from full screen on an iPhone, four of the five tabs measured visible and in the right place
   * but did not paint, inside the flipping card (Santa 7, on the phone, where this line fixed it). */
  transform: translateZ(0);
}
.tab {
  height: 44px;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
}
.tab.on {
  color: var(--blue-d);
  box-shadow: inset 0 -3px 0 var(--blue);
}
.panel {
  flex: none;
  height: 150px;
  overflow: hidden;
}
.opts {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 16px 0;
  height: 100%;
}
.group {
  flex: none;
  width: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.group.wide {
  width: 148px;
}
.group.senses {
  width: 224px;
}
.group.senses .gridb {
  grid-template-columns: 1fr 1fr 1fr;
}
.group.models {
  width: 300px;
}
.group.models .gridb {
  grid-template-columns: repeat(4, 1fr);
}
.opt small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.group b {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  height: 16px;
}
.gridb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.opt {
  height: 44px;
  padding: 0 4px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 15px;
}
.opt:disabled {
  opacity: 0.4;
  cursor: default;
}
.colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.color {
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color i {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.color.on i {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--ink);
}
.rows {
  height: 100%;
  overflow-y: auto;
  padding: 0 16px 8px;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-bottom: 1px solid #eef0f3;
  font-size: 14px;
  line-height: 17px;
}
.row span {
  flex: 1;
}
.row a {
  font-size: 13px;
  font-weight: 600;
  line-height: 44px;
  min-width: 40px;
  text-align: right;
}
.fine {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.foot {
  flex: none;
  height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  margin-top: 0;
}
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
  padding-bottom: 12px;
}
.fact {
  position: relative;
  min-height: 68px;
  padding: 10px 26px 6px 10px;
  border-radius: 12px;
  background: rgba(111, 220, 255, 0.07);
  border: 1px solid rgba(111, 220, 255, 0.18);
}
.fact.on {
  background: rgba(255, 195, 92, 0.12);
  border-color: rgba(255, 195, 92, 0.5);
}
.fact b {
  display: block;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.02em;
}
.fact small {
  display: block;
  font-size: 12px;
  line-height: 15px;
  color: #93b6d3;
}
.i {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.i span {
  margin: 7px 7px 0 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
}
.nums {
  font:
    12px/18px ui-monospace,
    Menlo,
    monospace;
  color: #93b6d3;
  margin: 0 0 12px;
  word-break: break-word;
}
.sheet {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 20, 0.38);
  display: flex;
  align-items: flex-end;
  z-index: 5;
}
.sheetin {
  width: 100%;
  max-height: 82%;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sheethead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sheethead h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.link {
  height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-d);
}
.card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
}
.card.on {
  border-color: var(--blue);
}
.swatch {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
}
.card div.t {
  flex: 1;
  min-width: 0;
}
.card b {
  font-size: 17px;
}
.card small {
  display: block;
  font-size: 13px;
  color: var(--body);
  line-height: 17px;
}
.acts {
  display: flex;
  gap: 6px;
  margin-left: -8px;
}
.big {
  height: 50px;
  border: 0;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
[hidden] {
  display: none !important;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* The tech sheet. */
.bp {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 48px;
  --hud: #6fdcff;
  --amber: #ffc35c;
  --dim: #93b6d3;
  --edge: rgba(111, 220, 255, 0.26);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.bpTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 8px;
}
.bpId small {
  display: block;
  font: 12px/16px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.bpId h2 {
  margin: 2px 0;
  font: 800 30px/34px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: anywhere;
}
.bpBack {
  position: static;
  flex: none;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--hud);
}
.bpNav {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 8px 16px;
  background: rgba(5, 13, 28, 0.92);
  border-bottom: 1px solid var(--edge);
}
.bpNav::-webkit-scrollbar {
  display: none;
}
.bpNav button {
  flex: none;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: transparent;
  color: var(--hud);
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bpNav button:hover {
  background: rgba(111, 220, 255, 0.12);
}
.stamp {
  display: inline-block;
  margin: 12px 0 0;
  padding: 4px 9px;
  border: 1px solid var(--amber);
  border-radius: 3px;
  color: var(--amber);
  font: 600 12px/16px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bpBody {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.bpRest {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.plate {
  scroll-margin-top: 62px;
  padding: 14px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: rgba(8, 22, 44, 0.78);
  min-width: 0;
}
.plate h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font: 700 17px/22px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.plate h3 i {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--hud);
  color: #04101f;
  font: 800 14px/24px var(--mono);
  text-align: center;
}
.plate h3 small {
  margin-left: auto;
  font: 12px/16px var(--mono);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--dim);
  text-align: right;
}
.plate h4.first {
  margin-top: 0;
}
.plate h4 small {
  display: block;
  font: 12px/16px var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--dim);
}
.plate h4 {
  margin: 16px 0 6px;
  font: 700 13px/18px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hud);
}
.holoP {
  padding: 8px;
}
.holo {
  position: relative;
  height: min(62dvh, 520px);
  min-height: 320px;
  overflow: hidden;
  border-radius: 5px;
  background: radial-gradient(60% 55% at 50% 52%, rgba(40, 130, 200, 0.2), transparent 75%);
}
.holo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
}
.holo.nogl canvas,
.holo.nogl .leads,
.holo.nogl #calls {
  display: none;
}
.leads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.leads line {
  stroke: rgba(111, 220, 255, 0.6);
  stroke-width: 1;
}
.leads line.on {
  stroke: var(--amber);
}
.call {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--hud);
  border-radius: 50%;
  background: #06152a;
  color: #fff;
  font: 700 13px/1 var(--mono);
  will-change: transform;
}
.call::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.call.on {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1000;
}
.spec {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.spec small {
  display: block;
  font: 10px/12px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.spec b {
  display: block;
  font: 600 13px/16px var(--mono);
  color: #fff;
}
.crn {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid var(--hud);
  pointer-events: none;
}
.crn.a {
  left: 4px;
  top: 4px;
  border-width: 2px 0 0 2px;
}
.crn.b {
  right: 4px;
  top: 4px;
  border-width: 2px 2px 0 0;
}
.crn.c {
  left: 4px;
  bottom: 4px;
  border-width: 0 0 2px 2px;
}
.crn.d {
  right: 4px;
  bottom: 4px;
  border-width: 0 2px 2px 0;
}
.note {
  min-height: 40px;
  margin: 8px 6px 4px;
  font-size: 14px;
  line-height: 20px;
  color: #d6ecff;
}
.spread {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 6px;
  font: 12px/16px var(--mono);
  color: var(--dim);
}
.spread input {
  flex: 1;
  min-width: 0;
  height: 36px;
  accent-color: #6fdcff;
}
.bomr {
  display: grid;
  grid-template-columns: 28px 30px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-bottom: 1px solid rgba(111, 220, 255, 0.13);
  font-size: 14px;
  line-height: 18px;
}
.bomr.on {
  background: rgba(255, 195, 92, 0.12);
}
.bomr .q {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 13px;
}
.bomr b {
  font: 600 14px/18px var(--mono);
  color: #fff;
}
.bomr a {
  color: var(--hud);
  font-size: 13px;
  font-weight: 600;
  line-height: 44px;
  text-align: right;
}
.no {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1.5px solid var(--hud);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: 700 12px/1 var(--mono);
}
.no:disabled {
  border-color: rgba(111, 220, 255, 0.3);
  color: var(--dim);
  cursor: default;
}
.no.off {
  visibility: hidden;
}
.bomt {
  display: flex;
  justify-content: space-between;
  padding: 9px 0 0;
  font: 700 15px/22px var(--mono);
  color: var(--amber);
}
.bomt.grand {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-radius: 5px;
}
.safe ul {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 14px;
  line-height: 21px;
}
.small {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--dim);
}
.wirebox {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 2px 4px;
}
.wires {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}
.wires .sb {
  fill: #071a33;
  stroke: rgba(111, 220, 255, 0.55);
  stroke-width: 1.2;
}
.wires .sn {
  fill: #fff;
  font: 700 12.5px var(--mono);
}
.wires .ss {
  fill: var(--dim);
  font: 10.5px var(--mono);
}
.wires .sp {
  fill: #d6ecff;
  font: 11px var(--mono);
}
.legend {
  display: flex;
  gap: 14px;
  margin: 10px 0 0;
  font: 12px/16px var(--mono);
  color: var(--dim);
}
.legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend i,
.netl i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.netl {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 19px;
}
.netl li {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(111, 220, 255, 0.1);
}
.netl li i {
  margin-top: 5px;
}
.netl b {
  font: 600 13px var(--mono);
  color: #fff;
}
.netl small {
  display: block;
  color: var(--amber);
  font-size: 13px;
  line-height: 17px;
}
.chans {
  columns: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 13px/21px var(--mono);
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps > li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(111, 220, 255, 0.13);
}
.steps > li > i {
  font: 800 19px/24px var(--mono);
  color: var(--hud);
}
.steps b {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}
.steps p {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 21px;
  overflow-wrap: anywhere;
}
.steps .later > i,
.steps .later b {
  color: var(--amber);
}
.uses {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: 2px;
}
.uses .no {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.warn {
  padding: 7px 9px;
  border-left: 3px solid var(--amber);
  background: rgba(255, 195, 92, 0.1);
}
.safe {
  margin-top: 12px;
  padding: 2px 12px 12px;
  border: 1px solid rgba(255, 195, 92, 0.5);
  border-radius: 6px;
}
.safe h4 {
  color: var(--amber);
}
.howp {
  min-height: 62px;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
}
.faceB .fact b {
  color: #fff;
  font-family: var(--mono);
  letter-spacing: 0;
}
.faceB .nums {
  margin-top: 8px;
}
@media (min-width: 960px) {
  .bpBody {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }
  .holoP {
    position: sticky;
    top: 64px;
  }
  .wires {
    min-width: 0;
  }
  .holo {
    height: calc(100dvh - 210px);
    max-height: 760px;
  }
  .bpId h2 {
    font-size: 38px;
    line-height: 42px;
  }
}

/* Widescreen (owner, 2026-11-07: "for desktop, why not a better widescreen view"). On a wide, landscape screen the stage
 * takes the room and the controls stand beside it in one column, wrapping down instead of scrolling sideways, so every task
 * and option shows at once. Phones and narrow windows keep the one column as before. */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .col {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: 50px minmax(0, 1fr) auto;
  }
  .top {
    grid-column: 1 / -1;
  }
  .stage {
    grid-column: 1;
    grid-row: 2 / 4;
    min-height: 0;
  }
  #front {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
  }
  .foot {
    grid-column: 2;
    grid-row: 3;
  }
  .ctl {
    padding-top: 14px;
  }
  .chips {
    flex-wrap: wrap;
    overflow: visible;
  }
  .panel {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  .opts {
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    row-gap: 14px;
    padding-bottom: 16px;
  }
}

/* A long press on the stage or a control must not select page text: on an iPhone it threw selection handles across the
 * header and the stage (Santa 7). The ask bar, the parts list and Compare stay selectable, for copying. */
.stage,
.top,
.ctl .chips,
.tabs,
.opts,
.foot {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Glass controls (owner, 2026-11-07, from his iPhone: "instead of plain white buttons ... something futuristic apple inspired,
 * transparent ... splashing cheap parallax but awesome effects"). A deep aurora drifts behind translucent glass. The drift is
 * one layer moved by transform, so the compositor does it, not a repaint. Still for anyone who asks for less motion.
 * No backdrop blur: measured on the owner's iPhone 15 Pro Max (Santa 7), blur over the drifting layer took the builder from a
 * steady 60 fps to about 15, since it is worked out again every frame; over a soft gradient it looked the same without it.
 * flex: none: overflow hidden made this panel a flex item that may shrink, and the stage, sized by its own canvas, set its
 * resize observer looping: 11 "ResizeObserver loop" errors on the phone, 5 on load in Chromium at 430 px, none before. Either
 * this or the stage's canvas taken out of the layout (.stage > canvas) ends it; both are kept. */
#front {
  flex: none;
  --ink: #eef3ff;
  --body: #c6d2ea;
  --muted: #94a3c2;
  --line: rgba(255, 255, 255, 0.13);
  --soft: rgba(110, 150, 255, 0.2);
  --blue-d: #a9c4ff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: #080d1d;
  box-shadow: 0 -1px 0 rgba(140, 170, 255, 0.28);
}
#front::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(40% 35% at 25% 30%, rgba(52, 104, 255, 0.55), transparent 70%),
    radial-gradient(38% 34% at 75% 25%, rgba(150, 80, 255, 0.45), transparent 70%),
    radial-gradient(45% 40% at 55% 80%, rgba(0, 200, 210, 0.22), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift {
  from {
    transform: translate3d(-7%, -5%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(7%, 5%, 0) rotate(10deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #front::before {
    animation: none;
  }
}
#front .say input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}
#front .say input::placeholder {
  color: rgba(225, 235, 255, 0.55);
}
#front .go,
#front .big {
  background: linear-gradient(135deg, #4f7dff, #8a5cff);
  box-shadow:
    0 6px 18px rgba(98, 110, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#front .chip,
#front .opt {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 0.12s,
    box-shadow 0.2s,
    background 0.2s;
}
#front .chip.on,
#front .opt.on {
  background: linear-gradient(135deg, rgba(86, 132, 255, 0.55), rgba(150, 96, 255, 0.45));
  border-color: rgba(160, 190, 255, 0.85);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(150, 180, 255, 0.35),
    0 8px 22px rgba(90, 110, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#front .chip:active,
#front .opt:active {
  transform: scale(0.96);
}
#front .opt:disabled {
  opacity: 0.3;
}
#front .tabs {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
#front .tab {
  color: rgba(220, 230, 255, 0.62);
}
#front .tab.on {
  color: #fff;
  box-shadow: inset 0 -3px 0 #7d9bff;
  text-shadow: 0 0 12px rgba(125, 155, 255, 0.8);
}
#front .color.on i {
  box-shadow:
    0 0 0 2px #0c1530,
    0 0 0 4px #9fbcff;
}
#front .row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
#front .row a,
#front .link {
  color: #a9c4ff;
}
#front .cmp .better {
  color: #6ee7a8;
}
#front .cmp .worse {
  color: #ff9b85;
}
.foot {
  background: linear-gradient(90deg, #070b18, #12204a);
  box-shadow: 0 -1px 0 rgba(140, 170, 255, 0.25);
}
/* On a phone the options row scrolls sideways: its right edge fades, so a column cut at the edge reads as more to see. */
@media not all and (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  #front .opts {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
}

/* Manual override. */
.drive {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.drive[aria-pressed='true'] {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.pad {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(11, 15, 20, 0.14);
  box-shadow: inset 0 0 0 2px rgba(11, 15, 20, 0.3);
  touch-action: none;
  cursor: grab;
}
.knob {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 3px 8px rgba(11, 15, 20, 0.4);
  pointer-events: none;
}
.ar {
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  pointer-events: none;
}
.ar.u {
  left: 56px;
  top: 2px;
  border-bottom-color: var(--ink);
}
.ar.d {
  left: 56px;
  bottom: 2px;
  border-top-color: var(--ink);
}
.ar.l {
  left: 2px;
  top: 56px;
  border-right-color: var(--ink);
}
.ar.r {
  right: 2px;
  top: 56px;
  border-left-color: var(--ink);
}

/* The working plates. */
.bpActs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.bpActs .stamp {
  margin: 0;
}
.bpBtn {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--hud);
  border-radius: 4px;
  background: transparent;
  color: var(--hud);
  font: 600 13px/1 var(--mono);
}
.bpBtn:hover {
  background: rgba(111, 220, 255, 0.12);
}
.printHolo {
  display: none;
}
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.specs small {
  display: block;
  font: 11px/14px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.specs b {
  font: 600 15px/20px var(--mono);
  color: #fff;
}
.weights,
.hw {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 19px;
}
.weights li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(111, 220, 255, 0.1);
}
.weights b {
  flex: none;
  font: 600 13px/19px var(--mono);
  color: #fff;
}
.hw li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(111, 220, 255, 0.1);
}
.hw b {
  font-family: var(--mono);
  color: #fff;
}
.hw small,
.cut small {
  display: block;
  color: var(--dim);
  font-size: 13px;
  line-height: 17px;
}
.lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 18px;
}
.tabw {
  overflow-x: auto;
}
.cut {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 19px;
}
.cut th,
.cut td {
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid rgba(111, 220, 255, 0.13);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.cut thead th {
  font: 600 11px/14px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.cut tbody th {
  font: 700 13px/19px var(--mono);
  color: var(--hud);
}
.cut b {
  font: 600 13px var(--mono);
  color: #fff;
}
.cut .mm {
  font: 700 15px/19px var(--mono);
  color: #fff;
  text-align: right;
  white-space: nowrap;
}
.cut .cut {
  color: var(--amber);
}
.cut.care tbody th {
  width: 36%;
  font: 600 14px/19px inherit;
  color: #fff;
}
.tmplbox {
  overflow-x: auto;
  padding: 4px;
}
.tmpl {
  display: block;
  width: 100%;
  max-height: 460px;
  height: auto;
}
.chk {
  color: #a9f0c9;
}
.chk b {
  font-size: 14px;
  color: #a9f0c9;
}

/* On paper: black on white, every plate, no controls. */
@media print {
  html,
  body,
  #app {
    height: auto;
    overflow: visible;
    background: #fff;
    perspective: none;
  }
  .turn,
  .turn.atBack {
    position: static;
    transform: none !important;
    animation: none !important;
  }
  .faceF {
    display: none !important;
  }
  .face.faceB {
    position: static;
    transform: none;
    overflow: visible;
    background: #fff;
    color: #000;
  }
  .bp {
    --hud: #000;
    --amber: #000;
    --dim: #333;
    --edge: #888;
    max-width: none;
    padding: 0;
  }
  .bpNav,
  .bpBack,
  .bpBtn,
  .spread,
  .holoP,
  #bpBrain,
  .note {
    display: none !important;
  }
  .bpId h2,
  .plate h3,
  .specs b,
  .weights b,
  .hw b,
  .bomr b,
  .cut b,
  .cut .mm,
  .steps b,
  .netl b,
  .chk,
  .chk b {
    color: #000;
  }
  .bpBody {
    display: block;
  }
  .plate {
    margin-top: 10px;
    background: #fff;
    border-color: #888;
    break-inside: auto;
  }
  .plate h3 i {
    background: #000;
    color: #fff;
  }
  .printHolo {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    background: #06152a;
  }
  .steps > li,
  .cut tr,
  .bomr {
    break-inside: avoid;
  }
  .wires .sb {
    fill: #fff;
    stroke: #000;
  }
  .wires .sn,
  .wires .ss,
  .wires .sp {
    fill: #000;
  }
  .tmpl {
    width: auto;
    max-height: none;
  }
  .tmpl rect,
  .tmpl circle,
  .tmpl path {
    stroke: #000;
  }
  .tmpl text {
    fill: #000;
  }
}

.call {
  visibility: hidden;
}
.cut th:first-child {
  min-width: 96px;
}
.cut thead .mm,
.cut thead th:nth-child(n + 2) {
  white-space: nowrap;
}

.lesson {
  border-bottom: 1px solid rgba(111, 220, 255, 0.13);
}
.lesson summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.lesson summary::-webkit-details-marker {
  display: none;
}
.lesson summary::before {
  content: '+';
  flex: none;
  width: 20px;
  font: 700 17px/20px var(--mono);
  color: var(--hud);
}
.lesson[open] summary::before {
  content: '-';
}
.lesson p {
  margin: 0 0 8px 28px;
  font-size: 14px;
  line-height: 21px;
}
.lesson .yours {
  padding: 8px 10px;
  border-left: 3px solid var(--hud);
  background: rgba(111, 220, 255, 0.08);
}
.lesson .yours b {
  color: var(--hud);
}
.lesson .bpBtn {
  margin: 0 0 12px 28px;
}
@media print {
  #bpLearn {
    display: none !important;
  }
}

.yours.prog {
  margin: 10px 0 0;
  color: var(--amber);
  font: 600 14px/20px var(--mono);
}
.yours.prog:empty {
  display: none;
}
@media print {
  #bpProg .bpBtn,
  #bpProg .prog {
    display: none !important;
  }
}

/* The band (owner, 2026-11-08: "music bots page super important so then can jam out different genres"). A page of its own
 * over the builder, on the same aurora as the glass controls. Its code loads only when it opens. */
.topR {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bandb {
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #4f7dff, #8a5cff);
  box-shadow: 0 4px 14px rgba(98, 110, 255, 0.35);
}
html.banding,
html.banding body {
  overflow: hidden;
}
.bandP {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  color: #eef3ff;
  background: #080d1d;
  isolation: isolate;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select: none;
  user-select: none;
}
.bandP[hidden] {
  display: none;
}
.bandP::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(40% 35% at 25% 30%, rgba(52, 104, 255, 0.5), transparent 70%),
    radial-gradient(38% 34% at 75% 25%, rgba(150, 80, 255, 0.42), transparent 70%),
    radial-gradient(45% 40% at 55% 80%, rgba(0, 200, 210, 0.2), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .bandP::before {
    animation: none;
  }
}
.bandTop {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
}
.bandTop h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.bandBack,
.bandHear {
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.bandHear[aria-pressed='false'] {
  border-color: transparent;
  background: linear-gradient(135deg, #4f7dff, #8a5cff);
  box-shadow: 0 6px 18px rgba(98, 110, 255, 0.45);
}
.bandStage {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
}
.bandStage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  cursor: pointer;
}
.bandCtl {
  flex: none;
  margin: 0 10px 10px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}
.bandGenre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.bandGenre select {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(160, 190, 255, 0.5);
  background: rgba(86, 132, 255, 0.25);
  color: #fff;
  font: inherit;
  font-weight: 600;
}
.bandGenre option {
  color: #0b0f14;
}
.bandKnobs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: 12px;
}
.bandKnob {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 8px;
  font-size: 14px;
  font-weight: 600;
}
.bandKnob input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #8a8cff;
}
.bandKnob b {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  font-weight: 500;
  color: #a9b8da;
}
.bandNow {
  margin: 12px 0 0;
  font-size: 13px;
  color: #c6d2ea;
  min-height: 2.6em;
}
.bandHow {
  margin: 6px 0 0;
  font-size: 12px;
  color: #94a3c2;
}
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .bandP {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: 52px minmax(0, 1fr);
  }
  .bandTop {
    grid-column: 1 / -1;
  }
  .bandCtl {
    align-self: start;
    margin: 10px 16px 16px 0;
  }
  .bandKnobs {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 380px) {
  .bandb {
    padding: 0 11px;
  }
  .brand span {
    display: none;
  }
}

/* The race clock, on the stage. */
.raceHud {
  position: absolute;
  z-index: 3;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-radius: 18px;
  color: #fff;
  background: rgba(8, 13, 29, 0.82);
  white-space: nowrap;
}
.raceHud[hidden] {
  display: none;
}
.raceHud b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.raceHud small {
  font-size: 12px;
  color: #c6d2ea;
}
.raceHud button {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #4f7dff, #8a5cff);
}
.raceHud #raceEnd {
  background: rgba(255, 255, 255, 0.16);
}

/* The worlds, two rows of four. */
.group.worlds {
  flex: none;
  width: 332px;
}
.group.worlds .gridb {
  grid-template-columns: repeat(4, 76px);
}

.bandCrew {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}
.bandCrew button {
  white-space: nowrap;
  height: 34px;
  padding: 0 10px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.bandRec {
  margin-left: auto;
  color: #ffb4b4;
}

/* The ask bar, made the first thing you see. */
.askHint {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #c6d2ea;
}
#front .say input {
  height: 48px;
  box-shadow:
    0 0 0 1px rgba(125, 155, 255, 0.55),
    0 0 22px rgba(90, 110, 255, 0.4);
}
.askTry {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: 12px;
  color: #94a3c2;
}
.askTry button {
  flex: none;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #dfe8ff;
  font-size: 12px;
}

/* Single-column button groups, so a two-word name stays on its line. */
.group.lone {
  width: 118px;
}
.group.lone .gridb {
  grid-template-columns: 1fr;
}

.bandChat {
  display: flex;
  gap: 8px;
  margin: 8px 0 0;
}
.bandChat[hidden] {
  display: none;
}
.bandChat input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 16px;
}
.bandReply {
  margin: 6px 0 0;
  font-size: 14px;
}
.bandReply:empty {
  display: none;
}
/* A tablet held upright: the builder fills it, rather than a phone's column between white bars. */
@media (min-width: 700px) and (max-aspect-ratio: 5/4) {
  .col {
    max-width: none;
  }
}
.scans {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

/* Full screen, sideways, with the controls gone. Owner: "need way to go landscape full screen and hide configurator". It runs under the notch and home bar, so everything keeps clear of them. */
.fullb {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 64px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}
.bandStage .fullb {
  top: 8px;
}
.fullb[hidden] {
  display: none;
}
html.wide .top,
html.wide #front,
html.wide .foot,
html.rexing .status {
  display: none;
}
html.wide .bandCtl {
  display: none;
}
html.wide .bandP {
  display: flex;
}
html.wide .col {
  max-width: none;
  display: block;
}
html.wide .stage {
  height: 100%;
  min-height: 0;
}
html.wide .status {
  left: calc(12px + env(safe-area-inset-left));
  right: calc(66px + env(safe-area-inset-right));
}
html.wide .flipb,
html.wide .fullb {
  right: calc(10px + env(safe-area-inset-right));
}
html.wide .drive {
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
}
html.wide .pad {
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
}
html.wide .sees {
  left: calc(148px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
}