.ui-foundations-preview .hit-area-lessons{gap:40px;container-type:inline-size}.ui-foundations-preview .hit-lesson-stage{flex-direction:column;align-items:center;gap:40px;width:min(100%,440px);display:flex;position:relative}.ui-foundations-preview .hit-lesson-stage button{cursor:pointer;font-size:14px;font-weight:500}.ui-foundations-preview .hit-lesson-stage button:focus-visible,.ui-foundations-preview .hit-lesson-scroll:focus-visible{outline:2px solid var(--preview-neutral-3e3e3e,#3e3e3e);outline-offset:4px}.ui-foundations-preview .hit-lesson-stage button svg{flex:none;width:16px;height:16px}.ui-foundations-preview .hit-lesson-hatch{pointer-events:none;color:var(--value-leader-color);background-color:color-mix(in srgb,currentColor 5%,transparent);background-image:repeating-linear-gradient(135deg,transparent 0 2px,color-mix(in srgb,currentColor 24%,transparent)2px 3px);position:absolute;inset:0}.ui-foundations-preview .hit-lesson-target{color:var(--preview-neutral-3e3e3e,#3e3e3e);background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute}@media (hover:hover){.ui-foundations-preview .hit-lesson-target:hover{box-shadow:inset 0 0 0 100vmax #3e3e3e12}}.ui-foundations-preview .hit-lesson-target:active{box-shadow:inset 0 0 0 100vmax #3e3e3e24}.ui-foundations-preview .hit-lesson-measure{pointer-events:none;width:100%;height:2px;color:var(--value-leader-color);position:absolute;top:-16px;left:0}.ui-foundations-preview .hit-lesson-measure>span{background:currentColor;position:absolute;inset:0}.ui-foundations-preview .hit-lesson-measure>span:before,.ui-foundations-preview .hit-lesson-measure>span:after{content:"";background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;top:-1px}.ui-foundations-preview .hit-lesson-measure>span:before{left:-2px}.ui-foundations-preview .hit-lesson-measure>span:after{right:-2px}.ui-foundations-preview .hit-lesson-measure strong{font:700 12px/1.4 var(--font-mono);color:var(--preview-neutral-3e3e3e,#3e3e3e);white-space:nowrap;position:absolute;bottom:7px;left:50%;transform:translate(-50%)}.ui-foundations-preview .hit-lesson-measure--vertical{width:2px;height:100%;top:0;left:-16px}.ui-foundations-preview .hit-lesson-measure--vertical>span:before,.ui-foundations-preview .hit-lesson-measure--vertical>span:after{left:-1px;right:auto}.ui-foundations-preview .hit-lesson-measure--vertical>span:before{top:-2px}.ui-foundations-preview .hit-lesson-measure--vertical>span:after{top:auto;bottom:-2px}.ui-foundations-preview .hit-lesson-measure--vertical strong{inset:50% 7px auto auto;transform:translateY(-50%)}.ui-foundations-preview .hit-lesson-callout{z-index:5;transform-origin:3px;pointer-events:none;align-items:center;gap:20px;display:flex;position:absolute;translate:0 -50%}.ui-foundations-preview .hit-lesson-callout[data-side=left]{transform-origin:calc(100% - 3px);flex-direction:row-reverse}.ui-foundations-preview .hit-lesson-callout[data-measured=false]{visibility:hidden}.ui-foundations-preview .hit-lesson-callout>.value-leader{flex:none}.ui-foundations-preview .hit-lesson-callout__values{flex:none;grid-template-columns:max-content 1fr;gap:6px 12px;width:208px;margin:0;display:grid}.ui-foundations-preview .hit-lesson-callout__values>div{grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;display:grid}.ui-foundations-preview .hit-lesson-callout__values dt{color:var(--preview-neutral-52525b,#52525b);font-family:var(--font-sans);white-space:nowrap;align-items:center;gap:6px;font-size:12px;font-weight:500;display:inline-flex}.ui-foundations-preview .hit-lesson-callout__values dt svg{width:12px;height:12px;color:var(--value-leader-color);flex:none}.ui-foundations-preview .hit-lesson-callout__values dd{color:var(--preview-neutral-3e3e3e,#3e3e3e);font:700 12px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;text-align:left;margin:0}.ui-foundations-preview .hit-area-lessons[data-example=swipe-room] .hit-lesson-callout__values{width:max-content}.ui-foundations-preview .hit-area-lessons[data-example=swipe-room] .hit-lesson-callout__values dd{white-space:nowrap}.ui-foundations-preview .hit-lesson-bars{width:100%;color:var(--fnd-skeleton);fill:currentColor;display:block}.ui-foundations-preview .hit-lesson-action{color:var(--preview-neutral-65656d,#65656d);text-align:center;font-size:12px;font-weight:500}.ui-foundations-preview .hit-lesson-bounds-row{flex-wrap:wrap;justify-content:center;gap:32px;width:100%;padding:64px 16px 16px;display:flex}.ui-foundations-preview .hit-lesson-bound{--coverage-radius:12px;--coverage-outset:4px;width:136px;height:40px;position:relative}.ui-foundations-preview .hit-lesson-button-face{box-sizing:border-box;border:1px solid var(--fnd-line);border-radius:var(--coverage-radius);background:var(--preview-neutral-ffffff,white);color:var(--fnd-heading);box-shadow:var(--shadow-fnd-control);place-items:center;font-size:14px;font-weight:500;display:grid;position:absolute;inset:0}.ui-foundations-preview .hit-lesson-bound .hit-lesson-target{border-radius:calc(var(--coverage-radius) + var(--coverage-outset));width:144px;height:48px;top:-4px;left:-4px;overflow:visible}.ui-foundations-preview .hit-lesson-bound .hit-lesson-hatch{border-radius:0}.ui-foundations-preview .hit-area-lessons[data-coverage-step="1"]{--value-leader-color:#f28c28;--explanation-color:var(--fnd-explanation-warning)}.ui-foundations-preview .hit-area-lessons[data-coverage-step="1"] .hit-lesson-bound .hit-lesson-target{border-radius:var(--coverage-radius);width:136px;height:40px;top:0;left:0}.ui-foundations-preview .hit-area-lessons[data-example=target-bounds] .hit-lesson-target{transition:top var(--preview-state-transition),left var(--preview-state-transition),width var(--preview-state-transition),height var(--preview-state-transition),border-radius var(--preview-state-transition)}.ui-foundations-preview .hit-area-lessons[data-example=target-bounds] .hit-lesson-hatch{transition:color var(--preview-state-transition),opacity var(--preview-reveal-transition);animation:none;transform:none}.ui-foundations-preview .hit-area-lessons[data-example=target-bounds][data-values=true] .hit-lesson-hatch{opacity:1;visibility:visible}.ui-foundations-preview .hit-area-lessons[data-example=target-bounds][data-values=false] .hit-lesson-hatch{opacity:0;visibility:hidden}.ui-foundations-preview .reading-width-stops.coverage-size-stops button{left:calc(var(--reading-stop)*100%/2)}.ui-foundations-preview .reading-width-stops.coverage-size-stops button:nth-child(2){color:#f28c28}.ui-foundations-preview .reading-width-stops.coverage-size-stops button:nth-child(3){color:var(--fnd-success)}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .hit-area-lessons[data-example=target-bounds] :is(.hit-lesson-target,.hit-lesson-hatch){transition:none}}.ui-foundations-preview .hit-lesson-bound .hit-lesson-target:is(:hover,:active){box-shadow:none}.ui-foundations-preview .hit-lesson-bound .hit-lesson-button-face{transition:background-color .12s}@media (hover:hover){.ui-foundations-preview .hit-lesson-bound:has(.hit-lesson-target:hover) .hit-lesson-button-face{background:var(--fnd-page)}}.ui-foundations-preview .hit-lesson-bound:has(.hit-lesson-target:active) .hit-lesson-button-face{background:var(--fnd-line-subtle)}.ui-foundations-preview [data-corrected=false] .hit-lesson-bound[data-kind=offset] .hit-lesson-target{top:-18px;left:10px}.ui-foundations-preview [data-corrected=false] .hit-lesson-bound[data-kind=narrow] .hit-lesson-target{width:44px;left:46px}.ui-foundations-preview [data-corrected=false] .hit-lesson-bound[data-kind=narrow] .hit-lesson-measure--vertical{left:-62px}.ui-foundations-preview .hit-lesson-notice-slot{place-items:center;width:min(100%,360px);min-height:250px;padding-top:28px;display:grid}.ui-foundations-preview .hit-lesson-notice{--notice-radius:20px;--close-inset:8px;border-radius:var(--notice-radius);background:var(--preview-neutral-ffffff,white);outline-offset:-1px;outline:1px solid #0000001a;width:100%;padding:48px 40px 36px;position:relative;box-shadow:0 2px 5px #0000000d}.ui-foundations-preview .hit-lesson-close-slot{width:44px;height:44px;right:var(--close-inset);top:var(--close-inset);position:absolute}.ui-foundations-preview .hit-lesson-close-slot .hit-lesson-target{border-radius:max(0px,calc(var(--notice-radius) - var(--close-inset) - 14px));top:50%;left:50%;overflow:visible;translate:-50% -50%}.ui-foundations-preview [data-corrected=true] .hit-lesson-close-slot .hit-lesson-target{border-radius:max(0px,calc(var(--notice-radius) - var(--close-inset)))}.ui-foundations-preview .hit-lesson-close-slot .hit-lesson-hatch{border-radius:0}.ui-foundations-preview .hit-lesson-close-slot .hit-lesson-target>svg{pointer-events:none;position:relative}.ui-foundations-preview .hit-lesson-notice-skeleton{color:var(--fnd-skeleton)}.ui-foundations-preview .hit-lesson-notice-skeleton svg{fill:currentColor;max-width:100%;display:block}.ui-foundations-preview .hit-lesson-notice-title{margin-bottom:32px}.ui-foundations-preview .hit-lesson-skeleton-button{background:var(--fnd-skeleton);border-radius:8px;width:100%;height:36px;margin-top:24px}.ui-foundations-preview .hit-lesson-reset{place-items:center;gap:16px;display:grid}.ui-foundations-preview .hit-lesson-reset p{color:var(--preview-neutral-3e3e3e,#3e3e3e);font-size:14px}.ui-foundations-preview .hit-lesson-reset button{background:var(--preview-neutral-ffffff,white);min-height:44px;color:var(--preview-neutral-3e3e3e,#3e3e3e);border:1px solid var(--preview-neutral-d4d4d8,#d4d4d8);border-radius:8px;padding:0 16px}.ui-foundations-preview .hit-lesson-collection{background:var(--preview-neutral-ffffff,white);outline-offset:-1px;border-radius:20px;outline:1px solid #0000001a;width:min(100%,420px);padding:24px 0 20px;box-shadow:0 2px 5px #0000000d}.ui-foundations-preview .hit-lesson-collection-top{justify-content:space-between;align-items:center;gap:12px;padding:0 20px 32px;display:flex}.ui-foundations-preview .hit-lesson-heading-bar{width:120px;height:12px;fill:var(--fnd-skeleton);display:block}.ui-foundations-preview .hit-lesson-scroll-buttons{gap:8px;display:flex}.ui-foundations-preview .hit-lesson-scroll-buttons button{background:var(--preview-neutral-f4f4f5,#f4f4f5);width:44px;height:44px;color:var(--preview-neutral-3e3e3e,#3e3e3e);border:0;border-radius:8px;place-items:center;display:grid}@media (hover:hover){.ui-foundations-preview .hit-lesson-scroll-buttons button:hover,.ui-foundations-preview .hit-lesson-reset button:hover{background:var(--preview-neutral-e4e4e7,#e4e4e7)}}.ui-foundations-preview .hit-lesson-scroll-buttons button:active,.ui-foundations-preview .hit-lesson-reset button:active{background:var(--preview-neutral-d4d4d8,#d4d4d8)}.ui-foundations-preview .hit-lesson-scroll{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--preview-neutral-a1a1aa,#a1a1aa)var(--preview-neutral-f4f4f5,#f4f4f5);cursor:grab;-webkit-user-select:none;user-select:none;overflow-x:auto}.ui-foundations-preview .hit-lesson-scroll:active{cursor:grabbing}.ui-foundations-preview .hit-lesson-scroll-content{width:max-content;padding-inline:20px;position:relative}.ui-foundations-preview .hit-lesson-collection-items{gap:12px;display:flex}.ui-foundations-preview .hit-lesson-collection-items article{width:136px}.ui-foundations-preview .hit-lesson-collection-art{background:#f0d4bb url(/ui-foundations/images/coral-dunes.png) var(--collection-position)center/auto 100%;border-radius:10px;height:140px}.ui-foundations-preview .hit-lesson-collection-items p{color:var(--preview-neutral-3e3e3e,#3e3e3e);margin:12px 0;font-size:12px;font-weight:500}.ui-foundations-preview .hit-lesson-swipe-strip{height:0;position:relative}.ui-foundations-preview [data-corrected=true] .hit-lesson-swipe-strip{height:44px}.ui-foundations-preview .hit-lesson-color-card{background:var(--preview-neutral-ffffff,white);outline-offset:-1px;border-radius:20px;outline:1px solid #0000001a;width:min(100%,320px);padding:24px;display:grid;position:relative;box-shadow:0 2px 5px #0000000d}.ui-foundations-preview .hit-lesson-result{border-radius:12px;flex-direction:column;grid-row:2;justify-content:center;height:180px;padding:24px;display:flex;position:relative}.ui-foundations-preview .hit-lesson-result>.hit-lesson-hatch{border-radius:inherit}.ui-foundations-preview .hit-lesson-result>.hit-lesson-notice-skeleton{position:relative}.ui-foundations-preview .hit-lesson-color-options{grid-row:1;justify-content:center;gap:12px;margin-bottom:20px;display:flex;position:relative}.ui-foundations-preview .hit-lesson-color-options button{z-index:2;background:0 0;border:0;place-items:center;width:44px;height:44px;padding:0;display:grid;position:relative}.ui-foundations-preview .hit-lesson-swatch{box-sizing:border-box;border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,white);width:32px;height:32px;color:var(--fnd-heading);box-shadow:var(--shadow-fnd-control);border-radius:8px;place-items:center;transition:background-color .12s,border-color .12s;display:grid;position:relative}.ui-foundations-preview .hit-lesson-color-options button[aria-pressed=true] .hit-lesson-swatch{border-color:var(--fnd-heading);background:var(--fnd-page)}.ui-foundations-preview .hit-lesson-swatch svg{width:14px;height:14px}@media (hover:hover){.ui-foundations-preview .hit-lesson-color-options button:hover .hit-lesson-swatch{background:var(--fnd-page);border-color:var(--fnd-line-medium)}}.ui-foundations-preview .hit-lesson-color-options button:active .hit-lesson-swatch{background:var(--fnd-line-subtle)}.ui-foundations-preview .hit-lesson-color-options button:focus-visible{outline:2px solid var(--fnd-heading);outline-offset:2px;border-radius:10px}.ui-foundations-preview [data-corrected=true] .hit-lesson-result{grid-row:1}.ui-foundations-preview [data-corrected=true] .hit-lesson-color-options{grid-row:2;margin-top:20px;margin-bottom:0}.ui-foundations-preview [data-lesson=unobscured-result]{gap:96px;padding-bottom:56px}.ui-foundations-preview .hit-lesson-carousel{border-radius:16px;width:min(100%,440px);height:240px;position:relative}.ui-foundations-preview .hit-lesson-carousel-art{border-radius:inherit;background:#f0d4bb url(/ui-foundations/images/coral-dunes.png) 50%/auto 160% no-repeat;position:absolute;inset:0}.ui-foundations-preview .hit-lesson-carousel .hit-lesson-target{width:24px;height:24px;top:50%;translate:0 -50%}.ui-foundations-preview .hit-lesson-carousel .hit-lesson-target[data-side=left]{left:12px}.ui-foundations-preview .hit-lesson-carousel .hit-lesson-target[data-side=right]{right:12px}.ui-foundations-preview .hit-lesson-arrow-face{background:var(--preview-neutral-ffffff,white);width:24px;height:24px;color:var(--preview-neutral-3e3e3e,#3e3e3e);pointer-events:none;border-radius:50%;place-items:center;display:grid;position:relative;box-shadow:0 1px 4px #0000001f}.ui-foundations-preview [data-corrected=true] .hit-lesson-carousel .hit-lesson-target{width:48px;height:100%}.ui-foundations-preview [data-corrected=true] .hit-lesson-carousel .hit-lesson-target[data-side=left]{border-radius:16px 0 0 16px;left:0}.ui-foundations-preview [data-corrected=true] .hit-lesson-carousel .hit-lesson-target[data-side=right]{border-radius:0 16px 16px 0;right:0}.ui-foundations-preview .hit-lesson-carousel .hit-lesson-hatch{border-radius:inherit}.ui-foundations-preview .hit-lesson-slide-count{background:var(--preview-neutral-ffffff,white);color:var(--preview-neutral-3e3e3e,#3e3e3e);pointer-events:none;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;position:absolute;bottom:12px;left:50%;translate:-50%}@container (max-width:1040px){.ui-foundations-preview .hit-lesson-callout{margin-inline:auto;position:static;translate:none}.ui-foundations-preview .hit-lesson-callout>.value-leader{display:none}.ui-foundations-preview .hit-lesson-callout__values{width:min(100%,300px)}}