.plugin-demo{position:relative;z-index:1;width:100%;line-height:0;border-radius:8px;box-shadow:0 30px 80px #0008;isolation:isolate;overflow:visible;background:#252d2e;transform:translateZ(0)}
.plugin-demo canvas{display:block;width:100%;height:auto;border-radius:inherit}
.plugin-demo:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 42%,rgba(255,255,255,.025));z-index:4}
.demo-hit{position:absolute;display:block;margin:0;padding:0;border:1px solid transparent;background:transparent;border-radius:8px;cursor:pointer;touch-action:none;z-index:3;box-shadow:none;min-width:0;min-height:0;color:transparent;appearance:none}
.demo-hit[role=slider]{border-radius:50%;cursor:ns-resize}
.plugin-demo .demo-hit:hover,.plugin-demo .demo-hit:active,.plugin-demo .demo-hit:focus{background:transparent;box-shadow:none;border-color:transparent;outline:none}
.plugin-demo .demo-hit:focus-visible{outline:1px solid #45dcad;outline-offset:-3px}.demo-preset:focus-visible{outline:1px solid #45dcad;outline-offset:1px}
.demo-preset{position:absolute;z-index:5;border:1px solid #7e999d;border-radius:6px;background:#dce8e8;color:#243a3c;font:600 clamp(8px,1.1vw,16px) Arial,sans-serif;text-align:center;padding:0 4px;cursor:pointer;min-height:0;line-height:1.1}
.plugin-control-readout{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);border-radius:8px;padding:8px 14px;background:#12251feb;color:#b6f5de;font:500 13px/1.3 Arial,sans-serif;z-index:10;pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.plugin-control-readout:empty{display:none}.demo-instruction{margin:18px auto 8px;max-width:780px;text-align:center;color:#a5b8b2;font:400 12px/1.6 Arial,sans-serif;letter-spacing:.02em}.demo-chart-point{border-radius:50%;cursor:move}.demo-dragging{user-select:none;-webkit-user-select:none}
@media(prefers-reduced-motion:reduce){.plugin-demo:after{background:none}}
.plugin-demo canvas{opacity:0}.plugin-demo.demo-ready canvas{opacity:1}
.demo-choice{position:absolute;z-index:5;opacity:0;cursor:pointer;min-width:0;min-height:0}.demo-choice:focus-visible{opacity:.9;background:#263b3d;color:#b9e9dd}

/* Hit surfaces are rendered by the native editor. HTML only receives input. */
.plugin-demo[data-plugin-demo=hit] .demo-preset{background:transparent;border-color:transparent;color:#252b2e;box-shadow:none;appearance:none;font-size:clamp(8px,1vw,13px)}
.plugin-demo[data-theme=dark] .demo-preset{background:#29332f;color:#e2e9e6;border-color:#52645d;color-scheme:dark}
.plugin-demo[data-theme=dark] .demo-preset option{background:#29332f;color:#e2e9e6}
.plugin-demo .demo-hit{transition:none!important;filter:none!important;box-shadow:none!important}

.plugin-demo .demo-hit:hover,.plugin-demo .demo-hit:active,.plugin-demo .demo-hit:focus:not(:focus-visible){outline:none!important;background:transparent!important;border-color:transparent!important}
.plugin-demo .demo-hit:focus-visible{outline:1px solid #45dcad!important;outline-offset:-3px!important}
.plugin-demo[data-plugin-demo=hit]:not([data-native-ui=true]) .demo-hit{pointer-events:none}
.plugin-demo[data-plugin-demo=hit] .demo-preset{border-radius:6px;background:linear-gradient(#d5d6d3,#b9bcb9);color:#303638;font-weight:600;text-transform:uppercase}
.plugin-demo[data-plugin-demo=hit][data-theme=dark] .demo-preset{background:linear-gradient(#29312d,#1e2521);color:#e2e9e6;border-color:#52645d;color-scheme:dark}

.plugin-demo .demo-preset:hover,.plugin-demo .demo-preset:active,.plugin-demo .demo-preset:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}
.plugin-demo .demo-preset:focus-visible{outline:1px solid #669b86!important;outline-offset:-3px!important}
.plugin-demo .plugin-control-readout{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

.plugin-demo .native-menu{position:absolute;z-index:20;transform:translateX(-50%);min-width:160px;max-width:90%;max-height:320px;overflow:auto;border:1px solid #82958c;border-radius:8px;padding:5px;background:#c7cdca;box-shadow:0 8px 24px #0006;line-height:1.4;color:#202b26}
.plugin-demo[data-theme=dark] .native-menu{background:#29332f;color:#edf3f0}
.plugin-demo .native-menu button{display:block;width:100%;padding:8px 12px;margin:0;border:0;background:transparent;color:inherit;text-align:center;font:500 14px/1.4 Arial,sans-serif;box-shadow:none}
.plugin-demo .native-menu button:hover,.plugin-demo .native-menu button:focus-visible{background:#54a78c30;outline:none!important;box-shadow:none!important}