@layer components{.onboarding-layout_wrap{background-color:var(--background);background-image:radial-gradient(45rem 20rem at 92% -6%, color-mix(in srgb, var(--colors-vivid-orange) 14%, transparent), transparent 70%);background-repeat:no-repeat;flex-direction:column;flex:1;display:flex}.onboarding-layout_header,.onboarding-layout_main{width:var(--site-width);max-width:60rem;margin-inline:auto}.onboarding-layout_header{padding-top:var(--space-4)}.onboarding-layout_brand{width:clamp(8rem,24vw,10rem);display:block}.onboarding-layout_main{flex-direction:column;flex:1;display:flex}.profile-preview_wrap{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.profile-preview_label{color:var(--text-2);font-weight:var(--primary-bold)}.profile-preview_card{gap:var(--space-4);padding:var(--space-4);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-large);background-color:var(--background-3);flex-direction:column;display:flex}.profile-preview_head{align-items:center;gap:var(--space-3);display:flex}.profile-preview_avatar{--_color:var(--colors-vivid-yellow);--_on:var(--colors-on-vivid);width:var(--avatar-xlarge);aspect-ratio:1;border:var(--border-width-thick) solid var(--border-strong);border-radius:var(--radius-round);background-color:var(--_color);box-shadow:var(--shadow-offset-small);color:var(--_on);font-family:var(--secondary-family);font-size:var(--h4);font-weight:var(--secondary-bold);transition:background-color var(--move-duration) var(--ease-out);flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}.profile-preview_who{gap:var(--space-2);flex-direction:column;flex:1;min-width:0;display:flex}.profile-preview_name{font-weight:var(--secondary-bold);overflow-wrap:anywhere}.profile-preview_area{color:var(--text-2)}.profile-preview_tags{gap:var(--space-1);flex-wrap:wrap;display:flex}.profile-preview_empty{color:var(--text-2)}.profile-preview_empty[hidden]{display:none}.profile-preview_note{padding-top:var(--space-3);border-top:var(--border-width) dashed var(--border)}.onboarding-flow_wrap{gap:var(--space-4);padding-top:var(--space-4);flex-direction:column;display:flex}.onboarding-flow_top{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.onboarding-flow_eyebrow{color:var(--text-2);font-weight:var(--primary-bold);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;flex:auto}.onboarding-flow_progress{gap:var(--space-2);flex-direction:column;display:flex}.onboarding-flow_meta{justify-content:space-between;gap:var(--space-1);font-weight:var(--primary-bold);flex-wrap:wrap;display:flex}.onboarding-flow_name{color:var(--text-2)}.onboarding-flow_segments{gap:var(--space-1);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.onboarding-flow_segment{height:var(--space-1);border-radius:var(--radius-round);background-color:var(--border-subtle);transform-origin:0;transition:background-color var(--reveal-duration) var(--ease-out)}.onboarding-flow_segment.on{background-color:var(--text)}.onboarding-flow_main{gap:var(--space-4);grid-template-columns:minmax(0,1fr);align-items:start;display:grid}@media (min-width:64rem){.onboarding-flow_main{grid-template-columns:minmax(0, 1.6fr) minmax(var(--card-width-small), 1fr)}}.onboarding-flow_card{gap:var(--space-5);animation:onboarding-flow-rise var(--reveal-duration) var(--ease-out) backwards;flex-direction:column;display:flex}.onboarding-flow_intro{gap:var(--space-3);flex-direction:column;display:flex}.onboarding-flow_title{font-weight:var(--secondary-bold)}.onboarding-flow_title:focus-visible{outline:0}.onboarding-flow_lead,.onboarding-flow_hint{color:var(--text-2)}.onboarding-flow_hint.center{text-align:center}.onboarding-flow_step{gap:var(--space-5);animation:onboarding-flow-swap var(--reveal-duration) var(--ease-out) backwards;flex-direction:column;display:flex}.onboarding-flow_step[hidden]{display:none}.onboarding-flow_group{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.onboarding-flow_label{font-weight:var(--primary-bold)}.onboarding-flow_row{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.onboarding-flow_notice{padding:var(--space-3);border:var(--border-width-medium) solid var(--border-strong);border-radius:var(--radius-main);background-color:var(--status-free-background);font-weight:var(--primary-medium)}.onboarding-flow_notice.warn{background-color:var(--colors-secondary-red);border-style:dashed}.onboarding-flow_notice[hidden]{display:none}.onboarding-flow_dot{width:var(--icon-small);aspect-ratio:1;border:var(--border-width-thick) solid var(--border-strong);border-radius:var(--radius-round);background-color:var(--_dot);flex:none}.onboarding-flow_result{gap:var(--space-3);padding:var(--space-4);border:var(--border-width-medium) solid var(--border-strong);border-radius:var(--radius-large);background-color:var(--colors-secondary-yellow);animation:onboarding-flow-pop var(--reveal-duration) var(--ease-spring-soft) backwards;flex-direction:column;display:flex}.onboarding-flow_result[hidden]{display:none}.onboarding-flow_result_name{font-weight:var(--secondary-bold)}.onboarding-flow_setting{gap:var(--space-2);padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-main);background-color:var(--background);flex-direction:column;display:flex}.onboarding-flow_pages{gap:var(--space-2);flex-direction:column;display:flex}.onboarding-flow_page{align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-large);background-color:var(--background-3);transition:translate var(--move-duration) var(--ease-out);display:flex}@media (hover:hover){.onboarding-flow_page:hover{translate:0 var(--card-lift)}}.onboarding-flow_badge{width:var(--avatar-main);aspect-ratio:1;border:var(--border-width-thick) solid var(--border-strong);border-radius:var(--radius-main);background-color:var(--_badge);color:var(--colors-on-vivid);font-size:var(--text-large);flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}.onboarding-flow_page_text{gap:var(--space-1);flex-direction:column;flex:1;min-width:0;display:flex}.onboarding-flow_page_name{font-weight:var(--primary-bold)}.onboarding-flow_page_sub{color:var(--text-2)}.onboarding-flow_errors{gap:var(--space-1);padding:var(--space-3);border:var(--border-width-medium) dashed var(--border-strong);border-radius:var(--radius-main);background-color:var(--colors-vivid-yellow);color:var(--colors-on-vivid);font-size:var(--text-small);font-weight:var(--primary-bold);flex-direction:column;display:flex}.onboarding-flow_errors[hidden]{display:none}.onboarding-flow_actions{align-items:center;gap:var(--space-3);margin-inline:calc(var(--site-margin) * -1);padding:var(--space-5) var(--site-margin) var(--space-4);background-image:linear-gradient(transparent, var(--background) var(--space-4));display:flex;position:sticky;inset-block-end:0}.onboarding-flow_actions[hidden]{display:none}@media not (min-width:56rem){.onboarding-flow_actions{background-image:none;padding-top:0;position:static}}.onboarding-flow_back[hidden]{display:none}.onboarding-flow_next{flex:1;max-width:22rem;margin-inline-start:auto}@keyframes onboarding-flow-rise{0%{opacity:.2;translate:0 var(--space-3)}to{opacity:1;translate:0}}@keyframes onboarding-flow-swap{0%{opacity:.2;translate:0 var(--space-2)}to{opacity:1;translate:0}}@keyframes onboarding-flow-pop{0%{opacity:.2;scale:.8}to{opacity:1;scale:1}}}