@scope (.example-workspace) {
:host{display:block;font-family:system-ui,sans-serif;color:#1d333e}*{box-sizing:border-box}button,select,input{font:inherit}button,select,.file-button{border:1px solid #c3d2d8;border-radius:7px;padding:8px 11px;background:#fff;color:#234653}button{cursor:pointer}button:hover{background:#e9f3f5}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #16a7b6;outline-offset:2px}a{color:#086c7e}label{font-size:.85rem}input[type=range]{accent-color:#138c98;min-width:80px}input[type=file]{max-width:100%}.workspace{border:1px solid #c4d4d9;background:#fff;border-radius:14px;overflow:hidden}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid #dce6e9}.toolbar .mode{display:flex;gap:3px;padding:3px;background:#edf3f4;border-radius:9px}.mode button{border:0;background:transparent}.mode button[aria-pressed=true]{background:#1d515d;color:#fff}.toolbar label{display:flex;align-items:center;gap:7px}.file-button{cursor:pointer}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.file-button:focus-within{outline:3px solid #16a7b6}.scope{margin:0;padding:10px 15px;color:#486774;background:#f3f8f9;font-size:.85rem;line-height:1.5}.layout{display:grid;grid-template-columns:minmax(0,1fr) 260px}.viewport{height:570px;min-width:0;background:#eff5f6;position:relative}.viewport canvas,.viewport iframe{display:block;width:100%;height:100%;border:0}.empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:25px;line-height:1.6;color:#52717d;pointer-events:none}.empty strong{font-size:1.4rem;color:#365c67}.sidebar{padding:17px;border-left:1px solid #dce6e9;min-width:0}.sidebar h2{font-size:1rem;margin:0 0 12px}.sidebar p{font-size:.8rem;line-height:1.6;overflow-wrap:anywhere}.sidebar dl{margin:0}.sidebar dt{font-size:.75rem;color:#62808b;margin-top:13px}.sidebar dd{margin:3px 0;font-variant-numeric:tabular-nums;font-size:.9rem;overflow-wrap:anywhere}.sidebar svg{width:100%;height:210px}.transport{padding:12px 14px;display:flex;align-items:center;gap:9px;border-top:1px solid #dce6e9;flex-wrap:wrap}.transport input{flex:1}.transport output{font-size:.85rem;font-variant-numeric:tabular-nums;min-width:125px}.status{padding:10px 15px;line-height:1.5;font-size:.8rem;border-top:1px solid #dce6e9;overflow-wrap:anywhere}.error{color:#a13724;background:#fff3ed}details{padding:12px 15px;border-top:1px solid #dce6e9;font-size:.8rem;line-height:1.6}summary{cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere} [hidden]{display:none!important}@media(max-width:750px){.layout{grid-template-columns:1fr}.viewport{height:470px}.sidebar{border-left:0;border-top:1px solid #dce6e9;display:flex;gap:14px;flex-wrap:wrap}.sidebar>div{flex:1;min-width:135px}.sidebar svg{height:160px}.toolbar{padding:9px}.toolbar select{max-width:220px}.transport output{min-width:90px}.viewport iframe{min-height:470px}}

#catalog-items{max-height:260px;overflow:auto;padding-left:22px}#catalog-items li{overflow-wrap:anywhere;margin:6px 0}.toolbar #runs{max-width:260px}

#output-items{max-height:260px;overflow:auto;padding-left:22px}#output-items li{overflow-wrap:anywhere;margin:6px 0}.toolbar #outputs{max-width:260px}

}