/* /chimera: a throat on a stage and a console to play it. Uses the site's tokens. */

.chi__head { position: relative; }

/* the title glitches between a voice and its echo */
.chi__title {
  position: relative;
  display: inline-block;
  letter-spacing: .12em;
  text-shadow: 0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--cyan) 60%, transparent);
}
.chi__title::before,
.chi__title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(.7 * var(--glow));
}
.chi__title::before { color: var(--alert); animation: chi-wobble 3.2s steps(1) infinite; }
.chi__title::after  { color: var(--amber); animation: chi-wobble 2.7s steps(1) infinite reverse; }
@keyframes chi-wobble {
  0%, 86%, 100% { transform: none; clip-path: inset(0 0 0 0); opacity: 0; }
  88% { transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); opacity: .8; }
  91% { transform: translate(3px, -1px); clip-path: inset(60% 0 8% 0); opacity: .8; }
  94% { transform: translate(-1px, 0); clip-path: inset(30% 0 40% 0); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .chi__title::before, .chi__title::after { animation: none; opacity: 0; }
}

.chi__lede {
  max-width: 64ch;
  margin: 0 0 28px;
  color: var(--dim);
}

.chi__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (min-width: 900px) {
  .chi__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
}

/* ---------- the stage ---------- */

.chi__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 78vh;
  width: 100%;
  background:
    radial-gradient(ellipse at 55% 45%, rgba(53,231,224,.07), transparent 65%),
    rgba(4,6,10,.88);
  border: 1px solid var(--line-hi);
  box-shadow: inset 0 0 60px rgba(0,0,0,.8), var(--lift);
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.chi__stage canvas { display: block; width: 100%; height: 100%; }

.chi__corner {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--dim);
  pointer-events: none;
  white-space: nowrap;
}
.chi__corner--tl { top: 10px; left: 12px; color: var(--cyan); }
.chi__corner--tr { top: 10px; right: 12px; color: var(--amber); font-variant-numeric: tabular-nums; }
.chi__corner--bl { bottom: 10px; left: 12px; }
.chi__corner--br { bottom: 10px; right: 12px; }
@media (max-width: 480px) { .chi__corner--bl { display: none; } }

/* the four brackets round the stage */
.chi__stage::before,
.chi__stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border-color: var(--cyan);
  border-style: solid;
  opacity: .8;
}
.chi__stage::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
.chi__stage::after  { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }

/* audio wants a tap: one big switch until it has had one */
.chi__power {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: auto;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  font: inherit;
  font-family: var(--mono);
  color: var(--cyan);
  background: rgba(4,6,10,.72);
  border: 1px solid rgba(53,231,224,.5);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 8px rgba(53,231,224,.06), 0 0 50px rgba(53,231,224,.25);
  transition: transform .2s, opacity .4s, box-shadow .2s;
}
.chi__power:hover:not(:disabled) { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(53,231,224,.12), 0 0 70px rgba(53,231,224,.4); }
.chi__power:disabled { cursor: progress; color: var(--dim); border-color: var(--line-hi); }
.chi__power:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.chi__power-label { position: relative; z-index: 1; font-size: 11.5px; letter-spacing: .2em; text-align: center; line-height: 1.6; }
.chi__power-ring {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(53,231,224,.45);
  animation: chi-spin 14s linear infinite;
}
.chi__power:disabled .chi__power-ring { animation-duration: 3s; border-color: var(--line-hi); }
@keyframes chi-spin { to { transform: rotate(360deg); } }
.chi__power.is-gone { opacity: 0; pointer-events: none; transform: scale(1.3); }

/* ---------- the console ---------- */

.chi__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
}

.chi__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line-hi);
}
.chi__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;
}
.chi__tab:last-child { border-right: 0; }
.chi__tab[aria-selected="true"] { color: var(--on-accent); background: var(--cyan); }
.chi__tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.chi__pane { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.chi__pane[hidden] { display: none; }

.chi__label { margin: 0; font-size: 11px; letter-spacing: .16em; color: var(--dim); }
.chi__mini { flex: 0 0 auto; min-width: 74px; font-size: 10.5px; letter-spacing: .12em; color: var(--dim); }
.chi__mini output { color: var(--amber); font-variant-numeric: tabular-nums; }

.chi__panel textarea,
.chi__panel select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--void);
  border: 1px solid var(--line-hi);
  border-radius: 0;
}
.chi__panel textarea { resize: vertical; }
.chi__panel select { flex: 1; min-width: 0; padding: 7px 8px; font-size: 13px; }
.chi__panel textarea:focus-visible,
.chi__panel select:focus-visible,
.chi__panel input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.chi__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chi__row input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--cyan); }
.chi__check { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.chi__check input { accent-color: var(--cyan); }

.chi__chips, .chi__bodies { display: flex; flex-wrap: wrap; gap: 6px; }
.chi__chip {
  padding: 5px 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;
}
.chi__chip:hover { border-color: var(--cyan); color: var(--cyan); }
.chi__chip[aria-pressed="true"] { color: var(--on-accent); background: var(--amber); border-color: var(--amber); }
.chi__chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.chi__go {
  padding: 11px 18px;
  font: inherit;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--on-accent);
  background: var(--cyan);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 calc(24px * var(--glow)) color-mix(in srgb, var(--cyan) 45%, transparent);
  transition: filter .15s, transform .1s;
}
.chi__go:hover { filter: brightness(1.12); }
.chi__go:active { transform: translateY(1px); }
.chi__go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chi__go:disabled { opacity: .45; cursor: progress; }

.chi__ipa, .chi__karaoke, .chi__notation {
  min-height: 1.6em;
  margin: 0;
  font-size: 13px;
  color: var(--amber);
  overflow-wrap: anywhere;
}
.chi__karaoke span { color: var(--dim); transition: color .1s, text-shadow .1s; }
.chi__karaoke span.is-on { color: var(--amber); text-shadow: 0 0 10px color-mix(in srgb, var(--amber) 70%, transparent); }
.chi__karaoke span.is-done { color: var(--text); }
.chi__notation { color: var(--dim); font-size: 12px; letter-spacing: .08em; }

.chi__beats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.chi__beat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  font: inherit;
  font-family: var(--mono);
  text-align: left;
  color: var(--text);
  background: var(--void);
  border: 1px solid var(--line-hi);
  cursor: pointer;
}
.chi__beat small { font-size: 10px; letter-spacing: .12em; color: var(--dim); }
.chi__beat:hover { border-color: var(--cyan); }
.chi__beat[aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.chi__beat[aria-pressed="true"] small { color: var(--amber); }

.chi__zoo { display: flex; flex-direction: column; gap: 8px; }
.chi__beast { padding: 10px 12px; background: var(--void); border: 1px solid var(--line-hi); }
.chi__beast h3 { margin: 0; font-family: var(--disp); font-size: 15px; letter-spacing: .06em; color: var(--bright); }
.chi__beast i { display: block; margin: 1px 0 4px; font-size: 11px; color: var(--dim); }
.chi__beast p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--dim); }

.chi__body { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-hi); }

.chi__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chi__stop {
  padding: 8px 14px;
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--alert);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--alert) 55%, transparent);
  cursor: pointer;
}
.chi__stop:hover { background: color-mix(in srgb, var(--alert) 12%, transparent); }
.chi__full { font-size: 11.5px; letter-spacing: .16em; color: var(--cyan); }

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

/* ---------- below ---------- */

.chi__how { margin-top: 44px; }
.chi__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 820px) { .chi__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chi__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(--cyan);
}
.chi__cols b { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .18em; color: var(--cyan); }

.chi__fine { max-width: 80ch; margin: 28px 0 0; font-size: 12px; line-height: 1.7; color: var(--dim); }

.chi__tour { max-width: 960px; margin-top: 36px; }