html,body{margin:0;min-height:100dvh}body{display:flex;flex-direction:column;font-family:system-ui,sans-serif;overflow:hidden;background:#111}.tab-bar{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem .75rem;background:#1a1a1a;border-bottom:1px solid #333}.tab{border:1px solid #444;background:#2a2a2a;color:#e8e8e8;padding:.35rem .65rem;border-radius:6px;cursor:pointer;font-size:.875rem}.tab:hover{background:#363636}.tab--active{background:#3d5a80;border-color:#5a7ab0;color:#fff}.viewport{position:relative;min-height:0}.viewport canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.info{flex:0 0 auto;min-height:1.5rem;padding:.35rem .75rem;font-size:.8rem;color:#ccc;background:#111;border-top:1px solid #333}.demo-extras{position:fixed;right:.5rem;bottom:2.25rem;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;pointer-events:none}.demo-extras>*{pointer-events:auto}