/* OptimaLifts page: schematic rep loop with a live tempo cue. LOCAL PREVIEW ONLY. */
.rl-demo .rl-demo__frame{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line-2);background:#111a17;aspect-ratio:940/400}
.rl-demo canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.rl-demo__cue{position:absolute;top:16px;left:50%;z-index:1;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 14%,#111a17);color:var(--warn);font:600 14px/1.2 var(--font-body);white-space:nowrap;opacity:0;transform:translate(-50%,-6px);transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1);pointer-events:none}
.rl-demo__cue.is-on{opacity:1;transform:translate(-50%,0)}
.rl-demo__toggle{position:absolute;top:12px;right:12px;z-index:2;height:30px;padding:0 12px;border-radius:7px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--bg-2) 85%,transparent);color:var(--text-2);font:500 12px/1 var(--font-mono);cursor:pointer;transition:border-color .2s,color .2s}
.rl-demo__toggle:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 50%,var(--line-2))}
.rl-demo__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:600px){
  .rl-demo .rl-demo__frame{aspect-ratio:10/9}
  .rl-demo__cue{top:50px;font-size:13px;padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){.rl-demo__cue{transition:none}}
@media print{.rl-demo__toggle{display:none}}