/* Live hero player: always uses the app's own dark look. */
.hero-shot.is-live{transform:none;background:#0e1d18;border-radius:20px}
.hero-shot.is-live .hero-fallback{display:none}
.rl{--ink:#eff5e8;--dim:#9db3a7;--lime:#cbff92;--line:#25433a;--well:#132a22;
  color:var(--ink);font:14px/1.4 var(--sans);padding:14px;display:grid;gap:12px}
.rl[hidden]{display:none}
.rl-screen{position:relative;background:#08131a;border-radius:12px;height:190px;overflow:hidden}
.rl-screen canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.rl-badge{position:absolute;top:10px;left:12px;font-size:.68rem;letter-spacing:.16em;color:#9fe3da;
  background:rgba(8,19,26,.7);padding:3px 8px;border-radius:999px}
.rl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 4px}
.rl-transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.rl button{font:inherit;cursor:pointer;border-radius:999px;border:1px solid var(--line);background:var(--well);color:var(--ink);padding:7px 14px}
.rl button:focus-visible,.rl select:focus-visible,.rl input:focus-visible+output,.rl-knob:focus-within .rl-dial{outline:2px solid var(--lime);outline-offset:2px}
.rl .rl-play{background:var(--lime);color:#0b1a12;border-color:var(--lime);font-weight:650;min-width:118px}
.rl-status{flex-basis:100%;margin:2px 0 0;font-size:.78rem;color:var(--dim)}
.rl-knobs{display:flex;gap:16px}
.rl-knob{display:grid;justify-items:center;gap:4px;font-size:.75rem;color:var(--dim);position:relative}
.rl-dial{--size:46px;width:var(--size);height:var(--size);border-radius:50%;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 35% 30%,#3a4d45,#16241f 70%);box-shadow:inset 0 0 0 2px #2b3f37,0 4px 10px rgba(0,0,0,.4);position:relative}
.rl-dial::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:var(--lime);
  transform-origin:50% 17px;transform:rotate(var(--angle,0deg))}
.rl-knob input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.rl-knob output{font:600 .72rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.rl-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;background:var(--well);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.rl-presets{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.rl-presets button[aria-pressed="true"]{background:var(--lime);color:#0b1a12;border-color:var(--lime)}
.rl-field{display:grid;gap:6px;font-size:.78rem;color:var(--dim)}
.rl-field small{font-size:.72rem;color:var(--dim)}
.rl-top{display:flex;justify-content:space-between}
.rl-top output{font:600 .74rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.rl select{font:inherit;color:var(--ink);background:#0d1f19;border:1px solid var(--line);border-radius:999px;padding:7px 12px;width:100%}
.rl input[type=range]{width:100%;accent-color:var(--lime);margin:0}
.rl-ios{grid-column:1/-1;margin:0;font-size:.75rem;color:var(--lime)}
@media (max-width:520px){
  .rl{padding:10px}
  .rl-screen{height:140px}
  .rl-panel{grid-template-columns:1fr}
  .rl-knobs{width:100%;justify-content:space-around}
}