*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{color:#e9ede3;background:#15232b;flex-direction:column;font:14px system-ui;display:flex}main{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;display:grid}article{flex-direction:column;min-width:0;min-height:0;padding:24px 18px 16px;display:flex}article+article{border-left:1px solid #ffffff19}header{pointer-events:none}header span{text-transform:uppercase;letter-spacing:2px;color:#a8bab5;font-size:10px}canvas{flex:1;width:100%;min-height:0;display:block}article p{color:#a8bab5;margin:4px 0 0;font-size:12px}footer{border-top:1px solid #ffffff19;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;display:flex}footer p{color:#b3c3bd;margin:0;font-size:11px}.key{background:#f0ca85;border-radius:50%;width:7px;height:7px;margin-right:5px;display:inline-block}.separator{margin-inline:7px}output{font-variant-numeric:tabular-nums;color:#e9ede3;min-width:32px;display:inline-block}button{color:inherit;cursor:pointer;background:0 0;border:1px solid #ffffff40;min-height:36px;padding:7px 13px;font:12px system-ui}button:hover{background:#ffffff15}button:focus-visible{outline-offset:3px;outline:2px solid #f0ca85}#loading{background:#15232b;place-items:center;margin:0;display:grid;position:absolute;inset:0}[hidden]{display:none!important}@media (max-width:720px){main{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:1fr}article{padding:14px 18px 10px;position:relative}article+article{border-top:1px solid #ffffff19;border-left:0}header{position:absolute;top:16px;left:18px}h2{font-size:25px}article p{font-size:11px;position:absolute;bottom:12px;left:18px}canvas{flex:1;width:100%;min-height:0}footer{padding:10px 14px}footer p{font-size:10px}.separator{margin-inline:3px}article canvas{flex:none;width:68%;height:100%;margin-left:auto}}h2{margin:0;font:18px/1.4 system-ui}h2 span{font:inherit;color:#a8bab5;text-transform:none;letter-spacing:0}footer p{font-size:14px}footer button{place-items:center;width:40px;height:40px;padding:9px;display:grid}button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}button[aria-pressed=true] .play-icon,button[aria-pressed=false] .pause-icon{display:none}.loading-ring{border:2px solid #ffffff30;border-top-color:currentColor;border-radius:50%;width:22px;height:22px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:720px){h2{font-size:16px}h2 span{display:block}footer p{font-size:14px}}@media (prefers-reduced-motion:reduce){.loading-ring{animation:none}}