.transport{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:20px 0;font:13px system-ui}.transport label{display:flex;gap:8px;align-items:center}.transport select{max-width:65vw;padding:7px;background:var(--listen-panel);color:var(--listen-text);border:1px solid var(--listen-line)}.transport .seek-label{flex:1;min-width:220px}.transport input{width:100%}
#demo-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:9px}#demo-index a{display:block;border:1px solid var(--listen-line);padding:10px;font:13px/1.4 system-ui;text-decoration:none}#demo-index a:hover{background:var(--listen-panel)}
.demonstration-panel{width:68%;max-width:none;box-shadow:none}.has-demonstration .viewport-lines{right:calc(68% + 28px)!important}.demonstration-caption{max-height:3.8em;overflow:auto}.device-qr-corner{min-height:122px}.demonstration-panel canvas:not(.device-qr-corner canvas){background:var(--listen-panel);aspect-ratio:3/2}.text-media-viewport{min-height:740px}
@media(max-width:700px){.demonstration-panel{width:auto;top:44px;bottom:240px}.has-demonstration .viewport-lines{right:18px!important}.device-qr-corner{min-height:94px}.demonstration-panel .device-qr-corner canvas{width:80px;height:80px;min-height:80px}.has-demonstration{min-height:700px!important;height:calc(100svh - 105px)!important}.transport{align-items:stretch}.transport select{max-width:90vw}.transport label:first-child{flex-wrap:wrap}}
.text-media-viewport::after{background:linear-gradient(to top,rgba(255,255,255,0),rgba(255,255,255,.05) 50%,rgba(255,255,255,.12))}.viewport-lines{position:absolute!important;left:20px!important;right:20px!important;top:65px!important;bottom:110px!important;margin:0!important}.has-demonstration .viewport-lines{width:auto!important}.viewport-bezel-bottom{align-self:end}
@media(max-width:700px){.demonstration-panel{bottom:260px}.has-demonstration .viewport-lines{height:140px!important;bottom:110px!important}.has-demonstration .viewport-line{font-size:17px!important;line-height:1.14!important}}