.start-how{max-width:72rem;margin-inline:auto;padding:40px 16px}.start-how-grid{display:grid;align-items:center;gap:20px}@media (min-width: 640px){.start-how{padding-inline:32px}}@media (min-width: 768px){.start-how{padding-block:56px}.start-how-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px}}.start-how-room{position:relative;display:block;width:100%;height:220px;padding:0;border:0;overflow:hidden;border-radius:16px;background:#0b0d14;cursor:pointer;container-type:size;-webkit-tap-highlight-color:transparent}@media (min-width: 640px){.start-how-room{height:280px}}@media (min-width: 768px){.start-how-room{height:340px}}.start-how-room:before,.start-how-room:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:inherit;pointer-events:none}.start-how-room:before{box-shadow:inset 0 0 0 1px #ffffff1a}.start-how-room:after{background:#fff;opacity:0;transition:opacity .2s}.start-how-room:hover:after{opacity:.06}.start-how-room:active:after{opacity:.02}.start-how-room:focus-visible{outline:2px solid #fbbf24;outline-offset:-2px}.start-how-scene{position:absolute;top:0;right:0;bottom:0;left:0;--how-w: calc(max(100cqw, 100cqh * var(--how-aspect)) * var(--how-zoom));--how-h: calc(var(--how-w) / var(--how-aspect));--how-x: clamp( 100cqw - var(--how-w), 50cqw - var(--how-fx) * var(--how-w), 0px );--how-y: clamp( 100cqh - var(--how-h), 50cqh - var(--how-fy) * var(--how-h), 0px )}.start-how-picture{position:absolute;left:var(--how-x);top:var(--how-y);width:var(--how-w);height:var(--how-h);max-width:none;-webkit-user-select:none;user-select:none}.start-how-pill{position:absolute;z-index:1;left:calc(var(--how-x) + var(--how-fx) * var(--how-w));top:calc(var(--how-y) + var(--how-tv-bottom) * var(--how-h) + 10px);translate:-50% 0;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 6px;white-space:nowrap;border-radius:9999px;background:#fbbf24;color:#030712;font-size:15px;font-weight:700;line-height:1;box-shadow:0 0 0 1px #00000040,0 6px 18px #0000008c;transition:transform .18s cubic-bezier(.2,.8,.2,1)}@container (min-width: 540px){.start-how-pill{top:calc(var(--how-y) + var(--how-fy) * var(--how-h));translate:-50% -50%;height:44px;padding:0 18px 0 7px;font-size:16px}}.start-how-pill-dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9999px;background:#030712;color:#fbbf24}.start-how-pill-dot svg{width:16px;height:16px;margin-left:2px}.start-how-pill:before{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;z-index:-1;border-radius:inherit;box-shadow:0 0 18px 6px #fbbf248c;opacity:.25;animation:start-how-glow 2.8s ease-in-out infinite;pointer-events:none}@keyframes start-how-glow{0%,to{opacity:.2;transform:scale(.96)}50%{opacity:.8;transform:scale(1.03)}}.start-how-room:hover .start-how-pill,.start-how-room:focus-visible .start-how-pill{transform:translateY(-2px) scale(1.04)}.start-how-room:active .start-how-pill{transform:translateY(0) scale(.97);transition-duration:60ms}.start-intro-chrome{animation:start-intro-fade .3s ease-out both}@keyframes start-intro-fade{0%{opacity:0}}#start-card[data-pulse]:after{--ring: 6px;content:"";position:absolute;inset:calc(-1 * var(--ring));z-index:1;border-radius:calc(var(--spotlight-radius, 22px) + var(--ring));pointer-events:none;box-shadow:0 0 0 3px #fbbf24,0 0 0 8px #fbbf2429,0 0 60px 8px #fbbf2466;opacity:0;animation:start-card-pulse 1.5s ease-out}@media (min-width: 640px){#start-card[data-pulse]:after{--ring: 8px}}@keyframes start-card-pulse{0%{opacity:0;transform:scale(1.035)}22%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.01)}}@media (prefers-reduced-motion: reduce){.start-how-pill:before{animation:none}.start-how-pill,.start-how-room:after{transition:none}}
