.tp-card{--tp-sweetness:#cbbaeb;--tp-sourness:#d5f64e;--tp-bitterness:#ff634e;--tp-strength:#f8efde;--tp-freshness:#7eddd3;--tp-inactive:#332137;--tp-surface:#2b132f;--tp-lavender:#cbbaeb;box-sizing:border-box;background:var(--tp-surface);max-width:100%;color:var(--tp-strength);border:1px solid #f8efde24;border-radius:20px;margin:1.25rem 0;padding:16px;container-type:inline-size}.tp-card__head{align-items:center;gap:12px;margin-bottom:14px;display:flex}.tp-card__icon{width:36px;height:36px;color:var(--tp-lavender);background:#cbbaeb29;border-radius:10px;flex:none;place-items:center;display:grid}.tp-card__title{color:var(--tp-strength);margin:0;font-size:1rem;font-weight:600;line-height:1.2}.tp-card__subtitle{opacity:.68;margin:2px 0 0;font-size:.78rem}.tp-card__grid{grid-template-columns:minmax(0,1fr);gap:12px 20px;margin:0;padding:0;list-style:none;display:grid}.tp-metric{min-width:0}.tp-metric__row{justify-content:space-between;gap:8px;margin-bottom:6px;font-size:.82rem;display:flex}.tp-metric__label{color:var(--tp-color);font-weight:600}.tp-metric__value{opacity:.8;white-space:nowrap}.tp-metric__bar{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.tp-card .tp-metric__bar>span{background:var(--tp-inactive);border-radius:999px;height:8px}.tp-card .tp-metric__bar>span.is-on{background:var(--tp-color)}.tp-card__note{opacity:.65;margin:14px 0 0;font-size:.75rem}.step-chips{flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none;display:flex}.method-list .step-chips>li,.step-chips>li{background:0 0;border:0;border-radius:0;min-width:0;max-width:100%;padding:0;display:block}.step-chips .step-chip{box-sizing:border-box;max-width:100%;min-height:44px;color:inherit;background:0 0;border:1px solid #cbbaeb8c;border-radius:999px;align-items:center;gap:8px;padding:6px 14px 6px 8px;font-size:.86rem;line-height:1.2;text-decoration:none;display:inline-flex}.step-chips a.step-chip:hover,.step-chips a.step-chip:focus-visible{border-color:#cbbaeb}.step-chips .step-chip__img{object-fit:contain;background:0 0;flex:none;width:32px;height:32px}.step-chips .step-chip__name{overflow-wrap:anywhere;font-weight:600}.step-chips .step-chip__amount{opacity:.75;white-space:nowrap}.step-chips .step-chip__badge{color:#cbbaeb;white-space:nowrap;background:#cbbaeb29;border-radius:999px;padding:2px 8px;font-size:.72rem}.method-step__content{min-width:0}
