.rw-midi{--mi-row:12px;--mi-rows:33;--mi-ink:#f4e9dc;--mi-muted:#b9a3b3;background:#19151d;color:var(--mi-ink);padding:44px 16px 52px;container-type:inline-size;font:400 14px/1.5 Arial,Helvetica,sans-serif;scroll-margin-top:20px}.rw-midi *{box-sizing:border-box}.rw-midi__inner{max-width:1100px;margin:auto}.rw-midi__intro{max-width:650px;margin:0 auto 28px;text-align:center}.rw-midi__eyebrow{font-size:9px;letter-spacing:.18em;font-weight:600;color:#e491bc;margin:0 0 14px}.rw-midi h2{color:inherit;margin:0}.rw-midi__intro>p:not(.rw-midi__eyebrow){font-size:13px;line-height:1.65;color:var(--mi-muted);margin:14px 0}.rw-midi__intro>span{font-size:10px;letter-spacing:.04em;color:#dcc6d5}.rw-midi rewind-midi-player{display:block;max-width:960px;margin:auto}.rw-midi__instrument{background:#28212b;border:1px solid #5c485b;border-radius:9px;overflow:hidden;box-shadow:0 12px 30px #08050a40}.rw-midi__top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 16px}.rw-midi__identity{display:block;font-size:7px;color:#d589b1;letter-spacing:.15em;margin-bottom:6px}.rw-midi [data-midi-title]{font-size:14px;font-weight:600}.rw-midi__tempo{text-align:right}.rw-midi__tempo strong{display:block;font-size:21px;font-weight:500;line-height:1.2;color:#efd5e4}.rw-midi__tempo>span{font-size:7px;letter-spacing:.1em;color:var(--mi-muted)}.rw-midi__roll{display:flex;border-top:1px solid #5e485a;border-bottom:1px solid #5e485a;background:#211b25}.rw-midi__keyboard{width:35px;flex-shrink:0;background:#ccc1b6;z-index:2;box-shadow:3px 0 5px #0004}.rw-midi__keycap{height:29px;display:grid;place-items:center;background:#342936;color:#c3a8bc;font-size:6px;letter-spacing:.1em;border-bottom:1px solid #6c5067}.rw-midi__key{height:var(--mi-row);background:#dfd4c6;border-bottom:1px solid #a89f97;position:relative;color:#50434d;font-size:7px;text-align:right;padding-right:4px;line-height:var(--mi-row)}.rw-midi__key.is-black{background:#352b38;color:#dac9d4;width:73%;box-shadow:1px 1px 1px #0005;border-color:#231d27}.rw-midi__key.is-c{background:#f1e5d5}.rw-midi__scroll{overflow-x:auto;min-width:0;flex:1;scrollbar-width:thin;scrollbar-color:#8f5d7d #211b25;overscroll-behavior-x:contain}.rw-midi__canvas{min-width:640px;width:100%}.rw-midi__ruler{display:grid;grid-template-columns:repeat(var(--mi-bars,4),1fr);height:29px;background:#302534;border-bottom:1px solid #72536a;font-size:9px;color:#ceb4c6}.rw-midi__ruler span{padding:6px 9px;border-left:1px solid #92718a55}.rw-midi__grid{height:calc(var(--mi-rows)*var(--mi-row));position:relative;isolation:isolate;background:repeating-linear-gradient(to right,#b48aa317 0 1px,transparent 1px var(--mi-beat-width,6.25%)),repeating-linear-gradient(to right,#d6a4c22e 0 1px,transparent 1px var(--mi-bar-width,25%))}.rw-midi__pitch-row{height:var(--mi-row);position:absolute;left:0;right:0;border-bottom:1px solid #c99ab012;background:#ffffff02;z-index:-1}.rw-midi__pitch-row.is-black{background:#0000001a}.rw-midi__pitch-row.is-c{border-bottom-color:#e2b3cf40}.rw-midi__notes{position:absolute;inset:0}.rw-midi__note{position:absolute;height:calc(var(--mi-row) - 2px);border-radius:2px;background:#b8498c;border:1px solid #dc85b6;box-shadow:inset 0 1px #f0accb33;min-width:3px;color:#ffe6f4;font-size:6px;line-height:8px;padding-left:3px;overflow:hidden;white-space:nowrap}.rw-midi__note.is-sounding{background:#f0a2cd;border-color:#ffe0f0;color:#462137}.rw-midi__playhead{position:absolute;top:0;bottom:0;left:0;width:1px;background:#f8e5cf;pointer-events:none;z-index:1;will-change:transform}.rw-midi__playhead:before{content:'';position:absolute;top:0;left:-3px;border-top:5px solid #f8e5cf;border-left:3px solid transparent;border-right:3px solid transparent}.rw-midi__pattern-summary{font-size:8px;letter-spacing:.04em;color:#bda5b6;margin:0;padding:9px 16px;border-bottom:1px solid #b08ba32b}.rw-midi__selectors{display:flex;overflow-x:auto;scrollbar-width:thin;gap:0;border-bottom:1px solid #b08ba32b;padding:0 10px}.rw-midi button{font-family:inherit;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}.rw-midi__selectors button{flex:0 0 115px;min-height:60px;border:0;border-bottom:2px solid transparent;background:transparent;color:#bda7b7;text-align:left;padding:10px 8px;font-size:10px;line-height:1.4}.rw-midi__selectors button>span{display:block;color:#9e7b93;font-size:8px;margin-bottom:3px;letter-spacing:.1em}.rw-midi__selectors button[aria-pressed=true]{color:#ffcee9;border-bottom-color:#db71af}.rw-midi__selectors button[aria-pressed=true]>span{color:#e391be}.rw-midi__transport{display:flex;align-items:center;gap:12px;padding:16px 12px}.rw-midi__buttons{display:flex;gap:5px}.rw-midi__buttons button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #97617f;background:transparent;color:#f0bfdb;font-size:17px}.rw-midi [data-midi-play]{background:#a82172;border-color:#c75094;color:#fff1e9;font-size:14px}.rw-midi__progress{flex:1;min-width:0}.rw-midi__progress label{display:block;color:#dfc6d7;font-size:9px;margin-bottom:10px}.rw-midi__progress label>span{display:block;color:#ab91a4;font-size:8px}.rw-midi__progress input{appearance:none;display:block;width:100%;height:2px;background:#705269;margin:0;cursor:pointer}.rw-midi__progress input::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:#edb5d5}.rw-midi__state{font-size:8px;color:#c4a4b9;min-width:32px}.rw-midi :focus-visible{outline:2px solid #f3a7d3;outline-offset:3px}.rw-midi__scroll:focus-visible{outline-offset:-3px}
@container(min-width:750px){.rw-midi__intro{margin-bottom:34px}.rw-midi__intro>p:not(.rw-midi__eyebrow){font-size:14px}.rw-midi__top{padding:22px 26px}.rw-midi [data-midi-title]{font-size:18px}.rw-midi__identity{font-size:8px}.rw-midi__keyboard{width:44px}.rw-midi__key{font-size:8px}.rw-midi__selectors{padding:0 18px}.rw-midi__selectors button{flex:1;min-height:65px;font-size:12px;padding:10px 12px}.rw-midi__transport{padding:20px 26px;gap:20px}.rw-midi__progress label>span{display:inline;margin-left:9px}.rw-midi__state{font-size:10px}.rw-midi__pattern-summary{padding:11px 26px;font-size:9px}}
@media(hover:hover){.rw-midi__selectors button:hover{color:#ffe0ef}.rw-midi__buttons button:hover{border-color:#efbddb}}
@media(prefers-reduced-motion:reduce){.rw-midi__playhead{will-change:auto}}
.rw-midi .rw-midi__key,.rw-midi .rw-midi__pitch-row,.rw-midi .rw-midi__playhead{display:block}
.rw-midi__selectors{scrollbar-color:#8f5d7d #211b25}

.rw-midi__progress [data-midi-preview-label]{display:inline;color:#dfc6d7;font-size:9px;margin:0}

.rw-midi__notes .rw-midi__note{min-width:0;padding:0}

.rw-midi__selectors button{overflow-wrap:break-word}

.rw-midi .rw-midi__intro .rw-midi__preview-intro{font-size:10px;font-style:italic;line-height:1.5;color:#dcc6d5;margin:10px 0 0}

.rw-midi__scroll-indicator{display:block;position:relative;height:5px;margin:6px 12px 6px 47px;border-radius:3px;background:#493443}.rw-midi__scroll-indicator span{position:absolute;top:0;height:100%;border-radius:inherit;background:#c68aac}.rw-midi__scroll-indicator[hidden]{display:none}.rw-midi:has(rewind-scroll-indicator:defined) .rw-midi__scroll{scrollbar-width:none}.rw-midi:has(rewind-scroll-indicator:defined) .rw-midi__scroll::-webkit-scrollbar{display:none}@container(min-width:750px){.rw-midi__scroll-indicator{margin-left:56px}}