.ui-foundations-preview .book-demo .task-first-card{width:400px;padding:28px}.ui-foundations-preview .task-first-stack{flex-direction:column;align-items:stretch;gap:24px;min-width:0;display:flex}.ui-foundations-preview .task-first-stack>.task-first-button{align-self:flex-start}.ui-foundations-preview .book-demo .task-first-card h3{font-family:var(--font-sans);letter-spacing:-.025em;font-size:22px;font-weight:600;line-height:28px}.ui-foundations-preview .task-first-card .lucide{width:16px;height:16px;color:var(--preview-neutral-6b6b73,#6b6b73);flex:none}.ui-foundations-preview .task-first-skeleton{max-width:100%;color:var(--fnd-skeleton);flex:none;display:block}.ui-foundations-preview .task-first-copy{flex-direction:column;gap:16px;min-width:0;display:flex}.ui-foundations-preview .book-demo .task-first-copy p{color:var(--fnd-body);font-size:14px;line-height:1.5}.ui-foundations-preview .task-first-fields{flex-direction:column;gap:24px;display:flex}.ui-foundations-preview .book-demo .task-first-card .book-field{color:var(--input-demo-text);gap:8px;font-size:14px}.ui-foundations-preview .book-demo .task-first-card .book-field input{height:40px;min-height:40px;padding:0 14px}.ui-foundations-preview .book-demo .task-first-card input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;width:14px;height:14px}.ui-foundations-preview .book-demo .task-first-card .task-first-button{border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,white);height:40px;min-height:40px;max-height:40px;color:var(--fnd-heading);font:500 14px/20px var(--font-sans);box-shadow:var(--shadow-fnd-control);border-radius:12px;padding:0 18px;text-decoration:none;transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out;transform:none}.ui-foundations-preview .book-demo .task-first-card .task-first-button:has(>svg:first-child){padding-inline-start:14px}.ui-foundations-preview .task-first-card .task-first-button svg{color:inherit}.ui-foundations-preview .book-demo .task-first-card .task-first-button:enabled:hover{background:var(--fnd-page);border-color:var(--fnd-line-medium);transform:none}.ui-foundations-preview .book-demo .task-first-card .task-first-button:enabled:active{background:var(--fnd-line-subtle);transform:none}.ui-foundations-preview .book-demo .task-first-card .task-first-button.book-button--primary{background:var(--preview-neutral-3e3e3e,#3e3e3e);border-color:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,white)}.ui-foundations-preview .book-demo .task-first-card .task-first-button.book-button--primary:enabled:hover{background:var(--preview-neutral-505050,#505050);border-color:var(--preview-neutral-505050,#505050)}.ui-foundations-preview .book-demo .task-first-card .task-first-button.book-button--primary:enabled:active{background:var(--preview-neutral-303030,#303030);border-color:var(--preview-neutral-303030,#303030)}.ui-foundations-preview .book-demo .task-first-card .task-first-button.book-button--plain{box-shadow:none;background:0 0;border-color:#0000}.ui-foundations-preview .book-demo .task-first-card .task-first-button.book-button--plain:enabled:hover{background:var(--fnd-page)}.ui-foundations-preview .book-demo .task-first-card .task-first-button:focus-visible{outline:2px solid var(--fnd-heading);outline-offset:2px}.ui-foundations-preview .task-first-context{align-items:center;gap:16px;display:flex}.ui-foundations-preview .task-first-context .lucide{width:28px;height:28px}.ui-foundations-preview .task-first-highlight{z-index:2;color:var(--value-leader-color);pointer-events:none;border:0;border-radius:8px;position:absolute;inset:-4px}.ui-foundations-preview .task-first-highlight:before{opacity:.2}.ui-foundations-preview .task-feature-target,.ui-foundations-preview .task-detail-preview,.ui-foundations-preview .task-personality-copy,.ui-foundations-preview .task-shared-action{position:relative}.ui-foundations-preview .book-demo .task-first-error{color:#b91c1c;font-size:14px;line-height:20px}.dark .ui-foundations-preview .book-demo .task-first-error{color:#fda4af}.ui-foundations-preview .task-first-status{color:var(--fnd-body);font-size:14px;line-height:20px}.ui-foundations-preview .book-demo .task-feature-card--shell{grid-template-columns:144px minmax(0,1fr);width:544px;padding:0;display:grid;overflow:hidden}.ui-foundations-preview .task-feature-card--shell .task-feature-form{padding:28px}.ui-foundations-preview .task-feature-sidebar{background:var(--fnd-page);flex-direction:column;gap:24px;padding:32px 20px;display:flex}.ui-foundations-preview .task-feature-sidebar>svg{margin-bottom:12px}.ui-foundations-preview .task-feature-sidebar>div{align-items:center;gap:12px;display:flex}.ui-foundations-preview .task-feature-sidebar .task-first-skeleton{flex-shrink:1;min-width:0}.ui-foundations-preview .task-feature-sidebar>.task-first-highlight{border-radius:0;inset:0}.ui-foundations-preview .book-demo .task-detail-card{width:300px}.ui-foundations-preview .task-detail-preview{isolation:isolate;background:var(--fnd-page);border-radius:8px;place-items:center;height:88px;transition:background-color .22s ease-out;display:grid}.ui-foundations-preview .task-detail-preview>.lucide{width:28px;height:28px;position:relative}.ui-foundations-preview .task-detail-decoration{border-radius:inherit;fill:#c7d2fe;opacity:0;width:100%;height:100%;transition:opacity .22s ease-out;position:absolute;inset:0;overflow:hidden}.ui-foundations-preview .task-detail-preview[data-decorated=true]{background:#e0e7ff}.ui-foundations-preview .task-detail-preview[data-decorated=true]>.lucide{color:#6b6b73}.ui-foundations-preview .task-detail-preview[data-decorated=true] .task-detail-decoration{opacity:1}.ui-foundations-preview .book-demo .task-personality-copy[data-matched=false] h3{font-family:Georgia,serif;font-style:italic}.ui-foundations-preview .task-shared-list{flex-direction:column;gap:20px;display:flex}.ui-foundations-preview .task-shared-row{grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:16px;display:grid}.ui-foundations-preview .task-shared-row>.lucide{width:24px;height:24px}.ui-foundations-preview .task-shared-copy{flex-direction:column;gap:12px;min-width:0;display:flex}.ui-foundations-preview .task-shared-detail:not([hidden]){flex-direction:column;grid-column:2/-1;gap:16px;padding-block:4px 8px;display:flex}.ui-foundations-preview .task-shared-detail strong{font-size:14px;font-weight:500}@media (max-width:640px){.ui-foundations-preview .book-demo[data-consistent=true]:has(.task-first-card) .book-annotated{min-width:0;max-width:100%;padding:16px 0}.ui-foundations-preview .book-demo:has(.task-first-card) .book-callouts{margin-top:20px;position:static}.ui-foundations-preview .book-demo:has(.task-first-card) .book-callouts__lines{display:none}.ui-foundations-preview .book-demo:has(.task-first-card) .book-callouts__label{align-items:center;width:100%;position:static;transform:none}.ui-foundations-preview .book-demo:has(.task-first-card) .book-callouts__label-content{align-self:center}.ui-foundations-preview .book-demo .task-first-card{padding:20px}.ui-foundations-preview .book-demo .task-feature-card--shell{grid-template-columns:minmax(0,1fr);padding:0}.ui-foundations-preview .task-feature-card--shell .task-feature-form{padding:20px}.ui-foundations-preview .task-feature-sidebar{flex-direction:row;gap:24px;padding:20px}.ui-foundations-preview .task-feature-sidebar .task-first-skeleton{display:none}.ui-foundations-preview .task-shared-row{gap:12px}}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .book-demo .task-first-card .task-first-button,.ui-foundations-preview .task-detail-preview,.ui-foundations-preview .task-detail-decoration{transition:none}}
.ui-foundations-preview .book-demo[data-detail-motion]{--detail-content-transition:var(--preview-state-transition);--preview-surface-fade:var(--preview-state-transition);--preview-text-fade:var(--detail-content-transition);--comparison-resize:var(--preview-state-transition)}.ui-foundations-preview .interface-detail-swap{clip-path:inset(-4px);width:100%;transition:height var(--preview-state-transition);position:relative}.ui-foundations-preview .interface-detail-state{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--detail-content-transition),visibility 0s linear .26s;position:absolute;inset:0 0 auto}.ui-foundations-preview .interface-detail-state[data-detail-active=true]{opacity:1;pointer-events:auto;position:relative}.ui-foundations-preview .interface-detail-state[data-detail-visible=true]{visibility:visible;transition-delay:0s}.ui-foundations-preview .interface-detail-swap>.interface-swap-guide{pointer-events:none;transition:left var(--preview-state-transition),top var(--preview-state-transition),width var(--preview-state-transition),height var(--preview-state-transition);position:absolute}.ui-foundations-preview .book-demo[data-detail-motion] [data-corrected]{--value-leader-color:inherit}.ui-foundations-preview .interface-marker-layer{opacity:0;transition:opacity var(--detail-content-transition);grid-area:1/1;place-items:center;display:grid}.ui-foundations-preview .interface-marker-layer[data-detail-active=true]{opacity:1}.ui-foundations-preview .book-demo[data-detail-motion] .interface-activity{transition:gap var(--preview-state-transition)}.ui-foundations-preview .book-demo[data-detail-motion] .interface-accent-target{transition:width var(--preview-state-transition)}.ui-foundations-preview .book-demo[data-detail-motion] .interface-accent-target .interface-detail-highlight{transition:inset var(--preview-state-transition),border-radius var(--preview-state-transition),color var(--preview-state-transition),opacity var(--preview-reveal-transition)}.ui-foundations-preview .book-demo .interface-detail-card{flex-direction:column;gap:24px;width:400px;padding:28px;display:flex}.ui-foundations-preview .book-demo .interface-detail-card h3{letter-spacing:-.025em;font-size:18px;font-weight:600;line-height:24px}.ui-foundations-preview .interface-detail-card p{color:var(--fnd-body);font-size:14px;line-height:21px}.ui-foundations-preview .interface-detail-card strong{font-size:16px;font-weight:500;line-height:24px}.ui-foundations-preview .interface-detail-card .lucide{width:16px;height:16px;color:var(--preview-neutral-6b6b73,#6b6b73);flex:none}.ui-foundations-preview .interface-detail-copy{flex-direction:column;gap:8px;min-width:0;display:flex}.ui-foundations-preview .interface-detail-highlight{z-index:2;color:var(--value-leader-color);pointer-events:none;border:0;border-radius:8px;position:absolute;inset:-4px}.ui-foundations-preview .interface-detail-highlight:before{opacity:.2}.ui-foundations-preview .interface-benefit-marker,.ui-foundations-preview .interface-empty-target,.ui-foundations-preview .interface-empty-inactive,.ui-foundations-preview .interface-activity-row,.ui-foundations-preview .interface-plan-copy{position:relative}.ui-foundations-preview .book-demo .interface-detail-card .interface-detail-button{border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,#fff);height:40px;min-height:40px;max-height:40px;color:var(--preview-neutral-3e3e3e,#3e3e3e);box-shadow:var(--shadow-fnd-control);transition:background-color var(--preview-state-transition);border-radius:12px;padding-inline:18px;font-size:14px;font-weight:500;line-height:20px}.ui-foundations-preview .book-demo .interface-detail-card .interface-detail-button:hover{background:var(--fnd-page);transform:none}.ui-foundations-preview .book-demo .interface-detail-card .interface-detail-button:active{transform:none}.ui-foundations-preview .book-demo .interface-detail-card .interface-detail-button:focus-visible{outline:2px solid var(--preview-neutral-3e3e3e,#3e3e3e);outline-offset:2px}.ui-foundations-preview .book-demo .interface-detail-card .interface-detail-button.book-button--primary{background:var(--preview-neutral-3e3e3e,#3e3e3e);border-color:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,#fff)}.ui-foundations-preview .book-demo .interface-detail-card .interface-detail-button.book-button--primary:hover{background:var(--preview-neutral-505050,#505050);border-color:var(--preview-neutral-505050,#505050)}.ui-foundations-preview .book-demo .interface-detail-card .interface-detail-button.book-button--primary:active{background:var(--preview-neutral-303030,#303030);border-color:var(--preview-neutral-303030,#303030)}.ui-foundations-preview .interface-detail-button .lucide{color:inherit}.ui-foundations-preview .interface-benefits.book-benefits,.ui-foundations-preview .interface-benefits.book-default-list{gap:8px;padding:0;list-style:none}.ui-foundations-preview .interface-benefits li{align-items:center;gap:12px;min-height:32px;font-size:16px;line-height:24px;display:flex}.ui-foundations-preview .interface-benefit-marker{flex:none;place-items:center;width:20px;height:20px;display:grid}.ui-foundations-preview .interface-benefit-dot{background:var(--preview-neutral-6b6b73,#6b6b73);border-radius:50%;width:4px;height:4px}.ui-foundations-preview .interface-updates{border-top:1px solid var(--fnd-line-subtle);cursor:pointer;align-items:center;gap:8px;padding-top:16px;font-size:14px;font-weight:500;line-height:20px;display:flex}.ui-foundations-preview .book-demo .interface-accent-card{flex-direction:row;align-items:flex-start;gap:12px;width:440px;position:relative}.dark .ui-foundations-preview .interface-accent-card{--detail-accent-fill:#17243a}.ui-foundations-preview .interface-detail-card .interface-accent-icon{color:#2563eb;width:20px;height:20px;margin-top:2px}.ui-foundations-preview .interface-accent-edge{border-radius:inherit;background:linear-gradient(to right,#2563eb var(--detail-accent-width),transparent var(--detail-accent-width));opacity:0;pointer-events:none;transition:opacity var(--preview-state-transition);position:absolute;inset:0}.ui-foundations-preview .interface-accent-edge[data-visible=true]{opacity:1}.ui-foundations-preview .interface-accent-target{pointer-events:none;width:100%;position:absolute;inset:0 auto 0 0}.ui-foundations-preview .interface-accent-target[data-corrected=true]{width:var(--detail-accent-width)}.ui-foundations-preview .interface-accent-target .interface-detail-highlight{border-radius:16px;inset:0}.ui-foundations-preview .interface-accent-target[data-corrected=true] .interface-detail-highlight{border-radius:2px;inset:12px -4px}.ui-foundations-preview .book-demo .interface-pattern-card{gap:0;padding-block:40px;position:relative;overflow:hidden}.ui-foundations-preview .interface-pattern-card>.interface-detail-copy{gap:16px;position:relative}.ui-foundations-preview .book-demo .interface-pattern-card h3{font-size:28px;line-height:34px}.ui-foundations-preview .interface-detail-eyebrow{letter-spacing:.08em;color:var(--preview-neutral-6b6b73,#6b6b73);font-size:11px;font-weight:600;line-height:16px}.ui-foundations-preview .interface-pattern-target{width:32px;height:32px;position:absolute;top:24px;right:24px}.ui-foundations-preview .interface-project-body{flex-direction:column;justify-content:center;min-height:224px;display:flex}.ui-foundations-preview .interface-empty-state{flex-direction:column;align-items:center;gap:12px;padding:0;display:flex}.ui-foundations-preview .interface-empty-state>.lucide{width:28px;height:28px;margin-bottom:4px}.ui-foundations-preview .interface-empty-state :is(.interface-empty-target,.interface-empty-inactive){margin-top:8px}.ui-foundations-preview .interface-empty-state p{max-width:30ch}.ui-foundations-preview .interface-empty-before{flex-direction:column;flex:1;align-self:stretch;gap:24px;min-height:224px;display:flex}.ui-foundations-preview .interface-project-tabs{border-bottom:1px solid var(--fnd-line-subtle);color:var(--preview-neutral-6b6b73,#6b6b73);gap:20px;padding-bottom:12px;font-size:14px;line-height:20px;display:flex}.ui-foundations-preview .interface-project-tabs>:first-child{color:var(--preview-neutral-3e3e3e,#3e3e3e);font-weight:500}.ui-foundations-preview .interface-empty-before :is(.interface-empty-target,.interface-empty-inactive){align-self:center;margin-block:auto}.ui-foundations-preview .interface-project-result{flex-direction:column;align-items:flex-start;gap:12px;display:flex}.ui-foundations-preview .interface-project-result>.lucide{width:24px;height:24px}.ui-foundations-preview .interface-project-result .interface-detail-button{margin-top:8px}.ui-foundations-preview .interface-activity-row{border:1px solid var(--preview-neutral-c4c4cb,#c4c4cb);background:var(--preview-neutral-ffffff,#fff);border-radius:8px;flex-direction:column;gap:4px;padding:12px;display:flex}.ui-foundations-preview .interface-activity-row[data-corrected=true]{background:var(--preview-neutral-f7f7f8,#f7f7f8);border-color:#0000}.ui-foundations-preview .interface-activity-row .interface-detail-highlight{border-radius:2px;width:8px;inset:8px -4px 8px auto}.ui-foundations-preview .interface-plan-options{border:0;flex-direction:column;gap:4px;min-width:0;margin:0;padding:0;display:flex}.ui-foundations-preview .interface-plan-option{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;min-width:0;padding:8px 0;display:flex}.ui-foundations-preview .book-demo .interface-plan-option>input{margin:0}.ui-foundations-preview .interface-plan-copy{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.ui-foundations-preview .interface-plan-options[data-detailed=true]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.ui-foundations-preview .interface-plan-options[data-detailed=true] .interface-plan-option{border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,#fff);border-radius:12px;padding:16px;transition:background-color .15s ease-out;position:relative}.ui-foundations-preview .interface-plan-options[data-detailed=true] .interface-plan-option:hover{background:var(--preview-neutral-fafafa,#fafafa)}.ui-foundations-preview .interface-plan-options[data-detailed=true] .interface-plan-option[data-selected=true]{border-color:var(--preview-neutral-3e3e3e,#3e3e3e);background:var(--preview-neutral-fafafa,#fafafa)}.ui-foundations-preview .interface-plan-options[data-detailed=true] .interface-plan-option:has(input:focus-visible){outline:2px solid var(--preview-neutral-3e3e3e,#3e3e3e);outline-offset:3px}.ui-foundations-preview .book-demo .interface-plan-options[data-detailed=true] .interface-plan-option>input{z-index:1;margin:0;position:absolute;top:18px;right:16px}.ui-foundations-preview .interface-plan-options[data-detailed=true] .interface-plan-option>input:focus-visible{box-shadow:none;outline:none}.ui-foundations-preview .interface-plan-options[data-detailed=true] .interface-plan-copy{gap:0}.ui-foundations-preview .interface-plan-options[data-detailed=true] .interface-plan-copy>strong{padding-right:24px;font-size:14px;font-weight:600;line-height:20px}.ui-foundations-preview .interface-plan-price{white-space:nowrap;letter-spacing:-.04em;color:var(--preview-neutral-3e3e3e,#3e3e3e);align-items:baseline;gap:4px;margin-top:20px;font-size:28px;font-weight:600;line-height:36px;display:flex}.ui-foundations-preview .interface-plan-price small{letter-spacing:0;color:var(--preview-neutral-6b6b73,#6b6b73);font-size:12px;font-weight:400;line-height:18px}.ui-foundations-preview .interface-plan-description{min-height:40px;color:var(--preview-neutral-6b6b73,#6b6b73);margin-top:8px;font-size:14px;line-height:20px}.ui-foundations-preview .interface-plan-members{border-top:1px solid var(--fnd-line-subtle);white-space:nowrap;color:var(--preview-neutral-6b6b73,#6b6b73);align-items:center;gap:8px;margin-top:16px;padding-top:12px;font-size:12px;line-height:20px;display:flex}.ui-foundations-preview .interface-detail-card .interface-plan-members svg{flex-shrink:0;width:12px;height:12px}.ui-foundations-preview .interface-plan-copy .interface-detail-highlight{inset:-4px}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .book-demo .interface-detail-card .interface-detail-button,.ui-foundations-preview .interface-accent-edge,.ui-foundations-preview .interface-detail-swap,.ui-foundations-preview .interface-detail-state,.ui-foundations-preview .interface-marker-layer,.ui-foundations-preview .interface-detail-swap>.interface-swap-guide,.ui-foundations-preview .book-demo[data-detail-motion] .interface-activity,.ui-foundations-preview .book-demo[data-detail-motion] .interface-accent-target,.ui-foundations-preview .book-demo[data-detail-motion] .interface-accent-target .interface-detail-highlight{transition:none}}@media (max-width:640px){.ui-foundations-preview .book-demo .interface-detail-card{padding:20px}.ui-foundations-preview .interface-plan-options[data-detailed=true]{grid-template-columns:minmax(0,1fr)}.ui-foundations-preview .interface-plan-description{min-height:0}}
.ui-foundations-preview .ap-activity-example{--ap-muted:var(--example-secondary-text,var(--preview-neutral-5e5e5e,#5e5e5e));gap:24px;container-type:inline-size}.ui-foundations-preview .ap-activity-target{grid-template-columns:164px minmax(0,384px);align-items:center;gap:40px;width:588px;display:grid}.ui-foundations-preview .ap-activity-annotation{align-self:start;margin-top:-48px}.ui-foundations-preview .ap-activity-target .ap-activity-measure{text-align:left;flex-direction:row-reverse;justify-content:flex-end;gap:16px;width:auto;max-width:none;position:static;inset:auto;translate:none}.ui-foundations-preview .ap-activity-measure>svg{rotate:90deg}.ui-foundations-preview .ap-activity-measure>b{font:inherit}.ui-foundations-preview .ap-activity-value{white-space:nowrap;color:var(--fnd-heading);font:700 12px/1.5 var(--font-mono);font-variant-numeric:tabular-nums;display:block}.ui-foundations-preview .ap-activity-pull-area{touch-action:none;-webkit-user-select:none;user-select:none;min-width:0;padding-bottom:48px;position:relative}.ui-foundations-preview .ap-activity-list{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;transform-origin:50% 0;border-radius:8px;width:100%;height:288px;margin:0;padding:0;list-style:none;position:relative}.ui-foundations-preview .ap-activity-list:active{cursor:grabbing}.ui-foundations-preview .ap-activity-list[aria-busy=true]{cursor:progress}.ui-foundations-preview .ap-activity-row{align-items:center;gap:16px;height:72px;padding:12px 0;display:flex;position:absolute;inset:0 0 auto}.ui-foundations-preview .ap-activity-avatar{border:1px solid var(--preview-neutral-e4e4e7,#e4e4e7);background:var(--ap-soft);border-radius:50%;flex:none;width:40px;height:40px;display:block;position:relative;overflow:hidden}.ui-foundations-preview .ap-activity-avatar img{object-fit:cover}.ui-foundations-preview .ap-activity-bar-track{flex:1;min-width:0}.ui-foundations-preview .ap-activity-bar{background:var(--preview-neutral-e4e4e7,#e4e4e7);border-radius:999px;height:24px;display:block}.ui-foundations-preview .ap-activity-cue{color:var(--fnd-heading);opacity:0;pointer-events:none;justify-content:center;font-size:13px;font-weight:500;transition:opacity .16s cubic-bezier(.25,1,.5,1);display:flex;position:absolute;top:-44px;left:0;right:0}.ui-foundations-preview .ap-activity-cue[data-visible=true]{opacity:1}.ui-foundations-preview .ap-activity-cue[hidden]{display:none}.ui-foundations-preview .ap-activity-cue>span{align-items:center;gap:8px;min-height:24px;display:inline-flex}.ui-foundations-preview .ap-activity-cue svg{width:14px;height:14px}.ui-foundations-preview .ap-activity-cue-icon{place-items:center;display:grid}.ui-foundations-preview .ap-activity-instructions{color:var(--ap-muted);text-align:left;white-space:nowrap;margin:4px 0 0;font-size:12px}.ui-foundations-preview .ap-activity-instructions>span{display:none}.ui-foundations-preview .ap-activity-example:has(.ap-activity-list:focus-visible) .ap-activity-instructions>span{white-space:normal;margin-top:4px;display:block}@container (max-width:580px){.ui-foundations-preview .ap-activity-target{grid-template-columns:minmax(0,384px);justify-content:center;gap:64px}.ui-foundations-preview .ap-activity-annotation{justify-self:start;max-width:300px;margin-top:0}}@container (max-width:340px){.ui-foundations-preview .ap-activity-row{gap:10px}}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .ap-activity-list{transform:none!important}.ui-foundations-preview .ap-activity-cue{transition:none}}
.ui-foundations-preview .ap-nav-stack{container-type:inline-size}.ui-foundations-preview .ap-nav-sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ui-foundations-preview .ap-nav-board{width:520px;color:var(--fnd-heading)}.ui-foundations-preview .ap-nav-board-headings{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:12px;display:grid}.ui-foundations-preview .ap-nav-board-headings>div{color:var(--example-secondary-text,var(--ap-muted));padding-inline:12px;font-size:13px;font-weight:500}.ui-foundations-preview .ap-nav-board-lanes{grid-template-rows:104px;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.ui-foundations-preview .ap-nav-lane{background:var(--ap-soft);border-radius:20px;grid-row:1}.ui-foundations-preview .ap-nav-lane:first-child{grid-column:1}.ui-foundations-preview .ap-nav-lane:nth-child(2){grid-column:2}.ui-foundations-preview .ap-nav-task{z-index:1;border:1px solid var(--fnd-line);background:var(--ap-paper);min-width:0;color:var(--fnd-heading);font:inherit;text-align:center;cursor:pointer;transform-origin:50%;border-radius:12px;grid-row:1;justify-content:center;align-self:stretch;align-items:center;margin:8px;padding:16px;display:flex}.ui-foundations-preview .ap-nav-task>strong{font-size:14px;font-weight:600;line-height:1.4}.ui-foundations-preview .ap-nav-files{width:340px;height:268px;color:var(--fnd-heading)}.ui-foundations-preview .ap-nav-file-card{background:var(--ap-paper);border:0;border-radius:18px;padding:8px;position:relative}.ui-foundations-preview .ap-nav-file-card>.ap-measure{text-align:right;white-space:nowrap;flex-direction:row-reverse;gap:8px;inset:32px calc(100% + 8px) auto auto;translate:0 -50%}.ui-foundations-preview .ap-nav-file-card>.ap-measure>svg{width:32px;height:32px;rotate:90deg}@container (min-width:700px){.ui-foundations-preview .ap-nav-files{margin-left:280px}}@container (max-width:699px){.ui-foundations-preview .ap-nav-files{width:calc(100% - 144px);margin-left:144px}.ui-foundations-preview .ap-nav-file-card>.ap-measure{white-space:normal;width:136px}.ui-foundations-preview .ap-nav-file-card>.ap-measure>b{min-width:0}}.ui-foundations-preview .ap-nav-folder{width:100%;min-height:48px;color:var(--fnd-heading);font:inherit;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:10px;align-items:center;gap:12px;padding:12px 16px;display:flex}.ui-foundations-preview .ap-nav-folder strong{flex:1;font-size:1rem;font-weight:600}.ui-foundations-preview .ap-nav-folder>svg,.ui-foundations-preview .ap-nav-file-item>svg{flex:none;width:20px;height:20px}.ui-foundations-preview .ap-nav-folder>.ap-nav-folder-toggle{width:16px;height:16px}.ui-foundations-preview .ap-nav-file-reveal{overflow:hidden}.ui-foundations-preview .ap-nav-file-list{flex-direction:column;gap:4px;padding:4px 0;display:flex}.ui-foundations-preview .ap-nav-file-item{width:100%;min-height:40px;color:var(--example-secondary-text,var(--ap-muted));text-align:left;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:12px;padding:8px 12px;display:flex}.ui-foundations-preview .ap-nav-file-item strong{min-width:0;color:var(--fnd-heading);text-overflow:ellipsis;white-space:nowrap;font-size:1rem;font-weight:500;overflow:hidden}.ui-foundations-preview .ap-nav-file-marker{border-radius:4px;flex:none;width:14px;height:14px;margin-inline:1px}.ui-foundations-preview .ap-nav-file-count{background:var(--ap-soft);color:var(--example-secondary-text);font-variant-numeric:tabular-nums;border-radius:8px;margin-left:auto;padding:2px 8px;font-size:.875rem;font-weight:500;line-height:1.5}.ui-foundations-preview .ap-nav-file-item[aria-pressed=true]{background:color-mix(in srgb,var(--ap-soft)60%,var(--ap-paper))}.ui-foundations-preview .ap-nav-calendar{width:384px}.ui-foundations-preview .ap-nav-tabs{background:var(--ap-paper);border-radius:18px;padding:8px;display:flex;position:relative}.ui-foundations-preview .ap-nav-tabs>button{z-index:1;min-width:0;min-height:44px;color:var(--example-secondary-text,var(--ap-muted));font:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:1;padding:10px 12px;font-size:1rem;font-weight:500;position:relative}.ui-foundations-preview .ap-nav-tabs>button[aria-pressed=true]{color:var(--ap-paper)}.ui-foundations-preview .ap-nav-tab-indicator{background:var(--ap-ink);pointer-events:none;border:0;border-radius:10px;width:calc(33.3333% - 5.33333px);height:calc(100% - 16px);position:absolute;top:8px;left:0;transform:translate(8px)}@media (hover:hover){.ui-foundations-preview .ap-nav-tabs>button:not([aria-pressed=true]):hover{color:var(--fnd-heading)}}@container (max-width:460px){.ui-foundations-preview .ap-nav-board-lanes{grid-template-rows:140px;gap:10px}.ui-foundations-preview .ap-nav-board-headings{gap:10px}.ui-foundations-preview .ap-nav-task{padding:12px}}
.ui-foundations-preview .ap-commerce,.ui-foundations-preview .ap-message,.ui-foundations-preview .ap-checklist{width:420px}.ui-foundations-preview .ap-save-example .ap-button,.ui-foundations-preview .ap-commerce .ap-button,.ui-foundations-preview .ap-message .ap-button{min-height:44px;box-shadow:none}.ui-foundations-preview .ap-save-example .ap-save{min-width:164px;min-height:44px;font:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:12px;padding:0}.ui-foundations-preview .ap-save-example .ap-save-surface{transform-origin:50%;pointer-events:none;width:100%;min-height:44px}.ui-foundations-preview .ap-commerce{justify-content:space-between;align-items:center;gap:40px;width:340px;padding:8px;display:flex}.ui-foundations-preview .ap-stack.ap-commerce-stack{flex-flow:row;justify-content:center;gap:8px;position:relative}.ui-foundations-preview .ap-commerce-stack>.ap-measure{text-align:right;white-space:nowrap;flex-direction:row-reverse;gap:8px;position:absolute;inset:50% calc(50% + 178px) auto auto;translate:0 -50%}.ui-foundations-preview .ap-commerce-stack>.ap-measure>svg{width:32px;height:32px;rotate:90deg}.ui-foundations-preview .ap-commerce .ap-button{border:0;border-radius:10px;font-size:1rem;font-weight:500}.ui-foundations-preview .ap-commerce .ap-button .ap-commerce-item{color:inherit}.ui-foundations-preview .ap-commerce-trigger{font:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:10px;padding:0}.ui-foundations-preview .ap-commerce-surface{transform-origin:50%;pointer-events:none}.ui-foundations-preview .ap-commerce-item{width:22px;height:22px;color:var(--fnd-heading);flex:none;display:flex}.ui-foundations-preview .ap-commerce-item>svg{width:22px;height:22px}.ui-foundations-preview .ap-commerce-bag{width:48px;min-height:44px;color:var(--ap-ink);flex:none;justify-content:center;align-items:center;display:flex;position:relative}.ui-foundations-preview .ap-commerce-bag>span:first-child{display:flex}.ui-foundations-preview .ap-commerce-bag>span:first-child>svg{width:26px;height:26px}.ui-foundations-preview .ap-commerce-count{color:#fff;font-variant-numeric:tabular-nums;background:#dc143c;border-radius:999px;outline:2px solid #fff;place-items:center;min-width:20px;height:20px;padding:0 4px;font-size:12px;font-weight:600;display:grid;position:absolute;top:-2px;left:22px}.ui-foundations-preview .ap-commerce-flight{z-index:2;pointer-events:none;position:absolute}.ui-foundations-preview .ap-message-composer{background:var(--ap-paper);border-radius:18px;padding:8px}.ui-foundations-preview .ap-message input{border:1px solid var(--fnd-line);background:var(--ap-soft);width:100%;min-width:0;min-height:44px;color:var(--fnd-heading);font:inherit;border-radius:10px;padding:10px 12px;font-size:1rem}.ui-foundations-preview .ap-message input::placeholder{color:var(--ap-muted)}.ui-foundations-preview .ap-message-result{align-items:flex-end;min-height:48px;margin-bottom:8px;display:flex}.ui-foundations-preview .ap-message-outgoing{background:var(--ap-paper);width:100%;color:var(--fnd-heading);overflow-wrap:anywhere;border:0;border-radius:18px;padding:14px 44px 14px 16px;font-size:1rem;font-weight:500;position:relative}.ui-foundations-preview .ap-message-outgoing[hidden]{display:none}.ui-foundations-preview .ap-message-check{color:var(--fnd-success);display:flex;position:absolute;top:calc(50% - 8px);right:16px}.ui-foundations-preview .ap-message-check>svg,.ui-foundations-preview .ap-message-input-row>button>svg{width:16px;height:16px}.ui-foundations-preview .ap-message-input-row{align-items:center;gap:10px;display:flex}.ui-foundations-preview .ap-message-input-row>input{flex:1}.ui-foundations-preview .ap-message-input-row>button{border:0;border-radius:50%;width:44px;min-width:44px;height:44px;padding:0}.ui-foundations-preview .ap-message-input-row>button>.ap-message-send-icon{width:18px;height:18px;translate:-1px;rotate:45deg}.ui-foundations-preview .ap-message-input-row>button:disabled{opacity:.45;cursor:not-allowed}.ui-foundations-preview .ap-checklist{background:var(--ap-paper);border:0;border-radius:18px;width:340px;padding:8px}.ui-foundations-preview .ap-checklist-header{color:var(--fnd-heading);padding:12px}.ui-foundations-preview .ap-checklist-header strong,.ui-foundations-preview .ap-checklist-header small{display:block}.ui-foundations-preview .ap-checklist-header strong{font-size:1rem;font-weight:600}.ui-foundations-preview .ap-checklist-header small{color:var(--example-secondary-text,var(--ap-muted));font-variant-numeric:tabular-nums;margin-top:2px;font-size:.875rem;font-weight:500}.ui-foundations-preview .ap-checklist-items{flex-direction:column;gap:4px;padding:4px 0;display:flex}.ui-foundations-preview .ap-checklist-item{min-height:44px;color:var(--fnd-heading);cursor:pointer;border-radius:10px;align-items:center;gap:12px;padding:8px 12px;display:flex}.ui-foundations-preview .ap-checklist-control{flex:none;width:20px;height:20px;display:flex;position:relative}.ui-foundations-preview .ap-checklist-item input{appearance:none;border:1px solid var(--fnd-line-medium);background:var(--ap-soft);cursor:pointer;border-radius:6px;width:20px;height:20px;margin:0}.ui-foundations-preview .ap-checklist-item input:checked{border-color:var(--ap-ink);background:var(--ap-ink)}.ui-foundations-preview .ap-checklist-mark{width:12px;height:12px;color:var(--ap-paper);opacity:0;pointer-events:none;display:flex;position:absolute;inset:4px}.ui-foundations-preview .ap-checklist-mark>svg{width:12px;height:12px}.ui-foundations-preview .ap-checklist-control>input:checked+.ap-checklist-mark{opacity:1}.ui-foundations-preview .ap-checklist-item span{font-size:1rem;font-weight:500}.ui-foundations-preview .ap-checklist-item[data-complete=true]{background:color-mix(in srgb,var(--ap-soft)60%,var(--ap-paper))}.ui-foundations-preview .ap-checklist-item[data-complete=true]>span:last-child{color:var(--example-secondary-text,var(--ap-muted));text-decoration:line-through}@media (forced-colors:active){.ui-foundations-preview .ap-checklist-item input{appearance:auto}.ui-foundations-preview .ap-checklist-mark{display:none}}@media (max-width:400px){.ui-foundations-preview .ap-commerce{gap:24px}.ui-foundations-preview .ap-message-input-row{gap:8px}}
.ui-foundations-preview .animation-principles-preview{width:100%;min-width:0;min-height:720px;color:var(--fnd-heading);--ap-paper:var(--preview-neutral-ffffff,#fff);--ap-soft:var(--preview-neutral-f4f4f5,#f4f4f5);--ap-muted:var(--preview-neutral-71717b,#71717b);--ap-ink:var(--preview-neutral-3e3e3e,#3e3e3e);flex-direction:column;justify-content:center;align-items:center;padding:100px 24px 96px;font-size:14px;line-height:1.5;display:flex}.ui-foundations-preview .animation-principles-preview *,.ui-foundations-preview .animation-principles-preview :before,.ui-foundations-preview .animation-principles-preview :after{box-sizing:border-box}.ui-foundations-preview .ap-stack{flex-direction:column;align-items:center;gap:96px;width:100%;display:flex}.ui-foundations-preview .ap-target{flex:none;max-width:100%;position:relative}.ui-foundations-preview .ap-row{align-items:center;gap:10px;display:flex}.ui-foundations-preview .ap-button{white-space:nowrap;border:1px solid var(--fnd-line);background:var(--ap-paper);min-height:44px;color:var(--fnd-heading);font:inherit;cursor:pointer;box-shadow:var(--shadow-fnd-control);border-radius:12px;flex:none;justify-content:center;align-items:center;gap:8px;padding:9px 16px;font-weight:500;transition:background-color .15s ease-out,border-color .15s ease-out;display:inline-flex}.ui-foundations-preview .ap-button--primary{background:var(--ap-ink);color:var(--ap-paper);border-color:#0000}@media (hover:hover){.ui-foundations-preview .ap-button:hover{background:var(--fnd-page);border-color:var(--fnd-line-medium)}.ui-foundations-preview .ap-button--primary:hover{background:var(--preview-neutral-505050,#505050);border-color:#0000}}.ui-foundations-preview .animation-principles-preview :is(button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--fnd-heading);outline-offset:4px}.ui-foundations-preview .animation-principles-preview svg{flex:none}.ui-foundations-preview .animation-principles-preview small{color:var(--ap-muted)}.ui-foundations-preview .ap-measure{pointer-events:none;text-align:center;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 48px);display:flex;position:absolute;inset:calc(100% + 12px) auto auto 50%;translate:-50%}.ui-foundations-preview .ap-measure svg{fill:var(--value-leader-color);stroke:var(--value-leader-color);stroke-width:1px}.ui-foundations-preview .ap-measure b{color:var(--fnd-heading);font:700 12px/1.5 var(--font-mono);font-variant-numeric:tabular-nums}.ui-foundations-preview .animation-principles-preview[data-values=false] .ap-measure{opacity:0;visibility:hidden}.ui-foundations-preview .ap-pass small{letter-spacing:.08em;font-size:10px;font-weight:600}.ui-foundations-preview .ap-tooltip-target{position:relative}.ui-foundations-preview .ap-copy-link{width:48px;height:48px;box-shadow:none;border:0;border-radius:12px;padding:12px}.ui-foundations-preview .ap-copy-link>svg{width:20px;height:20px}.ui-foundations-preview .ap-tooltip{background:var(--ap-ink);width:max-content;max-width:260px;color:var(--ap-paper);pointer-events:none;border-radius:10px;padding:8px 12px;font-size:14px;font-weight:500;position:absolute;bottom:calc(100% + 12px);left:50%;translate:-50%}.ui-foundations-preview .ap-tooltip[data-visible=true]{pointer-events:auto}.ui-foundations-preview .ap-tooltip:before{content:"";top:100%;height:12px;position:absolute;inset-inline:0}.ui-foundations-preview .ap-tooltip:after{content:"";background:inherit;width:7px;height:7px;position:absolute;bottom:-3px;left:calc(50% - 3px);rotate:45deg}.ui-foundations-preview .ap-code-form{flex-direction:column;align-items:flex-start;width:420px;display:flex}.ui-foundations-preview .ap-email-row{border-radius:18px;align-items:center;gap:8px;width:100%;padding:8px;display:flex}.ui-foundations-preview .ap-email-row>button{min-height:44px;box-shadow:none;border:0;border-radius:10px;padding:10px 16px;font-size:1rem;font-weight:500}.ui-foundations-preview .ap-code-form label{margin-bottom:8px;font-size:1rem;font-weight:500}.ui-foundations-preview .ap-code-form input{border:1px solid var(--fnd-line);background:var(--ap-soft);width:100%;min-width:0;height:44px;color:var(--fnd-heading);font:inherit;border-radius:10px;flex:1;padding:0 12px;font-size:1rem}.ui-foundations-preview .animation-principles-preview .ap-code-form input:focus-visible{border-color:var(--fnd-line-medium);outline:none}.ui-foundations-preview .animation-principles-preview .ap-code-form input[aria-invalid=true]:focus-visible{outline:none}.ui-foundations-preview .ap-code-form input::placeholder{color:var(--ap-muted)}.ui-foundations-preview .animation-principles-preview .ap-code-form input[aria-invalid=true]{border:2px solid var(--fnd-danger)}.ui-foundations-preview .ap-form-result{min-height:21px;color:var(--example-secondary-text,var(--ap-muted));overflow-wrap:anywhere;margin-top:8px;font-size:14px}.ui-foundations-preview .ap-form-result[data-invalid=true]{color:var(--fnd-danger)}.ui-foundations-preview .ap-pass-perspective{width:340px;height:232px}.ui-foundations-preview .ap-pass-button{width:100%;height:100%;color:inherit;font:inherit;text-align:center;cursor:pointer;transform-style:preserve-3d;background:0 0;border:0;border-radius:18px;padding:0;display:block}.ui-foundations-preview .ap-pass{width:100%;height:100%;transform-style:preserve-3d;display:block;position:relative}.ui-foundations-preview .ap-pass-face{background:var(--ap-paper);backface-visibility:hidden;border:0;border-radius:18px;flex-direction:column;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.ui-foundations-preview .ap-pass[data-solid=false] .ap-pass-face{backface-visibility:visible}.ui-foundations-preview .ap-pass[data-solid=false]:not([data-face=back]) .ap-pass-back,.ui-foundations-preview .ap-pass[data-solid=false][data-face=back] .ap-pass-front{visibility:hidden}.ui-foundations-preview .ap-pass[data-solid=false] .ap-pass-back{transform:none}.ui-foundations-preview .ap-pass-symbol{background:var(--ap-soft);width:44px;height:44px;color:var(--ap-ink);border-radius:12px;place-items:center;display:grid}.ui-foundations-preview .ap-pass-symbol>svg{width:24px;height:24px}.ui-foundations-preview .ap-pass-face>strong{color:var(--fnd-heading);margin-top:12px;font-size:20px;font-weight:600}.ui-foundations-preview .ap-pass-caption{color:var(--example-secondary-text,var(--ap-muted));margin-top:4px;font-size:14px}.ui-foundations-preview .ap-pass-bottom{color:var(--example-secondary-text,var(--ap-muted));justify-content:center;align-items:center;gap:8px;margin-top:auto;font-size:14px;font-weight:500;display:flex}.ui-foundations-preview .ap-pass-bottom>svg{width:14px;height:14px}.ui-foundations-preview .ap-pass-back{align-items:center;transform:rotateY(180deg)}.ui-foundations-preview .ap-pass-back>strong{font:600 28px var(--font-mono);letter-spacing:.04em;margin-top:8px}.ui-foundations-preview .ap-ticket-bars{background:repeating-linear-gradient(90deg,var(--ap-ink)0 2px,transparent 2px 5px,var(--ap-ink)5px 6px,transparent 6px 10px,var(--ap-ink)10px 14px,transparent 14px 17px);width:170px;height:40px;margin-top:16px}.ui-foundations-preview .ap-reduced-note{color:var(--ap-muted);text-align:center;margin:24px 0 0;font-size:12px;display:none}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .ap-reduced-note{display:block}.ui-foundations-preview .animation-principles-preview *,.ui-foundations-preview .animation-principles-preview :before,.ui-foundations-preview .animation-principles-preview :after{transition:none!important;animation:none!important}}@media (max-width:400px){.ui-foundations-preview .animation-principles-preview{padding-inline:16px}}
.ui-foundations-preview .idg-drag-stage{-webkit-user-select:none;user-select:none;place-items:center;width:360px;max-width:100%;min-height:168px;display:grid}.ui-foundations-preview .idg-pay-track{background:var(--ap-soft);width:100%;color:var(--fnd-heading);font:inherit;text-align:center;touch-action:pan-y;-webkit-tap-highlight-color:transparent;border:0;border-radius:22px;padding:9px;display:block}.ui-foundations-preview .idg-pay-rail{height:64px;display:block;position:relative}.ui-foundations-preview .idg-pay-label{white-space:nowrap;pointer-events:none;justify-content:center;align-items:center;font-size:1rem;font-weight:500;line-height:1.5;display:flex;position:absolute;inset:0}.ui-foundations-preview .idg-pay-handle{background:var(--ap-paper);width:64px;height:64px;color:var(--fnd-heading);cursor:grab;touch-action:pan-y;border:0;border-radius:14px;place-items:center;display:grid;position:relative}.ui-foundations-preview .idg-pay-track[data-dragging=true],.ui-foundations-preview .idg-pay-track[data-dragging=true] .idg-pay-handle{cursor:grabbing}.ui-foundations-preview .idg-pay-track[data-paid=true],.ui-foundations-preview .idg-pay-track[data-paid=true] .idg-pay-handle{cursor:default}.ui-foundations-preview .idg-dismiss-stage{touch-action:pan-y;-webkit-user-select:none;user-select:none;width:400px;max-width:100%;padding:6px;overflow:clip}.ui-foundations-preview .idg-dismiss-slot{min-height:72px;display:grid}.ui-foundations-preview .idg-notification,.ui-foundations-preview .idg-dismissed{min-width:0;min-height:72px;color:var(--fnd-heading);grid-area:1/1;align-items:center;font-size:1rem;font-weight:500;display:flex;position:relative}.ui-foundations-preview .idg-notification{background:var(--ap-paper);cursor:grab;touch-action:pan-y;border:0;border-radius:16px;gap:12px;padding:12px}.ui-foundations-preview .idg-notification-icon{background:var(--ap-paper);border-radius:12px;flex:none;place-items:center;width:48px;height:48px;font-size:24px;display:grid}.ui-foundations-preview .idg-notification-copy{flex-direction:column;flex:1;gap:0;min-width:0;line-height:1.5;display:flex}.ui-foundations-preview .idg-notification-copy strong{font-size:1rem;font-weight:600}.ui-foundations-preview .idg-notification:active{cursor:grabbing}.ui-foundations-preview .idg-notification[hidden],.ui-foundations-preview .idg-dismissed[hidden]{display:none}.ui-foundations-preview .idg-dismiss-button,.ui-foundations-preview .idg-undo-button{min-width:44px;min-height:44px;color:var(--fnd-heading);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:10px;display:inline-flex}.ui-foundations-preview .idg-dismiss-button:active,.ui-foundations-preview .idg-undo-button:active{opacity:.7}.ui-foundations-preview .idg-dismiss-button{background:var(--ap-paper);font-size:.8125rem;position:absolute;right:12px}.ui-foundations-preview .idg-dismiss-button:not(:focus){clip-path:inset(50%);white-space:nowrap;width:1px;min-width:0;height:1px;min-height:0;padding:0;overflow:hidden}.ui-foundations-preview .idg-dismissed{justify-content:space-between;gap:16px;padding-inline:16px 6px}.ui-foundations-preview .idg-dismissed>span{align-items:center;gap:8px;display:inline-flex}.ui-foundations-preview .idg-undo-button{text-underline-offset:3px;text-decoration:underline}.ui-foundations-preview .idg-dismiss-cue{color:var(--ap-muted);font-size:.8125rem;font-weight:400}.ui-foundations-preview .idg-dismiss-cue[data-ready=true]{color:var(--fnd-heading)}.ui-foundations-preview .idg-pay-track:focus-visible,.ui-foundations-preview .idg-dismiss-button:focus-visible,.ui-foundations-preview .idg-undo-button:focus-visible{outline:2px solid var(--fnd-heading);outline-offset:3px}
.ui-foundations-preview .id-lesson{--ap-muted:var(--example-secondary-text,var(--preview-neutral-5e5e5e,#5e5e5e));width:100%;container-type:inline-size}.ui-foundations-preview .id-lesson-layout{grid-template-columns:184px minmax(0,360px);align-items:center;gap:40px;width:584px;max-width:100%;margin-inline:auto;display:grid}.ui-foundations-preview .id-lesson-component{min-width:0;position:relative}.ui-foundations-preview .id-lesson-annotation{align-self:center}.ui-foundations-preview .id-lesson-annotation .id-lesson-measure{text-align:left;flex-direction:row-reverse;justify-content:flex-end;gap:16px;width:max-content;max-width:none;position:static;inset:auto;translate:none}.ui-foundations-preview .id-lesson-measure>svg{rotate:90deg}.ui-foundations-preview .id-lesson-measure>b{white-space:nowrap}.ui-foundations-preview .id-lesson-annotation p{color:var(--ap-muted);text-wrap:pretty;max-width:175px;margin:6px 0 0;font-size:12px;line-height:1.6}.ui-foundations-preview .id-lesson--below .id-lesson-layout{grid-template-columns:minmax(0,1fr);gap:24px;width:400px}.ui-foundations-preview .id-lesson--below .id-lesson-annotation{text-align:center;justify-self:center}.ui-foundations-preview .id-lesson--below .id-lesson-annotation .id-lesson-measure{text-align:center;flex-direction:column;gap:10px;margin-inline:auto}.ui-foundations-preview .id-lesson--below .id-lesson-measure>svg{rotate:none}.ui-foundations-preview .id-lesson--below .id-lesson-annotation p{max-width:none}.ui-foundations-preview .id-volume{width:100%;padding-block:8px}.ui-foundations-preview .id-volume-label{justify-content:space-between;align-items:center;margin-bottom:16px;padding-inline:2px;display:flex}.ui-foundations-preview .id-volume-label label{font-weight:600}.ui-foundations-preview .id-volume-label output{color:var(--fnd-heading);font:700 13px/1.5 var(--font-mono);font-variant-numeric:tabular-nums}.ui-foundations-preview .id-volume-range{appearance:none;cursor:ew-resize;touch-action:none;background:0 0;border-radius:8px;width:100%;height:44px;margin:0;display:block}.ui-foundations-preview .animation-principles-preview input.id-volume-range:focus{outline:none}.ui-foundations-preview .id-volume-range:focus-visible:not([data-pointer-focus=true])::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--ap-paper),0 0 0 5px var(--fnd-heading)}.ui-foundations-preview .id-volume-range:focus-visible:not([data-pointer-focus=true])::-moz-range-thumb{box-shadow:0 0 0 3px var(--ap-paper),0 0 0 5px var(--fnd-heading)}.ui-foundations-preview .id-volume-range::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--fnd-heading)0 var(--id-level),var(--fnd-line)var(--id-level)100%);border-radius:999px;height:6px}.ui-foundations-preview .id-volume-range::-moz-range-track{background:linear-gradient(to right,var(--fnd-heading)0 var(--id-level),var(--fnd-line)var(--id-level)100%);border-radius:999px;height:6px}.ui-foundations-preview .id-volume-range::-webkit-slider-thumb{appearance:none;box-sizing:border-box;border:3px solid var(--fnd-heading);background:var(--ap-paper);border-radius:50%;width:24px;height:24px;margin-top:-9px}.ui-foundations-preview .id-volume-range::-moz-range-thumb{box-sizing:border-box;border:3px solid var(--fnd-heading);background:var(--ap-paper);border-radius:50%;width:24px;height:24px}.ui-foundations-preview .id-mailboxes{background:var(--ap-paper);border:0;border-radius:18px;flex-direction:column;gap:4px;width:min(100%,288px);margin-inline:auto;padding:8px;display:flex;position:relative}.ui-foundations-preview .id-mailbox-highlight{background:var(--ap-soft);pointer-events:none;border-radius:10px;height:48px;position:absolute;inset:8px 8px auto}.ui-foundations-preview .id-mailboxes button{width:100%;height:48px;color:var(--ap-muted);font:500 1rem/1.5 var(--font-sans);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:12px;padding:0 16px;display:flex;position:relative}.ui-foundations-preview .id-mailboxes button>svg{flex:none;width:20px;height:20px}.ui-foundations-preview .id-mailboxes button[aria-checked=true]{color:var(--fnd-heading);font-weight:600}@container (max-width:620px){.ui-foundations-preview .id-lesson-layout{grid-template-columns:minmax(0,1fr);gap:56px;width:360px}.ui-foundations-preview .id-lesson-annotation{justify-self:start}.ui-foundations-preview .id-lesson-annotation p{max-width:280px}}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .interaction-details-preview *,.ui-foundations-preview .interaction-details-preview :before,.ui-foundations-preview .interaction-details-preview :after{transition:none!important;animation:none!important}}
.ui-foundations-preview .core-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;width:100%;min-height:720px;padding:80px 28px;display:grid}.ui-foundations-preview .core-pair__item{flex-direction:column;justify-content:center;align-items:center;gap:24px;min-width:0;display:flex}.ui-foundations-preview .core-pair__scene{flex:1;justify-content:center;align-items:center;width:100%;min-width:0;display:flex}.ui-foundations-preview .core-pair--reading{grid-template-columns:minmax(0,1fr);gap:32px}.ui-foundations-preview .core-pair--reading .core-pair__item{align-items:flex-start;gap:12px;width:100%;max-width:980px;margin-inline:auto}.ui-foundations-preview .core-pair--reading .core-pair__scene{justify-content:flex-start}.ui-foundations-preview .core-example{width:360px;min-width:0;max-width:100%;color:var(--preview-neutral-3e3e3e,#3e3e3e);font-size:16px}.ui-foundations-preview .core-example>:not(.core-guide,.core-feedback){animation:.22s ease-out 40ms backwards radius-spring-open}.ui-foundations-preview .core-example h3{letter-spacing:-.025em;margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.2}.ui-foundations-preview .core-surface,.ui-foundations-preview .core-field-surface{border:1px solid var(--preview-neutral-e4e4e7,#e4e4e7);background:var(--preview-neutral-ffffff,#fff);border-radius:16px;padding:24px;box-shadow:0 8px 24px #09090b0b,0 1px 3px #09090b09}.ui-foundations-preview .core-field-surface{background:var(--preview-neutral-f4f4f5,#f4f4f5)}.ui-foundations-preview .core-label{margin-bottom:8px;font-size:14px;font-weight:500;display:block}.ui-foundations-preview .core-input{border:1px solid var(--preview-neutral-71717b,#71717b);background:var(--preview-neutral-ffffff,#fff);width:100%;min-width:0;height:44px;color:var(--preview-neutral-3e3e3e,#3e3e3e);border-radius:8px;padding:0 12px;font-size:16px;display:block}.ui-foundations-preview .core-input::placeholder{color:var(--preview-neutral-71717b,#71717b);opacity:1}.ui-foundations-preview .core-input--blended{background:var(--preview-neutral-f4f4f5,#f4f4f5);border-color:var(--preview-neutral-e4e4e7,#e4e4e7)}.ui-foundations-preview .core-input--distinct{background:var(--preview-neutral-ffffff,#fff);border-color:var(--preview-neutral-71717b,#71717b)}.ui-foundations-preview .core-example :is(input,button):focus-visible{outline:2px solid var(--preview-neutral-3e3e3e,#3e3e3e);outline-offset:3px}.ui-foundations-preview .core-control-row,.ui-foundations-preview .core-button-row,.ui-foundations-preview .core-target-row{align-items:center;gap:12px;display:flex}.ui-foundations-preview .core-control-row input{flex:1}.ui-foundations-preview .core-button-row{flex-wrap:wrap}.ui-foundations-preview .core-button{background:var(--preview-neutral-3e3e3e,#3e3e3e);height:40px;max-height:40px;color:var(--preview-neutral-ffffff,white);white-space:nowrap;cursor:pointer;border:1px solid #0000;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:500;display:inline-flex}.ui-foundations-preview .core-button--outline{background:var(--preview-neutral-ffffff,white);color:var(--preview-neutral-3e3e3e,#3e3e3e);border-color:var(--preview-neutral-d4d4d8,#d4d4d8)}.ui-foundations-preview .core-button:hover{background:var(--preview-neutral-505050,#505050);color:var(--preview-neutral-ffffff,white)}.ui-foundations-preview .core-button--outline:hover{background:var(--preview-neutral-f4f4f5,#f4f4f5);color:var(--preview-neutral-3e3e3e,#3e3e3e)}.ui-foundations-preview .core-example .lucide{flex:none;width:16px;height:16px}.ui-foundations-preview .core-notes{text-align:center;width:100%;max-width:420px;min-height:48px}.ui-foundations-preview .core-guide{color:var(--preview-neutral-52525b,#52525b);margin:0;font-size:14px;font-weight:500;line-height:1.5}.ui-foundations-preview .core-guide__values{font-family:var(--font-mono);margin-top:8px;font-size:12px;font-weight:400;display:block}.ui-foundations-preview .core-feedback{min-height:42px;color:var(--preview-neutral-52525b,#52525b);margin:12px 0 0;font-size:13px;line-height:1.6}.ui-foundations-preview .core-support{color:var(--preview-neutral-52525b,#52525b);margin:0 0 20px;font-size:14px;line-height:1.6}.ui-foundations-preview .core-target-row{min-height:56px}.ui-foundations-preview .core-icon-button{background:var(--preview-neutral-ffffff,white);color:var(--preview-neutral-3e3e3e,#3e3e3e);cursor:pointer;border-radius:8px;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.ui-foundations-preview .core-icon-button:hover,.ui-foundations-preview .core-icon-button[aria-pressed=true]{background:var(--preview-neutral-e4e4e7,#e4e4e7)}.ui-foundations-preview .core-target-guide{border:1px dashed var(--preview-neutral-71717b,#71717b);border-radius:inherit;pointer-events:none;position:absolute;inset:0}.ui-foundations-preview .core-wrap-preview{flex-direction:column;justify-content:center;align-items:center;gap:32px;min-height:720px;padding:80px 24px;display:flex;container-type:inline-size}.ui-foundations-preview .core-wrap{text-align:center}.ui-foundations-preview .core-wrap__text{align-items:center;min-height:160px;display:flex;position:relative}.ui-foundations-preview .core-wrap__bounds{border-inline:1px dashed var(--preview-neutral-d4d4d8,#d4d4d8);pointer-events:none;position:absolute;inset:0}.ui-foundations-preview .core-wrap h3{overflow-wrap:anywhere;width:100%;margin:0;font-size:40px;line-height:1.1}@container (max-width:400px){.ui-foundations-preview .core-wrap h3{font-size:clamp(24px,9cqi,40px)}}.ui-foundations-preview .core-reading{width:100%}.ui-foundations-preview .core-reading-copy{max-width:100%}.ui-foundations-preview .core-reading-heading{width:100%;height:12px;color:var(--fnd-skeleton);pointer-events:none;margin-bottom:40px;display:block}.ui-foundations-preview .core-reading-copy>p{margin:0;font-size:16px;line-height:1.6}.ui-foundations-preview .core-numeric-row{white-space:nowrap;align-items:baseline;gap:10px;display:flex}.ui-foundations-preview .core-numeric-row strong{font-size:clamp(24px,2.6vw,36px);font-weight:600;line-height:1.2}.ui-foundations-preview .core-numeric-row>span{color:var(--preview-neutral-52525b,#52525b);font-size:14px}.ui-foundations-preview .core-number-card{flex-direction:column;gap:32px;display:flex}.ui-foundations-preview .core-number-header{justify-content:flex-start;align-items:center;display:flex}.ui-foundations-preview .core-number-header input:checked+.core-period-option{background:var(--fnd-card)}.dark .ui-foundations-preview .core-number-header input:checked+.core-period-option{background:var(--fnd-field)}.ui-foundations-preview .core-number-skeleton{max-width:100%;fill:var(--fnd-skeleton);flex:none;display:block}.ui-foundations-preview .core-number-card .core-numeric-row{gap:16px}.ui-foundations-preview .core-number-card .core-numeric-row strong{flex:none;font-size:clamp(2rem,4vw,3rem)}.ui-foundations-preview .core-status{align-items:center;gap:8px;min-height:32px;margin:0;font-size:16px;font-weight:500;display:flex}.ui-foundations-preview .core-status-dot{background:currentColor;border-radius:50%;width:12px;height:12px}.ui-foundations-preview .core-press-card{flex-direction:column;gap:28px;display:flex}.ui-foundations-preview .core-press-action{align-items:center;min-height:44px;display:flex}.ui-foundations-preview .core-press-action--bookmark{width:40px;padding:0}.ui-foundations-preview .core-press-action--chip{border-radius:999px}.ui-foundations-preview .core-press-action .core-button[aria-pressed=true]{background:var(--fnd-heading);color:var(--fnd-white);border-color:var(--fnd-heading)}.ui-foundations-preview .core-press-card .core-feedback{margin-top:0}.ui-foundations-preview .core-status-card{--core-status-connected:#047857;--core-status-disconnected:#b91c1c;flex-direction:column;gap:28px;display:flex}.dark .ui-foundations-preview .core-status-card{--core-status-connected:var(--fnd-success);--core-status-disconnected:var(--fnd-danger)}.ui-foundations-preview .core-status-skeleton{fill:var(--fnd-skeleton);display:block}.ui-foundations-preview .core-status-footer{border-top:1px solid var(--fnd-line);padding-top:20px}.ui-foundations-preview .core-status-card .core-status{color:var(--fnd-heading)}.ui-foundations-preview .core-status-card .core-status[data-connected=true]{color:var(--core-status-connected)}.ui-foundations-preview .core-status-card .core-status[data-connected=false]{color:var(--core-status-disconnected)}.ui-foundations-preview .core-connection-switch{background:var(--preview-neutral-a1a1aa,#a1a1aa);border:0;border-radius:999px;flex-shrink:0;width:44px;height:24px;transition:background-color .16s;position:relative}.ui-foundations-preview .core-connection-switch[data-checked=true]{background:var(--fnd-heading)}.ui-foundations-preview .core-connection-switch__thumb{background:var(--fnd-white);border-radius:50%;width:20px;height:20px;transition:transform .16s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000029}.ui-foundations-preview .core-connection-switch[data-checked=true] .core-connection-switch__thumb{background:var(--fnd-card);transform:translate(20px)}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .core-connection-switch,.ui-foundations-preview .core-connection-switch__thumb{transition:none}}.ui-foundations-preview .core-drawer-window{background:var(--preview-neutral-f4f4f5,#f4f4f5);border-radius:8px;height:132px;margin-top:20px;position:relative;overflow:hidden}.ui-foundations-preview .core-drawer{border:1px solid var(--preview-neutral-e4e4e7,#e4e4e7);background:var(--preview-neutral-ffffff,#fff);border-radius:8px;padding:16px;position:absolute;inset:12px;transform:translate(calc(100% + 24px))}.ui-foundations-preview .core-drawer strong{font-size:14px;font-weight:500}.ui-foundations-preview .core-drawer p{margin:8px 0 0;font-size:13px;line-height:1.5}.ui-foundations-preview .core-motion-card .core-drawer{transition:none;animation:none}.ui-foundations-preview .core-lesson-preview .core-motion-card{min-height:380px}.ui-foundations-preview .core-motion-header{justify-content:flex-start;align-items:center;display:flex}.ui-foundations-preview .core-motion-panel-copy{margin-top:24px;display:block}.ui-foundations-preview .core-motion-replay{height:40px;font-family:var(--font-sans);gap:8px;padding:0 18px 0 14px;font-size:14px;font-weight:500;line-height:20px}.ui-foundations-preview .core-lesson-preview:is([data-example=press-feedback],[data-example=interruptible-motion]) :is(.core-button,.core-motion-replay){border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,white);height:40px;min-height:40px;max-height:40px;color:var(--fnd-heading);font-family:var(--font-sans);box-shadow:var(--shadow-fnd-control);border-radius:12px;font-size:14px;font-weight:500;line-height:20px}.ui-foundations-preview .core-lesson-preview:is([data-example=press-feedback],[data-example=interruptible-motion]) :is(.core-button,.core-motion-replay):hover{background:var(--fnd-page);border-color:var(--fnd-line-medium)}.ui-foundations-preview .core-lesson-preview:is([data-example=press-feedback],[data-example=interruptible-motion]) :is(.core-button,.core-motion-replay):active{background:var(--fnd-line-subtle)}.ui-foundations-preview .core-lesson-preview:is([data-example=press-feedback],[data-example=interruptible-motion]) :is(.core-button,.core-motion-replay):focus-visible{outline:2px solid var(--fnd-heading);outline-offset:2px}.ui-foundations-preview .core-lesson-preview[data-example=press-feedback] .core-button[aria-pressed=true]{background:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,white);border-color:#0000}.ui-foundations-preview .core-lesson-preview[data-example=press-feedback] .core-button[aria-pressed=true]:hover{background:var(--preview-neutral-505050,#505050);border-color:#0000}.ui-foundations-preview .core-lesson-preview[data-example=press-feedback] .core-button[aria-pressed=true]:active{background:var(--preview-neutral-3e3e3e,#3e3e3e);border-color:#0000}.ui-foundations-preview .core-motion-card .core-drawer-window{background:var(--fnd-page);border-radius:12px;height:252px;margin-top:28px}.ui-foundations-preview .core-motion-card .core-drawer{width:78%;transform:var(--core-motion-hidden,translateX(calc(100% + 24px)));padding:20px;inset:12px 12px 12px auto;box-shadow:0 2px 8px #0000000f}.ui-foundations-preview .core-motion-card[data-motion-example=sheet]{--core-motion-hidden:translateY(calc(100% + 24px))}.ui-foundations-preview .core-motion-card[data-motion-example=sheet] .core-drawer{width:auto;height:174px;inset:auto 12px 12px}.ui-foundations-preview .core-motion-card[data-motion-example=popover]{--core-motion-hidden:translateY(calc(-100% - 24px))}.ui-foundations-preview .core-motion-card[data-motion-example=popover] .core-drawer{width:82%;min-height:128px;inset:12px 12px auto auto}.ui-foundations-preview .core-motion-turn-point{z-index:1;color:var(--value-leader-color);pointer-events:none;border:0;border-radius:0;position:absolute}.ui-foundations-preview .core-motion-turn-point>span{background:var(--fnd-white);color:var(--fnd-heading);white-space:nowrap;border-radius:4px;padding:3px 6px;font-size:11px;font-weight:500;position:absolute;top:8px;left:8px}.ui-foundations-preview .core-motion-card[data-motion-example=popover] .core-motion-turn-point>span{top:auto;bottom:8px}@media (max-width:800px){.ui-foundations-preview .core-pair{grid-template-columns:minmax(0,1fr);gap:40px;padding:80px 20px}.ui-foundations-preview .core-example{width:420px}.ui-foundations-preview .core-reading{width:100%}}@media (max-width:380px){.ui-foundations-preview .core-control-row{flex-direction:column;align-items:stretch}.ui-foundations-preview .core-control-row input{flex:auto}.ui-foundations-preview .core-surface,.ui-foundations-preview .core-field-surface{padding:20px}}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .core-example>:not(.core-guide,.core-feedback){animation:.14s backwards radius-fade-open!important}.ui-foundations-preview .core-example .foundation-press:active{filter:none;transform:none}.ui-foundations-preview .core-drawer{transition:none!important;animation:none!important}.ui-foundations-preview .core-drawer[data-open=true]{transform:none}.ui-foundations-preview .core-drawer[data-open=false]{visibility:hidden}}
.ui-foundations-preview .lesson-guides{pointer-events:none;position:absolute;inset:0}.ui-foundations-preview .lesson-guide__shade{width:8px;color:var(--value-leader-color);pointer-events:none;position:absolute}.ui-foundations-preview .lesson-guide__leader{transform-origin:3px;pointer-events:none;align-items:center;gap:20px;display:flex;position:absolute;translate:0 -50%}.ui-foundations-preview .lesson-guide__leader>span{width:max-content;min-width:160px;color:var(--preview-neutral-3e3e3e,#3e3e3e);font:700 12px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;text-align:left;flex-shrink:0;gap:6px;display:grid}.ui-foundations-preview .lesson-guide__leader strong{color:var(--preview-neutral-52525b,#52525b);font-family:var(--font-sans);font-weight:500}.ui-foundations-preview .lesson-guide-mobile>span{text-align:left;color:var(--preview-neutral-3e3e3e,#3e3e3e);font-variant-numeric:tabular-nums;gap:6px;font-weight:700;display:grid}.ui-foundations-preview .lesson-guide-mobile strong{color:var(--preview-neutral-52525b,#52525b);font-family:var(--font-sans);font-weight:500}.ui-foundations-preview .lesson-guide__value-row{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.ui-foundations-preview .lesson-guide__value-row>span{color:var(--preview-neutral-52525b,#52525b);font-family:var(--font-sans);white-space:nowrap;font-weight:500}.ui-foundations-preview .lesson-guide__value-row>b{white-space:nowrap;font-weight:700}.ui-foundations-preview .lesson-guide-mobile{display:none}@media (max-width:1100px){.ui-foundations-preview .lesson-guide__leader{display:none}.ui-foundations-preview .lesson-guide-mobile{color:var(--value-leader-color);font:400 12px/1.5 var(--font-mono);flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:12px;display:flex}}
.ui-foundations-preview .core-focus-skeleton{max-width:100%;fill:var(--fnd-skeleton);display:block}.ui-foundations-preview .core-focus-test .core-focus-instruction{color:var(--fnd-body);margin:32px 0;font-size:16px;line-height:1.6}.ui-foundations-preview .core-focus-instruction kbd{font:inherit;color:var(--fnd-heading);font-weight:600}.ui-foundations-preview .core-focus-test .core-button-row{flex-direction:column;align-items:flex-start;gap:24px}.ui-foundations-preview .core-focus-test .core-button{border-color:var(--fnd-line);min-width:144px;color:var(--fnd-heading);box-shadow:var(--shadow-fnd-control);border-radius:12px;padding-inline:18px}.ui-foundations-preview .core-focus-test .core-feedback{min-height:24px;margin-top:24px}.ui-foundations-preview .core-focus-test[data-ring-visible=true] button,.ui-foundations-preview .core-focus-test[data-ring-visible=true] button:focus,.ui-foundations-preview .core-focus-test[data-ring-visible=true] button:focus-visible{outline:var(--core-focus-width)solid var(--fnd-heading);outline-offset:var(--core-focus-offset)}.ui-foundations-preview .core-focus-test[data-ring-visible=false] button,.ui-foundations-preview .core-focus-test[data-ring-visible=false] button:focus,.ui-foundations-preview .core-focus-test[data-ring-visible=false] button:focus-visible{outline:none}
.ui-foundations-preview .core-lesson-preview{flex-direction:column;justify-content:center;align-items:center;gap:32px;width:100%;min-height:720px;padding:88px 240px;display:flex}.ui-foundations-preview .core-lesson-stage{width:480px;max-width:100%;position:relative}.ui-foundations-preview .core-lesson-preview .core-example{box-sizing:border-box;outline-offset:-1px;background:var(--preview-neutral-ffffff,white);border:1px solid #0000;border-radius:20px;outline:1px solid #0000001a;width:100%;min-height:240px;padding:36px;box-shadow:0 2px 6px #0000000a}.ui-foundations-preview .core-lesson-preview .core-button{height:40px}.ui-foundations-preview .core-lesson-preview .core-feedback{min-height:24px;margin-bottom:0}.ui-foundations-preview .core-lesson-preview[data-example=line-length]{grid-template-rows:minmax(80px,1fr) auto minmax(80px,1fr);justify-content:stretch;place-items:start center;gap:0;padding-block:0;display:grid}.ui-foundations-preview .core-lesson-preview[data-example=line-length] .core-lesson-stage{grid-row:2;width:960px}.ui-foundations-preview .core-lesson-preview[data-example=line-length] .core-lesson-notes{grid-row:3;margin-top:32px;margin-bottom:24px}.ui-foundations-preview .core-lesson-preview[data-example=line-length] .core-example{justify-content:center;align-items:center;min-height:460px;display:flex;position:relative}.ui-foundations-preview .core-lesson-preview[data-example=line-length] .core-reading-copy{margin-inline:auto;position:relative}.ui-foundations-preview .core-lesson-preview[data-example=line-length] .lesson-guide__shade,.ui-foundations-preview .core-lesson-preview[data-example=line-length] .lesson-guide__leader{transition:color .16s}.ui-foundations-preview .reading-width-control{width:360px;max-width:100%;position:relative}.ui-foundations-preview .foundation-setting-cell:has(.reading-width-control){justify-content:center;min-height:130px;padding-bottom:38px}.ui-foundations-preview .foundation-setting-cell:has(.reading-width-control)>div{justify-content:center}.ui-foundations-preview .foundation-setting-cell:has(.reading-width-control)>span{display:none}.ui-foundations-preview .reading-width-control .foundation-setting-range{width:100%}.ui-foundations-preview .reading-width-stops{width:calc(100% - 18px);height:34px;margin:0 9px;position:absolute;top:calc(50% + 16px)}.ui-foundations-preview .reading-width-stops button{top:0;left:calc(var(--reading-stop)*100%/3);white-space:nowrap;text-align:center;color:var(--preview-neutral-65656d,#65656d);cursor:pointer;padding:12px 0 4px;font-size:12px;font-weight:600;line-height:18px;position:absolute;transform:translate(-50%)}.ui-foundations-preview .reading-width-control.image-outline-control{max-width:calc(100% - 96px)}.ui-foundations-preview .reading-width-stops.image-outline-stops button{left:calc(var(--reading-stop)*100%/5);width:24px}.ui-foundations-preview .image-outline-stops button>span{pointer-events:none;position:relative;left:50%;translate:-50%}.ui-foundations-preview .reading-width-stops.image-outline-stops button[data-tone=success]{color:var(--fnd-explanation-success)}.ui-foundations-preview .reading-width-stops.image-outline-stops button[data-tone=warning]{color:#c26912}.ui-foundations-preview .reading-width-stops.image-outline-stops button[data-tone=danger]{color:var(--fnd-explanation-danger)}.ui-foundations-preview .reading-width-stops button:first-child{--reading-stop:0}.ui-foundations-preview .reading-width-stops button:nth-child(2){--reading-stop:1}.ui-foundations-preview .reading-width-stops button:nth-child(3){--reading-stop:2}.ui-foundations-preview .reading-width-stops button:nth-child(4){--reading-stop:3}.ui-foundations-preview .reading-width-stops button:before{content:"";background:var(--preview-neutral-a1a1aa,#a1a1aa);border-radius:50%;width:4px;height:4px;position:absolute;top:0;left:50%;translate:-50%}.ui-foundations-preview .reading-width-stops button[aria-pressed=true]{font-weight:600}.ui-foundations-preview .reading-width-stops button[aria-pressed=true]:before{background:var(--preview-neutral-3e3e3e,#3e3e3e)}.ui-foundations-preview .reading-width-stops:where(:not([data-tone=neutral])) button:first-child,.ui-foundations-preview .reading-width-stops:where(:not([data-tone=neutral])) button:nth-child(4){color:#ff5268}.ui-foundations-preview .reading-width-stops:where(:not([data-tone=neutral])) button:nth-child(2){color:var(--fnd-success)}.ui-foundations-preview .reading-width-stops:where(:not([data-tone=neutral])) button:nth-child(3){color:#f28c28}.ui-foundations-preview .reading-width-stops button:before,.ui-foundations-preview .reading-width-stops button[aria-pressed=true]:before{background:currentColor}.ui-foundations-preview .core-lesson-preview[data-reading-status=Too\ short],.ui-foundations-preview .core-lesson-preview[data-reading-status=Too\ long]{--value-leader-color:#ff5268;--explanation-color:var(--fnd-explanation-danger)}.ui-foundations-preview .core-lesson-preview[data-reading-status=Ideal]{--value-leader-color:var(--fnd-success);--explanation-color:var(--fnd-explanation-success)}.ui-foundations-preview .core-lesson-preview[data-reading-status=Acceptable]{--value-leader-color:#f28c28;--explanation-color:var(--fnd-explanation-warning)}.ui-foundations-preview .reading-width-stops button:focus-visible{outline:2px solid var(--preview-neutral-3e3e3e,#3e3e3e);outline-offset:3px}.ui-foundations-preview .hit-size-stops button{left:calc(var(--reading-stop)*100%/4)}.ui-foundations-preview .hit-size-stops button:nth-child(n+2){color:var(--fnd-success)}.ui-foundations-preview .breathing-room-stops button{left:calc(var(--reading-stop)*100%/4)}.ui-foundations-preview .breathing-room-stops button:nth-child(2),.ui-foundations-preview .breathing-room-stops button:nth-child(3){color:var(--fnd-success)}.ui-foundations-preview .breathing-room-stops button:nth-child(4){color:#f28c28}.ui-foundations-preview .breathing-room-stops button:first-child,.ui-foundations-preview .breathing-room-stops button:last-child{color:var(--fnd-danger)}.ui-foundations-preview .content-width-stops button:nth-child(2),.ui-foundations-preview .content-width-stops button:nth-child(3){color:var(--fnd-success)}.ui-foundations-preview .content-width-stops button:first-child,.ui-foundations-preview .content-width-stops button:last-child{color:var(--fnd-danger)}.ui-foundations-preview .proximity-spacing-stops button{left:calc(var(--reading-stop)*100%/4)}.ui-foundations-preview .proximity-spacing-stops button:nth-child(2),.ui-foundations-preview .proximity-spacing-stops button:nth-child(3){color:var(--fnd-success)}.ui-foundations-preview .proximity-spacing-stops button:nth-child(4){color:#f28c28}.ui-foundations-preview .proximity-spacing-stops button:first-child,.ui-foundations-preview .proximity-spacing-stops button:last-child{color:var(--fnd-danger)}.ui-foundations-preview .divider-style-stops button{left:calc(var(--reading-stop)*100%/2)}.ui-foundations-preview .divider-style-stops button:first-child{color:var(--fnd-danger)}.ui-foundations-preview .divider-style-stops button:nth-child(2){color:var(--fnd-success)}.ui-foundations-preview .divider-style-stops button:nth-child(3){color:#f28c28}.ui-foundations-preview .leading-size-stops button{left:calc(var(--reading-stop)*100%/4)}.ui-foundations-preview .leading-size-stops button:nth-child(2),.ui-foundations-preview .leading-size-stops button:nth-child(3),.ui-foundations-preview .leading-size-stops button:nth-child(4){color:var(--fnd-success)}.ui-foundations-preview .leading-size-stops button:first-child,.ui-foundations-preview .leading-size-stops button:last-child{color:var(--fnd-danger)}.ui-foundations-preview .core-lesson-preview[data-example=line-length] .core-guide{transition:color .24s}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .core-lesson-preview[data-example=line-length] :is(.core-reading-copy,.lesson-guide__shade,.lesson-guide__leader,.core-guide){transition:none}}.ui-foundations-preview .core-lesson-notes{text-align:center;width:760px;max-width:calc(100% + 320px)}.ui-foundations-preview .core-lesson-notes .core-guide{color:var(--explanation-color)}.ui-foundations-preview .core-lesson-notes .core-guide__values,.ui-foundations-preview .core-reading-screen-note{display:none}@media (max-width:1400px){.ui-foundations-preview .core-lesson-preview[data-example=line-length]{padding-inline:24px}.ui-foundations-preview .core-lesson-preview[data-example=line-length] .lesson-guide__leader{display:none}.ui-foundations-preview .core-lesson-preview[data-example=line-length] .lesson-guide-mobile{color:var(--value-leader-color);font:400 12px/1.5 var(--font-mono);flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:12px;display:flex}}@media (max-width:1100px){.ui-foundations-preview .core-lesson-preview{padding-inline:24px}.ui-foundations-preview .core-lesson-notes{max-width:100%}}@media (max-width:900px){.ui-foundations-preview .core-reading-screen-note{color:var(--preview-neutral-52525b,#52525b);margin:12px 0 0;font-size:12px;line-height:1.5;display:block}}@media (max-width:540px){.ui-foundations-preview .core-lesson-preview .core-example{padding:24px}}
.ui-foundations-preview .slider-preview-motion{--slider-resize:var(--preview-state-transition)}.ui-foundations-preview .slider-preview-motion .value-reveal--guide{transition:color var(--slider-resize),opacity .13s linear;animation:none;transform:none}.ui-foundations-preview .slider-preview-motion[data-values=true] .value-reveal--guide{opacity:1;visibility:visible}.ui-foundations-preview .slider-preview-motion[data-values=false] .value-reveal--guide{opacity:0;visibility:hidden}.ui-foundations-preview .slider-preview-motion .hit-area-button{transition:width var(--slider-resize),height var(--slider-resize)}.ui-foundations-preview .slider-preview-motion .hit-areas-row{transition:gap var(--slider-resize)}.ui-foundations-preview .slider-preview-motion .hit-area-gap,.ui-foundations-preview .slider-preview-motion .hit-area-dimension{transition:left var(--slider-resize),top var(--slider-resize),width var(--slider-resize),height var(--slider-resize),color var(--slider-resize),opacity .13s linear}.ui-foundations-preview .slider-preview-motion.core-lesson-preview .core-lesson-stage{animation:none;transform:none}.ui-foundations-preview .slider-preview-motion.core-lesson-preview .core-reading-copy{transition:width var(--slider-resize)}.ui-foundations-preview .slider-preview-motion.core-lesson-preview .lesson-guide__shade,.ui-foundations-preview .slider-preview-motion.core-lesson-preview .lesson-guide__leader{transition:color var(--slider-resize),opacity .13s linear}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .slider-preview-motion .value-reveal--guide,.ui-foundations-preview .slider-preview-motion .hit-area-button,.ui-foundations-preview .slider-preview-motion .hit-areas-row,.ui-foundations-preview .slider-preview-motion .hit-area-gap,.ui-foundations-preview .slider-preview-motion .hit-area-dimension,.ui-foundations-preview .slider-preview-motion.core-lesson-preview .core-reading-copy,.ui-foundations-preview .slider-preview-motion.core-lesson-preview .lesson-guide__shade,.ui-foundations-preview .slider-preview-motion.core-lesson-preview .lesson-guide__leader{transition:none}}
.ui-foundations-preview .rule-demo-preview{gap:24px}.ui-foundations-preview .rule-demo-preview[data-rule-group=text-wrap]{padding-inline:240px}.ui-foundations-preview .rule-demo-card{width:560px}.dark .ui-foundations-preview .rule-demo-card.border-overlay{outline-color:#ffffff1a}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights]{padding-inline:240px}.ui-foundations-preview .matched-height-guides{pointer-events:none;position:absolute;inset:0 -1px}.ui-foundations-preview .matched-height-guide{pointer-events:none;position:absolute;inset-inline:0;translate:0 -50%}.ui-foundations-preview .matched-height-guide__band{height:8px;color:var(--value-leader-color);pointer-events:none;position:absolute;inset-inline:0}.ui-foundations-preview .matched-height-guide__band--top{transform-origin:bottom;bottom:100%}.ui-foundations-preview .matched-height-guide__band--bottom{transform-origin:top;top:100%}.ui-foundations-preview .matched-height-guide__callout{transform-origin:3px;width:208px}.ui-foundations-preview .rule-demo-callout.matched-height-guide__callout{gap:20px}.ui-foundations-preview .matched-height-guide__callout>.matched-height-values{text-align:left;flex:1;grid-template-columns:minmax(max-content,1fr) max-content;gap:6px 12px;min-width:0}.ui-foundations-preview .matched-height-values__row{grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;display:grid}.ui-foundations-preview .matched-height-values__row>:first-child{font-family:var(--font-sans);color:var(--preview-neutral-52525b,#52525b);align-items:center;gap:6px;font-weight:500;display:flex}.ui-foundations-preview .matched-height-values__status{color:#ff5268;flex:none;width:12px;height:12px}.ui-foundations-preview .matched-height-values__status[data-matches=true]{color:var(--fnd-success)}.ui-foundations-preview .matched-height-values__row strong{color:var(--preview-neutral-3e3e3e,#3e3e3e);font-variant-numeric:tabular-nums;font-weight:700}.ui-foundations-preview .rule-demo-content h3{color:var(--preview-neutral-3e3e3e,#3e3e3e);letter-spacing:-.025em;margin:0;font-size:20px;font-weight:600;line-height:1.3}.ui-foundations-preview .rule-demo-label{color:var(--input-demo-text);margin-bottom:10px;font-size:14px;font-weight:500;display:block}.ui-foundations-preview .rule-demo-support{color:var(--preview-neutral-65656d,#65656d);margin:8px 0 24px;font-size:14px;line-height:1.6}.ui-foundations-preview .rule-demo-controls{align-items:center;gap:12px;display:flex}.ui-foundations-preview .rule-demo-card .rule-demo-controls input{width:0;min-width:0;height:var(--demo-input-height);border:1px solid var(--input-demo-border);background:var(--input-demo-fill);color:var(--input-demo-input-text);caret-color:var(--input-demo-input-text);flex:1;padding:0 14px;font-size:14px}.ui-foundations-preview .rule-demo-card .rule-demo-controls input::placeholder{color:var(--preview-neutral-6b6b73,#6b6b73);opacity:1}.ui-foundations-preview .rule-matched-pagination,.ui-foundations-preview .rule-matched-toolbar,.ui-foundations-preview .rule-matched-pages{align-items:center;gap:10px;display:flex}.ui-foundations-preview .rule-matched-pages{gap:6px}.ui-foundations-preview .rule-matched-button{box-sizing:border-box;height:var(--demo-control-height);border:1px solid var(--input-demo-border);background:var(--preview-neutral-ffffff,white);color:var(--input-demo-text);font:inherit;white-space:nowrap;cursor:pointer;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:500;display:inline-flex}.ui-foundations-preview .rule-matched-button svg{width:16px;height:16px}.ui-foundations-preview .rule-matched-number{width:var(--demo-control-height);height:var(--demo-input-height);padding:0}.ui-foundations-preview .rule-matched-number[aria-current=page]{background:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,white);border-color:var(--preview-neutral-3e3e3e,#3e3e3e)}.ui-foundations-preview .rule-matched-next,.ui-foundations-preview .rule-matched-icon{height:var(--demo-select-height)}.ui-foundations-preview .rule-matched-icon{width:var(--demo-control-height);padding:0}.ui-foundations-preview .rule-matched-export{height:var(--demo-input-height)}.ui-foundations-preview .rule-matched-button:disabled{opacity:.45;cursor:default}.ui-foundations-preview .rule-matched-more{position:relative}.ui-foundations-preview .rule-matched-menu{z-index:10;border:1px solid var(--preview-neutral-e4e4e7,#e4e4e7);background:var(--preview-neutral-ffffff,white);border-radius:8px;min-width:140px;padding:4px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 2px 6px #0000000a}.ui-foundations-preview .rule-matched-menu button{text-align:left;width:100%;min-height:40px;color:var(--preview-neutral-3e3e3e,#3e3e3e);cursor:pointer;border-radius:5px;padding:0 12px}.ui-foundations-preview .rule-matched-menu button:hover{background:var(--preview-neutral-f0f0f0,#f0f0f0)}.ui-foundations-preview .rule-demo-primary{height:min(40px,var(--demo-control-height));background:var(--preview-neutral-3e3e3e,#3e3e3e);max-height:40px;color:var(--preview-neutral-ffffff,white);white-space:nowrap;cursor:pointer;border:0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:500;display:inline-flex}.ui-foundations-preview .rule-demo-primary:hover{background:var(--preview-neutral-505050,#505050)}.ui-foundations-preview .rule-demo-controls .rule-demo-primary{padding-inline:18px}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] .rule-demo-card button{font-size:var(--text-sm,.875rem);font-weight:500;line-height:1.25rem}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] .rule-demo-card button svg{flex-shrink:0;width:14px;height:14px}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights][data-example=search] .rule-demo-controls input{border-radius:12px}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] :is(.rule-matched-button,.rule-demo-primary){border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,white);color:var(--fnd-heading);font-family:var(--font-sans);box-shadow:var(--shadow-fnd-control);border-radius:12px;line-height:20px;transition:background-color .15s ease-out,border-color .15s ease-out}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] :is(.rule-matched-button,.rule-demo-primary):hover:not(:disabled){border-color:var(--fnd-line-medium);background:var(--fnd-page)}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] :is(.rule-matched-button,.rule-demo-primary):active:not(:disabled){background:var(--fnd-line-subtle)}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] :is(.rule-matched-button,.rule-demo-primary):focus-visible{outline:2px solid var(--fnd-heading);outline-offset:2px}.ui-foundations-preview .rule-demo-preview[data-example=action-bar] .rule-demo-primary,.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] .rule-matched-number[aria-current=page]{background:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,white);border-color:#0000}.ui-foundations-preview .rule-demo-preview[data-example=action-bar] .rule-demo-primary:hover,.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] .rule-matched-number[aria-current=page]:hover{background:var(--preview-neutral-505050,#505050);border-color:#0000}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights] :is(.rule-matched-button,.rule-demo-primary){transition:none}}.ui-foundations-preview .rule-demo-primary svg,.ui-foundations-preview .rule-demo-target svg{flex-shrink:0;width:16px;height:16px}.ui-foundations-preview .rule-demo-actions{align-items:center;gap:16px;min-height:56px;display:flex}.ui-foundations-preview .rule-demo-target{width:var(--demo-target);height:var(--demo-target);border:1px solid var(--preview-neutral-aaaab2,#aaaab2);background:var(--preview-neutral-f4f4f5,#f4f4f5);color:var(--preview-neutral-3e3e3e,#3e3e3e);cursor:pointer;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:16px;display:inline-flex}.ui-foundations-preview .rule-demo-target[aria-pressed=true],.ui-foundations-preview .rule-demo-target[aria-current=page]{background:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,white)}.ui-foundations-preview .rule-demo-target:disabled{opacity:.45;cursor:default}.ui-foundations-preview .rule-demo-card :is(button,input,select,a):focus-visible{outline:2px solid var(--preview-neutral-3e3e3e,#3e3e3e);outline-offset:3px}.ui-foundations-preview .rule-demo-dismiss{justify-content:space-between;align-items:flex-start;gap:24px;min-height:88px;display:flex}.ui-foundations-preview .rule-demo-dismiss .rule-demo-support{margin-bottom:0}.ui-foundations-preview .rule-demo-reset{min-height:44px;color:var(--preview-neutral-3e3e3e,#3e3e3e);border:1px solid var(--preview-neutral-b9b9be,#b9b9be);cursor:pointer;border-radius:8px;padding:0 12px}.ui-foundations-preview .rule-wrap-specimen{width:100%;position:relative;container-type:inline-size}.ui-foundations-preview .rule-wrap-measure{visibility:hidden;pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.ui-foundations-preview .rule-wrap-measure>span{white-space:nowrap;width:max-content;display:block}.ui-foundations-preview .rule-demo-heading{width:260px;max-width:100%;min-height:2.36em}.ui-foundations-preview .rule-demo-heading h3,.ui-foundations-preview .rule-wrap-specimen--heading .rule-wrap-measure{font-family:var(--font-sans);letter-spacing:-.04em;font-size:clamp(24px,10cqi,44px);font-weight:600;line-height:1.18}.ui-foundations-preview .rule-wrap-specimen--heading{min-height:0}.ui-foundations-preview .rule-wrap-specimen--description{min-height:176px}.ui-foundations-preview .rule-wrap-highlight{background:color-mix(in srgb,var(--value-leader-color)12%,transparent);-webkit-box-decoration-break:clone;box-decoration-break:clone}.ui-foundations-preview .rule-demo-preview[data-rule-group=text-wrap] .rule-demo-card{min-height:320px}.ui-foundations-preview .rule-demo-eyebrow{color:var(--preview-neutral-65656d,#65656d);margin-bottom:12px;font-size:12px;display:block}.ui-foundations-preview .rule-wrap-copy-bars{width:100%;height:auto;fill:var(--fnd-skeleton);pointer-events:none;margin-top:40px;display:block}.ui-foundations-preview .rule-wrap-title-bar{pointer-events:none;width:100%;height:12px;margin-bottom:28px;display:block}.ui-foundations-preview .rule-wrap-title-bar,.ui-foundations-preview .rule-wrap-copy-bars{color:var(--fnd-skeleton)}.ui-foundations-preview .rule-demo-heading .rule-demo-support{margin-bottom:0}.ui-foundations-preview .rule-demo-description{width:100%;max-width:100%}.ui-foundations-preview .rule-demo-description-copy,.ui-foundations-preview .rule-wrap-specimen--description .rule-wrap-measure{font-family:var(--font-sans);letter-spacing:normal;font-size:clamp(16px,5cqi,22px);font-weight:400;line-height:1.55}.ui-foundations-preview .rule-demo-description-copy{width:100%;color:var(--preview-neutral-52525b,#52525b);text-wrap:wrap;margin:12px 0 0;font-size:18px}.ui-foundations-preview .rule-demo-link-box{width:100%;min-height:80px;font-family:var(--font-mono);word-break:normal;white-space:normal;margin:0;font-size:clamp(12px,3.3cqi,17px);line-height:1.7;overflow:visible}.ui-foundations-preview .rule-demo-link{container-type:inline-size}.ui-foundations-preview .rule-link-character{visibility:hidden;white-space:nowrap;pointer-events:none;width:max-content;position:fixed;left:-10000px}.ui-foundations-preview .rule-demo-link-box a{background:color-mix(in srgb,var(--value-leader-color)10%,transparent);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#3949ab;text-underline-offset:3px;text-decoration:underline}.dark .ui-foundations-preview .rule-demo-link-box a{color:#a5b4fc}.ui-foundations-preview .rule-demo-preview[data-example=link] .rule-demo-content{border-radius:inherit;overflow:visible}.ui-foundations-preview .rule-demo-callout{pointer-events:none;align-items:center;gap:12px;display:flex;position:absolute;top:50%;left:calc(100% + 12px);translate:0 -50%}.ui-foundations-preview .rule-demo-callout>span{color:var(--preview-neutral-52525b,#52525b);font:500 12px/1.4 var(--font-mono);white-space:nowrap;gap:5px;display:grid}.ui-foundations-preview .rule-demo-explanation{text-wrap:balance;max-width:760px;margin:0;font-size:14px;font-weight:500;line-height:1.6}.ui-foundations-preview .rule-demo-feedback{min-height:20px;color:var(--preview-neutral-65656d,#65656d);text-align:center;margin:0;font-size:12px}.ui-foundations-preview .rule-demo-mobile-metrics{display:none}@media (max-width:1100px){.ui-foundations-preview .rule-demo-preview{padding:88px 24px}.ui-foundations-preview .rule-demo-preview[data-rule-group=control-heights],.ui-foundations-preview .rule-demo-preview[data-rule-group=text-wrap]{padding-inline:24px}.ui-foundations-preview .rule-demo-callout{display:none}.ui-foundations-preview .rule-demo-mobile-metrics{color:var(--preview-neutral-52525b,#52525b);font:500 12px/1.4 var(--font-mono);flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:0;display:flex}}@media (max-width:540px){.ui-foundations-preview .rule-matched-pagination,.ui-foundations-preview .rule-matched-toolbar{flex-wrap:wrap}.ui-foundations-preview .rule-demo-actions{flex-wrap:wrap;gap:8px}}
.ui-foundations-preview .hit-areas-preview{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;min-height:720px;padding:88px 24px;display:flex}.ui-foundations-preview .hit-areas-figure{max-width:100%;margin:0}.ui-foundations-preview .hit-areas-diagram{padding:64px 64px 76px}.ui-foundations-preview .hit-areas-diagram.preview-enter{animation:none;transform:none}.ui-foundations-preview .hit-areas-row{align-items:center;gap:24px;display:flex}.ui-foundations-preview .hit-area-item{flex:none;width:56px;height:56px;position:relative}.ui-foundations-preview .hit-area-button{width:var(--hit-target);height:var(--hit-target);color:var(--preview-neutral-3e3e3e,#3e3e3e);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:50%;left:50%;translate:-50% -50%}.ui-foundations-preview .hit-area-button:focus-visible{outline:2px solid var(--preview-neutral-3e3e3e,#3e3e3e);outline-offset:2px}@media (hover:hover){.ui-foundations-preview .hit-area-button:hover{background:#3e3e3e14}.ui-foundations-preview .hit-area-button:hover .hit-area-visual{filter:brightness(.94)}}.ui-foundations-preview .hit-area-button:active{background:#3e3e3e29}.ui-foundations-preview .hit-area-button:active .hit-area-visual{filter:brightness(.86);transform:none}.ui-foundations-preview .hit-area-fill{color:var(--value-leader-color);pointer-events:none;position:absolute;inset:0}.ui-foundations-preview .hit-area-visual{width:var(--hit-visible);height:var(--hit-visible);pointer-events:none;flex:none;justify-content:center;align-items:center;transition:filter .12s ease-out;display:flex;position:relative}.ui-foundations-preview .hit-area-icon{box-sizing:border-box;flex:none;justify-content:center;align-items:center;width:24px;height:24px;padding:4px;display:flex;position:relative}.ui-foundations-preview .hit-area-icon-fill{color:var(--value-leader-color);background-color:color-mix(in srgb,currentColor 10%,transparent);pointer-events:none;position:absolute;inset:0}.ui-foundations-preview .hit-area-icon-fill:before{opacity:.36}.ui-foundations-preview .hit-area-icon svg{z-index:1;flex:none;width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px;position:relative;transform:none}.ui-foundations-preview .hit-area-visual--button{background:var(--preview-neutral-e4e4e7,#e4e4e7);border-radius:50%}.ui-foundations-preview .hit-area-button[aria-pressed=true] .hit-area-visual--button{background:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,white)}.ui-foundations-preview .hit-areas-preview[data-example=toolbar] .hit-area-button[aria-pressed=true] .hit-area-visual{background:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,white);border-radius:4px}.ui-foundations-preview .hit-area-dimension{pointer-events:none;color:var(--value-leader-color);display:block;position:absolute}.ui-foundations-preview .hit-area-dimension__line{background:currentColor;height:2px;position:absolute;inset:0}.ui-foundations-preview .hit-area-dimension__line:before,.ui-foundations-preview .hit-area-dimension__line:after{content:"";background:currentColor;border-radius:50%;width:6px;height:6px;position:absolute;top:-2px}.ui-foundations-preview .hit-area-dimension__line:before{left:-3px}.ui-foundations-preview .hit-area-dimension__line:after{right:-3px}.ui-foundations-preview .hit-area-dimension strong{color:var(--preview-neutral-3e3e3e,#3e3e3e);font:700 12px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;position:absolute;bottom:8px;left:50%;translate:-50%}.ui-foundations-preview .hit-area-dimension--width{left:calc((56px - var(--hit-target))/2);top:calc((56px - var(--hit-target))/2 - 16px);width:var(--hit-target);transform-origin:bottom;height:1px}.ui-foundations-preview .hit-area-dimension--visible{width:var(--hit-visible);transform-origin:top;height:1px;top:calc(100% + 20px);left:50%;translate:-50%}.ui-foundations-preview .hit-area-dimension--visible strong,.ui-foundations-preview .hit-area-dimension--gap strong{top:8px;bottom:auto}.ui-foundations-preview .hit-area-dimension--height{left:calc((56px - var(--hit-target))/2 - 20px);top:calc((56px - var(--hit-target))/2);height:var(--hit-target);transform-origin:100%;width:1px}.ui-foundations-preview .hit-area-dimension--height .hit-area-dimension__line{width:2px;height:100%}.ui-foundations-preview .hit-area-dimension--height .hit-area-dimension__line:before,.ui-foundations-preview .hit-area-dimension--height .hit-area-dimension__line:after{left:-2px;right:auto}.ui-foundations-preview .hit-area-dimension--height .hit-area-dimension__line:before{top:-3px}.ui-foundations-preview .hit-area-dimension--height .hit-area-dimension__line:after{top:auto;bottom:-3px}.ui-foundations-preview .hit-area-dimension--height strong{inset:50% 8px auto auto;translate:0 -50%}.ui-foundations-preview .hit-area-gap{left:calc(28px + var(--hit-target)/2);top:calc((56px - var(--hit-target))/2);width:var(--hit-gap);height:var(--hit-target);color:var(--value-leader-color);pointer-events:none;position:absolute}.ui-foundations-preview .hit-areas-preview[data-example=pages] .hit-areas-row{gap:var(--hit-gap)}.ui-foundations-preview .hit-areas-preview[data-example=pages] .hit-area-item{width:var(--hit-target)}.ui-foundations-preview .hit-areas-preview[data-example=pages] .hit-area-dimension--width{left:0}.ui-foundations-preview .hit-areas-preview[data-example=pages] :is(.hit-area-gap,.hit-area-dimension--gap){left:100%}.ui-foundations-preview .hit-areas-preview[data-example=pages] .hit-area-icon-fill{display:none}.ui-foundations-preview .hit-areas-preview[data-example=pages] .hit-area-visual{background:var(--preview-neutral-f4f4f5,#f4f4f5);border-radius:8px;width:48px;height:48px}.ui-foundations-preview .hit-areas-preview[data-example=pages] .hit-area-button[aria-pressed=true] .hit-area-visual{background:var(--preview-neutral-3e3e3e,#3e3e3e);color:var(--preview-neutral-ffffff,white)}.ui-foundations-preview .hit-areas-preview[data-example=pages] .hit-area-gap{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);background-position:0 0}.ui-foundations-preview .hit-areas-preview[data-example=pages] .hit-area-gap:before{content:none}.ui-foundations-preview .hit-areas-preview[data-example=dismiss] .hit-area-item{width:120px}.ui-foundations-preview .hit-areas-preview[data-example=dismiss] .hit-area-button{width:calc(104px + var(--hit-target) - 40px);background:0 0;border-radius:12px}.ui-foundations-preview .hit-areas-preview[data-example=dismiss] .hit-area-visual{box-sizing:border-box;border:1px solid var(--fnd-line);background:var(--preview-neutral-ffffff,white);width:104px;height:40px;color:var(--fnd-heading);box-shadow:var(--shadow-fnd-control);filter:none;border-radius:12px;gap:4px;transition:background-color .15s,border-color .15s}@media (hover:hover){.ui-foundations-preview .hit-areas-preview[data-example=dismiss] .hit-area-button:hover .hit-area-visual{background:var(--fnd-page);border-color:var(--fnd-line-medium)}}.ui-foundations-preview .hit-areas-preview[data-example=dismiss] .hit-area-button:active .hit-area-visual{background:var(--fnd-line-subtle)}.ui-foundations-preview .hit-areas-preview[data-example=dismiss] .hit-area-icon-fill{display:none}.ui-foundations-preview .hit-area-button-label{white-space:nowrap;font-size:14px;font-weight:500}.ui-foundations-preview .hit-areas-preview[data-example=dismiss] .hit-area-dimension--width{left:calc((56px - var(--hit-target))/2);width:calc(104px + var(--hit-target) - 40px)}.ui-foundations-preview .hit-areas-preview[data-example=dismiss] .hit-area-dimension--visible{width:104px}.ui-foundations-preview .hit-area-dimension--gap{left:calc(28px + var(--hit-target)/2);width:var(--hit-gap);transform-origin:top;height:1px;top:calc(100% + 20px)}.ui-foundations-preview .hit-areas-explanation{text-align:center;max-width:760px;color:var(--explanation-color);text-wrap:balance;margin:0;font-size:14px;font-weight:500;line-height:1.6}@media (max-width:420px){.ui-foundations-preview .hit-areas-preview{padding-inline:16px}.ui-foundations-preview .hit-areas-diagram{padding-inline:28px}}@media (prefers-reduced-motion:reduce){.ui-foundations-preview .hit-area-item,.ui-foundations-preview .hit-area-visual{transition:none}.ui-foundations-preview .hit-area-button:active .hit-area-visual{transform:none}}