html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;color:#292c29;font-family:"PingFang SC",sans-serif}
.composition{position:absolute;left:0;top:0;width:100vw;height:100vh;transform-origin:0 0}
.motion-loading .composition{visibility:hidden}
.phone,.detail{position:absolute;left:0;top:0;transform-origin:0 0;box-sizing:border-box}
.phone{width:390px;height:844px;border-radius:38px;box-shadow:0 0 0 3px #fdfdfc,0 16px 34px -20px #65431e30;background:#f8f8f8;overflow:hidden}
.detail{width:390px;height:410px;border-radius:20px;box-shadow:0 12px 24px -18px #65431e24;background:#fff;overflow:hidden}
.native-phone,.native-detail{position:absolute;left:0;top:0;width:390px;border:0;display:block;pointer-events:none;opacity:0;visibility:hidden;transform-origin:0 0}
.native-phone{height:844px;background:#f8f8f8}
.native-detail{height:410px;border-radius:20px;overflow:hidden}
.native-phone.is-visible,.native-detail.is-visible{opacity:1;visibility:visible}
.composition.is-inspecting .detail{display:none}
.composition.is-inspecting .phone{border-radius:0;box-shadow:none}
/* All four views use the same geometry, including the static fallback. */
.composition{--phone-height:min(calc(100vh - 24px),660px);--phone-width:calc(var(--phone-height) * 390 / 844);--detail-width:min(390px,calc(var(--phone-width) * 1.3),calc(100vw - var(--phone-width) - 56px),calc((100vh - 24px) * 390 / var(--detail-source-height)));--group-width:calc(var(--phone-width) + 24px + var(--detail-width));--group-left:calc((100vw - var(--group-width)) / 2)}
.phone{transform:translate(calc(var(--group-left) + var(--detail-width) + 24px),calc((100vh - var(--phone-height)) / 2)) scale(calc(var(--phone-height) / 844px))}
.detail{transform:translate(var(--group-left),calc((100vh - var(--detail-source-height) * var(--detail-width) / 390) / 2)) scale(calc(var(--detail-width) / 390px))}
@media(max-aspect-ratio:4/5){
  .composition{width:390px;height:800px;--layout-scale:min(calc(100vw / 390px),calc(100vh / 800px));transform:translate(calc((100vw - 390px * var(--layout-scale))/2),calc((100vh - 800px * var(--layout-scale))/2)) scale(var(--layout-scale))}
  .phone{transform:translate(82px,8px) scale(.769230769)}
  .detail{transform:translate(8px,428px) scale(.871794872)}
}
@media(scripting:enabled){html:not(.motion-ready) .composition{visibility:hidden}}

[data-scene="ledger"] .composition{--detail-source-height:410}[data-scene="ledger"] .detail{height:410px}[data-scene="scenarios"] .composition{--detail-source-height:410}[data-scene="scenarios"] .detail{height:410px}[data-scene="probability"] .composition{--detail-source-height:410}[data-scene="probability"] .detail{height:410px}[data-scene="reports"] .composition{--detail-source-height:410}[data-scene="reports"] .detail{height:410px}