.demonstration-panel { position:absolute; z-index:3; top:44px; right:14px; bottom:90px; width:min(720px,64%); background:var(--listen-panel); color:var(--listen-text); border:1px solid var(--listen-line); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 8px 25px #0002; }
.demonstration-panel[hidden],.demonstration-panel [hidden] {display:none!important;}
.demonstration-panel{--tmv-focus:#b32720;}[data-theme="dark"] .demonstration-panel{--tmv-focus:#ff958c;}
.demonstration-header {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--listen-line);font:12px/1.3 var(--listen-mono);}
.demonstration-header>span{min-width:0;}
.demonstration-panel canvas{display:block;flex:1;min-height:0;width:100%;object-fit:contain;}
.demonstration-caption{font:11px/1.4 var(--listen-mono);padding:8px 12px;margin:0;border-top:1px solid var(--listen-line);}
.has-demonstration .viewport-lines{right:calc(64% + 28px)!important;width:auto!important;}
.has-demonstration .viewport-line{font-size:clamp(18px,2.1vw,34px)!important;}
.viewport-fullscreen .demonstration-panel{bottom:92px;top:44px;}
@media(max-width:700px){
 .has-demonstration{min-height:700px!important;height:calc(100svh - 70px)!important;}
 .demonstration-panel{top:44px;left:8px;right:8px;width:auto;bottom:245px;}
 .has-demonstration .viewport-lines{left:18px!important;right:18px!important;top:auto!important;bottom:98px!important;height:125px!important;}
 .has-demonstration .viewport-line{font-size:20px!important;}
 .demonstration-header{font-size:11px;}
 .viewport-fullscreen .demonstration-panel{bottom:245px;}
}