.rm{padding-block:24px 8px}
.rm-top{max-width:64ch;margin-bottom:18px}
.rm-top p{margin:0}

.rm-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.rm-status{margin:10px 0 0;color:var(--muted);font-size:.92rem}
.rm-error{margin:8px 0 0;color:var(--danger);font-size:.92rem}
.rm-hint{margin:0;color:var(--muted);font-size:.88rem}

.rm-field{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.rm-field input,.rm-field select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;min-width:0}
.rm-field input[type=number]{width:6em}
.rm-check{display:flex;align-items:center;gap:7px;font-size:.92rem}
.rm-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.rm-wave-card{margin-top:16px;gap:12px}
.rm-wave{position:relative;height:150px;border:1px solid var(--line);border-radius:8px;background:var(--bg);overflow:hidden;touch-action:none;cursor:crosshair;user-select:none}
.rm-wave canvas{display:block;position:absolute;inset:0}
.rm-shade{position:absolute;top:0;bottom:0;background:var(--bg);opacity:.62;pointer-events:none}
.rm-shade-left{left:0}
.rm-selection{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 12%,transparent);border-left:2px solid var(--accent);border-right:2px solid var(--accent);cursor:grab}
@supports not (background:color-mix(in srgb,red 10%,transparent)){.rm-selection{background:rgba(11,122,90,.12)}}
.rm-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.7;pointer-events:none}
.rm-handle{position:absolute;top:0;bottom:0;width:14px;margin-left:-7px;padding:0;border:0;border-radius:3px;background:var(--accent);cursor:ew-resize;touch-action:none}
.rm-handle::after{content:"";position:absolute;inset:50% 4px auto;height:18px;margin-top:-9px;border-left:1px solid var(--accent-ink);border-right:1px solid var(--accent-ink);opacity:.8}

.rm-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rm-length{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;margin-top:16px}
.rm-grid>.card{min-width:0;gap:12px}
.rm-slider{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--muted)}
.rm-slider b{color:var(--ink);font-variant-numeric:tabular-nums}
.rm-slider input{width:100%}

.rm-faq{margin-top:32px;max-width:70ch}
.rm-faq h3{margin-top:1.2rem}
.rm-faq li{margin-bottom:.5rem}
.rm-faq ol{padding-left:1.2rem}

@media (max-width:860px){.rm-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .rm-bar{flex-direction:column;align-items:stretch}
  .rm-bar .btn,.rm-bar label.btn{justify-content:center}
  .rm-handle{width:20px;margin-left:-10px}
}
@media (prefers-reduced-motion:reduce){.rm-playhead{transition:none}}
@media print{.no-print,.site-header,.site-footer,.rm-bar,.rm-grid,.rm-wave-card{display:none!important}}