/* Real keycaps over the existing cloud photograph. Motion is controlled locally. */
.how-flow .shortcut-keys kbd{position:relative;display:block;border:0;background:#c6c09d;box-shadow:0 14px 20px -12px #40566a65;overflow:visible}
.how-flow .key-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #eee8c9;border-radius:inherit;background:linear-gradient(155deg,#fffef2,#fff7cd);transform:translateY(-7px);box-shadow:inset 0 2px 0 #ffffff}
.how-flow .hold-hint{display:flex;align-items:center;gap:7px}
.how-flow .hold-hint::before{content:'';width:5px;height:5px;border-radius:50%;background:#547176}
.how-flow .how-art{overflow:hidden}
.how-flow .how-word{display:inline-block}
.how-flow .how-line{display:block}
.how-flow .how-motion-track{position:absolute;bottom:0;left:0;right:0;height:3px;background:#d9e3e84d;overflow:hidden}
.how-flow .how-motion-track i{display:block;height:100%;background:#b4bc19;transform:scaleX(0);transform-origin:left}
.how-flow .voice-progress::before{width:100%;transform:scaleX(var(--voice-fill,.68));transform-origin:left}
.how-flow .how-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.how-flow .how-controls .flow-footnote{margin:0}
.how-replay{display:inline-flex;align-items:center;gap:7px;padding:8px 0;color:#375563;background:transparent;border:0;border-bottom:1px solid #b9c8c9;font:500 11px/1.4 Inter,sans-serif;cursor:pointer}
.how-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.how-replay:hover{color:#122f3a;border-color:currentColor}
.how-replay[hidden]{display:none}
.how-replay:focus-visible{outline:3px solid #315f79;outline-offset:5px;border-radius:2px}
.how-flow .voice-bars i{animation:none}
@media(max-width:700px){.how-flow .how-controls{gap:10px}.how-flow .how-controls .flow-footnote{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.how-flow .key-face{transform:none}.how-flow .how-motion-track i{transform:scaleX(1)}}