/* /flybrain: a brain beside a body, and the console between. Uses the site's tokens. */

.fb__head { position: relative; }
.fb__title {
  position: relative;
  display: inline-block;
  letter-spacing: .12em;
  text-shadow: 0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--amber) 55%, transparent);
}
.fb__title::before,
.fb__title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}
.fb__title::before { color: #a98bff; animation: fb-fire 4.1s steps(1) infinite; }
.fb__title::after  { color: var(--amber); animation: fb-fire 3.3s steps(1) infinite reverse; }
@keyframes fb-fire {
  0%, 88%, 100% { transform: none; opacity: 0; clip-path: inset(0); }
  90% { transform: translate(-2px, 1px); clip-path: inset(15% 0 50% 0); opacity: .8; }
  93% { transform: translate(2px, -1px); clip-path: inset(55% 0 10% 0); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .fb__title::before, .fb__title::after { animation: none; } }

.fb__lede { max-width: 66ch; margin: 0 0 26px; color: var(--dim); }

.fb__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 960px) { .fb__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.fb__panel {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, rgba(127,166,196,.07), transparent 70%), rgba(4,6,10,.9);
  border: 1px solid var(--line-hi);
  box-shadow: inset 0 0 60px rgba(0,0,0,.8), var(--lift);
  user-select: none;
  -webkit-user-select: none;
}
.fb__panel canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.fb__brain canvas { cursor: crosshair; }
.fb__body { background: #0d0f14; }
.fb__body.is-flat::after {
  content: "THE FLY COULD NOT BE DRAWN IN THIS BROWSER";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; letter-spacing: .16em; color: var(--dim);
}
/* which rung of the ladder drew the fly, when it was not the top one */
.fb__body[data-render="lite"]::after, .fb__body[data-render="flat"]::after {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-size: 9px; letter-spacing: .18em; color: var(--dim); opacity: .7; pointer-events: none;
}
.fb__body[data-render="lite"]::after { content: "LITE · NO SHADOWS"; }
.fb__body[data-render="flat"]::after { content: "2D · NO WEBGL"; }
.fb__motion {
  position: absolute; z-index: 3; top: 32px; left: 10px;
  padding: 5px 8px;
  font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--cyan); background: rgba(4,6,10,.6);
  border: 1px solid var(--line-hi); cursor: pointer;
}
.fb__motion[hidden] { display: none; }
.fb__motion[aria-pressed="true"] { color: var(--on-accent); background: #a98bff; border-color: #a98bff; }
.fb__motion:focus-visible { outline: 2px solid var(--cyan); }
.fb__panel::before {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  z-index: 1;
  width: 22px; height: 22px;
  border: solid var(--amber); border-width: 1px 0 0 1px;
  opacity: .8;
  pointer-events: none;
}

.fb__corner {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--dim);
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
.fb__corner b { color: #a98bff; font-weight: 400; margin-right: 6px; }
.fb__corner--tl { top: 10px; left: 14px; color: var(--bright); letter-spacing: .18em; }
.fb__corner--tr { top: 10px; right: 12px; color: var(--amber); font-variant-numeric: tabular-nums; }
.fb__corner--bl { bottom: 10px; left: 14px; }
.fb__corner--br { bottom: 10px; right: 12px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; color: var(--cyan); }
@media (max-width: 560px) {
  .fb__corner--tr { top: 26px; left: 14px; right: auto; }
  #hint { display: none; }
}
.fb__lr { position: absolute; top: 46%; z-index: 2; font-size: 10px; color: var(--dim); pointer-events: none; }
.fb__lr--l { left: 10px; } .fb__lr--r { right: 10px; }

.fb__legend {
  position: absolute;
  left: 50%; bottom: 30px;
  z-index: 2;
  display: flex; gap: 14px;
  margin: 0; padding: 0;
  list-style: none;
  transform: translateX(-50%);
  font-size: 9.5px; letter-spacing: .12em; color: var(--dim);
  pointer-events: none;
  white-space: nowrap;
}
.fb__legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 0; }
.fb__legend .is-rest { background: #7fa6c4; }
.fb__legend .is-drive { background: #a98bff; }
.fb__legend .is-hot { background: #ffb547; box-shadow: 0 0 6px #ffb547; }
.fb__legend .is-mute { background: #ff4d6d; }
@media (max-width: 480px) { .fb__legend { display: none; } }

#state i {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 6px #3ddc84;
}
#state { color: var(--bright); }
#state[data-s="flight"] i, #state[data-s="seizure"] i { background: var(--alert); box-shadow: 0 0 8px var(--alert); }
#state[data-s="feed"] i { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

.fb__cams {
  position: absolute;
  top: 6px; right: 8px;
  z-index: 3;
  display: flex;
}
.fb__cams button {
  padding: 5px 9px;
  font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--dim);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.fb__cams button[aria-pressed="true"] { color: var(--bright); border-bottom-color: #a98bff; }
.fb__cams button:focus-visible { outline: 2px solid var(--cyan); }

/* the switch that fetches the brain */
.fb__power {
  --p: 0%;
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: auto;
  width: 170px; height: 170px;
  display: grid; place-items: center;
  font: inherit; font-family: var(--mono);
  color: var(--amber);
  background:
    conic-gradient(color-mix(in srgb, var(--amber) 40%, transparent) var(--p), transparent 0) border-box,
    rgba(4,6,10,.78);
  border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 8px rgba(255,181,71,.06), 0 0 50px rgba(255,181,71,.22);
  transition: transform .2s, opacity .5s, box-shadow .2s;
}
.fb__power:hover:not(:disabled) { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(255,181,71,.12), 0 0 70px rgba(255,181,71,.35); }
.fb__power:disabled { cursor: progress; }
.fb__power:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.fb__power-label { position: relative; z-index: 1; font-size: 11.5px; letter-spacing: .2em; text-align: center; line-height: 1.6; }
.fb__power-label small { display: block; font-size: 9.5px; letter-spacing: .16em; color: var(--dim); }
.fb__power-ring { position: absolute; inset: 12px; border-radius: 50%; border: 1px dashed rgba(255,181,71,.45); animation: fb-spin 14s linear infinite; }
.fb__power:disabled .fb__power-ring { animation-duration: 3s; }
@keyframes fb-spin { to { transform: rotate(360deg); } }
.fb__power.is-gone { opacity: 0; pointer-events: none; transform: scale(1.3); }

.fb__seizure {
  position: absolute;
  z-index: 3;
  left: 50%; top: 52px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--text);
  background: rgba(20,4,8,.82);
  border: 1px solid var(--alert);
  box-shadow: 0 0 30px color-mix(in srgb, var(--alert) 35%, transparent);
}
.fb__seizure[hidden] { display: none; }
.fb__seizure b { color: var(--alert); letter-spacing: .3em; animation: fb-blink 1s steps(2) infinite; }
@keyframes fb-blink { 50% { opacity: .35; } }

/* what the body reads */
.fb__drives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 760px) { .fb__drives { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fb__drive {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px 12px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  font-size: 9.5px; letter-spacing: .1em; color: var(--dim);
}
.fb__drive b { display: block; font-size: 11px; font-weight: 400; letter-spacing: .2em; color: var(--text); }
.fb__drive output { font-size: 15px; color: var(--bright); font-variant-numeric: tabular-nums; }
.fb__drive i { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; background: var(--line-hi); }
.fb__drive em { display: block; height: 100%; background: #a98bff; transform-origin: left; transform: scaleX(0); transition: transform .12s; }
.fb__drive.is-on b { color: var(--amber); }
.fb__drive.is-on em { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* the console */
.fb__console {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 16px;
  padding: 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
}
.fb__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-hi); }
.fb__tab {
  padding: 9px 4px;
  font: inherit; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--dim); background: transparent;
  border: 0; border-right: 1px solid var(--line-hi);
  cursor: pointer;
}
.fb__tab:last-child { border-right: 0; }
.fb__tab[aria-selected="true"] { color: var(--on-accent); background: var(--amber); }
.fb__tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fb__pane { display: flex; flex-direction: column; gap: 10px; }
.fb__pane[hidden] { display: none; }
.fb__label { margin: 0; font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.fb__note { margin: 0; max-width: 78ch; font-size: 12px; line-height: 1.6; color: var(--dim); }

.fb__senses { display: flex; flex-direction: column; gap: 6px; }
.fb__sense { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fb__sense-name { width: 58px; font-size: 10px; letter-spacing: .18em; color: #a98bff; }

.fb__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb__chip {
  position: relative;
  padding: 6px 10px;
  font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-hi);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.fb__chip small { margin-left: 3px; font-size: 9.5px; color: var(--dim); }
.fb__chip:hover { border-color: var(--amber); color: var(--amber); }
.fb__chip[aria-pressed="true"] { color: var(--on-accent); background: #a98bff; border-color: #a98bff; }
.fb__chip[aria-pressed="true"] small { color: var(--on-accent); }
.fb__chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fb__chip--sugar { color: #3ddc84; } .fb__chip--bitter { color: #ff6b6b; } .fb__chip--water { color: #4db8ff; }
.fb__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fb__file:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }

.fb__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb__row input[type="range"] { flex: 1; min-width: 100px; accent-color: var(--amber); }
.fb__mini { flex: 0 0 auto; min-width: 116px; font-size: 10.5px; letter-spacing: .12em; color: var(--dim); }
.fb__mini output { color: var(--amber); font-variant-numeric: tabular-nums; }

.fb__meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fb__meters div { position: relative; display: flex; justify-content: space-between; padding: 8px 10px 12px; background: var(--void); border: 1px solid var(--line-hi); font-size: 10.5px; letter-spacing: .12em; color: var(--dim); }
.fb__meters output { color: var(--bright); font-variant-numeric: tabular-nums; }
.fb__meters i { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; background: var(--amber); transform-origin: left; transform: scaleX(0); }

.fb__switches { display: flex; flex-direction: column; gap: 10px; }
.fb__switch { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.55; color: var(--dim); cursor: pointer; }
.fb__switch input { margin-top: 3px; accent-color: var(--amber); }
.fb__switch b { margin-right: 6px; font-weight: 400; letter-spacing: .16em; color: var(--text); }

.fb__status { margin: 0; min-height: 1.4em; font-size: 11.5px; color: var(--dim); }
.fb__status.is-bad { color: var(--alert); }

.fb__how { margin-top: 44px; }
.fb__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 820px) { .fb__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fb__cols p {
  margin: 0;
  padding: 14px 16px;
  font-size: 13px; line-height: 1.65; color: var(--dim);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
}
.fb__cols b { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .18em; color: var(--amber); }
.fb__fine { max-width: 82ch; margin: 28px 0 0; font-size: 12px; line-height: 1.7; color: var(--dim); }
.fb__tour { max-width: 960px; margin-top: 36px; }