.section-pills{--section-pills-h:44px;--section-pills-ink:#171c1f;--section-pills-soft:#73daa4;--section-pills-surface:#fff;--section-pills-hairline:#171c1f24;--section-pills-ease:cubic-bezier(.2, .7, .2, 1);--section-pills-fade:24px;overscroll-behavior-x:contain;scroll-snap-type:x proximity;min-width:0;scroll-padding-inline:var(--section-pills-fade);scrollbar-width:none;flex-wrap:nowrap;align-items:center;gap:6px;margin:-4px;padding:4px;display:flex;overflow:auto hidden}.section-pills::-webkit-scrollbar{display:none}.section-pills[data-tone=light]{--section-pills-surface:#f6fafe}.section-pills[data-fade-end=true]{-webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--section-pills-fade)), transparent);mask-image:linear-gradient(to right, #000 calc(100% - var(--section-pills-fade)), transparent)}.section-pills[data-fade-start=true]{-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--section-pills-fade));mask-image:linear-gradient(to right, transparent, #000 var(--section-pills-fade))}.section-pills[data-fade-start=true][data-fade-end=true]{-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--section-pills-fade), #000 calc(100% - var(--section-pills-fade)), transparent);mask-image:linear-gradient(to right, transparent, #000 var(--section-pills-fade), #000 calc(100% - var(--section-pills-fade)), transparent)}.section-pills__pill{height:var(--section-pills-h);min-width:var(--section-pills-h);border:1px solid var(--section-pills-hairline);background:var(--section-pills-surface);color:var(--section-pills-ink);font:inherit;cursor:pointer;scroll-snap-align:start;transition:background-color .22s var(--section-pills-ease), border-color .22s var(--section-pills-ease), color .22s var(--section-pills-ease), padding .22s var(--section-pills-ease);-webkit-tap-highlight-color:transparent;border-radius:9999px;flex:none;align-items:center;margin:0;padding:0 11px;display:inline-flex;position:relative}.section-pills__pill:hover{border-color:#171c1f52}.section-pills__pill:focus-visible{outline-offset:2px;outline:2px solid #38a371}.section-pills__pill[aria-selected=true]{max-width:calc(100% - 2 * var(--section-pills-fade));border-color:var(--section-pills-ink);background:var(--section-pills-ink);color:#fff;cursor:default;padding:0 16px 0 12px}.section-pills__icon{flex:none;display:block}.section-pills__reveal{min-width:0;transition:grid-template-columns .22s var(--section-pills-ease);grid-template-columns:0fr;display:grid}.section-pills__pill[aria-selected=true] .section-pills__reveal{grid-template-columns:1fr}.section-pills__text{white-space:nowrap;opacity:0;align-items:baseline;gap:6px;min-width:0;transition:opacity .16s;display:flex;overflow:hidden}.section-pills__pill[aria-selected=true] .section-pills__text{opacity:1;transition-delay:60ms}.section-pills__number{color:var(--section-pills-soft);font-family:var(--font-mono);font-variant-numeric:tabular-nums;flex:none;padding-left:9px;font-size:.75rem;font-weight:500}.section-pills__label{text-overflow:ellipsis;min-width:0;font-family:var(--font-body);font-size:.8125rem;font-weight:600;line-height:1.25rem;overflow:hidden}.section-pills[data-fit=wrap] .section-pills__text{white-space:normal}.section-pills[data-fit=wrap] .section-pills__icon{opacity:1;width:20px;transition:width .22s var(--section-pills-ease), opacity .12s ease}.section-pills[data-fit=wrap] .section-pills__pill[aria-selected=true]{padding:0 14px}.section-pills[data-fit=wrap] .section-pills__pill[aria-selected=true] .section-pills__icon{opacity:0;width:0}.section-pills[data-fit=wrap] .section-pills__pill[aria-selected=true] .section-pills__number{padding-left:0}.section-pills[data-fit=wrap] .section-pills__label{width:max-content;max-width:var(--section-pills-label-max,12rem);text-align:left;-webkit-line-clamp:var(--section-pills-label-lines,2);font-size:var(--section-pills-label-size,.75rem);line-height:var(--section-pills-label-leading,.9375rem);-webkit-box-orient:vertical;flex:none;display:-webkit-box;overflow:hidden}.section-pills[data-fit=wrap] .section-pills__progress{bottom:3px;left:14px;right:14px}.section-pills__progress{background:var(--section-pills-soft);transform-origin:0;height:2px;animation:section-pills-progress var(--section-pills-progress,6s) linear forwards;pointer-events:none;border-radius:1px;position:absolute;bottom:7px;left:18px;right:18px;transform:scaleX(0)}@keyframes section-pills-progress{to{transform:scaleX(1)}}@media (prefers-reduced-motion:reduce){.section-pills__pill,.section-pills__icon,.section-pills__reveal,.section-pills__text{transition:none}.section-pills__progress{display:none}}
.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}}