.widget-carousel{--column-content:640px;--column-gutter:32px;--column-inset:max(var(--column-gutter),calc(50% - var(--column-content)/2))}.widget-track{padding-inline:var(--column-inset);scroll-padding-inline:var(--column-inset);overscroll-behavior-x:none;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;outline-offset:-8px;gap:24px;display:flex;overflow-x:auto}.widget-track::-webkit-scrollbar{display:none}.widget-track[data-dragging]{scroll-snap-type:none;cursor:grabbing}.widget-stage[data-clickable=true]{cursor:pointer}.widget-stage-hero{padding-bottom:0}.widget-track[data-dragging] .widget-stage{cursor:grabbing}.widget-track>.widget-stage{scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%}.widget-filters{padding-inline:var(--column-inset);scrollbar-width:none;gap:8px;margin-bottom:24px;display:flex;overflow-x:auto}.widget-filters::-webkit-scrollbar{display:none}.widget-filter{height:36px;font-size:var(--text-caption);color:var(--color-secondary);cursor:pointer;transition-property:background-color,color,box-shadow,transform;transition-duration:.15s;transition-timing-function:var(--ease-standard);border-radius:9999px;flex-shrink:0;align-items:center;padding:0 14px;font-weight:500;line-height:1;display:inline-flex}.widget-filter[aria-pressed=true]{color:var(--color-gray-900);background:#fff;box-shadow:0 1px 2px #1118270f}@media (hover:hover) and (pointer:fine){.widget-filter[aria-pressed=false]:hover{background-color:var(--glass-hover);color:var(--color-gray-900)}}.widget-filter:active{transform:scale(.96)}.widget-controls{padding-inline:var(--column-inset);justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.widget-open{z-index:1;position:absolute;top:16px;right:16px}.widget-head{z-index:1;pointer-events:none;align-items:center;height:40px;display:flex;position:absolute;top:16px;left:16px;right:64px}.widget-title{white-space:nowrap;text-overflow:ellipsis;padding-left:4px;overflow:hidden}.widget-tag.widget-badge{z-index:1;pointer-events:none;position:absolute;bottom:16px;right:16px}.widget-stage:has(.widget-badge) .widget-tags{right:116px}.widget-tags{z-index:1;pointer-events:none;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex;position:absolute;bottom:16px;left:16px;right:16px}@media (max-width:480px){.widget-tags{display:none}.widget-stage:has(.phone-frame){padding-top:56px;padding-bottom:56px}}.widget-tag{height:28px;font-size:var(--text-label);letter-spacing:.01em;color:var(--color-gray-900);white-space:nowrap;border-radius:9999px;align-items:center;padding:0 12px;font-weight:500;line-height:1;display:inline-flex}.recording video,.recording .still{background:var(--color-surface);width:352px;height:auto;display:block}.recording-desktop{width:440px;margin-left:-44px}.recording-desktop video,.recording-desktop .still{background:#fff;border-radius:7px;width:440px;box-shadow:0 0 0 1px #1118270f,0 24px 48px -24px #11182759}.recording-sheet{width:560px;margin-left:-104px}.recording-sheet video,.recording-sheet .still{border-radius:var(--radius-card);background:#fff;width:560px;box-shadow:0 0 0 1px #1118270a,0 2px 4px #11182708,0 16px 32px -16px #1118271f}.phone-frame{filter:drop-shadow(0 24px 32px #11182738);width:196px;margin:0 auto;position:relative}.phone-frame img{pointer-events:none;width:100%;height:auto;display:block;position:relative}.phone-frame video,.phone-frame .still{object-fit:cover;border-radius:13%/6%;width:83.73%;height:91.74%;position:absolute;top:4.13%;left:8.14%}.widget-stage:has(.recording-sheet){padding-bottom:0}@media (min-width:481px){.widget-stage:has(.phone-frame){padding-bottom:0}}.widget-stage{aspect-ratio:5/4;border-radius:var(--radius-panel);background:var(--color-surface);min-width:0;min-height:416px;box-shadow:inset 0 0 0 1px var(--color-gray-200);justify-content:center;align-items:center;padding-bottom:58px;display:flex;position:relative;overflow:hidden}.widget-canvas{width:352px;transform:scale(var(--widget-scale,.8));pointer-events:none;-webkit-user-select:none;user-select:none;flex-shrink:0}.study-gate{max-width:var(--measure);flex-direction:column;gap:20px;margin-top:32px;display:flex}.study-gate-field{flex-direction:column;gap:6px;display:flex}.study-unlock{position:relative}.study-unlock[aria-busy=true] .study-unlock-label{visibility:hidden}.study-spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:16px;height:16px;margin:auto;animation:.6s linear infinite study-spin;position:absolute;inset:0}@keyframes study-spin{to{transform:rotate(360deg)}}.study-page{--measure:none}.study-tldr{max-width:var(--measure);margin-top:24px}.study-blocks{flex-direction:column;gap:24px;margin-top:40px;display:flex}.study-blocks .study-p{max-width:var(--measure)}.study-h{max-width:var(--measure);margin-top:16px}.study-media{isolation:isolate;border-radius:var(--radius-card);margin:0;position:relative;overflow:hidden}.study-media img,.study-media video{width:100%;height:auto;display:block}.study-media video{aspect-ratio:auto 16/9;background:var(--color-surface)}.study-media:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #00000014}.study-media-contain{aspect-ratio:16/9;background:var(--color-surface);justify-content:center;align-items:center;display:flex}.study-media-contain img{width:auto;height:85%}.study-media-padded{background:var(--color-surface);padding:24px}.study-media-padded img{border-radius:var(--radius-control)}.study-stats{max-width:var(--measure);grid-template-columns:1fr 1fr;gap:0 32px;margin:0;display:grid}.study-stats>div{border-top:1px solid var(--color-gray-200);flex-direction:column-reverse;justify-content:flex-end;padding:16px 0 20px;display:flex}.study-stats dt{max-width:30ch;margin-top:2px}.study-role{grid-template-columns:5fr 5fr 2fr;gap:24px 32px;margin:0;padding:8px 0;display:grid}.study-role dt{margin-bottom:6px}@media (max-width:600px){.study-role{grid-template-columns:1fr;gap:20px}}.study-steps{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.study-steps li{gap:12px;display:flex}.study-step-n{flex-shrink:0;width:20px}.study-list{max-width:var(--measure);flex-direction:column;gap:16px;margin:0;display:flex}.study-list dt{margin-bottom:2px}@media (max-width:600px){.study-stats{grid-template-columns:1fr}}
