.leg-mixer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); background: #102730; color: #fff; border: 1px solid #405760; }
.mixer-fallback { padding: 24px; }
.tilt-visual { padding: 28px; min-width: 0; background: radial-gradient(circle, #78949c35 1px, transparent 1px) 0 0 / 24px 24px, #102730; }
.tilt-visual-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #a6bec6; font: 500 9px/1.5 var(--mono); }
.tilt-robot { display: block; width: 100%; height: auto; margin-block: 18px; overflow: visible; }
.robot-label { font: 500 10px var(--mono); fill: #aec4cc; letter-spacing: 1px; }
.hip-joint { fill: #173c4d; stroke: #afc6d0; stroke-width: 2; }
.knee-joint { fill: #285775; stroke: #c4d8dd; stroke-width: 2; }
.tilt-leg-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tilt-leg-states > div { border-top: 2px solid #81959d; padding-top: 12px; }
.tilt-leg-states span { display: block; font-size: 11px; color: #b2c5cc; }
.tilt-leg-states strong { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; }
.tilt-leg-states small { display: none; color: #94adb7; margin-top: 6px; font: 500 10px var(--mono); }
.leg-mixer:has(.tilt-details[open]) .tilt-leg-states small { display: block; }
.tilt-leg-states [data-direction="compress"] { border-color: #efaa81; }.tilt-leg-states [data-direction="compress"] strong { color: #efaa81; }
.tilt-leg-states [data-direction="extend"] { border-color: #82c8dc; }.tilt-leg-states [data-direction="extend"] strong { color: #82c8dc; }
.tilt-controls { padding: 32px; border-left: 1px solid #405760; }
.tilt-step { color: #efaa81; font: 600 10px/1.5 var(--mono); letter-spacing: .12em; }
.tilt-controls h3 { margin: 8px 0 14px; color: #fff; font-size: 30px; line-height: 1.15; letter-spacing: -.03em; }
.tilt-controls > p { color: #c3d1d5; font-size: 14px; }
.tilt-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.tilt-presets button { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 50px; padding: 10px 12px; color: #e1e9ec; background: #1b3540; border: 1px solid #607c88; border-radius: 4px; font: 600 12px/1.5 var(--sans); cursor: pointer; text-align: left; }
.tilt-presets button:hover { background: #2b4956; border-color: #efaa81; }
.tilt-presets button[aria-pressed="true"] { color: #102128; background: #efb08c; border-color: #efb08c; }
.tilt-controls .tilt-explanation { min-height: 4.5em; margin: 20px 0; padding-left: 14px; border-left: 2px solid #efaa81; color: #fff; font-size: 13px; }
.tilt-sliders { display: grid; gap: 18px; padding-top: 18px; border-top: 1px solid #405760; }
.tilt-sliders label { display: block; font-size: 12px; }
.tilt-sliders output { float: right; color: #efbf9e; font-size: 11px; }
.tilt-sliders input { width: 100%; display: block; min-height: 32px; margin: 6px 0 0; accent-color: #efaa81; cursor: pointer; }
.tilt-endpoints { display: flex; justify-content: space-between; color: #a5bac3; font-size: 10px; }
.tilt-details { margin-top: 24px; border-top: 1px solid #405760; padding-top: 16px; color: #acbfc7; font-size: 11px; }
.tilt-details summary { padding-block: 4px; color: #d4e1e6; cursor: pointer; font-size: 12px; }
.math-summary { display: grid; grid-template-columns: .8fr 1.1fr .8fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
.math-summary label, .math-summary > div > span { display: block; color: #adc3cc; font-size: 12px; }
.math-summary select { display: block; width: 100%; min-height: 42px; padding: 8px; margin-top: 8px; background: #193541; color: white; border: 1px solid #718b96; border-radius: 3px; font: 500 13px var(--sans); }
.math-summary code { display: block; margin-top: 12px; color: #dbe8ed; font: 500 12px/1.7 var(--mono); overflow-wrap: anywhere; }
.math-summary strong { display: block; margin-top: 6px; color: #efb08c; font: 500 24px/1.4 var(--mono); }
.math-summary small { color: #b6cbd2; font-size: 12px; }
.math-expanded { margin-top: 20px; }
.math-expanded > summary { cursor: pointer; padding: 14px 0; color: #e0e9ed; font-size: 13px; border-top: 1px solid #405760; }
.tilt-leg-states .is-followed { outline: 1px solid #c6d8de; outline-offset: 5px; }
.tilt-math { grid-column: 1 / -1; padding: 32px; color: #e0e9eb; background: #0b2029; border-top: 1px solid #405760; min-width: 0; }
.math-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.math-heading h3 { margin: 10px 0 12px; color: white; font-size: clamp(23px, 3vw, 30px); line-height: 1.2; letter-spacing: -.025em; }
.math-heading p { max-width: 620px; margin: 0; color: #b6cbd2; font-size: 13px; }
.math-inputs { display: flex; gap: 12px; }
.math-inputs > div { min-width: 130px; padding: 16px; border: 1px solid #49616b; background: #152e38; }
.math-inputs span { display: block; color: #a9c0c9; font-size: 11px; }
.math-inputs strong { display: block; margin-top: 6px; color: #efb08c; font: 500 26px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.math-scaling { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 16px; margin-top: 28px; padding: 22px 0; border-block: 1px solid #405760; align-items: start; }
.math-step-number { display: grid; place-items: center; width: 26px; height: 26px; color: #102128; background: #9ebdc5; border-radius: 50%; font: 600 12px/1 var(--mono); }
.tilt-math h4 { margin: 0; font-size: 14px; color: #e3ecef; }
.math-scaling p, .math-step-heading p { margin: 6px 0 10px; color: #a9c0c9; font-size: 12px; }
.math-scaling code { font: 500 12px/1.6 var(--mono); color: #d8e6eb; overflow-wrap: anywhere; }
.math-scale-result { display: grid; gap: 8px; text-align: right; }
.math-scale-result span { color: #a9c0c9; font-size: 11px; }
.math-scale-result strong { color: #efb08c; font: 500 24px/1.2 var(--mono); }
.math-step-heading { display: flex; align-items: start; gap: 16px; margin: 24px 0 12px; }
.math-legs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.math-legs article { padding: 18px; background: #152e38; border: 1px solid #49616b; min-width: 0; }
.math-legs h5 { margin: 0 0 12px; color: #e3ecef; font-size: 14px; }
.math-symbolic { color: #bbd0d8; font: 500 15px/1.5 var(--mono); }
.math-substitution { min-height: 3em; color: #a9c0c9; font: 500 11px/1.6 var(--mono); overflow-wrap: anywhere; }
.math-final { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid #49616b; }
.math-final span { color: #b1c6ce; font-size: 11px; }
.math-final code { color: #b1c6ce; font: 500 10px/1.6 var(--mono); }
.math-final strong { color: #d8e6eb; font: 500 25px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.math-movement { color: #b1c6ce; font-size: 11px; margin: 4px 0 18px; }
.math-legs [data-direction="compress"] .math-final strong, .math-legs [data-direction="compress"] .math-movement { color: #efaa81; }
.math-legs [data-direction="extend"] .math-final strong, .math-legs [data-direction="extend"] .math-movement { color: #82c8dc; }
.math-compression { border-top: 1px solid #49616b; padding-top: 12px; }
.math-compression span { display: block; color: #a9c0c9; font-size: 10px; }
.math-compression code { display: block; margin-top: 6px; color: #d8e6eb; font: 500 10px/1.6 var(--mono); overflow-wrap: anywhere; }
.math-joints { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; }
.math-joints dt { color: #a9c0c9; font-size: 10px; }.math-joints dd { margin: 4px 0 0; color: #d8e6eb; font: 500 12px/1.4 var(--mono); }
.math-note { margin: 20px 0 0; color: #9db5bf; font-size: 11px; max-width: 900px; }
@media (max-width: 1100px) { .math-heading { grid-template-columns: 1fr; gap: 20px; } .math-legs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tilt-math { padding: 20px; } .math-scaling { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; } .math-scale-result { grid-column: 2; text-align: left; } .math-legs { grid-template-columns: 1fr; } .math-inputs { flex-wrap: wrap; } .math-inputs > div { min-width: 0; flex: 1; } .math-substitution { min-height: 0; } }
@media (max-width: 980px) {
  .math-summary { grid-template-columns: 1fr 1fr; }
  .tilt-visual { position: sticky; align-self: start; top: 76px; z-index: 5; padding: 12px 20px; border-bottom: 1px solid #405760; }
  .tilt-robot { width: min(100%, 340px); max-height: 200px; margin-block: 4px; }
  .tilt-leg-states { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
  .tilt-leg-states > div { padding-top: 6px; }
  .tilt-leg-states span { font-size: 11px; }.tilt-leg-states strong { font-size: 12px; }
  .tilt-controls { padding: 22px; }
  .tilt-controls > p { margin-block: 12px; }
  .tilt-presets { grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .tilt-presets button { min-height: 44px; font-size: 12px; }
  .tilt-controls .tilt-explanation { min-height: 0; margin-block: 16px; }
  .tilt-sliders { gap: 12px; padding-top: 12px; }
  .tilt-details { margin-top: 16px; padding-top: 10px; }
  .math-heading { grid-template-columns: 1fr; gap: 12px; }
  .math-heading .tilt-step { display: none; }
  .math-heading h3 { font-size: 23px; margin-top: 0; }
  .math-inputs > div { padding: 10px 14px; }
  .math-inputs strong { font-size: 20px; margin-top: 2px; }
}
@media (max-width: 760px) { .tilt-visual { top: 68px; } }
@media (max-width: 980px) { .leg-mixer { grid-template-columns: 1fr; } .tilt-controls { border-left: 0; border-top: 1px solid #405760; } .tilt-robot { margin-inline: auto; } }