.sample-stage{grid-template-columns:minmax(0,1fr);gap:0;width:100%;min-width:0;max-width:1180px;margin-inline:auto;display:grid;container:sample-stage/inline-size}.sample-stage__bar{background:#eef3f7;border:1px solid #171c1f1a;border-bottom:0;border-radius:12px 12px 0 0;align-items:center;min-width:0;display:flex}.sample-stage__pills{flex:auto}.sample-stage .section-pills[data-appearance=tabs]{z-index:1;align-items:stretch;gap:4px;margin:0 0 -1px;padding:4px 4px 0}.sample-stage .section-pills[data-appearance=tabs] .section-pills__pill{background:#eef3f7;border-radius:8px 8px 0 0;max-width:min(280px,100% - 48px)}@container sample-stage (min-width:600px){.sample-stage .section-pills[data-appearance=tabs] .section-pills__pill{flex:0 auto;min-width:140px}.sample-stage .section-pills[data-appearance=tabs] .section-pills__pill[aria-selected=true]{flex-shrink:0}}.sample-stage .section-pills[data-appearance=tabs] .section-pills__pill[aria-selected=true]{color:#171c1f;background:#fff;border-color:#171c1f1a #171c1f1a #fff}.sample-stage .section-pills[data-appearance=tabs] .section-pills__reveal{grid-template-columns:1fr}.sample-stage .section-pills[data-appearance=tabs] .section-pills__text{opacity:1}.sample-stage .section-pills[data-appearance=tabs] .section-pills__number{color:#006c45}.sample-stage .section-pills[data-appearance=tabs] .section-pills__pill:focus-visible{outline-offset:-3px}.sample-stage__open{color:#006c45;white-space:nowrap;justify-self:start;align-items:center;gap:6px;min-height:44px;margin-top:12px;font-size:.875rem;font-weight:600;line-height:1.25rem;text-decoration:none;display:inline-flex}.sample-stage__open:hover{text-underline-offset:3px;text-decoration:underline}.sample-stage__open:focus-visible{outline-offset:2px;border-radius:4px;outline:2px solid #38a371}.sample-stage__frame{aspect-ratio:1.8;background:#fff;border:1px solid #171c1f1a;border-radius:0 0 16px 16px;min-height:520px;max-height:680px;position:relative;overflow:hidden;box-shadow:0 30px 60px -30px #171c1f59}.sample-stage__iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.sample-stage__skeleton{z-index:1;background:#fff;grid-template-columns:clamp(300px,32%,380px) minmax(0,1fr);display:grid;position:absolute;inset:0}.sample-stage__skeleton-card{flex-direction:column;gap:12px;padding:28px 16px;display:flex}.sample-stage__skeleton-card>span{background:#eef3f7;border-radius:6px;height:12px;display:block}.sample-stage__skeleton-card>span[data-size=title]{height:22px}.sample-stage__skeleton-card>span:nth-child(2){margin-top:8px}.sample-stage__skeleton-card>span:nth-child(4){margin-top:12px}.sample-stage__skeleton-card>span[data-w="40"]{width:40%}.sample-stage__skeleton-card>span[data-w="60"]{width:60%}.sample-stage__skeleton-card>span[data-w="70"]{width:70%}.sample-stage__skeleton-card>span[data-w="85"]{width:85%}.sample-stage__skeleton-card>span[data-w="90"]{width:90%}.sample-stage__skeleton-card>span[data-w="95"]{width:95%}.sample-stage__skeleton-stage{background:linear-gradient(100deg,#f6fafe 30%,#edf3f9 50%,#f6fafe 70%) 0 0/220% 100%;border-left:1px solid #171c1f14;animation:1.6s ease-in-out infinite sample-stage-shimmer}@keyframes sample-stage-shimmer{0%{background-position:100% 0}to{background-position:-120% 0}}.sample-stage__activate{z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;place-items:center;width:100%;margin:0;padding:0;display:grid;position:absolute;inset:0}.sample-stage__activate:focus-visible{outline-offset:-4px;outline:2px solid #38a371}.sample-stage[data-layout=phone] .sample-stage__activate{grid-template-rows:calc(42% - 36px) minmax(0,1fr);place-items:center}.sample-stage[data-layout=phone] .sample-stage__play{grid-row:1;place-self:end start;width:48px;height:48px;margin:0 0 8px 12px}.sample-stage__play{color:#fff;background:#006c45;border-radius:9999px;place-items:center;width:64px;height:64px;transition:transform .16s;display:grid;box-shadow:0 8px 24px #171c1f47}.sample-stage__play svg{margin-left:3px}.sample-stage__activate:hover .sample-stage__play,.sample-stage__activate:focus-visible .sample-stage__play{transform:scale(1.06)}@container sample-stage (max-width:559px){.sample-stage__frame{aspect-ratio:auto;height:600px;min-height:600px;max-height:none}.sample-stage__skeleton{grid-template-rows:42% minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.sample-stage__skeleton-stage{border-bottom:1px solid #171c1f14;border-left:0;order:-1}.sample-stage__skeleton-card{padding:24px 16px}}@media (max-width:559px){@container sample-stage (max-width:559px){.sample-stage__bar,.sample-stage__frame{border-left:0;border-right:0;border-radius:0;width:calc(100% + 32px);margin-inline:-16px}}}@media (prefers-reduced-motion:reduce){.sample-stage__skeleton-stage{animation:none}.sample-stage__play{transition:none}}@media (min-width:1024px){.sample-stage{grid-template-rows:auto auto auto}.sample-stage .sample-stage__frame{height:min(calc(clamp(560px, calc(100svh - var(--topbar-h,64px) - 76px), 760px) - 104px), max(520px, calc(100cqw / 1.68)));aspect-ratio:auto;min-height:0;max-height:none}}