.monitorly-demo .mon-web-intro{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:30px 0}
.monitorly-demo .mon-web-intro>div>span{font:12px var(--font-mono);color:#6f8156}
.monitorly-demo .mon-web-intro h3{font:700 32px/1.15 var(--font-sans);letter-spacing:-.035em;margin:11px 0 9px}
.monitorly-demo .mon-web-intro>div>p{font:14px/1.65 var(--font-sans);max-width:485px;color:#67745a;margin:0}
.monitorly-demo .mon-web-prompt{border-left:1px solid #aeb99c;padding-left:22px;font:14px/1.7 var(--font-sans);color:#667653;min-width:205px;margin:0}
.monitorly-demo .mon-web-prompt b{font:12px var(--font-mono);display:block;text-transform:uppercase;color:#40572e;margin-bottom:6px}
.monitorly-demo .mon-live-topline{border-top:1px solid #aab2a0;padding:15px 0}
.monitorly-demo .mon-web-count{display:flex;align-items:center;gap:10px;font:12px var(--font-mono);color:#6f7b60}
.monitorly-demo .mon-web-count b{font-weight:500;color:#354c25;font-size:13px}
.monitorly-demo .mon-web-count .mon-clear{min-height:32px;min-width:72px}
.monitorly-demo .mon-web-count>span{margin-inline:16px;color:#354c25}
.monitorly-demo [data-web-dot][data-recording=true]{background:#b2603b;box-shadow:0 0 0 3px #e7d5c6}
.monitorly-demo .mon-live-workbench{grid-template-columns:1.08fr 1fr}
.monitorly-demo .mon-window-bar>span.mon-browser-label{display:inline-flex;align-items:center;gap:9px;letter-spacing:0;color:#687454}
.monitorly-demo .mon-browser-label svg{display:block;flex:none}
.monitorly-demo .mon-live-screen{min-height:0;padding-bottom:37px}
.monitorly-demo .mon-live-screen h3{margin-top:22px;font-size:clamp(32px,3.2vw,44px)}
.monitorly-demo .mon-live-form{max-width:none;margin-top:22px}
.monitorly-demo .mon-live-form fieldset{margin:0;padding:0;border:0;min-width:0}
.monitorly-demo .mon-live-form input.mon-field{display:block;width:100%;box-sizing:border-box;color:#26351c;outline-offset:2px;font-size:14px}
.monitorly-demo .mon-web-field-hint{font:14px/1.5 var(--font-sans);color:#7a876b;display:block;margin-top:7px}
.monitorly-demo .mon-live-form .mon-workspace-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:19px}
.monitorly-demo .mon-workspace-choice legend{font:14px var(--font-sans);margin-bottom:9px}
.monitorly-demo .mon-workspace-choice>label{display:flex;align-items:flex-start;gap:7px;padding:11px 9px;border:1px solid #bcc5ad;cursor:pointer;font:500 14px var(--font-sans);background:#f7f9f0}
.monitorly-demo .mon-workspace-choice>label:has(input:checked){background:#e4edcf;border-color:#80945e}
.monitorly-demo .mon-workspace-choice small{display:block;font:14px/1.4 var(--font-sans);color:#7c876c;margin-top:4px}
.monitorly-demo .mon-workspace-choice input{accent-color:#5c743f;margin:1px 0 0;width:12px;height:12px;flex-shrink:0}
.monitorly-demo .mon-guide-choice{display:flex;align-items:center;gap:8px;margin-top:15px;font:14px var(--font-sans);cursor:pointer;color:#536641}
.monitorly-demo .mon-guide-choice input{accent-color:#5c743f;width:14px;height:14px;margin:0}
.monitorly-demo .mon-web-feedback{min-height:29px;margin:13px 0 8px;font-size:12px}
.monitorly-demo .mon-web-feedback[data-status=success]{color:#3e6737}
.monitorly-demo .mon-web-feedback[data-status=pending]{color:#6d7c57}
.monitorly-demo .mon-live-form .mon-submit{border:1px solid #2e3826;width:100%;min-height:43px;color:#f3f6eb;font:500 14px var(--font-sans)}
.monitorly-demo .mon-live-form .mon-submit:hover{background:#425436}
.monitorly-demo .mon-live-form fieldset:disabled label{cursor:default}
.monitorly-demo .mon-live-form fieldset:disabled .mon-submit{cursor:default}
.monitorly-demo .mon-live-form input:disabled{opacity:1;-webkit-text-fill-color:#26351c;color:#26351c}
.monitorly-demo .mon-live-form input.mon-field::placeholder{color:#7d8871;-webkit-text-fill-color:#7d8871;opacity:1;font-style:italic}
.monitorly-demo .mon-live-screen[data-web-status=invalid] .mon-field{border-color:#b67053;background:#fff8f3}
.monitorly-demo .mon-live-screen[data-web-status=success] .mon-submit{background:#47673a;border-color:#47673a}
.monitorly-demo .mon-response-option{padding:13px 17px;border-top:1px solid #bcc6ae;display:flex;align-items:center;gap:8px 15px;flex-wrap:wrap;font:14px var(--font-sans);color:#748260}
.monitorly-demo .mon-response-option label{font-size:12px;color:#4d603a}
.monitorly-demo .mon-response-option select{margin-left:auto;max-width:65%;border:0;border-bottom:1px solid #a9b797;background:transparent;font:14px var(--font-sans);padding:4px 18px 4px 0;color:#40572e;border-radius:0}
.monitorly-demo .mon-response-option>span{flex-basis:100%;font-size:12px}
.monitorly-demo .mon-response-option select:focus-visible,.monitorly-demo .mon-web-speed select:focus-visible{outline:2px solid #50682d;outline-offset:3px}
.monitorly-demo .mon-live-events{max-height:375px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9caa86 transparent;position:relative}
.monitorly-demo .mon-live-events button{grid-template-columns:61px 1fr 14px;padding:12px 9px 12px 3px;gap:10px}
.monitorly-demo .mon-live-events button>span{font-size:12px}
.monitorly-demo .mon-live-events small{font-size:12px}
.monitorly-demo .mon-web-empty{padding:32px 22px 35px;border-bottom:1px solid #c3c8b8;min-height:225px;color:#7e8d69;background:linear-gradient(145deg,#e9ecdf70,transparent)}
.monitorly-demo .mon-web-empty>span{font:38px var(--font-sans);color:#94a47b}
.monitorly-demo .mon-web-empty h4{font:600 27px/1.15 var(--font-sans);letter-spacing:-.03em;margin:16px 0 13px;color:#6c7e53}
.monitorly-demo .mon-web-empty p{font:14px/1.7 var(--font-sans);max-width:280px;margin:0}
.monitorly-demo .mon-live-detail{margin-top:auto;padding-top:23px;min-height:105px}
.monitorly-demo .mon-live-detail strong{font:600 14px var(--font-mono);letter-spacing:-.03em}
.monitorly-demo .mon-live-detail p{font-size:12px}
.monitorly-demo .mon-live-pointer{left:0;top:0;width:19px;height:22.9583px;transform:translate(-12.5%,-6.89655%);transition:none;z-index:2}
.monitorly-demo .mon-live-pointer svg{display:block;height:100%}
.monitorly-demo .mon-live-pointer::before{content:"";position:absolute;left:12.5%;top:6.89655%;width:22px;height:22px;border:2px solid #6c8a40;background:#c9df9870;border-radius:50%;transform:translate(-50%,-50%);opacity:0}
.monitorly-demo .mon-live-pointer[data-pressed=true]::before{opacity:1}
.monitorly-demo .mon-replay-focus{outline:2px solid #a7ba72!important;outline-offset:3px}
.monitorly-demo .mon-live-transport{grid-template-columns:150px 1fr 65px}
.monitorly-demo .mon-live-transport .mon-play{font-size:12px;white-space:nowrap}
.monitorly-demo [data-web-play]:disabled,.monitorly-demo [data-web-reset]:disabled{opacity:.4;cursor:default}
.monitorly-demo .mon-web-speed{font:12px var(--font-mono);color:#7d886f;text-transform:uppercase}
.monitorly-demo .mon-web-speed select{display:block;font:500 17px var(--font-sans);border:0;background:transparent;color:#445a32;padding:4px 0;max-width:65px}
.monitorly-demo .mon-live-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;background:#e8ecdc;border:1px solid #b9c4a6;transition:background .2s,border-color .2s}
.monitorly-demo .mon-capture-copy{min-width:0}
.monitorly-demo .mon-capture-copy .mon-session{font:600 20px/1.25 var(--font-sans);letter-spacing:-.02em;gap:10px}
.monitorly-demo .mon-capture-copy p{font:14px/1.5 var(--font-sans);color:#657452;margin:7px 0 10px;max-width:470px}
.monitorly-demo .mon-capture-copy .mon-web-count{font-size:12px}
.monitorly-demo .mon-capture-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.monitorly-demo .mon-capture-primary{min-height:44px;padding:12px 18px;border:1px solid #3d512b;background:#3d512b;color:#f7faee;font:600 14px var(--font-sans);cursor:pointer;white-space:nowrap}
.monitorly-demo .mon-capture-primary:hover{background:#283b1e}
.monitorly-demo .mon-capture-primary:disabled{opacity:.4;cursor:default}
.monitorly-demo .mon-capture-actions .mon-clear{font:14px var(--font-sans);min-height:44px;padding:10px}
.monitorly-demo .mon-capture-primary:focus-visible,.monitorly-demo .mon-inspector-tabs button:focus-visible{outline:2px solid #45612c;outline-offset:4px}
.monitorly-demo .mon-live-topline[data-state=ready]{background:#d7e9ad;border-color:#7f9f4f}
.monitorly-demo .mon-live-topline[data-state=ready] .mon-session{color:#304d1e}
.monitorly-demo .mon-live-topline[data-state=ready] .mon-session i{background:#52772c;box-shadow:0 0 0 4px #c6d99c}
.monitorly-demo [data-web-recording=true] .mon-live-topline{border-color:#a75c38;background:#f0e5d6}
.monitorly-demo [data-web-recording=true] .mon-replay{border-color:#a75c38;box-shadow:0 0 0 2px #ba784e35}
.monitorly-demo [data-web-duration]{display:inline-block;font-size:15px;font-variant-numeric:tabular-nums;transform-origin:center}
.monitorly-demo [data-web-recording=true] [data-web-duration]{color:#884727;animation:mon-recording-tick 1s ease-in-out infinite}
.monitorly-demo .mon-live-evidence{min-width:0}
.monitorly-demo .mon-inspector-tabs{display:flex;gap:16px;border-bottom:1px solid #aab79a;margin-bottom:18px}
.monitorly-demo .mon-inspector-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:#758364;font:500 14px var(--font-sans);padding:13px 0;min-height:44px;text-align:left;cursor:pointer}
.monitorly-demo .mon-inspector-tabs button[aria-selected=true]{border-bottom-color:#385327;color:#304721}
.monitorly-demo .mon-inspector-tabs button span{margin-left:6px}
.monitorly-demo .mon-network-summary{display:flex;justify-content:space-between;align-items:end;gap:16px;padding:2px 0 10px}
.monitorly-demo .mon-network-summary>div>span{font:12px var(--font-mono);color:#6b7a59;display:block;margin-bottom:8px}
.monitorly-demo .mon-network-summary strong{display:block;font:600 22px/1.2 var(--font-sans);letter-spacing:-.025em;color:#526a3d}
.monitorly-demo .mon-network-summary[data-status=error] strong{color:#a55e3e}
.monitorly-demo .mon-network-summary>span{font:12px var(--font-mono);color:#62774b;white-space:nowrap}
.monitorly-demo .mon-network-note{font:14px/1.6 var(--font-sans);color:#69795a;margin:0 0 18px}
.monitorly-demo .mon-http-block{background:#eff2e6;border:1px solid #b4c19f;margin-top:12px;min-width:0}
.monitorly-demo .mon-http-label{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid #c3ccb4;font:12px var(--font-mono);color:#62764d}
.monitorly-demo .mon-http-label>span:last-child{text-align:right}
.monitorly-demo .mon-http-route{display:flex;align-items:center;gap:10px;padding:13px 13px 0;font:12px var(--font-mono);color:#465d33}
.monitorly-demo .mon-http-route b{font-weight:500;background:#dce6cc;padding:4px 6px}
.monitorly-demo .mon-http-route code{font:inherit;overflow-wrap:anywhere}
.monitorly-demo .mon-http-block pre{font:12px/1.65 var(--font-mono);color:#2f4421;padding:13px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.monitorly-demo .mon-http-block details{border-top:1px solid #c3ccb4}
.monitorly-demo .mon-http-block summary{font:12px var(--font-mono);padding:11px 13px;cursor:pointer;color:#657851}
.monitorly-demo [hidden]{display:none!important}
@media(max-width:760px){
 .monitorly-demo .mon-web-intro{display:block;padding:24px 0}.monitorly-demo .mon-web-intro h3{font-size:27px}.monitorly-demo .mon-web-intro>div>p{font-size:12px}.monitorly-demo .mon-web-prompt{margin-top:18px;padding-left:13px;font-size:12px}.monitorly-demo .mon-web-prompt b{font-size:12px}
 .monitorly-demo .mon-live-topline{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}.monitorly-demo .mon-live-topline .mon-session{width:auto;font-size:12px;gap:8px}.monitorly-demo .mon-web-count{font-size:12px;gap:6px}.monitorly-demo .mon-web-count b{font-size:12px}.monitorly-demo .mon-web-count>span{margin-inline:6px}.monitorly-demo .mon-web-count .mon-clear{font-size:12px}
 .monitorly-demo .mon-live-workbench{grid-template-columns:1fr}.monitorly-demo .mon-live-screen{padding:20px 19px 35px}.monitorly-demo .mon-live-screen h3{font-size:37px}.monitorly-demo .mon-live-form input.mon-field{font-size:16px}.monitorly-demo .mon-live-form{margin-top:20px}.monitorly-demo .mon-web-field-hint{font-size:12px}.monitorly-demo .mon-workspace-choice>label{font-size:12px;padding:10px 8px}.monitorly-demo .mon-workspace-choice small{font-size:12px}.monitorly-demo .mon-guide-choice{font-size:12px}.monitorly-demo .mon-web-feedback{font-size:12px}.monitorly-demo .mon-live-form .mon-submit{font-size:12px}
 .monitorly-demo .mon-response-option{padding:12px}.monitorly-demo .mon-response-option select{font-size:12px}.monitorly-demo .mon-live-events{max-height:285px}.monitorly-demo .mon-live-events button{grid-template-columns:51px 1fr 11px;gap:7px}.monitorly-demo .mon-live-events time{font-size:12px}.monitorly-demo .mon-live-events button>span{font-size:12px}.monitorly-demo .mon-live-events small{font-size:12px}
 .monitorly-demo .mon-web-empty{min-height:0;padding:20px}.monitorly-demo .mon-web-empty h4{font-size:24px}.monitorly-demo .mon-web-empty p{font-size:12px}.monitorly-demo .mon-live-detail{padding-top:16px;min-height:0}.monitorly-demo .mon-live-detail strong{font-size:12px}
 .monitorly-demo .mon-live-transport{grid-template-columns:1fr 55px;gap:15px}.monitorly-demo .mon-live-transport .mon-play{flex-direction:row;grid-column:1;font-size:12px}.monitorly-demo .mon-live-transport .mon-scrubber{grid-column:1/-1;grid-row:2}.monitorly-demo .mon-web-speed{grid-column:2;grid-row:1}.monitorly-demo .mon-live-transport .mon-scrubber>div>span:nth-child(2){display:block}
 .monitorly-demo .mon-live-topline{padding:16px;gap:14px}.monitorly-demo .mon-capture-copy .mon-session{font-size:19px}.monitorly-demo .mon-capture-copy p{font-size:12px}.monitorly-demo .mon-capture-copy .mon-web-count{font-size:12px}.monitorly-demo .mon-capture-actions{flex-wrap:wrap;gap:5px}.monitorly-demo .mon-capture-primary{font-size:12px;padding:11px 13px}.monitorly-demo .mon-capture-actions .mon-clear{font-size:12px;padding:8px}.monitorly-demo .mon-inspector-tabs{gap:15px}.monitorly-demo .mon-inspector-tabs button{font-size:12px}.monitorly-demo .mon-network-summary strong{font-size:20px}.monitorly-demo .mon-http-block pre{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.monitorly-demo .mon-live-topline{transition:none}}

/* Explanatory copy remains comfortably readable at every breakpoint. */
.monitorly-demo .mon-web-intro>div>p,.monitorly-demo .mon-live-guidance,.monitorly-demo .mon-app-description,.monitorly-demo .mon-demo-hint,.monitorly-demo .mon-finding p,.monitorly-demo .mon-network-note{font-size:14px;line-height:1.6}