/* A single replay desk: the visitor's view and the event that explains it. */
.monitorly-demo{--mon-line:#aab2a0;--mon-green:#596d39;--mon-red:#a45036;--mon-paper:#f8f8ef;color:var(--ink);border-top:1px solid var(--ink);margin-top:30px;min-width:0}
.monitorly-demo [data-mon-record-time]{display:inline-block;font-variant-numeric:tabular-nums;transform-origin:center}
.monitorly-demo[data-piano-recording=true] [data-mon-record-time]{color:#884727;animation:mon-recording-tick 1s ease-in-out infinite}
.monitorly-demo[data-piano-recording=true] .mon-piano-trace{border-color:#ab6944}
@keyframes mon-recording-tick{0%,32%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(-4px) scale(1.06)}23%{transform:translateY(1px) scale(.98)}}
.monitorly-demo button{font:inherit;color:inherit;cursor:pointer}
.monitorly-demo button:focus-visible,.monitorly-demo input:focus-visible{outline:2px solid #50682d;outline-offset:4px}
.monitorly-demo .mon-topline{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:17px 0;border-bottom:1px solid var(--ink)}
.monitorly-demo .mon-session{display:flex;gap:19px;align-items:center;font:12px var(--font-mono);letter-spacing:.03em}
.monitorly-demo .mon-session i{width:7px;height:7px;background:#839a5b;border-radius:50%}
.monitorly-demo .mon-session b{font-weight:400}
.monitorly-demo .mon-session>span:last-child{color:#737b67}
.monitorly-demo .mon-scenarios{display:flex;gap:5px}
.monitorly-demo .mon-scenarios button{padding:9px 13px;background:transparent;border:1px solid transparent;font:14px var(--font-sans)}
.monitorly-demo .mon-scenarios button[aria-pressed=true]{border-color:var(--ink);background:#e5e9d8}
.monitorly-demo .mon-scenarios button:hover{border-color:#9da68b}
.monitorly-demo .mon-workbench{display:grid;grid-template-columns:1.16fr 1fr;gap:40px;padding:30px 0}
.monitorly-demo .mon-replay{min-width:0;border:1px solid #a3ac94;background:var(--mon-paper)}
.monitorly-demo .mon-window-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #c2c8b6;padding:13px 17px;font:12px var(--font-mono);color:#687454}
.monitorly-demo .mon-window-bar>span:first-child{letter-spacing:3px;font-size:12px;color:#a1ac8e}
.monitorly-demo .mon-recording{color:#9d593e;font-size:12px}
.monitorly-demo .mon-screen{position:relative;min-height:395px;padding:24px 35px 40px;overflow:hidden;background:linear-gradient(122deg,#fafbf4 15%,#e9efdc)}
.monitorly-demo .mon-app-brand{font:700 15px var(--font-sans);letter-spacing:-.02em;display:flex;justify-content:space-between;width:100%}
.monitorly-demo .mon-app-brand>span{font-size:20px;color:#748756}
.monitorly-demo .mon-screen h3{font:900 clamp(32px,3.5vw,50px)/1.02 var(--font-display);letter-spacing:-.04em;margin:27px 0 12px;max-width:100%}
.monitorly-demo .mon-app-description{font:14px/1.5 var(--font-sans);color:#6d775e;margin:0}
.monitorly-demo .mon-form{margin-top:25px;max-width:330px}
.monitorly-demo .mon-field-label{font:14px var(--font-sans)}
.monitorly-demo .mon-field{font:14px var(--font-sans);border:1px solid #9fa98f;padding:13px 12px;margin-top:8px;background:#fdfdf8;min-height:44px;transition:border-color .2s}
.monitorly-demo .mon-field.is-empty{color:#89917c}
.monitorly-demo .mon-form-error{font:14px/1.5 var(--font-sans);color:var(--mon-red);margin:7px 0 13px;min-height:15px}
.monitorly-demo .mon-submit{display:flex;justify-content:space-between;align-items:center;background:#2e3826;color:#f3f6eb;padding:12px 15px;font:14px var(--font-sans)}
.monitorly-demo .mon-submit>b{font-weight:400;font-size:18px;line-height:1}
.monitorly-demo .mon-screen-label{position:absolute;bottom:14px;left:35px;color:#899279;font:12px var(--font-mono);letter-spacing:.07em}
.monitorly-demo .mon-pointer{position:absolute;left:73%;top:66%;width:19px;filter:drop-shadow(2px 3px 1px #1d281d22);transition:top .35s,left .35s;transform:rotate(-10deg);pointer-events:none}
.monitorly-demo .mon-pointer svg{width:100%;fill:#2e3826;stroke:#fff;stroke-width:1.5}
.monitorly-demo [data-mon-phase="1"] .mon-pointer,.monitorly-demo [data-mon-phase="2"] .mon-pointer{left:68%;top:82%}
.monitorly-demo [data-mon-phase="2"] .mon-field{border-color:#c48069;background:#fff8f3}
.monitorly-demo .mon-moments{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #a3ac94}
.monitorly-demo .mon-moments button{border:0;border-right:1px solid #b9c1aa;background:transparent;text-align:left;padding:14px;font:14px var(--font-sans);position:relative;min-width:0}
.monitorly-demo .mon-moments button:last-child{border-right:0}
.monitorly-demo .mon-moments button>span{font:12px var(--font-mono);display:block;margin-bottom:5px;color:#63784a}
.monitorly-demo .mon-moments button>small{display:block;font:12px var(--font-mono);color:#8b927e;margin-top:7px}
.monitorly-demo .mon-moments button[aria-pressed=true]{background:#dfe9cb}
.monitorly-demo .mon-moments button[aria-pressed=true]:before{content:"";height:3px;background:#668840;position:absolute;top:0;left:0;right:0}
.monitorly-demo .mon-evidence{min-width:0;display:flex;flex-direction:column}
.monitorly-demo .mon-evidence-heading{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--mon-line);padding:5px 0 19px;font:12px/1.6 var(--font-mono);color:#677452}
.monitorly-demo .mon-evidence-heading>span:last-child{font:25px/1 var(--font-sans);color:#677452}
.monitorly-demo .mon-event-list{list-style:none;margin:0;padding:0}
.monitorly-demo .mon-event-list li{border-bottom:1px solid #c3c8b8;transition:opacity .2s}
.monitorly-demo .mon-event-list button{border:0;width:100%;display:grid;grid-template-columns:46px 1fr 15px;gap:13px;align-items:center;text-align:left;padding:16px 10px 16px 0;background:transparent;transition:background .2s}
.monitorly-demo .mon-event-list time{font:12px var(--font-mono);color:#737e62}
.monitorly-demo .mon-event-list button>span{font:500 14px var(--font-sans)}
.monitorly-demo .mon-event-list small{display:block;font:12px/1.5 var(--font-mono);font-weight:400;color:#7b856d;margin-top:5px;overflow-wrap:anywhere}
.monitorly-demo .mon-event-list button>b{font:14px var(--font-sans);color:#788866}
.monitorly-demo .mon-event-list [aria-current=step]{background:#e7eadc}
.monitorly-demo .mon-event-list .mon-failure-event [aria-current=step]{background:#eadbce;color:#85472e}
.monitorly-demo .mon-failure-event [aria-current=step]>b{color:#a45036}
.monitorly-demo .mon-event-list .is-future{opacity:.36}
.monitorly-demo .mon-event-list button:hover{background:#e2e7d5;opacity:1}
.monitorly-demo .mon-request-detail{margin-top:auto;padding:18px 0 0;min-height:116px}
.monitorly-demo .mon-request-detail>div{display:flex;justify-content:space-between;align-items:center;gap:15px;font:12px var(--font-mono);color:#78836a}
.monitorly-demo .mon-request-detail strong{font:700 28px/1 var(--font-sans);letter-spacing:-.04em;color:#879477}
.monitorly-demo .mon-request-detail[data-state=failed] strong{color:#aa5337}
.monitorly-demo .mon-request-detail p{font:14px/1.65 var(--font-sans);max-width:380px;margin:10px 0 0;color:#626b56}
.monitorly-demo .mon-transport{display:grid;grid-template-columns:91px 1fr 52px;gap:25px;align-items:center;border-block:1px solid var(--ink);padding:18px 0}
.monitorly-demo .mon-play{display:flex;align-items:center;gap:9px;padding:0;border:0;background:transparent;font:14px var(--font-sans)}
.monitorly-demo .mon-play>span:first-child{width:34px;height:34px;border:1px solid #819464;background:#d9f27b;border-radius:50%;display:grid;place-items:center;font:18px var(--font-sans);padding-bottom:2px}
.monitorly-demo .mon-scrubber{min-width:0}
.monitorly-demo .mon-scrubber label{display:flex;justify-content:space-between;gap:10px;font:12px var(--font-mono);color:#63734e}
.monitorly-demo .mon-scrubber output{color:#41542e;white-space:nowrap}
.monitorly-demo .mon-scrubber input{appearance:none;-webkit-appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;margin:9px 0 2px;accent-color:#657d43}
.monitorly-demo .mon-scrubber input::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,#7b9457 0 var(--mon-progress),#d2d8c4 var(--mon-progress) 100%)}
.monitorly-demo .mon-scrubber input::-moz-range-track{height:4px;background:#d2d8c4}
.monitorly-demo .mon-scrubber input::-moz-range-progress{height:4px;background:#7b9457}
.monitorly-demo .mon-scrubber input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:17px;background:#4c6433;margin-top:-6px;border:2px solid var(--paper);box-shadow:0 0 0 1px #4c6433}
.monitorly-demo .mon-scrubber input::-moz-range-thumb{width:7px;height:15px;background:#4c6433;border:2px solid var(--paper);border-radius:0}
.monitorly-demo .mon-scrubber>div{display:flex;justify-content:space-between;font:12px var(--font-mono);color:#8a9479;gap:6px}
.monitorly-demo .mon-speed{font:400 22px var(--font-sans);text-align:right}
.monitorly-demo .mon-speed small{display:block;font:12px var(--font-mono);margin-top:3px;color:#7a846c}
.monitorly-demo .mon-finding{display:grid;grid-template-columns:110px 1fr 30px;gap:20px;align-items:start;padding:24px 0 30px;border-bottom:1px solid #aab2a0}
.monitorly-demo .mon-finding>span:first-child{font:12px/1.5 var(--font-mono);color:#687956;padding-top:6px}
.monitorly-demo .mon-finding h4{font:700 21px/1.25 var(--font-sans);letter-spacing:-.035em;margin:0}
.monitorly-demo .mon-finding p{font:14px/1.6 var(--font-sans);color:#6a735c;margin:8px 0 0}
.monitorly-demo .mon-finding>span:last-child{font:25px var(--font-sans);text-align:right;color:#69824b}
.monitorly-demo .mon-footnote{display:flex;justify-content:space-between;gap:20px;font:14px/1.5 var(--font-sans);color:#7c856d;margin-top:12px}
.monitorly-demo .mon-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.monitorly-demo .mon-workbench{gap:24px}.monitorly-demo .mon-screen{padding-inline:23px}.monitorly-demo .mon-screen-label{left:23px}.monitorly-demo .mon-moments button{padding:12px 10px}.monitorly-demo .mon-event-list button{gap:9px;grid-template-columns:39px 1fr 12px}.monitorly-demo .mon-event-list button>span{font-size:12px}.monitorly-demo .mon-event-list small{font-size:12px}.monitorly-demo .mon-request-detail p{font-size:12px}}
@media(max-width:760px){
 .monitorly-demo{margin-top:24px}.monitorly-demo .mon-topline{align-items:flex-start;gap:15px;flex-direction:column;padding:15px 0}.monitorly-demo .mon-session{font-size:12px;gap:16px;width:100%;justify-content:flex-start}.monitorly-demo .mon-session>span:last-child{margin-left:auto}.monitorly-demo .mon-scenarios{width:100%;gap:8px}.monitorly-demo .mon-scenarios button{flex:1;padding:10px 8px;font-size:12px;border-color:#bac3aa}.monitorly-demo .mon-workbench{grid-template-columns:1fr;gap:26px;padding:20px 0}.monitorly-demo .mon-screen{min-height:365px;padding:20px 23px 35px}.monitorly-demo .mon-screen h3{font-size:42px;margin-top:23px}.monitorly-demo .mon-app-description{font-size:12px}.monitorly-demo .mon-form{margin-top:20px;max-width:none}.monitorly-demo .mon-field{font-size:12px;padding:12px}.monitorly-demo .mon-form-error{font-size:12px;min-height:14px;margin-bottom:12px}.monitorly-demo .mon-window-bar{font-size:12px;padding:11px 12px;gap:8px}.monitorly-demo .mon-recording{font-size:12px}.monitorly-demo .mon-moments button{font-size:12px;padding:12px 10px}.monitorly-demo .mon-moments button>span{font-size:12px}.monitorly-demo .mon-moments button>small{font-size:12px}.monitorly-demo .mon-evidence-heading{padding-bottom:12px;font-size:12px}.monitorly-demo .mon-evidence-heading>span:last-child{font-size:21px}.monitorly-demo .mon-event-list button{padding:13px 8px 13px 0;grid-template-columns:43px 1fr 13px}.monitorly-demo .mon-event-list button>span{font-size:12px}.monitorly-demo .mon-event-list small{font-size:12px;margin-top:3px}.monitorly-demo .mon-request-detail{min-height:0;padding-top:15px}.monitorly-demo .mon-request-detail p{font-size:12px;max-width:none}.monitorly-demo .mon-request-detail strong{font-size:26px}.monitorly-demo .mon-transport{grid-template-columns:67px 1fr;gap:15px;padding:16px 0}.monitorly-demo .mon-play{font-size:12px;gap:6px;flex-direction:column}.monitorly-demo .mon-play>span:first-child{width:31px;height:31px}.monitorly-demo .mon-speed{display:none}.monitorly-demo .mon-scrubber label{font-size:12px}.monitorly-demo .mon-scrubber>div{font-size:12px}.monitorly-demo .mon-scrubber>div>span:nth-child(2),.monitorly-demo .mon-scrubber>div>span:nth-child(4){display:none}.monitorly-demo .mon-finding{grid-template-columns:1fr 24px;gap:12px;padding:19px 0 24px}.monitorly-demo .mon-finding>span:first-child{grid-column:1/-1;font-size:12px;padding:0}.monitorly-demo .mon-finding h4{font-size:21px}.monitorly-demo .mon-finding p{font-size:12px}.monitorly-demo .mon-footnote{font-size:12px;gap:12px}
}
@media(prefers-reduced-motion:reduce){.monitorly-demo *{transition:none!important;animation:none!important}}

/* The live instrument supplies a small, real event stream. */
.monitorly-demo .mon-modes{display:flex;border-bottom:1px solid var(--ink);gap:0}
.monitorly-demo .mon-modes>button{display:grid;grid-template-columns:25px 1fr;gap:4px 10px;border:0;border-right:1px solid #b7c0a8;background:transparent;padding:20px 30px 20px 0;min-width:260px;text-align:left;font:600 18px var(--font-sans)}
.monitorly-demo .mon-modes>button+button{padding-left:30px;border-right:0}
.monitorly-demo .mon-modes>button>span{font:12px var(--font-mono);padding-top:6px;color:#6a7e51}
.monitorly-demo .mon-modes>button>small{grid-column:2;font:12px var(--font-mono);color:#7b886a;letter-spacing:.04em}
.monitorly-demo .mon-modes>button[aria-selected=true]{box-shadow:inset 0 -3px #738c4c;color:#40572e}
.monitorly-demo section[hidden],.monitorly-demo [hidden]{display:none!important}
.monitorly-demo .mon-piano-intro{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:31px 0 27px}
.monitorly-demo .mon-piano-intro>div:first-child>span{font:12px var(--font-mono);color:#6f8156}
.monitorly-demo .mon-piano-intro h3{font:700 29px/1.15 var(--font-sans);letter-spacing:-.035em;margin:12px 0 10px}
.monitorly-demo .mon-piano-intro p{font:14px/1.6 var(--font-sans);color:#67745a;max-width:460px;margin:0}
.monitorly-demo .mon-record-state{display:grid;grid-template-columns:7px 1fr;gap:6px 10px;font:14px var(--font-sans);min-width:185px}
.monitorly-demo .mon-record-state i{background:#9aa68b;width:6px;height:6px;border-radius:50%;margin-top:5px}
.monitorly-demo .mon-record-state.is-recording i{background:#a7563b;box-shadow:0 0 0 4px #e5cabc}
.monitorly-demo .mon-record-state small{grid-column:2;font:12px var(--font-mono);color:#81906e;margin-top:3px}
.monitorly-demo .mon-piano-layout{display:grid;grid-template-columns:1.8fr 1fr;gap:40px;border-top:1px solid #aeb99c;padding:22px 0 27px}
.monitorly-demo .mon-piano-label{font:12px var(--font-mono);color:#6f8156}
.monitorly-demo .mon-live-instrument{min-width:0}
.monitorly-demo [data-monitor-piano]{border:0;padding:20px 0 0;min-height:137px;margin:0}
.monitorly-demo [data-monitor-piano] .music-piano{width:100%;max-width:480px;height:auto;min-height:170px;aspect-ratio:2.5;border:7px solid #30392b;border-top-width:15px;border-bottom-width:8px;border-radius:5px 5px 7px 7px;background:#30392b;box-shadow:0 4px 0 #20271b,0 12px 22px #27331e1a}
.monitorly-demo [data-monitor-piano] .music-white-keys{min-height:147px}
.monitorly-demo [data-monitor-piano] .music-key-white{padding-bottom:17px;border-radius:0 0 3px 3px;border-right-color:#b2b8a6;border-bottom:5px solid #d3d7c8;background:linear-gradient(180deg,#d8ddcf,#fbfcf5 18%,#f8faf0 91%,#edf0e2);box-shadow:inset 0 1px 4px #26331c1a;transition:background .16s,box-shadow .16s,transform .12s}
.monitorly-demo [data-monitor-piano] .music-key-black{width:7.5%;left:calc(var(--key-position)*12.5% - 3.75%);height:62%;padding-bottom:14px;border:1px solid #172012;border-bottom:6px solid #11180d;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#1c2517 0%,#3c4733 24%,#343e2c 74%,#192214 100%);box-shadow:2px 5px 4px #18211155,inset 0 1px 0 #6d785c;transition:background .16s,box-shadow .16s,transform .12s}
.monitorly-demo [data-monitor-piano] .music-key kbd{display:block;font:500 14px/1 var(--font-mono);letter-spacing:0;color:#536144;border:1px solid #b9c2aa;border-radius:4px;padding:5px 6px;min-width:25px;text-align:center;background:#ffffff5c;box-shadow:0 1px 0 #d0d7c3}
.monitorly-demo [data-monitor-piano] .music-key-black kbd{color:#e8eddf;border-color:#87957873;background:#edf4de0c;box-shadow:0 1px 0 #11180d;font-size:13px;padding:4px 5px;min-width:23px}
.monitorly-demo [data-monitor-piano] .music-key-white[aria-pressed=true]{background:linear-gradient(#aabe83,#d1e3ae);border-bottom-width:2px;box-shadow:inset 0 6px 10px #3e522940;transform:translateY(2px)}
.monitorly-demo [data-monitor-piano] .music-key-black[aria-pressed=true]{background:linear-gradient(90deg,#4b6535,#79934e,#425d2d);border-bottom-width:3px;box-shadow:inset 0 3px 6px #283d1d;transform:translateY(2px)}
.monitorly-demo .mon-keyboard-guide{max-width:480px}
.monitorly-demo .mon-keyboard-guide>span{display:block;color:#7c886f;margin-top:3px;font-size:12px}
@media(hover:hover){
 .monitorly-demo [data-monitor-piano] .music-key-white:hover{background:linear-gradient(#d1dcb9,#eef5df);box-shadow:inset 0 0 0 2px #869c5e}
 .monitorly-demo [data-monitor-piano] .music-key-black:hover{background:linear-gradient(90deg,#34432a,#5c7047,#304025);box-shadow:2px 5px 4px #18211155,inset 0 0 0 1px #a6bd7f}
}
.monitorly-demo .mon-live-instrument>p{font:14px/1.5 var(--font-sans);color:#778465;margin:12px 0 0}
.monitorly-demo .mon-live-observation{border-left:1px solid #b4bea5;padding-left:30px;display:flex;gap:25px;align-items:center}
.monitorly-demo .mon-note-readout{min-width:90px}
.monitorly-demo .mon-note-readout>span:first-child{font:12px var(--font-mono);display:block;color:#778c60;white-space:nowrap}
.monitorly-demo .mon-note-readout>strong{font:700 58px/1.15 var(--font-sans);letter-spacing:-.055em;display:block;margin:11px 0 5px;color:#486235}
.monitorly-demo .mon-note-readout>span:last-child{font:14px/1.5 var(--font-sans);color:#6f815b;display:block;max-width:115px}
.monitorly-demo .mon-capture-facts{display:grid;gap:15px;margin:0}
.monitorly-demo .mon-capture-facts dt{font:14px var(--font-sans);color:#758365;margin-bottom:3px}
.monitorly-demo .mon-capture-facts dd{font:500 14px var(--font-sans);margin:0}
.monitorly-demo .mon-piano-trace{border:1px solid #b6c0a8;background:#e8eddf;padding:17px 20px 12px}
.monitorly-demo .mon-trace-heading{display:flex;justify-content:space-between;gap:20px;font:12px var(--font-mono);color:#66804e;margin-bottom:18px}
.monitorly-demo .mon-trace-heading>span:last-child{font:14px var(--font-sans);color:#7b8e66}
.monitorly-demo .mon-note-roll{display:grid;grid-template-columns:25px 1fr;gap:10px;height:234px}
.monitorly-demo .mon-note-axis{display:flex;flex-direction:column;justify-content:space-between;font:12px var(--font-mono);color:#80936b;padding:2px 0}
.monitorly-demo .mon-roll-grid{position:relative;background:repeating-linear-gradient(to right,#a8b99a60 0,#a8b99a60 1px,transparent 1px,transparent 25%),repeating-linear-gradient(to bottom,#b6c4a740 0,#b6c4a740 1px,transparent 1px,transparent 7.6923%);border-right:1px solid #a8b99a60;border-bottom:1px solid #b6c4a740;overflow:hidden}
.monitorly-demo .mon-roll-grid>p{position:absolute;left:0;right:0;top:35%;margin:0;text-align:center;font:600 20px var(--font-sans);letter-spacing:-.03em;color:#8c9d78;pointer-events:none}
.monitorly-demo .mon-roll-grid>p>span{display:block;font:14px var(--font-sans);letter-spacing:0;margin-top:7px;color:#99a78b}
.monitorly-demo .mon-roll-notes{position:absolute;inset:0}
.monitorly-demo .mon-midi-note{position:absolute;min-width:4px;height:7.2%;background:#809e53;border:1px solid #6e8d46;font:12px/1 var(--font-mono);color:#f1f6e7;overflow:hidden;white-space:nowrap;padding:1px 2px;box-sizing:border-box;border-radius:1px}
.monitorly-demo .mon-midi-note.is-held{background:#c29061;border-color:#a47349}
.monitorly-demo .mon-roll-playhead{position:absolute;top:0;bottom:0;width:2px;background:#a34d30;box-shadow:0 0 0 1px #f1f6e750;pointer-events:none}
.monitorly-demo .mon-time-axis{display:flex;justify-content:space-between;padding-left:35px;margin-top:8px;font:12px var(--font-mono);color:#81956c}
.monitorly-demo .mon-piano-controls{display:flex;gap:25px;justify-content:space-between;align-items:center;padding:19px 0 27px;border-bottom:1px solid #aeb99c}
.monitorly-demo .mon-piano-controls>div{display:flex;gap:28px;align-items:center}
.monitorly-demo .mon-piano-controls .mon-play{white-space:nowrap}
.monitorly-demo .mon-piano-controls button:disabled{opacity:.4;cursor:default}
.monitorly-demo .mon-clear{padding:0 0 3px;border:0;border-bottom:1px solid #83946c;background:transparent;font:14px var(--font-sans);white-space:nowrap}
.monitorly-demo .mon-piano-controls>p{font:14px/1.5 var(--font-sans);color:#7c896c;max-width:290px;margin:0;text-align:right}
.monitorly-demo .mon-piano-meaning{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;padding:27px 0 10px}
.monitorly-demo .mon-piano-meaning>span{font:12px var(--font-mono);color:#778b5d}
.monitorly-demo .mon-piano-meaning>p{font:15px/1.55 var(--font-sans);color:#7c886e;margin:0}
.monitorly-demo .mon-piano-meaning strong{font-weight:500;color:#35462a}
.monitorly-demo .mon-piano-meaning>button{padding:0 0 5px;border:0;border-bottom:1px solid #8a9b73;background:transparent;font:14px var(--font-sans)}
@media(max-width:1100px){.monitorly-demo .mon-piano-layout{grid-template-columns:1.4fr 1fr;gap:25px}.monitorly-demo .mon-live-observation{padding-left:20px;gap:18px}.monitorly-demo .mon-piano-meaning{grid-template-columns:100px 1fr}.monitorly-demo .mon-piano-meaning>button{grid-column:2;justify-self:start}.monitorly-demo .mon-note-readout>strong{font-size:48px}}
@media(max-width:760px){
 .monitorly-demo .mon-modes>button{min-width:0;flex:1;font-size:15px;padding:16px 12px 16px 0;grid-template-columns:14px 1fr;gap:5px 5px}.monitorly-demo .mon-modes>button+button{padding-left:13px}.monitorly-demo .mon-modes>button>span{font-size:12px;padding-top:5px}.monitorly-demo .mon-modes>button>small{font-size:12px}.monitorly-demo .mon-piano-intro{display:block;padding:23px 0}.monitorly-demo .mon-piano-intro h3{font-size:26px;margin-top:10px}.monitorly-demo .mon-piano-intro p{font-size:12px}.monitorly-demo .mon-record-state{margin-top:20px;font-size:12px}.monitorly-demo .mon-record-state small{font-size:12px}.monitorly-demo .mon-piano-layout{grid-template-columns:1fr;gap:23px;padding-top:18px}.monitorly-demo [data-monitor-piano]{padding-top:15px;min-height:130px}.monitorly-demo [data-monitor-piano] .music-piano{height:auto;min-height:170px}.monitorly-demo .mon-live-instrument>p{font-size:12px}.monitorly-demo .mon-live-observation{border-left:0;border-top:1px solid #bec8b1;padding:16px 0 0;gap:28px;align-items:flex-start}.monitorly-demo .mon-note-readout>strong{font-size:44px;margin:7px 0 3px}.monitorly-demo .mon-capture-facts{grid-template-columns:1fr 1fr;gap:16px 25px;margin-top:0}.monitorly-demo .mon-capture-facts>div:last-child{grid-column:1/-1}.monitorly-demo .mon-capture-facts dt{font-size:12px}.monitorly-demo .mon-capture-facts dd{font-size:12px}.monitorly-demo .mon-piano-trace{padding:13px 10px 10px}.monitorly-demo .mon-trace-heading{font-size:12px;gap:10px;margin-bottom:14px}.monitorly-demo .mon-trace-heading>span:last-child{font-size:12px}.monitorly-demo .mon-note-roll{grid-template-columns:19px 1fr;gap:6px;height:208px}.monitorly-demo .mon-note-axis{font-size:12px}.monitorly-demo .mon-roll-grid>p{font-size:17px}.monitorly-demo .mon-roll-grid>p>span{font-size:12px}.monitorly-demo .mon-time-axis{padding-left:25px;font-size:12px}.monitorly-demo .mon-midi-note{font-size:12px;padding-inline:1px}.monitorly-demo .mon-piano-controls{display:block;padding:17px 0 21px}.monitorly-demo .mon-piano-controls>div{justify-content:space-between;gap:16px}.monitorly-demo .mon-piano-controls .mon-play{flex-direction:row;gap:9px;font-size:12px}.monitorly-demo .mon-clear{font-size:12px}.monitorly-demo .mon-piano-controls>p{font-size:12px;text-align:left;margin-top:14px;max-width:none}.monitorly-demo .mon-piano-meaning{grid-template-columns:1fr;gap:13px;padding-top:22px}.monitorly-demo .mon-piano-meaning>span{font-size:12px}.monitorly-demo .mon-piano-meaning>p{font-size:13px}.monitorly-demo .mon-piano-meaning>button{grid-column:1;font-size:12px;margin-top:3px}
}
.mon-phrase{display:flex;align-items:baseline;gap:18px;padding:18px 0 0;color:#536540}.mon-phrase[hidden]{display:none}.mon-phrase>span{font:12px var(--font-mono);white-space:nowrap}.mon-phrase ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}.mon-phrase li{font:500 14px var(--font-sans);border:1px solid #c3ccb6;padding:4px 8px;background:#e7ebde;min-width:30px;text-align:center}

/* The secondary tab previews how notes become a captured timeline. */
.monitorly-demo .mon-modes>button[data-mon-mode=piano]{grid-template-columns:25px minmax(0,1fr) 113px;column-gap:10px}
.monitorly-demo .mon-modes>button>.mon-tab-preview{display:flex;align-items:center;gap:10px;grid-column:3;grid-row:1/3;align-self:center;padding:0 0 0 10px;font:inherit}
.monitorly-demo .mon-mini-keys{display:flex;flex-shrink:0;width:69px;height:36px;border:1px solid #a6b195;border-top:3px solid #485c35;background:#f6f7ef}
.monitorly-demo .mon-mini-keys>i{flex:1;position:relative;border-right:1px solid #b7c0a8;transform-origin:top}
.monitorly-demo .mon-mini-keys>i:last-child{border-right:0}
.monitorly-demo .mon-mini-keys>i:is(:nth-child(1),:nth-child(2),:nth-child(4),:nth-child(5),:nth-child(6)):after{content:"";position:absolute;z-index:1;top:0;right:-3px;width:5px;height:19px;background:#34442a;border-radius:0 0 1px 1px}
.monitorly-demo .mon-mini-trace{display:grid;gap:5px;width:23px;flex-shrink:0}
.monitorly-demo .mon-mini-trace>i{height:4px;background:#9cad86;transform-origin:left}
.monitorly-demo .mon-mini-trace>i:nth-child(1){width:65%}.monitorly-demo .mon-mini-trace>i:nth-child(2){width:90%;margin-left:10%}.monitorly-demo .mon-mini-trace>i:nth-child(3){width:50%;margin-left:40%}
.monitorly-demo [data-preview-active=true] .mon-mini-keys>i:nth-child(1){animation:mon-tab-key 1.8s ease infinite}
.monitorly-demo [data-preview-active=true] .mon-mini-keys>i:nth-child(3){animation:mon-tab-key 1.8s .18s ease infinite}
.monitorly-demo [data-preview-active=true] .mon-mini-keys>i:nth-child(5){animation:mon-tab-key 1.8s .36s ease infinite}
.monitorly-demo [data-preview-active=true] .mon-mini-trace>i{animation:mon-tab-trace 1.8s ease infinite}
.monitorly-demo [data-preview-active=true] .mon-mini-trace>i:nth-child(2){animation-delay:.18s}.monitorly-demo [data-preview-active=true] .mon-mini-trace>i:nth-child(3){animation-delay:.36s}
.monitorly-demo #monitorly-piano-session{scroll-margin-top:30px}
@keyframes mon-tab-key{0%,45%,100%{background:#f6f7ef;transform:scaleY(1)}10%,30%{background:#b3c785;transform:scaleY(.94)}}
@keyframes mon-tab-trace{0%,100%{transform:scaleX(.25);opacity:.4}20%,65%{transform:scaleX(1);opacity:1}}
@media(max-width:760px){
 .monitorly-demo .mon-modes>button[data-mon-mode=piano]{grid-template-columns:14px minmax(0,1fr);column-gap:5px}
 .monitorly-demo .mon-modes>button>.mon-tab-preview{grid-column:2;grid-row:3;padding:6px 0 0;gap:8px}
 .monitorly-demo .mon-mini-keys{width:57px;height:29px}
 .monitorly-demo .mon-mini-keys>i:is(:nth-child(1),:nth-child(2),:nth-child(4),:nth-child(5),:nth-child(6)):after{width:5px;right:-3px;height:16px}
 .monitorly-demo .mon-mini-trace{width:21px;gap:4px}.monitorly-demo .mon-mini-trace>i{height:3px}
}
@media(prefers-reduced-motion:reduce){
 .monitorly-demo .mon-tab-preview .mon-mini-keys>i,.monitorly-demo .mon-tab-preview .mon-mini-trace>i{animation:none!important;transition:none!important}
}

@media(max-width:570px){
 .monitorly-demo [data-monitor-piano] .music-key kbd{font-size:13px;min-width:23px;padding:5px 4px}
 .monitorly-demo [data-monitor-piano] .music-key-black kbd{font-size:12px;min-width:18px;padding:4px 2px}
}