/* The site copy of Character Reactor uses the timosam paper, ink and Aegean system.
   Emotion hues remain data colors so the face and its readouts keep their meaning. */
:root {
  --ink: #14181d;
  --muted: #5a6068;
  --paper: #f3f2ee;
  --white: #eeede7;
  --line: #c9c7bf;
  --teal: #0b4e92;
  --blue: #537b9a;
  --ember: #ba7954;
  --violet: #6e2a4a;
  --blush: #bd7282;
}

body.character-reactor {
  background: var(--pap);
  color: var(--ink);
  font: 400 16px/1.65 var(--font-body);
}

.character-reactor .page-frame { margin: 20px; }
.character-reactor .site-header {
  display: block;
  padding: 0;
  background: var(--pap);
  border-bottom: 1px solid var(--hair);
}
.character-reactor .brand-mark span { color: var(--aeg); }
.character-reactor #main-navigation { display: block; }
.character-reactor #main-navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.character-reactor .site-header .container,
.character-reactor .site-footer .container { max-width: 1240px; }
.character-reactor .site-footer {
  display: block;
  margin-top: 0;
  padding: 40px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 0;
}
.character-reactor .footer-content { padding: 0; }
.character-reactor .app-main { max-width: none; min-height: 65vh; padding: 54px 0 76px; }
.character-reactor .app-main > .container { max-width: 1240px; }
.character-reactor .project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 38px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.character-reactor .project-links a { color: var(--aeg); }
.character-reactor #connection { color: var(--aeg); }
.character-reactor .project-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--muted);
  font: 400 12px/1.6 var(--font-code);
}
.character-reactor .intro { gap: 40px 64px; margin-bottom: 42px; }
.character-reactor .intro > p { max-width: 42ch; color: var(--muted); line-height: 1.8; }
.character-reactor .eyebrow {
  color: var(--aeg);
  font: 400 11px/1.6 var(--font-code);
  letter-spacing: .08em;
}
.character-reactor h1,
.character-reactor h2,
.character-reactor h3,
.character-reactor .speech-controls strong,
.character-reactor .character-heading h3,
.character-reactor .pose-caption strong {
  color: var(--ink);
  font-family: var(--font-heading);
  font-synthesis: none;
  letter-spacing: -.035em;
}
.character-reactor h1 {
  max-width: 15ch;
  margin: 8px 0;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 600;
  line-height: 1.04;
}
.character-reactor h2 { font-size: clamp(30px, 3.5vw, 46px); font-weight: 500; }
.character-reactor h3 { font-size: 22px; font-weight: 500; }
.character-reactor .input-room,
.character-reactor .character,
.character-reactor .workshop-grid,
.character-reactor .rig-inspector,
.character-reactor .stage-tools {
  border-radius: 1px;
  box-shadow: none;
}
.character-reactor .input-room {
  padding: 24px 30px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--aeg);
}
.character-reactor .input-top > label { font-weight: 500; }
.character-reactor .toggle,
.character-reactor .input-bottom label,
.character-reactor .gain-control,
.character-reactor .delivery-controls label,
.character-reactor .pose-top { color: var(--muted); }
.character-reactor input[type="checkbox"] { accent-color: var(--aeg); }
.character-reactor textarea,
.character-reactor .speech-transcript,
.character-reactor .heard-caption {
  color: var(--ink);
  font: 400 18px/1.55 var(--font-body);
}
.character-reactor textarea { min-height: 68px; }
.character-reactor textarea::placeholder { color: #7a7e82; }
.character-reactor #speaker,
.character-reactor select {
  border-radius: 1px;
  border-color: var(--hair);
  background: var(--pap);
  color: var(--ink);
  font-family: var(--font-body);
}
.character-reactor button {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--purple);
  border-radius: 1px;
  background: var(--purple);
  color: white;
  font: 500 13px/1.3 var(--font-body);
  transition: background .15s, color .15s;
}
.character-reactor button:hover { background: #542038; border-color: #542038; }
.character-reactor button:disabled { opacity: .5; }
.character-reactor button.secondary {
  margin-right: 6px;
  background: transparent;
  color: var(--ink);
  border-color: var(--hair);
}
.character-reactor button.secondary:hover { background: var(--sand); color: var(--ink); border-color: var(--hair); }
.character-reactor .text-button {
  min-height: 34px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: transparent;
  color: var(--aeg);
}
.character-reactor .text-button:hover { background: transparent; color: var(--purple); }
.character-reactor button:focus-visible,
.character-reactor input:focus-visible,
.character-reactor select:focus-visible,
.character-reactor summary:focus-visible,
.character-reactor textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.character-reactor #feedback,
.character-reactor .fine-print,
.character-reactor .description,
.character-reactor .trust,
.character-reactor .workshop-intro { color: var(--muted); }
.character-reactor .stage-heading { margin: 42px 0 20px; }
.character-reactor .stage-heading > span,
.character-reactor .stage-readout,
.character-reactor .stage-readout > div > strong,
.character-reactor .emotion-name small,
.character-reactor .behavior small,
.character-reactor .slider-label output,
.character-reactor .delivery-controls output,
.character-reactor .channel-control output,
.character-reactor .rig-inspector summary span,
.character-reactor #speech-latency,
.character-reactor .gain-control output,
.character-reactor .character-role,
.character-reactor .channel-group h4,
.character-reactor pre {
  font-family: var(--font-code);
}
.character-reactor .stage-heading > span,
.character-reactor .stage-readout,
.character-reactor .emotion-name small,
.character-reactor .behavior small,
.character-reactor .slider-label output,
.character-reactor .delivery-controls output,
.character-reactor .channel-control output,
.character-reactor .rig-inspector summary span,
.character-reactor .gain-control output,
.character-reactor .character-role,
.character-reactor .channel-group h4 { color: var(--muted); }
.character-reactor .stage-tools,
.character-reactor .rig-inspector {
  padding: 16px 20px;
  border-color: var(--hair);
  background: #eeede7;
}
.character-reactor .character { border-color: var(--hair); background: var(--white); }
.character-reactor .character-heading h3 { font-size: 29px; font-weight: 500; }
.character-reactor .character-role { color: var(--actor); }
.character-reactor .portrait-stage {
  background: radial-gradient(ellipse at 48% 40%, #f3f2ee 0, #e5e3dc 68%, #d9d7ce 100%);
  border-radius: 1px;
}
.character-reactor .character:nth-child(2) .portrait-stage {
  background: radial-gradient(ellipse at 48% 40%, #f0f2ec 0, #e2e6dc 68%, #d6dbcf 100%);
}
.character-reactor .character-copy { padding-top: 20px; }
.character-reactor .track { background: #d8d6cf; border-radius: 1px; }
.character-reactor .fill { border-radius: 1px; }
.character-reactor .behavior { border-color: var(--hair); }
.character-reactor .workshop { border-color: var(--hair); }
.character-reactor .preview-badge {
  padding: 6px 10px;
  border: 1px solid #c9b9c0;
  border-radius: 1px;
  background: #eee6e9;
  color: var(--purple) !important;
}
.character-reactor .workshop-grid { border-color: var(--hair); background: var(--white); }
.character-reactor .pose-stage { background: #e8e6df; }
.character-reactor .pose-caption strong { font-size: 24px; font-weight: 500; }
.character-reactor .preset-buttons button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--hair);
  border-radius: 1px;
  background: var(--pap);
  color: var(--ink);
  font-size: 12px;
}
.character-reactor .preset-buttons button.active { background: var(--aeg); border-color: var(--aeg); color: white; }
.character-reactor .mixer { padding: 28px 32px; }
.character-reactor input[type="range"] { background: #c9c7bf; accent-color: var(--aeg); }
.character-reactor input[type="range"]::-webkit-slider-thumb { border-color: var(--pap); background: var(--aeg); box-shadow: 0 0 0 1px var(--aeg); }
.character-reactor input[type="range"]::-moz-range-thumb { border-color: var(--pap); background: var(--aeg); }
.character-reactor .emotion-control[data-emotion="joy"] input::-webkit-slider-thumb { background: var(--ember); box-shadow: 0 0 0 1px var(--ember); }
.character-reactor .emotion-control[data-emotion="shame"] input::-webkit-slider-thumb { background: var(--blush); box-shadow: 0 0 0 1px var(--blush); }
.character-reactor .emotion-control[data-emotion="sadness"] input::-webkit-slider-thumb { background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.character-reactor .decision { border-radius: 1px; background: #e5e7e5; }
.character-reactor .decision h3 span { color: var(--aeg); }
.character-reactor .answer { border-color: var(--hair); }
.character-reactor pre { border-radius: 1px; background: #e7e6df; color: var(--ink); }
.character-reactor #raw { background: #e7e6df; }
.character-reactor .speech-room { border-color: var(--hair); }
.character-reactor .speech-controls strong { font-size: 21px; font-weight: 500; }
.character-reactor .speech-transcript { border-color: var(--hair); }
.character-reactor .speech-room[data-listening="true"] #mic-start { background: var(--aeg); border-color: var(--aeg); }
.character-reactor .speech-room[data-listening="true"] .speech-transcript { border-color: var(--aeg); }
.character-reactor .site-footer .footer-content { align-items: center; gap: 12px 32px; }

@media (max-width: 800px) {
  .character-reactor .page-frame { margin: 10px; }
  .character-reactor .app-main { padding: 36px 0 54px; }
  .character-reactor .app-main > .container { padding: 0 24px; }
  .character-reactor .site-header .container { padding: 0 24px; }
  .character-reactor .site-header .header-content > div:first-child > div:first-child { column-gap: 14px; }
  .character-reactor #main-navigation { display: block; padding: 10px 0 14px; }
  .character-reactor #main-navigation ul { justify-content: flex-start; gap: 0 20px; flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .character-reactor .app-main > .container { padding: 0 16px; }
  .character-reactor .site-header .container { padding: 0 16px; }
  .character-reactor .project-status { align-items: flex-start; flex-direction: column; gap: 2px; }
  .character-reactor .input-room { padding: 18px; }
  .character-reactor .project-links { gap: 8px 16px; }
  .character-reactor .intro { gap: 10px; }
  .character-reactor .mixer { padding: 22px 20px; }
}