.hub-head__icon{block-size:3.25rem;inline-size:3.25rem;color:var(--color-on-primary);background:var(--color-primary-fill);border-radius:1rem;flex:none;place-items:center;display:grid}.hub-ring{background:radial-gradient(closest-side, var(--color-surface) 78%, transparent 80%), conic-gradient(var(--emblem,var(--color-primary)) calc(var(--share,0) * 1turn), color-mix(in srgb, var(--emblem,var(--color-primary)) 16%, transparent) 0);text-align:center;border-radius:50%;flex:none;place-content:center;justify-items:center;block-size:4.5rem;inline-size:4.5rem;line-height:1;transition:background .3s;display:grid}.hub-ring strong{color:var(--color-ink);font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:1.375rem}.hub-ring small{color:var(--color-muted);margin-block-start:.2rem;font-size:.6875rem;font-weight:700}.hub-ring.is-lg{block-size:8.5rem;inline-size:8.5rem}.hub-ring.is-lg strong{font-size:2.75rem}.hub-lead{--emblem:var(--color-primary);gap:var(--space-5);padding:var(--space-5);border:1px solid color-mix(in srgb, var(--emblem) 36%, var(--color-border));background:radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--emblem) 14%, transparent), transparent 60%), var(--color-surface);border-radius:1.5rem;margin-block-end:var(--space-5);display:grid}.hub-lead__result{justify-items:center;gap:var(--space-2);text-align:center;display:grid}.hub-lead__result .eyebrow,.hub-lead__result h2{margin:0}.hub-lead__result h2{font-family:var(--font-display);font-size:1.375rem;font-weight:600}.hub-lead__skills{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));display:grid}.hub-skill{align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3);border:1px solid color-mix(in srgb, var(--emblem) 30%, var(--color-border));background:color-mix(in srgb, var(--emblem) 9%, var(--color-surface));border-radius:1rem;grid-template-columns:minmax(0,1fr) auto;transition:box-shadow .3s,border-color .3s;display:grid}.hub-skill.is-sent{border-color:var(--emblem);box-shadow:0 0 0 3px color-mix(in srgb, var(--emblem) 30%, transparent)}.hub-skill__name{color:var(--color-ink);font-weight:700}.hub-skill__bar{grid-column:1/-1}.hub-skill__bar,.hub-meter__bar{background:color-mix(in srgb, var(--emblem) 16%, var(--color-surface));border-radius:999px;block-size:.375rem;display:block;overflow:hidden}.hub-skill__bar i,.hub-meter__bar i{border-radius:inherit;background:var(--emblem);block-size:100%;transition:inline-size .3s;display:block}@media (min-width:64rem){.hub-lead__skills{grid-template-columns:repeat(4,minmax(0,1fr))}.hub-skill{grid-template-columns:minmax(0,1fr)}}@media (min-width:48rem){.hub-lead{padding:var(--space-6);grid-template-columns:auto minmax(0,1fr);align-items:center}.hub-lead__result{padding-inline-end:var(--space-4)}}.hub-stepper{border:1px solid var(--color-border-strong);background:var(--color-surface);border-radius:999px;grid-template-columns:2.5rem minmax(3.25rem,auto) 2.5rem;justify-self:start;align-items:center;display:inline-grid}.hub-stepper button{block-size:2.5rem;inline-size:2.5rem;color:var(--color-ink);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;display:grid}.hub-stepper button:hover{background:var(--color-surface-subtle)}.hub-stepper button:active{background:var(--color-surface-soft)}.hub-stepper button:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px}.hub-stepper button:disabled{opacity:.5;pointer-events:none}.hub-stepper output{color:var(--color-ink);font-family:var(--font-display);font-variant-numeric:tabular-nums;text-align:center;font-size:1.125rem;font-weight:600}.hub-tools{gap:var(--space-4);margin-block-end:var(--space-5);display:grid}@media (min-width:48rem){.hub-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-card--wide{grid-column:1/-1}}.hub-card{align-content:start;gap:var(--space-4);min-inline-size:0;padding:var(--space-5);border:1px solid color-mix(in srgb, var(--emblem) 30%, var(--color-border));background:color-mix(in srgb, var(--emblem) 6%, var(--color-surface));border-radius:1.25rem;display:grid}.hub-card__head{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.hub-card__head .eyebrow,.hub-card__head h2{margin:0}.hub-card__head h2{font-family:var(--font-display);font-size:1.25rem;font-weight:600}.hub-card__result{color:var(--color-ink);margin:0;font-weight:700}.hub-card__use{justify-self:start}.hub-raw{gap:var(--space-2);display:grid}.hub-raw label{color:var(--color-text-secondary-strong);font-size:.875rem;font-weight:700}.hub-raw__row{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.hub-raw input[type=range]{min-inline-size:0;accent-color:var(--emblem);flex:8rem}.hub-raw input[type=range]:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.hub-choice{border:1px solid var(--color-border);background:var(--color-surface);border-radius:999px;flex-wrap:wrap;justify-self:start;gap:.125rem;min-inline-size:0;margin:0;padding:.2rem;display:inline-flex}.hub-choice label{display:inline-flex;position:relative}.hub-choice input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.hub-choice span{min-block-size:2rem;padding-inline:var(--space-3);color:var(--color-text-secondary-strong);border-radius:999px;place-items:center;font-size:.8125rem;font-weight:700;display:grid}.hub-choice label:hover span{color:var(--color-ink);background:var(--color-surface-subtle)}.hub-choice input:checked+span{color:var(--color-on-primary);background:var(--color-primary-fill)}.hub-choice input:focus-visible+span{outline:3px solid var(--color-focus);outline-offset:1px}.hub-essay{box-sizing:border-box;inline-size:100%;min-inline-size:0;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-strong);color:var(--color-ink);background:var(--color-surface-control);font:inherit;resize:vertical;border-radius:1rem;line-height:1.6}.hub-essay:hover{border-color:var(--color-ink)}.hub-essay:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px}.hub-meter{gap:var(--space-2);display:grid}.hub-meter__count{color:var(--color-text-secondary-strong);font-variant-numeric:tabular-nums;font-size:.875rem}.hub-meter__count strong{color:var(--color-ink);font-size:1.125rem}.hub-meter.is-met .hub-meter__bar i{background:var(--color-success)}.hub-more{margin-block-end:var(--space-5)}.hub-more ul{margin:var(--space-2) 0 0;color:var(--color-muted);padding-inline-start:var(--space-5);font-size:.875rem;line-height:1.55}.hub-also h2{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:1.25rem;font-weight:600}.hub-also ul{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin:0;padding:0;list-style:none;display:grid}.hub-also a{align-items:center;gap:var(--space-3);min-block-size:3.5rem;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);color:var(--color-ink);background:var(--color-surface);border-radius:1rem;font-weight:700;text-decoration:none;transition:border-color .2s,translate .2s;display:flex}.hub-also a:hover{border-color:var(--color-primary);translate:0 -2px}.hub-also a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.hub-also svg{color:var(--color-primary);flex:none}.hub-also a .hub-also__go{color:var(--color-muted);margin-inline-start:auto}@media (prefers-reduced-motion:reduce){.hub-ring,.hub-skill,.hub-skill__bar i,.hub-meter__bar i,.hub-also a{transition:none}.hub-also a:hover{translate:none}}
