#companion-studio {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  min-height: 460px;
  margin-top: 56px;
  overflow: hidden;
  border: 1px solid #30312c;
  border-radius: 2px;
  background: #0d0d0c;
  color: #deded5;
  isolation: isolate;
}

#companion-studio,
#companion-studio * { box-sizing: border-box; }

#companion-studio .companion-playground {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 28px;
  background:
    radial-gradient(ellipse at 50% 42%, #c8d4b90c, transparent 67%),
    linear-gradient(#c8d4b904 1px, transparent 1px),
    linear-gradient(90deg, #c8d4b904 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}

[data-companion] .companion-stage-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  width: 100%;
  color: #93998b;
  font: 10px/1.6 var(--mono, monospace);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

[data-companion] .companion-avatar {
  display: block;
  flex: none;
  width: min(100%, 340px);
  height: auto;
  overflow: visible;
  transform-origin: 50% 60%;
}

[data-companion] .companion-silhouette { fill: var(--mascot-color, #deded5); }
[data-companion] .companion-body {
  transform-origin: 200px 240px;
  animation: companion-breathe 5.8s ease-in-out infinite;
}
[data-companion] .companion-shadow {
  fill: #000;
  opacity: 0.3;
  transform-origin: center;
  transform-box: fill-box;
  animation: companion-shadow 5.8s ease-in-out infinite;
}
[data-companion] .companion-eyes {
  fill: var(--mascot-ink, #151614);
  transform-origin: 200px 149px;
  transition: transform 140ms ease-out;
}
[data-companion] .companion-eye-left { transform-origin: 166px 149px; }
[data-companion] .companion-eye-right { transform-origin: 234px 149px; }
[data-companion] .companion-happy-left,
[data-companion] .companion-happy-right {
  display: none;
  fill: none;
  stroke: var(--mascot-ink, #151614);
  stroke-width: 17px;
  stroke-linecap: round;
}
[data-companion][data-expression="curious"] .companion-eye-left { transform: translateY(-7px) scaleY(1.08); }
[data-companion][data-expression="curious"] .companion-eye-right { transform: translateY(6px) scaleY(0.83); }
[data-companion][data-expression="sleepy"] .companion-eye-left,
[data-companion][data-expression="sleepy"] .companion-eye-right { transform: translateY(17px) scaleY(0.38); }
[data-companion][data-expression="wink"] .companion-eye-right { transform: translateY(6px) scaleY(0.13); }
[data-companion][data-expression="happy"] .companion-eye-left,
[data-companion][data-expression="happy"] .companion-eye-right,
[data-companion][data-expression="love"] .companion-eye-left,
[data-companion][data-expression="love"] .companion-eye-right { display: none; }
[data-companion][data-expression="happy"] .companion-happy-left,
[data-companion][data-expression="happy"] .companion-happy-right { display: block; }
[data-companion] .companion-love-left,
[data-companion] .companion-love-right { display: none; }
[data-companion][data-expression="love"] .companion-love-left,
[data-companion][data-expression="love"] .companion-love-right { display: block; }
[data-companion][data-expression="surprised"] .companion-eye-left,
[data-companion][data-expression="surprised"] .companion-eye-right { transform: scale(1.18, 1.2); }
[data-companion][data-expression="focused"] .companion-eye-left,
[data-companion][data-expression="focused"] .companion-eye-right { transform: scale(0.8, 0.55); }
[data-companion][data-expression="skeptical"] .companion-eye-left { transform: translateY(-9px) rotate(-12deg) scaleY(0.85); }
[data-companion][data-expression="skeptical"] .companion-eye-right { transform: translateY(12px) scaleY(0.32); }
[data-companion][data-expression="angry-lite"] .companion-eye-left { transform: rotate(-22deg) scaleY(0.55); }
[data-companion][data-expression="angry-lite"] .companion-eye-right { transform: rotate(22deg) scaleY(0.55); }
[data-companion][data-expression="side-eye"] .companion-eye-left { transform: translateX(12px) scale(0.75, 0.6); }
[data-companion][data-expression="side-eye"] .companion-eye-right { transform: translateX(12px) scale(0.75, 0.85); }
[data-companion][data-blinking="true"] .companion-eyes { transform: scaleY(0.08); transition-duration: 65ms; }
[data-companion][data-gesture="tilt"] .companion-avatar { animation: companion-tilt 1.5s ease-in-out both; }

#companion-studio .companion-hint {
  margin: 0;
  color: #96978f;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}
#companion-studio #companion-motion {
  margin-top: 12px;
  padding: 8px 12px;
  color: #aab29f;
  font-size: 11px;
  background: transparent;
  border: 1px solid #34372e;
  border-radius: 999px;
}
#companion-studio #companion-motion[hidden] { display: none; }
#companion-studio #companion-motion:disabled { cursor: default; color: #96978f; }

#companion-studio .companion-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  min-width: 0;
  padding: clamp(22px, 3vw, 40px);
  border-left: 1px solid #30312c;
  background: #11120f;
}
#companion-studio .companion-control-group { min-width: 0; margin: 0; padding: 0; border: 0; }
#companion-studio .companion-control-group h3 {
  margin: 0 0 12px;
  color: #92978a;
  font: 10px/1.5 var(--mono, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#companion-studio .companion-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
#companion-studio button {
  max-width: 100%;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#companion-studio .companion-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #35372f;
  border-radius: 4px;
  background: #171813;
  color: #aaada2;
  font-size: 12px;
}
#companion-studio .companion-controls button:hover { border-color: #69715e; color: #e1e5d9; }
#companion-studio .companion-controls button[aria-pressed="true"] {
  border-color: #a5b297;
  background: #272d22;
  color: #e2e8d9;
  box-shadow: inset 0 0 0 1px #a5b297;
}
#companion-studio button:focus-visible { outline: 2px solid #c8d4b9; outline-offset: 4px; }
#companion-studio .companion-swatches button span[style*="--swatch"] {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  background: var(--swatch);
}
#companion-studio #companion-status {
  min-height: 2.8em;
  margin: 0;
  color: #959c8c;
  font: 11px/1.4 var(--mono, monospace);
}

/* Keep all animation layers frozen until the controller confirms visibility. */
[data-companion]:not([data-running="true"]) .companion-body,
[data-companion]:not([data-running="true"]) .companion-shadow,
[data-companion]:not([data-running="true"]) .companion-avatar { animation-play-state: paused; }

/* Free-bleed chalk companion: overlay the hero grid so the SVG box cannot
   inflate the row (the painted circle is only 72.5% of the 400 viewBox). */
.revision-hero .hero-layout { overflow: visible; }
.revision-hero .hero-heading { position: relative; z-index: 1; min-width: 0; }
#hero-companion {
  --mascot-color: #deded5;
  --mascot-ink: #151614;
  --hero-mascot-size: calc(min(54vw, 76vh, 980px) * 1.45);
  --hero-mascot-bleed: 0.15;
  /* Silhouette `M200 55` r=145 in a 400 box: 55/400 empty inset on each side. */
  --hero-mascot-face-inset: 0.1375;
  /* Extra optical drop after face-inset align (MASCOT-9: live send-back +10px). */
  --hero-mascot-nudge-y: 10px;
  /* Hang 15% of the visible face: box overflow = padding + bleed * diameter. */
  --hero-mascot-box-bleed: calc(var(--hero-mascot-face-inset) + var(--hero-mascot-bleed) * 0.725);
  /* Containing block is `.revision-hero > .wrap` (position: relative). Absolute
     so the heading alone sizes the grid row; next section moves up. */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  min-width: 0;
  width: var(--hero-mascot-size);
  max-width: none;
  justify-self: end;
  align-self: start;
  margin: 0;
  /* Optical: painted-circle top meets the kicker, then +10px down. */
  transform: translateY(calc(-1 * var(--hero-mascot-face-inset) * var(--hero-mascot-size) + var(--hero-mascot-nudge-y)));
  /* Wrap is centered `min(var(--max), 100vw - 2*pad)`. Negative right margin
     extends from wrap's right edge to the viewport, then the visible-face bleed. */
  margin-right: calc(
    (min(var(--max), 100vw - var(--pad) * 2) - 100vw) / 2
    - var(--hero-mascot-box-bleed) * var(--hero-mascot-size)
  );
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}
#hero-companion .companion-playground {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#hero-companion .companion-stage-head,
#hero-companion .companion-hint { display: none; }
#hero-companion .companion-avatar {
  width: 100%;
  max-width: none;
}
#hero-companion .companion-motion {
  position: absolute;
  left: 6%;
  bottom: 8%;
  z-index: 1;
  margin: 0;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8f9b89;
  font: 11px/1.4 var(--mono, monospace);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
}
#hero-companion .companion-motion:hover,
#hero-companion .companion-motion:focus-visible { opacity: 0.85; }
#hero-companion .companion-motion:focus-visible { outline: 2px solid #c8d4b9; outline-offset: 4px; }
#hero-companion .companion-motion:disabled { cursor: default; }
@media (max-width: 760px) {
  #hero-companion {
    --hero-mascot-size: calc(min(86vw, 58vh, 560px) * 1.45);
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    align-self: start;
  }
}

@keyframes companion-breathe {
  0%, 100% { transform: translateY(3px) rotate(-1deg) scale(1); }
  50% { transform: translateY(-5px) rotate(1deg) scale(1.012, 1.018); }
}
@keyframes companion-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.3; }
  50% { transform: scaleX(0.9); opacity: 0.22; }
}
@keyframes companion-tilt {
  0%, 100% { transform: rotate(0deg); }
  35%, 60% { transform: rotate(6deg); }
}

@media (max-width: 759px) {
  #companion-studio { grid-template-columns: minmax(0, 1fr); }
  #companion-studio .companion-playground { padding: 20px 16px 24px; }
  #companion-studio .companion-avatar { width: min(100%, 300px); }
  #companion-studio .companion-controls { border-left: 0; border-top: 1px solid #30312c; padding: 24px 18px; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-companion] .companion-body,
  [data-companion] .companion-shadow,
  [data-companion] .companion-avatar { animation: none !important; }
}