/* How we think · the 21-feet demo. */
.demo-21-feet{font-family:var(--sans);color:var(--paper);overflow:hidden}
.demo-21-feet__controls{display:flex;align-items:end;gap:16px;padding:20px;background:var(--ink-1);border:1px solid var(--line-soft)}
.demo-21-feet__field{flex:1;min-width:180px}
.demo-21-feet__label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--paper-dim)}
.demo-21-feet__value{font-size:16px;color:var(--paper);text-transform:none}
.demo-21-feet__slider{display:block;width:100%;min-height:40px;margin:0;accent-color:var(--signal);cursor:pointer}
.demo-21-feet__quick,.demo-21-feet__actions{display:flex;gap:8px;flex-wrap:wrap}
.demo-21-feet__button{min-height:40px;padding:9px 14px;border:1px solid var(--line);border-radius:0;background:var(--ink-2);color:var(--paper);font:600 13px var(--sans);cursor:pointer}
.demo-21-feet__button:hover{background:var(--ink-3)}
.demo-21-feet__button:focus-visible,.demo-21-feet__slider:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.demo-21-feet__button:disabled,.demo-21-feet__slider:disabled{cursor:not-allowed;opacity:.55}
.demo-21-feet__button--primary{background:var(--signal);border-color:var(--signal);color:var(--ink-on-sig)}
.demo-21-feet__button--primary:hover{filter:brightness(1.07)}
.demo-21-feet__stage{position:relative;padding:20px 12px 8px;background:var(--ink);border:1px solid var(--line-soft);border-top:0}
.demo-21-feet__stage svg{display:block;width:100%;height:auto;min-height:180px}
.demo-21-feet__clock{position:absolute;z-index:1;top:18px;right:20px;display:flex;align-items:baseline;gap:10px;padding:7px 10px;background:var(--ink-1);border:1px solid var(--line-soft);font-family:var(--mono)}
.demo-21-feet__clock-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--paper-dim)}
.demo-21-feet__clock-value{min-width:50px;font-size:15px;text-align:right;color:var(--paper)}
.demo-21-feet__ground,.demo-21-feet__ruler line{stroke:var(--line);stroke-width:2;vector-effect:non-scaling-stroke}
.demo-21-feet__camera rect,.demo-21-feet__camera circle{fill:var(--ink-2);stroke:var(--paper-dim);stroke-width:2;vector-effect:non-scaling-stroke}
.demo-21-feet__camera line{stroke:var(--paper-dim);stroke-width:2;vector-effect:non-scaling-stroke}
.demo-21-feet__figure circle,.demo-21-feet__runner circle{fill:var(--ink);stroke:var(--paper);stroke-width:3;vector-effect:non-scaling-stroke}
.demo-21-feet__figure line,.demo-21-feet__runner line{stroke:var(--paper);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.demo-21-feet__figure{transform-box:view-box;transform-origin:112px 145px}
.demo-21-feet__figure.is-fallen{transform:rotate(-72deg);transition:transform .4s ease-in}
.demo-21-feet__pose{opacity:0}
.demo-21-feet__run-a{opacity:1}
.demo-21-feet__runner.is-frame-b .demo-21-feet__run-a{opacity:0}
.demo-21-feet__runner.is-frame-b .demo-21-feet__run-b{opacity:1}
.demo-21-feet__runner.is-idle .demo-21-feet__run-a,.demo-21-feet__runner.is-idle .demo-21-feet__run-b{opacity:0}
.demo-21-feet__runner.is-idle .demo-21-feet__idle{opacity:1}
.demo-21-feet__runner.is-hands .demo-21-feet__run-a,.demo-21-feet__runner.is-hands .demo-21-feet__run-b{opacity:0;transition:opacity .3s ease}
.demo-21-feet__runner.is-hands .demo-21-feet__hands{opacity:1;transition:opacity .3s ease}
.demo-21-feet__svg-label,.demo-21-feet__ruler text{fill:var(--paper-dim);font:11px var(--mono);letter-spacing:.04em}
.demo-21-feet__svg-label{transition:opacity .2s}
.demo-21-feet__ruler-label{text-transform:uppercase}
.demo-21-feet__marker{visibility:hidden;color:var(--signal)}
.demo-21-feet__marker.is-alert{visibility:visible;animation:demo-21-feet-flash .55s ease-out 2}
.demo-21-feet__marker line{stroke:var(--signal);stroke-width:2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.demo-21-feet__marker circle{fill:var(--signal)}
.demo-21-feet__alert-label{fill:var(--signal-text);font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.demo-21-feet__actions{padding-top:16px}
.demo-21-feet__result{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(240px,1.2fr);gap:24px;align-items:end;margin-top:20px;padding:20px;border-left:4px solid var(--signal);background:var(--ink-1)}
.demo-21-feet__verdict{min-height:1.05em;font:700 clamp(38px,7vw,74px)/.95 var(--display);text-transform:uppercase;color:var(--paper)}
.demo-21-feet__sentence{max-width:620px;margin:10px 0 0;color:var(--paper-dim);line-height:1.55}
.demo-21-feet__math{margin:0;font:12px/1.6 var(--mono);color:var(--paper-dim)}
@keyframes demo-21-feet-flash{0%{opacity:0}35%{opacity:1}100%{opacity:.45}}
@media(max-width:599px){
  .demo-21-feet__controls{align-items:stretch;flex-direction:column;padding:16px}
  .demo-21-feet__quick{display:grid;grid-template-columns:1fr 1fr}
  .demo-21-feet__stage{padding:54px 0 4px}
  .demo-21-feet__stage svg{width:100%;min-height:0}
  .demo-21-feet__svg-label,.demo-21-feet__ruler text{font-size:15px}
  .demo-21-feet__alert-label{font-size:15px}
  .demo-21-feet__clock{top:12px;right:12px}
  .demo-21-feet__actions{display:grid;grid-template-columns:1fr 1fr}
  .demo-21-feet__result{grid-template-columns:1fr;gap:16px;padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .demo-21-feet__figure.is-fallen,.demo-21-feet__runner.is-hands .demo-21-feet__pose,.demo-21-feet__svg-label{transition:none}
  .demo-21-feet__marker.is-alert{animation:none}
}