[data-ob-app-extension]{min-width:0}
[data-ob-app-extension] [hidden]{display:none!important}
[data-ob-app-loading]{display:none;box-sizing:border-box;min-height:420px;padding:clamp(24px,5vw,48px);border:1px solid rgba(100,80,80,.15);border-radius:12px;background:var(--bg-secondary,#faf8f5);color:inherit}
[data-ob-app-loading]>p{margin:0 0 28px;font:inherit;font-size:14px;line-height:1.6;text-align:center}
[data-ob-app-skeleton]{max-width:720px;margin:auto}
[data-ob-app-skeleton]>span{display:block;height:16px;width:65%;margin:0 auto 16px;border-radius:6px;background:rgba(100,80,80,.1)}
[data-ob-app-skeleton]>span:first-child{height:32px;width:80%}
[data-ob-app-skeleton]>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
[data-ob-app-skeleton]>div>span{display:block;height:200px;border-radius:8px;background:rgba(100,80,80,.08)}
[data-ob-app-fallback]{box-sizing:border-box;min-width:0;max-width:100%;overflow-x:auto;padding:clamp(20px,4vw,40px);border:1px solid rgba(100,80,80,.15);border-radius:12px;background:var(--bg-secondary,#faf8f5);font:inherit;font-size:14px;line-height:1.7}
[data-ob-app-fallback] :is(h1,h2,h3,h4){margin:24px 0 12px;font:inherit;font-size:20px;font-weight:600;line-height:1.3}
[data-ob-app-fallback]>:first-child{margin-top:0}
[data-ob-app-fallback] p{margin:0 0 16px}
[data-ob-app-fallback] table{width:100%;border-collapse:collapse;font:inherit;font-size:12px;white-space:nowrap;margin:20px 0}
[data-ob-app-fallback] :is(th,td){padding:10px 12px;border:1px solid rgba(100,80,80,.2);text-align:center}
[data-ob-app-fallback] th{font-weight:600;background:rgba(100,80,80,.06)}
[data-ob-app-extension][data-ob-app-state="ready"] [data-ob-app-loading],
[data-ob-app-extension][data-ob-app-state="fallback"] [data-ob-app-loading]{display:none}
[data-ob-app-extension][data-ob-app-state="loading"] [data-ob-app-loading]{display:block}
/* No scripts are needed to select the first-paint view. With scripts disabled,
   or in older browsers without this media feature, the styled guide stays visible.
   The CSS deadline also restores it when the platform runtime cannot download. */
@media(scripting:enabled){
  [data-ob-app-extension][data-ob-app-state="pending"] [data-ob-app-loading]{display:block;visibility:hidden;min-height:0;max-height:0;padding:0;border:0;overflow:hidden;animation:ob-app-loading-pending 8s steps(1,end)}
  [data-ob-app-extension][data-ob-app-state="pending"] [data-ob-app-fallback]{animation:ob-app-fallback-pending 8s steps(1,end)}
}
@keyframes ob-app-loading-pending{from,to{visibility:visible;max-height:none;min-height:420px;padding:clamp(24px,5vw,48px);border:1px solid rgba(100,80,80,.15)}}
@keyframes ob-app-fallback-pending{from,to{visibility:hidden;max-height:0;padding:0;border:0;overflow:hidden}}
@media(max-width:600px){[data-ob-app-skeleton]>div{grid-template-columns:1fr}[data-ob-app-skeleton]>div>span{height:150px}}